/** Begin Page Specific Stylings **/
.caweb-bg-container{
	background-color: #4a5dab;	
}

.caweb-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.courts-bg-container{
	background-color: #0d5684;	
}

.courts-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.ctfinder-bg-container{
	background-color: #00a1de;	
}

.ctfinder-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.logos-bg-container{
	background-color: #4fa9b0;	
}

.logos-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.faceblind-bg-container{
	background-color: #0a3a8e;	
}

.faceblind-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.photobooth-bg-container{
	background-color: #11613a;	
}

.photobooth-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.climbing-bg-container{
	background-color: #173742;	
}

.climbing-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.ethical-bg-container{
	background-color: #751f20;	
}

.ethical-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.sobe-bg-container{
	background-color: #0694d7;	
}

.sobe-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}


.music-bg-container{
	background-color: #422043;	
}

.music-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.bg-home{
  background-color: rgba(254,190,16,1);	
}

.bg-home:hover{
  background-color: rgba(0,0,0,1);	
}

.sh-bg-container{
	background-color: #f25a0c;	
}

.sh-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.hh-bg-container{
	background-color: #bdd345;	
}

.hh-bg-container:hover{
  background-color: rgba(254,190,16,1);	
}

.bg-bgo-web{
  background-color: #24add8;	
}

.bg-bgo-web:hover{
  background-color: rgba(254,190,16,1);		
}

.bg-bgo-brand{
	background-color: #b00704;
}

.bg-bgo-brand:hover{
  background-color: rgba(254,190,16,1);		
}

.bg-vans-sc{
	background-color: #ff9900;
}

.bg-vans-sc:hover{
  background-color: rgba(254,190,16,1);		
}
/** End Page Specific Stylings **/



.website-descriptor-message{

	opacity: 0;
	visibility: hidden;
	font-family: 'Montserrat', helvetica, arial, sans-serif;
	font-weight: 700;
	margin: 0em;
	padding: 0em;
	height: 0px !important;
}

/** Begin Header Styles **/
.header-area{
	width: 100%;
	height: 60px;
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	position: fixed;
	
/**	border-top: solid 4px rgba(9,34,44,1); **/
	
	box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.15);	
	
  transform-origin: center 70%;
  -webkit-transform-origin: center 70%;  
  -moz-transform-origin: center 70%;    
  -o-transform-origin: center 70%;    
  
  transform: scale(1);
  -webkit-transform: scale(1);  
  -moz-transform: scale(1);    
  -o-transform: scale(1);      
  
  /**transition: all 0.5s ease-out;	
  -webkit-transition: all 0.5s ease-out;	  
  -moz-transition: all 0.5s ease-out;	    
  -o-transition: all 0.5s ease-out;	    **/
  z-index: 1000;    
}

.header-area.open{
	width: 100%;
	height: 100%;

	position: fixed;
	
	overflow-y: hidden;
	overflow-x: hidden;	
	
  border-top: solid 0px rgba(40, 176, 192, 1);

  transform: scale(1);
  -webkit-transform: scale(1);  
  -moz-transform: scale(1);  
  -o-transform: scale(1);    
  
   transition: all 0.5s ease-out;	
  -webkit-transition: all 0.5s ease-out;	  
  -moz-transition: all 0.5s ease-out;	    
  -o-transition: all 0.5s ease-out;	   
  
  background-color: rgba(9,34,44,0.99);

  z-index: 1000;
}

/** Begin Header Name Area **/
.name-description{
	padding: 0em 0em 0em 0em;
	margin: 0em 0em 0em 0%;
	display: inline-block;	
	float: left;
	width: 75%;
}

.name-site{	
	width: 100%;
	height: 100%;
	display: inline-block;
	padding: 0;
	margin: 0;
}

.header-home-link-logo{
	opacity: 1;
	display: block;
}

.header-home-link-logo:hover{
	opacity: 1;
}

.ct-name{
	display: inline-block;
	float: left;
}

.ct-name p.name-link{
	font-size: 1.5em;
	text-transform: uppercase;
	color: /**rgba(9,34,44,1)**/ rgba(0,0,0,0.95);
	font-family: 'Montserrat', helvetica, arial, sans-serif;
	font-weight: 700;
	margin: 0.575em 0em 0em 0em;
}


.ct-name.change p.name-link{
	color: #ffffff;
}


li.logomark-area{
	display: inline-block;
	float: left;
	margin: 0em 15px 0 0;
	padding: 9px 13px 12px 10px;		
}

li.logomark-area.color-change{
	background-color: #28b0c0;
}

li.logomark-area .icon-c-logomark:before{
  content: "b";
  font-size: 39px;
  color: #ffffff;
  text-align:center;
}

