/*
Theme Name: Giesen theme
Description: Giesen custom theme
Author: Simplix
Author URI: https://simplix.nl
Template: Avada
Version: 1.0.0
Text Domain:  Giesen
*/

:root{
  --navigation-logo: #111;
  --primary_color: #e80f0f;
}


#wrapper .max-width-contact {max-width:906px;}
#wrapper .max-width-contact h2 {font-size:48px!important}

/* Image */
.image-screen{min-height: 1000px !important;}
.image-screen img{max-width: 885px; aspect-ratio: 1/1;}
/* .arrow{position: relative;}
.arrow::after{content: ''; background-image:url(img/arrow.svg); width:162px; height:165px; display:inline-block;} */

.height-full{height: 80vh; width: auto;}
.height-full img{height: 100%; width: auto;}
.height-full.width-full,
.height-full.width-full img {width: 100%;}

.max-width-720 {max-width:720px!important;}

#main .content-size {max-width:calc(var(--site_width) / 2);}

.fusion-header-sticky-height {height:100px !important}

/*.width-100,.width-100 img{width: 100% !important; object-fit: cover;}*/

#main .black-bg:before {content:''; background:#000; top:-128px; right:0; bottom:-128px; width:9999vw; position:absolute; z-index:-1;}

.white a,
.white{color: #fff;}

.white:hover a,
.white:hover{color: #ffffffaf;}

/* To top  */
#toTop.fusion-top-top-link {width:40px; height:40px; background: rgb(43, 76, 239); border-radius: 0 !important; right: 180px; bottom: 65px; display: flex; align-items: center; justify-content: center; transition: 0.3s transform !important;}
#toTop.fusion-top-top-link:before {content:'\f062'!important; font-family:"Font Awesome 5 Free" !important; font-weight: 900; }
#toTop.fusion-top-top-link:hover {background:rgb(43, 76, 239); transform: scale(1.2);}

/* Curstom cursor */
.custom-cursor {cursor:none;}
.custom-cursor * {cursor:none;}
.custom-cursor a {color:#fff !important; z-index:10!important;}
.custom-cursor-wrapper {width:96px; height:96px; display:flex; align-items:center; justify-self:center; color:#fff; flex-wrap:wrap; border-radius:999px; z-index:9999; background:var(--primary_color); transition:all 150ms ease-out; position:fixed; pointer-events:none; left:0; top:0; transform:translate(calc(-50% + 15px), -50%); cursor:none; opacity:0; pointer-events:none; user-select:none; text-align:center; line-height:1.2;}
.custom-cursor-wrapper.active{ opacity: 1; }
.custom-cursor-wrapper.active.press{opacity: 0.7;}
.custom-cursor-wrapper span {max-width: 52px; text-align:center; margin:0 auto; font-size:18px; font-weight:bold;} 


/* Grid */
.s-section {padding:128px 32px 96px 32px; position:relative; overflow:hidden}
.s-section.overflow-visible {overflow:visible}
.s-row {display:flex; flex-wrap:wrap; margin:0 -32px; position:relative;}
.s-row.center {justify-content:center; align-items:center;}
.s-container {width:100%; max-width:var(--site_width); margin:0 auto; position:relative;}
.s-container.full-width {max-width:100%;}
.s-col {position:relative; padding:0 32px; margin-bottom:32px; z-index:1;}
.s-col-12 {width:100%;}
.s-col-11 {width:91.666%;}
.s-col-10 {width:83.333%;}
.s-col-9 {width:75%;}
.s-col-8 {width:66.666%;}
.s-col-7 {width:58.333%;}
.s-col-6 {width:50%;}
.s-col-5 {width:41.666%;}
.s-col-4 {width:33.333%;}
.s-col-3 {width:25%;}
.s-col-2 {width:16.666%;}
.s-col-1 {width:8.333%}

/* Header wrapper */
.titlebar-wrapper {text-align:center; display:flex; align-items:center; justify-content:center; position:relative; width:100%; padding:64px 32px;}
.titlebar-wrapper .titlebar-background {position:absolute; top:0; left:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;}
/*.titlebar-wrapper .titlebar-background:before {content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #000000; opacity: 0.3;} */
.titlebar-wrapper .titlebar-container {max-width:var(--site_width); position:relative;}
.titlebar-wrapper .titlebar-container h1 {font-size:96px; margin:0; text-align:center; text-transform:none; text-shadow: 0px 0px 54px rgba(0, 0, 0, 0.5)}
.titlebar-wrapper .titlebar-container h3 {font-size:72px; text-align:center; text-shadow: 0px 0px 54px rgba(0, 0, 0, 0.5)}
.titlebar-wrapper .titlebar-footer {display:none;}

.page-id-224 .titlebar-wrapper .titlebar-container h1,
.page-id-65 .titlebar-wrapper .titlebar-container h1,
.page-id-224 .titlebar-wrapper .titlebar-container h3,
.page-id-65 .titlebar-wrapper .titlebar-container h3 {text-shadow: none;}

.titlebar-wrapper.large {min-height:72vh;}
.titlebar-wrapper.large .titlebar-container h1,
.titlebar-wrapper.large .titlebar-container h3 {color:#fff;}
.titlebar-wrapper.large .titlebar-footer {position:absolute; bottom:32px; left:0; width:100%; display:flex; align-items:center; justify-content:center;}
.titlebar-wrapper.large .titlebar-footer .arrow-wrapper {z-index:1; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:3px solid #fff;}
.titlebar-wrapper.large .titlebar-footer .arrow-wrapper i {color: #fff}

/*.home .titlebar-wrapper .titlebar-container {max-width:640px;}*/
/*.home .titlebar-wrapper .titlebar-container h1 {text-transform:uppercase; }*/

/* Navigation  */
/* .fusion-top-header .fusion-header{background-color: transparent !important; box-shadow: none !important; --header_bg_color: transparent; } */
.home .fusion-header-wrapper {border-bottom:1px solid #fff; }
.home .fusion-main-menu > ul > li > a {color:#fff!important;}

.home .fusion-header-wrapper:not(.fusion-is-sticky) .logo svg {--navigation-logo: #fff; }
.fusion-header-wrapper .fusion-logo {display:flex; margin:16px 16px 16px 0; max-height:calc(100px - 32px); max-width:260px; flex: 1;}
.fusion-header-wrapper .fusion-logo img {max-width:260px; max-height:60px;}
/* .fusion-header-wrapper.fusion-is-sticky .logo svg path, */
/* .fusion-header-wrapper.fusion-is-sticky .logo svg text {fill:#000;}   */
.fusion-header-wrapper .fusion-row .fusion-header-has-flyout-menu-content{display: flex; justify-content: space-between; width: 100%; align-items: center;}
.fusion-header-wrapper .fusion-row .fusion-header-has-flyout-menu-content .menu-text{color: #111;}
.home .fusion-header-wrapper:not(.fusion-is-sticky) ul>li>a{color: #111;}
.fusion-header-wrapper ul > li:last-child {padding-right:0!important;}
.fusion-header-wrapper ul > li > a span{transition: text-shadow 0.3s;}
.fusion-header-wrapper ul > li > a:hover span{text-shadow: 0 0 0.8px #000 !important;}
.fusion-header-wrapper ul > li.current-menu-item > a span{text-shadow: 0 0 0.8px #000 !important;}
/* body .fusion-header-wrapper .logo svg path,
body .fusion-header-wrapper .logo svg text {fill:#000;}   */
/* .fusion-header-wrapper .logo svg .color-switch {fill:var(--primary_color)!important;} */


/* Image hotspot */
.image-hotspot-wrapper{ width: 100%; position: relative; display: flex; max-width:var(--site_width); justify-content: center; margin: 0 auto;}
.image-hotspot-wrapper .image-wrapper {max-width: 1200px; position: relative; width: 100%; position: relative; height: 100vh; width: auto;}
.image-hotspot-wrapper .image-wrapper img{width: 100%; height: 100%;}
.image-hotspot-wrapper .image-wrapper::after{background-color: #000000; opacity: 0.3; width: 100%; position: absolute; left: 0; top: 0; height: 100%; content: '';} 
.image-hotspot-wrapper .pointer-container{position: absolute; cursor: pointer; color: #fff; z-index: 1; font-size: 24px;display: flex; align-items: center; justify-content: center;}
.image-hotspot-wrapper .information-wrapper{transition: 0.5s; display: flex; flex-direction: column; justify-content: center; padding: 50px; flex: 1;}
.image-hotspot-wrapper .information-wrapper h3{font-size: 70px; font-weight: 900; margin: 30px 0; position: relative; text-transform: uppercase;}
.image-hotspot-wrapper .information-wrapper h3:after{content: '' ; border-top: 1px solid #000000; width: 80%;display: block; position: absolute; top: -30px;}

.image-hotspot-wrapper .pointer-container{ display: block; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 rgba(255,255,255, 0.4); animation: pulse 2s infinite; }
.image-hotspot-wrapper .pointer-container i{ display: block;}
.image-hotspot-wrapper .pointer-container:hover { animation: none; }

/* Footer */
.fusion-footer p{margin: 8px 0 !important;}
.fusion-footer .fusion-layout-column{margin-bottom: 0;}
.fusion-footer .fusion-imageframe {margin-bottom:32px;}
.fusion-footer .copyright{color: #808080; margin-top: 50px !important;}
.fusion-tb-footer .fusion-fullwidth{padding:64px 32px;}
.fusion-tb-footer .container-full .wpforms-form button{position: absolute; top: -50px; right: 0; }

/* Contact Form  */
#wpforms-35{width: 100%;}
#wpforms-35 .wpforms-field {width: 100%; display: flex; border-bottom: 1px solid #707070; display: flex; align-items: center;}
#wpforms-35 .wpforms-field label {width: 285px;}
#wpforms-35 .wpforms-field input {border:none; height:32px;}
#wpforms-35 .wpforms-field textarea {border:none; height:128px; resize:none;}
#wpforms-35 .wpforms-submit-container button {margin:0 auto; display:flex; background:transparent; font-size:16px; font-weight:bold; border:2px solid #000; padding:12px 32px; line-height:1; transition:.3s;}
#wpforms-35 .wpforms-submit-container button:hover {background:#000; color:#fff;}
#wpforms-form-35 .wpforms-field-container input::placeholder,
#wpforms-form-35 .wpforms-field-container textarea::placeholder,
#wpforms-form-35 .wpforms-submit-container button::placeholder {color: #CCCCCC;}
#wpforms-35 .wpforms-submit-container {padding: 30px 0 0 0;}

#wpforms-117.wpforms-container-full .wpforms-form #wpforms-117-field_8{display: flex; align-items: center; flex-wrap: wrap; gap: 16px;}
#wpforms-117{ width: 100%; max-width: 545px; margin: 0;}
#wpforms-117 .wpforms-submit-container button{border: 1px solid; background: transparent; font-weight: bold;}
#wpforms-117.wpforms-container-full .wpforms-form textarea,
#wpforms-117.wpforms-container-full .wpforms-form input:not([type="radio"]){ border: none; background: transparent; border-bottom: 1px solid #000000; border-radius: 0px; resize: none; }
#wpforms-form-117 .wpforms-field-container input::placeholder,
#wpforms-form-117 .wpforms-field-container textarea::placeholder,
#wpforms-form-117 .wpforms-submit-container button::placeholder {color: #CCCCCC;}

#wpforms-form-112{position: relative; max-width: 260px;}
#wpforms-112.wpforms-container-full{position: relative; margin: 0 !important;}
#wpforms-form-112 .wpforms-submit-container{display: flex; position: absolute; top: 0; right: 0; background-color: transparent;}
#wpforms-form-112 .wpforms-field-container input{background-color: transparent !important; border: none; border-bottom: 2px solid #707070; border-radius: 0;}
#wpforms-form-112 .wpforms-submit-container button{height:38px; border: none; background-color: transparent; }
#wpforms-form-112 .wpforms-submit-container button:after{ content: '\f061'; font-family: "Font Awesome 5 Free" !important; font-weight: 900; }
#wpforms-form-112 .wpforms-field-container input::placeholder,
#wpforms-form-112 .wpforms-submit-container button::placeholder,
#wpforms-form-112 .wpforms-field-container input {color: #333333; font-weight: bold;}
#wpforms-form-112 .wpforms-field-container input::placeholder,
#wpforms-form-112 .wpforms-field-container textarea::placeholder,
#wpforms-form-112 .wpforms-submit-container button::placeholder {color: #CCCCCC;}
div.wpforms-container-full
#wpforms-confirmation-112 p {font-size: 15px;}

/* contact  */
.white-text a { color: #fff !important }
.white-text a:hover{text-decoration: underline;}

#wrapper .stretch-image {width:100%; min-height:72vh; position:relative; overflow:visible;}
#wrapper .stretch-image img {position:absolute; top:0; right:0; height:100%; width:50vw; max-width:999vw; object-fit:cover;}

.border-top:after {content:''; position:absolute; bottom:100%; left:0; width:100%; height:128px; background:inherit;}
.border-bottom.arrow {content:''; position:absolute; top:100%; left:0; width:100%; height:128px; background:inherit;}

/* Swiper project */
.uitgelicht-wrapper.swiper {margin-top:32px;}
.uitgelicht-wrapper.swiper .single {min-height:56vh; transition:transform 0.3s; position:relative; display:flex; justify-content:flex-end; align-items:flex-start; flex-direction:column; overflow:hidden; padding:64px 32px;}
/*.uitgelicht-wrapper.swiper .single::after {content: ''; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background-color: #000000; opacity: 0.3;} */
.uitgelicht-wrapper.swiper .single .image {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:.3s;}
.uitgelicht-wrapper.swiper .single:hover .image {transform:scale(1.1);}
.uitgelicht-wrapper.swiper .content {position:relative; z-index:9; text-shadow: 0px 0px 20px rgba(0, 0, 0, 1)}
.uitgelicht-wrapper.swiper .swiper-slide h4,
.uitgelicht-wrapper.swiper .swiper-slide p {color: #fff; margin-bottom:32px; z-index: 1;}
.uitgelicht-wrapper.swiper .swiper-slide p {margin-bottom: 0;}
.uitgelicht-wrapper.swiper .swiper-slide h4 {margin-top: 0;}
/* .uitgelicht-wrapper.swiper .swiper-slide.swiper-slide-prev{transform: translateY(20px);} 
.uitgelicht-wrapper.swiper .swiper-slide.swiper-slide-active{transform: translateY(40px);}*/

/* Project */
.project-footer-wrapper {padding-top:0!important;}
.project-footer-wrapper .container {display: flex;}
.project-footer-wrapper .container .row {display: flex; flex: 1;}
.project-footer-wrapper .container .row a,
.project-footer-wrapper .container .row span {font-size:48px; font-weight:bold; align-items:center; gap:32px; overflow-x:initial; display: flex; color:#000!important; margin-left:16px;}
.project-footer-wrapper .container .row a.next {margin-left:auto; margin-right:16px;}
.project-footer-wrapper .container .row a i,
.project-footer-wrapper .container .row span i{transition: 0.4s transform;}
.project-footer-wrapper .container .row a:hover i,
.project-footer-wrapper .container .row span:hover i{transform: translate(16px); }
.project-footer-wrapper .container .row a:nth-child(1):hover i{transform: translate(-16px)}
.project-footer-wrapper .container .row *:nth-child(1){text-align: left;}

.project-footer-wrapper .navigation-wrapper {display:flex; align-items:center; margin-top:64px;}
.project-footer-wrapper .navigation-wrapper a {font-size:48px; font-weight:bold; align-items:center; gap:32px; overflow-x:initial; display: flex; color:#000!important; margin-left:16px;}
.project-footer-wrapper .navigation-wrapper a i {transition:.3s;}
.project-footer-wrapper .navigation-wrapper a:hover i {transform:translate(-16px);}
.project-footer-wrapper .navigation-wrapper a.next {margin-left:auto; margin-right:16px;}
.project-footer-wrapper .navigation-wrapper a.next:hover i {transform:translate(16px);}

.uitgelicht-grid-wrapper {display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; }
.uitgelicht-grid-wrapper .uitgelicht-grid-container { position: relative; -webkit-box-shadow: 0px 6px 20px -6px rgba(0,0,0,0.75); -moz-box-shadow: 0px 6px 20px -6px rgba(0,0,0,0.75); box-shadow: 0px 6px 20px -6px rgba(0,0,0,0.75); background-repeat: no-repeat; background-size: cover;}
.uitgelicht-grid-wrapper .uitgelicht-grid-container .image-wrapper {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; position: relative; display: block; height: 320px; }
.uitgelicht-grid-wrapper .uitgelicht-grid-container .uitgelicht-grid-footer {background-color: #fff; width: 100%; position: relative; padding: 32px;}
.uitgelicht-grid-wrapper .uitgelicht-grid-container .image-wrapper::after{position: absolute; height: 6px; bottom: 0; background-color: #000; width: calc(100%); content: ''; left: 0;}
.uitgelicht-grid-wrapper .uitgelicht-grid-container .uitgelicht-grid-footer::before{ display: none !important; position: absolute; height: 100px; bottom: 0; background-color: #fff; border: 6px solid #000; font-family: "Font Awesome 6 Pro"; border-right: none; border-bottom: none; content:  '\f061' !important; right: 0; display: flex; align-items: center; justify-content: center; height: 100%; bottom: 100%; aspect-ratio: 1/1;}
.uitgelicht-grid-wrapper .uitgelicht-grid-container .uitgelicht-grid-footer h3 {margin: 0; font-size: 32px; margin-bottom: 16px; font-weight: bold;}
.uitgelicht-grid-wrapper .uitgelicht-grid-container .uitgelicht-grid-footer p{margin: 0; line-height: 1.2;}
.uitgelicht-grid-wrapper .uitgelicht-grid-container .uitgelicht-grid-footer p i { transition: transform 0.3s;}
.uitgelicht-grid-wrapper .uitgelicht-grid-container:hover .uitgelicht-grid-footer p i {transform: translateX(16px); }

.diensten-wrapper {display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:64px; margin-top:32px;}
.diensten-wrapper .single {min-height:72vh; position:relative; display:flex; align-items:center; justify-content:center; padding:32px; overflow:hidden;}
/*.diensten-wrapper .single::after {background-color:#000000; opacity:0.3; width:100%; position:absolute; left:0; top:0; height:100%; content:'';}*/
.diensten-wrapper .single .image {position:absolute; top:0; left:0; width:100%; height:100%; transition:.3s; object-fit:cover}
.diensten-wrapper .single:hover .image {transform:scale(1.1);}
.diensten-wrapper .single .content {position:relative; z-index:9; text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column; text-shadow: 0px 0px 20px rgba(0, 0, 0, 1)}
.diensten-wrapper .single .content h2 {color:#fff; text-transform:uppercase; line-height:1.1; margin-bottom:32px;}
.diensten-wrapper .single .content p {max-width:400px; color:#fff; margin-top:0; margin-bottom:0; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1)}

.awards-wrapper {display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:32px;}
.awards-wrapper img {margin-bottom:16px;}

.social-wrapper {display:flex; flex-direction:column;}
.social-wrapper .single-social {color:#fff; display:inline-flex; align-items:center; margin-bottom:32px; font-weight:bold; transition:.3s;}
.social-wrapper .single-social:hover {color:var(--primary_color);}
.social-wrapper .single-social i {width:56px;}

.filter-buttons {width:100%; display:flex; flex-wrap: wrap; gap:8px; justify-content:center; margin-bottom:64px;}
.filter-buttons a {display:flex; background:transparent; font-size:16px; font-weight:bold; border:2px solid #000; padding:12px 32px; line-height:1; transition:.3s;}
.filter-buttons a.active,
.filter-buttons a:hover {background:#000; color:#fff;}

/* Animations */
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.7);
  }
  70% {
      -webkit-box-shadow: 0 0 0 15px rgba(255,255,255, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.7);
    box-shadow: 0 0 0 0 rgba(255,255,255, 0.7);
  }
  70% {
      -moz-box-shadow: 0 0 0 15px rgba(255,255,255, 0);
      box-shadow: 0 0 0 15px rgba(255,255,255, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
      box-shadow: 0 0 0 0 rgba(255,255,255, 0);
  }
}