@charset "utf-8";
/* CSS Document */
/*CODIGO PARA LAS PAGINAS DE DIDACMUSIC VERSION EN Y DE*/
/* CARACTERISITICAS GLOBALES PARA TODA LA PAGINA*/
body {
	background-color: #a3a8ed;
	/*background-color: #ffffff;*/
	font-size: 20px;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

/*CONTAINER DE CABECERA que contiene el logo y el texto debajo (solo sobremesa)*/
/*La medida en vw garantiza la proporcionalidad responsive del texto. Se hace menor conforme la pantalla se hace menor*/
.contenedorTitulo{
    background-size:  cover;              
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
}
    
.columnaCentral{
    background: #d2d5f6;
	/*background: #ffffff;*/
    min-height: 1500px;
}
#textoTitulo {
    font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 1.5vw;
	font-weight: bold;
    color:darkblue;
}
.navbar{
    background-color: #a3a8ed;
}

/*DIV QUE CONTIENE LOS ANUNCIOS HORIZONTALES*/
#adsHoriz {
    clear: none;
    float: left;
    width: 98%;
    display: block;
    text-align: center;
    height: 115px;
    margin-top: 15px;
    margin-bottom: 15px;
}
/*DIV DEL CONTENIDO EDITABLE DE LA PAGINA*/
.contenido {
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
}
/*TITULO DE PAGINA----------------------------*/
.tituloPagMenu {
    font-size: calc(2rem + .5vw);
    border-bottom-style: solid;
    border-bottom-width: 2px;
    
}
.tituloPagMenu.rojo{
    border-bottom-color: red;
    color: red;
}
.tituloPagMenu.azul{
    border-bottom-color: darkblue;
    color: darkblue;
}
.tituloPagMenu.verde{
    border-bottom-color: darkgreen;
    color: darkgreen;
}
.tituloPagMenu.amarillo{
    border-bottom-color: darkorange;
    color: darkorange;
}
/*clase utilizada para centrar elementos, como la imagen de las cards, por ejemplo*/
.center{
    margin-left: auto;      
    margin-right: auto;
    display: block;  
}
/*SUBTITULO DE PAGINA----------------------------*/
.subtituloPagMenu {
    font-size: calc(1.5rem + .5vw);
    border-bottom-style: solid;
    border-bottom-width: 2px;
    
}
.subtituloPagMenu.rojo{
    border-bottom-color: red;
    color: red;
}
.subtituloPagMenu.azul{
    border-bottom-color: darkblue;
    color: darkblue;
}
.subtituloPagMenu.verde{
    border-bottom-color: darkgreen;
    color: darkgreen;
}
.subtituloPagMenu.amarillo{
    border-bottom-color: darkorange;
    color: darkorange;
}

/*CAJAS DE SOMBREADO DE LOS SUBTITULOS (MAS JUGADOS, ULTIMOS JUEGOS, ETC*/
.subtitulo{
    padding:2px;
    margin-top: 5px;
    /*min-height: 200px;*/
    height: 95%;
    width: 100%;
    border-radius: 10px;
    display: block;
    color: white;
   }
.subtitulo.fondoweb{
    background-color: #a3a8ed;
	font-size: calc(1.5rem + .5vw);
    color: white;
}
.subtitulo.rojo{
    background-color: red;
	font-size: calc(1.5rem + .5vw);
    color: white;
}
/*DIVS DE LAS CARDS-- No se les puede aplicar propiedades de columna si queremos que haya margenes entre ellas*/
.card{
    padding:2px;
    margin-top: 5px;
    /*min-height: 200px;*/
    height: 95%;
    width: 100%;
    border-radius: 10px;
    display: block;
    color: white;

   }
.card p{
    padding: 0.1rem;
    line-height: 1.2em;
    font-size: 0.7em;
}
.card p .rojo{
    color:firebrick;
}
/*Caracteristicas individuales de cada card*/
.card.roja{
    background-color: #f44336;
    }
.card.verde{
     background-color: #8bc34a;
    color: black;
}
.card.morada{
     background-color: #9c27b0;
}
.card.marron{
     background-color: #795548;
}
.card.amarillo{
     background-color: #fbc02d;
    color: black;
}
.card.azul{
     background-color: #03a9f4;
}
.card.naranja{
     background-color: #f57c00;
    color: black;
}
/*Efecto al pasar el raton por encima. Debe colocarse a continuacion de la declaracion de las clases anteriores*/
.card:hover{
    background-color: grey;
    /*transform: translateY(-15px);*//*No me acaba de gustar este efecto*/
    color:whitesmoke;
}
/*Codigo del embed container para las paginas que contienen juegos*/
.embed-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}
.embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*Codigo del embed container para las paginas que contienen juegos en formato portrait: FUNCIONA*/
.embed-container-portrait {
    position: relative;
    width: 100%;
    padding-bottom: 130%;
    height: 0;
    overflow: hidden;
}
.embed-container-portrait iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*Codigo alternativo en plan prueba del embed container (ahora llamado game) para las paginas que contienen juegos*/
.game {
    position: relative;
    padding-bottom: 56%;
    height: 0;
    overflow: hidden;
}
.game iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*PAGINAS DE GUIAS DE USO ETC*/
/*----------- CAJA ----------- */
.cajaTexto { 
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
color: darkblue; 
font-size: 18px; 
font-weight: 400; 
text-align: left; 
 
margin: 0 0 15px; 
overflow: hidden; 
padding: 15px; 
border-radius: 20px; 
border: 2px;
}
.cajaTexto h4{
    color: darkblue;
}
.cajaTexto.grey{
    background-color:whitesmoke;
    border-color:grey;
}
.cajaTexto.green{
    background-color:#a9f5a9;
    border-color: darkgreen;
}
.cajaTexto.orange{
    background-color:#f5d0a9;
    border-color: darkorange;
}
.cajaTexto.red{
    background-color:#f5a9a9;
    border-color: darkred;
}
/*DIV QUE CONTIENE LOS ANUNCIOS HORIZONTALES*/
#adsJuego {
    background-color: white;
    clear: none;
    float: left;
    width: 98%;
    display: block;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}
/*BANDERAS DEL MENU*/
.bouton-image:before {
    content: "";
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: text-top;
    background-color: transparent;
    background-position : center center;
    background-repeat:no-repeat;
}

.en:before{
     background-image : url("../imagen/general/la_mix_32.png");
}
.de:before{
     background-image : url("../imagen/general/la_de_32.png");
}
.es:before{
     background-image : url("../imagen/general/la_es_32.png");
}
.ca:before{
     background-image : url("../imagen/general/la_ca_32.png");
}
















.roja {
}