/*--------ROC CONSTRUCTION CSS------*/

/*-------COPYRIGHT ETHAN CAMPBELL PENDING------*/
/*-------COPYRIGHT CAMPBELL CREATIVE COMPANY PENDING------*/



html, body{
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	width: 100%;
	}

/*-------link styles-----*/

a:link{
 	color:#142968;
 	text-decoration: none;

 }

 a:visited{
	color:#142968;
}

a:hover{
	opacity:0.7;
	animation-name: hoverLink;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear;
  	color:#bf0e30;


}
a:active{
	color:#bf0e30;
}

a:foot{
	color: #ffffff;
}


/*--MOBILE NAVIGATION STYLES-----*/

.navContainer {
    font-family: "Lato", sans-serif;
    z-index: 99999999999999;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
  	background-color:#bf0e30;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    z-index: 99999999999999;
    opacity: 0.95;
    text-align: center;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
    z-index: 99999999999999;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.mobFoot{
	font-family: 'Vollkorn SC';
	color:#ffffff;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.mobileNav{
	position: fixed;
	display: none;
	z-index: 9999999999999999999999999;
	width: 100%;
	height:100%;
	background-color:#bf0e30;
	opacity: 0.9;
	flex-flow: column wrap;

	}

	.mobileButton{
		position: fixed;
		top:75%;
		right:0%;
		z-index: 999999999999999999;
		display: none;
		width: 50px;
		height: 50px;
		background-color: #bf0e30;
		padding: 1.5%;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;

	}

		.mobileButton:hover{
		opacity: 0.8;
	}

	.mobileExit{
		top:25px;
		left: 25px;
		position: absolute;
		width: 40px;
		height: 40px;
		border-width: 1px;
		border-style: bold;
		border-radius: 10px;

	}

	.mobileExit:hover{
		opacity: 0.9;
		background-color: #142968;
	}

	.mobileBrick{
		float: right;
		width: 80%;
		height: 10%;
		padding-top: 2%;
		padding-bottom: 2%;
		font-size: 180%;
		text-align: left;
		border-bottom-color: #ffffff;
		border-bottom-style: solid;
		border-width: 2px;
		font-family: 'Vollkorn SC';


	}

/*------ Flex Boxes---

.flexContainer{
	padding:0;
	margin:0;
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: flex;
	-webkit-flex-flow: row wrap;
	justify-content: space-around;
}

.flexItem{
	background-color: #142968;
	width:100%;
	height: 700px;    
	line-height: 150px;
	color: white;
	font-weight: bold;
	text-align: center;
	font-family: 'Vollkorn', serif;
	margin:auto;

}

----*/




/*-------Begin CONTAINER Content---*/
.container{
	width: 100%;
	transition: margin-left .5s;
	z-index: 0;

}
.parallax{

}



/*--------header Begin------*/
.header{
	margin: 0;
	position: fixed;
	width: 98%;
	background-color: #ffffff;
	color:#142968;
	opacity: 1;
	z-index: 9999999;
	font-weight: bold;
	padding-left:2%;
	padding-top: 2%;
	padding-bottom: 1%;
	border-bottom: 2px;
	border-color: #ffffff;
	border-bottom-style: solid;
	height: 125px;
	display: flex; 
	justify-content: flex-start;
	flex-flow: row wrap;
	font-size: 110%;
	-webkit-transition: all ease;
  	-moz-transition: all ease;
  	-o-transition: all ease;
  	transition: all ease;
}


	.header.sticky{
		top:0;
		margin:0;
		position: fixed;
		width: 98%;
		background-color: #ffffff;
		color:#142968;
		opacity: 0.95;
		z-index: 999999999;
		padding-left:2%;
		padding-top: 2%;
		padding-bottom: 1%;
		border-bottom-style: thin;
		display: flex; 
		justify-content: flex-start;
		flex-flow: row wrap;
		height: 100px;
		font-size: 100%;
		-webkit-transition: all ease;
  		-moz-transition: all ease;
  		-o-transition: all ease;
  		transition: all ease;
  		border-bottom: 2px;
		border-color: #142968;
		border-bottom-style: solid;

	}


		.headerLogo{
					order:1;
					width: 160px;

		}

		.headerLogo.sticky{
					order:1;
					width: 130px;
		}

		.titleContainer{
			order:2;
			width: 40%;
			padding-left: 2%;
			z-index: 999999;

		}
			.rocName{	
						font-family: 'Vollkorn SC', serif;
						margin-bottom: -1%;
					}

			i{
				font-size: 90%;
				font-family: 'Vollkorn', serif;
			}



	/*------Main Navigation----*/

	.nav{
		font-size: 120%;
		order:4;
		width: 40%;
		font-family: 'Vollkorn', serif;
		align-self: flex-end;
		margin-left: 6%;
		padding-bottom: 1%;
		}

		.link {
		  width: 23%;
		  text-align: center;
		  position: relative;
		  float: right;
		  cursor: pointer;
		  transition: 500ms ease;
		  margin-right: 2%;
		  border-top-right-radius: 10px;

		}
		.link:before {
		  position: absolute;
		  width: 0;
		  height: 4px;
		  content: '';
		  background: #bf0e30;
		  top: -1px;
		  left: -2px;
		  transition: 100ms width ease 300ms;
		  -web-kit-transition: 100ms width ease 300ms;
		    border-top-right-radius: 10px;
		}
		.link:after {
		  position: absolute;
		  width: 4px;
		  height: 0;
		  content: '';
		  background: #bf0e30;
		  top: 0px;
		  right: 0px;
		  transition: 100ms height ease 50ms;
		  -web-kit-transition: 250ms height ease 50ms;
		    border-top-right-radius: 20px;
		}

		.link:hover {
		  border-color: #bf0e30;

		}
		.link:hover:before {
		  width: 101%;
		  transition: 100ms width ease 0ms;
		  -web-kit-transition: 100ms width ease 0ms;
		}
		.link:hover:after {
		  height: 50px;
		  transition: 100ms height ease 100ms;
		  -web-kit-transition: 100ms height ease 100ms;
		  
		}

		p.linkTxt{
			margin-top: 2%;
		}

 
/*----------Slideshow-------------*/

#slideShow{
	width: 100%;
	height: 700px;
	background-image: url(rocImg1.jpg);
	background-size: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
}



