@charset "UTF-8";
/*--------------------Fuentes Personalizadas-------------------------*/
@font-face {
    font-family: 'Conv_BAUHS93';
    src: url('../fonts/BAUHS93.eot');
    src: local('☺'), url('../fonts/BAUHS93.woff') format('woff'), url('../fonts/BAUHS93.ttf') format('truetype'), url('../fonts/BAUHS93.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nexa Light';
    src: url('../fonts/Nexa Light.eot');src: local('☺'), url('../fonts/Nexa Light.ttf') format('truetype'), url('../fonts/Nexa Light.woff') format('woff'), 
    url('../fonts/Nexa Light.svg') format('svg');font-weight: normal;font-style: normal;
}
@font-face {
    font-family: 'Gomez Strikes Again';
    src: url('../fonts/Gomez-009.eot');
    src: local('☺'), url('../fonts/Gomez-009.woff') format('woff'), url('../fonts/Gomez-009.ttf') format('truetype'), 
    url('../fonts/Gomez-009.svg') format('svg');font-weight: normal;font-style: normal;
}
@font-face {
    font-family: 'Arial Rounded';
    src: url('../fonts/Arial Rounded MT Bold.eot');src: local('☺'), url('../fonts/Arial Rounded MT Bold.ttf') format('truetype'), url('../fonts/Arial Rounded MT Bold.woff') format('woff'), 
    url('../fonts/Arial Rounded MT Bold.svg') format('svg');font-weight: normal;font-style: normal;
}
#cellHorizontal{
	display: none;
}
body{
    background-image: url("../img/fondo_internas.gif");
    background-color: #77ac28;
    background-repeat: repeat-x;
    background-position: center;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0px;
    margin: 0px;
    font-size: 16px;
}
.nombreElementos{
    width: 150px;
    position: absolute;
    color: white;
    background-color: white;
    border: 2px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    padding: 5px 10px;
    z-index: 10;
    color: black;
}
.centrar{
    display: block;
    margin: 0 auto;
}
#contPrincipal{
	position: relative;
	width: 1024px;
	height: 768px;
	display: flex;
	justify-content: center;
}
.manejadorMenu{
    position: absolute;
    cursor: pointer;
    background-image: url("../img/casas.png");
    background-repeat: no-repeat;
}
a{
    font-family: "Nexa Light";
    text-decoration: none;
    color: white;
}
nav{
    position: absolute;
    width: 179px;
    height: 372px;
    background-color: black;
    overflow: hidden;
    left: 53px;
    top: 38px;
    -webkit-transition: 0.5s ease-in;
    -moz-transition: 0.5s ease-in;
    -ms-transition: 0.5s ease-in;
    -o-transition: 0.5s ease-in;
    transition: 0.5s ease-in;
    z-index: 10;
}
nav ul{
    margin: 0px;
    padding: 0px;
}
nav li{
    text-align: center;
    line-height: 37.7px;
    list-style: none;
    height: 37.7px;
}
nav li a{
    width: 100%;
    height: 100%;
    display: block;
}
nav li:hover{
    background-color: #D8007D;
}
.manejadorMenu{
    position: absolute;
    height: 52px;
    width: 53px;
    top: 38px;
    left: 0px;
    background-position: -1px -246px;
}
.cerrarMenu{
    background-position: -55px -246px;
}
.menuInvisble{
    height: 0px;
}
#tituloMenu{
    font-family: 'Arial Rounded';
    background-color: #FFC001;
    height: 33px;
}
#tituloMenu a{
    color: black;
}
#logo{
	position: absolute;
    right: 0px;
    top: 38px;
}
#casa_florero_comedor{
    background-position: -794px -175px;
    cursor: pointer;
    left: 228px;
    bottom: 81px;
    width: 43px;
    height: 47px;
}
.modal { 
    width: 0%; 
    height: 0%;
    position: fixed; 
    top: 0; 
    left: 0;
    background-color: rgba(0, 0, 0, 0.50);
    visibility:hidden;
    opacity: 0; 
    z-index: 1000;
    -webkit-transition: opacity .4s ease; 
    -moz-transition: opacity .4s ease;
    -ms-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.modal > div{
    width: 475px;
    margin: 0 auto;
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    padding: 3px;
    position: relative;
}
.modalOpened{ 
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
}
.internaModal{
    border: 2px dashed #1D1D1B;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
    height: 100%;
    width: 100%;
}
.cerrarModal, .descargar, .imprimir, .descargarDerechos, .imprimirDerechos{
    background-image: url("../img/cerrar_modal.png");
    background-repeat: no-repeat;
}
.cerrarModal{
    text-align: center;
    position: absolute;
    cursor: pointer;
    right: -12px;
    height: 30px;
    width: 31px;
    top: -14px;
    z-index: 50;
}
.contBloqueFinal{
    width: 100%;
}
.contOpciones{
    width: 250px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.descargar, .imprimir, .descargarDerechos, .imprimirDerechos{
    width: 111px;
    height: 27px;
}
.descargar, .descargarDerechos{
    width: 115px;
    height: 30px;
    background-position: -2px -31px;
}
.imprimir, .imprimirDerechos{
    width: 115px;
    height: 30px;
    background-position: -131px -31px;
}
#cerrarModalFucsia{
    background-position: -124px 0px;
}
#cerrarModalVerde{
    background-position: -93px 0px;
}
#cerrarModalAzul{
    background-position: -62px 0px;
}
#cerrarModalMorada{
    background-position: -31px 0px;
}
#cerrarModalRoja{
    background-position: 0px 0px;
}
.descripcionVideos{
    font-family: "Nexa Light";
}
.contFlex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.internaModalHistorieta {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    overflow: hidden;
}
#modalCreditos > div{
    width: 700px;
}
#modalCreditos .internaModal{
    font-family: "Nexa Light";
    font-size: 14px;
    padding: 0px;
}
#introduccionCreditos{
    width: 424px;
    text-align: center;
    margin: 0 auto;
    padding: 0px 20px 9px 20px;
    border-bottom: 2px solid #77AC28;
    margin-top: 15px;
}
#modalCreditos .contBloques{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
}
#modalCreditos .contBloques h2{
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: bold;
}
#modalCreditos h1{
    margin-bottom: 0px;
    font-family: "Gomez Strikes Again";
    color: #77AC28;
    text-align: center;
    width: 464px;
    border-top: 2px solid;
    margin: 0 auto;
    margin-top: 15px;
    padding-top: 15px;
}
#modalCreditos .contBloques p{
    padding: 0px;
    margin: 0px;
}
#modalCreditos .contCreditos{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 10px 0px; 
}
.creditosUno, .creditosDos, .creditosTres, .creditosCuatro, .creditosCinco, .creditosSeis, .creditosSiete, .creditosOcho, .creditosNueve{
    background-image: url("../img/creditos.png");
    background-position: 0px 0px;
    background-repeat: no-repeat;
    margin: 5px;
}
.creditosUno{
    width: 70px;
    height: 35px;
}
.creditosDos{
    width: 56px;
    height: 35px;
    background-position: -74px 0px;
}
.creditosTres{
    width: 61px;
    height: 44px;
    background-position: -137px 0px;
}
.creditosCuatro{
    width: 41px;
    height: 41px;
    background-position: -203px 0px;
}
.creditosCinco{
    width: 96px;
    height: 41px;
    background-position: -248px 0px;
}
.creditosSeis{
    width: 110px;
    height: 42px;
    background-position: -350px 0px;
}
.creditosSiete{
    width: 62px;
    height: 44px;
    background-position: -465px 0px;
}
.creditosOcho{
    width: 70px;
    height: 41px;
    background-position: -530px 0px;
}
.centrarTexto{
    text-align: center;
}
.bold{
    font-weight: bold;
}
@media (max-width: 1023px){
	body{
		width: 1024px;
	}
}
@media (max-width: 1023px) and (orientation:portrait){
	body{
		width: 100%;
	}
	#contPrincipal, .modal{
		display:none;
	}
    #cellHorizontal{
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    background-color: black;
	    color: white;
    }
}
.animacion{
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes jello {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-2px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(2px, 0, 0);
  }
}

@-webkit-keyframes jello {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-2px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
  }
}
@-moz-keyframes jello {
  from, to {
    -moz-transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -moz-transform: translate3d(-2px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -moz-transform: translate3d(2px, 0, 0);
  }
}
@-o-keyframes jello {
  from, to {
    -o-transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -o-transform: translate3d(-2px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -o-transform: translate3d(2px, 0, 0);
  }
}