body{
	position:absolute;
	min-width:100%;
	max-width:100%;
	top:0px;
	margin:0px;
	padding:0px;
	font-family: 'Open Sans', sans-serif;
	background:rgb(20,20,20);
}

.container{
	max-width:1280px;
	margin:0px auto;
	position:relative;
	top:0px;
	padding:0px;
}

.container h1{
	top:0px;
	margin:0px auto;
	padding:0px;
	color:rgb(80,80,80);
	text-align:center;
}

#screen-ratio{
	position:absolute;
	background-color:rgb(20,20,20);
	width:100%;
	top:0px;
	margin:0px;
	padding:0px;
	overflow:hidden;
	
	-webkit-animation-name: myfirst;
	-webkit-animation-duration: 30s;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: infinite;
	
	-moz-animation-name: myfirst;
	-moz-animation-duration: 30s;
	-moz-animation-delay: 2s;
	-moz-animation-iteration-count: infinite;

    animation-name: myfirst;
    animation-duration: 30s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

#screen-ratio p{
	position:relative;
	text-align:center;
	width:100%;
	top:45%;
}

.balkup{
	position: absolute;
	width: 100%;
	top:auto;
	background:rgba(0,0,0,0.1);
	display:block;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1);
	
	-webkit-animation-name: goUp;
	-webkit-animation-duration: 30s;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: infinite;
	
	-moz-animation-name: goUp;
	-moz-animation-duration: 30s;
	-moz-animation-delay: 2s;
	-moz-animation-iteration-count: infinite;

    animation-name: goUp;
    animation-duration: 30s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

.balkup2{
	position: absolute;
	width: 100%;
	top:auto;
	background:rgba(0,0,0,0.1);
	display:block;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1);
	
	-webkit-animation-name: goUp2;
	-webkit-animation-duration: 30s;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: infinite;

    animation-name: goUp2;
    animation-duration: 30s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

.balkup3{
	position: absolute;
	width: 100%;
	top:auto;
	background:rgba(0,0,0,0.1);
	display:block;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1);
	
	-webkit-animation-name: goUp3;
	-webkit-animation-duration: 30s;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: infinite;

    animation-name: goUp3;
    animation-duration: 30s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

.persons{
	position: absolute;
	width: 34%;
	top:auto;
	bottom:0%;
	background-image:url('sprite1.png');
	background-size:100% auto;
	display:block;
	opacity:0;
	height:51%;
	-webkit-animation-name: persons;
	-webkit-animation-duration: 30s;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: infinite;

    animation-name: persons;
    animation-duration: 30s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
} 

#tv{
	position:absolute;
	top:auto;
	left:43%; 
	width:13.7%;
	background-position:left top; 
	background-image:url('tv2.png');
	background-size:100% auto;
	-webkit-animation-name: tva;
	-webkit-animation-duration: 30s;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: infinite;

    animation-name: tva;
    animation-duration: 30s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}



/* Media queries */
@media (max-width:1280px){
	#screen-ratio{
		top:60px;
	}
}
/* Animation */ 
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background-image: url('20back.png');background-size:300% 100%; background-position:0% 0%;}
    7.5% {background-image: url('backgroundg.png'); background-size:300% 100%; background-position:0% 0%;}
    12%  {background-image: url('backgroundg.png'); background-size:300% 100%; background-position:0% 0%;}
    30%  {background-image: url('backgroundg.png'); background-size:300% 100%; background-position:100% 0%;}
    90%  {background-image: url('backgroundg.png'); background-size:300% 100%; background-position:100% 0%;}
    95%  {background-image: url('20back.png');      background-size:300% 100%; background-position:100% 0%;}
    /*
    35%  {background-image: url('backgroundg.png'); background-size:300% 100%; background-position:0% 0%;}
    90%  {background-image: url('backgroundg.png'); background-size:300% 100%; background-position:100% 0%;}
    95%  {background-image: url('20back.png');background-size:300% 100%;}
    */
}

