@charset "UTF-8";
/* CSS Document */
/* Matahari Mono*/
 @font-face {
	 font-family: 'mataharimono-800extrabold';
	 src: url('https://www.coloradomesa.edu/fonts/matahari-mono/mataharimono-800extrabold-webfont.woff2') format('woff2'), url('https://www.coloradomesa.edu/fonts/matahari-mono/mataharimono-800extrabold-webfont.woff') format('woff');
	 font-weight: normal;
	 font-style: normal;
}
 .mataharimono {
	 font-family: 'mataharimono-800extrabold';
	 text-transform: uppercase;
}
body{line-height:1.5;}
/******** "Your Time" landing page - style overrides ***************/
 .white-logo img{
	 margin-top: -12px;
	 margin-bottom: -12px;
}
 .give-look {
	 margin-top:29px;
	 color:#fff;
}
 .give-look:before{
	width:450px;
	 left:-450px;
}
 .white-logo:before{
	top:49px;
}
 .lconv-hero{
	background-image:url(https://www.coloradomesa.edu/landing-images/wccc-hero-bg.jpg);
	 background-position:center;
	 background-color:#004078;
}
 .lconv-hero .cta-button, .lconv-hero .cta-button:hover{
	color:#004078;
}
 .lconv-cta-bar{
	background-color:#004078;
}
 .right-button a, .right-button button, .right-button a:hover, .right-button button:hover{
	color:#004078;
}
 .yellow-button{
	 color: #3a4346;
	 background-color: #fec603;
	 margin-top: 30px;
	 display: block;
	 line-height: 67px;
	 text-transform: uppercase;
	 font-size: 1.25em;
}
 .yellow-button:hover{
	text-decoration:none;
	 cursor:pointer;
}
 .hvr-ripple-out.darkblue, .hvr-ripple-out.darkblue:hover{
	 background-color:#062948;
	 color:#fff;
}
 .hvr-ripple-out.darkblue:before{
	 border: #062b48 solid 6px !important;
}
 .hvr-ripple-out.wcccblue{
	 background-color:#004076;
	 color:#fff;
}
 .hvr-ripple-out.wcccblue:before{
	 border: #004076 solid 6px !important;
}
 .hero-header{
	 font-size:2.4em;
	 line-height:50px;
	 margin-top:0px;
}
 .temp-background{
	/*background-image: url('https://www.coloradomesa.edu/landing-images/vet-tech.jpg');
	*/
	 background-image: url('https://www.coloradomesa.edu/landing-images/wccc-west-of-ordinary.jpg');
	 background-size: contain;
	 background-repeat: no-repeat;
	 background-position: right;
}
 .hero-desc{
	 font-size:1.1em;
	 line-height:20px;
}
 .lconv-content{
	margin-bottom:0px;
}
 .lconv-cta-bar.sticky-bar{
	background-color:#fec603;
	 margin-bottom:0px;
	 transition:padding .3s ease-in-out;
	 padding:50px 0;
}
 .lconv-cta-bar.sticky-bar.is_stuck{
	padding:30px 0;
}
 .sticky-bar{
	z-index:99999;
}
 .lconv-cta-bar.sticky-bar .right-button{
	width:43%;
}
 .lconv-cta-bar.sticky-bar .right-button a{
	background-color:#004078;
	 color:#fec603;
}
 .lconv-cta-bar.sticky-bar .right-button a:hover{
	color:#fec603;
}
 .lconv-cta-bar.sticky-bar .left-text{
	line-height:inherit;
	 font-family: 'Nunito Sans', sans-serif;
	;
	 width:54%;
	 margin-right:3%;
}
 .lconv-cta-bar.sticky-bar .left-text span.waive{
	display:block;
}
 .footer-cta .left-text{
	font-size:2em;
}
 .hvr-ripple-out:before {
	 content: '';
	 position: absolute;
	 border: #004078 solid 6px;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 -webkit-animation-duration: 1s;
	 animation-duration: 1s;
}
 .hero-button .hvr-ripple-out:before, .yellow-button.hvr-ripple-out:before, .footer-cta .hvr-ripple-out:before{
	border:#fec603 solid 6px;
}
 span.waive{
	 font-family:"Trade Gothic LT W04 Bd_1463660";
	 font-size:1.2em;
	 line-height:30px;
	 text-align:center;
}
 span.future{
	 text-transform: none;
	 color: #004078;
	 background-color:#fec603;
	 font-size: .85em;
	 display: inline-block;
	 padding: 0 15px;
	 border-left: 1px solid #004078;
	 border-right: 1px solid #004078;
	 position:relative;
	 z-index:20;
}
 .middle-text{
	width:100%;
	 text-align:center;
	 position:relative;
	 z-index:10;
}
 .middle-text:after{
	content:'';
	 width:100%;
	 border-bottom:1px solid #004078;
	 top:50%;
	 height:1px;
	 left:0;
	 right:0;
	 position:absolute;
}
 .sub-button a{
	 display: block;
	 text-transform: uppercase;
	 line-height: 18px;
	 padding: 10px 15px;
	 border: 1px solid #004078;
	 margin-top: 10px;
	 text-decoration: none;
	 background-color: rgba(255,255,255,0);
	 transition: background-color .3s ease-in-out, color .3s ease-in-out;
	 text-align:center;
	 color:#004078;
}
 .sub-button a:hover{
	 color: #fff;
	 background-color: #004078;
	 text-decoration: none;
}
/*Get Started Section*/
 #get-started{
	padding:200px 0;
	 background-color:#eaeaea;
}
 #get-started .gs-title{
	 font-family: "Trade Gothic LT W04 Bd_1463660";
	 text-transform: uppercase;
	 text-align: center;
	 font-size: 2.2em;
}
 #get-started .yellow-divider{
	 width: 60px;
	 height: 4px;
	 background-color: #fec603;
	 margin: 0 auto;
	 margin-bottom: 15px;
	 margin-top: 5px;
}
 .op-tile-wrap{
	 background-color: #ffffff;
	 margin: 0 10px;
	 padding: 33px;
	 text-align: center;
	 border-radius:4px;
	 margin-top: 115px;
	 position:relative;
	 z-index:2;
}
 .op-tile-wrap:after{
	 content:'';
	 background-image: url(https://www.coloradomesa.edu/_files/images/landing-conversion/tile-shadow.png);
	 background-repeat:no-repeat;
	 background-position:center;
	 width:100%;
	 height:32px;
	 position:absolute;
	 left:0;
	 right:0;
	 bottom:-32px;
}
 #get-started .or{
	 position: absolute;
	 font-family: "Trade Gothic LT W04 Bd_1463660";
	 text-transform: uppercase;
	 top: 60%;
	 -moz-transform: translateY(-50%);
	 -webkit-transform: translateY(-50%);
	 transform: translateY(-50%);
	 right: -40px;
	 height: 80px;
	 width: 80px;
	 background-color: #eaeaea;
	 border-radius: 50%;
	 text-align: center;
	 line-height: 80px;
	 font-size: 1.6em;
	 z-index:100;
}
 .op-tile-title {
	 background-image: url(https://www.coloradomesa.edu/_files/images/landing-conversion/ns-back.png);
	 width: 184px;
	 height: 184px;
	 padding: 73px 15px;
	 text-align: center;
	 color: #fff;
	 font-family: "Trade Gothic LT W04 Bd_1463660";
	 text-transform: uppercase;
	 font-size: 1.1em;
	 line-height: 20px;
	 margin: -125px auto 22px auto;
}
 .op-tile-title span{
	 display:block;
	 position:relative;
}
 .op-tile-content{
	 color:#004076;
	 line-height: 20px;
	 height:80px;
}
/*Tuition & Cost*/
 .tables{
	 padding:80px 0;
}
 .cost-info{
	 background-color: #fff;
	 border-radius: 5px;
	 overflow: hidden;
	 box-shadow: 0px 0px 10px rgba(0,0,0,.10);
}
 .title{
	 background-color: #004078;
	 text-align: center;
	 color: #fff;
	 padding: 30px;
}
 .main-title{
	 font-family: "Trade Gothic LT W04 Bd_1463660";
	 text-transform: uppercase;
	 font-size: 1.7em;
}
 .title .desc{
	 color: #9eb3c5;
	 font-size: .85em;
	 line-height: 14px;
}
 .info{
	 padding:50px 30px;
}
 ul.cost{
	 list-style:none;
	 margin:0;
	 padding:0;
}
 ul.cost li{
	color:#000000;
	 font-size:1.2em;
	 overflow:hidden;
	 clear:both;
	 position:relative;
	 padding:10px 0px;
}
 ul.cost li:before{
	 content:'';
	 height:1px;
	 border-bottom:1px solid #dddddd;
	 position:absolute;
	 width:100%;
	 top:50%;
	 z-index:5;
}
 .category{
	 float:left;
	 background-color:#fff;
	 z-index:10;
	 position:relative;
	 padding-right:10px;
}
 .dollars{
	 float:right;
	 text-align:right;
	 background-color:#fff;
	 z-index:10;
	 position:relative;
	 padding-left:10px;
}
 .award-title{
	 float:left;
}
 .award{
	 float:right;
}
/*.total{
	 padding: 23px;
	 text-align: center;
	 color: #fff;
	 font-size: 1.3em;
	 background-color: #646464;
}
*/
/*Financial Aid*/
 .finaid-header{
	 background: #fff;
	 border-radius: 5px;
	 padding: 15px;
	 text-align: center;
	 margin-bottom: 10px;
	 box-shadow: 0px 0px 10px rgba(0,0,0,.10) 
}
 .finaid-title{
	 text-align: center;
	 color: #666;
	 font-family: "Trade Gothic LT W04 Bd_1463660";
	 text-transform: uppercase;
	 font-size: 1.7em;
}
 .finaid-desc{
	 font-size: .85em;
	 margin-bottom: 10px;
	 display: block;
}
 ul.finaid-bars{
	 margin: 0;
	 padding: 0;
	 list-style: none;
}
 ul.finaid-bars li{
	 background-color: #3a7c8f;
	 padding: 20px 12px;
	 color: #fff;
	 margin-bottom: 10px;
	 overflow:hidden;
}
/*ul.finaid-bars li:nth-child(2){
	background-color:#7eb95e;
}
 ul.finaid-bars li:nth-child(3){
	background-color:#93c578;
}
 ul.finaid-bars li:nth-child(4){
	background-color:#a4cc8f;
}
*/
 .award-title{
	text-align:center;
}
/*.award{
	float:right;
}
*/
 .small-class-image{
	 background-image:url(https://www.coloradomesa.edu/landing-images/bg1-whatsnext.jpg);
}
 .fy-image{
	 background-image:url(https://www.coloradomesa.edu/landing-images/bg2-whatsnext.jpg);
}
 @media (max-width:1199px) {
	 .hero-header{
		 font-size: 2.2em;
		 line-height: 38px;
		 margin-top: 23px;
	}
	 .hero-desc{
		 font-size: 1em;
		 line-height: 18px;
	}
	 #get-started{
		padding:150px 0;
	}
	 .yellow-button{
		font-size:1.2em;
	}
	 .info{
		 font-size:.9em;
		 padding:43.5px 30px;
	}
	 .main-title, .finaid-title{
		font-size:1.4em;
	}
	 ul.finaid-bars li{
		padding: 19px 12px;
	}
	 span.waive{
		font-size:1.13em;
	}
	 .lconv-hero{
		padding:25px 0;
	}
	 .give-look:before {
		 width: 250px;
		 left: -250px;
	}
}
 .fyc-visit a{
	border:1px solid #004078;
	 color: #004078;
}
 .fyc-visit a:hover{
	background-color:#004078;
}
 .fyc-wrapper{
	border-left: 1px solid #004078;
}
 .fyc-wrapper:before{
	border-left:9px solid #004078;
}
 .fyc-title, .bf-title{
	color:#004078;
}
 @media (max-width:991px) {
	 .hero-header{
		margin-top:0px;
	}
	 .hero-desc{
		margin-bottom:20px;
	}
	 .temp-background{
		background-size:cover;
		 background-position:top center;
	}
	 .lconv-hero{
		padding:25px 0;
	}
	 .lconv-cta-bar.sticky-bar .left-text, .lconv-cta-bar.sticky-bar .right-button{
		float:none;
		 width:100%;
	}
	 .lconv-cta-bar.sticky-bar .left-text{
		margin-bottom:5px;
	}
	 .lconv-cta-ba.sticky-bar{
		padding:30px 0;
		 font-size:.78em;
	}
	 .lconv-cta-bar.sticky-bar.is_stuck{
		padding:15px 0;
	}
	 .tables{
		padding:40px 0;
	}
	 .cost-info{
		margin-bottom:20px;
	}
	 .or{
		display:none;
	}
	 .op-tile-content{
		height:auto;
	}
	 span.waive{
		font-size:1.4em;
	}
	 #get-started{
		padding:180px 0 60px 0;
	}
	 .give-look:before {
		 width: 50px;
		 left: -50px;
	}
}
 @media (max-width:767px) {
	 .hero-text-video{
		font-size:.9em;
	}
	 .lconv-mobile-waive{
		 background-color: #fec603;
		 color: #fff;
		 font-size: .8em;
		 padding-top: 15px;
	}
	 .lconv-cta-bar.sticky-bar{
		padding:15px 0;
	}
	 .right-button a{
		padding:18px 30px;
	}
	 .total{
		 padding:24px;
		 font-size:1.1em;
	}
	 .lconv-mobile-waive .left-text{
		margin-bottom:0px;
	}
	 #get-started{
		padding:90px 0 60px 0;
	}
	 .fy-image{
		background-position:center;
	}
}
 @media (max-width:480px){
	 .hero-text-video{
		padding:20px 0;
	}
	 span.waive{
		font-size:1.3em;
		 line-height:21px;
	}
	 span.future{
		font-size:.7em;
	}
	 #get-started .gs-title{
		font-size:1.8em;
	}
}
 @media (max-width:330px){
	 ul.cost li{
		font-size:.78em;
	}
	 .finaid-desc, .title .desc{
		font-size:.78em;
	}
	 .main-title, .finaid-title{
		font-size:1.2em;
	}
	 ul.finaid-bars li{
		font-size:.9em;
	}
	 .hero-header{
		font-size:1.8em;
		 line-height:30px;
	}
	 .hero-desc{
		font-size:.86em;
		 line-height:17px;
	}
}
/* Styles for Slate Form in Hero*/
 div.lconv-hero form input {
	 width: 100%;
}
 div.lconv-hero form input, div.lconv-hero form select {
	 font-family: 'Nunito Sans';
	 color: #333;
	 padding: 5px;
	 font-weight: 400;
	 border: 0;
}
 div.lconv-hero form div.action button.default.form_button_submit {
	 background-color: #fed103;
	 color: #004078;
	 font-family: "Trade Gothic LT W04 Bd_1463660";
	 text-transform: uppercase;
	 padding: 15px;
	 width: 100%;
	 border: 0;
	 font-size: 1.2em;
}
 div.lconv-hero form div.action button.default.form_button_submit:hover {
	 color: #fed103;
	 background-color: #062948 
}
 div.lconv-hero form div.form_label, label.form_label {
	 color: #fed103;
	 font-family: 'Nunito Sans', sans-serif;
}