li.logomark-area.color-change .icon-c-logomark:before{
	color: #fff;
}

/**
.descriptor a.descriptor-link{
	font-size: 1em;
	text-transform: none;
	color: rgba(51,51,51,0.35);
	font-family: 'Lora', 'Montserrat', helvetica, arial, sans-serif;
	font-weight: 400;	
}

.descriptor.change-color a.descriptor-link{
	color: rgba(255,255,255,0.35)
}**/

/** End Header Name Area **/

/** Begin Header Menu Selector **/
/** Menu BTN **/
.menu-btn {
  will-change: transform;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 1;
  width:12%;
  height:100%;
  cursor: pointer;
  margin: 0px 0% 0% 0%;
  padding: 0% 0% 0% 0%;
  float: right;
  opacity: 0.95;
}

.menu-btn:hover{
opacity: 1;
}


.menu-btn.active{
	background-color: transparent;
}
/** Begin Menu Type **/
.menu-type{
	display: inline-block;
	float: left;
	margin: 18px 5% 0 22%;
	text-transform: uppercase;
	color: #ffffff;
}

.menu-type.open-menu{
	color: #fff;
}
/** Begin Menu Icon **/
.menu-hamburger {
/***  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;  
  -moz-transition: all .3s ease-out;    
  -o-transition: all .3s ease-out;    ***/
  display: inline-block;
  width: 15%;
  margin: 20px 0em 0em 0;
  
}
.menu-hamburger .menu-patty {
  will-change: transform, opacity;
  width: 100%;
  height: 3px;
  margin: 0 0 3px 0;
  background: #ffffff;
  opacity: 1;
  transform: translate(0) rotate(0deg);
  -webkit-transform: translate(0) rotate(0deg);  
  -moz-transform: translate(0) rotate(0deg);  
  -o-transform: translate(0) rotate(0deg);  
  transition: all .2s ease-out;
}

.menu-hamburger .menu-patty:last-child {
  margin-bottom: 0;
}

.menu-hamburger.menu-close {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  
  display: inline-block;
}

.menu-hamburger.menu-close .menu-patty {
  background: #ffffff;	
}

.menu-hamburger.menu-close .menu-patty:nth-child(1) {
  transform: translate(0px, 6px) rotate(90deg) scale(1, 1);
  -webkit-transform: translate(0px, 6px) rotate(90deg) scale(1, 1);
  -moz-transform: translate(0px, 6px) rotate(90deg) scale(1, 1);
  -o-transform: translate(0px, 6px) rotate(90deg) scale(1, 1);
  
}
.menu-hamburger.menu-close .menu-patty:nth-child(3) {
display: none;   
}
/** End Menu Icon **/
/** End Menu BTN **/
/** Begin Menu Content Area **/
.menu-content {
  padding: 0% 0%;
  margin: 60px 0 0 0%;
  position: absolute;
  z-index: 3;
  width: 100%; 
  background-color: rgba(0,0,0,0.1); 
  
  transform: translate(-615px);
  -webkit-transform: translateY(-615px);  
  -moz-transform: translateY(-615px);    
  -o-transform: translateY(-615px);    

  /** Make Active Navigation List Hidden **/
  opacity: 0;

  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;  
  -moz-transition: all 0.5s ease-out;    
  -o-transition: all 0.5s ease-out;  
/**  display: none; **/     
}

.menu-content.show{
	padding: 50px 0px 750px 0px;

  transform: translateY(0);
  -webkit-transform: translateY(0);  
  -moz-transform: translateY(0);    
  -o-transform: translateY(0);    
  /** Make Active Navigation List Animate Too 100% Opacity **/
  opacity: 1;
}

/** Begin Menu Navigation **/
nav {
	width: 50%;
	display: inline-block;
	float: left;
}

nav ul {
  list-style-type: none;
  padding: 0;
  text-align: left;
  width: 100%;
}
/** Nav Link Position Off Screen Prior To Opening **/
nav li {
  will-change: transform, opacity;
  margin: 0px 0;

/**  transform: translate(-500px);
  -webkit-transform: translateY(-500px);  
  -moz-transform: translateY(-500px);    
  -o-transform: translateY(-500px);    

  /** Make Active Navigation List Hidden **/
/**  opacity: 0;

  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;  
  -moz-transition: all 0.5s ease-out;    
  -o-transition: all 0.5s ease-out;  
/**  display: none; **/ 
  padding: 0 0 0 0;
  color: rgba(40, 176, 192, 0.25);
}

/** Nav Link Animation Control**/
nav li.active {
/**  transform: translateY(0);
  -webkit-transform: translateY(0);  
  -moz-transform: translateY(0);    
  -o-transform: translateY(0);    
  /** Make Active Navigation List Animate Too 100% Opacity **/
  opacity: 1;
  display: block;
  margin-right: 6%;
  padding: 0 0 0 0%;
  color: rgba(40, 176, 192, 0.25);
  border-left: solid 4px rgba(40, 176, 192, 0.0);
}


