html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.clearfix:before,
.clearfix:after{
  content: '';
  display: table;
}
.clearfix:after{
  clear: both;
}
body {
  font-family: 'Cairo', sans-serif;
}
a{
  text-decoration: none;
}
a:hover{
  font-weight: bold;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li{
  background-color: red;
}
nav ul li a{
  display: block;
  color: yellow;
}
footer{
  width: 100%;
  float: left;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  src: local('Cairo'), local('Cairo-Regular'), url(https://fonts.gstatic.com/s/cairo/v2/gtxIPk0-ZE5IZ2RrdsRLuQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

.contenedor  {
	position: absolute;
	/*nos posicionamos en el centro del navegador*/
	left:50%;
	/*determinamos una anchura*/
	width:1000px;
	/*indicamos que el margen izquierdo, es la mitad de la anchura*/
	margin-left:-500px;
	/*indicamos que el margen superior, es la mitad de la altura*/
	margin-top: 0px;
	margin-bottom: 0px;
	/*indicamos que el margen inferior, es la mitad de la altura*/
	padding: 0;
	border: 0;
  height: 83%;
}

.ventanilla {
	position: absolute;
	/*nos posicionamos en el centro del navegador*/
	left:50%;
	/*determinamos una anchura*/
	width:400px;
	/*indicamos que el margen izquierdo, es la mitad de la anchura*/
	margin-left:-200px;
	/*indicamos que el margen superior, es la mitad de la altura*/
	margin-top:10%;
	margin-bottom: 0px;
	/*indicamos que el margen inferior, es la mitad de la altura*/
	padding: 0;
  border-radius:15px;
  height:auto;
  background-color:#D8D8D8;
}

.encabezado {
  width: 100%;
  height: 75px;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.barra{
  width: 100%;
  height: 30px;
  left: 0px;
  margin: 5px 0px 5px 0px;
}

.menu-ham{
  width: 50px;
  height: 50px;
}

.boton-menu{
  float: left;
  width: 25%;
  height: 100%;
  text-align: center;
}

.boton-menu:hover{
  background-color: gray;
  font-weight: bold;
}

.contenido{
  width: 100%;
  height: 90%;
  background-color: inherit;
}

.cuadro{
  float: left;
  width: 20%;
  height: 200px;
  border-radius: 10px;
  margin: 15px;
  border: 1px solid red;
  background-color: white;
  text-align: center;
  padding: 3px;
}

.img-logo{
  width: 100%;
  height: 100%;
}

.imagen {
margin: 0px;
padding: 0px;
border: 0px;
height: 100px;
width: 150px;
border-radius: 5px;
}

.imagen:hover {
  -webkit-transform: scale(2.0);
  -moz-transform: scale(2.0);
  -ms-transform: scale(2.0);
  -o-transform: scale(2.0);
}

.detalle {
margin: 0px;
padding: 0px;
border: 0px;
height: 333px;
width: 500px;
border-radius: 5px;
}

.imagene {
 font-family: arial;
 font-size: 15px;
 color: #5858FA;
 width: 100%;
 height: 100%;
 text-decoration: none;
}

.imagene:hover {
text-decoration: none;
width: 100%;
height: 100%;
color: #5858FA;
font-weight: bold;
}

/*  SUBMENUS   */
nav{
   width:100%;
   margin: 5% auto;
}
nav li{
   list-style: none;
   position: relative; /* importante, para que el submenu tome la posición correcta*/
}
nav li a{
   text-decoration: none;
   padding: 5px;
   display: block;
}
nav li.parent:hover{
   margin:-1px;
}
nav li li a{
   width:200px;
   display:block;
   color: yellow;
   margin-bottom: 5px;
}
nav li li a:hover{
   width:250px;
   background-color: gray;
   color: yellow;
   display:block;
}
nav li ul {
   width: 250px;
   margin:0;
   display:none;
   position: absolute;
   left: 80%;
   top:-1px;
}
nav li:hover ul {
  display: block;
}

.boton-dist{
  width:300px;
  height: 35px;
  background-color: gray;
  color: yellow;
  border-radius: 10px;
  text-align: center;
}

.boton-dist:hover{
  background-color: red;
  color: yellow;
  font-weight: bold;
}

.benfa {
    box-shadow: 0 20px 26px 0 rgba(0,0,0,0.24), 0 27px 80px 0 rgba(0,0,0,0.19);
}

/***************************************/
/*********    Sección para movil *******/
/***************************************/
.contenedor-mob{
  width: 100%;
  height: auto;
  background-color: inherit;
  display: none;
  visibility: hidden;
}

.ventanilla-mob{
  position: absolute;
	width: 70%;
	/*indicamos que el margen superior, es la mitad de la altura*/
	top: 100px;
	/*indicamos que el margen inferior, es la mitad de la altura*/
  padding: 0;
  border-radius:15px;
  height: 350px;
  background-color:#D8D8D8;
}


@media screen and (max-width:860px){
  .contenedor{
    position: absolute;
    left: 0px;
  	width: 100%;
  	padding: 0;
  	border: 0;
    height: 80%;
    margin-left: 0px;
  }
  .cuadro{
    float: left;
    width: 30%;
    height: 200px;
    border-radius: 10px;
    margin: 10px;
    border: 1px solid red;
    background-color: white;
    text-align: center;
    padding: 3px;
  }
}

@media screen and (max-width:490px){
  .contenedor{
    display: none;
    visibility: hidden;
  }
  .contenedor-mob{
    display: block;
    visibility: visible;
    height: 450px;
  }
  .cuadro{
    float: left;
    width: 45%;
    height: 200px;
    border-radius: 10px;
    margin: 10px;
    border: 1px solid red;
    background-color: white;
    text-align: center;
    padding: 3px;
  }
  .ventanilla-mob{
    position: absolute;
  	width: 80%;
  	/*indicamos que el margen superior, es la mitad de la altura*/
  	top: 50px;
    left: 50px;
  	/*indicamos que el margen inferior, es la mitad de la altura*/
    border-radius:15px;
    height: 200px;
    background-color:#D8D8D8;
    z-index: 100;
  }
  a{
    font-size: 2vh;
  }
}
@media screen and (max-width:370px){
  .cuadro{
    float: left;
    width: 45%;
    height: 200px;
    border-radius: 10px;
    margin: 3px;
    border: 1px solid red;
    background-color: white;
    text-align: center;
    padding: 3px;
  }
  .imagen {
  height: 80px;
  width: 110px;
  }
  .detalle {
  height: 200px;
  width: 300px;
  border-radius: 5px;
  }
}