*{
    font-family: sans-serif;
}
h1{
    font-weight: bold; color: #004aad;
}
#img-bn{
display: none;
}
#logotipo{
    background: url(../imagenes/logo.png) no-repeat;
    width: 120px; height: 68px; left: 30px; position:absolute; z-index: 10000; font-size: 0px; padding: 2em;
}

.navbar-light{
    height: auto; padding: 1em; background: #004aad;  
}


.bn {
  width: 100%;
  margin: auto;

}

.bn figure {
  /* Centramos la img */
  text-align: center;
}

.bn figure img {
  width: 100%;
}
 
#celularbn{
  display: none;
}

.est{
  color: white; font-weight: bolder; font-size: 1.5rem; text-decoration: none;
}
.est:hover{
  color: white;
}

@media (max-width: 400px){
  .bn{
    display: none;
  }
  #celularbn {
    width: 100%;
    margin: auto;
    display: inline-block;
  }
  
  #celularbn figure {
    /* Centramos la img */
    text-align: center;
  }
  
  #celularbn figure img {
    width: 100%;
  }

}


header{
    position: relative; transition: 0.8s; background: #004aad;
}

.form-control{
      display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.fondo_form{
  background: #2180ff; padding: 2em; border-radius: 1em; width: 60%; margin: auto;
}
.grupo-form{
 width: 70%; margin: auto;

}
@media screen and (min-width: 401px) and (max-width: 818px){
  .fondo_form{
    width: 100%; margin: auto; padding: 1.5em;
  }
  .grupo-form{
    width: 90%; margin: auto;
  }
}
@media (max-width: 399px){
  .fondo_form{
    width: 100%; margin: auto; padding: 0.5em;
  }
  
  .grupo-form{
    width: 98%; margin: auto;
  }
}
.card-img,
.card-img-top,
.card-img-bottom {
  width: 4em; margin: auto;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: transparent;
    background-clip: border-box;
    border: none;
    border-radius:none;
  }
.form-select{
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;

  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#fondo_separador{
    background: url(../imagenes/img_separador2.png) ; max-width: 100%;
    height: 10em;

}

.esp{
    background: #2180ff; 
}
.esp h1 {
  color: white;
}
.esp3 h2, p{
  color: white;
}
.esp2{
    background: #004aad; }
.esp2 h1{
  color: white;
} 
.esp2 span, label{
  color: white;
}
.color p{
  color: #004aad;
}
#grupo_prod h2{
    font-size: 1.5em; color: #6ec1e4;

}
#grupo_prod img{
    width: 9em;
}






/* boton de enviar*/
.botonCentro{
  margin: auto; text-align: center;
}
.btn-primary {
  color: #fff;
  background-color: #004aad;
  border-color: none; font-weight: bolder;
}
.btn-primary:hover {
  color: #4578e3;
  background-color: #fff;
  border-color: none;
}
/* redes*/

#reds ul li{
  display: inline-block; list-style: none; padding: 1em; margin-left: -1em;
}

.twt{
  background: url(../imagenes/social-iconos/twitter.png); background-repeat: no-repeat; background-size: contain; display: inline-block; overflow: hidden; height: 35px; width: 35px;
  text-indent: -5000px;
}
.fb{
  background: url(../imagenes/social-iconos/facebook.png); background-repeat: no-repeat; background-size: contain; display: inline-block; overflow: hidden; height: 35px; width: 35px;
  text-indent: -5000px;
}
.in{
  background: url(../imagenes/social-iconos/instagram.png); background-repeat: no-repeat; background-size: contain; display: inline-block; overflow: hidden; height: 35px; width: 35px;
  text-indent: -5000px;
}
/* carrusel*/
.w-30{
  margin: auto;  padding: 3em; 
  margin-bottom: 6em;
}
@media (max-width: 767px){
 .w-30{
  margin: auto;  padding: 3em;
  margin-bottom: none;
 }
}

.fondo{

  border-radius: .5em;
 width: 50%;
 margin: auto;
  background: rgba(0,0,0,0.22);
}

.red1 ul li{
list-style: none;  display: inline-block;

}
nav{
  margin: auto;
}



/*nav contacto*/
#presentacion{
  display: inline;
}
#presentacion a{
  padding: 1em;
}

#nav-contacto li{
  display: inline; color: white;
}

#hora{
  padding: 15px 48px;
	background-image:url(../imagenes/social-iconos/reloje.png);
	background-repeat: no-repeat;
	background-position: 5px center;
}
#hora_fot{
  padding: 15px 48px;
	background-image:url(../imagenes/social-iconos/reloj_footer.png);
	background-repeat: no-repeat;
	background-position: 5px center;
}
#celular_fot{
  padding: 15px 48px;
	background-image:url(../imagenes/social-iconos/tel_footer.png);
	background-repeat: no-repeat;
	background-position: 5px center;
}
#celular{
  padding: 15px 48px;
	background-image:url(../imagenes/social-iconos/tel.png);
	background-repeat: no-repeat;
	background-position: 5px center;
}
#consulta{
  padding: 15px 48px;
	background-image:url(../imagenes/social-iconos/mail_footer.png);
	background-repeat: no-repeat;
	background-position: 5px center;

}


