@charset "UTF-8";
/* CSS Document */


/*Responsive site code*/

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:450px; }
    #secondary { width:30%; margin-left:3%;}  
}


@font-face {
  font-family: 'proximaNovaSemibold';
  src: url('fonts/ProximaNova-Semibold-7.otf') format('opentype'); /* IE9 Compat Modes */
  
}


@font-face {  
  font-family: 'proximaNovaBold';
  src: url('fonts/ProximaNovaA-Bold.otf') format('opentype'); /* IE9 Compat Modes */
  
}

@font-face {  
  font-family: 'proximaNovaLight';
  src: url('fonts/ProximaNova-Light.otf') format('opentype'); /* IE9 Compat Modes */
  
}

@font-face {  
  font-family: 'proximaNovaRegular';
  src: url('fonts/ProximaNova-Regular.otf') format('opentype'); /* IE9 Compat Modes */
  
}

@font-face {  
  font-family: 'proximaNovaBlack';
  src: url('fonts/ProximaNova-Black.otf') format('opentype'); /* IE9 Compat Modes */
  
}


@font-face {  
  font-family: 'proximaNovaExtraBold';
  src: url('fonts/ProximaNova-Extrabld.otf') format('opentype'); /* IE9 Compat Modes */

}



@media screen and (max-width: 11000px) {



#main {
	position: relative;
	margin: 0 auto;
	top: 0;
	left:0;
	width: 450px;
	height: 680px;
	background-color: #fff;
	background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #fff 10px,
    #fff 20px
  ),
  
  linear-gradient(
    to bottom,
    #eee,
    #f7f4f6
  );
	overflow: hidden;
}
	
#eyeCandy {
	opacity:0.9;
}
#main b {
	font-family: proximaNovaBold, Myriad, sans-serif;
}
/*animation*/
	



	
#mainIllo {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 5;
	}


	
#back {
	position: absolute;
	top: 80%;
	left: 89%;
	width: 8%;
	height: 8%;
	display: none;
	z-index: 2222222222222200000;
	}

#arrowForward1A, #arrowForward1B,#arrowForward1C,#arrowForward2A, #arrowForward3A, #arrowForward4A, #arrowForward4B {
	position: absolute;
	top: 50%;
	left: 85%;
	width: 10%;
	height: 9%;
	display: none;
	z-index: 2222222222222200000;
	}
	
 #arrowBack1B,#arrowBack1C,#arrowBack1D,#arrowBack2B, #arrowBack3B, #arrowBack4B, #arrowBack4C {
	position: absolute;
	top: 50%;
	left: 3%;
	width: 10%;
	height: 9%;
	display: none;
	transform: rotate(180);
	z-index: 2222222222222200000;
	}	
	
#enter {
	position: absolute;
	top: 43%;
	left: 88%;
	width: 9%;
	height: 7%;
	display: none;
	z-index: 2222222222222200000;
	}
#tap {
	position: absolute;
	top: 80%;
	left: 0%;
	width: 60%;
	height: 7%;
	z-index: 2222222222222200000;
	}
#tap2 {
	position: absolute;
	top: 82%;
	left: 0%;
	width: 50%;
	height: 7%;
	display: none;
	z-index: 2222222222222200000;
	}	
#eyeCandy {
	position: absolute;
	top: 3%;
	left: 0%;
	width: 100%;
	height: 11%;
	font-family: proximaNovaRegular, Myriad, sans-serif;
	font-size: 3em;
	line-height: 1em;
	text-align: center;
	color: #fff;
	padding: 3% 0 0 0;
	box-sizing: border-box;
	z-index: 20;
	
	-webkit-animation: bounceInUp 1s both;
			animation: bounceInUp 1s both;
 } 

#greenBkgd {
  background-blend-mode: multiply;
}

#source {
	position: absolute;
	bottom: 10.5%;
	left: 3%;
	width: 97%;
	height: 5%;
	z-index: 500;
	}
	
#footer {
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 100%;
	height: 10%;
	background-color: #0033A0;
	border-top: 5px solid #fff;
	z-index: 500;
	}
.logo {
	position: absolute;
	top: 28%;
	left: 3%;
	width: 28%;
	height: 70%;
	}
.link a:hover {
	color: #50b3cf;
	}
	
.link a:active {
	color: #e1532d;

	}
	
.link {
	position: absolute;
	bottom:1.5%;
	left: 0%;
	width: 100%;
	height: 7%;
	color: #eeb211;
	z-index: 5000000000;
	}	
.footerText {
	position: absolute;
	top: 90.5%;
	left: 32%;
	width: 68%;
	font-family: proximaNovaLight, Myriad, sans-serif;
	font-size: .8em;
	line-height: 1.2em;
	text-decoration: none;
	text-align: left;
	color: #eeb211;
	z-index: 5000000000;
	}

		
}



@media screen and (max-width: 420px) {


iframe { 
	height: 650px;
	}

#main {
	position: relative;
	margin: 0 auto;
	top: 0;
	left:0;
	width: 220px;
	height: 335px;
	cursor: pointer;
}

	


#main b {
	font-family: proximaNovaBold, Myriad, sans-serif;
}
/*animation*/	

#mainIllo {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 5;
	}


}