@charset "utf-8";

body {
margin: 0;
padding: 0;
overflow:hidden;
background: #000000 url(img/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: auto;
}

.countdown-box {
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    font-size: 48px;
    font-weight: bold;
    background: url(img/timer-bg.png) no-repeat;
    padding: 10px 20px;
    width: 228px;
    height: 100px;
    text-align: center;
}

.model1-left, .model2-left, .model3-left  { 
position: absolute;
left:0;
top:0;
bottom:0;
margin-top: auto;
margin-bottom: auto;
width: 267px;
height: 600px;
-webkit-animation: rightleft 4s; /* Safari 4+ */
-moz-animation: rightleft 4s; /* Fx 5+ */
-o-animation: rightleft 4s; /* Opera 12+ */
animation: rightleft 4s; /* IE 10+, Fx 29+ */
}

.model1-right, .model2-right, .model3-right {
position: absolute;
right:0;
width: 268px;
height: 600px;	
top:0;
bottom:0;
margin-top: auto;
margin-bottom: auto;
-webkit-animation: leftright 4s; /* Safari 4+ */
-moz-animation: leftright 4s; /* Fx 5+ */
-o-animation: leftright 4s; /* Opera 12+ */
animation: leftright 4s; /* IE 10+, Fx 29+ */
}

.btn-how-box {
	position: absolute;
	top: 40%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 380px;
	height: 128px;
}

.btn-how-box img { 
max-width: 100%;
height: auto;
}

.hide {
display: none;	
}

@-webkit-keyframes rightleft {
    0%   {left: 0px; opacity:0;}
    30%  {left: 5%; opacity:1;}
	60%  {left: 5%; opacity:1;}
    100% {left: 0px; opacity:0;}
}

@-moz-keyframes rightleft {
    0%   {left: 0px; opacity:0;}
    30%  {left: 5%; opacity:1;}
	60%  {left: 5%; opacity:1;}
    100% {left: 0px; opacity:0;}
}

@-o-keyframes rightleft {
    0%   {left: 0px; opacity:0;}
    30%  {left: 5%; opacity:1;}
	60%  {left: 5%; opacity:1;}
    100% {left: 0px; opacity:0;}
}

@keyframes rightleft {
    0%   {left: 0px; opacity:0;}
    30%  {left: 5%; opacity:1;}
	60%  {left: 5%; opacity:1;}
    100% {left: 0px; opacity:0;}
}

@-webkit-keyframes leftright {
    0%   {right: 0px; opacity:0;}
    30%  {right: 5%; opacity:1;}
	60%  {right: 5%; opacity:1;}
    100% {right: 0px; opacity:0;}
}

@-moz-keyframes leftright {
    0%   {right: 0px; opacity:0;}
    30%  {right: 5%; opacity:1;}
	60%  {right: 5%; opacity:1;}
    100% {right: 0px; opacity:0;}
}

@-o-keyframes leftright {
    0%   {right: 0px; opacity:0;}
    30%  {right: 5%; opacity:1;}
	60%  {right: 5%; opacity:1;}
    100% {right: 0px; opacity:0;}
}

@keyframes leftright {
    0%   {right: 0px; opacity:0;}
    30%  {right: 5%; opacity:1;}
	60%  {right: 5%; opacity:1;}
    100% {right: 0px; opacity:0;}
}

@media (max-width:1024px){ 

.model1-left, .model2-left, .model3-left, .model1-right, .model2-right, .model3-right { 
max-width: 200px;
}

.model1-left img, .model2-left img, .model3-left img, .model1-right img, .model2-right img, .model3-right img { 
max-width: 100%;
height: auto;
}

}

@media (max-width:800px){ 

body {
background: #000000 url(img/bg-tablet.jpg) no-repeat top center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;	
}

.model1-left, .model2-left, .model3-left, .model1-right, .model2-right, .model3-right {
display: none;	
}

}

@media (max-width:420px){ 

body {
background: #000000 url(img/bg-mob.jpg) no-repeat top center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;	
}

.btn-how-box {
	max-width: 100%;
	top: 35%;
}

.countdown-box {
    top: 53%;
}

}