html, body {
    min-height: 100%;
}
* {
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}
a {
    color: white;
    outline: 0;
}
a img {
    border: 0;
}


html body .bottom {
	background-size: cover;
	background-position: bottom right;
}    

 body > :empty {
	display:none;
	}
.for_xxs, 
.for_xs,
.for_s,
.for_m,
.for_l,
.for_xl {
    display: none;
}

/** IE exception **/
.ie6 .for_l, 
.ie7 .for_l, 
.ie8 .for_l {
    display: block;
}

@media only screen and (max-width: 480px) {
    body .videobox {
      	left: 1%!important;
    	
    	bottom: 6%!important;
    	top: 30%!important; /* evita cortar o é outra vida */
    	width: 68% !important;
    }
    
    .video-controls li {
        display:none !important;
    }
 }

@media only screen and (max-width: 629px) {
    html body {
        /**
        background: blue;
        **/
    }
   /* .for_s { display: block; }*/

    body .videobox {
      	left: 16%;
    	right: 16%;
    	top: 31%; /* evita cortar o é outra vida */
    	width: 68%;
    }
    body .bottom {
        background-image: url(../media/open/XS.jpg);
    }
    
    .for_xxs, .for_xs, .for_s ,.for_m ,.for_l ,.for_xl {display: none;}

} 

/*gmalta*/
/*@media only screen and (min-width: 630px)  { 
	.for_xs ,.for_xxs {display: none;}
}*/


/* Landscape */





@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
 p.overlay-knowmore {display: none!important;visibility: hidden;}
}

/*gmalta*/
@media only screen and (max-width: 602px) {
    
    .for_xxs { display: block;margin-left: -23px!important;position: absolute; }
    .for_xl, .for_l, .for_m, .for_s ,.for_xs {display: none;}
    
}


@media only screen and (min-width: 603px) and (max-width: 959px) {
    
    .for_xs { display: block; }
    .for_xl, .for_l, .for_m, .for_s ,.for_xxs {display: none;}
    
}
@media only screen and (min-width: 960px) and (max-width: 1129px) {
    
    .for_s { display: block; }
    .for_xl, .for_l, .for_m, .for_xs ,.for_xxs {display: none;}
    
}
@media only screen and (min-width: 1130px) and (max-width: 1299px) {
    html body {
        /**
        background: yellow;
        **/
    }
    .for_m { display: block; }
    .for_xxs, .for_xs, .for_xl, .for_l, .for_s, .for_xs ,.for_xxs {display: none;}
    
}
@media only screen and (min-width: 1300px) and (max-width: 1579px) {
    html body {
        /**
        background: green;
        **/
    }
    .for_l { display: block; }
    
}
@media only screen and (min-width: 1580px) {
    html body {
        /**
        background: green;
        **/
    }
    .for_xl { display: block; }

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

.takeover-closed {
    display: none;
}
.takeover-open {
    display: block;
}

/* Closed */
@media only screen and (max-height: 100px) {
    body .top {
        height: 100%;
    }
    .top + a {
        display: none;
    }

    .takeover-open {
        display: none;
    }
    .takeover-closed {
        display: block;
    }
    #mute-toggle {
        display: none;
    }
}

.top {
    display: none;
}
.to-closed .top,
.to-closed .takeover-closed {
    display:block;
}
body.to-closed .top {
    height: 100%;
}
.to-closed .top + a,
.to-closed .takeover-open,
body#takeover.to-closed #mute-toggle {
    display:none;
}
.to-open #mute-toggle,
.to-open .takeover-open {
    display:block;
}
.to-closed * {
    cursor: pointer;
    cursor: hand;
}

body {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: 100%;
}



.video-controls,
.recheio {
    width: 100%;
    max-width: 2500px;
    margin: 0 auto;
}


.top {
    height: 20%;
    padding-left: 3em;
}
    .top p, .top .recheio, .top a, .top img  {
        height: 100%;
    }
    .top .recheio {
        position: relative;
    }
    .top img {
        position: relative;
        left: 0;
        top: 0;
        height: 100%;
        width: auto;
    }
    
.bottom {
    height: 80%;
    position: relative;
}

