/*------------------------------------general-----------------------------------------*/

@font-face {
	font-family: "flBold";
	src: url("../fonts/Florencesans-Bold.otf") format("opentype");
}

:root {
  --main-color:rgba(0,109,182,1.0);
}

body{
	margin:0;
	padding:0;
}

div{
	margin:0;
	padding:0;
	border:0;
}

a{
	text-decoration:none;
}

.pageSection {
	position:relative;
	height:100vh;
	min-height:560px;
	width:100vw;
	top:80px;
	opacity:0;
	background-color:rgba(0,0,0,0.0);
}

.pageTitleWrapper{
	position:relative;
	width:100%;
	height:150px;
	margin:0px 0px 10px 0px;
	background-color:rgba(0,0,0,0.0);
	overflow:hidden;
}

.pageUnderline{
	position:relative;
	height:10px;
	width:100%;
	left:-100%;
	background-color: black;
	margin:5px auto 20px 0px;
}


.BGimage{
	position:absolute;
	height:auto;
	width:100vw;
	height:auto;
	bottom:0;
	z-index:-2;
}


.headerUnderline{
	position:relative;
	height:7px;
	background-color: black;
	margin:5px auto 20px 0px;
}

.subSectUnderline{
	position:relative;
	width:100%;
	height:4px;
	background-color: black;
	margin:5px auto 10px 0px;
}

.volumeBars{
	width:60px;
}

.cyanCircle{
	position:absolute;
	width:320px;
	height:auto;
}

.floatingImg{
	position:absolute;
}

#footerContainer{
	position:relative;
	top:20px;
	opacity:0;
}

#mainNavContainer{
	z-index: 1000000;
}


/*----------------------------------------fonts----------------------------------------*/

.pageTitle{
	position:relative;
	font-family: "flBold";
	/*font-weight:bold;*/
	font-size:132px;
	letter-spacing:-5px;
	margin:0;
}

.headerText{
	font-family: "flBold";
	/*font-weight:bold;*/
	font-size:59px;
	letter-spacing:0px;
	margin:0;
}

.bodyCopy{
	font-family:"athelas", Georgia, Times, "Times New Roman", serif;
	font-weight:400;
	margin:0;
	text-align:justify;
}

.subSectTitle{
	font-family: "flBold";
	font-size:18px;
	letter-spacing:0px;
	margin:0;
}


.sectionCopy{
	font-size:14px;
	line-height: 24px;
}

.subSectionCopy{
	font-size:12px;
	line-height: 18px;
}




/*------------------------------------animations--------------------------------------*/

@keyframes scrollSlider{

	0%{transform:translateY(0px); opacity:1.0}
	75%{transform:translateY(30px); opacity:1.0}
	100%{transform:translateY(30px); opacity:0.0}

}


@keyframes slideUpEnter{

	0%{transform:translateY(50px); opacity:0.0}
	100%{transform:translateY(0px); opacity:1.0}

}




/*-------------------------------------nav----------------------------------------*/

#homeButtonContainer{
	position:fixed;
	width:80px;
	height:40px;
	background-color:rgba(255,255,255,0.0);
	top:15px;
	left:15px;
	z-index: 1000;
	transition:100ms;
	overflow:hidden;
}


.homeButtonText{
	font-family:arial;
	font-weight:bold;
	font-size:42px;
	letter-spacing:-2px;
	color:rgba(128,224,224,1.0);
	position:absolute;
	margin:0;
	z-index:999;
	top:-10px;
	transition:0.3s ease-out;
}

#homeButtonText1{
	top:-150px;
}


#homeButtonContainer:hover .homeButtonText{
	transform:translateY(140px);
}


#barsContainer-hp{
	position:absolute;
	width:100px;
	height:auto;
	left:0;
	right:0;
	margin:auto;
}

#scrollTrackerContainer{
	position:fixed;
	width:30px;
	height:400px;
	top:30px;
	bottom:0;
	left:20px;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
	z-index:1;
}

#scrollMarkers{
	position:absolute;
	height:100%;
	left:0;
	right:0;
	margin:auto;
}

#scrollKnob{
	position:absolute;
	z-index:1;
}

