#supracool {
    background: url("../images/supracool_1920.jpg") center bottom no-repeat;
    height: 719px;
}

#supracool .frame {           
    padding-top: 90px;
    text-align: center;
    margin: 0 240px;
    width: auto;
}

#supracool .arrow-l {
	background: url("../images/arrow-1920.png") no-repeat;
	position:absolute;
	width:169px;
	height:106px;
	top:312px;
	animation:arrow-l-1920 1s ease 0s infinite;
}

#supracool .arrow-r {
	background: url("../images/arrow-1920.png") no-repeat;
	position:absolute;
	width:169px;
	height:106px;
	top:312px;
	animation:arrow-r-1920 1s ease 0s infinite;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter:"FlipH";
}

@media screen and (max-width: 1366px) {
    #supracool {
        background-image: url("../images/supracool_1366.jpg");
        height: 630px;
    }
    #supracool .frame {  
        margin: 0 75px;
    }
	#supracool .arrow-l {
		background: url("../images/arrow-1366.png") no-repeat;
		top:248px;
		animation:arrow-l-1366 1s ease 0s infinite;
	}
	
	#supracool .arrow-r {
		background: url("../images/arrow-1366.png") no-repeat;
		top:248px;
		animation:arrow-r-1366 1s ease 0s infinite;
	}
}

@media screen and (max-width: 960px) {
    #supracool {
        background-image: url("../images/supracool_960.jpg");
        height: 600px;
    }
    #supracool .frame {      
         padding-top: 50px; 
         margin: 0 20px; 
    }
	#supracool .arrow-l {
		background: url("../images/arrow-960.png") no-repeat;
		top:233px;
		animation:arrow-l-960 1s ease 0s infinite;
	}
	
	#supracool .arrow-r {
		background: url("../images/arrow-960.png") no-repeat;
		top:233px;
		animation:arrow-r-960 1s ease 0s infinite;
	}
}

@media screen and (max-width: 640px) {
    #supracool {
        background-image: url(../images/supracool_640.jpg);
        height: 450px;
    }      
    #supracool .frame {      
        padding-top: 30px;
        margin: 0 34px;
    }
	#supracool .arrow-l {
		background: url("../images/arrow-640.png") no-repeat;
		top:194px;
		animation:arrow-l-640 1s ease 0s infinite;
	}
	
	#supracool .arrow-r {
		background: url("../images/arrow-640.png") no-repeat;
		top:194px;
		animation:arrow-r-640 1s ease 0s infinite;
	}
}

@keyframes arrow-l-1920 {
	from {left:91px;}
	to {left:1px; opacity:0;}
}

@keyframes arrow-l-1366 {
	from {left:-20px;}
	to {left:-70px; opacity:0;}
}

@keyframes arrow-l-960 {
	from {left:-15px;}
	to {left:-55px; opacity:0;}
}

@keyframes arrow-l-640 {
	from {left:-35px;}
	to {left:-55px; opacity:0;}
}

@keyframes arrow-r-1920 {
	from {left:1100px;}
	to {left:1190px; opacity:0;}
}

@keyframes arrow-r-1366 {
	from {left:815px;}
	to {left:865px; opacity:0;}
}

@keyframes arrow-r-960 {
	from {left:495px;}
	to {left:535px; opacity:0;}
}

@keyframes arrow-r-640 {
	from {left:190px;}
	to {left:210px; opacity:0;}
}