@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 */
  src: url('http://cognizantperspectives.com/fonts/ProximaNova/ProximaNova-Semibold.otf'); /* IE9 Compat Modes */
  
}


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

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

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

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


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



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



#main {
	position: relative;
	margin: 0 auto;
	top: 0;
	left:0;
	width: 450px;
	height: 620px;
	background-color: #fff;
	z-index: 11;
	background: 
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #fff 10px,
    #fff 20px
  ),
  
  linear-gradient(
    to bottom,
    #eee,
    #f7f4f6
  );
}
	
#pattern {
	position: relative;
	margin: 0 auto;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	background: 
linear-gradient(135deg, #eee 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ccc 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #eee 25%, transparent 25%),
linear-gradient(45deg, #ccc 25%, transparent 25%);	
background-size: 100px 100px;
	opacity: .2;
	overflow: hidden;
	z-index: 1;
}	
#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;
	}

#less {
	position: absolute;
	top: 26.5%;
	left: 75%;
	width: 21.5%;
	height: 8%;
	display: none;
	z-index: 2222222222222200000;
	}
	
	
	
#back, #back2 {
	position: absolute;
	top: 80%;
	left: 87%;
	width: 10%;
	height: 8%;
	display: none;
	z-index: 2222222222222200000;
	}
	
#back3 {
	position: absolute;
	top: 80%;
	left: 38%;
	width: 10%;
	height: 8%;
	display: none;
	z-index: 2222222222222200000;
	}	
	
#back4 {
	position: absolute;
	top: 83%;
	left: 40%;
	width: 7%;
	height: 8%;
	display: none;
	z-index: 2222222222222200000;
	}	
	
	
#tap {
	position: absolute;
	top: 82%;
	left: 40%;
	width: 60%;
	height: 8%;

	z-index: 2222222222222200000;
	}		
	

#robot {
	-webkit-animation: bounceInUp 1s 11s both;
			animation: bounceInUp 1s 11s both;
 } 
	


#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: 3px 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%;
	left: 32%;
	width: 66%;
	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: 305px;
	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;
	}


}