body {
    color: #444;
    font-family: 'Lato', sans-serif;   
    overflow-x: hidden;   
}
html {
    scroll-behavior: smooth;
}
p{
    font-size:1.3rem;   
}
.negrita{
  font-weight: bolder;
}
.card{
  width: 80%;
}
.tablaa img{
  width:90%;
}


/*estilos de texto VENTANAS RECUERDE */
.recuerde1 {
  font-size: 1.1rem !important;
}
.alicent{
  text-align: center !important; 
}
.aliizq{
  text-align: left !important; 
}
.alijust{ 
  text-align: justify !important; 
}
.peq{
  font-size: 0.8rem;
}



.video-container {
  position: relative;
  padding-bottom: 56.25%; 
  padding-top: 30px; 
  height: 0;
  overflow: hidden;
  margin-bottom: 20px;
  margin-top: 20px;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.list-group-item{
  color:#000 !important;
  border:1px solid #000;
}



/*rectangulo titulo*/
.ft{
  color:#000;
  background-color:#E5F7FD;
  margin:0px 350px 0px 350px;
  padding:30px 0px 30px 0px;
  letter-spacing: 10px;
  box-shadow: 0 0 10px 5px;
  border: 2px solid #292929;
  outline: 5px solid #e3e3e3;
}


.banner-enc{
  background-image: url('../imagenes/banner1.jpg');
  background-position: center;
  background-size: cover;
  padding-top:250px;
  padding-bottom:350px;
}





.fondoencpie { 
   background-color: #00B5EF;
  }

 .fondo1{ 
  background-color: #E5F7FD; 
/*  background-image: url('../imagenes/textura2.jpg');*/
  /*background-size: cover;
  background-position: center;*/
}

.cursor{
  cursor: pointer;
}
.color1{
  color: #000; 
}
.color2{
  color: #000; 
}
.barra{
  color:#fff;
  background-color:#00B5EF; 
  padding:10px 20px 10px 20px;
  border-radius: 15px;
}


.negrita{
  font-weight: bolder;
}


.container .card:hover{
  cursor:pointer;
   transition:0.3s ease-in; 
  transform:translateY(-15px);
  box-shadow:0 12px 16px rgba(0,0,0,0.2) ;
}



.navbar {
      padding-top: 20px;
      padding-bottom: 20px;
      letter-spacing: 5px;
      color:#000;
}
.navbar-nav li a{
  color:#000;
  text-decoration: none; 
  font-size: 1rem;
  padding: 15px 10px 15px 10px;
}
.navbar-nav  li a:hover {
  color:#000 !important;
  font-weight: bolder;
  padding-left: 20px;
  padding-right: 20px;
  transition: 0.3s ease-in;
  }
.fijo{
    position: sticky; 
    position: fixed; 
    width: 100%;
    z-index: 1000;
 }




/* efecto flecha que apunta hacia abajo */
.speech-bubble {
  color: #E5F7FD;
  color:transparent;
  text-align: center;
  font-family: sans-serif;
}
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  /*size flecha*/
  border: 25px solid;
}
.speech-bubble-top:after {
  border-bottom-color: #292929;
  left: 50%;
  bottom: 100%;
  margin-left: -15px;   
}
.speech-bubble-right:after {
  border-left-color: #292929;
   left: 100%;
  top: 50%;
  margin-top: -15px;    
}
 .speech-bubble-bottom:after {
  background-color: transparent;
  border-top-color: #292929;
  top: 100%;
  left: 50%;
  margin-left: -15px;  
}
 .speech-bubble-left:after {
  border-right-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;    
}
.sombra1 {
  box-shadow: 0 30px 10px -20px rgba(0, 0, 0, 0.8);
}



.navbar-toggler{
  background-color:#e2e2e2;
}
.navbar-toggler:hover{
  background-color: #e2e2e2;
}
.custom-toggler.navbar-toggler {
  border-color:black;
}
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}         
.custom-toggler .navbar-toggler-icon:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}         




.bordes{
  border-radius: 30px;
}
.tp{
    font-size: 60px;
    color:purple;
}

  .margin{
    margin-bottom: 80px;
  }


  


/* scrolltop*/


#scrollTopButton {
    display: none; 
    position: sticky; 
    bottom: 20px; 
    right: 30px; 
    z-index: 100; /* Make sure it does not overlap */
    border: solid 1px white; 
    outline: none; 
    background-color: #EB1F25; 
    color: #fff; 
    cursor: pointer; 
    padding: 5px 15px; 
    border-radius: 10px; 
    font-size: 1.8rem; 
    float: right;
}
#scrollTopButton:hover {
    background-color: #131313; 
}

 

.container-fluid {
      padding-top: 130px;
      padding-bottom: 80px;
  }


/* fondos planos secciones */

  .fondo2 { 
      background-color: #474e5d; 
      color: #ffffff;
  }
  .fondo3 { 
      background-color: #ffffff;
      color: #555555;
  }



.pie{
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
  color: #ffffff;
  margin-bottom: -70px;
  background-color: #E5F7FD;
} 



 .tooltip > .tooltip-inner {
  background-color: #73AD21; 
  color: #FFFFFF; 
  border: 1px solid green; 
  padding: 10px;
  font-size: 14px;
}
/* Tooltip on top */
 .tooltip.top > .tooltip-arrow {
  border-top: 5px solid green;
}
/* Tooltip on bottom */
.tooltip.bottom > .tooltip-arrow {
  border-bottom: 5px solid blue;
}
/* Tooltip on left */
.tooltip.left > .tooltip-arrow {
  border-left: 5px solid red;
}
/* Tooltip on right */
.tooltip.right > .tooltip-arrow {
  border-right: 5px solid black;
}


.alerta img{
  width: 10% !important;
}



/*celular*/
@media screen and (max-width: 768px) {
  .display-4 {
    font-size: 2rem;
    justify-content: center;
  } 
  .ft{
       margin:0 auto;
       display: block;
       font-size:1.5rem;
       letter-spacing: 0px;
  }  
  .banner-enc{
    background-position: center;  
    padding-top:150px;
    padding-bottom:200px;  
  }
  .card{
    width: 100%;
  }
  .logos img{
    width:25%;
}
.alerta img{
    width: 20% !important;
}
.audio1{
  text-align: center;
  display: block !important;
}
.cardinfog{
  margin-bottom:30px;
}
.tablaa img{
  width:100% !important;
}

}


/*portatil*/
@media screen and (max-width: 992px) {
  .ft{
    font-size:1.2rem;
    letter-spacing: 0px;
}  
}


/*tablet*/
@media screen and (max-width:1200px){
  .ft{
    margin:0 auto;
    display: block;
}  
}