/* Theme Name: Beck & Caul Theme URI: http://www.beckandcaul.co.nz Author: Beck & Caul Version: 1.0 */ /* Proxima Nova Regular font-family: "proxima-nova", sans-serif; font-weight: 400; font-style: normal; Proxima Nova Regular It font-family: "proxima-nova", sans-serif; font-weight: 400; font-style: italic; Proxima Nova Bold font-family: "proxima-nova", sans-serif; font-weight: 700; font-style: normal; Proxima Nova Bold It font-family: "proxima-nova", sans-serif; font-weight: 700; font-style: italic; */ :root{ --orange: #FF711F; --dark: #262929; --black: #000; --gray: #F2F2F2; --light: #F8F8F8; --white: #ffffff; } .lightbg{ background: var(--light); } .orangetext{ color:var(--orange); } .center{ text-align:center; } .letterspacing{ letter-spacing: 8.82px; text-transform: uppercase; } /* =Reset default browser CSS. -------------------------------------------------------------- */ input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } html, body { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; color: var(--dark, #000); font-family: proxima-nova, sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 1.67em; /* 166.667% */ } input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 0 white inset !important; } /*Change text in autofill textbox*/ input:-webkit-autofill {-webkit-text-fill-color: #020202 !important;-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;} @-webkit-keyframes autofill { to { color: #FFF; background: #383838; } } input:-internal-autofill-selected, input:-webkit-internal-autofill-selected {appearance: menulist-button;background-color: rgb(101 101 101) !important;background-image: none !important;color: -internal-light-dark(black, white) !important;} html, body {position:relative;/* overflow-x:hidden; */width:100%;height: 100%;} p {margin-bottom: 25px;} h1, h2, h3, h4, h5, h6 { font-optical-sizing: auto; clear: both; /* font-weight: normal; */ line-height:1.2em; margin: 0; padding: 0; } h1{ font-size:4.375rem; } h2{ font-size:2.78rem; line-height:1.2em} h3{font-size: 2.22rem;} h4{ font-size:1.875rem;} h5{ font-size:1.6667rem; } img{ max-width:100%;} ol, ul{ margin-left:20px; padding-left:5px; } ol li{ padding-bottom:20px; } blockquote { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } tr.orangebg td{ background:var(--orange); color:white; } img.alignright {float:right; margin:0 0 1em 1em} img.alignleft {float:left; margin:0 1em 1em 0} img.aligncenter {display: block; margin-left: auto; margin-right: auto} a img.alignright {float:right; margin:0 0 1em 1em} a img.alignleft {float:left; margin:0 1em 1em 0} a img.aligncenter {display: block; margin-left: auto; margin-right: auto} .logo{ position:absolute; left: 53px; top: 50%; transform: translateY(-50%); height: 75PX; width: 240px; background: url(img/logo.png); background-size:contain; background-repeat:no-repeat; /*-webkit-mask-image: url(img/logo-c.svg);mask-image: url(img/logo-c.svg); background: white; -webkit-mask-size: contain;mask-size: contain; -webkit-mask-repeat: no-repeat;mask-repeat: no-repeat; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; */ } a:hover, a:link, a:visited{ color:black; text-decoration:none; } a.button{display:inline-block;padding:10px 58px 10px 37px;border-radius: 50px; background: /* paint3: white highlight top-right, 30% layer opacity */ radial-gradient(ellipse at 96.59% 31.25%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%), /* paint2: yellow-green bottom-left */ radial-gradient(ellipse at 5.68% 100%, rgba(246, 251, 34, 0.51) 0%, rgba(255, 158, 69, 0.00) 100%), /* paint1: pink/coral centre-top, 60% layer opacity applied to stops */ radial-gradient(ellipse at 32.95% 0%, rgb(231 74 74 / 55%) 21.25%, rgb(217 111 34 / 34%) 88.62%), /* paint0: main orange base */ radial-gradient(ellipse at 94.89% -132.81%, #FF7A00 86.02%, rgba(255, 199, 0, 0.38) 100%), linear-gradient(#FFF500, #FFF500); box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.60) inset, 0 0 10px 0 rgba(211, 70, 155, 0.40), 0 5px 6px 0 rgba(174, 113, 41, 0.50); color: #FFF;font-size: 16px;font-style: normal;font-weight: 400;line-height: 30px;letter-spacing: 3.2px;text-transform: uppercase;cursor:pointer;position: relative;} .arrowbutton:after{content:"";display:block;width: 18px;height: 18px;position:absolute;background:#fff;-webkit-mask-image:url(img/arrow-button.svg);mask-image:url(img/arrow-button.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;right: 27px;top: 16px;} .arrowbutton:hover:after{ transform:rotate(45deg); } .arrowbutton.downloadbutton:after{ -webkit-mask-image:url(img/download.svg); mask-image:url(img/download.svg); } .arrowbutton.downloadbutton:hover:after{ transform:rotate(0deg); } a.button:hover{ box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.60) inset, 0 0 30px 0 rgba(211, 70, 155, 0.40), 0 5px 16px 0 rgba(174, 113, 41, 0.50); } .acf-map { width: 100%; height: 300px; border: #ccc solid 1px; margin: 20px 0; } #sending, #sent{display:none;} input, select, textarea{box-sizing: border-box; font-family: inherit; font-size:inherit; } #savetarget{ padding: 0; margin: 0; border: 0; display: block; width: 0; height: 0; } .ninesixty{ width:100%; max-width:1300px; position:relative; margin:0 auto; box-sizing:border-box; } .site-main {background:#FFF;padding:80px;top:-180px;z-index: 9;} .clear{clear:both;} .cl5{ height:5px;} .cl10{ height:10px;} .cl20{height:20px;} .cl30{height:30px;} .cl40{height:40px;} .cl50{height:50px;} .cl60{height:60px;} .cl70{height:70px;} .cl80{height:80px;} .cl90{height:90px;} .cl100{height:100px;} .smartphoneonly{ display: none; } div, input, span, svg, a.button, nav *, *:after, a, img{ transition:all 0.5s ; -webkit-transition:all 0.5s ; -o-transition:all 0.5s ; -moz-transition:all 0.5s } .mapdiv, .mapdiv div, div#map, #map div, .about_image{ transition:all 0s ; -webkit-transition:all 0s ; -o-transition:all 0s ; -moz-transition:all 0s } ::selection { background: #fec067; /* WebKit/Blink Browsers */ color:#FFF; } ::-moz-selection { background: #fec067; /* Gecko Browsers */ color:#FFF; } body { opacity: 0; transition: opacity 0.5s ease-in; } /* Fade in on page load */ body.page-loaded { opacity: 1; } /* Fade in on page load */ body.page-loaded { opacity: 1; background: #e9e9e9; } body.page-unload { opacity: 0; transition: opacity 0.5s ease-out; } /*LENTIS */ .animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animate-on-scroll.fade-in { opacity: 1; transform: translateY(0); } /*Parallax image*/ .pscene{height:694px;width:100%;display:block;overflow: hidden;} .parallax_image{ display:block; width:100%; height:100%; overflow:hidden; background-size: cover !important;background-position: 50% !important;} /*WAYPOINT DISAPPEAR*/ .disappear{ transform:scale(0.97); opacity:0; } .disappear_cta{ transform:scale(0.87); opacity:0; } .disappear_cta .ninesixty{ margin-top:70px; } .wp-block-columns { margin: 20px 0;} .wp-block-column {margin: 0 0 0 40px;} .wp-block-columns { display: flex;} .wp-block-column {flex: 1;text-align: justify;} .wp-block-image{ width:1300px; position:relative;left:-80px; } .content{ display: block; width: 100%; height: 100%; } .content_block{width:100%;max-width: 1740px;position:relative;margin:0 auto;box-sizing:border-box;} div, input, span, svg, a.button, nav, .mobilemenu_button:before, .mobilemenu_button:after, label{ transition:all 0.5s ; -webkit-transition:all 0.5s ; -o-transition:all 0.5s ; -moz-transition:all 0.5s } .mapdiv, .mapdiv div, div#map, #map div, .about_image, .parallax_image, .parallax_image *, .nzfoam-map-wrap, .nzfoam-map-wrap *{ transition:all 0s ; -webkit-transition:all 0s ; -o-transition:all 0s ; -moz-transition:all 0s } .parallax-mirror, .parallax-mirror *{ transition:all 0s ; -webkit-transition:all 0s ; -o-transition:all 0s ; -moz-transition:all 0s } .parallax_image img{height:auto !important;} .nodisp{ display:none !important; } .wp-block-columns { margin: 20px 0;} .wp-block-column {margin: 0 0 0 40px;} .wp-block-columns { display: flex;} .wp-block-column {flex: 1;text-align: justify;} .wp-block-image{width: 100%;max-width: 1300px;position:relative;left: 0;margin: 0 auto;text-align: center;} .testimonial_slider{ padding:230px 0; background-size: cover !important;background-position: 50% !important; position:relative; } .testimonial_slider:before{ content:"";display:block;width:100%;height:100%;position:absolute;background: rgba(0,0,0,0.25);z-index:1;top: 0; } .testimonial_slider .testimonials_wrapper{ z-index:9999; position:relative; } .testimonials_title{font-size:2.5rem;text-align:center;font-weight:800;text-transform:unset;margin-bottom: 43px;} .testimonial_slider .flexslider, .testimonial_slider .flexslider .slides > li{ background:transparent; } .testimonials_wrapper{ background:#FFFFFF93 0% 0% no-repeat padding-box; padding:170px 0 120px;} .testimonial_slider .slides{ max-width:1053px; margin:0 auto; } .testimonial_slider li *{ font-family:'Gilroy'; text-align:center; font-size:1.1rem; line-height:1.5rem;} .testimonial_slider .flex-control-nav{ display:none;} /*POSTS*/ .post_content_wrapper{padding: 180px 0 0;} .post_content_gallery_swiper{ width:100%; overflow:hidden; } .post_content_gallery_swiper img{display:block;width:100%;aspect-ratio: 1/0.7;object-fit:cover;object-position:center;} .post_content_gallery_swiper .swiper-wrapper *{/* width:100%; *//* height:100%; */} .post_content_grid{display:grid;grid-template-columns:1fr 449px;grid-gap:98px;max-width: 1520px;margin: 0 auto; padding-bottom:100px;} .post_content_main{column-count:2;column-gap:34px;padding: 50px 0 0px;} .post_content_main a{ color:var(--orange); } .one-column .post_content_main{ column-count:1; } .post_content_main strong{ color:var(--orange)} .post_content_main img{ display:block; width:100%; height:auto; object-fit:contain;} .post_content_main p{padding:0 0 30px 0;margin: 0;} .related_articles{ background:var(--light); border-radius:25px; padding:32px 29px} .related_articles li{ list-style:none; padding:0 0 20px 0; margin:0; } .related_articles li a{display:grid;grid-template-columns:153px 1fr;grid-gap:20px;font-weight: bold;} .related_articles li img{ width:100%; aspect-ratio:1/.65; object-fit:cover; object-position:center; border-radius:10px;} .related_articles ul{ margin:0; padding:20px 0 0 0; } @media (max-width: 1820px) { .post_content_wrapper{ padding:140px 50px} } @media (max-width: 1024px) { .post_content_wrapper{ padding:100px 30px} } @media (max-width: 767px) { .post_content_wrapper{ padding:50px 20px} } /*FLEXSLIDER*/ .captionbg{width:100%;height:140px;position:absolute;bottom:0;background:rgba(0,0,0,.3);display:block}.headerbottomimg{width:100%;height:70px;background:url(../../img/header_bottomimg.png);z-index:1;position:absolute;bottom:0;left:0;display:none}.flex-container a:active,.flexslider a:active{outline:0}.flex-control-nav,.flex-direction-nav,.slides{margin:0;padding:0;list-style:none}.flexslider{width:100%;border-top:180px solid #000;height:100%;overflow:hidden;margin:0;padding:0;box-sizing:border-box;display:block;background:#fff;border:0;position:relative;zoom:1}.flexslider .slides>li{display:block;box-sizing:border-box;position:relative;width:100%;height:455px;background:#ddd}.flexslider .slides img{width:100%;display:block;box-sizing:border-box}.flex-pauseplay span{text-transform:capitalize;display:block;box-sizing:border-box}.slides:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}html[xmlns] .slides{display:block}* html .slides{height:1%}.no-js .slides>li:first-child{display:block}.flexslider .slides{zoom:1;width:100%;height:100%}.flex-container{zoom:1;position:relative}.flex-caption{background:0 0;zoom:1;width:860px;position:relative;right:20%;top:30px;color:#fff;font-size:18px;line-height:18px;box-sizing:border-box;font-weight:600}.flex-bigcaption{width:860px;position:relative;left:50%;margin-left:-430px;color:#fff;font-size:34px;line-height:34px;box-sizing:border-box;font-weight:200;display:table;height:140px}.flex-bigcaption span.htext{color:#fff;font-size:inherit;line-height:inherit;display:table-cell;vertical-align:middle;height:140px;cursor:pointer;padding-right:40px}.flex-bigcaption span.hbutton{cursor:pointer;color:inherit;font-size:18px;text-align:center;position:absolute;right:-40;bottom:50px;margin-top:25px;line-height:20px;width:100px;padding:5px 20px}.flex-direction-nav li a{width:52px;height:52px;margin:-13px 0 0;display:block;background:url(js/flexslider2/theme/bg_direction_nav.png) no-repeat;position:absolute;top:50%;cursor:pointer;text-indent:-9999px;color: transparent;}.flex-direction-nav li .next{background-position:-52px 0;right:20px}.flex-direction-nav li .prev{left:0}.flex-direction-nav li .disabled{opacity:.3;cursor:default}.flex-control-nav{width:100%;position:absolute;bottom:10px;text-align:center}.flexslider-carousel .flex-control-nav{bottom:25px}.flex-control-nav li{margin:0 0 0 5px;display:inline-block;zoom:1}.flex-control-nav li:first-child{margin:0}.flex-control-nav li a{width:13px;height:13px;display:block;background:url(theme/bg_control_nav.png) no-repeat;cursor:pointer;text-indent:-9999px}.flex-control-nav li a:hover{background-position:0 -13px}.flex-control-nav li a.active{background-position:0 -26px;cursor:default}.flex-control-paging li a{width:11px;height:11px;display:block;background:rgba(255,255,255,.5);cursor:pointer;text-indent:-9999px;z-index:999;border-radius:50%;position:relative;box-shadow:0 0 10px 2px rgba(0,0,0,.3)}.flex-control-paging li a:hover{background:rgba(0,0,0,.7)}.flex-control-paging li a.flex-active{background:#fff;cursor:default;border-radius:50%}.flex-direction-nav a{text-decoration:none;display:block;width:40px;height:40px;margin:-20px 0 0;position:absolute;top:50%;z-index:10;overflow:hidden;opacity:0;cursor:pointer;color:rgba(0,0,0,.8);text-shadow: unset;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out;}.flex-direction-nav a:before{font-family:flexslider-icon;font-size:40px;display:inline-block;content:'';color:rgba(0,0,0,.8);text-shadow:1px 1px 0 rgba(255,255,255,.3)}.flex-direction-nav a.flex-next:before{content:''}.flex-direction-nav .flex-prev{left:-50px}.flex-direction-nav .flex-next{right:-50px;text-align:right;background-position:-56px 0;content:''}.flexslider:hover .flex-direction-nav .flex-prev{opacity:.7;left:10px}.flexslider:hover .flex-direction-nav .flex-prev:hover{opacity:1}.flexslider:hover .flex-direction-nav .flex-next{opacity:.7;right:10px}.flexslider:hover .flex-direction-nav .flex-next:hover{opacity:1}.flex-direction-nav .flex-disabled{opacity:0!important;cursor:default}.flex-pauseplay a{display:block;width:20px;height:20px;position:absolute;bottom:5px;left:10px;opacity:.8;z-index:10;overflow:hidden;cursor:pointer;color:#000}.flex-pauseplay a:before{font-family:flexslider-icon;font-size:20px;display:inline-block;content:''}.flex-pauseplay a:hover{opacity:1}.flex-pauseplay a.flex-play:before{content:''}@media only screen and (max-width:960px){.flex-caption{width:70%;position:relative;right:10%;top:30px;color:#fff;font-size:18px;line-height:18px;box-sizing:border-box;font-weight:600}.flex-bigcaption{width:70%;position:relative;left:50%;margin-left:-40%;color:#fff;font-size:24px;line-height:24px;box-sizing:border-box;font-weight:200;display:table;height:140px}.flex-bigcaption span.htext{color:#fff;font-size:inherit;line-height:inherit;display:table-cell;vertical-align:middle;height:140px;cursor:pointer;padding-right:40px}.flex-bigcaption span.hbutton{cursor:pointer;color:inherit;font-size:18px;text-align:center;position:absolute;right:-40;bottom:50px;margin-top:25px;line-height:20px;width:100px;padding:5px 20px}}@media only screen and (max-width:768px){.flexslider{border-top:0 solid #000;/* height:480px */}.flexslider .slides>li{position:relative;width:100%;height:480px;background:#ddd;}}@media only screen and (max-width:600px){.flexslider, .header_slider{border-top:0 solid #000;/* height:480px; */}} .flex-viewport{ height:100%; } /*TEXT PAGE*/ .header_image{height:325px;width:100%;display:block;margin-top: 180px;background-size: cover !important;background-position: 50% !important;} .centeraligned{ text-align:center; width:100%; display:block; } .map{width:100%;height: 800px; margin-bottom:85px; } /*CONTACT*/ #sending, #sent{display: none;} #sending img{ display:none;} #sending center{ width: 50px;height: 50px; margin: 0px auto 0; border:solid 10px #abb6bc; border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent; -webkit-transition: all 0.5s ease-in; -webkit-animation-name: rotate; -webkit-animation-duration: 1.0s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; transition: all 0.5s ease-in; animation-name: rotate; animation-duration: 1.0s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } #formdiv{ display:block; margin:0 auto; max-width:800px; } .contact_content{ margin:70px 0; } .fieldgroup{position:relative;display:block;margin-top: 20px;} .fieldgroup input, .fieldgroup textarea{ display:block; width:100%; background:transparent; border:0; border-bottom:1px solid; height:20px; position:relative; } .fieldgroup textarea{height: 115px;} .fieldgroup input[type="submit"]{background:#FFF;color: #000 !important;text-align:center;text-transform:uppercase;height:36px;line-height:36px;cursor: pointer;} .fieldgroup input[type="submit"]:hover{ background:#585757; color:#fff !important; border-bottom:1px solid #585757; } .g-recaptcha{ margin:20px 0; } .animatelabel{ position:relative; } .fieldgroup label{display:block;position:absolute;font-size:10px;top:0;left:0px;line-height: 16px;} .twocol{ display:grid; grid-template-columns:repeat(2,1fr); position:relative; grid-gap:20px; } .animatelabel label{font-size: 13px;line-height:30px;top: -7px;} .animatelabel .has-content ~ label, .animatelabel input:focus ~ label, .animatelabel textarea:focus ~ label {top: -23px;color:#afafaf !important;font-size: 13px;} /*MENU*/ .site-header{z-index:99999;position:fixed;display:block;width: 100%;top: 0;background: transparent;height: 120px;box-shadow: 0 0 0 0;border-top: 5px solid #FF7A00;opacity: 0.96;background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 100%), rgba(255, 255, 255, 0.20);background-blend-mode: normal, overlay;backdrop-filter: blur(7px);background: linear-gradient(90.18deg, #FFFFFF 20.09%, rgba(255, 255, 255, 0) 36.03%);} .main_navigation{position:absolute;right:68px;top: 50%;transform: translateY(-50%);} nav a, nav a:hover, nav a:link, nav a:visited{font-weight: 700;color: white;font-size: 0.89rem;} nav ul{ list-style:none; } nav .menu li {display:inline-block;padding: 0px 30px;} nav .menu .sub-menu li, nav .menu .sub-menu li:nth-last-of-type(2), nav .menu .sub-menu li:last-of-type{display:block;float: unset;padding: 7px 40px !important;white-space: nowrap;border-radius: 23px;background: rgb(253 112 0 / 0%);text-align: center;} nav .menu .sub-menu li a{font-weight:400;display:block;} /* nav .menu .sub-menu a:before{ content:'\279C'; padding-right:10px; font-size:12px; position:relative; top:-2px; color:#f1f1f1; }*/ nav .menu .sub-menu li:hover{background: rgb(219 101 28 / 60%);} nav .menu li{ position:relative; } nav .menu li.menu-item-has-children:after{content:"";position:absolute;right: 11px;top:50%;transform:translateY(-50%);border-width: 0px 1px 1px 0px;margin-top: -8px;transform: rotate(45deg);display:block;width: 9px;height: 9px;border-style: solid;border-color:#FFF;} nav .menu li:nth-last-of-type(2){ padding-right:0; } nav .menu .sub-menu{display:block;position:absolute;text-align: left;left: 50%;transform: translateX(-50%);margin-left: 0;padding: 0;height: 0 !important;opacity: 0;margin-top: 7px;z-index: -1;max-height: 0;overflow: hidden;} nav .menu .sub-menu:before{content:"";width: 0;height: 0;background: transparent;display:block;position:absolute;top: -13px;left:50%;border-top-left-radius: 7px;border-style: solid;border-width: 0px 11px 13px 11px;border-color: transparent transparent rgb(249 122 5) transparent;transform: rotate(0deg) translateX(-50%);} nav .menu li:hover .sub-menu, nav .menu li.current-menu-ancestor:hover .sub-menu{height: auto !important;padding: 0px 0;opacity: 1;background: rgb(249 122 5);backdrop-filter: blur(6.599999904632568px) !important;padding: 21px;border-radius: 23px;/* -webkit-transition: unset; */z-index: 11;max-height: 1000px;overflow: visible;} nav .menu .sub-menu .sub-menu{display:block;position:absolute;left: 100%;transform: translateX(10px);width: auto;top: -36px;margin-left:-10px;} nav .menu .sub-menu:hover{overflow: unset;} nav .menu li:hover .sub-menu .sub-menu{height: 0 !important;padding: 0; background:#000; } nav .menu .sub-menu li:hover li a{ color:#FFF; } nav .menu .sub-menu li:hover li:hover a{ color:#f1f1f1; } nav .sub-menu li .sub-menu{overflow:auto;height: 0 !important;padding: 0;} nav.navigation .menu li:hover .sub-menu li:hover .sub-menu{overflow:auto;height: auto !important;padding: 20px 12px 0 0px;background: transparent;margin-bottom: 0px;} nav .menu .sub-menu li:last-of-type{ padding-right:30px; } .menu_button{position:absolute;display:none;top: 50px;right:40px;height: 4px;margin-top:10px;margin-bottom:10px;width:50%;max-width:35px;z-index: 999999;cursor: pointer;background:#FFF;} .menu li.menudownload{position:absolute;display:block;right: -5px;bottom: -44px;background:var(--orange);border-radius:20px;padding: 5px 30px;} .menudownload:before{ content:"";background:white;mask-image: url(img/download2.svg);-webkit-mask-image: url(img/download2.svg);-webkit-mask-size:contain;mask-size:contain; display:block; width:20px; height:20px; display:inline-block; position:relative; top:4px; left:-10px;} .nav-down .menu li.menudownload, .nav-up .menu li.menudownload{ bottom:-25px} /*FOOTER*/ .site-footer{background: var(--dark);display:block;padding: 87px 0 235px 0;position:relative;overflow:hidden;} .footeractive:before{content:"";display:block;position:absolute;width:100%;height:100%;top: -10px;background:url(img/animated-line.svg) no-repeat;background-size:contain;background-position: right top;right: 0;} .site-footer, .site-footer *{ color:#FFF !important; } .site-footer input, .site-footer select, .site-footer textarea{box-sizing: border-box; font-family: inherit; font-size:14px; } .footer_block{display:grid;grid-template-columns: 1.2fr 1fr 1fr;grid-gap: 148px;} .footer_left .h3{ font-size:1.68rem; font-weight:600; } .footer_logo{height: 75px;width: 240px;background: url(img/logo.png);background-size: contain;background-repeat: no-repeat;margin-bottom: 60px;} .footer_title{color: #FFF;font-size: 2.77rem;font-style: normal;font-weight: 700; /* 120% */letter-spacing: var(--Static-Display-Medium-Tracking, 0);line-height: 1.1em;max-width: 450px;padding-bottom: 23px;} .site-footer .footer_orange{color: #FF711F !important;font-size:1rem;font-weight: 600;line-height: 30px; /* 166.667% */letter-spacing: 8.82px;text-transform: uppercase;} .footer_middle, .footer_right{ margin-top:135px;} .footer_middle *{ font-size:1.15rem;} .footer_middle span{width:100px;display: inline-block;} .footer_social_links{ display:block; margin-top:30px;} .footer_social_links *{ display:inline-block; } .footer_social_links .icon{ width:20px; height:20px; } .icon.facebook{ -webkit-mask-image:url(img/facebook.svg); mask-image:url(img/facebook.svg); background:white; mask-size:contain; mask-position:center; margin-right:10px;} .icon.youtube{ -webkit-mask-image:url(img/youtube.svg); mask-image:url(img/youtube.svg); background:white; mask-size:contain; mask-repeat:no-repeat; mask-position:center; width:30px; height:30px;; top:6px; position:relative;margin-right:10px;} .icon.linkedin{ -webkit-mask-image:url(img/linkedin.svg); mask-image:url(img/linkedin.svg); background:white; mask-size:contain; mask-repeat:no-repeat; mask-position:center; width:20px; height:20px;; top:0px; position:relative;} .footer_address{ padding-top:30px; max-width:282px;} .footer_right{ text-align:center; } .footer_right .footer_list{text-transform:uppercase;max-width:377px;margin: 29px auto 0;font-size: 1.15rem;font-weight: 700;line-height: 1.5em;} .footerterms{background:var(--dark);text-align:center;font-size:.8rem;color: #FFF;} .footerterms a{display:inline-block;padding: 20px 1px;color:var(--orange) !important;/* opacity:.6; */} /*DEFAULT*/ .site, .content-area{position:relative;display:block;z-index:1;min-height: 100%;height: auto;width: 100%;} .header{top:0;position: fixed;top: 0;z-index: 999999999; width: 100%; } .nav-up, .nav-down {top: 0;/* background: #8f8f8f; *//* box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); */height: 70px;background: linear-gradient(90.18deg, #FFFFFF 20.09%, rgb(102 102 102 / 63%) 80.03%);} .nav-up .logo, .nav-down .logo{height: 50px;} .header_slider{height: 830px;} .header_slider{min-height: 100%;height: 930px;position: relative;display: block;} .header_slider .slides li:after{content:"";display:block;width:100%;height:100%;position:absolute;background: rgba(0,0,0,0.25);z-index:99;top: 0;} .hs_image{height: 100%;background-size:cover !important;background-position:50% !important;display: block;position: relative;width: 100%;} .flexslider .slides > li {position: relative;width: 100%;height: 100%;background: #ddd;} .slider_title{position:absolute;top:50%;transform: translateY(-50%);left: 200px;margin-left: 0;text-align: left;max-width: 870px;z-index: 999;} .slider_title h1{color:#FFF;font-size: 3.9rem;line-height: 1em; font-family:'Gilroy-Bold', 'Arial', sans-serif; } .slider_title h2{color:#FFF;font-size: 1.1rem;line-height: 1rem; padding-top: 15px; font-family:'Gilroy', 'Arial', sans-serif;} .slider_title h2 *{ font-size: 1.1rem;line-height: 1.3em; padding-top: 15px; font-family:'Gilroy', 'Arial', sans-serif; } .header_fade{ position:absolute; bottom:0; width:100%; z-index:99 } .header_fade img{ display:block; width:100%; height: auto; } .flex-control-paging li a{opacity:1;width: 14px;height: 14px;display:block;background: #f1f0f0;content:'';color:#FFF;font-size: 1px;} .flex-control-nav li { margin: 0 0 8px 5px !important; display: inline; clear:both; zoom: 1; float: right; margin-bottom: 5px;} .flex-control-nav {width: 1300px;position: relative;bottom: 30px;text-align: right;margin: 0 auto;z-index: 105;} .flex-control-paging li a.flex-active { background: #ccc; } /*HOME*/ .stickybuttons {position: fixed;top: 73vh;right: -20px;margin-left: auto;width: fit-content;z-index: 999} .stickybuttons.bottom-position { top: calc(100dvh - 140px)} .stickybuttons_wrapper { display: flex; flex-direction: column; gap: 10px} .stickybuttonphone,.stickybuttonemail { width: 200px; padding: 1px 50px; background: var(--orange); border-radius: 50px; position: relative; right: -230px} .stickybuttonphone {width: 140px;} .stickybuttons_wrapper a { color: inherit; line-height: 45px; font-weight: 700} .sticky_icon { position: relative} .sticky_icon:before {content: "";display: block;position: absolute;left: -35px;width: 26px;height: 26px;top: -1px;z-index: 99;background: var(--dark);} .sticky_icon.stphone:before { -webkit-mask: url(img/phone.svg); mask: url(img/phone.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat} .sticky_icon.stemail:before { -webkit-mask: url(img/email.svg); mask: url(img/email.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat} .stickybuttons_wrapper div:hover { right: -155px} .stickybuttons_wrapper div.stickybuttonphone:hover {right: -98px;} /*RESPONSIVE*/ @media only screen and (max-width:1905px){ .site-footer{padding: 87px 20px 235px 20px;} } @media only screen and (max-width:1280px){ html, body{ font-size:17px; } .site-header{ height:100px;} .logo{ height:60px; left:40px;} .main_navigation{ right:40px;} nav .menu li{padding: 1px 4px;} nav .menu li.menu-item-has-children{ padding-right:30px;} } .mobileonly{ display:none; } @media only screen and (max-width:1024px){ nav .menu li.menu-item-has-children:after{content:"";position:absolute;right: 11px;top:50%;transform:translateY(-50%);border-width: 0px 1px 1px 0px;margin-top: -6px;transform: rotate(45deg);display:block;width: 9px;height: 9px;border-style: solid;border-color: var(--dark);} nav a, nav a:hover, nav a:link, nav a:visited{font-weight: 700;color: var(--orange);font-size: 0.89rem;} body, html{max-width:100%; position:relative; } .mobileonly{ display:block; } .desktoponly{ display:none !important;} .content_block{ width:100%;} .footer_logo{ text-align:center; margin:0 auto 40px;} .footer_title, .footer_address{ margin:0 auto;} .footer_middle, .footer_right{ margin-top:50px;} html, body{ font-size:16px; } .site-header{ height:80px; background:linear-gradient(90.18deg, #FFFFFF 20.09%, rgba(255, 255, 255, 0) 66.03%)} .mnavopen .site-header{ background:#dbdbdb; } .mnavopen .site-header .logo{ -webkit-mask-image: url(img/logo.svg);mask-image: url(img/logo.svg); background: var(--orange); -webkit-mask-size: contain;mask-size: contain; -webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;} .header_slider { height: 630px; } .logo{left:20px; height:50px;} nav a, nav a:hover, nav a:link, nav a:visited {text-transform: uppercase;line-height:3rem;font-size: 1.5rem;} .mobilemenu_button{display: block;border-top: 4px solid #FFF;position:absolute;right:20px;top:30px;height:30px;width:60px;z-index: 999;} .mobilemenu_button{right:20px;top: 25px;height:20px;width:40px;} .mobilemenu_button.mbopen:after{transform:rotate(-45deg);width:100%;bottom: 8px;} .mobilemenu_button:before{ content:""; display:block; height:4px; width:100%; top:50%; left:0; background:#FFF; position:absolute; margin-top:-2px; transform-origin:center; } .mobilemenu_button:after{ content:""; display:block; height:4px; width:70%; bottom:-4px; right:0; background:#FFF; position:absolute; margin-top:-2px; transform-origin:center;} .mobilemenu_button.mbopen{border-top: 0 !important;} .mobilemenu_button.mbopen:before{transform:rotate(45deg);background: var(--orange);} .mobilemenu_button.mbopen:after{transform:rotate(-45deg);width:100%;bottom: 8px;background: var(--orange);} .menu-main-navigation-container{padding: 0px 20px 0;} .mainnav{position:fixed;right: 0;top: 80px;display: block;width: 100%;height: calc(100dvh - 80px);background: #f2f2f2;transform: translateX(100%);padding-bottom: 150px;box-sizing: border-box;} .mainnav.mobilmenushow{ transform:translateX(0)} nav .menu li{display:block;clear:both;text-align: left;border-bottom: 1px solid rgba(38, 41, 41, 0.25);margin-bottom:2px;} .menu li.menudownload{position:relative;color: #FFF;max-width:300px;bottom: -20px;right: 0;} .menu li.menudownload a{ color:#FFF} nav.main_navigation.mobilmenushow{opactiy:.97;transform:translateY(0);top: 100px;} .nav-up nav.main_navigation, .nav-down nav.main_navigation{ top:100px; height:calc(100% - 100px); } ul.menu {/* transform: rotate(180deg); */display: block;position: relative;margin: 20px 0 0 0;padding: 0;} ul.menu > li {/* transform: rotate(-180deg); */float: none;} nav .menu .sub-menu { display: block; position: relative; background: rgba(255,255,255,0.5); left: -0; } nav .menu li:hover .sub-menu, nav .menu li.current-menu-ancestor:hover .sub-menu{margin-bottom: 10px;transform: unset;background: unset;margin-top: 0;padding: 0;} nav .menu li.menu-item-has-children:after{ top:15px; } nav .menu li .sub-menu{ display:grid; grid-template-columns:1fr 1fr; } nav .menu .sub-menu li{border:0 !important;text-align:left;padding: 0 0;} nav .menu .sub-menu li a{ color:var(--dark); text-transform:none; font-size:1.3rem;} nav .menu .sub-menu:before{ display:none; } .menucontact{left:20px;position:relative;position:absolute;bottom: 50px;} .menucontact a{ color:black !important; font-size:inherit !important; text-transform:none !important; line-height:1em !important; } .slider_title { left: 20px; } .footer_block{grid-gap:30px;display: flex;justify-content: space-evenly;flex-direction: column;text-align: center;} .site-footer{padding:87px 20px 35px 20px} .footeractive:before{ opacity:.4 } } @media only screen and (max-width:767px){ .desktopandtablet{ display:none; } .mobileonly{display:block;} body, html{ width:100%;} .content_block{ width:100%;} h1{ font-size:4.375rem; } h2{font-size: 1.9rem;line-height:1.2em} h3{font-size: 1.8rem;} h4{ font-size:1.875rem;} h5{ font-size:1.6667rem; } .footer_title{ font-size:1.9rem; } .footer_middle{ text-align:left; max-width:270px; margin:0 auto;} .stickybuttons{top: calc(100dvh - 120px);} a.button{ letter-spacing:2.2px;} .site-header { height: 80px; background: linear-gradient(90.18deg, #FFFFFF 20.09%, rgb(80 80 80 / 60%) 66.03%); } } } @media only screen and (max-width:414px){ } @media only screen and (max-width:360px){ }