#contactContainer{
	position:fixed;
	width:20px;
	height:205px;
	top:0;
	bottom:0;
	right:20px;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
	z-index:1;
}

.contactSocialIcon{
	position:relative;
	width:20px;
	margin:10px 0px;
	transition:200ms;
}

.contactSocialIcon:hover{
	transform:scale(1.2,1.2);
}

#ccCyanLine01{
	position:relative;
	width:2px;
	height:50px;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(128,224,224,1.0);
}

#ccContactText{
	font-family:arial;
	font-weight:bold;
	font-size:14px;
	color:rgba(128,224,224,1.0);
	position:relative;
	margin:0;
	top:50px;
	transform:rotate(-90deg);
	transition:200ms;
}	

#ccContactText:hover{
	transform:rotate(-90deg) scale(1.1,1.1);
}

#bottomSCWrapper{
	position:absolute;
	width:100vw;
	height:100vh;
}

#bottomScrollerContainer{
	position:absolute;
	width:80px;
	height:80px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;
	background-color:rgba(255,255,255,1.0);
	border-radius: 40px 40px 0px 0px;
}

#bScrollerText{
	font-family:arial;
	font-size:10px;
	font-weight:bold;
	position:absolute;
	width:40px;
	top:20px;
	left:0;
	right:0;
	margin:auto;
}

#scrollSlider{
	position:absolute;
	width:25px;
	height:5px;
	background-color:rgba(0,0,0,1.0);
	left:0;
	right:0;
	top:40px;
	margin:auto;
	animation: scrollSlider 1.5s cubic-bezier(0.23,0.9,0.64,0.99) infinite;
}

#scrollLine{
	position:absolute;
	width:1px;
	height:30px;
	background-color:rgba(0,0,0,1.0);
	left:0;
	right:0;
	top:40px;
	margin:auto;
}

#mainNavContainer{
	position:fixed;
	
}

/*-------------------------------------Buttons----------------------------------------*/

.seeMoreButtonContainer{
	position:absolute;
	width:200px;
	height:80px;
	border: solid 4px black;
	transition:300ms;
	opacity:0;
}


.seeMoreText{
	font-family: "flBold";
	font-size:28px;
	letter-spacing:-1px;
	margin:23px auto auto 32px;
	color:rgba(0,0,0,1.0);
	position:absolute;
	z-index:10;
	transition:300ms;
}

/*.seeMoreText2{
	top:-300px;
}*/

.seeMoreArrowWrapper{
	position:absolute;
	width:160px;
	height:80px;
	right:-160px;
	background-color:rgba(0,0,0,0.0);
	overflow:hidden;
}

.seeMoreArrow{
	position:absolute;
	width:158px;
	height:27px;
	left:-60px;
	top:28px;
	z-index:8; 
	background-color:rgba(0,0,0,0.0);
	transition:300ms;
}

.seeMoreButtonContainer:hover{
	transform:translateX(10px);
}

.seeMoreButtonContainer:hover .seeMoreArrow{
	transform:translateX(60px);
}

.seeMoreButtonContainer:hover .seeMoreText{
	transform:translateX(10px);	
}


/*-------------------------------------entryPage----------------------------------------*/

#entryPage{
	background: url(../images/benFolds-hp-02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left bottom;
}


#titleContainer{
	position:absolute;
	width:660px;
	height:270px;
	top:40px;
	bottom:0;
	left:0;
	right:-10px;
	margin:auto;
	background-color:rgba(255,255,255,0.0);
}

.titleText:hover{
	cursor:default;
}

#title-hp{
	position:absolute;
	width:100%;
	height:auto;
	top:40px;
	margin:0;
}

#subTitle-hp{
	font-family:arial;
	font-weight:bold;
	font-size:60px;
	letter-spacing:-2px;
	color:rgba(255,255,255,1.0);
	position:absolute;
	margin:0;
	bottom:29px;
	right:0;
}

#bars01-hp{
	position:absolute;
	top:-42px;
	right:0px;
	display:none;
}

/*-----------------------------------section2-------------------------------------------*/



#missionContainer{
	position:absolute;
	width:50%;
	min-width:520px;
	height:450px;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
	overflow:hidden;
}

