body {
  --colorBlanco: #fdfdfd;
  --verdeClaro: #10903C; 
  --verdeOscuro: #0D7331;
  --grisClaro: #f5f5f5;
  --grisOscuro: #F1F1F1;
  --rojoFuerte: #FF0000;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  padding: 0;
}

.cursor{
  cursor: pointer;
}
a:hover{
   color: var(--verdeOscuro);
   text-decoration: none;
 }

h1{
  color: var(--verdeClaro);
  font-size: 28px; 
  font-weight: bold;
  text-align: left;
}

h2{
  color: var(--verdeClaro);
  font-size: 22px; 
  font-weight: bold;
  text-align: left;;
}

.banner{
  min-height: 80px;
  text-align: center;
}

.bg-fondo{
  background-color: var(--verdeClaro); 
}

.titulo-banner{ 
  color: var(--colorBlanco); 
  font-size: 42px;
  font-weight: 580px;
  text-align: center;
  text-shadow: 0.1em 0.1em 0.1em black
}
 .margen-foto{
  margin-left: -15px;
 }

.frm-inicio-texto{
  color: var(--verdeClaro); 
  font-weight: 600px;
}

.texto-pie-pagina{
  color: var(--colorBlanco);
  font-weight: 500px;
  text-align: center;
  min-height: 60px;
  padding: 10px 0px 0px 0px;
}

.btn-pagina{
  background-color: var(--verdeClaro);
  border: var(--verdeClaro);
  font-weight: bold;
  width: 100%;
  height: 40px;
  border-radius: 12px;
  font-size: 18px;
}

.btn-pagina:hover{
  background-color: var(--verdeOscuro);
  border: var(--verdeOscuro);
  color: var(--colorBlanco);  
  font-weight: 700px;
}

.btn-pagina{
  -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
}

.fondo-gris{
    background-color: var(--grisClaro);
    padding: 10px 0px 0px 0px;
    color: var(--verdeClaro);
    font-weight: 700px;
    min-height: 50px;
    border-bottom: 1px solid #CECECE;
}

.btn-home{
 color: var(--verdeClaro);
 font-weight: 500px;
}

.btn-salir{
 color: #F53402;
 font-weight: 500px;
}

.btn-salir:hover{
 color: var(--verdeClaro);
}

.btn-salir{
  -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
}

.mostrar-contenido{
  min-height: 500px; 
  margin: 15px;
}

.icono-gris-menu{
  min-height: 150px;
  background: var(--grisClaro );
  margin-right: 5px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  border-radius: 10px;
}

.icono-verde-menu{
  min-height: 150px; 
  background: var(--verdeClaro ); 
  margin-right: 3px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  border-radius: 10px;
}

.icono-gris-menu, .icono-verde-menu{
  -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
}

/*formateamos las clases de los enlaces y botones*/
.btn-success{
  background-color: var(--verdeClaro);
  border: var(--verdeClaro);
  font-weight: bold;
}

.btn-success:hover{
  background-color: var(--verdeOscuro);
  border: var(--verdeClaro);
}

.btn-info{
  background-color: var(--verdeClaro);
  border: var(--verdeOscuro);
  color: var(--colorBlanco);
  font-weight: bold;
}

.btn-info:hover{   
  background-color: var(--verdeOscuro);
  border: var(--verdeClaro);
}

.btn-warning:hover{   
   color: var(--verdeClaro); 
}

.btn-warning{
  -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
}

.btn-danger:hover{   
   color: var(--verdeClaro); 
}

/*Transiscion para los botones*/
.btn-pagina, .btn-success, .btn-info, .btn-danger{
  -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
  }

.obligatorio{
  color: #900; 
  font-weight: bold; 
  font-size: 18px;
}

/*Para mostra el fondo oscuro */
.fondoOscuro{
    position: fixed;
    top: 0px; 
    left: 0px;
    width: 100%; 
    height: 1445px; 
    opacity: 0.3; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50);  
    z-index:20;
    background-color: rgb(0, 0, 0);
    display:none;
}

/*Formatos para mostar las sillas*/

.sillas-dis{  
   margin: 0px 2px 6px 0px;
   min-height: 38px;
   min-width: 38px;
   float: left;
}

.enlace-sillas-dis{
   color: var(--verdeOscuro);
   font-weight: bold;
   background-color: #CED4DA; 
   padding: 30px 0px 0px 5px;  
   min-height: 48px;
   min-width: 53px;
   float: left;
}

.sillas-dis-pre-seleccionada{  
   color: var(--colorBlanco);
   font-weight: bold;
   background-color: #EAAF00;
   padding: 30px 0px 0px 5px;  
   min-height: 48px;
   min-width: 53px;
   float: left;
}

.sillas-dis-seleccionada{  
   color: var(--colorBlanco);
   font-weight: bold;
   background-color: var(--rojoFuerte);
   padding: 30px 0px 0px 5px;  
   min-height: 48px;
   min-width: 53px;
   float: left;
}

.sillas-left{      
   margin: 0px 2px 6px 0px;
   min-height: 38px;
   min-width: 38px;
   float: left;   
}