/* Standard syntax */
@-moz-keyframes myfirst {
    0%   {background-image: url('20back.png');background-size:100% 100%;}
    7.5% {background-image: url('background2.png'); background-size:100% 100%;}
    90%  {background-image: url('background2.png'); background-size:100% 100%;}
    95%  {background-image: url('20back.png');background-size:100% 100%;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background-image: url('20back.png');background-size:100% 100%;}
    7.5% {background-image: url('background2.png'); background-size:100% 100%;}
    90%  {background-image: url('background2.png'); background-size:100% 100%;}
    95%  {background-image: url('20back.png');background-size:100% 100%;}
}

@-webkit-keyframes goUp{
	0%   {bottom:0%; height:0%; box-shadow: 0px 0px 12px 12px rgba(0,0,0,0.1);}
    7.5%  {height:10%;}
    10.5%  {bottom:10%; box-shadow:0px 0px 12px 12px rgba(0,0,0,0.1); background:rgba(0,0,0,0.1); }
    54%  {display:none; height:10%; box-shadow:0px 0px 0px 0px rgba(0,0,0,0); background:rgba(0,0,0,0);}
    55%  {display:none; height:0px; background:none; box-shadow:0px 0px 0px 0px background:rgba(0,0,0,0); }
    100% {display:none; }
}

@-moz-keyframes goUp{
	0%   {bottom:0%; height:0%; box-shadow: 0px 0px 12px 12px rgba(0,0,0,0.1);}
    7.5%  {height:10%;}
    10.58%  {bottom:10%; box-shadow:0px 0px 12px 12px rgba(0,0,0,0.1); background:rgba(0,0,0,0.1); }
    54%  {display:none; height:10%; box-shadow:0px 0px 0px 0px rgba(0,0,0,0); background:rgba(0,0,0,0);}
    55%  {display:none; height:0px; background:none; box-shadow:0px 0px 0px 0px background:rgba(0,0,0,0); }
    100% {display:none; }
}

@keyframes goUp{
	0%   {bottom:0%; height:0%; box-shadow: 0px 0px 12px 12px rgba(0,0,0,0.1);}
    7.5%  {height:10%;}
    10.5%  {bottom:10%; box-shadow:0px 0px 12px 12px rgba(0,0,0,0.1); background:rgba(0,0,0,0.1); }
    54%  {display:none; height:10%; box-shadow:0px 0px 0px 0px rgba(0,0,0,0); background:rgba(0,0,0,0);}
    55%  {display:none; height:0px; background:none; box-shadow:0px 0px 0px 0px background:rgba(0,0,0,0); }
    100% {display:none; }
}

@-webkit-keyframes goUp2{
	0%   {bottom:30%; height:0%; box-shadow: 0px 0px 12px 12px rgba(0,0,0,0.1);}
    15%  {height:10%;}
    10.5%  {bottom:45%; box-shadow:0px 0px 12px 12px rgba(0,0,0,0.1); background:rgba(0,0,0,0.1); }
    54%  {display:none; height:10%; box-shadow:0px 0px 0px 0px rgba(0,0,0,0); background:rgba(0,0,0,0);}
    55%  {display:none; box-shadow:0px 0px 0px 0px background:rgba(0,0,0,0); background:rgba(0,0,0,0);}
    90%  {display:none; height:0px; box-shadow:0px 0px 0px 0px rgba(0,0,0,0); background:rgba(0,0,0,0);}
    91%  {display:block; bottom:49%; height: 2%; box-shadow:0px 0px 12px 12px white; background:white;}
    92%  {display:block; bottom:49.5%; height: 1%; box-shadow:0px 0px 0px 0px white; background:white;}
    95%  {display:none;height: 0%; }
}

