/*------------------------------------general-----------------------------------------*/
body{
	margin:0;
	padding:0;
	background-color:rgba(0,0,0,1);
	display:none;
}

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

.bodyCopy{
	font-family: "futura-pt";
	font-size:14px;	
	color:#ffffff;
}

a{
	text-decoration:none;
}

.pageTitleSection{
	position:relative;
	width:70%;
	top:0;
	left:0;
	right:0;
	margin:40px auto 10px auto;
	z-index:1;
}

.pageTitle{
	font-family: "futura-pt";
	font-size:34px;
	font-weight:700;
	letter-spacing:7px;
	color:white;
	margin:0;
	z-index:1;
}


.subTitle1{
	font-family: "futura-pt";
	font-size:20px;	
	font-weight:700;
	letter-spacing:17px;
	color:#ffffff;
}

.titleSubtext{
	font-family: "futura-pt";
	font-size:18px;	
	font-style:italic;
	color:#ffffff;
	margin:0;
}


.subTitleContainer{
	position:relative;
	width:70%;
	top:0;
	left:0;
	right:0;
	margin:auto;	
	overflow:hidden;
}

.buffer{
	position:relative;
	height:50px;
	width:100%;
}

.bottomRightPic{
	position:absolute;
	width:100%;
	height:auto;
	bottom:-30px;
	right:0;
	z-index:0;
}

.bottomLeftPic{
	position:absolute;
	width:66%;
	height:auto;
	bottom:0;
	left:0;
}


.lineFromRight{
	position:absolute;
	height:2px;
	width:120%;
	background-color:#ffffff;
	overflow:hidden;
}


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


@-webkit-keyframes bounce1 {
	
	0%{bottom:0px;}
	50%{bottom:-10px;}
	100%{bottom:0px;}
	}
	
@-webkit-keyframes bounce2 {
	
	0%{bottom:0px;}
	50%{bottom:-13px;}
	100%{bottom:0px;}
	}	

@-webkit-keyframes bounceRight {
	
	0%{right:15px;}
	50%{right:25px;}
	100%{right:15px;}
	}	

/*------------------------------------entrySlider-----------------------------------------*/

#entryPage{
	position:relative;
	margin:0;
	width:100vw;
	height:100vh;
}



/*------------------entrySlider(PORTRAIT)---------------------------*/

@media all and (orientation:portrait) {

#sliderWrapper{
	position:absolute;
	margin:0;
	width:100vw;
	height:70vh;
	overflow:hidden;
}   
   
   
 .BGImage{
	position:absolute;
	margin:0;
	bottom:0;
	left:-270px;
	width:auto;
	height:100vh;
}

#apgLogo{
	position:relative;
	width:100%;
}

#blockLines01{
	position:absolute;
	width:277px;
	left:-10px;
	right:0;
	margin:10px auto;
	background-color:rgba(0,0,0,0.07);
}

#accBox{
	position:absolute;
	height:30px;
	width:72%;
	right:0;
	left:0;
	margin:auto;
	bottom:110px;
	background-color:rgba(255,255,255,0.0);	
	z-index:100;
}

#serviceLinkBox{
	position:relative;
	height:auto;
	width:100%;
	left:0;
	right:0;
	margin:0 auto;
	background-color:rgba(255,255,255,0.0);	
	z-index:100;
}

#serviceLinkText{
	font-family: "futura-pt";
	font-size:76px;
	font-weight:700;
	color:white;
	text-align:center;
	margin:0;		
}

#arrowHalf01{
	position:absolute;
	left:60px;
	bottom:-10px;
	-webkit-animation: bounce1 1.33s infinite;
    -moz-animation: bounce1 1.33s infinite;
    -o-animation: bounce1 1.33s infinite;
    animation: bounce1 1.33s infinite;
    display:none;
}

#arrowHalf02{
	position:absolute;
	left:78px;
	bottom:-10px;
	-webkit-animation: bounce2 1.33s infinite;
    -moz-animation: bounce2 1.33s infinite;
    -o-animation: bounce2 1.33s infinite;
    animation: bounce2 1.33s infinite;
    display:none;
}


}

/*------------------entrySlider(LANDSCAPE)---------------------------*/

@media all and (orientation:landscape) {

#sliderWrapper{
	position:absolute;
	margin:0;
	width:100vw;
	height:100vh;
	overflow:hidden;
}

.BGImage{
	position:absolute;
	margin:auto;
	bottom:0;
	left:0;
	width:100vw;
	height:100vh;
	opacity:0.77;
}

#apgLogo{
	position:relative;
	width:300px;
	margin:0 18%;
}

#blockLines01{
	position:absolute;
	width:277px;
	left:0;
	right:0;
	margin:4px auto;
	background-color:rgba(0,0,0,0.0);
}

#serviceLinkBox{
	position:absolute;
	height:60px;
	width:90px;
	bottom:60px;
	right:50px;
	margin:auto;
	background-color:rgba(255,255,255,0.0);	
	z-index:100;
}

#serviceLinkText{
	font-family: "futura-pt";
	font-size:12px;
	font-weight:700;
	letter-spacing:5px;
	color:white;
	text-align:justify;		
}

