/* 
Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional.
Plantilla de alta eficiencia para menus digitales, creada por Valentín Christian Nava-Ramírez.

El nombre del autor de esta plantilla siempre debe permanecer al pie de la página web
*/


* {
box-sizing:border-box;
}
body, html {
height:100%;
color: black;
font-family: 'Nunito', sans-serif;
margin: 0;
min-height: 100%;
background-color:#fff;
}

.opciones {
height:100%;
padding: 30px;
background-size: 100%;
color: #fff;
text-shadow: 2px 2px 2px #360b29;
text-align: center;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(./imagen/fondo.jpg);
font-family: 'Roboto', sans-serif;

}


.opciones p {
font-size: 27px;
font-family: 'Fredoka One', cursive;
}


.menutitu {
height:14%;
font-family: 'Fredoka One', cursive;

}


.opciones2  {
height:40%;
color: #fff;
text-shadow: 2px 2px 2px #360b29;

}

.separador:after {
content: "";
display: table;
clear: both;
}


.menu {
float: left;
width: 50%;
padding: 10px;
text-align: center;

}

.datos {
float: left;
width: 50%;
height:100%;
padding: 10px;
text-align: center;
}

.datostex  {
float: left;
width: 50%;
height:100%;
padding: 70px;
text-align: center;

}


.imagenes {
float: left;
width: 50%;
padding: 10px;
text-align: center;
}


.secc {
background-color:#ffd967;
width:70%;
text-align: left;

padding:20px;
border-bottom-right-radius: 30px;
color:#000;
}

.solido {
background-color:#000;
padding:20px;
color:#fff;

}

.liquido {
padding:20px;

}

.solido p, .liquido p {
font-size: 20px;
margin:5px;
padding:7px;
}

.bloq {
padding: 42px;
background-size: 100%;
color: #fff;
text-align: center;
text-shadow: 2px 2px 2px #360b29;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(./imagen/fondo.jpg);

}

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


.datos {
width:100%;
}

.datostex  {
float: left;
width: 100%;
height:100%;
padding: 10px;
text-align: center;

}

}

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

.menu {
width:25%;

}


}



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

.menu {
width:50%;

}

.menu img {
width:80%;

}

.imagenes {
width:100%;

}

.datos {
width:100%;
}

.liquido img {
width:100%;

}

.solido img {
width:100%;

}

}

a, a:link, a:visited {
  color: #fff;
  text-decoration: none;
}