@import url('/templates/cu_house_2026/css/sass.css');

/*:root {
  --main: #1b5151;
  --second: #128143;
  --accent: #d5e3b0;
  --pale: #f3f3f3;
  --font: #333;
  --dark: #325063;
  --grey: #607881;
  --grade: linear-gradient(to left, rgba(50,80,99,1) 0%,rgba(18,129,67,1) 100%);;
}

#21321a - > #325063
var(--main) -> main
 #325063 dk blue for gradients
lt teal #68a5a1
grey #607881
*/

html {
  margin: 0;
}

body{background: none; font-family: Raleway, calibri, sans-serif;font-weight: 400; color: var(--main);}

a.skipper, a.skipper:visited {line-height: 0; font-size: 0; border: 0; background: transparent;position: absolute; top: 0; left: 0; z-index: 101}
a.skipper:focus, a.skipper:visited:focus {border: solid 2px white; color: black; background-color: yellow; line-height: 1; font-size: 18px;}

header{background:var(--grade); border-color: var(--pale)}


.navbar-brand img{width:100%; max-width: calc(206px * .75)}
header nav{padding: 0 30px;}

header nav.navbar #main_menu .navliner>a{ color:white; }
header nav.navbar #main_menu .navliner>a:hover:after{background-color:white}


.cta-blue,.cta-grey{display:inline-flex;align-items:center;justify-content:center;padding:12px 15px;border-radius:10px;font-size:16px;line-height:1;font-weight:600;min-width:160px;transition:all 0.2s ease-in-out;color:white;text-decoration:none;text-transform:uppercase}

strong, h2, h3{font-weight: 900 !important}


#home_content div.lightgrey-bg.butgreen{background-color: var(--second); color: white;}


.ungrade{padding: 25px 0; background: var(--ungrade);}

#main_content img{border:10px solid var(--second)}
#main_content img.borderless{border: 0 !important}

.personnel img{max-width: 100%; border: solid 10px white; border-radius: 50%}
.personnel p{ font-size: 20px; font-weight: 500; line-height: 1.3; color: white; text-align: center; margin: 0}
p.Tname{font-size: 30px;  font-weight: 900; padding: 1rem 0}
p.Tpos{text-transform: uppercase}


section.page75 .container.first{padding: 0 !important; height: 0 !important; }





/** HEROES *****************************************/

	
	h1 {margin: 0; font-family: Raleway, calibri, sans-serif; font-size: 11vw;  font-weight: 900;  line-height: .9; color: #fff; text-transform: uppercase}
	.lime{color: var(--accent); display: block;}

	section.hero{position: relative; padding: 0 20px ; background: url(../images/Hero_Background.jpg) no-repeat; background-size: cover;}
	section.hero .row{max-width: 1400px; margin: 0 auto;}


	.hero_caption {display: flex; justify-content: center; align-items: center;color: white;  padding: 50px 0px; }

	.hero_caption_text{width: 100%; font-size: 24px;  font-weight: 700;}
	.hero_caption_text p:nth-child(2):before {content: ''; display:block; width: 150px;  height: 10px; background-color: white; margin: 10px 0}

	.hero_pic{padding: 0 0px 50px 0px;display: flex; justify-content: center; align-items: center;}
	.hero_pic img{max-height: 660px;}

	.clrbar{height: 30px; width: 100%; }
	/*#607881:leaders, #68a5a1:plans, #d5e3b0:story, #1b5151:home*/


	/*S*/
	@media only screen and  (min-width: 576px) {
		section.hero{ padding: 0 30px 0px 30px;}
		.clrbar{height: 40px;}
	}
	
	/*M*/
	@media only screen and  (min-width: 768px) {
		section.hero{ padding: 0 50px 0px 50px;}
		.clrbar{height: 50px;}
	}

	/*L*/
	@media only screen and (min-width: 992px) {
		h1 {font-size: 6vw;}
		.hero_pic{padding: 20px 50px;}
		section.hero{ height: 620px;padding: 0 50px ;}
		.hero_caption { padding: 0px; height: 600px;}
		.clrbar{height: 70px;}
		.hero_caption_text p:nth-child(2):before { width: 250px;  height: 16px;  margin: 15px 0}
	}
	
	/*XL*/
	@media only screen and (min-width: 1200px) {
		.clrbar{height: 80px;}
		.bluegrey-text{background: url(../images/CU_Watermark.png) no-repeat left center; }
		#home_content .bluegrey-bg{padding: 80px 0}

	}

	/*XL*/
	@media only screen and (min-width: 1400px) {
		.hero_caption {  padding: 30px 50% 30px var(--half);}
		h1 {font-size: 100px;}
	}


.bgbar{width: 100%; height: 60px; background: var(--ungrade);}
footer{background-color:var(--pale); padding:40px;}
footer{font-size: 20px;  font-weight: 700; color: var(--dark);}
footer a{font-size: 20px;  font-weight: 700; color: var(--dark);text-decoration: none}
footer a:hover, footer a:focus{color: var(--dark); text-decoration: underline;}
.addr{border-top:3px solid var(--dark);}
.blinks p{margin: 0; padding: 5px 0}



	/*S*/
	@media only screen and  (min-width: 576px) {
	}

	/*M*/
	@media (min-width: 768px){
		footer{padding:70px 60px}
	}

	/*L*/
	@media (min-width: 992px){
		.addr{border-top:0; padding-top:0px; border-right:3px solid var(--second);}

	}

	/*XL*/
	@media (min-width: 1200px){
		.navbar-brand img{ max-width: 206px}
		header nav{padding: 0;}
	}

	
	/*XXL*/
	@media only screen and (min-width: 1400px) {
	}