.flecha,
.redes-sociales,
.telefono {
  z-index: 2;
  position: absolute;
  width: 100%
}

.grid,
.texto-producto {
  margin-top: 1rem
}

body,
html {
  font-family: 'Open Sans', sans-serif;
  height: 100%
}

.navbar-custom {
  background: rgba(255, 255, 255, .4) !important;
  padding-right: 3rem
}

.navbar-custom .navbar-nav .nav-link {
  color: #039
}

.navbar-custom .navbar-nav .nav-link:hover {
  color: #0033c8
}

.navbar-brand {
  max-width: 14rem
}

.header {
  max-width: 100vw;
  height: 100vh;
  background-image: url(../img/sunglasses.jpeg);
  background-position: 0 15%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #fff
}

.redes-sociales a,
.telefono h3 {
  display: inline-block;
  font-size: 2rem;
  background-color: rgba(0, 51, 153, .5);
  color: #fff
}

.telefono {
  top: 6.5rem;
  text-align: left;
  color: #fff
}

.telefono h3 {
  padding: .3rem .6rem
}

.redes-sociales {
  top: 6.5rem;
  text-align: right;
  color: #fff
}

#quienes-somos .card-title,
.descripcion,
.flecha,
.footer p,
.section #direccion,
.texto-intro,
.texto-producto {
  text-align: center
}

.redes-sociales a {
  padding: 0 .6rem;
  color: #fff
}

.redes-sociales a:hover {
  color: #fff;
  background-color: #0033c8
}

.flecha {
  bottom: .3rem
}

.tint-bg,
.tint-img::before {
  z-index: 1;
  height: 100%;
  width: 100%
}

.flecha-link {
  color: rgba(0, 51, 153, .5)
}

.flecha-link:hover {
  color: #0033c8
}

.tint-bg {
  background: rgba(0, 51, 153, .3)
}

.tint-img {
  position: relative
}

.tint-img::before {
  content: "";
  position: absolute;
  background: rgba(0, 51, 153, .4)
}

.section {
  padding: 3rem
}

.texto-intro {
  font-style: italic;
  font-size: 1.5rem
}

.donde-estamos,
.productos {
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: .15rem solid #fff
}

#donde-estamos,
#productos {
  background-color: #039;
  color: #fff
}

.grid {
  margin-bottom: 2rem
}

.img-producto {
  display: block;
  margin-left: auto;
  margin-right: auto
}

.google-maps {
  position: relative;
  padding-bottom: 40%;
  margin-bottom: 1rem;
  height: 0;
  overflow: hidden
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important
}

.contacto,
.introduccion,
.quienes-somos {
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: .15rem solid #039
}

#contacto,
#introduccion,
#quienes-somos {
  background-color: #fff;
  color: #039
}

.descripcion {
  font-size: 1.2rem
}

#quienes-somos ul {
  list-style-type: square
}

#quienes-somos a,
#quienes-somos a:hover {
  color: #039
}

.footer,
.footer a {
  color: #fff
}

.btn-primary {
  background-color: rgba(0, 51, 153, .9)
}

.btn-primary:hover {
  background-color: rgb(0, 51, 153, .9)
}

.imagen-contacto {
  width: 100%;
  border: .15rem solid #039
}

#alerta-contacto-danger,
#alerta-contacto-success {
  display: none
}

.footer {
  padding-top: 1rem;
  background-color: #1e1e1e
}

.footer ul {
  padding: 0;
  list-style-type: none
}

.footer p {
  margin-bottom: 0;
  background-color: #000
}

@media (max-width:400px) {
  .container-fluid {
    padding-right: 0;
    padding-left: 0
  }

  .navbar-custom {
    padding: 0 1rem 0 0
  }

  .redes-sociales,
  .telefono {
    top: 5rem
  }

  .flecha {
    bottom: .1rem
  }

  .flecha-link,
  .flecha-link:hover {
    color: #fff
  }

  .section {
    padding: 2rem .5rem
  }

  .contacto,
  .donde-estamos,
  .introduccion,
  .productos,
  .quienes-somos {
    text-align: center
  }
}

@media (max-width:991px) {
  .navbar-custom {
    z-index: 9;
    background: rgba(255, 255, 255, .9) !important
  }

  .google-maps {
    padding-bottom: 150%
  }

  .imagen-contacto {
    margin-top: 2rem
  }

  .footer ul li,
  h4 {
    text-align: center
  }

  .footer p {
    margin-top: .5rem
  }
}