@charset "utf-8";
@font-face {
  font-family: "Galano Grotesque";
  src: url("../fonts/galano_grotesque/galano-grotesque.woff");
}
@media (min-width : 25px) {
  body {
  	font-family: "Galano Grotesque";
  }
  main {
  	margin-top: 5.7rem;
  }
  #mainNav {
  	font-family: "Galano Grotesque";
  	background:#2188ae !important;
  }
  .navbar-dark .navbar-toggler {
    color: rgba(255,255,255, 0.8);
    border: none;
  }
  .navbar-dark .navbar-nav .nav-link {
      color: rgba(255,255,255,.70);
  }
  .text-embotelladora {
  	color:#2188ae;
  }
  .text-embotelladora1 {
      color: #4a494a;
  }
  .text-embotelladora2 {
      color: #31a7df;
  }
  .text-embotelladora3 {
      color: #54c3ee;
  }
  #card-hogar, #card-negocios, #card-empresas, #card-instituciones {
  	opacity: 0.75;
  	position: absolute;
  }
  .list-group-item {
  	padding: .25rem .75rem;
      background-color: transparent;
      border: none;
  }
  .w-55 {
      width: 55% !important;
  }
  .btn-outline-light:hover, .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show>.btn-outline-light.dropdown-toggle {
      color: #2188ae;
      background-color: #f8f9fa;
      border-color: #31a7df;
  }
  .separador {
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 3px solid rgba(33,136,174,.5);
  }
  .hogar {
    background-image: url("../photos/jumbo_hogar.jpg");
    background-size: cover;
    border-radius: 0;
  }
  .empresa {
    background-image: url("../photos/jumbo_empresa.jpg");
    background-size: cover;
    border-radius: 0;
  }
  .instituciones {
    background-image: url("../photos/jumbo_instituciones.jpg");
    background-size: cover;
    border-radius: 0;
  }
  .negocio {
    background-image: url("../photos/jumbo_negocio.jpg");
    background-size: cover;
    border-radius: 0;
  }
  .nosotros {
    background-image: url("../photos/jumbo_nosotros.jpg");
    background-size: cover;
    border-radius: 0;
  }
  .btn-embotelladora {
      color: #fff;
      background-color: #31a7df;
      border-color: #31a7df;
      font-size: 15px;
      font-weight: 900;
      border-radius: 150px;
  }
  .btn-embotelladora:hover {
      color: #31a7df;
      background-color: #fff;
      border: solid 1px #31a7df;
      font-size: 15px;
      font-weight: 900;
      border-radius: 150px;
  }
  .btn-embotelladora2 {
      color: #fff;
      background-color: #54c3ee;
      border-color: #54c3ee;
      font-size: 15px;
      font-weight: 900;
      border-radius: 150px;
  }
  .btn-embotelladora2:hover {
      color: #54c3ee;
      background-color: #fff;
      border: solid 1px #54c3ee;
      font-size: 15px;
      font-weight: 900;
      border-radius: 150px;
  }
  .foto4 {
      width: 40%;
      margin: 2px 0;
      vertical-align: middle;
  }
  .foto3 {
      width: 81%;
      margin: 2px;
  }
  .elementTextServ {
      display: inline-block;
      max-width: 300px;
      vertical-align: middle;
      white-space: normal;
  }
  .form-dispensers form {
      background: #2188ae;
      padding: 30px 10px 0 10px;
      box-shadow: 3px 3px 4px rgba(0,0,0,.2);
      border-radius: 25px;
  }
  #footer {
      width: 100%;
      height: 400px;
      background-image: url(../photos/fondo_footer.jpg);
      background-size: cover;
      background-repeat: no-repeat;
  }
  .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #4a494a;
    font-size: 0.85rem;
  }
  .form-control::-moz-placeholder { /* Firefox 19+ */
    color: #4a494a;
    font-size: 0.85rem;
  }
  .form-control:-ms-input-placeholder { /* IE 10+ */
    color: #4a494a;
    font-size: 0.85rem;
  }
  .form-control:-moz-placeholder { /* Firefox 18- */
    color: #4a494a;
    font-size: 0.85rem;
  }​
  .input-group-append, .input-group-prepend {
      display: -ms-flexbox;
      display: block;
  }
  .input-group-text {
      font-size: 0.85rem;
      color: #4a494a;
      padding: .5rem .75rem;
  }
  .input-group>.custom-select {
      color: #4a494a;
      font-size: 0.85rem;
      height: 100%;
  }
  .input-group {
    margin-bottom: 1rem;
  }
}
@media (max-width : 480px) {
  #footer {
      text-align: center;
      width: 100%;
      height: 100%;
      background-image: url(../photos/fondo_footer_mobile.jpg);
      background-size: cover;
      background-repeat: no-repeat
  }​
  #mainNav {
      font-family: "Galano Grotesque";
      background: #2188ae !important;
  }
  .hogar {
    background-image: url("../photos/jumbo_hogarMobile.jpg");
    background-size: cover;
    height: 350px;
  }
  .empresa {
    background-image: url("../photos/jumbo_empresaMobile.jpg");
    background-size: cover;
    height: 350px;
  }
  .instituciones {
    background-image: url("../photos/jumbo_institucionesMobile.jpg");
    background-size: cover;
    height: 350px;
  }
  .negocio {
    background-image: url("../photos/jumbo_negocioMobile.jpg");
    background-size: cover;
    height: 350px;
  }
  .nosotros {
    background-image: url("../photos/jumbo_nosotrosMobile.jpg");
    background-size: cover;
    height: 350px;
  }
  .input-group>.custom-select {
      height: 100%
  }
}