#arrowHalf01{
	position:absolute;
	width:44px;
	height:auto;
	left:22px;
	bottom:-10px;
	-webkit-animation: bounce1 1.33s infinite;
    -moz-animation: bounce1 1.33s infinite;
    -o-animation: bounce1 1.33s infinite;
    animation: bounce1 1.33s infinite;
}

#arrowHalf02{
	position:absolute;
	width:44px;
	height:auto;
	left:22px;
	bottom:-10px;
	-webkit-animation: bounce2 1.33s infinite;
    -moz-animation: bounce2 1.33s infinite;
    -o-animation: bounce2 1.33s infinite;
    animation: bounce2 1.33s infinite;
}

#accBox{
	position:absolute;
	height:30px;
	width:375px;
	right:0;
	left:-20px;
	margin:auto;
	bottom:50px;
	background-color:rgba(255,255,255,0.0);	
	z-index:100;
}

}

/*----------------------------QUERIES END--------------------------*/



#BG01{
	z-index:2;
}

#upperMap01{
	position:absolute;
	top:-3px;
	left:-10px;
	z-index:3;
}

#titleBox{
	position:absolute;
	width:80%;
	height:270px;
	top:-60px;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	z-index:3;
	background-color:rgba(0,0,0,0.0);
	display:none;
	
}



#missionText{
	font-family: "futura-pt";
	font-size:15px;
	color:white;
	text-align:justify;	
}

#servicesList{
	font-family: "futura-pt";
	font-size:0.1em;
	font-weight:700;
	letter-spacing:3px;
	color:white;
	text-align:center;	
}



#littleBlock01{
	position:absolute;
	left:0;
	right:0;
	margin:0 auto;
}



#accBox img{
	display:inline-block;
	margin:0 9px;
	height:30px;
	width:auto;
}


/*-------------------------------servicesSection-----------------------------------------*/


#servicesSection{
	position:relative;
	width:100vw;
	background-color:rgba(0,0,0,0.0);
	z-index:4;
	overflow:hidden;
}

.ssColumnContainer{
	position:relative;
	width:200px;
	height:auto;
	top:50px;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	background-color:rgba(255,255,255,0.0);
	z-index:3;

}

.ssColumn{
	position:relative;
	width:200px;
	height:400px;
	left:0;
	right:0;
	margin:auto auto 40px auto;
	display:inline-block;
	z-index:1;
	background-color:rgba(255,255,255,0.0);
}


.ssColumnCopy{
	position:relative;
	height:200px;
	width:200px;
	
}

.serviceHover{
	display:none;
}

#servicesBGimagesContainer{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	z-index:0;
}
.servicesBGimg{
	position:relative;
	top:0;
	right:0;
	height:auto;
	opacity:0.44;
}

.servicesBGimgVert{
	width:260px;
	margin:0 0 40px 0;
}

.servicesBGimgHorz{
	width:360px;
	margin:65px 0;
}

#servicesBGimg01{
	left:50px;
}

#blueStage01{
	position:absolute;
	left:0;
	bottom:0;
	opacity:0.8;
}

/*---------------------------portfolioButton-----------------------------------------*/

#portfolioButtonWrapper{
	position:relative;
	height:200px;
	z-index:6;
}

#portfolioButton{
	position:absolute;
	width:90%;
	height:185px;
	margin:10px;
	border: solid 4px #ffffff;
	transition:0.22s;
}



#portfolioTitle{
	font-family: "futura-pt";
	font-size:48px;
	font-weight:700;
	color:#ffffff;
	margin:20px 20px 0 20px;
}



#portfolioSubText{
	font-family: "futura-pt";
	font-size:20px;
	font-weight:500;
	color:#ffffff;
	margin:0 20px;
	width:70%;
}



#portfolioArrow{
	position:absolute;
	width:40px;
	height:auto;
	right:15px;
	top:85px;
	-webkit-animation: bounceRight 1.33s infinite;
    -moz-animation: bounceRight 1.33s infinite;
    -o-animation: bounceRight 1.33s infinite;
    animation: bounceRight 1.33s infinite;
}

/*---------------------------ContactSection-----------------------------------------*/


#contactSection{
	position:relative;
	width:100vw;
	height:90vh;
	background-color:rgba(255,255,255,0.0);
	z-index:1;
}

#cityMap01{
	position:absolute;
	width:200px;
	height:auto;
	left:-20px;
	top:-20px;
	z-index:4;
}


#contactBox{
	position:absolute;
	width:90%;
	height:100px;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin-top:auto;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;
	border: solid 4px #ffffff;
	transition:0.22s;
}

#contactTitle{
	position:absolute;
	margin:37px 0 0 70px;
	font-family: "futura-pt";
	font-size:26px;
	font-weight:700;
	letter-spacing:5px;
	color:white;
}

#contactBox:hover{
	background-color:rgba(255,255,255,1);
	transform:translateY(5px);
}

#contactBox:hover #contactTitle{
	color:#000000;
}

#contactSubtext{
	position:absolute;
	width:90%;
	height:90px;
	font-family: "futura-pt";
	font-size:24px;
	font-weight:500;
	color:white;
	top:220px;
	bottom:0;
	left:0;
	right:0;
	margin-top:auto;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;
	text-align:justify;
}


#careersImage01{
	width:100%;
	height:auto;
}