/* ==========================================================================
   FINAL MOBILE CSS FOR UNUM GENSET ES PAGE
   Replace previous mobile custom blocks with this one
   ========================================================================== */

.logo-mobile {
  display: none;
}

@media (min-width: 768px) {
  .logo-desktop {
    display: block;
  }

  .logo-mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {

  /* ----- Mobile navbar ----- */

  .navbar-fixed-top {
    background: #ffffff !important;
    min-height: 74px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  }

  .navbar-header {
    min-height: 74px !important;
  }

  .navbar-toggle {
    margin-top: 20px !important;
    margin-right: 15px !important;
    border: none !important;
    background: transparent !important;
  }

  .navbar-toggle:hover,
  .navbar-toggle:focus {
    background: transparent !important;
  }

  .navbar-toggle .icon-bar {
    background-color: #d6002a !important;
    width: 22px;
    height: 3px;
  }

  .navbar-brand {
    height: 74px !important;
    padding: 3px 15px !important;
    display: flex !important;
    align-items: center !important;
  }

  .logo-brand {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: 70px !important;
    margin: 0 !important;
  }

  .logo-brand img {
    width: auto !important;
    height: auto !important;
  }

  .logo-desktop {
    display: none !important;
  }

  .logo-mobile {
    display: block !important;
    width: auto !important;
    height: 68px !important;
    max-height: 68px !important;
  }

  .navbar-collapse {
    background: #ffffff !important;
    border-top: 1px solid #e5e5e5 !important;
    max-height: calc(100vh - 74px) !important;
    overflow-y: auto !important;
  }

  .navbar-nav {
    margin: 0 -15px !important;
  }

  .navbar-nav > li {
    float: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
    padding: 3px 10px 3px 5px !important;
  }

  .navbar-nav > li > a {
    color: #005665 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    text-align: left !important;
    margin-top: 0 !important;
  }

  .navbar-nav > li > a:hover,
  .navbar-nav > li > a:focus {
    color: #0da8c1 !important;
  }

  .navbar-nav > li > a.btn {
    display: inline-block !important;
    width: auto !important;
    margin: 10px 20px !important;
    padding: 10px 18px !important;
    color: #ffffff !important;
  }

  .lang-switch {
    display: inline-block !important;
    width: auto !important;
    margin: 8px 20px 14px 20px !important;
    padding: 6px 12px !important;
    background: #ffffff !important;
    color: #005665 !important;
    border: 1px solid #005665 !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
  }

  .lang-switch:hover,
  .lang-switch:focus {
    background: #005665 !important;
    color: #ffffff !important;
    border-color: #005665 !important;
    text-decoration: none !important;
  }

  /* ----- Mobile hero ----- */

  .pages-header {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 74px !important;
    padding-bottom: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  .pages-header > img {
    display: none !important;
  }

  .section-logo {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url("https://unum-genset.com/img/home-mobile-es.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    z-index: 1 !important;
  }

  .section-logo .section,
  .section-logo .row {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .section-logo .logo {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: none !important;
    background: transparent !important;
  }

  .section-logo .logo br {
    display: none !important;
  }

  /* ----- Hero buttons ----- */

  .section-heading {
    display: block !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    background: #ffffff !important;
    padding: 22px 0 18px 0 !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  .section-heading .section,
  .section-heading .row,
  .section-heading .col-md-6 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 15px !important;
  }

  .section-heading .btn,
  div[style*="text-align: center"] .btn {
    display: block !important;
    width: calc(100% - 40px) !important;
    max-width: 320px !important;
    margin: 10px auto !important;
    padding: 13px 18px !important;
    font-size: 16px !important;
    border-radius: 28px !important;
    text-align: center !important;
  }

  /* ----- Main title ----- */

  .main {
    margin: 30px 0 !important;
  }

  .main .section-title {
    padding-top: 20px !important;
    margin-bottom: 22px !important;
  }

  .section-title h1 {
    font-size: 29px !important;
    line-height: 1.25 !important;
    padding: 0 18px !important;
    margin-top: 0 !important;
  }

  /* ----- Content blocks ----- */

  .main-c {
    padding: 30px 0 !important;
  }

  .main-gray {
    padding: 30px 0 0 0 !important;
  }

  .service-box-2 {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 20px !important;
  }

  .below {
    margin-top: 0 !important;
  }

  .span-services {
    padding-top: 14px !important;
    margin-bottom: 18px !important;
  }

  .service-name p {
    padding-left: 0 !important;
  }

  .services-icon {
    float: none !important;
    margin: 0 auto 12px auto !important;
    width: 60px !important;
  }

  .service-name {
    text-align: center !important;
  }

  .service-name h3,
  .service-name h5,
  .service-name p {
    text-align: center !important;
  }

  /* ----- Media ----- */

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  iframe {
    max-width: 100% !important;
  }

  #software iframe {
    height: 260px !important;
  }

  .panel-left {
    height: auto !important;
    padding-right: 15px !important;
  }

  /* ----- Accordion/features ----- */

  .panel_feature .row {
    padding: 1rem 1rem !important;
  }

  .accordion {
    font-size: 15px !important;
    line-height: 1.35 !important;
    padding: 14px !important;
  }

  button.accordion {
    padding: 14px !important;
  }

  /* ----- Contact/footer ----- */

  #contact iframe {
    width: 100% !important;
    min-height: 900px !important;
  }

  .main-footer {
    height: auto !important;
  }

  .main-footer .col-md-6 {
    margin-bottom: 30px !important;
  }

  .bottom-footer {
    height: auto !important;
    min-height: 80px !important;
  }

  .bottom-footer .main {
    margin: 0 !important;
  }

  .column-left,
  .column-right {
    float: none !important;
    padding: 12px 0 !important;
    margin: 0 !important;
  }

  .column-left p,
  .column-right p {
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  .section-logo {
    height: 500px !important;
    min-height: 500px !important;
    background-position: center top !important;
  }

  .section-logo .section,
  .section-logo .row,
  .section-logo .logo {
    height: 500px !important;
    min-height: 500px !important;
  }

  .section-title h1 {
    font-size: 27px !important;
  }
}










/* Language switcher */
.language-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0 10px;
}

.language-switcher .lang-current,
.language-switcher .lang-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 5px 10px;
  border-radius: 50px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.4px;
}

.language-switcher .lang-current {
  background: #0da8c1;
  color: #ffffff;
  border: 1px solid #0da8c1;
  cursor: default;
  pointer-events: none;
}

.language-switcher .lang-option {
  background: #ffffff;
  color: #005665 !important;
  border: 1px solid #005665;
  text-decoration: none;
  transition: 0.25s;
}

.language-switcher .lang-option:hover,
.language-switcher .lang-option:focus {
  background: #005665;
  color: #ffffff !important;
  border-color: #005665;
  text-decoration: none;
}

@media (max-width: 767px) {
  .language-switcher {
    display: flex !important;
    width: auto !important;
    margin: 10px 20px 14px 20px !important;
    padding: 0 !important;
  }

  .language-switcher .lang-current,
  .language-switcher .lang-option {
    min-width: 42px;
    height: 34px;
    font-size: 14px;
  }
}