.headerTextWrapper{
	position:relative;
	width:100%;
	height:66px;
	margin:0px 0px 10px 0px;
	background-color:rgba(0,0,0,0.0);
	overflow:hidden;
}

.descenderHeaderTextWrapper{
	height:80px;
}

.headerText{
	position:absolute;
	top:80px;
}

.headerUnderline{
	width:100%;
	left:-100%;
}

.sectionCopy{
	left:-30px;
	opacity:0;
}

#missionBars01{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	opacity:0;
	margin:auto;
}

/*-----------------------------------section3-------------------------------------------*/


#section3-hp {
	background-color:rgba(0,0,0,0.0);
}

#chooseContainer{
	position:absolute;
	width:50%;
	min-width:640px;
	height:650px;
	top:0;
	bottom:0;
	left:10%;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
	overflow:hidden;
}

#chooseSubSectContainer{
	position:relative;
	width:550px;
	height:auto;
	margin:20px 0px;
	background-color:rgba(0,0,0,0.0);
}

.chooseSubSect{
	position:relative;
	width:240px;
	height:200px;
	margin:0px 10px 10px 0px;
	display:inline-block;
	top:20px;
	background-color:rgba(0,0,0,0.0);
	vertical-align: top;
	opacity:0;
}

#futureLightsContainer{
	position:absolute;
	width:420px;
	height:400px;
	bottom:130px;
	right:50px;
	background-color:rgba(0,0,0,0.0);
	opacity:0;
	display:none;
}

#futureLights01{
	width:420px;
	height:auto;
	bottom:0;
}

#futureLightsCircle{
	left:0;
	right:0;
	margin:auto;
	
}


/*-----------------------------------section4-------------------------------------------*/

#section4-hp {
	background-color:rgba(0,0,0,0.0);
}

#servicesContainer{
	position:absolute;
	width:40%;
	min-width:640px;
	height:370px;
	top:100px;
	right:10%;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
	overflow:hidden;
}

#servicesSubSectContainer{
	position:relative;
	width:640px;
	height:160px;
	margin:20px 0px;
	background-color:rgba(0,0,0,0.0);
}


.serviceSubSect{
	position:relative;
	width:140px;
	height:140px;
	margin:0px 16px 0px 0px;
	display:inline-block;
	top:20px;
	background-color:rgba(0,0,0,0.0);
	opacity:0;
	vertical-align:top;
}

#servSeeMoreButton-hp{
	left:0;
	right:0;
	margin:auto;
}

/*-----------------------------------section5-------------------------------------------*/


#section5-hp {
	background-color:rgba(0,0,0,0.0);
}

#portfolioContainer{
	position:absolute;
	width:22%;
	min-width:440px;
	height:220px;
	top:65px;
	left:20%;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
	overflow:hidden;
	z-index:6;
}

#portfolioHeader{
	letter-spacing:-3px;
}

#portSeeMoreButton-hp{
	left:0;
	margin:25px auto;
}

.portEntryImgWrapper{
	position:absolute;
	width:550px;
	height:361px;
	top:0;
	bottom:0;
	right:0;
	margin:auto;
	z-index:5;
	opacity:0;
	top:20px;
	overflow:hidden;
	background-color:rgba(0,0,0,0.0);
	transition:300ms;
}

.portEntryImg{
	position:absolute;
	width:100%;
	height:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	transition:3000ms;
}

.scaleImg{
	transform:scale(1.1,1.1);
}




/*-----------------------------------section6-------------------------------------------*/


#section6-hp {
	background-color:rgba(0,0,0,0.0);
}

#bigContactBox{
	position:absolute;
	width:80%;
	height:80%;
	top:20px;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	opacity:0;
	border: 1px solid rgba(128,224,224,1.0);
	transition:300ms;
}

#interestedText{
	position:absolute;
	width:330px;
	height:64px;
	top:0;
	bottom:10px;
	left:0;
	right:0;
	margin:auto;
	padding:0;
	text-align:center;
	color:rgba(128,224,224,1.0);
	background-color:rgba(128,224,224,0.0);
}

#bigContactBox:hover{
	background-color:rgba(128,224,224,1.0);
}


#bigContactBox:hover #interestedText{
	color:rgba(255,255,255,1.0);
}