/* * University of Houston * Style sheet for the College of Technology * Created Spring 2016 by the UH College of Technology Web Team * Contact Sarah Borders or Ashley Leiva for more information. * * This style sheet is for the homepage. * * Table of Contents: * ------------------ * Imported Stylesheets * Headers, Text, Buttons * Features * Overview * Address * sugar-land * Quick Links * Did you know? * Social Media Bar * Events * Articles * Video background */
/* ======================================================================== Imported Stylesheets ======================================================================== */
 @import url("/technology/_css/owl-carousel.css");
 @import url("https://ssl.uh.edu/css/refresh/owl.carousel.css");
/* ======================================================================== Headers, Text, Buttons ======================================================================== */
 body > main {
	 font: 1.25rem 'Crimson', serif;
}
 .white {
	 color: #fff;
}
 .white a {
	 color: #FFF9D9;
}
 #page:first-child {
	 margin-top: 0 !important;
}
/* ======================================================================== Features ======================================================================== */
 div.action {
	 float: right;
	 position: relative;
	 top: 100px;
	 z-index: 999;
	 background-color: #C8102E;
	 padding: 10px;
	 border-radius: 10px 0 0 10px;
}
 p.smaller {
	 text-align: center;
	 font-weight: bold;
	 font-size: 1.2em;
	 font-family: League Gothic;
	 text-transform: uppercase;
	 letter-spacing: .05em;
}
 p.larger {
	 text-align: center;
}
 #spotlights div.container {
	 width: 100%;
	 max-width: 100%;
	 padding: 0px;
	 margin: 0px;
	 color: #fff;
}
 #spotlights a {
	 color: #fff;
}
 #spotlights h1 {
	 margin: 0px;
	 padding: 0px;
	 line-height: 1em;
	 font-family: "League Gothic",sans-serif;
	 text-transform: uppercase;
	 letter-spacing: 1px;
	 font-size: 3.75rem;
}
 #spotlights p {
	 margin: 5px 0px 15px 0px;
	 font-size: 1.125rem;
	 line-height: 1.2em;
}
 #spotlights .owl-carousel div.container {
	 margin: 0px auto;
}
 #spotlights .owl-carousel img {
	 position: relative;
}
 #spotlights .owl-carousel div.item {
	 max-height: 665px;
	 overflow: hidden;
}
 #spotlights div.container figcaption {
	 position: absolute;
	 bottom: 0;
	 background: rgba(0,0,0,0.75);
	 margin: 0;
	 padding: 50px;
	 width: 30%;
}
 #spotlights .owl-carousel .owl-dots {
	 list-style: none;
	 margin: auto;
	 padding: 15px 0px 0px 0px;
	 width: 50%;
	 text-align: center;
}
 #spotlights .owl-carousel div.owl-dots .owl-dot {
	 display: inline-block;
	 padding: 5px;
}
 #spotlights .owl-carousel div.owl-dots .owl-dot.active span {
	 background: #C8102E;
}
 #spotlights .owl-carousel div.owl-dots .owl-dot span {
	 width: 15px;
	 height: 15px;
	 display: block;
	 background: #666;
	 background: rgba(0, 0, 0, 0.3);
	 cursor: pointer;
	 text-indent: -9999px;
	 -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	 -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	 -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	 box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	 -webkit-border-radius: 20px;
	 -moz-border-radius: 20px;
	 border-radius: 20px;
}
 #spotlights .owl-carousel .owl-nav {
	 display: none;
}
 @media screen and (max-width: 2500px) {
	 #spotlights div.container figcaption {
		 width: 63%;
	}
	 @media screen and (max-width: 1500px) {
		 #spotlights div.container figcaption {
			 width: 70%;
		}
	}
	 @media screen and (max-width: 1200px) {
		 #spotlights div.container figcaption {
			 width: 77%;
		}
	}
	 @media screen and (max-width: 992px) {
		 #spotlights div.container figcaption {
			 width: 84%;
		}
	}
	 @media screen and (max-width: 599px) {
		 #spotlights div.container {
			 background: #e9e9e9;
			/*padding-top: 30px;
			 padding-bottom: 15px;
			*/
		}
		 #spotlights a {
			 color: #C8102E;
		}
		 #spotlights h1 {
			 font-size: 1.5rem;
		}
		 #spotlights div.container figcaption {
			 position: relative;
			 width: 100%;
			 color: #333;
			 background: transparent;
			 padding: 10px 10px 0;
		}
		 #spotlights .owl-carousel div.item {
			 max-height: none;
			 overflow: visible;
		}
		 #spotlights .owl-carousel .owl-dots {
			 padding: 15px 0px;
		}
	}
	/* ======================================================================== Overview ======================================================================== */
	 #overview div.container {
		 margin-top: 0;
		 padding-top: 20px;
		 padding-bottom: 45px;
	}
	 #overview div.row div.col-md-9 {
		 width: 71.5%;
	}
	 #overview h1 {
		 margin: 30px 0px 15px 0px;
		 font: 3.375rem 'League Gothic', sans-serif;
		 text-transform: uppercase;
	}
	 .lead {
		 font-family: 'Milo';
		 font-size: 1.3em;
	}
	 @media screen and (max-width: 992px) {
		 #overview div.row div.col-md-9 {
			 width: 100%;
		}
		 #overview div.row div.col-md-3 {
			 width: 100%;
		}
	}
	/* ======================================================================== Address ======================================================================== */
	 #address div.container {
		 margin: 0 auto;
		 padding-top: 0px;
		 padding-bottom: 0px;
	}
	 .address-box {
		 padding: 15px;
		 float: right;
		 display: inline-block;
		 background: #C8102E;
		 color: #fff;
		 margin-top: -184px;
		 border-radius: 10px 10px 0px 0px;
		 font-family: 'Milo';
	}
	 .address-box a {
		 color: #FFF9D9;
	}
	 #address h4 {
		 margin: 0px;
	}
	 #address p {
		 font: 1.125rem 'Milo', sans-serif;
		 line-height: 1.3em;
		 margin: 0px 0px 7px 0px;
	}
	 @media screen and (max-width: 992px) {
		 #address {
			 height: auto;
		}
		 .address-box {
			 position: relative;
			 float: left;
			 margin-top: 0px;
		}
	}
	/* ======================================================================== sugar land ======================================================================== */
	 #sugar-land div.container {
		 margin: 0 auto;
		 padding-top: 0px;
		 padding-bottom: 0px;
	}
	 .sugar-land-box {
		 padding: 15px;
		 float: left;
		 display: inline-block;
		 background: #d89b00;
		 color: #fff;
		 margin-top: -55px;
		 border-radius: 0px 0px 10px 10px;
		 font-family: 'Milo';
	}
	 .sugar-land-box a {
		 color: #FFF9D9;
		 text-decoration:none!important;
	}
	 .sugar-land h4 {
		 margin: 0px;
	}
	 .sugar-land p {
		 font: 1.125rem 'Milo', sans-serif;
		 line-height: 1.3em;
		 margin: 0px 0px 7px 0px;
	}
	 @media screen and (max-width: 992px) {
		 #sugar-land {
			 height: auto;
		}
		 .sugar-land-box {
			 position: relative;
			 float: left;
			 margin-top: -55px;
		}
	}
	/* text section */
	 #sugar-land div.container {
		 margin-top: 0;
		 padding-top: 20px;
		 padding-bottom: 45px;
	}
	 #sugar-land div.row div.col-md-9 {
		 width: 71.5%;
	}
	 #sugar-land h1 {
		 margin: 30px 0px 15px 0px;
		 font: 3.375rem 'League Gothic', sans-serif;
		 text-transform: uppercase;
	}
	 #sugar-land h1 a {
		text-decoration:none!important;
	}
	 .lead {
		 font-family: 'Milo';
		 font-size: 1.3em;
	}
	 @media screen and (max-width: 992px) {
		 #sugar-land div.row div.col-md-9 {
			 width: 100%;
		}
		 #sugar-land div.row div.col-md-3 {
			 width: 100%;
		}
	}
	/* ======================================================================== Quick Links ======================================================================== */
	 .gateways {
		 font-family: 'Milo';
	}
	 .gateways h2, .gateways li {
		 font-size: 16px;
		 line-height: 30px;
	}
	 .gateways h2 {
		 float: left;
		 font-weight: bold;
		 letter-spacing: 0.125em;
		 margin: 0 20px 0 0;
		 text-transform: uppercase;
	}
	 .gateways ul {
		 list-style: none;
		 margin: 0px;
		 padding: 0px;
	}
	 .gateways li {
		 display: inline-block;
		 margin: 0px 20px 0px 0px;
		 padding: 0px;
	}
	/* ======================================================================== Did you know? ======================================================================== */
	 #know {
		 background: url("/technology/_images/know-bkg.jpg") no-repeat fixed center top / cover;
		 text-align: center;
		 color: #fff;
	}
	 #know div.container {
		 position: relative;
		 margin: 0px auto;
		 padding-top: 100px;
		 padding-bottom: 100px;
	}
	 #know header h1 {
		 font: 4.5rem 'League Gothic', sans-serif;
		 text-transform: uppercase;
	}
	 #know div.col-md-3 {
		 padding: 20px;
	}
	 .fact p.number {
		 font-family: "League Gothic",sans-serif;
		 font-size: 6rem;
		 line-height: 1em;
		 margin: 0px auto;
	}
	 .fact h3 {
		 margin: 15px 0px 5px 0px;
	}
	 @media screen and (max-width: 768px) {
		 #know {
			 background: url("/technology/_images/know-bkg.jpg") no-repeat scroll top center / cover;
		}
	}
	 @media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
		 #know {
			 background: url("/technology/_images/know-bkg.jpg") no-repeat scroll top center / cover;
		}
	}
	/* ======================================================================== Social Media Bar ======================================================================== */
	 #social-media {
		 background: #e9e9e9;
	}
	 #social-media div.container {
		 margin: 0px auto;
		 padding-top: 0px;
		 padding-bottom: 0px;
	}
	 #social-media #content-info {
		 background: transparent;
		 height: 40px;
	}
	 #social-media #content-info .social-media {
		 margin: 0px;
		 padding: 3px 15px;
		 float: right;
		 display: inline-block;
		 background: #888B8D;
		 border-radius: 0px 0px 10px 10px;
	}
	 #social-media #content-info .social-media a:hover {
		 background-color: #54585A;
	}
	/* ======================================================================== Events ======================================================================== */
	 #events {
		 background: #e9e9e9;
	}
	 #events div.container {
		 margin: 0px auto;
		 padding-top: 50px;
		 padding-bottom: 50px;
	}
	 #events h1 {
		 margin: 0px 0px 30px 0px;
		 text-align: center;
		 line-height: 1em;
		 font: 3.375rem 'League Gothic', sans-serif;
		 text-transform: uppercase;
	}
	 #events .owl-carousel {
		 width: auto;
		 margin-top: 15px;
	}
	 #events .owl-carousel.owl-loaded li {
		 float: none;
		 padding-bottom: 2.25rem;
		 margin-bottom: 0;
		 position: relative;
		 width: auto;
	}
	 #events .owl-carousel li:nth-child(n+2) {
		 display: none;
	}
	 #events .owl-carousel.owl-loaded li:nth-child(n+2) {
		 display: block;
	}
	 #events .owl-carousel h3.title {
		 margin: 0px 0px .25rem 0px;
		 padding: 0px 15px 0px 0px;
	}
	 #events .owl-carousel p.blurb {
		 margin: 0px;
		 padding: 0px 15px 0px 90px;
	}
	 #events .owl-carousel p.details span {
		 display: block;
	}
	 #events .owl-carousel p.details .day {
		 font-family: "League Gothic",sans-serif;
		 font-size: 6em;
		 line-height: .9em;
	}
	 #events .owl-carousel p.details {
		 clear: left;
		 display: block;
		 float: left;
		 font-size: 14px;
		 font-weight: normal;
		 padding: 0px;
		 text-align: center;
		 width: 75px;
		 margin: 0px 15px 0px 0px;
	}
	 #events .owl-carousel .owl-dots {
		 list-style: none;
		 margin: auto;
		 padding: 15px 0px 0px 0px;
		 width: 50%;
		 text-align: center;
	}
	 #events .owl-carousel div.owl-dots .owl-dot {
		 display: inline-block;
		 padding: 5px;
	}
	 #events .owl-carousel div.owl-dots .owl-dot.active span {
		 background: #C8102E;
	}
	 #events .owl-carousel div.owl-dots .owl-dot span {
		 width: 15px;
		 height: 15px;
		 display: block;
		 background: #666;
		 background: rgba(0, 0, 0, 0.3);
		 cursor: pointer;
		 text-indent: -9999px;
		 -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
		 -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
		 -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
		 box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
		 -webkit-border-radius: 20px;
		 -moz-border-radius: 20px;
		 border-radius: 20px;
	}
	 #events .owl-carousel .owl-nav {
		 display: none;
	}
	 #events .owl-carousel .owl-nav {
		 color: #888B8D;
		 font: bold 3.5rem 'Milo', sans-serif;
		 line-height: 1;
		 position: absolute;
		 top: calc(50% - 1em);
		 width: 100%;
	}
	 #events .owl-carousel .owl-nav .owl-prev, #events .owl-carousel .owl-nav .owl-next {
		 opacity: .5;
		 position: absolute;
		 text-align: center;
		 transition: opacity .25s ease;
		 width: 2.5rem;
	}
	 #events .owl-carousel .owl-nav .owl-prev {
		 left: -1.25rem;
	}
	 #events .owl-carousel .owl-nav .owl-next {
		 right: -1.25rem;
	}
	 #events .owl-carousel .owl-nav .owl-prev:hover, #events .owl-carousel .owl-nav .owl-next:hover {
		 opacity: 1;
	}
	 #events .owl-carousel .owl-nav .owl-prev.disabled, #events .owl-carousel .owl-nav .owl-next.disabled, #events .owl-carousel .owl-nav .owl-prev.disabled:hover, #events .owl-carousel .owl-nav .owl-next.disabled:hover {
		 cursor: default;
		 opacity: 0;
	}
	 @media screen and (min-width: 768px) {
		 #events .owl-carousel li:nth-child(n+2) {
			 display: block;
		}
		 #events .owl-carousel li:nth-child(n+3) {
			 display: none;
		}
		 #events .owl-carousel.owl-loaded li:nth-child(n+3) {
			 display: block;
		}
	}
	 @media screen and (max-width: 768px) {
		 #events .owl-carousel .owl-nav {
			 display: block;
		}
		 #events .owl-carousel .owl-dots {
			 display: none;
		}
	}
	 @media screen and (min-width: 992px) {
		 #events .owl-carousel li:nth-child(n+2) {
			 display: block;
		}
		 #events .owl-carousel li:nth-child(n+4) {
			 display: none;
		}
		 #events .owl-carousel.owl-loaded li:nth-child(n+4) {
			 display: block;
		}
	}
	/* ======================================================================== Articles ======================================================================== */
	 #articles {
		 margin: 0px -4px -4px -4px;
	}
	 #articles div.container.nohead {
		 width: 100%;
		 max-width: 100%;
		 padding: 0px;
		 margin-top: -1em;
		 font: 1.125rem 'Milo', sans-serif;
	}
	 #articles div.row {
		 padding: 0px 2px;
	}
	 #articles div.row figure.col-md-3 {
		 padding: 0px;
		 width: 16.66%;
	}
	 figure.news-article {
		 background: #000;
		 position: relative;
		 overflow: hidden;
	}
	 figure.news-article img {
		 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
		 transition: opacity 0.35s, transform 0.35s;
		 width: 100%;
	}
	 figure.news-article:hover img {
		 opacity: 0.3;
		 -webkit-transform: scale3d(1.05,1.05,1);
		 transform: scale3d(1.05,1.05,1);
	}
	 figure.news-article div.overlay-box {
		 position: absolute;
		 bottom: 0px;
		 left: 0;
		 width: 100%;
		 margin: 0px;
		 padding: 15px;
		 opacity: 0;
		 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
		 transition: opacity 0.35s, transform 0.35s;
	}
	 figure.news-article div.overlay-box a {
		 color: #fff;
	}
	 figure.news-article:hover div.overlay-box {
		 opacity: 1;
		 -webkit-transform: translate3d(0,-10%,0);
		 transform: translate3d(0,-10%,0);
	}
	 figure.news-article div.overlay-box a:hover {
		 color: #fff;
		 text-decoration: none;
	}
	 .news-category {
		 position: absolute;
		 top: 0px;
		 right: 10px;
		 margin: 0px;
		 padding: 0 9px;
		 border-radius: 0px 0px 5px 5px;
		 font-size: 15px;
		 font-weight: normal;
		 line-height: 24px;
		 color: #fff;
	}
	 .news-category {
		 background: #54585A;
	}
	 .news-category.research {
		 background: #C8102E;
	}
	 .news-category.faculty {
		 background: #00B388;
	}
	 .news-category.students, .news-category.programs {
		 background: #D89B00;
	}
	 .news-category.accolades {
		 background: #888B8D;
	}
	 .news-category.alumni, .news-category.giving {
		 background: #960C22;
	}
	 .news-title {
		 position: absolute;
		 bottom: 0px;
		 left: 0px;
		 margin: 0 15px 15px 15px;
		 background: rgba(0,0,0,.75);
		 line-height: 1.2;
		 padding: 9px;
		 opacity: 1;
		 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
		 transition: opacity 0.35s, transform 0.35s;
		 font-size: 15px;
		 font-weight: normal;
		 color: #fff;
	}
	 figure.news-article:hover .news-title {
		 opacity: 0;
	}
	 .news-title:hover {
		 background: rgba(0,0,0,.75);
	}
	 .news-title a {
		 color: #fff;
	}
	 .overlay-title {
		 letter-spacing: 0px;
		 line-height: 1em;
		 font-size: 22px;
		 color: #fff;
		 font-weight: bolder;
	}
	 .overlay-blurb {
		 line-height: 1.3;
	}
	 @media screen and (max-width: 2500px) {
		 .item11, .item12 {
			 display: none;
		}
		 #articles div.row figure.col-md-3 {
			 width: 20%;
		}
		 figure.news-article:hover div.overlay-box {
			 -webkit-transform: translate3d(0,0,0);
			 transform: translate3d(0,0,0);
		}
	}
	 @media screen and (max-width: 1500px) {
		 .item9, .item10, .item11, .item12 {
			 display: none;
		}
		 #articles div.row figure.col-md-3 {
			 width: 25%;
		}
		 figure.news-article:hover div.overlay-box {
			 -webkit-transform: translate3d(0,0,0);
			 transform: translate3d(0,0,0);
		}
	}
	 @media screen and (max-width: 1200px) {
		 .item9 {
			 display: block;
		}
		 #articles div.row figure.col-md-3 {
			 width: 33.3%;
		}
		 figure.news-article:hover div.overlay-box {
			 -webkit-transform: translate3d(0,-7%,0);
			 transform: translate3d(0,-7%,0);
		}
	}
	 @media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
		 figure.news-article div.overlay-box {
			 display: none;
		}
		 figure.news-article:hover .news-title {
			 opacity: 1;
		}
		 figure.news-article:hover img {
			 opacity: 1;
			 -webkit-transform: none;
			 transform: none;
		}
	}
	 @media screen and (max-width: 992px) {
		 .item9, .item10, .item11, .item12 {
			 display: none;
		}
		 #articles div.row figure.col-md-3 {
			 float: left;
			 width: 50%;
		}
		 #articles .col-md-3:nth-child(2n+1) {
			 clear: none !important;
		}
	}
	 @media screen and (max-width: 768px) {
		 figure.news-article:hover div.overlay-box {
			 -webkit-transform: translate3d(0,0,0);
			 transform: translate3d(0,0,0);
		}
	}
	 @media screen and (max-width: 599px) {
		 #articles div.row figure.col-md-3 {
			 width: 100%;
		}
		 figure.news-article:hover div.overlay-box {
			 -webkit-transform: translate3d(0,-10%,0);
			 transform: translate3d(0,-10%,0);
		}
	}
	/*============================================================= video background ===============================================================*/
	 #spotlights div.item video {
		width:100%;
		 height:;
	}
	 @media screen and (max-width: 2500px) {
		 #spotlights div.video-item, #spotlights .item {
			height:750px;
		}
	}
	 @media screen and (max-width: 1500px) {
		 #spotlights div.video-item, #spotlights .item {
			height:700px;
			width:1500px;
		}
	}
	 @media screen and (max-width: 1200px) {
		 #spotlights div.video-item, #spotlights .item {
			height:562px;
			width:1200px;
		}
	}
	 @media screen and (max-width: 992px) {
		 #spotlights div.video-item, #spotlights .item {
			height:665px;
			width:992px;
		}
	}
	 @media screen and (max-width: 768px) {
		 #spotlights div.video-item, #spotlights .item {
			height:360px;
			width:768px;
		}
	}
	/*hide video when screen is small*/
	 @media screen and (max-width: 599px) {
		 #spotlights div.item video {
			display: none
		}
	}
	 @media screen and (max-width: 599px) {
		 #spotlights div.video-item, #spotlights .item {
			height:337px;
			width:599px;
		}
		 #spotlights div.item figcaption {
			float:left;
			width:25em;
		}
	}
	 @media screen and (max-width: 481px) {
		 #spotlights div.video-item, #spotlights .item {
			width:481px!important;
			 height:270px;
		}
		 #spotlights div.item figcaption {
			float:left;
			width:14em;
		}
	}