﻿@media only screen and (max-width: 320px) {
	#stage #interface .superior{ width: 100% !important; }
	#stage #interface .lateral{ width: 100%; }
}


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

	#stage #interface #ajuda, #stage #interface #informacoes, #stage #interface #acessibilidade {
	    position: fixed;
	    width: 100%;
	    top: 44px;
	    left: 0;
	}

	#areaVideo .fechar {
		top: -6px;
		right: -6px;
		transform: scale(.8);
	}

	#stage #btnOpcoes{
		background: #2a2a2a url(img/sprite.png) no-repeat;
	    position: relative;
	    top: -6px;
	    left: -6px;
	    height: 55px;
	    width: 55px;
	    text-indent: -5000px;
	    z-index: 103;
	    border: 0;
	    display: none;
	    transform: scale(.8);
	}

	#stage #interface .superior, #stage #interface .lateral .btn, #stage #interface .lateral .btn button{
	    height: 44px;
	}
	#stage #interface .lateral {
	    top: 44px;
	}
	#stage #interface .lateral .btn .icon {
	    top: -5px;
	}
	#stage #interface .lateral .btn button > b {
	    line-height: 0;
	}
	#stage #interface .superior .titulo {
		height: 48px;
	}

	#stage[data-autocontraste=true] #interface .superior {
	    height: 43px;
	}
	#interface *:focus, .mejs-container *:focus, #btnOpcoes:focus, .tocar:focus{
		box-shadow: none;
	}
	#areaVideo #moldura{ display: block; }
}

@media only screen and (max-width: 846px) {
	.mejs-container, .mejs-captions-layer{
		width: 100% !important;
		height: 100% !important;
	}
	#areaVideo #contVideo, #stage #areaVideo .video {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    margin: 0;
	}
	#areaVideo .volumeController, #posterVideo{
		width: 846px;
		height: 476px;
		left: 50% !important;
		top: 50% !important;
		margin: -238px 0 0 -423px;
	}

}

@media only screen and (max-width: 572px) {
	.mejs-captions-position[data-size="s1"], .mejs-captions-position[data-size="s2"], .mejs-captions-position[data-size="s3"] {
	    width: 430px !important;
	    margin-left: -235px !important;
	}

	.mejs-captions-position[data-size="s1"] .mejs-captions-text{font-size: 21px !important;}
	.mejs-captions-position[data-size="s2"] .mejs-captions-text{font-size: 22px !important;}
	.mejs-captions-position[data-size="s3"] .mejs-captions-text{font-size: 23px !important;}

	.mejs-captions-position-hover {
	    bottom: 51px !important;
	}
}

@media only screen and (max-width: 475px) {
	.mejs-controls div.mejs-time-rail{
		position: absolute;
		top: -21px;
		height: 21px !important;
		background: #2a2a2a;
		width: 100% !important;
		padding-top: 0px !important;
	}
	.mejs-controls .mejs-time-rail .mejs-time-total{
		width: 97.2% !important;
	}

	.mejs-captions-position[data-size="s1"], .mejs-captions-position[data-size="s2"], .mejs-captions-position[data-size="s3"] {
	    width: 360px !important;
	    margin-left: -196px !important;
	}

	.mejs-captions-position[data-size="s1"] .mejs-captions-text{font-size: 19px !important;}
	.mejs-captions-position[data-size="s2"] .mejs-captions-text{font-size: 20px !important;}
	.mejs-captions-position[data-size="s3"] .mejs-captions-text{font-size: 21px !important;}

	.mejs-captions-position-hover {
	    bottom: 71px !important;
	}

}


@media only screen and (max-width: 405px){
	.mejs-captions-position[data-size="s1"], .mejs-captions-position[data-size="s2"], .mejs-captions-position[data-size="s3"] {
	    width: 273px !important;
		margin-left: -154px !important;
	}
	.mejs-captions-position[data-size="s1"] .mejs-captions-text, .mejs-captions-position[data-size="s2"] .mejs-captions-text, .mejs-captions-position[data-size="s3"] .mejs-captions-text{
		font-size: 16px !important;
		line-height: 21px !important;
	}
}


@media only screen and (max-height: 425px) {
	#stage #interface .boxTexto .viewport, #stage #interface #acessibilidade .viewport{ height: 62%; }

	#stage #interface .lateral .btn {  height: 53px; }

	#stage .credito.grande { top: 197px; }

	#stage #btnOpcoes{
		background: #2a2a2a url(img/sprite.png) no-repeat;
	    position: relative;
	    top: -6px;
	    left: -6px;
	    height: 55px;
	    width: 55px;
	    text-indent: -5000px;
	    z-index: 103;
	    border: 0;
	    display: none;
	    transform: scale(.8);
	}

	#stage #interface .superior, #stage #interface .lateral .btn, #stage #interface .lateral .btn button{
	    height: 44px;
	}
	#stage #interface .lateral {
	    top: 44px;
	}
	#stage #interface .lateral .btn .icon {
	    top: -5px;
	}
	#stage #interface .lateral .btn button > b {
	    line-height: 0;
	}
	#stage #interface .superior .titulo {
		font-size: 13px;
		margin-top: 8px;
	}
	#stage[data-autocontraste=true] #interface .superior {
	    height: 43px;
	}
}

@media only screen and (max-width: 500px) {
	#stage #abertura::before{
		width: 197px;
		height: 197px;
	}
	#stage #abertura::after{
		width: 221px;
		height: 132px;
	}
	#stage #mc_titulo_intro{
		font-size: 26px;
	}
	#stage #mc_logo_intro{
    transform: scale(.8);
    left: 6px;
    bottom: 12px;
	}
}



@media (min-width: 421px) and (max-width: 659px) {
	#stage #galeria .content{ transform: scale(1);}
}
@media (max-width: 659px) {
	#stage #galeria .content { transform: scale(1); }
}
@media (min-width: 660px) and (max-width: 720px) {
	#stage #galeria .content {  transform: scale(0.78); }
}
@media (min-width: 721px) and (max-width: 765px) {
	#stage #galeria .content {  transform: scale(0.84); }
}
@media (min-width: 766px) and (max-width: 845px) {
	#stage #galeria .content { transform: scale(0.92); }
}
@media (min-width: 846px) {
	#stage #galeria .content { transform: scale(1); }
}
@media (min-width: 660px) and (max-width: 5000px) {
	#stage #galeria .content{
		width: 846px;
		height: 476px;
		right: auto;
		bottom: auto;
		left: 50%;
		top: 50%;
		margin: -238px 0 0 -423px;
	}
}