/* .coloresPleta{
color: #04080f;
color: #507dbc;
color: #a1c6ea;
color: #bbd1ea;
color: #dea3e5;
color: #fff;
} */
/* <!-- V-13----NetWeb--2019--> */

/* - 1 - Reset */

*{
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

/* - 2 -  ETIQUETAS HTML  */

body{
  font-family: Arial, Helvetica, sans-serif;
  /* background-color: #000; */
}

header{
  width: auto;
  height: auto;
}


footer{
  width: auto;
  height: auto;
}

/* - 3 -  Selectores ID  */

#principal{
  width: auto;  
  height: auto;
}

#cajaAsideInfo{
  width: auto;  
  height: auto;
}

#cajaAsiteFotos{
  width: auto;  
  height: auto;
}

#cajaFooter{
  width: auto;
  height: auto;
}

/* - 4 -  CLASS generales para todas las versiones  */

.contenedorPagina{
  width: 100%;
  /* background-color: gray; */
}
/* fondo de la carta */
 .contenedorCarta{
   width: auto;
 /* background-color: #cbd8e6; */
} 

/* cabecera para version telefono */

 .cajaLogoTelf{ 
  background-color: #bbd1ea;
  border-bottom: 5px solid #83b582;
  border-radius: 10px;
} 

/* cabecera para version tablet y ordenador */

.cajaLogoOrdenador{
  width: auto;
  background-color:#cbd8e6;
  border-bottom: 5px solid #83b582;
  border-radius: 25px;
}

/* icono flecha arriba inicio cabecera */

.arriba{
  position: fixed;
  right: 5px;
  top: 600px;
}

.arriba:hover{
  cursor: pointer;
}

/* CAJA  GOOGLE MAPS + FOTO + TEXTO VERSION TELF Y TABLET */
.cajaMapa{
  width: auto;
  height: auto;
}

/* caja que contiene el mapa de google maps */
.tamañoMapa{
  width: auto;
  height: auto;
}

/* caja para el texto con la direccion del local */
.cajaMapaTexto{
  width: auto;
  height: auto;
}

/* PIE de la página que contiene la caja de los iconos de redes y horario para - VERSION TELF Y TABLET */
.cajaIconoRedes{
  width: auto;
  height: auto;
  float: left;
}

.facebook{
  margin: 0px 10px;
}

.facebook:hover{
  cursor: pointer;
}

.istagram{
  margin: 0px 10px;
}

.istagram:hover{
  cursor: pointer;
}

.whatsapp{
  margin: 0px 10px; 
}

.whatsapp:hover{
  cursor: pointer;
}

/* Definir class de tamaño de las fotos */

/* Tamaño Grande fotos ID (PRINCIPAL) */

.size{
  flex-flow: column;
  width: 100%;
  margin-bottom: -10px;
  margin-top: 10px;
  border-top-right-radius: 10%;
}
  
  /* Tamaño fotos PEQUEÑA */ 

.size1{
  width: 50%;
  padding-top: 5px;
  border-radius: 10px;
}

/* PANEL efecto desplegable ACORDEON --Section PRINCIPAL-- SOLO para TELF -y- TABLET */

  /* Estilo de los botones usados para abrir / cerrar el panel de acordeon */
.acordeon{
  background-color:  #bbd1ea;
  color: black;
  border-bottom: 5px solid black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  height: auto ;
  margin-top: 10px;
  margin-bottom: 10px;
  border-bottom-right-radius: 15px;
  text-align: center;
  font-size: 2rem;
  outline: none; 
  transition: 0.4s;
}

  /* Añade color de fondo al botón si se ha clickado e él 
   (añade la clase .activo con JAVASCRIPT), y cuando se 
   mueve el cursor sobre el (hover)
  */

.activado,
.acordeon:hover {
  /* background-color:  #bbd1ea; */
  background-color:#dea3e5;
}

/* icono flecha abajo boton desplegable acordeon  */
.flecha{
  width: 32px;
  margin-right: 10px;
}

/* Class del panel acordeon Oculto (hidden) por defecto */
.panel{
  background-color: white;
  display: none;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  border-bottom: 5px solid black;
  /* border-right: 2px solid red; */
  border-bottom-right-radius : 10%;
}

/* clase texto de las secciones de la carta */
.seccionCarta{
  font-size: 2rem;
  text-align: center;
}

/* clase texto de la descripcion de los platos de la carta */
.textoCarta{
  font-size: 1.2rem;
  text-align: center;
  color: blue;
}
/* ----- FIN del panel ACORDEON------ */

/* estilos texto direccion del establecimiento */
.textoDireccion{
  
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-size: 1.3rem;
  color: black;
}

/* EFECTOS  VISUALES MEDIA Q disolver */
.disolver{
  animation-name: disolver;
  animation-duration: 10s;
}

.disolver1{
  animation-name: disolver;
  animation-duration: 2.5s;  
}

/* MEDIA Q Keyframes */

