body{
  padding:0;
  margin:0;
}

/* Prel_loader Area */

.noScroll {
    overflow: hidden;
 }
 
.slide {
	position: relative;
	height: 100vh;
}

#loader-backgrnd{

	 background: #395089; /* For browsers that do not support gradients  */
     background: -webkit-radial-gradient(circle, #395089 15%, #050c2c 90%); /* Safari 5.1-6.0 */
	 background: -o-radial-gradient(circle, #395089 15%, #050c2c 90%); /* For Opera 11.6-12.0 */
	 background: -moz-radial-gradient(circle, #395089 15%, #050c2c 90%); /* For Firefox 3.6-15 */
	 background: radial-gradient(circle, #395089 15%, #050c2c 90%); /* Standard syntax */
	 height: 100%;
	 width:100%;

	 position: absolute;

}


.slide .pin-wrapper{
	width:100%;
	height:100%;
}

#loader01{

/*background-color: red;*/
}

#loader02{

/*background-color: blue;*/
}

#anim{

	/*background-color: yellow;*/
}

#loader01 .loaderIMG{

	background-image: url(../images/logo-Outline.svg);
}

#loader02 .loaderIMG{

	background-image: url(../images/logo.svg);
	opacity: .5;
}

#loader02 .pin-wrapper{

	transform:translateY(-100%);
	 -webkit-transform:translateY(-100%);
	 -ms-transform:translateY(-100%);

}

.scrollmagic-pin-spacer{
	position: absolute !important;
	clip:rect(auto, auto, auto, auto);

}

.loaderIMG{

	background-repeat: no-repeat;
	background-position: center;
    width: 90%;
 	height: 15%;
    transform: translate(5%, 250%);
    -webkit-transform:translate(5%, 250%);
    -ms-transform:translate(5%, 250%);  

    position: absolute;
}

#sample2-progress{
	
}

#copy-wrapper{
	
	position: absolute;
    width: 85%;
    left: 7%;
    top: 55%;

}

h2{


/*font-family: 'futuraeftuop-mediumregular';*/
letter-spacing: 2px;
text-transform: uppercase;
font-size: 1.4em;

}

.loadingCopy{

	color:white;
	font-size:1em;
}

/* End PreLoader */

/* Scrollmagic and greensock */

#preloader-Wrapper{

position: relative;

}

#imagesequence{
	overflow: hidden;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
z-index: -5;
}

#imagesequence img{

position: absolute;

}

.s2{
height: 200vh;
}

.hidden{
	display: none;
}

.calltoActionBtn{
    position: fixed;
    padding-left: 15px;
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    background-color: #df4b01;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 2.5px;
    text-decoration:none;

}

.calltoActionBtn:hover{
text-decoration:none;
color: white;
}

.calltoActionBtn:visited{
text-decoration:none;
color: white;
}

.btnArrow{
	    font-size: 1.15em;
  
    position: absolute;
    top: 7px;
    right: 5px;
    padding-right: 5px;

}

#calltoAction1{
		top: 93%;
    	left: 30%;
    	opacity: 0;
}

#calltoAction2{

	 	top: 93%;
    	left: 30%;
    	opacity: 1;

}

/* End Scrollmagic and greensock */

/* catch screen rotate */

#rotatePopup{
		
	width: 100%;
    height: 100%;
    background-color: #395089;
    z-index: 100;
    position: fixed;
    top:0;
    text-align: center;
    color: white;
    line-height: 100vh;

	
}

.iconsOffset{
	left:-30px;
	top:10px;
}


.iconOffset{
	top: -28px;
left: 75px;
font-size: 126px;
}



/*Break Points*/


@media only screen and (min-width : 500px) and (max-width : 769px) {

	#copy-wrapper{
		
		width: 72%;
		left: 12%;
		top: 55%;

	}

	.loadingCopy{


		font-size:1.5em;
	}

.calltoActionBtn{
    
    padding-right: 35px;
    font-size: 1.25em;

}


.btnArrow{
	
	font-size: 1.35em;
    top: 3px;
    right: 2px;
    padding-right: 10px;

}

#calltoAction1, #calltoAction2{
	    top: 93%;
    left: 38%;
}

}


}

/*-----------------------------------------------*/


@media only screen and (min-width : 770px) and (max-width : 1023px) {

	#copy-wrapper{
		
		width: 50%;
		left: 25%;
		top: 56%;

	}

	.loadingCopy{


		font-size:1.25em;
	}

.calltoActionBtn{
    
    padding-right: 35px;
    font-size: 1.25em;

}


.btnArrow{
	
	font-size: 1.35em;
    top: 3px;
    right: 2px;
    padding-right: 10px;

}

#calltoAction1, #calltoAction2{
		top: 48%;
    	left: auto;
    	right:5%

}




}
/*-----------------------------------------------*/


@media only screen and (min-width : 1024px){

	#copy-wrapper{
		
		width: 35%;
	    left: 32%;
	    top: 55%;
		
	}

	h2{


		font-size: 1.5em;

	}

	.loadingCopy{


		font-size:1.25em;
	}

.calltoActionBtn{
    
    padding-right: 43px;
    font-size: 1.5em;

}


.btnArrow{
	
	font-size: 1.35em;
    top: 3px;
    right: -1px;
    padding-right: 14px;

}

#calltoAction1, #calltoAction2{
		top: 48%;
    	left: auto;
    	right:5%

}

}