@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

body{
	font-family: Montserrat, sans-serif;
	margin: 0;
	background-color: black;
}
h1 {
  	font-family: 'Montserrat', sans-serif;
  	font-size: 2.5em;
  	font-weight: 600;
  	letter-spacing: -.05em;
  	position: relative;
	margin: 0;
	color: #EAD923;
  }

  h2 {
  	font-family: 'Montserrat', sans-serif;
  	font-size: 2em;
  	font-weight: 600;
  	letter-spacing: -.05em;
	color: #FFFFFF;
  }

  h3 {
  	font-family: 'Montserrat', sans-serif;
  	font-size: 1.5em;
  	font-weight: 400;
  	letter-spacing: -.02em;
	color: #FFFFFF;
  }

  h4 {
  	font-family: 'Montserrat', sans-serif;
  	font-size: 1.125em;
  	font-weight: 600;
  	letter-spacing: -.05em;
  	line-height: 1.8em;
  	color: #CA6D4F;
  }

  h5 {
  	font-family: 'Montserrat', sans-serif;
  	font-size: 1.25em;
  	font-weight: 400;
  	letter-spacing: -.05em;
  }

a {
text-decoration: none;
}


img{margin: 0;}

*{
    box-sizing:        border-box;
            -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
}

.headSection{
	height: 100dvh;
	position: relative;
}
.hero-logo-container {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-image: url('../images/2025/rev-crew-logo-2025.svg');
	background-size: min(55%, 400px) auto;
	background-repeat: no-repeat;
/*	background-position: top 9em left 2em;*/
	background-position: center 35%;
	filter: drop-shadow(0 0 2em black);
}
.hero-image{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero-text {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	font-size: 3em;
	color: white;
	padding: 1em;
	filter: drop-shadow(0 0 0.25em black) drop-shadow(0 0 1em black);
}









.crew-container{
	padding: 2em;
	background-color: rgba(97,142,156,1.00);
	background-color: rgba(0, 0, 0,1.00);
	text-align: center;
}
.date-container{
	background-color: #CA6D4F;
	width: 100%;
	padding: 2.5em 0;
}
.view-schedule{
	padding-top: 0.5em;
	cursor: pointer;
	font-size: 1.4em;
}
.view-schedule span{
	font-family: 'Material icons';
	font-size: 1.8em;
	vertical-align: middle;
}

.logo{
	width: 100%;
	max-width: 500px;
}

.pricing{
	background-color: #CA6D4F;
	margin: 0;
	width: 100%;
	overflow: hidden;
	padding: 2em 0;
}


.reg-link{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #D7D6B9;
	text-align: center;
	padding: 1em 0;
	font-weight: 900;
	font-size: 2.5em;
	color: black;
}
.reg-link a{
	color: black;
}
.link-reg-container{
	color: black;
	background-color: #ca6d4f;
	overflow: hidden;
	font-size: 2.5em;
	padding: 0.5em 0;
}
.link-reg-container a{
	color: black;
	font-weight: 900;
}



.fullwide{
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
}

.fullwide iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.break{
	width: 100%;
	height: auto;
}
.small-vid-container{
	width: 100%; 
	background-color: rgba(62, 114, 131,1); 
	background-color: rgba(235,217,36,1.00); 
	overflow: hidden;
	text-align: center;
}
.small-vid-container h2 {
	color: black;
}
.small-vid{
	max-width: 900px;
	width: 100%;
	position: relative;
	margin: 3em auto;
}
.small-vid div{
	padding-bottom: 56.26%;
}
.small-vid iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



.section1{
	background-image: linear-gradient(0deg, rgb(20,20,20) 70%, rgb(40,40,40));
	padding:  1.0em;
	position: relative;
	text-align: center;
	width: 100%;
}
.section1>div:first-of-type{
	background-color: #15222e;
	padding:  1.5em;
}
.section1>div:first-of-type img:first-of-type{
	width: calc(100% - 4em);
}



.section2{
	background-color: #000000;
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
}
.section2 > div.left img{
	max-height: 100dvh;
	width: 100%;
	height: auto;
	vertical-align: top;
}
.section2 > div.left {
	flex: 1 1 500px;
	max-height: 500px;
}
.section2 > div.left img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.section2 > div.right {
	flex: 1 1 500px;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: clamp(1.1em, 1.8vw, 1.5em);
	font-weight: 900;
	padding: 0 1em;
	text-align: center;
	background-image: linear-gradient(0deg, rgba(235,217,36,0.70), black 30%);
}
.secondary-logo{
	width: 80%!important;
	max-width: 300px!important;
/*	filter: saturate(0) invert(0) brightness(2) drop-shadow(0 0 2em rgba(255,255,255,0.8));*/
	display: block;
	margin: 0 auto;
}





.faculty-image-container{
	width: 100%;
	max-width: 1400px;
	margin: 2em auto;
	text-align: center;
}
.faculty-image-container figure{
	display: inline-block;
	margin: 1em;
	padding: 0;
	position: relative;
	border: 10px solid white;
}
.faculty-image-container figure img{
	width: 315px;
	height: auto;
	object-fit: cover;
	object-position: center;
}

.faculty-image-container figure figcaption{
	color: #ffffff;
	font-size: 1.3em;
	font-weight: 40;
	padding: 0.25em;
}

.faculty-image-container figure img:not([src]) + figcaption:before{
	content: "Coming Soon!";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-30deg);
	font-size: 2em;
	
}


.footer{
	background-color:  rgba(62, 114, 131,1); 
	background-color:  rgba(0, 0, 0, 1); 
	overflow: hidden; 
	padding: 1em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.footer div{
	-webkit-box-flex: 1;
	-ms-flex: 1 1 400px;
	flex: 1 1 400px;
	text-align: center;
}
.footer .logo{
	height: 50px;
	width: auto;
}



@media screen and (orientation: portrait),
	screen and (max-aspect-ratio: 1),
	screen and (max-width: 850px){
		
		.container{width: 100%;}
		.top-section,
		.section2{
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}	
		.top-section div,
		.section2 > div{
			flex: 1 1 100%!important;
			text-align: center;
		}
		.section2 .left img {
			margin-top: 3em;
			max-height: 400px!important;
		}
		.section2 h2{
			font-size: 1.4em;
		}
		.section1  {
			font-size: 80%;
		}
}
@media screen and (max-width: 600px){
	.headSection {
		min-height: 0;
		width: 100%;
		height: 450px;
	}
	.hero-image{
		top: 0!important;
		left: 0!important;
		transform: none!important;
	}
	.hero-logo-container {
		background-position: center calc(50% - 50px);
		background-size: 35vw;
		top: 0!important;
		left: 0!important;
		transform: none!important;
	}
	.hero-text {
		font-size: 1.9em;
	}
}
@media screen and (max-width: 500px){
	body{font-size: 0.8em;}
}
@media screen and (max-width: 350px){
	body{font-size: 0.6em;}
}