/*--------Cover Page Info Begin-----*/

#coverInfo{
	background-color: #142968;
	color:#ffffff;
	width: 90%;
	padding: 5%;
	z-index: 0;
	height: 500px;
	background-image: url(stone.prng);
	background-blend-mode: multiply;
}


	h3{	
		font-family: 'Vollkorn SC', serif;
		font-size:200%;
		width: 50%;
		float: left;
		text-align: center;

	}

		.rocInfoBox{
		width: 45%;
		font-size: 125%;
		font-family: 'Vollkorn', 'helvetica', serif;
		font-weight: thin;
		text-indent: 30px;
		float: left;
		padding: 2.5%;
	}


	.infoPic{
		
		float: right;
		width: 50%;
			
		
		}



/*-----Values Section  Begin-----*/

#rocValues{
	width: 100%;
	height: 600px;
	background-repeat: no-repeat;
	background-image: url(wall.jpg);
	background-size: cover;
	background-attachment: fixed;
	text-align: center;
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	opacity: 0.91;
}

	.iconContain{
		width: 33.33333%;
		text-align: center;
		padding: 5%;
		flex-shrink: 2;

	}

		.iconImg{
			width: 125px;
			height: 125px;

		}

		.iconTitle{
			padding-top: 5%;
			width: 100%;
			color:#ffffff;
			font-size: 140%;
			text-align: center;
			font-family: 'Vollkorn SC';


		}

		.iconNote{

			width: 100%;
			padding-top: 5%;
			color:#ffffff;
			font-size: 120%;
			text-align: left;
			font-family: 'Vollkorn', serif;
			text-indent: 10px;
		}


/*----Membership Begin-----*/

#membership{

	width: 100%;
	height: 500px;
	background-color: #142968;
	background-repeat: no-repeat;
	background-image: url(stone.png);
	background-blend-mode: multiply;
	background-size: cover;
	background-attachment: fixed;
	text-align: center;
	display: flex;
	flex-flow: column;
	justify-content: space-between;



}


.membershipTitle{
		order: 1;
		width: 100%;
		font-family: Vollkorn; 
		font-size:300%; 
		color:#ffffff;
		text-align: center;
		height: 100px;

		}

	#memberLogoContain{
		order:2;
		width: 100%;
		text-align: center;
		display: flex;
		flex-flow: row;
		justify-content: space-between;


	}

	
	.memberLogo{
		order:3;
		flex-shrink: 2;
		text-align: center;
		width: 100%;
		padding-bottom: 10%;
	}

	.tmcLogo{
		order: 4;
		width: 300px;
		height: 80px;

}
	.mcaaLogo{
		order: 5;
		width: 320px;
		height: 180px;

	}





/*-------Footer Begin------*/

.footer{
	background-color: #ffffff;
	color:#142968;
	width: 100%;
	height: 225px;  /*------!!!!!!!!!!! change in mobile inquiry!!!!!!!!!!----*/
	font-size: 125%;
	-webkit-transition: all 1s ease-in-out;
  	-moz-transition: all 1s ease-in-out;
  	-o-transition: all 1s ease-in-out;
  	transition: all 1s ease-in-out;
  	display: inline-block;
    font-family: 'Vollkorn SC', serif;

}