.enlace-sillas-left{      
   color: var(--verdeOscuro);
   font-weight: bold;
   padding: 30px 0px 0px 0px;
   background-color: #CED4DA; 
   margin: 0px 1px 6px 0px;
   min-height: 48px;
   min-width: 32px;
   float: left;
   font-size: 11px;
}

.sillas-left-pre-seleccionada{      
   color: var(--colorBlanco);
   font-weight: bold;
   padding: 30px 0px 0px 0px;
   background-color: #EAAF00;
   margin: 0px 1px 6px 0px;
   min-height: 48px;
   min-width: 32px;
   float: left;
   font-size: 11px;
}

.sillas-left-seleccionada{      
   color: var(--colorBlanco);
   font-weight: bold;
   padding: 30px 0px 0px 0px;
   background-color: var(--rojoFuerte);
   margin: 0px 1px 6px 0px;
   min-height: 48px;
   min-width: 32px;
   float: left;
   font-size: 11px;
}

.sillas-centro{
   min-height: 38px;
   min-width: 36px;
   float: left;
}

.enlace-sillas-centro{
   color: var(--verdeOscuro);
   font-weight: bold;
   padding: 30px 0px 0px 0px;
   background-color: #CED4DA; 
   margin: 0px 2px 6px 2px;
   min-height: 48px;
   min-width: 36px;
   float: left;
   font-size: 11px;
}


.sillas-centro-pre-seleccionada{      
   color: var(--colorBlanco);
   font-weight: bold;
   padding: 30px 0px 0px 0px;
   background-color: #EAAF00;
   margin: 0px 2px 6px 2px;
   min-height: 48px;
   min-width: 36px;
   float: left;
   font-size: 11px;
}

.sillas-centro-seleccionada{      
   color: var(--colorBlanco);
   font-weight: bold;
   padding: 30px 0px 0px 0px;
   background-color: var(--rojoFuerte);
   margin: 0px 2px 6px 2px;
   min-height: 48px;
   min-width: 36px;
   float: left;
   font-size: 11px;
}

.sillas-rigth{
   margin: 0px 2px 6px 0px;
   min-height: 38px;
   min-width: 36px;
   float: left;
}

.enlace-sillas-rigth{
   color: var(--verdeOscuro);
   font-weight: bold;
   padding: 30px 0px 0px 0px;
   background-color: #CED4DA; 
   margin: 0px 2px 6px 0px;
   min-height: 48px;
   min-width: 35px;
   float: left;
   font-size: 11px;
}

.sillas-rigth-pre-seleccionada{      
   color: var(--colorBlanco);
   font-weight: bold;
   padding: 30px 0px 0px 0px;
   background-color: #EAAF00; 
   margin: 0px 2px 6px 0px;
   min-height: 48px;
   min-width: 35px;
   float: left;
   font-size: 11px;
}

.sillas-rigth-seleccionada{      
   color: var(--colorBlanco);
   font-weight: bold;
   padding: 30px 0px 0px 0px;
   background-color: var(--rojoFuerte);
   margin: 0px 2px 6px 0px;
   min-height: 48px;
   min-width: 35px;
   float: left;
   font-size: 11px;
}

.enlace-sillas-imagen{
  background-image: url(../images/silla_centro.png);
  height: 26px;
  width: 26px;
  background-repeat: no-repeat;
}

.enlace-sillas-dis:hover,.enlace-sillas-left:hover,.enlace-sillas-centro:hover,.enlace-sillas-rigth:hover{
  color: #F1F1F1; 
  background-color:  var(--verdeClaro); 
  transition: all .5s ease-in-out;
}

.enlace-sillas-dis, .enlace-sillas-left, .enlace-sillas-centro, .enlace-sillas-rigth{
  -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
  }

/*Ventana modal*/
.btn-cerrar{
  background: var(--verdeClaro) !important;
  opacity: 1;
  color: #fff;
  height: 36px;
  width: 36px;
  margin-right: -42px !important;
  z-index: 2500;
}

.btn-cerrar:hover{
  color: var(--verdeOscuro) !important; 
}

.btn-cerrar{
  -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
}

@media only screen and (max-width: 425px){  
    .banner{
      min-height: 30px;
    }

    .titulo-banner{ 
      font-size: 14px;
    }

    .texto-pie-pagina{
      font-size: 12px;
      margin-top: 5px;
      min-height: 40px;
    }

     .margen-movil{
    margin-top: 5px;
  }

  }

@media only screen and (max-width: 575px){ 
   .titulo-banner{ 
    font-size: 18px;
  }

  .texto-pie-pagina{
    font-size: 12px;
    margin-top: 5px;
    min-height: 40px;
  }
  .margen-movil{
    margin-top: 5px;
  }

 }

 @media only screen and (max-width: 768px) {
    .titulo-banner{ 
      font-size: 22px;
    }

    .texto-pie-pagina{
      font-size: 12px;
      margin-top: 5px;
      min-height: 40px;
    }

     .margen-movil{
    margin-top: 5px;
  }
  }

@media only screen and (max-width: 992px) {
   .titulo-banner{ 
      font-size: 26px;
    }

    .texto-pie-pagina{
      font-size: 14px;
      margin-top: 5px;
      min-height: 40px;
    }
}