@charset "utf-8";

#popup { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0 0 0 / 90%); z-index: 10000;}
#popup .fundo { position: fixed; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer;}
#popup .centro { margin: 0 auto; position: relative; z-index: 5;}

#popup .imagem { float: left; width: 100%;}
#popup .imagem .conteudo { float: left; width: 100%;}
#popup .imagem .conteudo .x { position: absolute; width: 40px; top: 20px; right: 20px; padding: 20px 0; background-color: rgb(170 0 0); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.2em; color: rgb(255 255 255); line-height: 0; z-index: 5; cursor: pointer;}
#popup .imagem .conteudo .x:hover { background-color: rgb(150 0 0);}
#popup .imagem .centro { float: left; width: 100%;}
#popup .imagem .img { float: left; width: 100%; text-align: center; font-size: 0;}
#popup .imagem .img a { position: relative; z-index: 1;}
#popup .imagem .img img { padding: 10px; max-width: 85%; background-color: rgb(255 255 255); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

#popup .youtube { float: left; width: 100%;}
#popup .youtube .conteudo { float: left; width: 94%; padding: 3%; margin-top: 50px; background-color: rgb(255 255 255); position: relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#popup .youtube .conteudo .x { position: absolute; width: 40px; top: -20px; right: -20px; padding: 20px 0; background-color: rgb(170 0 0); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.2em; color: rgb(255 255 255); line-height: 0; z-index: 5; cursor: pointer;}
#popup .youtube .conteudo .x:hover { background-color: rgb(150 0 0);}
#popup .youtube .centro { width: 700px; max-width: 90%;}
#popup .youtube .iframe { position: relative; width: 100%; padding-bottom: 56%; overflow: hidden;}
#popup .youtube .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

@media only screen and (max-width: 400px){
  #popup .conteudo .x { top: -12px; right: -12px;}
}