body, body * {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0; 
	margin: 0;
	font-family: Arial, sans-serif;
	font-size: 9pt;
	color: #333;
}
#main-container {
	position: absolute;
	width: 300px;
	height: 250px;
	box-sizing: border-box;	
	background-color: #FFFFFF;	
}
#content{
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width:300px;
	height:250px;
	overflow: hidden;
	opacity: 0;
}


#border{
    width: 298px;
    height: 248px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    opacity: 1;
    border: solid 1px #000000;
}
#exit{
	position:absolute;
	display:block;
	opacity:0;
	top:0px;
	left:0px;
	width:300px;
	height:250px;
	cursor:pointer;
	background-color:transparent;
	z-index:999;
}

#logo, #copy1a, #copy1b, #copy1c, #copy1d, #copy2, #copy3a, #copy3b, #copyEnd, #cta, #ctaOver, #frame1, #frame2{
    width: 300px;
	height: 250px;
	display: block;
	position: absolute;
    top: 0px;
    left: 0px;
	z-index: 102;
	}

#logo{ background: url(images/logo.png) 0px 0px no-repeat; top:0px; left: 0px; opacity: 1;}

#copyEnd{ background: url(images/copyEnd.png) 0px 0px no-repeat; top: 0px; opacity: 0;}

#copy1Holder{
	width: 300px;
    height: 250px;
	display: block;
	position: absolute;
	overflow: hidden;
	top: 0px;
    left: 0px; 
	z-index: 102;
	opacity: 1;
}


#copy1a{ background: url(images/copy1a.png) 0px 0px no-repeat; z-index: 102; top: 100px; opacity: 0;}
#copy1b{ background: url(images/copy1b.png) 0px 0px no-repeat; z-index: 102; top: 100px; opacity: 0;}
#copy1c{ background: url(images/copy1c.png) 0px 0px no-repeat; z-index: 102; top: 100px; opacity: 0;}
#copy1d{ background: url(images/copy1d.png) 0px 0px no-repeat; z-index: 102; top: 100px; opacity: 0;}

#copy2{ background: url(images/copy2.png) 0px 0px no-repeat; top:0px; left: 0px; opacity: 0;}


#copy3a{ background: url(images/copy3a.png) 0px 0px no-repeat; top:100px; opacity: 0;}
#copy3b{ background: url(images/copy3b.png) 0px 0px no-repeat; top:100px; opacity: 0;}


#cta{	
	overflow: hidden;
    top: 100px;
    left: 0px;
	opacity: 0;
	background:url("images/cta.png") 0px 0px no-repeat;
}
#ctaOver{	
	overflow: hidden;
    top: 0px;
    left: 0px;
	opacity: 0;
	background:url("images/cta_over.png") 0px 0px no-repeat;
}

#bgHolder{
	width: 450px;
    height: 250px;
	display: block;
	position: absolute;
	overflow: hidden;
	top: 0px;
    left: 0px; 
	z-index: 101;
	opacity: 1;
}


#BG_dark{
	width: 369px;
    height: 250px;
    display: block;
    position: absolute;
	top: 0px;
    left: 0px; 
	opacity: 1;
	z-index: 101;
	background:url("images/img0.jpg") 0px 0px no-repeat;
}
#BG_light{
	width: 369px;
    height: 250px;
    display: block;
    position: absolute;
	top: 0px;
    left: 0px; 
	opacity: 0;
	z-index: 101;
	background:url("images/img1.png") 0px 0px no-repeat;
}

#endIMG{
	width: 350px;
    height: 250px;
    display: block;
    position: absolute;
	top: 0;
    /*left: -50px; */
    left: 0px; 
	background:url("images/img2.jpg") 0px 0px no-repeat;
	clip-path: polygon(-375px 0px, -300px 0px, 0px 125px, -300px 250px, -375px 250px);
}
	
	
.transition-1{
	-webkit-transition: all .8s cubic-bezier(.2,.77,.43,.97);
	-ms-transition: all .8s cubic-bezier(.2,.77,.43,.97);
	-moz-transition: all .8s cubic-bezier(.2,.77,.43,.97);
	transition: all .8s cubic-bezier(.2,.77,.43,.97);
}

.transition-2{
	-webkit-transition: all 2.2s ease-in-out;
	-ms-transition: all 2.2s ease-in-out;
	-moz-transition: all 2.2s ease-in-out;
	transition: all 2.2s ease-in-out;
}

.transition-3{
	-webkit-transition: all .8s ease-in-out;
	-ms-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

.transition-4{
	-webkit-transition: all 4.2s cubic-bezier(.81,.17,.6,.98);
	-ms-transition: all 4.2s cubic-bezier(.81,.17,.6,.98);
	-moz-transition: all 4.2s cubic-bezier(.81,.17,.6,.98);
	transition: all 4.2s cubic-bezier(.81,.17,.6,.98);
}

.transition-cta{
	-webkit-transition: all .15s ease-in-out;
	-ms-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
/*ANIMATIONS*/

/*Pan image*/
.panUp{
	-webkit-transform: translate(0px, -100px) rotate(0.001deg) !important;
	-ms-transform: translate(0px, -100px) rotate(0.001deg) !important;
	-moz-transform: translate(0px, -100px) rotate(0.001deg) !important;
	transform: translate(0px, -100px) rotate(0.001deg) !important;
}

.IMGpan{
	-webkit-transform: translate(-69px, 0px) rotate(0.001deg) !important;
	-ms-transform: translate(-69px, 0px) rotate(0.001deg) !important;
	-moz-transform: translate(-69px, 0px) rotate(0.001deg) !important;
	transform: translate(-69px, 0px) rotate(0.001deg) !important;
}

.IMGpan2{
	-webkit-transform: translate(-150px, 0px) rotate(0.001deg) !important;
	-ms-transform: translate(-150px, 0px) rotate(0.001deg) !important;
	-moz-transform: translate(-150px, 0px) rotate(0.001deg) !important;
	transform: translate(-150px, 0px) rotate(0.001deg) !important;
}

.IMGpanEnd{
	-webkit-transform: translate(50px, 0px) rotate(0.001deg) !important;
	-ms-transform: translate(50px, 0px) rotate(0.001deg) !important;
	-moz-transform: translate(50px, 0px) rotate(0.001deg) !important;
	transform: translate(50px, 0px) rotate(0.001deg) !important;
}

.fade-out{
	opacity:0 !important;
}
.fade-in{
	opacity:1 !important;
}

.endMask{
	clip-path: polygon(0px 0px, 300px 0px, 375px 125px, 300px 250px, 0px 250px) !important;
}