@import url("https://maxcdn.bootstrapcdn.com/font-awesome/6.5.0/css/font-awesome.min.css");


#north-south-satellite {padding:0; min-height:200px; position:relative; background: url(../_images/_headers/sc-stairs-banner.jpg) center center no-repeat fixed;background-size:cover;}
#nss-links {margin:-50px 0 0 0;}
#nss-links li {margin:0;padding:0 1px;}

#nss-links a {display:block; position:relative; width:100%; height:100%; background-color:rgba(150,12,34,.9); transition:.2s; padding:15px 5px; text-align:center; color:#FFF; font-weight:bold !important; font: 1.3rem 'Milo', sans-serif;}
#nss-links a:hover {background-color:#640817}

#nss-section-links {padding:15px 0; display:none;}
#nss-section-links .section-links {margin:0;}

@media (max-width:768px){
   #north-south-satellite {background-attachment:scroll;}    
   #north-south-satellite > .container {padding:0;} 
   #nss-links {position:absolute; bottom:0; width:100%;}
   #nss-links a span {display:none;} 
}


#dining-cars-games {text-align:center;}
#dining-cars-games [class*="col"]:not(.col-auto) {padding:1.25rem}
#dining-cars-games img {max-width:100px; height:auto; transition:.2s;}
#dining-cars-games [class*="col"]:not(.col-auto):hover .icon {margin-top:-10px; padding-bottom:10px;}


.grid-date-wrapper {top: 0;}

.nav-breadcrumb {
	display:none;
	}
	
#intro {
    overflow:visible;
    padding: 3.375rem 0;
    background-color:#F8F8F8;
}

#intro p {
    color:#000000;
    max-width:600px;
}

#intro a {
    color:#c8102e;
    position:relative;
    font-size: 24px;
    padding:7px 12px;
    margin-right:1rem;
    display:inline-block;
}

#intro a:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #c8102e;
    transition: 0.15s ease-in-out;
}

#intro h1 {
    margin-top:0;
    color:#000000;
}

#intro h1 span {
    color:#c8102e;
}


@media (min-width:768px) {
    
    

   
   #intro a span {
       position:relative;
       z-index:2;
       transition: 0.15s ease-out;
   }
    
    #intro a:hover span {
        color:#FFF;
    }
    
    #intro a:hover:before {
        height: 100%;
    }   
    
    
}

@media (min-width:841px){
    #intro h1 {
        font-size: 6.5rem;
    }
}

@media (min-width:900px) {
    #intro {
        background: url(https://www.uh.edu/csac/_images/_banners/csac-24.png) left center no-repeat;
        background-size:cover;
        padding: 8rem 0;
}

}
	
#coogsave a {
    display: block;
    padding-top: .85rem;
    padding-bottom: .85rem;
}
#coogsave {
    background-color: #00b388;
    text-align: center;
    font-size: 1.5rem;
    padding: 0;
    font-family: 'League Gothic';
    text-transform: uppercase;
    display: none;
}
#coogsave .col-auto,
#coogsave .container {
    padding: 0;
}
@media (max-width:500px) {
  #coogsave {
    font-size: 1.25rem;
  }
}	

#cars .section-grid > :not(.col-sm-6) p {
    font: 1.25rem 'Milo', sans-serif;
    margin: 1.125rem 0;
    line-height: calc(1.5em);
}

#cars .section-grid {
    background-color:#f5f5f5;
    align-items: center;
    margin-top: 0;
    margin-bottom:0;
}

#cars .copy {
    margin-bottom:0;
    padding: 2.25rem 1.25rem;
}

#cars .video {
    margin-bottom: 0;
    padding: 0;
    border-left: 4px solid #fff;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width:768px){
    
    #cars .copy {
    padding: 2.25rem 5rem;
    margin-bottom: 0;
}
    
}

@media screen and (min-width:1177px){
    
#cars .copy {
    width:40%;
}

#cars .video {
    width:60%;
} 
    
        }

#contact-us {padding:0; overflow:visible; background:#fff;}
#contact-us .section-grid {text-align:center; margin:0; position: relative;  z-index: 2;}
#contact-us .section-grid p.lead {font-size:30px;margin-bottom:15px;}

#contact-us .section-grid li {background-color: rgba(255,255,255,.95); margin-bottom:0; padding:60px 30px;}
#contact-us .fa, .fa-solid {font-size: 50px; opacity: .5; margin:5px 0 15px 0; transition:.2s;}

@media (min-width:767px){
#contact-us .section-grid {height:0; bottom: -60px}
#contact-us {background:none;}
#contact-us li:nth-child(even) {border-left: 1px solid rgba(0,0,0,.05); border-right: 1px solid rgba(0,0,0,.05);}
#contact-us .section-grid li:hover {background-color: #fff;}
#contact-us li:hover .fa {opacity: .7; margin:0 0 20px 0;}
}



#contact-photo:before {
    content:"";
    display:block;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:linear-gradient(176.962012770343deg, rgba(0, 0, 0,0.4) 2.4974411463664277%,rgba(158, 0, 236,0.0012499999999999734) 75.78300921187308%,rgba(158, 0, 236,0) 75.78300921187308%);
}	

#contact {padding:0;}
#contact > .container {max-width:100%; padding:0;}
#contact .col-auto {padding:0;}

#scene:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(176.962012770343deg, rgba(0, 0, 0,0.4) 2.4974411463664277%,rgba(158, 0, 236,0.0012499999999999734) 75.78300921187308%,rgba(158, 0, 236,0) 75.78300921187308%);
}

#scene img {
    width: 100%;
    transform: scale(1.1);
}
	
#social {background-color:#222;}
#social h2 {color:#FFF;}
#social #icons {display:inline-block; margin-top:5px;}	
#social #icons a {display: inline-block;}
#social #icons .fa {color:#888; font-size: 30px; padding:0 10px;transition:.2s;}
#social #icons .fa:hover {color:#F6BE00}