/*Standard Page CSS*/
/*KYLE*/
li > ul, li > ol, li > dl {
  margin-top: 0px;
}
#page header h1 {
  font-size: 4rem;
  text-transform: none;
}
#content-well h2, #content-well h3, #content-well h4, #content-well h5 {
  max-width:740px;
}
#content-well h2 {
  font: 3rem 'League Gothic', sans-serif;
  line-height: 1;
  margin-top: 40px;
}
#content-well p, #content-well ol, #content-well ul:not(.section-grid) {
  max-width: 740px;
}


#content-well p a, #content-well ol a {
  text-decoration:underline;
}


#content-well ul a {
  text-decoration:underline;
}


/*
#content-well ul:not(.toc) a {
  text-decoration:underline;
}
*/


.yellow-bullet {
  position: relative;
  padding-left: calc(0.5em + 15px);
}
.yellow-bullet::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0.6rem;
  background-color: #f6be00;
  height: 0.5em;
  width: 0.5em;
}


#other-logos {
    margin-bottom:0;
}
    
#other-logos .sure-logo {
    background: url('/brand/brand-identity/_img/sure-logo.jpg') center center no-repeat;
    background-size: contain;
    border: 1px solid #888b8d;
}
    
#other-logos .get-involved-logo {
    background: url('/brand/brand-identity/_img/get-involved-logo.jpg') center center no-repeat;
    background-size: contain;
    border: 1px solid #888b8d;
    height: 100%;
    width: 100%;
}

.panel-group {
    max-width: 870px;
    margin-top: 15px;
}

.panel-default {
    border-color: #e9e9e9;
}

.panel-body {
    padding-top: 0;
}
    
.panel-group .panel {
    border-radius: 0;
    background-color: #f5f5f5;
    box-shadow: none;
    padding: 1rem 4rem;
}

.panel-group .panel + .panel {
    margin-top: 15px;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: none;
}

.panel-default > .panel-heading {
    background-color: none;
}

.panel-default>.panel-heading a {
    position:relative;
}

.expand-all {
    margin-right:10px;
}

.expand-all, .collapse-all {
    padding: 0;
    text-decoration: underline;
    background: none;
    border:none;
}

.expand-all:hover, .collapse-all:hover {
    text-decoration: underline;
}

.expand-all:active, .expand-all:focus, .collapse-all:active, .collapse-all:focus {
    outline:none;
    text-decoration:underline;
}


.panel-default>.panel-heading a:after {
    content: "";
    position: absolute;
    left: -1.5rem;
    left: calc(-2rem - 14px);
    font-size: .9rem;
    top: 1px;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: transform .25s linear;
    -webkit-transition: -webkit-transform .25s linear;
}


.panel-default>.panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
  content: "\002b";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}