.footImg{
	width: 20%;
	float: left;
	padding-top: 2%;
}

.footInfo{
	width: 60%;
	text-align: left;
	float: left;
	padding: 2%;
	padding-bottom: 0%;
	border-right-style: solid;
	border-right-color: #142968;
	font-style: 'Vollkorn SC';

}

h4{
	font-size: 150%;
	float:right;
	width: 72%;
	font-family: 'Vollkorn SC'
}


.footNav{
	padding-top: 3%;
	width: 15%;
	float: left;
	padding-left: 2%;
	display: flex;
	flex-direction: column;
	font-style: 'Vollkorn SC';

}

.footLink{
	padding-top: 5%;
	float: left;
	font-style: 'Vollkorn SC';
}

.toTop{
	text-align: left;
	padding:1%;
	margin-top: 10%;
	width: 8%;
	float: right;
	background-color:#bf0e30;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.toTop:hover{
	opacity: 0.95;
	color:#ffffff;
}



/*-------Awards Start--------*/


#awardsCover{
	width: 100%;
	height: 750px;
	background-image: url(trowels4.png);
	background-size: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	 -webkit-transition: background-image 2s ease-out;
  	-moz-transition: background-image 2s ease-out;
  	-o-transition: background-image 2s ease-out;
  	transition: background-image 2s ease-out;
  	text-align: center;
  	font-family: 'Vollkorn SC', serif;
  	padding-top: 10%;

}



.awardsSection{
	background-color: #ffffff;
	width: 100%;
	height: 1400px;
	display: flex;
	flex-flow:row wrap;
	justify-content: center;
	text-align: center;
}

.trowels{
	order:1;
	width: 30%;
	padding: 5%;
	text-align: center;
	height: 300px;
}


	.numberHigh{

		width: 100%;
		color: #142968;
		font-size: 1000%;
		font-family: 'Vollkorn SC';

	}


	.awardsTitle{
		text-align: center;
		width: 100%;
		padding-left: 0%;
		font-family: 'Vollkorn SC', Helvetica, serif;
		font-size: 600%;
		color: #142968;
		text-decoration: none;
		margin-top: 5%;


	}

	.numberDetail2{
		text-align: center;
		width: 90%;
		padding-left: 0%;
		padding-right: 10%;
		font-size: 250%;
		font-family: 'Vollkorn';
		color: #142968;
		text-decoration: none;

		
	}

	.numberDetail3{
		text-align: center;
		width: 90%;
		padding-left: 0%;
		padding-right: 10%;
		font-size: 150%;
		font-family: 'Vollkorn';
		color: #142968;
		text-decoration: none;
	}

	
	
.memberLink:hover{
   opacity:0.7;
   color:#bf0e30;
}


/*------end of main CSS------*/






/*-------Contact Us Page------*/

#contactCover{
	width: 100%;
	height: 700px;
	background-image: url(wall2.jpg);
	background-size: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	 -webkit-transition: background-image 2s ease-out;
  	-moz-transition: background-image 2s ease-out;
  	-o-transition: background-image 2s ease-out;
  	transition: background-image 2s ease-out;
  	text-align: center;
  	font-family: 'Vollkorn SC', serif;
  	padding-top: 10%;
  	margin-bottom: -5%;

}

.contactTitle{
	margin-top: 15%;
	font-family: 'Vollkorn SC', Helvetica, serif;
	font-size: 600%;
	color:#ffffff;

}


.contactSection{

	width: 100%;
	height: 1000px;
	display: flex;
	flex-flow:row wrap;
	justify-content: center;
	text-align: center;
	background-image: url(stone.png);
	background-color: #142968;
	background-blend-mode: multiply;
}

.direct{
	order:1;
	width: 23.33333%;
	padding:5%;
	text-align: center;
	height: 300px;

}

.mail{
	order:2;
	width: 23.333333%;
	padding:5%;
	text-align: center;
	height: 300px;
}

.phone{
	order:3;
	width: 23.33333%;
	padding: 5%;
	text-align: center;
	height: 300px;
}

.contactIcon{
	width: 115px;
	height: 115px;
	border-style: solid;
	border-width: 12px;
	border-color: #bf0e30;
	padding: 0%;
	text-align: center;
	border-radius: 20px;

}

.headLine{
	width: 100%;
	color: #ffffff;
	padding-top:3%;
	font-size: 200%;
	font-family: 'Vollkorn SC';

}

.numbers{
	text-align: center;
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	font-size: 110%;
	font-family: 'Vollkorn';
	color:#ffffff;
	text-decoration: none;
}

.numbers:link{
		color:#ffffff;

}
.numbers:hover{
	color:#ffffff;
	opacity: 0.9;

}

#map{
	order:4;
	height: 550px;
	width: 70%;
	margin-top: -5%;
	border-color: #cecece;
}



