body {
  background: #f5f5f7;
  color: #1d1d1f;
  font-family: 'Cabin', sans-serif;
  font-style: normal;
}

.fuente-300 {
  font-weight: 300;
}

.fuente-400 {
  font-weight: 400;
}

.fuente-700 {
  font-weight: 700;
}

.fuente-900 {
  font-weight: 900;
}

.fondo-azul-primario {
  background-color: #0f4c81;
}

.fondo-blanco {
  background-color: #ffffff;
}

.color-azul-primario {
  color: #0f4c81;
}

.color-azul-secundario {
  color: #1fb3e5;
}

.color-negro-secundario {
  color: #333333;
}

.color-blanco {
  color: #fff;
}

#movitel .jumbotron {
  background-color: transparent;
  position: absolute;
  left: 0px;
  top: 0px;
}

#movitel, #comercial, #servicios, #automotriz {
  background-size: cover !important;
  background-position: center !important;
}

/*
Medidas mínimas... */
@media screen and (max-width: 320px) {
  #movitel {
    background: url(../img/bg-max-320.png) no-repeat top;
    min-height: 270px;
  }

  #automotriz {
    background: url(../img/Telrad.jpg) no-repeat top;
    min-height: 500px;
  }
}

/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media screen and (min-width: 321px) and (max-width: 480px) {
  #movitel {
    background: url(../img/ohmionica-min-320-max-480.jpg) no-repeat top;
    min-height: 600px;
  }

  .hero-panel {min-height: 300px !important;}

  #automotriz {
    background: url(../img/Telrad.jpg) no-repeat top;
    min-height: 600px;
  }

  #comercial {
    background: url(../img/reunion-min-320-max-480.jpg) no-repeat top;
    min-height: 600px;
  }

  #servicios {
    background: url(../img/medica-min-320-max-480.jpg) no-repeat top;
    min-height: 600px;
  }

}

/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media screen and (min-width: 481px) and (max-width: 767px) {
  #movitel {
    background: url(../img/bg-max-481-min-767.png) no-repeat top;
    min-height: 270px;
  }
}

/*

##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #movitel {
    background: url(../img/bg-max-768-min-1024.png) no-repeat top;
    min-height: 270px;
  }
}

/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #movitel {
    background: url(../img/bg-max-768-min-1024.png) no-repeat top;
  }
}

/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  #movitel {
    background: url(../img/bg-min-1025-max-1280.png) no-repeat top;
  }
}

/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media screen and (min-width: 1281px) {
  #movitel {
    background: url(../img/bg-min-1281-min.jpg) no-repeat top;
    min-height: 500px;
  }

  #comercial {
    background: url(../img/reunion-bg-min-1281.jpg) no-repeat top;
    min-height: 500px;
  }

  #automotriz {
    background: url(../img/Telrad.jpg) no-repeat top;
    min-height: 500px;
  }

  #servicios {
    background: url(../img/medica-bg-min-1281.jpg) no-repeat top;
    min-height: 500px;
  }
}

.hero-panel {
  background-color: #009cde8a;
  min-height: 500px;
}

.hero-panel:last-child {
  background-color: #00308778;
}

.hero-body {
  -webkit-opacity: 1 !important;
  -moz-opacity: 1 !important;
  opacity: 1 !important;
}

ul.nav-social-media {
  list-style-type: none !important;
  margin: 0;
  padding-left: 0 !important;
  overflow: hidden;
}

.nav-social-media li {
  float: left;
}

.nav-social-media li a {
  display: block;
  color: #6c757d !important;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

.nav-social-media li a:hover {
  color: #fff !important;
  background-color: #0f4c81;
}

a:hover {
  text-decoration: none;
}

a.efecto-enlace-primario {
  color: #1fb3e5 !important;
}

a.efecto-enlace-primario:hover {
  color: #fff !important;
}

.efecto-enlace-primario, .efecto-enlace-secundario {
  text-decoration: none;
  position: relative;
}

.efecto-enlace-primario:after, .efecto-enlace-secundario:after {
  position: absolute;
  content: '';
  height: 2px;
  bottom: -4px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 0%;
  background-color: #0f4c81;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}

/* optional hover classes used with anmiation */
.efecto-enlace-primario:hover:after {
  width: 100%;
  background: #fff;
}

.efecto-enlace-secundario:hover:after {
  width: 100%;
  background: #0f4c81;
}