@keyframes goUp2{
	0%   {bottom:30%; height:0%; box-shadow: 0px 0px 12px 12px rgba(0,0,0,0.1);}
    7.5%  {height:10%;}
    10.5%  {bottom:45%; box-shadow:0px 0px 12px 12px rgba(0,0,0,0.1); background:rgba(0,0,0,0.1); }
    54%  {display:none; height:10%; box-shadow:0px 0px 0px 0px rgba(0,0,0,0); background:rgba(0,0,0,0);}
    55%  {display:none; box-shadow:0px 0px 0px 0px background:rgba(0,0,0,0); background:rgba(0,0,0,0);}
    90%  {display:none; height:0px; box-shadow:0px 0px 0px 0px rgba(0,0,0,0); background:rgba(0,0,0,0);}
    91%  {display:block; bottom:49%; height: 2%; box-shadow:0px 0px 12px 12px white; background:white;}
    92%  {display:block; bottom:49.5%; height: 1%; box-shadow:0px 0px 0px 0px white; background:white;}
    95%  {display:none;height: 0%; }
}

@-webkit-keyframes goUp3{
	0%   {bottom:60%; height:0%; box-shadow: 0px 0px 12px 12px rgba(0,0,0,0.1);}
    7.5%  {height:10%;}
    10.5%  {bottom:80%; box-shadow:0px 0px 12px 12px rgba(0,0,0,0.1); background:rgba(0,0,0,0.1); }
    54%  {display:none; height:10%; box-shadow:0px 0px 0px 0px rgba(0,0,0,0); background:rgba(0,0,0,0);}
    55%  {display:none; height:0px; background:none; box-shadow:0px 0px 0px 0px background:rgba(0,0,0,0); }
    100% {display:none; box-shadow:0px 0px 0px 0px background:rgba(0,0,0,0); background:rgba(0,0,0,0);}
}

@keyframes goUp3{
	0%   {bottom:60%; height:0%; box-shadow: 0px 0px 12px 12px rgba(0,0,0,0.1);}
    7.5%  {height:10%;}
    10.5%  {bottom:80%; box-shadow:0px 0px 12px 12px rgba(0,0,0,0.1); background:rgba(0,0,0,0.1); }
    54%  {display:none; height:10%; box-shadow:0px 0px 0px 0px rgba(0,0,0,0); background:rgba(0,0,0,0);}
    55%  {display:none; height:0px; background:none; box-shadow:0px 0px 0px 0px background:rgba(0,0,0,0); }
    100% {display:none; box-shadow:0px 0px 0px 0px background:rgba(0,0,0,0); background:rgba(0,0,0,0);}
}

@-webkit-keyframes persons{
	0%   {opacity:0; left:120%;}
	29.9%{opacity:0; left:120%;}
    30%  {opacity:1; left:120%;}
    34%  {opacity:1; left:50%;}
    40%  {opacity:1; left:50%;}
    100% {opacity:1; left:50%;}
}

@keyframes persons{
	0%   {opacity:0; left:120%;}
	49.9%{opacity:0; left:120%;}
    50%  {opacity:1; left:120%;}
    54%  {opacity:1; left:50%;}
    60%  {opacity:1; left:50%;} 
    100% {opacity:1; left:50%;}
}
 
@-webkit-keyframes tva{
	0%   {bottom:0%; height:0px;}
    7.5% {height:23.3%;}
    12%  {left:43%;opacity:1;}
    18%  {left:110%;opacity:1;}
    18.1%  {left:110%;opacity:0;background-image:url('tv.png');width:13.7%;}
    19%  {left:-55%;  height:23.3%;opacity:0;background-image:url('ban2.png');width:55%;}
    20%  {left:-55%;  height:13%;opacity:1;background-image:url('ban2.png');width:55%;}
    30%  {left:22.5%; height:13%;opacity:1;background-image:url('ban2.png');width:55%;}
    98%  {left:22.5%; height:13%;background-image:url('ban2.png');width:55%;}  
    99.4% {left:22.5%; height:0%;bottom:0%;top:auto;width:55%;}
}

@keyframes tva{
	0%   {bottom:0%; height:0px;}
    7.5%  {height:23.3%;}
    99%  {height:23.3%} 
    100% {height:0%;bottom:0%;top:auto;}
}