.videobox {
        position: absolute;
        top: 20%; 
        left: 18%; 
        bottom: 16%!important;
        width: 35%;
        max-width: 40%;
}

    .video16-9{
    }
    .videobox embed,
    .videobox object,
    .videobox video,
    .videobox iframe {
       width: 100%;
       height: 100%;
       border: 0;
    }


    /* Theme */
    
    .top * {
        max-height:100%;
    }
    .top {
        background: #0B1016 url(../media/close/bg.jpg);
        -webkit-background-size: auto 100%;
           -moz-background-size: auto 100%;
            -ms-background-size: auto 100%;
             -o-background-size: auto 100%;
                background-size: auto 100%;
    }
    .top .recheio a {
        display: block;
    }
    .bottom {
        background: #222 url(../media/open/L.jpg) center center;
        /**
        background-image:url(https://dl.dropbox.com/u/636550/to_guia.png) !important;
        */
        -webkit-background-size: cover;
           -moz-background-size: cover;
            -ms-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
    }

    .resizing {
        visibility: hidden;
    }

.video-controls { /* gmalta */
    top: 85%;
    position:absolute;
}
  .video-controls li {
        position: absolute;
        right: 2%;
       /* margin-bottom:4%;*/
    }

    #mute-toggle {
        width: 3em;
        left: 36%;
        bottom: 0%;
        height: 3em;

        width: 30px;
        height: 30px;

        cursor: pointer;
        cursor: hand;

        position: absolute;
        background: rgb(150,150,150);
        background: rgba(0,0,0,0.8);
        text-indent: -9999em;
        direction: ltr;
        background: url(../media/playerskin/mute_to.svg) no-repeat top left;

        -webkit-background-size: 100% auto;
           -moz-background-size: 100% auto;
            -ms-background-size: 100% auto;
             -o-background-size: 100% auto;
                background-size: 100% auto;

        text-transform: uppercase;
        color: white;
        font-weight: bold;
        letter-spacing: 0.2em;
        text-shadow: rgba(0,0,0,0.6);

        -webkit-border-radius: 0.4em 0.4em 0 0;
           -moz-border-radius: 0.4em 0.4em 0 0;
            -ms-border-radius: 0.4em 0.4em 0 0;
             -o-border-radius: 0.4em 0.4em 0 0;
                border-radius: 0.4em 0.4em 0 0;

        opacity: 0.8;
    }
    body #mute-toggle:hover {
        opacity: 1;
    }
    #mute-toggle:active {
        
    }
    .muted #mute-toggle {
        background-position: bottom left;
    }
    .mute-on,
    .muted .mute-off {
        display: none;
    }
    .muted .mute-on {
        display: block;
    }



    body .video-no-fundo {
        background-image: none;
    }
    body .video-no-fundo .videobox {
        width: 100%;
        height: 0;
        padding-bottom: 24%;
        left: 0;
        bottom: 0;
        max-width: none;
        top: 0;

    }
    .overlay-knowmore, 
    #to-video {
        position: absolute;
        top: 0; 
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
    .videobox {
        overflow: hidden;
    }

    .overlay-knowmore {
        position: absolute;
        top: 15%; 
        left: auto;
        right: -9em;
        width:  7em !important;
        height: auto !important;
        padding: 0.5em 1em;

        background: rgb(255,255,255);
        background: rgba(255,255,255,0.8);
        z-index: 10;

        text-align:center;
        color: black;
        text-shadow: 1px 0px 0px white;
        font-size: 1.5em;
        font-weight: bold;
        font-family: sans-serif;
        text-transform: lowercase;
        letter-spacing: -1px;

        -webkit-border-radius: 0.4em 0 0 0.4em;
           -moz-border-radius: 0.4em 0 0 0.4em;
            -ms-border-radius: 0.4em 0 0 0.4em;
             -o-border-radius: 0.4em 0 0 0.4em;
                border-radius: 0.4em 0 0 0.4em;

        -webkit-transition: right 0.4s;
    }
    .overlay-knowmore:after {
        
    }
    .videobox:hover .overlay-knowmore:hover {
        cursor:pointer;
        cursor:hand;
        text-decoration: underline;
    }
    .videobox:hover .overlay-knowmore {
        right:0;
    }

/*no overlay ipad */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){      
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
 p.overlay-knowmore {display: none!important;visibility: hidden;}

}