/*(not)KYLE*/

 
 /***** STANDARD PAGE CSS *****/
 
 
 
 
 
 
 

 .color-boxes {margin-top: 1rem !important;}
 .color-box { margin:0 10px; padding:90px 20px;  width:220px; height:220px; line-height: 1;}
 .color-text {font-size: 1rem; }
 .red { background: #c8102e; color:#fff;}
 .teal { background: #00b388;}
 .gold { background: #f6be00;}
 .gray { background: #888b8d;}
 .cream { background: #fff9d9;}
 .white { background: #ffffff;}
 .brick { background: #960c22; color:#fff;}
 .green { background: #00866c; color:#fff;}
 .mustard { background: #d89b00;}
 .slate { background: #54585a; color:#fff;}
 .chocolate { background: #640817; color:#fff;}
 .forest { background: #005950; color:#fff;}
 .ocher { background: #b97800;}
 .black { background: #000000; color:#fff;}
 
 .flex { display: flex;}

.docs-font-example {
    font-style: normal; 
    font-weight: normal; 
    margin:.5em 0;
    font-size: 54px;
}

.docs-font-example li { list-style:none; }

.league { 
    font-family: 'League Gothic'; 
    text-transform: uppercase; 
}

.alex { font-family: 'Alex Brush'; }

figure { margin-bottom:20px;}

 figure img {
         border: 1px solid #888b8d;
         padding: 3rem;
         display: block;
         width: 100%;
         max-width: 740px;
         }
 
 figure img.no-border {
         border: none !important;
         }

 figure img.no-padding {
        padding: 0 !important;
        }

figure img.interlocking-uh {
  max-width: 260px;
  }
 
figcaption {
         font-size:16px;
         margin: 10px 0 20px 0;
         }
         
.swatch-block {
background-color: #f5f5f5;
padding: 1.25rem;
height: 100%;
}
/*.swatch-block img {
padding: 0;
}*/

.swatch-block figcaption {
margin-bottom:0;
}


.portrait-ph {
            display: block;
            width: 100%;
            height: 100%;
        }
        
.landscape-ph {
    display: block;
    width: 100%;
    padding-top: 56.25%;
    }
    
    
    
.landscape-mobile {
    display: block;
    width: 100%;
    padding-top: 56.25%;
}  

@media (min-width:768px){
    .landscape-mobile {padding-top:0;}
}

    

        .swatches {
          list-style: none;
          padding: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
      }
      
      .swatches li {
          height:30px;
          width:25%;
      }
      
      .glyphicon-remove {
          color: #c8102e;
      }
      
      .glyphicon-ok {
          color: #00866C;
      }
      
      .glyphicon-ok, .glyphicon-remove {
          margin-right: 1rem;
          top: 3px;
      }


 .imgBox {
   border: 1px solid #000; 
   width: fit-content;
 }
 
 .logo-container {
    background: #f5f5f5;
    margin: 20px;
    padding: 20px;
    max-width: 350px;
 }
 .logo-img {
    text-align: center;
 }
 p.acceptable-colors {
    display: block;
    padding-left: 0.5vw;
    margin-bottom: 0.5vw;
    font-size: 1.125em;
 }
 
 .acceptable-colors .glyphicon {
    margin-right: 1vw;
    float: left;
    margin-left: -0.2vw;
 }
 
 .glyphicon-ok, .glyphicon-remove {
    font-size: 1.5rem;
 }
 .glyphicon-ok {
    color: #00866C;
 }
 .glyphicon-remove {
    color: #c8102e;
 }
 
 .swatch-row {
    clear:both;
    padding-bottom:30px;
 }
 .clear-swatch-row {
    padding-left: 0!important;
    padding-right: 0px!important;
 }
 .swatch-container {
    border:#999 dotted 1.4px;
    padding:0 10px;
    margin:1vw 0;
 }
 .swatch {
    width: 100%;
    height:100%;
    display:block;
    min-height:30px;
    min-width:40px;
    max-height:100px;
 
 }
 
 
 /* grids and carousels */

.section-grid {
  list-style: none;
  margin: 2.25rem -1.25rem -1.125rem;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}

.container > .section-grid:first-child,
script + .section-grid {
  margin-top: 0;
  margin-bottom: 0;
}

.section-grid:last-child,
.page-section .container > .section-grid:last-child {
  margin-bottom: -2.25rem;
}

@media screen and (min-width: 768px) {
  .section-grid.full-width {
      margin-left: -2.5rem;
      margin-right: -2.5rem;
  }
}

@media screen and (min-width: 1600px) {
  .section-grid.full-width {
      margin-left: calc((100vw - 1520px) * -.5);
      margin-right: calc((100vw - 1520px) * -.5);
  }
}

@media screen and (min-width: 1920px) {
  .section-grid.full-width {
      margin-left: -200px;
      margin-right: -200px;
  }
}
.section-grid > li {
  margin-bottom: 2.25rem;
}

.section-grid .grid-image-wrapper {
  overflow: visible;
  position: relative;
  z-index: auto;
}

.section-grid .grid-image-wrapper:before {
  box-shadow: 0 15px 25px -10px rgba(84, 88, 90, 0.5);
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.25s ease;
  width: 100%;
}

.section-grid .grid-anchor:hover .grid-image-wrapper:before {
  opacity: 1;
}

.section-grid .grid-image {
  transition: transform 0.25s ease;
  -webkit-transform: perspective(1000px) translate3d(0, 0, 0);
          transform: perspective(1000px) translate3d(0, 0, 0);
}

.section-grid .grid-anchor:hover .grid-image {
  -webkit-transform: perspective(1000px) translate3d(0, 0, 15px);
          transform: perspective(1000px) translate3d(0, 0, 15px);
}

.section-grid img {
  display: block;
  position: relative;
}

.section-grid img[src*=".svg"] {
  height: 4.5rem;
  width: 4.5rem;
}

.theme-slate .section-grid img[src*="icon"][src*=".svg"],
.theme-brick .section-grid img[src*="icon"][src*=".svg"] {
  filter: invert(1);
}

.section-grid h3 {
  line-height: 2.5rem;
  margin: 1rem 0 .5rem;
}

.section-grid h4 {
  line-height: 1.75rem;
  margin: 1rem 0 .25rem;
}

.section-grid h5 {
  line-height: 1.5rem;
  margin: .75rem 0 .25rem;
}

.section-grid > :not(.col-sm-6) p,
.section-grid > :not(.col-sm-6) .teaser,
.section-grid > :not(.col-sm-6) .slide-teaser {
  font-size: 1.125rem; 18px
  line-height: 1.33333333333333em;
  line-height: calc(1.5em - 3px);
  margin: 0;
}

.section-grid .teaser p + p {
  margin-top: calc((1.5em - 3px) / 3);
}

.section-grid .icon {
  height: 4.5rem;
  width: 4.5rem;
}

.section-grid a:hover + h3 a,
.section-grid a:hover + h4 a {
  color: #960C22;
}

.theme-slate .section-grid a:hover + h3 a,
.theme-slate .section-grid a:hover + h4 a,
.theme-brick .section-grid a:hover + h3 a,
.theme-brick .section-grid a:hover + h4 a {
  color: #fff9d9;
}
 
 
 /*MARGINs, PADDING*/
 
 .m-5 {margin: 5%;}
 .p-5 {padding: 5%;}
 
 

.red-multiply, .green-multiply, .yellow-multiply {
            position:relative;
        }
        
        .red-multiply::before, .green-multiply::before, .yellow-multiply::before {
            content:"";
            display:block;
            position:absolute;
            top:0;
            left:0;
            height:100%;
            width:100%;
        }
        .red-multiply::before {background-color:#c8102e; mix-blend-mode: multiply;}
        .green-multiply::before {background-color:#00b388; mix-blend-mode: multiply;}
        .yellow-multiply::before {background-color:#f6be00; mix-blend-mode: multiply;}
        
        
        p.caption {
            position: absolute !important;
            font-size: 16px !important;
            margin-top: 5px !important;
        }
        
        .docs-font-example ul li{list-style:none;}

/* Grid layouts for images */
    .layered-graphic {
        display:grid;
        grid-template-columns: 0.77fr 1fr;
        grid-template-rows: auto;
        gap: 2rem;
        grid-template-areas:
        'lgimage1 lgimage1' 
        'lgimage2 lgimage2'
        'lgimage3 lgimage3';
    }

    .layered-1 { grid-area: lgimage1; }
    .layered-2 { grid-area: lgimage2; }
    .layered-3 { grid-area: lgimage3; }

    .gradients-transparency {
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        grid-template-rows: auto;
        gap: 2rem;
        grid-template-areas:
        'gtimages1 gtimages1'
        'gtimages2 gtimages2'
        'gtimages3 gtimages3';
    }

    .gradients1 { grid-area: gtimages3; }
    .gradients2 { grid-area: gtimages1; }
    .gradients3 { grid-area: gtimages2; }

    .shapes-lines {
        display: grid;
        grid-template-columns: 1fr 1.33fr;
        grid-template-rows: auto;
        gap: 2rem;
        grid-template-areas:
        'slimages1 slimages1'
        'slimages2 slimages2'
        'slimages3 slimages3';
    }

    .shapes-lines1 { grid-area: slimages1; }
    .shapes-lines2 { grid-area: slimages2; }
    .shapes-lines3 { grid-area: slimages3; }

    .photo-donts {
        display: grid;
        grid-template-columns: 2.1fr 1fr 1.455fr;
        grid-template-rows: auto;
        gap: 2.2rem;
        grid-template-areas:
        'pdimages1 pdimages1 pdimages1'
        'pdimages2 pdimages2 pdimages2'
        'pdimages3 pdimages3 pdimages3'
        'pdimages4 pdimages4 pdimages4';
    }

    .photo-donts1 { grid-area: pdimages1; }
    .photo-donts2 { grid-area: pdimages2; }
    .photo-donts3 { grid-area: pdimages3; }
    .photo-donts4 { grid-area: pdimages4; }

    @media (min-width: 47.813em) {
        .layered-graphic {
        grid-template-areas:
        "lgimage1 lgimage2"
        "lgimage3 lgimage3";
        }

        .gradients-transparency {
        grid-template-areas:
        'gtimages1 gtimages1'
        'gtimages2 gtimages3';
        }

        .shapes-lines {
        grid-template-areas:
        'slimages1 slimages2'
        'slimages1 slimages3';
        }

        .photo-donts {
        grid-template-areas:
        'pdimages1 pdimages2 pdimages2'
        'pdimages3 pdimages3 pdimages4';
        }
    }



 @font-face {
	 font-family: 'Alex Brush';
	 src: url('https://uh.edu/fonts/alexbrush-regular-webfont.woff') format('woff');
	 font-weight: normal;
	 font-style: normal;
}

 @font-face {
	 font-family: 'Milo-old';
	 src: url('https://uh.edu/fonts/MiloWeb.woff') format('woff');
	 font-weight: normal;
	 font-style: normal;
}
 @font-face {
	 font-family: 'Milo-old';
	 src: url('https://uh.edu/fonts/MiloWeb-Ita.woff') format('woff');
	 font-weight: normal;
	 font-style: italic;
}
 @font-face {
	 font-family: 'Milo-old';
	 src: url('https://uh.edu/fonts/MiloWeb-Bold.woff') format('woff');
	 font-weight: bold;
	 font-style: normal;
}
 @font-face {
	 font-family: 'Milo-old';
	 src: url('https://uh.edu/fonts/MiloWeb-BoldIta.woff') format('woff');
	 font-weight: bold;
	 font-style: italic;
}
 @font-face {
	 font-family: 'Milo-old';
	 src: url('https://uh.edu/fonts/MiloWeb-Extralight.woff') format('woff');
	 font-weight: 200;
	 font-style: normal;
}
 @font-face {
	 font-family: 'Milo-old';
	 src: url('https://uh.edu/fonts/MiloWeb-ExtralightIta.woff') format('woff');
	 font-weight: 200;
	 font-style: italic;
}
 @font-face {
	 font-family: 'Milo-old';
	 src: url('https://uh.edu/fonts/MiloWeb-Black.woff') format('woff');
	 font-weight: 900;
	 font-style: normal;
}
 @font-face {
	 font-family: 'Milo-old';
	 src: url('https://uh.edu/fonts/MiloWeb-BlackIta.woff') format('woff');
	 font-weight: 900;
	 font-style: italic;
}
 @font-face {
	 font-family: 'Crimson-old';
	 src: url('https://uh.edu/fonts/crimson-roman-webfont.woff2') format('woff2'), url('https://uh.edu/fonts/crimson-roman-webfont.woff') format('woff');
	 font-weight: normal;
	 font-style: normal;
}
 @font-face {
	 font-family: 'Crimson-old';
	 src: url('https://uh.edu/fonts/crimson-italic-webfont.woff2') format('woff2'), url('https://uh.edu/fonts/crimson-italic-webfont.woff') format('woff');
	 font-weight: normal;
	 font-style: italic;
}
 @font-face {
	 font-family: 'Crimson-old';
	 src: url('https://uh.edu/fonts/crimson-semibold-webfont.woff2') format('woff2'), url('https://uh.edu/fonts/crimson-semibold-webfont.woff') format('woff');
	 font-weight: 600;
	 font-style: normal;
}
 @font-face {
	 font-family: 'Crimson-old';
	 src: url('https://uh.edu/fonts/crimson-semibolditalic-webfont.woff2') format('woff2'), url('https://uh.edu/fonts/crimson-semibolditalic-webfont.woff') format('woff');
	 font-weight: 600;
	 font-style: italic;
}
 @font-face {
	 font-family: 'Crimson-old';
	 src: url('https://uh.edu/fonts/crimson-bold-webfont.woff2') format('woff2'), url('https://uh.edu/fonts/crimson-bold-webfont.woff') format('woff');
	 font-weight: bold;
	 font-style: normal;
}
 @font-face {
	 font-family: 'Crimson-old';
	 src: url('https://uh.edu/fonts/crimson-bolditalic-webfont.woff2') format('woff2'), url('https://uh.edu/fonts/crimson-bolditalic-webfont.woff') format('woff');
	 font-weight: bold;
	 font-style: italic;
}