body, html {
color: #2c2c2c;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#bigpic {
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
z-index: 1;
}

#whiteiphone {
position: fixed;
bottom: 0;
left: 50%;
margin-left: -237px;
max-width: 474px;
z-index: 1;
}

#animation {
position: fixed;
bottom: 0;
left: 50%;
margin-left: -197px;
z-index: 2;
}

header {
position: relative;
z-index: 4;
padding-top: 100px;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
}


#icon{
background-repeat: no-repeat;
background-position: 0 0;
width: 150px;
height: 150px;
float: left;
overflow: hidden;
}

#awp {
background: url("../img/awpfrog.svg") no-repeat 100% 50%;
text-indent: -999em;
width: 40px;
height: 40px;
display: block;
background-size: contain;
opacity: 1;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
z-index: 2;
position: fixed;
bottom: 40px;
right: 40px;
line-height: 3.5;
color: rgba(255,255,255,0);
text-decoration: none;
font-weight: bold;
letter-spacing: -10px;
}

#awp:hover {
opacity: 1;
text-align: right;
padding-right: 60px;
height: 50px;
bottom: 35px;
right: 35px;
letter-spacing: 0px;
color: rgba(255,255,255,1);

}

footer {


}

h2 {
text-align: center;
font-size:34px;
margin-bottom: 20px;
width: 20%;
float: right;
color: white;
}

a#buy {
color: white;
display: inline-block;
padding: 3px .5%;
text-decoration: none;
font-weight: bold;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
border: 3px solid #fff;
font-size: 14px;
width: 18%;
text-align: center;
}

a#video {
font-weight: bold;
color: white;
text-align: center;
display: inline-block;
cursor: pointer;
width: 18%;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
font-size: 14px;
padding: 5px;
margin: 5px 0;
}

a#video:hover {
text-decoration: underline;
color: #1CB5F6;
}

a#buy:hover {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
background: #1CB5F6;
color: #fff;
border: 3px solid #1CB5F6;
}

header p {
text-align: right;
clear: right;
margin: 0 auto 20px;
}







#overlay {
z-index: 3;
background: white;
color: #888;
position: absolute;
top: -100%;
left: 0;
right: 0;
height: 100%;
overflow: hidden;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}



#overlay.active {
top: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

.slide img {
width: 350px;
height: auto;
margin:  0 auto 20px;
display: block;

}

#slideshow {
width: 100% !important;
height: 413px !important;
}

#slideshow div {
left: 50% !important;
text-align: center;
margin-left: -455px !important;
width: 900px !important;

}

#overlay #slideshow p {
width: auto;
float: none;
margin: 0 25px;
font-size: 28px;
font-weight: 100;
font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
}

#icontitle {
width: 150px;
height: 30px;
display: block;
vertical-align: bottom;
}

.alignleft {
float: left;
margin: 0 50px 50px 0;
}

#pager {
left: 50%;
width: 260px;
margin-left: -125px;
position: absolute;
margin-top: -32px;
z-index: 10;
}

#pager li {
list-style-type: none;
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
position: relative;
}

#pager li a {
text-decoration: none;
display: block;
width: 20px;
height: 20px;
border-radius: 50px;
text-indent: -9999em;
background: #ccc;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
 position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px;
}

#pager li.activeSlide a, #pager li.activeSlide a:hover {
background: #FF6600;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
cursor: default;
}

 #pager li a:hover {
 width: 24px;
 height: 24px;
 margin: -12px 0 0 -12px;
 }

.alignright {
float: right;
margin: 0 0 50px 50px;
}

#overlay p {
margin: 25px;
line-height: 1.65;
font-size: 14px;
font-weight: 300;
float: left;
width: 400px;
letter-spacing: 0.25px
}

.slide div {
clear: both;
margin-bottom: 50px;
}

#overlay h1 {
font-size: 36px;
line-height: 1;
margin: 0 0 20px;
color: #333;
}



#pullme {
position: fixed;
display: block;
width: 50px;
height: 50px;
background: white;
color: #ff6600;
font-size: 40px;
text-decoration: none;
text-align: center;
font-weight: bold;
line-height: 43px;
z-index: 5;
text-indent: 1px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
top: -60px;
right: -60px;
}

#pullme:hover {
font-size: 50px;
}

#pullme.plushit {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);

}


#overnav {
width: 200px;
float: left;
}

#overlay .container {
position: absolute;
left: 50%;
width: 900px;
margin: 50px 0 0 -450px;
height: 500px;
padding: 0;
}



a#buyalt {
color: #ff6600;
display: block;
padding: 3px 5px;
text-decoration: none;
font-weight: bold;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
border: 3px solid #ff6600;
font-size: 12px;
width: 180px;
text-align: center;
margin-top: 20px;
margin: 0 auto;
clear:both;
}

a#buyalt:hover {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
background: #ff6600;
color: #fff;
border: 3px solid #ff6600;
}






/*responsivestyles*/

@media screen and (max-width: 1280px) {
 h2 {
 font-size: 25px;
 }
}

@media screen and (max-width: 1023px) {
	
	body {
	min-width: 250px;
	}
	
	#logo h1 {
	float: none;
	background-position: 50% -129px;
	width: auto;
	height: 20px;
	background-size: 115px auto;
	margin-right: -8px;
	}
	
	h2 {
	text-align: left;
	margin-top: 15px;
	width: auto;
	text-align: center;
	float: none;
	font-size: 14px;
	}
	
	header {
	background: white;
	padding-top: 30px;
	}
	
	body, html {
	background-color: #111;
	
	}
	
	footer #awp {
	background-color: #111;
	position: static;
	width: auto;
	height: auto;
	padding: 50px 30px 20px;
	opacity: 1 !important;
	text-align: center;
	text-indent: 0;
	background-position: 50% 20%;
	background-size: 40px 40px;
	opacity: 1;
	line-height: 1.5;
	margin-top: 50px;
	letter-spacing: 0px;
}

	footer #awp:hover  {
	width: auto;
	height: auto;
	text-indent: 0;
	letter-spacing: 0px;
	padding: 50px 30px 20px;
	text-align: center;
	background-size: 40px 40px;
	
	}
	
	
 #bigpic img#whiteiphone {
 width: 300px;
 margin-left: -150px;
 }

 #bigpic img#animation {
 width: 250px;
 margin-left: -125px;
 }
 

	
	header p  {
	text-align: center;
	padding-bottom: 25px;
	margin-bottom: 0;
	}
	
	
	header, #bigpic{
	position: relative;
	}
	
	#animation, #bigpic img {
	position: absolute;
	}
	
	#bigpic {
	overflow: hidden;
	min-height: 350px;
	}
	
	a#buy 	{
	width: auto;
	color: #333;
	border-color: #333;
	padding: 3px 10px;
	}
	
	#tagline {
	color: #333;
	}
	
	#overlay, #pullme {
	display: none;
	}
	
	a#video {
	color: black;
	width: auto;
	}
	
	
	
}