@keyframes disolver{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes disolver1{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}
/* Fin  MEDIA Q disolver */

/* FIN CSS PRINCIPAL */

/* Inicio CSS personalizado para cada tipo de pantalla */

/* -- 1  -------------------   Version TELEFONO  ----------------*/

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

/* 
  body{    
    align-content: center;
    background-color: #77ace4;
   
  } */


  #logoOrdenador{
    display: none;
  }

  /* enlace icono flecha arriba inicio cabecera */
  .arriba{
    position: fixed;
    right: 5px;
    top: 80%;
  }

  .arriba:hover{
    cursor: pointer;
      /* background-color: #e6dde700; */
    border-radius: 25%;
  }

  
  /* Seccion PRINCIPAL */
  #principal{
    display: inline-block;
    width: 100%;
    margin-left: auto; 
    margin-right: auto; 
    align-content: center;
    font-size: 2rem;
  }

 
  .cajaMapa{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    display: inline-block;
    border: 2px solid black;
    border-radius: 15px;
  
  }

  .tamañoMapa{
    width: auto;
    height: auto;
    padding: 5px;
    margin-left: 15%;
   
  }

  .tamañoFotoMapa{
    display: none;
  }

  .cajaMapaTexto{
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size-adjust: initial; 
    padding-bottom: 5px;
  }

  #cajaFooter{
    width: 100%;
    height: auto;
    display: flex;
    background-color: #bbd1ea;
    padding-top: 15px;
    padding-bottom: 5px;
    border-radius: 15px;
  }

  .cajaIconoRedes{ 
    top: 10px;
    margin-left: 5%;
  }

  .cajaHorario{
    width: auto;
    height: auto;
    color: red;
    margin-left: 20%;
    margin-right: 10px;
  }

}

/* ---------   VERSION  TABLET   ------  */ 

@media screen and (min-width: 600px) and (max-width: 1024px){

  /* body{    
    align-content: center;
    background-color: #77ace4;
   
  } */

 
  #logoOrdenador{
    display: none;
  }
  

  .contenedorPagina{
    padding-right: 30%;
    padding-left: 30%;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #0b6ddd;  
  }

  .contenedorCarta{
    background-color: #cbd8e6;
    min-width: 400px;
    max-width: 600px;
  }

   .cajaScroll{
    border-left: 10px solid black;
    border-top: 50px solid black;
    border-right: 10px solid black;
    border-bottom: 40px solid black;
    border-radius: 15px;
    padding-top: 5px solid white;
    width: auto;
    max-height: 700px;
    overflow-y: scroll;
   }

  .arriba{
    position: fixed;
    /* right: 10px; */
    left: 20%;
    top: 80%;
  }

 .arriba:hover{
    cursor: pointer;
      /* background-color: #e6dde700; */
    border-radius: 25%;
  }

  .tamañoMapa{
    border: 2px solid red;
  }

  .tamañoFotoMapa{
    width: 100%;
  }

  .cajaMapaTexto{
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size-adjust: initial; 
    padding-bottom: 5px;
  }
  
  #cajaFooter{
    width: 100%;
    height: auto;
    display: flex;
    background-color: #bbd1ea;
    padding-top: 15px;
    padding-bottom: 5px;
    border-radius: 15px;
  }

  .cajaIconoRedes{ 
    top: 10px;
    margin-left: 5%;
  }

  .cajaHorario{
    width: auto;
    height: auto;
    color: red;
    margin-left: 20%;
    margin-right: 10px;
  }
}

@media screen and (min-width: 1025px) {

  .contenedorPagina{
    padding-right: 30%;
    padding-left: 30%;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #0b6ddd;
  }
   
  .contenedorCarta{
    background-color: #cbd8e6;
    min-width: 400px;
    max-width: 800px;
       }

  .cajaScroll{
    border-left: 10px solid black;
    border-top: 50px solid black;
    border-right: 10px solid black;
    border-bottom: 40px solid black;
    border-radius: 15px;
    padding-top: 5px solid white;
    width: auto;
    max-height: 700px;
    overflow-y: scroll;
   }

  /* .contenedorCarta{
    display: flex;
    justify-content: center;
    width: 500px;
  } */

  #logoTelf{
    display: none;
  }

  .tamañoFotoMapa{
    width: 90%;
  }
  .arriba{
    position: fixed;
    left: 20%;
    top: 80%;
  }

  .arriba:hover{
    cursor: pointer;
      /* background-color: #e6dde700; */
    border-radius: 25%;
  }
  .cajaMapaTexto{
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size-adjust: initial; 
    padding-bottom: 5px;
  }
  
  #cajaFooter{
    width: 100%;
    height: auto;
    display: flex;
    background-color: #bbd1ea;
    padding-top: 15px;
    padding-bottom: 5px;
    border-radius: 15px;
  }

  .cajaIconoRedes{ 
    top: 10px;
    margin-left: 5%;
  }

  .cajaHorario{
    width: auto;
    height: auto;
    color: red;
    margin-left: 20%;
    margin-right: 10px;
  }
}