/*
 * mobile.css
 * All mobile/tablet responsive overrides — consolidated.
 * Loaded AFTER style.css. Two breakpoints only:
 *   ≤ 1024px  — tablet + mobile
 *   ≤  600px  — mobile only
 *
 * DO NOT add desktop styles here. Desktop lives in style.css.
 */

/* ============================================================
   SECTION 1 — GLOBAL / OVERFLOW
   ============================================================ */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden;
  }
}


/* ============================================================
   SECTION 2 — NAVIGATION
   ============================================================ */

/* Hide desktop sf-menu, show mobile panel trigger */
@media (max-width: 1024px) {
  .sf-menu {
    display: none;
  }

  /* Show mobile menu and hamburger panel */
  .rd-mobilemenu,
  .rd-mobilepanel {
    display: block;
  }

  /* Hide sticky header bar on mobile (mobile panel takes over) */
  .isStuck {
    display: none !important;
  }

  .rd-mobilepanel h2 {
    display: none;
  }

  /* header: center logo, neutralise float */
  header {
    text-align: center;
  }

  header .brand {
    display: inline-block;
    float: none;
  }

  body .rd-mobilepanel {
    position: absolute;
    width: 60px;
  }

  /* footer invisible offset */
  footer .invisible {
    top: 50px;
    position: relative;
  }

  /* About Us background position */
  body .pollStyle {
    background-position: center;
  }

  /* About Us anchor offset */
  .pollStyle .invisible {
    top: 70px;
  }
}


/* ============================================================
   SECTION 3 — HERO / CAMERA SLIDER
   ============================================================ */
