html{scroll-behavior:smooth;box-sizing:border-box;}
*,:before,:after { box-sizing:inherit; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
::-webkit-scrollbar { width: 14px; background-color: #fff; }

::-webkit-scrollbar-thumb {
  border: 2px solid #fff;
  background-clip: padding-box;
  border-radius: 20px;
  background-color: #ff8438;
}



body { 
  margin:0; padding: 0; width: 100%; overflow-x: hidden;
  background-color: #fff; font-size:16px; line-height: 24px; color:#4a4a4a; font-family: 'Roboto', sans-serif;
}

/*  The basics  */
h1,h2,h3,h4,h5{ font-family: 'Roboto', sans-serif; padding:0; margin:0; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; }
h1 { font-size:1.8vw; color:#4b4b4b; font-weight:700; letter-spacing: -1px; line-height:2.3vw; }
h2 { font-size:1.3vw; color:#4b4b4b; font-weight:200; letter-spacing: 1px; line-height:1.8vw }
h3 { font-size:0.9vw; color:#4b4b4b; font-weight:900; line-height:1.3vw; letter-spacing: 0px; }
h4 { font-size:0.6vw; color:#fff; font-weight:900; letter-spacing: 2px; }

p { font-size:18px; line-height:28px; font-weight:300; letter-spacing:0px; margin: 3% 0px; }
a { color:#111; text-decoration:underline; transition: .2s; font-weight: bold;}
a:hover { color:#252a32; text-decoration-color: #eec400; }

/*------------------------------*\
    Grid System
\*------------------------------*/

.gridrow, 
.gridcolumn { box-sizing: border-box; }
.gridrow:before,
.gridrow:after { content: ""; display: table;}
.gridrow:after { clear: both; }
.gridcolumn { position: relative; float: left; display: block; }

.gridcolumn + .gridcolumn { margin-left: 0%; }
.gridcolumn-1, .gridcolumn-1x { width: calc( 100% / 12 * 1 ); }
.gridcolumn-2, .gridcolumn-2x { width: calc( 100% / 12 * 2 ); }
.gridcolumn-3, .gridcolumn-3x { width: calc( 100% / 12 * 3 ); }
.gridcolumn-4, .gridcolumn-4x { width: calc( 100% / 12 * 4 ); }
.gridcolumn-5aria, .gridcolumn-5ariax { width: 20%; }
.gridcolumn-5, .gridcolumn-5x { width: calc( 100% / 12 * 5 ); }
.gridcolumn-6, .gridcolumn-6x { width: calc( 100% / 12 * 6 ); }
.gridcolumn-7, .gridcolumn-7x { width: calc( 100% / 12 * 7 ); }
.gridcolumn-8, .gridcolumn-8x { width: calc( 100% / 12 * 8 ); }
.gridcolumn-9, .gridcolumn-9x { width: calc( 100% / 12 * 9 ); }
.gridcolumn-10, .gridcolumn-10x { width: calc( 100% / 12 * 10 ); }
.gridcolumn-11, .gridcolumn-11x { width: calc( 100% / 12 * 11 ); }
.gridcolumn-12 { width: calc( 100% / 12 * 12 ); }


@media only screen and (max-width: 801px) {
  .gridcolumn-1, .gridcolumn-2, .gridcolumn-3, .gridcolumn-4, .gridcolumn-5, .gridcolumn-5aria, .gridcolumn-6, .gridcolumn-7, .gridcolumn-8, .gridcolumn-9, .gridcolumn-10, .gridcolumn-11, .gridcolumn-12 { 
      float: none; width: auto; text-align: center !important; 
    }
  .gridcolumn + .gridcolumn { margin-left: 0; text-align: center !important; }
}


.gridcolumn { border: 0px solid #4affff; padding: 1px; min-height: 0px; }
.gridrow { margin-bottom: 0px;  /* max-width: 1280px; */  margin: 0px auto;}
.gridrow:last-child { margin-bottom: 0; }
.imgx { display: block;  /* margin: 0 auto; Centred */  max-width: 100%; }

@media only screen and (max-width: 801px) {
  .gridrow { margin-bottom: 0px; }
  .gridcolumn { margin-bottom: 0px; text-align: center; }
  .gridrow:last-child .gridcolumn:last-child { margin-bottom: 0px; text-align: center; }
  .imgx { display: block; margin: 0 auto; max-width: 100%; position: relative; }
}




/*Slider*/



.offersSlider { display: block; width: 100%;}
.offersSlide { position: relative; display: block; padding: 0; margin: 0; overflow: hidden; }
.offersSlide .imgx { margin: auto auto 0px auto; }


.heroSlider { display: block; width: 100%; padding-top: 15vh; height: auto; }
.slide { position: relative; display: block; padding: 0; margin: 0; overflow: hidden; }
.slide .imgx { margin: auto auto 0px auto; }


.slick-prev, .slick-next { 
  position: absolute; z-index:50; bottom: 0; right: 0; width: 50px;
  border: 0; display:inline-block; font-size:0; cursor: pointer;
  background-color: transparent;
  transition: 0.3s
}
.slick-prev:hover, .slick-next:hover { transform:scale(0.8); transition: 0.3s }

.slick-prev { left: calc(50% - 50px); }
.slick-next { right: calc(50% - 50px); }
.slick-prev::after { content:url(../images/arrowLeft.png); 
mix-blend-mode: difference !important; }
.slick-next::after { content:url(../images/arrowRight.png);mix-blend-mode: difference !important;}




/*    Lines   */

.line1, .line2, .line3, .line4, .line5, .line6, .line7, .line8, .line9, .line10, .line11 { 
  position:absolute; display:block; width:1px; height: 100vh; top:0;  background-color:rgba(255, 255, 255, 0.7); z-index:90;
  animation-delay: 2s;
}

.line1 { left: 8.33333333333%; animation: lineAnim1 6s infinite ; }
.line2 { left: 16.6666666666%; top: 10vh; height: 90vh;  animation: lineAnim2 5s infinite ;  }
.line3 { left: 24.9999999999%; top: 10vh; height: 90vh; animation: lineAnim2 8s infinite ; }
.line4 { left: 33.3333333333%; animation: lineAnim1 6s infinite ; }
.line5 { left: 41.6666666666%; animation: lineAnim2 8s infinite ; }
.line6 { left: 50%; animation: lineAnim1 3s infinite ; }
.line7 { left: 58.3333333333%; animation: lineAnim2 6s infinite; }
.line8 { left: 66.6666666666%; animation: lineAnim1 7s infinite; }
.line9 { left: 74.6%; animation: lineAnim2 6s infinite ; }
.line10 { left: 83.3333333333%; animation: lineAnim1 8s infinite; }
.line11 { top: 10vh; height: 90vh; left: 91.5333333333%; animation: lineAnim2 5s infinite; }

@keyframes lineAnim1 {
  0% { top:0; height: 0; }
  50% { top:0; height: 100vh; }
  100% {top:100%; height: 0; }
}

@keyframes lineAnim2 {
  0% { top:100%; height: 0; }
  50% { top:0; height: 100vh; }
  100% {top:0; height: 0; }
}








/*  Custom Css  */

.displayDesktop { display:block; }
.displayMobile { display:none; }

#section1 { width: 100%; background-color: #bcc2f4; }
#section2 { 
  width: 100%; 
  background: rgb(188,194,244);
  background: -moz-linear-gradient(180deg, rgba(188,194,244,1) 75%, rgba(255,255,255,1) 75%);
  background: -webkit-linear-gradient(180deg, rgba(188,194,244,1) 75%, rgba(255,255,255,1) 75%);
  background: linear-gradient(180deg, rgba(188,194,244,1) 75%, rgba(255,255,255,1) 75%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bcc2f4",endColorstr="#ffffff",GradientType=1);
}
#section3 { 
  width: 100%; margin-top: 10vh;
  background: rgb(255,255,255);
  background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(188,194,244,1) 50%);
  background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(188,194,244,1) 50%);
  background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(188,194,244,1) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bcc2f4",endColorstr="#ffffff",GradientType=1);
}
#section4 { width: 100%; }
#section5 { width: 100%; padding-top:8vh; }
#section6 { background-color: #fff; padding: 5% 0;}
#section7 { 
  margin: 5% 0; background-color: #fff;
  background: rgb(255,255,255);
  background: -moz-linear-gradient(270deg, rgba(255,255,255,1) 50%, rgba(188,194,244,1) 50%);
  background: -webkit-linear-gradient(270deg, rgba(255,255,255,1) 50%, rgba(188,194,244,1) 50%);
  background: linear-gradient(270deg, rgba(255,255,255,1) 50%, rgba(188,194,244,1) 50%);
}
#section8 { background-color: #f5f5f5; }


.customButton {
  position: relative; display: inline-block;
  padding: 10 35;
  font-size: 12px; color: #fff; font-weight: 900;
  background-color: #ff8438;
  border-radius: 50px; transition: 0.3s; cursor: pointer;
}
.customButton:hover {
  color: #fff; background-color: #ffaa35; border-radius: 0px;
}



/*mobile nav*/

.burgerIcon { display: none; text-align: right; margin: 10px 15px 10px 0; font-size: 22px; color: #fff; }

.mobileSocial .fa { display: inline-block; padding: 10px; font-size: 20px; color: #fff; margin-top: 60px; }
.screenMenu {
  position: fixed; z-index: 100; display: table; width: 100vw; height: 100vh; margin-top: -110vh;
  background-color: #bcc2f4; color: #fff; backdrop-filter: blur(3px);
}
.screenMenu span { display: table-cell; width: 100%; vertical-align: middle; text-align: center;  }

.screenMenu a { 
  display: block; text-align: center; padding: 3% 0px; 
  letter-spacing: 0; color: #fff; text-decoration: none; font-size: 2.7vh; transition: 0.3s; 
}
.screenMenuInner a:hover { letter-spacing: 3px; color: #eaff37; }

.mobileSocial { position: absolute; display: block; width: 100%; bottom: 5%; z-index: 100; color: #000; text-align: center; }
.mobileSocial a { display: inline; padding: 10px; font-size: 26px !important; }



/*nav*/

.navigation { 
  position: fixed; z-index: 100; width: 100vw; height: 15vh; background-color: #bcc2f4; overflow: hidden; transition: 0.5s; 
}


.navigation_left { background-color: #fff; width: 40%; height: 100%; float: left;  }
.navigation_logo { position: relative;  padding: 4% 2%; max-width: 100% }
.navigation_phone { height: 60%; margin: 10% 5%; padding: 05%; border-left: solid 3px #bcc2f4; font-size:0.7vw; }

.navigation_right {  width: 60%; height: 100%; float: right; }
.navigation_right i { font-size: 1.2vw; color: #fff; display:block; }
.navigation_right .gridcolumn { height: 100%; }
.navigation_icons { padding: 3% 6%; transition: 0.5s; }
.navigation_icons h2 { font-size: 1.3vw; display:inline-block; color:#fff; }


.navigationBurger i { 
  position: absolute; display: block; 
  top: 50%; left: 50%; transform: translate(-50%, -50%); 
  margin: 0; padding: 10px 13px; border-radius: 50px;
  cursor: pointer; transition: 0.3s;
}
.navigationBurger i:hover { background-color: #fff; color: #ff8135 }



/*nav on scroll*/

.navigationScroll { height: 7vh; }

.navigation_logoScroll { padding: 0 40% 0 0; transition: 0.3s; }
.navigation_phoneScroll { height: 100%; margin: 0 5%; padding: 1% 3%; border-left: solid 3px #bcc2f4; font-size:11px; }

.navigation_rightScroll i { font-size: 1.1vw; color: #fff; margin: 0 10px 0 0; display:inline-block; }
.navigation_iconsScroll h2 { font-size: 1.1vw; display:inline-block; color:#fff; }
.navigation_iconsScroll { padding: 1% 3%; }

.navigationBurger i { 
  position: absolute; display: block; 
  top: 50%; left: 50%; transform: translate(-50%, -50%); 
  margin: 0; padding: 10px 13px; border-radius: 50px;
  cursor: pointer; transition: 0.3s;
}
.navigationBurger i:hover { background-color: #fff; color: #ff8135 }




.navigationMobile { 
  position: fixed; z-index: 100; width: 100vw; height: 9vh; background-color: #bcc2f4; overflow: hidden; transition: 0.5s; 
}
.navigation_logo_mobile { position: relative;  padding: 5px ; max-width: 100%; background-color: #fff; }
.navigation_phone_mobile { 
  background-color: #fff; height: 100%; padding: 10px 0; 
  border-left: solid 3px #bcc2f4; font-size:4vw; 
  letter-spacing: -1px; line-height: 16px;  
}
.navigationBurgerMobile i { 
  position: relative;
  padding: 5px 7px ; margin-top: 10px; border-radius: 50px;  color: #fff;
  cursor: pointer; transition: 0.3s;
}





/*    Intro   */

.aboutColumn { background-color: #fff; min-height: 200px; }
.aboutBox { padding: 8% 1% 6% 1%; }
.aboutBox img { margin-left: -12%; }
.aboutBox hr { border: 1px solid #ff8135; width: 30%; margin: 10% 0; }


.whyChooseUs { padding: 5%; }
.whyChooseUs i { 
  position: relative; display: block; 
  width: 70px; height: 70px; margin: 0 20px 20px 0;
  font-size: 28px; line-height: 70px; text-align: center; 
  color: #fff; border-radius: 50px;
}



/*    Offers    */

.offersSlideLeft { 
  padding: 2%; 
  background-image: url(../images/offers_txt_bgrd.png); 
  background-size: auto 100%; 
  background-position: 100% 0; 
  background-repeat: no-repeat; 
}
.offersSlideRight { padding: 8%; background-color: #bcc2f4; min-height: 50vh; color: #fff; }
.offersSlideRight h1, h4 { color: #fff;}
.offersSlideRight p { color: #fff; font-weight: 400; margin-bottom: 2%; }
.offersSlideRight hr { border: 1px solid #fff; width: 30%; margin: 10% 0; }


.expBgrd {
  min-height: 100vh;
  background-image: url(../images/exp_bgrd.jpg); 
  background-size: cover; 
}
.expTopLeft { padding: 4%; }
.expTopLeftL1 { color: #fff; }
.expTopLeftL2 { color: #fff; font-size: 4.5vw; line-height:4.5vw; }
.expTopLeftL3 { color: #fff; font-weight: 100; font-size: 1.3vw; line-height:1vw; }
.expTopRight { padding: 5%; background-color: #bcc2f4; color: #fff; }



.catalogueHome { position: relative; display: block;
  -webkit-box-shadow: 0px 22px 48px 2px rgba(0,0,0,0.24);
  -moz-box-shadow: 0px 22px 48px 2px rgba(0,0,0,0.24);
  box-shadow: 0px 22px 48px 2px rgba(0,0,0,0.24);
  background-color: #fff;
}
.catalogueLeft { background-color: #fff; padding: 10px; margin-top: -12vh; }
.catalogueLeft img { margin: -4vh 0 0 -2vw; }
.catalogueRight { background-color: #fff; padding: 4% 2%; margin-top: -12vh;  }


.catalogueTitle { text-align:center;  }


.catalogColumns1, .catalogColumns2, .catalogColumns3, .catalogColumns4 { 
  height: 250px; overflow: hidden; background-size: cover; 
}
.catalogColumns1 { background-image: url(../images/cat_calbari.jpg) }
.catalogColumns2 { background-image: url(../images/cat_das.jpg) }
.catalogColumns3 { background-image: url(../images/cat_sattler.jpg) }
.catalogColumns4 { background-image: url(../images/cat_tencate.jpg) }

.catalogColumnsInnerLogo {
  position: absolute; display: block;
  bottom: 2%; left: 6%;
}

.catalogColumnsInner {
  position: absolute; display: block;
  width: 100%; height: 100%;
  color: #fff; background-color: rgba(0, 0, 0, .6);
  margin-top: 100%; padding: 7%;
  transition: 0.5s;
}
.catalogColumnsInner h2 { color: #fff; }
.catalogColumns1:hover .catalogColumnsInner, .catalogColumns2:hover .catalogColumnsInner, .catalogColumns3:hover .catalogColumnsInner, .catalogColumns4:hover .catalogColumnsInner {
  margin-top: 0;
  transition: 0.3s;
}


.numbersDiv {
  padding: 3%; text-align: center;
  font-size: 5vw; line-height: 6vw;
  font-weight: 900;
  background: url(../images/cat_sattler.jpg) 0 0 / cover no-repeat;
  filter: invert(68%) sepia(89%) saturate(224%) hue-rotate(198deg) brightness(99%) contrast(93%);
  color: #de466c;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.showcase {}
.showcaseLeft {  }
.showcaseLeft h1 { font-size: 1.5vw; color: #fff; padding: 4vw 0; }

.showcaseRight { padding: 0 2%; }
.showcaseRightFrame {
  position: relative; display: block;
  padding: 10%; margin: 0;
  background-color: #fff;
  border: solid 15px #ffaa35;
}
.showcaseRightFrame ul { font-size: 0.8vw; padding: 2vw 0; list-style: none; font-weight: 400; }
.showcaseRightFrame ul li { list-style: none; font-weight: 400; }

.showcaseRightFrame ul li::before {
  content: "\2014";
  color: #ffaa35;
  font-weight: bold;
  display: inline-block;
  width: 1em; /* Also needed for space (tweak if needed) */
  margin: 1em 0.5em 0 0em; /* Also needed for space (tweak if needed) */
}


.footerColumnLeft { padding: 1% 1%; }
.footerColumn { padding: 1.7% 2%; }
.afterFooter { font-size:12px; padding: 5px; background-color: #bcc2f4; color: #fff;}
.afterFooter a { font-size:12px; padding: 5px; background-color: #bcc2f4; color: #fff;}
















@media only screen and (max-width: 801px) {
  .displayDesktop { display: none; }
  .displayMobile { display: block; }

  ::-webkit-scrollbar { width: 0px; }
  body { border: solid 0px; }

  h1 { font-size:7.3vw; letter-spacing: -2px; line-height:7.9vw; }
  h2 { font-size:7vw; letter-spacing: 0px; line-height:9vw; }
  h3 { font-size:5vw; letter-spacing: -1px; line-height:6vw; }
  h4 { font-size:4vw; letter-spacing: 1px; line-height:5vw; }





/*    Intro   */

.aboutBox { padding: 2%;  }
.aboutBox p { font-size:14px; padding: 8% 10% 6% 10%; }
.aboutBox img { margin-left: 0%; }
.aboutBox hr { border: 1px solid #ff8135; width: 30%; margin: 3% 0; }



/*    Offers    */




.expTopLeft { padding: 10% 4%; }
.expTopLeftL1 { color: #fff; font-size: 12vw;}
.expTopLeftL2 { color: #fff; font-size: 16vw; line-height:16vw; }
.expTopLeftL3 { color: #fff; font-weight: 100; font-size: 7.7vw; line-height:7vw; }




.catalogueLeft { background-color: #fff; padding: 0px; margin-top: -5vh; margin-bottom: 15vh }
.catalogueLeft img { margin: -6vh 0 0 -2vw; }
.catalogueRight { background-color: #fff; padding: 4% 2%; margin-top: -12vh;  }




.numbersDiv {
  padding: 10%; text-align: center;
  font-size: 17vw; line-height: 6vw;
  font-weight: 900;
  background: url(../images/cat_sattler.jpg) 0 0 / cover no-repeat;
  filter: invert(68%) sepia(89%) saturate(224%) hue-rotate(198deg) brightness(99%) contrast(93%);
  color: #de466c;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.showcase {}
.showcaseLeft {  }
.showcaseLeft h1 { font-size: 9.5vw; color: #fff; padding: 4vw 0; }

.showcaseRight { padding: 0 2%; }
.showcaseRightFrame {
  position: relative; display: block;
  padding: 10%; margin: 0;
  background-color: #fff;
  border: solid 15px #ffaa35;
}
.showcaseRightFrame ul { font-size: 4vw; padding: 2vw 0; list-style: none; font-weight: 400; }
.showcaseRightFrame ul li { list-style: none; font-weight: 400; }

.showcaseRightFrame ul li::before {
  content: "\2014";
  color: #ffaa35;
  font-weight: bold;
  display: inline-block;
  width: 1em; /* Also needed for space (tweak if needed) */
  margin: 1em 0.5em 0 0em; /* Also needed for space (tweak if needed) */
}


.footerColumnLeft { padding: 1% 1%; }
.footerColumn { padding: 1.7% 2%; }
.afterFooter { font-size:12px; padding: 5px; background-color: #bcc2f4; color: #fff;}
.afterFooter a { font-size:12px; padding: 5px; background-color: #bcc2f4; color: #fff;}








}