.video-controls li {
    position: absolute;
    width: 42%;
    max-width: 800px;
    bottom: 0;
}

#mute-toggle {
    position: absolute;
    float: right;
    left: -30px;
    right: 5px;
    bottom: 5px;

    right: -40px;
}

@media only screen and (min-height: 100px) {

    body .top {
        display: none;
    }

    body .bottom {
        height: 100%;
    }
}
    
@media only screen and (max-width: 1024px) {
    .videobox {
        position: absolute;
        top:16%; 
        left: 19%; 
        bottom: 14%;
        width: 35%;
        max-width: 100%;
    }
}
   


@media only screen and (min-width: 1024px) {
    .videobox {
        position: absolute;
        top: 20%; 
        left: 18%; 
        bottom: 12%;
        width: 35%;
        max-width: 100%;
    }
}

@media only screen and (min-width: 769px)  and (max-width: 1024px) {

    body .bottom {
        background-image: url(../media/open/M.jpg);
    }
    
    .videobox {
        position: absolute;
        top: 24%; 
        left: 18%; 
        bottom: 16%;
        width: 35%;
        max-width: 40%;
	}
}

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

    body .bottom {
        background-image: url(../media/open/S.jpg);
    }

    .videobox embed, .videobox object, .videobox video, .videobox iframe {
        width: 60%;
    }


	@media only screen and (min-height: 100px) {  
	   	.videobox {
			position: absolute;
			top: 28%;
			left: 16%;
			bottom: 6%;
			width: 30% !important;
			max-width: 300px !important;
		}
	
		  .video-controls li {
			display:none !important;
		}
	}
}
@media only screen and (min-width: 420px) and (max-width: 629px){
    
    body .bottom {
        background-color:#060606;
        background-image: url(../media/open/XS.jpg);
        background-repeat: no-repeat;
    }
    
    .logo_left {display: none;}

    .video-controls li {
        display:none !important;
    }
    body #mute-toggle {
        left: -15px;
    }
    .videobox {
        position: absolute;
        top: 6%; 
        left: 5%; 
        bottom: 6%;
        width: 80%;
        max-width: 305px;
        }
}

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

    body .bottom {
        background-color: #060606;
        background-image: url(../media/open/XXS.jpg);
        background-repeat: no-repeat;
    }
       .video-controls li {
        display:none !important;
    }
    
        .videobox {
        position: absolute;
        top: 28%; 
        left: 5%; 
        bottom: 0;
        width: 43%;
        max-width: 545px;
    }


}



@media only screen and (min-width: 1300px) {

    body .bottom {
        background-image: url(../media/open/XL.jpg);
    }

    .video-controls li {
        position: absolute;
        left: 56%;
    }
}

/* saf3+, chrome1+
@media screen and (-webkit-min-device-pixel-ratio:0) {
@media only screen and (max-width: 1024px) {
    .videobox {
        position: absolute;
        top: 20%; 
        left: 6%; 
        bottom: 0;
        width: 40%;
        max-width: 100%;
    }
   }

@media only screen and (min-width: 769px)  and (max-width: 1024px) {
    
    .videobox {
        position: absolute;
        top: 20%; 
        left: 18%; 
        bottom: 0;
        width: 50%;
        max-width: 64%;
}


}
 */