#contactInfo{
	height: 300px;
	background-color: #ffffff;

}






/*---------!!!!!! MEDIA QUERIES BEGIN !!!!!!!!----*/


		
		/*------  700px Max Query-----*/

			@media only screen and (max-width: 700px) {

				#slideShow{
					background-size: 160%;

				}

				#coverInfo{
					margin-top: -110px;
					padding-bottom: 200px;
				}
				h3{
					width: 100%;
				}
				.infoPic{
					width: 90%;
				}



			.iconNote{
				width: 50%;
			}



		h4{
			font-size: 85%;
		}


		#awardsCover{

			height: 400px;
			background-size:160%;
			padding-top: 10%;
		}

		.awardsTitle{
			font-size: 200%;
			padding-top: 18%;
		}

		.trowels{
			width: 100%;
		}

		.footInfo{
			width: 95%;
			border-style: none;

		}

		.footNav{
			width: 100%;
			display: inline-block;
			font-size: 90%;
			margin-left: -2%;
	


		}

		.footLink{
			font-size: 60%;
			width: 18%;
			padding-left: 1%;
			padding-right: 1%;
			text-align: center;
			background-color: #bf0e30;
			margin-top: -1%;
			padding-bottom: 3%;
			border-width: 3px;
			border-bottom-style: solid;
			border-color: #ffffff;
			font-family: 'Vollkorn';




		}


		a.footLink{

			color:#ffffff;

		}

		.footLink:hover{
			color:#ffffff;
		}

		#footHome{
			border-top-left-radius: 10px;
		}

		#conFoot{
			border-top-right-radius: 10px;

		}




		



			
}



/*------ 1100px Max Query-----*/

	@media only screen and (max-width: 1100px) {
				
		.header{
					flex-flow: column;
					text-align: center;
					align-items: center;
					border-bottom-style: none;
				}

		.header.sticky{
			text-align: left;


		}

		#logo{
				width: 80px;
				}

		.titleContainer{
			width: 60%;
			font-size: 60%;
		}

		.nav{
			display: none;

		}

		.mobileButton{
		display: inline-flex;

		}

		.rocInfoBox{
			font-size: 100%;
			width: 100%;
			padding-top: 2%;
		}

		#rocValues{
			flex-flow: column;

		}

			.iconContain{
				height: 150px;
				width: 90%;
				align-content: baseline;
				padding-left: 5%;
				padding-right: 5%;
				padding-top: 0%;
			}
		
				.iconImg{
					width: 100px;
					height: 100px;
					float: left;
					padding-top: 5%;
				
				}
				.iconTitle{
					height: 20px;
					width: 20%;
					float: left;
					margin-left: 2%;
					align-self: flex-start;
					padding-top: 5%;
					
				}
				.iconNote{
					height: 120px;
					width: 60%;
					float: left;
					margin-left: 2%;
					font-size: 90%;
					padding-top: 5%;
				}

		.contactSection{
			flex-flow: column;
			height: 100%;
			justify-content: center;
			background-color: #142968;
		}

		p.contactTitle{
			font-size: 200%;
			margin-top: 50%;
		}



		#contactCover{
			height: 500px;
			background-size: 210%;
		}

		.direct{
			width: 90%;
			padding: 5%;
		}

		.mail{
			width: 90%;
			padding: 5%;

		}

		.phone{
			width: 90%;
			padding: 5%;
		}

		#map{
			width: 90%;
			height: 300px;
			margin-left: 5%;
			margin-top: 5%;
			margin-bottom: 5%;
		}

		.toTop{
			width: 20%;
			height: 20px;
			margin-top: 3%;
			font-size: 70%;
			float: left;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;



		}

	.contactSection{

	width: 100%;
	display: flex;
	flex-flow:row wrap;
	justify-content: center;
	text-align: center;
	background-color: #142968;
	background-image: none;
}



	
		



}


/*------ 1250px Max Query-----*/

@media only screen and (max-width: 1250px) {

		.headerLogo{
			width: 110px;
		}

		.header{
			font-size: 100%;
		}
		
		.link{
			font-size: 100%;
			text-align: left;
		}

		#slideShow{
			height: 500px;
		}

		#coverInfo{
			height: 450px;
		}

		h3{
			font-size: 150%;
		}

	#memberLogoContain{
		order:2;
		width: 100%;
		text-align: center;
		display: flex;
		flex-flow: column;
		justify-content: space-between;


	}

	.tmcLogo{
		order: 4;
		width: 150px;
		height: 40px;

}
	.mcaaLogo{
		order: 5;
		width: 160px;
		height: 90px;

	}

	


}

/*------ 1450px Max Query-----*/	

@media only screen and (max-width: 1350px) {

		.rocName{
			font-size: 150%;
		}
			i{
				font-size: 80%;
			}

			.nav{
				font-size: 110%;
			}


}