

@media screen and (min-width: 2500px) {
 .intro-block.home h2 {
    font-size: 2vw;
    }

h2 {font-size: 2vw}

.imageSlider .swiper-slide > div article {padding-left: 50px}

.imageSlider {width:90vw; margin:0}
.swiper-slide {margin-left: 40px !important}

#catalogues .swiper-slide, .techSwiper .swiper-slide {margin-left: 0px !important}

}



@media screen and (max-width: 1800px) {

}

@media screen and (max-width: 1600px) {
  .mobile-nav ul li a {padding: 5px;}

  .inner-banner.history-banner {height: 75vh;}


}
@media screen and (max-width: 1500px) {

 .grid-3 {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
 .values .valuesSwiper .swiper-slide {height: auto; justify-content:flex-start}
 .values p {width: 85%; font-size: 14px!important; line-height: 24px}
.values p strong {margin-bottom: 10px; display:block}
}
@media screen and (max-width: 1400px) {

  .mobile-nav .wrapper,.mobile-menu-wrapper {padding: 25px 0;}


.dark.logo > a > img {
    width: 60px;
    position: absolute;
    top: 50px;
    right: 50px;
}


}


@media screen and (max-width: 1366px) {

  .wrapper {max-width: 85%}
.logo-images img { height: 100px;}
.logo-images-two img { height: 100px;}
footer h2 {margin-bottom:5px;}
footer h2 {font-size: 2.7vw}
footer h4 {margin-top: 25px}

.home-banner {height: 100%;}

.intro-block.home h2 {
    font-size: 4.5vw;
}

}

@media screen and (max-width: 1200px) {

.inner-banner.history-banner {height: 60vh;}
.box_notes .text h4 {font-size:20px;}

}

@media screen and (max-width: 1100px) {


 .menu-right {display: none;}
.mobile-menu {display:block; position: fixed; right: 25px; top: 0px;}
.menu-trigger .hamburger {top:5px}
.menu-trigger {top: 30px}
.menu-trigger p {font-weight: 600;
    padding-right: 20px;
    display: block;
    margin: 0;
    color: #000;
    font-size: 15px;
    cursor: pointer;}



}

@media screen and (max-width: 1000px) {

  .wrapper-sml.history > article {margin-bottom: 30px; padding-bottom: 30px;}
  .history-item {grid-template-columns: 1fr; grid-gap: 30px; padding-bottom: 30px;}
  .history-item::before, .history-item::after {display: none;}
  .history-item:nth-child(2n+1) article {text-align: left;}
  .history-item:nth-child(2n+2) article {order: 1;}
  .history-item:nth-child(2n+2) .grid {order: 2;}
  .history-item:nth-child(2n+2) > div {flex-direction: row;}
  .history::after {display: none;}

  .text.new {display:block;}
  .text.new .text_left {width:100%;margin-bottom:20px;}
  .text.new .text_right {width:100%;}

}

@media screen and (max-width: 900px) {

.inner-banner.full.millrun article {bottom: 20px;}
.inner-banner article p {width: 90%; font-size: 1.6vw !important; line-height: 2.2vw !important;}

.options .custom-pagination .swiper-pagination-bullet {
  width: 100%;
padding: 12px 0px 10px; margin:0;

}

.custom-pagination {margin:30px 0;}

.options .swiper-slide, .catalogue-item {

    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    grid-gap: 15px;
}

.home-banner .video-container {
    position: relative;
    width: 150%;
    background: #000;
    padding-bottom:0;
    height: 300px;
    margin-left: -10%;
}

.inner-banner.history-banner {height: 300px;}
.inner-banner.history-banner .video-container {
    position: relative;
    width: 150%;
    background: #000;
    padding-bottom:0;
    height: 300px;
    margin-left: -10%;
}

.inner-banner.history-banner .video-container iframe {height: 100%; min-height: 50vh; min-width: 100vh;}


.inner .tile p {font-size: 12px !important}

  article h6 {font-size: 12px; margin-bottom: 15px; line-height: 1.5;}
  header {padding: 10px 0;}
  header .logo {width: 170px;}
  li,.services-content li {font-size: 14px!important;}
  .wrapper {max-width: 85%;}

  .close-icon {top: 20px; font-size: 12px;}

  .hamburger {display: block;}
  .inner-banner.full.millrun {height: 50dvh;}
  .inner-banner {height: 35dvh;}
  .inner-banner article {left: 7.5%; width: 85%; top: 35%;}
  .inner-banner.about article h1 {font-size: 3.5vw;}
  .inner-banner.contact article {top: 45%;}
  .inner-banner.full article {bottom: 30px; }
  .inner-banner article h1 {margin-bottom: 5px;}
  .inner-banner .button-outline.arrow {font-size: 13px;}
  .home-banner {height: 300px;}
  .home-banner figure {height: 40%;}
  .home-banner article {bottom: 50px; width: 90%;  max-width: none;}
  .home-banner article h1 {font-size: 9px; margin-bottom: 15px; letter-spacing:1px;}
  .home-banner article h2 {font-size: 19px;}
  .home-banner .button-outline {display:none}

.inner-banner.full article p {font-size: 14px; line-height:19px; margin-bottom:10px}
.inner-banner.full article h1 {font-size: 24px;}

  .mobile-menu {display: block; position: fixed; right: 25px; top: 30px;}
  .menu-trigger {align-items: center; top: 0px;}
  .menu-trigger p {font-weight: 600; padding-right: 20px; display: block; margin: 0; color: #000; font-size: 15px; cursor: pointer;}
  .menu-trigger .hamburger {top: 0px;}

  .mobile-nav ul li a,.mobile-nav ul li.title a {font-size: 13px;}

  .file-upload {flex-direction: column; align-items: flex-start;}
  .file-upload label {margin-bottom: 15px;}
  .file-upload input {font-size: 13px;}

  .mobile-nav.active {min-height: 100vh; overflow-y: scroll;}
  .mobile-nav article a {font-size: 5.5vw; margin-bottom: 15px;}
  .mobile-nav .wrapper {padding: 10px 0;}
  .close-icon::before,.close-icon::after {right: 10px;}

  .mobile-menu-wrapper > div  {column-count: 2;}
  .mobile-menu-wrapper > div ul {margin-left: 0px;}

  .features .button-outline.arrow {padding: 12px 50px 12px 20px; font-size: 15px; margin-top:0}

  .inner, .dark, .white, .grey {padding: 50px 0;}
  .inner .flex-row,.dark .flex-row, .white .flex-row, .grey .flex-row  {grid-gap: 0px;}

  .flex-row > article, .flex-row > figure {width: 100%;}
  .intro-block.flex-row > article:last-child {width: 100%;}

  figure.round-top, figure.round-bottom, figure.round {height: 40vh;}

  .inner h2 {font-size: 9.5vw;}
  .inner h4 {font-size: 20px; margin-bottom: 25px;}
  .inner p {font-size: 15px!important;}

  .dark h2 {font-size: 7vw; margin-bottom: 15px;}
  .dark.logo > img {width: 50px; top: 25px; right: 5%;}

.intro-block.home h2 {
    font-size: 40px;
}

.dark.logo > a > img {
    width: 40px;

    top: 20px;
    right: 20px;
}

.dark .flex-row > article, .white .flex-row > article {margin-bottom: 0px; padding-top:40px}

h2 {font-size: 24px; line-height: 30px}

  .imageSlider {width: 100%; left: 50%; transform: translateX(-50%);}
  .imageSlider .swiper-wrapper {right: auto; left: 0;}

  .imageSlider .swiper-slide {flex-direction: column; justify-content:flex-start}

  /* .swiper-image-container .swiper-slide {height: 300px;} */

  .swiper-image-container .swiper-slide {height: auto;}
  .swiper-image-container .swiper-slide figure {height: 300px;}
  .imageSlider .swiper-slide {transition: 0.5s;}
  .imageSlider .swiper-slide-prev {width: 100%!important; opacity: 0;}
  .imageSlider .swiper-slide-next {width: 100%!important; opacity: 0;}
  .imageSlider .swiper-slide > div {width: 100%; opacity: 1; margin-top: 25px;}
  .imageSlider .swiper-slide-active > div {width: 100%; opacity: 1;}
  .imageSlider .swiper-slide > div article {position: relative;width: auto; top: 0; left: auto; transform: none; opacity: 1; padding-top:15px; padding-left:0; direction: ltr;}


  .swiper-image-container {width: 300px; margin: 0 auto;}
  .swiper-image-container::after {display: none;}

  .swiper-text-container {width: 85%; margin: 0 auto;}
  .swiper-text-container h3 {font-size: 5vw; margin-bottom: 15px;}
  .swiper-text-container p {font-size: 15px;}

  .services-content {width: 100%;}

  .warranty-item {margin-left: 0px!important; padding: 20px 0; line-height: 1.5;}

  .options .custom-pagination .swiper-pagination,.specs .custom-pagination .swiper-pagination {margin-bottom: 0px;}


  .specs .techSwiper {width: 100%;}



  form .flex-row {grid-gap: 0px!important;}
  .form-wrapper {width: 100%;}
  .form-field {width: 100%;}

  .warranty-links {width: 100%;}

  .contact article .flex-row {grid-gap: 0px;}
  .contact article div {width: 100%; padding: 0px;}
  .contact article .flex-row:last-child {margin: 0;}
  .contact article .flex-row:last-child div:last-child {margin: 0;}

  footer {padding: 50px 0;}
  footer article {width: 100%!important;}
  footer h2 {font-size:20px; margin-bottom: 10px;}
  footer h4 {font-size: 20px;}

  .logo-images {width: 100%; justify-content: center; margin: 25px 0;}
  .logo-images img {height: 70px;}

  .logo-images-two{width: 100%; justify-content: center; margin: 25px 0;}
  .logo-images-two img {height: 70px;}

  .copyright article {width: 100%!important; text-align: center;}
  .copyright figure {margin: 20px auto;}
  .copyright article p, .copyright article a {font-size: 10px !important; margin-bottom: 2px;}
  .copyright article:last-child {text-align: center;}

  .values .slide-container {width: 100%; margin-top: 50px;}
  .values .valuesSwiper {width: 100%;}
  .dark .values h2 {font-size: 7vw;}

  .inner.careers article {width: 100%;}

 .copyright {margin-top:0}


  .white #footer-menu {grid-gap: 0px;}
  .white #footer-menu > li {width: 47%;}

  .inner-banner.toitu > a {right: 25px; bottom: 25px;}
  .inner-banner.toitu > a > img {width: 80px;}
  .inner-banner.toitu > a > p {font-size: 11px; padding-top: 5px; margin-top: 5px;}

.toitu-logo-grid.grid {display:block}
.toitu-item {margin-bottom: 20px;}
.toitu-item p {font-size: 12px !important}

}
@media screen and (max-width: 500px) {
  .inner-banner article p {font-size: 2vw !important; line-height: 3.2vw !important;}
}
@media screen and (max-width: 414px) {
  .inner-banner article p {font-size: 2.6vw !important;}
}
@media screen and (max-width: 375px) {

}
@media screen and (max-width: 320px) {

}
