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


#animation{border:0px solid #ccc; position:relative; width:100%; height:515px; margin-top:-40px; z-index:0;/*overflow:hidden;*/}
.shadow{display:block;text-align:center; opacity:.35; z-index:-4;}

#lines{opacity:0;position:absolute;width:100%;height:100%; background:url(../imgs/lines_black.svg) 50% 503% no-repeat;z-index:-999; background-size:63.6% 104%;}
.bk #lines{opacity:0;position:absolute;width:100%;height:100%; background:url(../imgs/lines_white.svg) 50% 503% no-repeat;z-index:-999; background-size:63.6% 104%;}

.sampvid{opacity:0;position:absolute;top:0;left:0;}
.sampvid img{max-width:100%;}

#tv{opacity:0; z-index:-3; position:absolute; width:36.9%; /*margin-left:12.3%;*/ margin-top:8%;}
#tv .lg{opacity:0; width:22.5%;position:absolute; top:24.4%; left:38.5%;}
#tv .shadow img{width:82%; margin-top:-15%;}
#tv .sampvid{width:96.08%;margin-left:1.75%;margin-top:3%}

#pc{opacity:0; z-index:-3; position:absolute; width:24.2%; margin-left:68.5%; margin-top:12.45%;}
#pc .lg{opacity:0; width:20.5%;position:absolute; top:22.22%; left:40.1%;}
#pc .shadow img{width:95%; margin-top:-19%;}
#pc .sampvid{width:90%;margin-left:5.1%;margin-top:4%}

#laptop{opacity:0; z-index:-1; position:absolute; width:24.34%; margin-left:37.29%; margin-top:10%;}
#laptop .lg{opacity:0; width:13.1%;position:absolute; top:33.63%; left:43.9%;}
#laptop .sampvid{width:71.7%;margin-left:13.9%;margin-top:3.2%}

#ipad{opacity:0; z-index:-1; position:absolute; width:6.76%; margin-left:73.63%; margin-top:15.5%; transform:rotateZ(5.3deg);}
#ipad .lg{opacity:0; width:24.56%;position:absolute; top:40.1%; left:38.6%;}
#ipad .sampvid{width:93%;margin-left:4%;margin-top:47%;}

#iphone{opacity:0; z-index:-2; position:absolute; width:3.8%; margin-left:40.2%; /*40.2*/ margin-top:25.8%; transform:rotateZ(-5.95deg);}
#iphone .lg{opacity:0; width:24.56%;position:absolute; top:34.1%; left:38.6%;}
#iphone .sampvid{width:93%;margin-left:4%;margin-top:75%;}

.text{opacity:0;position:absolute; z-index:-1; width:100%; font-family:'Raleway', sans-serif; font-size:50px; font-weight:200; color:#888; text-align:center; top:61%;}
.text span{font-weight:300; color:#2c8ecd;}
.text span.red{color:#ed2a27;}




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

#animation{height:481px;}
#ipad .lg{top:35.1%;}
#pc .shadow img{margin-top:-21%;}

.text{font-size:42px;}
}

@media only screen and (max-width: 640px) {
	#tv .shadow img{margin-top:-18%;}
	#pc .shadow img{margin-top:-24%;}
	#animation{height:354px;}
	#ipad .lg{top:31.1%;}
	#iphone .lg{top:29.1%;}
	.text{font-size:34px;}
	#iphone .sampvid{margin-top:52%; width:89%}
	.hyvwu{margin-top:-60px;}
}

@media only screen and (max-width: 480px) {
	#animation{height:183px;}
	#tv .lg{top:21.4%;}
	#pc .lg{top:14.22%;}
	#laptop .lg{top:18.63%;}
	#ipad .lg{top:13.1%;}
	#iphone .lg{top:2.1%;}
	#tv .shadow img{margin-top:-26%;}
	#pc .shadow img{margin-top:-39%;}
	#ipad .sampvid{margin-top:21%;}
	#iphone .sampvid{margin-top:2%;}
	.text{font-size:18px;}
	.hyvwu{margin-top:-24px;}
}

@media only screen and (max-width: 320px) {
	#animation{height:159px;}
	#tv .lg{top:26.4%;}
	#pc .lg{top:15.22%;}
	#tv .shadow img{margin-top:-30%;}
	#pc .shadow img{margin-top:-45%;}
	#laptop .lg{top:12.63%;}
	#ipad .lg{top:6.1%;}
	.text{font-size:16px;}
}