@media (max-width: 1024px) {

  /* Keep aspect-ratio on tablets; full-height override is in ≤600px block */
  .hero-section {
    padding-bottom: 62.82927% !important;
    height: auto;
    min-height: 350px;
  }

  /* Horizontal padding for caption */
  .hero-section .camera_caption {
    padding: 0 40px;
    box-sizing: border-box;
  }

  /* Show the main heading (h2_1) — overrides the older ≤700px rule that hides it */
  .slider_1 h2.h2_1 {
    display: block !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .slider_1 h4.h4_mainpage_1 {
    display: block !important;
    font-size: 14px !important;
  }

  /* Hide the alternative headings (shown by the ≤700px rule, not needed here) */
  .slider_1 h2.h2_2,
  .slider_1 h2.h2_2_2 {
    display: none !important;
  }

  /* Hero body text */
  .hero-text-desktop { display: none !important; }
  .hero-text-mobile  { display: block !important; }

  /* Button size */
  .btn-lg {
    font-size: 14px;
    padding: 16px 10px 18px;
  }
}

/* Tablets: push caption a bit down from the top */
@media (min-width: 601px) and (max-width: 1024px) {
  .camera_caption.first_block_slider {
    margin-top: 40px !important;
  }
}

/* Mobile: hero fills full viewport height */
@media (max-width: 600px) {
  .hero-section {
    padding-bottom: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
  }

  /* Push caption + Read More button down on small screens */
  .first_block_slider {
    margin-top: 10px;
  }


  /* Negative bottom margin on hr — tightens spacing on narrow screens */
  hr {
    margin: 0 0 -5px 0 !important;
  }

  .bg-aside .marked-list li {
    font-size: 10px;
    margin-top: 10px;
    line-height: 19px;
  }
}


/* ============================================================
   SECTION 4 — BG-ASIDE SECTIONS (Functions, Tech Spec)
   ============================================================ */
@media (max-width: 1024px) {

  /* Stack image + text vertically */
  .bg-aside {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Text block first, image block second */
  .bg-aside .cnt-block { order: 1; }
  .bg-aside .img       { order: 2; }

  /* Reset desktop absolute-positioning on both children */
  .bg-aside .img,
  .bg-aside .cnt-block {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    min-height: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bg-aside .img img {
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    margin: 0 auto;
    display: block;
  }

  .bg-aside .cnt-block {
    padding: 24px 20px !important;
    text-align: center;
  }

  /* Neutralise extra heading spacing inside cnt-block */
  .bg-aside .cnt-block.well-1 h2 {
    margin-top: 0 !important;
  }

  .bg-aside .cnt-block.well-1 .h2_technic {
    padding-top: 0 !important;
  }

  /* Hide the desktop side-pointing arrow */
  .bg-aside .cnt-block:before,
  .bg-aside-right .cnt-block:before,
  .bg-aside-left .cnt-block:before {
    display: none !important;
    content: none !important;
  }

  /* Down-pointing triangle at the top of the image block */
  .bg-aside .img:before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 16px 16px 0 16px !important;
    border-color: #fff transparent transparent transparent !important;
    z-index: 2;
  }

  /* Functions: centre the feature list inside the image block */
  .bg-aside .img.feature {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 20px 20px;
    box-sizing: border-box;
  }

  .marked-list {
    text-align: left;
  }

  .marked-list li {
    font-size: 12px;
    margin-top: 20px;
    line-height: 23px;
  }

  /* Read More buttons: hide desktop version, show mobile version */
  .read-desktop { display: none !important; }
  .read-mobile {
    display: inline-block !important;
    margin-top: 24px !important;
    text-align: center;
    align-self: center;
  }

  /* Tech Specs button: smaller bottom margin */
  .read-mobile-specs {
    margin-top: 24px !important;
    margin-bottom: 20px !important;
  }

  /* Functions + Tech Specs buttons sit on dark background */
  .function .img .read-mobile,
  .technic_character .img .read-mobile {
    color: #fff !important;
    border-color: #fff !important;
  }
  .function .img .read-mobile:hover,
  .technic_character .img .read-mobile:hover {
    background: #f14d4d !important;
    border-color: #f14d4d !important;
    color: #fff !important;
  }
}


/* ============================================================
   SECTION 5 — ABOUT US
   ============================================================ */
@media (max-width: 1024px) {

  /* Remove negative row margins that cause horizontal overflow */
  section.pollStyle.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Remove the fixed height that causes internal scroll on mobile */
  .en .pollStyle,
  .russ .pollStyle {
    height: auto !important;
  }

  .opros {
    float: none !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    box-sizing: border-box;
    overflow-x: hidden;
    background-attachment: scroll !important;
  }

  .opr-img {
    margin: 40px 0 30px !important;
  }

  .oph2 {
    height: auto !important;
  }

  .oph2 h2 {
    padding-top: 40px !important;
    padding-bottom: 20px;
  }

  .oph2 hr {
    margin-bottom: 20px !important;
  }

  .opros .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box;
  }

  .opros .opr {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .opros .opr p {
    font-size: 15px;
    line-height: 1.6;
  }
}


/* ============================================================
   SECTION 6 — TECH SPEC ICONS
   ============================================================ */
@media (max-width: 1024px) {

  main .bg-aside-left.technic_character .img {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    min-height: 400px !important;
  }

  .img_1.img_0,
  .img_2.img_0,
  .img_3.img_0 {
    height: auto !important;
    padding-top: 0 !important;
    text-align: center;
    width: 100%;
  }

  address p {
    font-size: 13px;
  }
}


/* ============================================================
   SECTION 7 — GALLERY (photo.html / video.html)
   ============================================================ */
@media (max-width: 1024px) {

  /* Disable hover animations on touch devices */
  .thumb img {
    transition: none !important;
    transform: none !important;
  }

  .thumb:hover img {
    transform: none !important;
    filter: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
  }

  .thumb:hover .thumb_overlay {
    opacity: 0 !important;
    background: transparent !important;
  }

  section.gallery .photo .thumb:hover img {
    filter: none !important;
  }
}


/* ============================================================
   SECTION 8 — SLIDER 1 (slider1.html / rot_1)
   ============================================================ */
@media (max-width: 1024px) {

  body.rot_1 .col-sm-4,
  body.rot_1 .col-sm-8 {
    width: 100% !important;
    float: none !important;
    padding: 0 16px;
    box-sizing: border-box;
  }

  body.rot_1 .col-sm-4 img {
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
  }
}


/* ============================================================
   SECTION 9 — SLIDER 2 (slider2.html / rot_2)
   ============================================================ */
@media (max-width: 1024px) {

  /* Restore hr centering overridden by the global 767px block */
  .rot2-heading hr,
  hr.hr_rot2_title {
    margin: 0 auto 14px !important;
  }

  .row_rot2,
  .first_row_rot2 {
    display: block !important;
    margin-bottom: 0;
  }

  .rot_2 .col-sm-4,
  .rot_2 .col-sm-8,
  .rot_2 .col-sm-8.col-sm-offset-4 {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .rot_2 .col-sm-4 img {
    max-width: 80%;
    height: auto;
    margin: 0 auto 12px;
    display: block;
  }

  /* Remove red bullet dots */
  .list_rot2 li:before {
    display: none;
  }

  .list_rot2 li {
    padding-left: 0;
  }
}


/* ============================================================
   SECTION 10 — CONNECTION SCHEME (scheme pages)
   ============================================================ */
@media (max-width: 1024px) {

  /* Remove fixed blockquote height so the image isn't clipped */
  body blockquote {
    height: auto !important;
  }

  .scheme_connection .scheme_connection_1 .item img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    display: block;
  }
}

@media (max-width: 600px) {
  .scheme_connection .hrr_scheme {
    margin: 0 0 -30px 0 !important;
  }
}


/* ============================================================
   SECTION 11 — SPECIFICATION PAGE (specification.html)
   ============================================================ */
@media (max-width: 1024px) {

  body.index-5 {
    overflow-x: hidden;
  }

  body.index-5 .page {
    overflow-x: hidden;
    width: 100%;
  }

  body.index-5 .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }

  .techcharact {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .table {
    width: 100%;
    min-width: 0;
    font-size: 12px;
    word-break: break-word;
  }

  body.index-5 .table td {
    padding: 8px 6px !important;
    font-size: 12px;
  }

  body.index-5 .table td:first-child {
    width: 40% !important;
    font-size: 11px;
  }

  /* dot column on mobile: shrink to minimum */
  body.index-5 .table td.dot {
    width: 12px !important;
    padding: 0 !important;
  }

  body.index-5 main,
  .index_5_html .page,
  .index_5_html section.well-4.well-inset-3.center {
    min-height: 100vh;
  }
}


/* ============================================================
   SECTION 12 — CONTACT FORM SEND BUTTON
   (no media query — global override of mailform.css)
   ============================================================ */
.mailform .mfControls .btn.mfProgress {
  background: transparent;
  color: #31383a;
  border: 2px solid #31383a;
}

.mailform .mfControls .btn.mfProgress:hover {
  background: #f14d4d;
  border-color: #f14d4d;
  color: #fff;
}