.navi-border:hover{
  color: rgba(255,255,255,1);	
  border-left: solid 34px rgba(40, 176, 192, 1)  
}


/**/
nav li:nth-child(1) {
  transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;  
  -moz-transition-delay: 0.1s;    
  -o-transition-delay: 0.1s;    
}
nav li:nth-child(2) {
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;  
  -moz-transition-delay: 0.2s;    
  -o-transition-delay: 0.2s;      
}
nav li:nth-child(3) {
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;  
  -moz-transition-delay: 0.3s;    
  -o-transition-delay: 0.3s;      
}
nav li:nth-child(4) {
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;  
  -moz-transition-delay: 0.4s;    
  -o-transition-delay: 0.4s;      
}/**/

/** Nav Links Visual Style **/
nav a {
  text-decoration: none;
  font-size: 64px;
  line-height: 125%;
  background-color: none;
  margin: 0px 0px 0px 0px;
  font-weight: 700;
  opacity: 1;
  width: 88%;
  height: 100%;
  padding: 15px 0 15px 12%;
  display: inline-block;
}

nav a:hover {
}

nav li:hover{
  background-color: rgba(0,0,0,0.2);	
}

#selected-navi-item{
  color: #ffffff;
  background-color: rgba(0,0,0,0.25);	
  border-left: solid 4px #28b0c0;
}

#selected-navi-item:hover{
  border-left: solid 34px rgba(40, 176, 192, 1)  	
}

.navigation-message{
  text-decoration: none;
  font-family: 'Montserrat', helvetica, arial, sans-serif;
  background-color: transparent;
  margin: 1px;
  font-weight: 400;
  opacity: 1;
  margin: 0 0 0 12%;
  display: block;
}

/** End Menu Navigation **/

/*************************************************************/
/*******************Begin Responsive Styles*******************/
/*************************************************************/

@media (max-width:925px){

	.menu-btn{
		width: 15%;
	}

}

@media (max-width:725px){
	.menu-content{
  transform: translate(-1000px);
  -webkit-transform: translateY(-1000px);  
  -moz-transform: translateY(-1000px);    
  -o-transform: translateY(-1000px);  
	}

	.menu-btn{
		width: 20%;
	}

	nav{
		width: 70%;
		margin: 0 0 0 15%;
	}
	
	.header-area.open{
	overflow-y: auto;
	}
	
	.menu-content.show{
		padding: 15px 0 100px 0;
	}
	
	.navigation-message{
		margin: 0 0 0 0%;
		text-align: center;
	}
	
	nav a{
		padding: 15px 0 15px 5%;
		font-size: 32px;
		text-align: center;
	}
	
	nav li.active{
		margin-right: 0%;
		border-left: none;		
	}
	
	#selected-navi-item{
		border: none;
	}
	
	#selected-navi-item:hover{
		border: none;
	}

	.navi-border:hover{
		border-left: none;
	}

}

@media (max-width:600px){

	.header-area{
		height: 45px;
	}
	
	.name-description{
		width: 70%;
	}
	
	li.logomark-area{
		padding: 6px 10px 8px 7px;
	}
	
	li.logomark-area .icon-c-logomark:before{
		font-size: 31px;
	}
	
	.ct-name p.name-link{
		font-size: 1.15em;
	}
	
	.menu-btn{
		width: 25%;
		height: 45px;
		margin: 0px 0% 0% 0%;
	}

	.menu-type{
		font-size: 14px;
		margin: 13px 5% 0 21%;		
	}

	.menu-hamburger{
		margin: 14px 0 0 0;		
	}
	
	.menu-content{
		margin: 45px 0 0 0;
	}

}

@media (max-width: 500px){
	nav{
		width: 90%;
		margin: 0 0 0 5%;
	}		
}

@media (max-width:350px){

	.header-area{
		height: 45px;
	}
	
	.name-description{
		width: 75%;
	}
	
	li.logomark-area{
		padding: 7px 10px 7px 7px;
	}
	
	li.logomark-area .icon-c-logomark:before{
		font-size: 31px;
	}
	
	.ct-name p.name-link{
		font-size: 16px;
		margin: 0.75em 0 0 0;
	}
	
	.menu-btn{
		width: 15%;
		height: 45px;
	}

	.menu-type{
		font-size: 14px;
		margin: 22px 5% 0 21%;
		display: none;
	}

	.menu-hamburger{
		margin: 14px 0 0 24%;
		width: 50%;		
	}

}

@media (max-width:285px){
	.name-link{
		display: none;
	}
}