.fb2{
  background: url(../imagenes/social-iconos/fb2.png); background-repeat: no-repeat; background-size: contain; display: inline-block; overflow: hidden; height: 35px; width: 35px;
  text-indent: -5000px;
}
.in2{
  background: url(../imagenes/social-iconos/in2.png); background-repeat: no-repeat; background-size: contain; display: inline-block; overflow: hidden; height: 35px; width: 35px;
  text-indent: -5000px;}
@media(max-width: 818px){
  #presentacion{
    display: none 
  }
 
  .navbar-light{
    height: 6rem;
  }
}



.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: none;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: white;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
#contacto_2 li {
 list-style: none; padding: 0.5em; margin-left: 0%;
}

.curve{
  background-color: #2180ff;
}
.curve svg{
  display: block;
}
.uno{
  display: inline-block
}





/* footer estilo*/
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");

footer {
  width:100%;
  position:hiden;
  bottom:0px
}
footer div {
  background-color:#4478e3;
  margin: -5px 0px 0px 0px;
  padding:0px;
  color: #fff;
 
}
svg {
  width:100%; height: 10%;
}

.topball {
  animation: ball 1.5s ease-in-out;
  animation-iteration-count:infinite;
  animation-direction: alternate;
  animation-delay: 0.3s;
  cursor:pointer;
}

.wave {
  animation: wave 3s linear;
  animation-iteration-count:infinite;
  fill: #4478e3;
}
.drop {
  fill: transparent;
  animation: drop 5s ease infinite normal;
  stroke: #4478e3;
  stroke-width:0.5;
  opacity:.6;
  transform: translateY(80%);
}
.drop1 {
  transform-origin: 20px 3px;
}
.drop2 {
  animation-delay: 3s;
  animation-duration:3s;
  transform-origin: 25px 3px;
}
.drop3 {
  animation-delay: -2s;
  animation-duration:3.4s;
  transform-origin: 16px 3px;
}
.gooeff {
  	filter: url(#goo);
}
#wave2 {
  animation-duration:5s;
  animation-direction: reverse;
  opacity: .6
}
#wave3 {
  animation-duration: 7s;
  opacity:.3;
}
@keyframes drop {
  0% {
    transform: translateY(80%);
    opacity:.6;
  }
  80% {
    transform: translateY(80%);
    opacity:.6;
  }

  90% {
    transform: translateY(10%) ;
    opacity:.6;
  }
  100% {
    transform: translateY(0%) scale(1.5);
    stroke-width:0.2;
    opacity:0;
  }
}
@keyframes wave {
  to {transform: translateX(-100%);}
}
@keyframes ball {
  to {transform: translateY(20%);}
}



.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:3em;
	right:0.7em;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;

  z-index:100;
}
.float:hover {
	text-decoration: none;
	color: #25d366;
  background-color:#fff;
}

.my-float{
	margin-top:16px;
}
@media(max-width: 360px){
  .float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:3em;
    right:0.6em;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
  
    z-index:100;
  }
  .ir-arriba {
    display:none;
    padding:none;
    background:none;
    font-size:none;
    color:none; 
    cursor:none;
    position: none;
    bottom:none;
    right:0.none;
    z-index:none; 
    border-radius:none;
   
  }
  .float:hover {
    text-decoration: none;
    color: #25d366;
    background-color:#fff;
  }
  
  .my-float{
    margin-top:16px;
  }
  .datosFooter{
    text-align: center;
  }
}


.ir-arriba {
	display:none;
	padding:20px;
	background:#03224c;
	font-size:21px;
	color:#fff; 
	cursor:pointer;
	position: fixed;
	bottom:1em;
	right:0.8em;
  z-index:100; 
 
  border-radius:50px;
 
}
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?ibbj6f');
  src:  url('fonts/icomoon.eot?ibbj6f#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?ibbj6f') format('truetype'),
    url('fonts/icomoon.woff?ibbj6f') format('woff'),
    url('fonts/icomoon.svg?ibbj6f#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-Sin-ttulo-3:before {
  content: "\e900";
  color: #ffffff;
}

#listo{ display: none;}

  #listo:target{
      display: block;
      text-align: center;
      font-family: 'Fredoka One', cursive; color: #b1992a; font-size: 2em;
      background-color: #f1e29c;
      max-width: 100%;
      margin: 0 auto;
      padding: 2em;
      height:200px;
  }
  #listo:target a {
      display: block;
      background-image: url(../iconos/cerrar.png);
      background-repeat: no-repeat;
      text-indent: -1000px;
      width: 40px;
      height: 40px;
      position: relative;
  
  }
 .edit{
  text-decoration: none; color: white;
 } 
 .edit:hover{
   font-weight: bold; color: white;
 }