/* WEBRABBITZ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600');
@import url('https://fonts.cdnfonts.com/css/cubano');
@import url("https://use.typekit.net/ugc5xrd.css");
  
.hidden{display:none;}
body{    font-family: 'montserrat', sans-serif; font-weight: 300; line-height: 190%; font-size:1.2rem;}
strong{font-weight: 700;}
h1, h2, h3, h4, h5, h6{font-family: 'cubano', sans-serif; letter-spacing: 0.05rem; word-spacing: 0.1rem;}
header.masthead::before {opacity:1;}
.navbar > .container{display: block; height:101px;}
#mainNav.is-fixed{top:-102px; background-color:rgba(255,255,255,0.95);}
.navbar > .container .toggleMenuButton{color:#FFF; background-color: #333; height:50px; width:50px; line-height:50px; text-align:center; border-radius: 100%; border:none;margin-top:25px; position: relative; display: block; z-index:99;}
.contactOpnemen li{line-height:100px;}
.contactOpnemen{float:right; display: block; position: absolute;width: auto; right: 0; list-style: none; margin:0; padding:0;transform: rotate(180deg); top:0px;}
.contactOpnemen li{margin:0; padding:0;width:auto; position: relative; float:right; margin-left:20px; transform: rotate(-180deg);}
header.masthead{padding-top: calc(14rem + 57px);padding-bottom: 14rem; margin-bottom:0; margin-top:100px;}
header.masthead:before{background-color:rgba(255,255,255,0);}
main section:first-child{padding-top: 3rem;}
.logo{width:100%; position: relative; margin-top:-75px; top:0; z-index:1; height:0;}
.logo img{width:21%; height:auto;}
.slick-slide img{display:inline!important;}
.slick-slide a{text-align:center;}
.slick-prev::before, .slick-next::before {color:rgba(118,194,162,1);font-size:4rem;}
.slick-prev{left:340px;}
.slick-next{right:381px;}
.slick-arrow{z-index:9999;}
.form-control{border-radius:5px; padding:0.75rem 1rem; border:solid 2px rgb(118, 194, 162); }
.form-control::placeholder {color: #DDD;}
.slick-slider-services .blogItem{margin-bottom:40px;}

/*BLOG*/
.blogItem h3{margin-top:15px;letter-spacing: 0rem; word-spacing:0.2rem; font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size:1.3rem;}
a.dateTime{font-size:0.9rem;}
.blogItem p{margin:1rem 0;}
.blogItems .row > *, #blogItems .row > *{padding-right: calc(var(--bs-gutter-x)* 1);    padding-left: calc(var(--bs-gutter-x)* 1);}
.blogItems .col-md-4 > .card, #blogItems .col-md-4 > .card{margin-bottom:3.5rem;}
.blogItems .card, #blogItems .card{  box-shadow: 0 10px 35px 0 rgba(1,68,137,.15); border:none;}

/* BUTTON */
.btn{border:none; border-radius: 7px;font-family: 'cubano', sans-serif; font-weight: normal; font-size:1rem;}
a.btn{text-decoration:none;}
.projectDetails a.btn{margin:0px 5px 10px 0;}
.portfolio .btn{margin:5px 10px;}

a{color:rgba(51,51,51,1); transition:all 300ms;}
.accordion a, .accordion a:hover{color:rgba(255,255,255); transition:all 300ms;}
a:hover{color:rgba(118,88,28,1);}
/*section.accordion .accordionTabs .tab:nth-child(1) a{color:rgba(102,36,131,1);}*/
/*section.accordion .accordionTabs .tab:nth-child(1) a:hover{color:rgba(61,22,79,1);}*/
a.btn{transition: all 0.3s linear; color:#FFF!important;}
a.btn:hover{background-image:none; transition: all 0.3s linear;}

/* NAV */
#mainNav{ border:none; background-color:rgba(255,255,255,0.95);}
#toggleMenu{background-color:rgba(255,255,255,0.95);position: absolute; width: calc(100% - 96px); top: 101px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.extraSpace{height:30px;}
#toggleMenu ul li a{color:#333;}
#toggleMenu ul{list-style:none;padding:0; margin-left:15px; line-height: 110%;}
#toggleMenu ul li{font-family: 'cubano', sans-serif; text-transform: uppercase; letter-spacing: 0.1rem; margin-bottom:20px;}
#toggleMenu ul li ul{list-style:none; padding:0; margin-left:0;}
#toggleMenu ul li ul li{font-family: 'Montserrat', sans-serif;text-transform: uppercase; letter-spacing: 0rem; font-size:0.9rem; line-height:160%; margin-bottom:0px;}
#toggleMenu ul li:nth-child(2) a.nav-link, #toggleMenu ul li:nth-child(2) ul li a:hover, #toggleMenu ul li:nth-child(2) ul li.active a{color:#333}
#toggleMenu ul li:nth-child(3) a.nav-link, #toggleMenu ul li:nth-child(3) ul li a:hover, #toggleMenu ul li:nth-child(3) ul li.active a{color:#C4932F; /* DARK #76581c */}
#toggleMenu ul li:nth-child(4) a.nav-link, #toggleMenu ul li:nth-child(4) ul li a:hover, #toggleMenu ul li:nth-child(4) ul li.active a{color:#0C6060; /* DARK #073a3a */}
#toggleMenu ul li:nth-child(5) a.nav-link, #toggleMenu ul li:nth-child(5) ul li a:hover, #toggleMenu ul li:nth-child(5) ul li.active a{color:#662483; /* DARK #3d164f */}
#toggleMenu ul li:nth-child(6) a.nav-link, #toggleMenu ul li:nth-child(6) ul li a:hover, #toggleMenu ul li:nth-child(6) ul li.active a{color:#76C2A2; /* DARK #477461 */}
#toggleMenu ul li:nth-child(7) a.nav-link, #toggleMenu ul li:nth-child(7) ul li a:hover, #toggleMenu ul li:nth-child(7) ul li.active a{color:#B7AD9A; /* DARK #6e685c */}
#toggleMenu ul li ul li.active a{font-weight:bold;}
.navbar{padding: 0;}
button{cursor: pointer!important;}

/* SHOUTOUT */
.shoutOut{display: inline-block; }
.shoutOut.center{display:contents!important;}
.shoutOut .line1{display: block;font-family: 'cubano', sans-serif; color:#76C2A2; font-size:4.5rem; line-height: 100%; text-align: center;width:100%; letter-spacing: 0.1rem;}
.shoutOut .line2{display: block;font-family: 'cubano', sans-serif; color:#1D1D1B; font-size:4.5rem;line-height: 100%; text-align: center;width:100%; letter-spacing: 0.1rem;}
.shoutOut .shoutout{-webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); display:inline-block; line-height: 160%; width: 100%; text-align: center; margin-top:15px;font-family: "din-2014", sans-serif;font-weight: 200;font-style: normal; text-transform:uppercase; letter-spacing:1px;}
section.bgDarkblue .shoutOut .line2, section.bgDarkblue .shoutOut .shoutout, section.bgDarkblue p, section.bgPurple .shoutOut .line2, section.bgPurple .shoutOut .shoutout, section.bgPurple p, section.bgLightBlue .shoutOut .line1, section.gbGold .shoutOut .line1, section.bgLightBlue .shoutOut .shoutout strong, section.gbGold .shoutout strong{color:#fff;}
.shoutOut .shoutout strong{font-family:'cubano', sans-serif; color:#76C2A2; font-weight:400;}

/* ACCORDION */
section.accordion .accordionTabs{display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center;position: relative;transition: all 200ms ease-in-out 50ms;	box-sizing: border-box;}
section.accordion .accordionTabs .tab {margin-left: 0.5%;margin-right: 0.5%;transition: all 200ms ease-in-out 50ms;cursor: pointer; box-sizing: border-box; border-top-right-radius: 50px;}
section.accordion .accordionTabs .tab.default{height: 500px;color: rgba(255,255,255,0);font-size: 16pt;overflow: hidden;}
section.accordion .accordionTabs .tab h2{color:rgba(255,255,255,1);-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg);text-align: left; position: relative; top: 250px;left:-190px; width: 400px;height:0;}
section.accordion .accordionTabs.accordionTabs5 .tab h2{left: -204px; font-size: 1.7rem;}
section.accordion .accordionTabs .tab .slide{display:none;}
section.accordion .accordionTabs .tab.expand{width: 78%!important;color: rgba(255,255,255,1);padding: 30px 20px 20px 30px;}
section.accordion .accordionTabs .tab.expand h2{height:0;color: rgba(255,255,255,0); display:block;}
section.accordion .accordionTabs .tab.expand .slide{display:block;}

section.accordion .accordionTabs .tab:first-child:nth-last-child(1), section.accordion .accordionTabs .tab:first-child:nth-last-child(1) ~ .tab{width:38%;}
section.accordion .accordionTabs .tab:first-child:nth-last-child(2), section.accordion .accordionTabs .tab:first-child:nth-last-child(2) ~ .tab{width:18%;}
section.accordion .accordionTabs .tab:first-child:nth-last-child(3), section.accordion .accordionTabs .tab:first-child:nth-last-child(3) ~ .tab{width:9%;}
section.accordion .accordionTabs .tab:first-child:nth-last-child(4), section.accordion .accordionTabs .tab:first-child:nth-last-child(4) ~ .tab{width:6%;}
section.accordion .accordionTabs .tab:first-child:nth-last-child(5), section.accordion .accordionTabs .tab:first-child:nth-last-child(5) ~ .tab{width:4%;}

section.accordion .accordionTabs .tab:nth-child(1), .bgGold{background-color:#C4932F!important; background-image: linear-gradient(45deg, rgba(196,147,47,1) 0%, rgba(118,88,28,1) 100%);}
section.accordion .accordionTabs .tab:nth-child(2), .bgLightBlue{background-color:#76C2A2!important; background-image: linear-gradient(45deg, rgba(118,194,162,1) 0%, rgba(71,116,97,1) 100%);}
section.accordion .accordionTabs .tab:nth-child(3), .bgPurple{background-color:#662483!important; background-image: linear-gradient(45deg, rgba(102,36,131,1) 0%, rgba(61,22,79,1) 100%); }
section.accordion .accordionTabs .tab:nth-child(4), .bgDarkblue{background-color:#0C6060!important; background-image: linear-gradient(45deg, rgba(12,96,96,1) 0%, rgba(7,58,58,1) 100%); }
section.accordion .accordionTabs .tab:nth-child(5), .bgBeige{background-color:#B7AD9A!important; background-image: linear-gradient(45deg, rgba(183,173,154,1) 0%, rgba(110,104,92,1) 100%); }
.bgCreme{background-color:#F7F7F2;}

section.accordion .accordionTabs .tab:nth-child(1) a.btn{color:#C4932F !important; background:#FFF !important;}
section.accordion .accordionTabs .tab:nth-child(2) a.btn{color:#76C2A2 !important; background:#FFF !important;}
section.accordion .accordionTabs .tab:nth-child(3) a.btn{color:#662483 !important; background:#FFF !important;}
section.accordion .accordionTabs .tab:nth-child(4) a.btn{color:#0C6060 !important; background:#FFF !important;}

button.bgGold{border:solid 2px #C4932F; background:#FFF!important; color:#C4932F!important; transition:all 200ms;}
button.bgLightBlue, input.btn.bgLightBlue{border:solid 2px #76C2A2; background:#FFF!important; color:#76C2A2!important; transition:all 200ms;}
button.bgPurple{border:solid 2px #662483; background:#FFF!important; color:#662483!important; transition:all 200ms;}
button.bgDarkblue{border:solid 2px #0C6060; background:#FFF!important; color:#0C6060!important; transition:all 200ms;}
button.bgBeige{border:solid 2px #B7AD9A; background:#FFF!important; color:#B7AD9A!important; transition:all 200ms;}
button.bgCreme{border:solid 2px #F7F7F2; background:#FFF!important; color:#F7F7F2!important; transition:all 200ms;}

button.bgGold:hover, button.bgGold.active {border:solid 2px #C4932F; background:#C4932F!important; color:#FFF!important; transition:all 200ms;}
button.bgLightBlue:hover, button.bgLightBlue.active, input.btn.bgLightBlue:hover,input.btn.bgLightBlue.active{border:solid 2px #76C2A2; background:#76C2A2!important; color:#FFF!important;}
button.bgPurple:hover, button.bgPurple.active{border:solid 2px #662483; background:#662483!important; color:#FFF!important; transition:all 200ms;}
button.bgDarkblue:hover, button.bgDarkblue.active{border:solid 2px #0C6060; background:#0C6060!important; color:#FFF!important; transition:all 200ms;}
button.bgBeige:hover, button.bgBeige.active{border:solid 2px #B7AD9A; background:#B7AD9A!important; color:#FFF!important; transition:all 200ms;}
button.bgCreme:hover, button.bgCreme.active{border:solid 2px #F7F7F2; background:#F7F7F2!important; color:#FFF!important; transition:all 200ms;}


.facebookIcon{color:#C4932F;}
.instaIcon{color:#662483;}
.linkedInIcon{color:#76C2A2;}
footer{font-size:1rem;}
footer .socialIcons, footer .socialIcons li{margin:0!important; padding:0!important;}
footer a, .bgDarkblue a, .bgPurple a{color:#FFF;}
footer a:hover, .bgDarkblue a:hover, .bgPurple a:hover{color:#FFF;}

/*section.bgGold, section.bgLightBlue, section.bgPurple, section.bgDarkblue,section.bgBeige,section.bgCreme{ margin:35px 0; padding: 35px 0;}*/

img{max-width:100%; height:auto;}
.bottomItem{position: absolute; bottom:0;}

/* Accordion Ons Werk */
.tevredenklanten .slick-slide, .onswerk .slick-slide{text-align: center; transform: scale(0.6); transition: all 300ms; opacity: 0.9; padding-top:40px; padding-bottom:30px;}
.tevredenklanten .slick-slide img, .onswerk .slick-slide img{max-width:100%;}
.tevredenklanten .slick-slide.slick-center, .onswerk .slick-slide.slick-center{transform: scale(1.2); opacity: 1;}
.tevredenklanten .slick-track{padding:50px 0;}
.tevredenklanten .slick-slide {background-color:#FFF; border-radius: 15px; padding:15px;}

.reviewItem .title{font-weight:bold;position: relative; float: left; width:100%; text-align: center; margin-bottom:10px;}
.reviewItem .description,.reviewItem .shortDescription{font-weight:normal;position: relative; float: left; width:100%; text-align: center; font-size:0.9rem; line-height:170%; margin-bottom:10px; }
.reviewItem .stars{position: relative; float: left; width:100%; text-align: center;}
.reviewItem .stars, footer span.stars a{color: rgb(196, 147, 47);}
/*section.ons-werk{margin-bottom:35px;}*/

/* Accordion Onze Klanten */
.onzeklanten .slick-slide{padding:30px;}
.onzeklanten2 .slick-slide{padding:10px;}
.onzeklanten2 .slick-slide{opacity:0; transition: all 200ms;}
.onzeklanten2 .slick-slide.slick-active{opacity:1;}

.onzeklanten .slick-slide, .onzeklanten2 .slick-slide {
    display: inline-block;
    vertical-align: middle;
    float:none;
    text-align: center;
}

/* PORTFOLIO CSS */
.portfolio .portfolioItem{padding-top: calc(var(--bs-gutter-x) * 0.5); padding-bottom: calc(var(--bs-gutter-x) * 0.5);}
.portfolio button.btn{color:#FFF;}
.flip-card {background-color: transparent; display: block;cursor:pointer;}
.flip-card-inner{cursor:pointer;}

/* CONTACT OPNEMEN RECHTS */
.contactNow{position: fixed; right:0; top:55%; display: block; border-top-left-radius: 50px;border-bottom-left-radius: 50px;animation:6s ease 0s normal forwards 1 fadein;
-webkit-animation:4s ease 0s normal forwards 1 fadein;
opacity:1; z-index:99999;}

@keyframes fadein{
    0%{opacity:0}
    85%{opacity:0}
    100%{opacity:1}
}

@-webkit-keyframes fadein{
    0%{opacity:0}
    85%{opacity:0}
    100%{opacity:1}
}
.contactNow svg{float:left; height:42px;margin-right:8px;}
.contactOpnemenFixed a{padding:30px 25px 30px 45px; position: relative; display: block; text-align: center; line-height: 130%;}
.contactNow i{text-align: left; font-size: 50px!important;}
.contactNow .headerText{text-align: right;font-family: 'cubano', sans-serif;}


.onze-klanten img{filter: grayscale(100%);opacity: 0.7; transition: all 400ms;}
.onze-klanten img:hover{filter: grayscale(0%);opacity: 1;}

.flip-card-inner {
/*  position: relative;*/
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back {
  color: #333;font-size: 0.9rem; line-height: 160%; transform: rotateY(180deg);
  /*padding: 25% 0;*/
  display: flex;
  justify-content: center;
   align-items: center;
}



/* Contactformulier */
.formulier {
    width: 70%;
    margin-bottom: 3rem;
}

.contact-list {
    list-style: none;
    margin-bottom: 0;
    float: right;
}

.contact-list li {
    font-size: 18px;
    padding: 2px 0;
}


.teamPage .col-md-4{margin-bottom:30px;}


.loading-animation {position: relative; text-align: center;}
.loading-animation svg.animation {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.onlyBackground{height:250px;}
/* X-Large devices (large desktops, less than 1400px) */ 
@media (max-width: 1399.98px) {  
    section.accordion .accordionTabs .tab h2{left: -198px; }
    .slick-prev{left:290px;}
    .slick-next{right:331px;}
    .onlyBackground{height:200px;}
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .slick-prev{left:0px;}
    .slick-next{right:43px;}
    section.accordion .accordionTabs .tab h2{left: -204px;top:280px;}    
    .onswerk .slick-slide{padding-top:26px; padding-bottom:15px;}
    .shoutOut .line1, .shoutOut .line2{font-size:4rem; line-height: 100%; letter-spacing: 0.1rem;}
    .tevredenklanten .slick-slide, .onswerk .slick-slide{opacity: 1; transform: scale(0.9);}
    footer{font-size:0.8rem; line-height: 190%;}
    .slide p{  font-size: 1.1rem;  line-height: 180%;}
    .onlyBackground{height:160px;}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    p{margin:1rem 0;}
    section.accordion .accordionTabs .tab h2{font-size:1.4rem; left:-203px;}    
    .onswerk .slick-slide{padding-top:20px; padding-bottom:9px;}
    #toggleMenu .shoutOut{transform: scale(0.7); width:70%;left: 0;top: 0;position: absolute;} 
    #toggleMenu ul{line-height: 130%;}
    nav .headerText{display:none;}
    .logo img{width:30%;}
    h3{font-size:calc(1.1rem + 0.6vw);}
    section.accordion .accordionTabs .tab.default { font-size: 1rem; line-height: 180%;}
    footer .col-md-7 br{display: none;}
    .contactNow{top:80%;}
    .contactNow svg {margin-right: 18px; margin-left: -18px; margin-bottom: 10px; margin-top: -12px;}
    
    section.accordion .accordionTabs .tab{border-top-right-radius: 0; border-bottom-right-radius: 50px;}
    section.accordion .accordionTabs .tab:first-child:nth-last-child(4), section.accordion .accordionTabs .tab:first-child:nth-last-child(4) ~ .tab{width:100%; height:50px; margin-bottom:10px;}
    section.accordion .accordionTabs.accordionTabs5 .tab:first-child:nth-last-child(5), section.accordion .accordionTabs .tab:first-child:nth-last-child(5) ~ .tab{width:100%; height:50px; margin-bottom:10px;}
    section.accordion .accordionTabs .tab h2{-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg);text-align: left; position: relative; top: 10px;left:20px; width: 100%;height:0;}
    section.accordion .accordionTabs.accordionTabs5 .tab h2{-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); left:0px;}
    section.accordion .accordionTabs .tab.expand{width:100%!important; height:auto!important;}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .contactOpnemenFixed .headerText{display:none;}
    .contactOpnemenFixed a{margin-right: -25px;}
    body{font-size:1.1rem;}
    #toggleMenu .shoutOut{display: none;}
    .onswerk .slick-slide{padding-top:14px; padding-bottom:3px;}
    .shoutOut .line1, .shoutOut .line2{font-size:3.5rem; line-height: 100%; letter-spacing: 0.1rem;}
    .shoutOut .shoutout{margin-top:10px;}
    footer .row div{text-align: center!important; margin-bottom:15px;}
    .bottomItem{position:relative;}
    .formulier {
        width: 100%;
    }
    .shoutOut{width:100%;}
    .onlyBackground{height:130px;}
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
    body{font-size:1rem;}
    .onswerk .slick-slide{padding-top:8px; padding-bottom:0px;}
    .shoutOut .line1, .shoutOut .line2{font-size:2.7rem; line-height: 100%; letter-spacing: 0.1rem;}
    .shoutOut .shoutout{margin-top:10px;}
    .logo img{width:40%; padding-right:0px;}
    nav .contactOpnemen li:nth-of-type(3){display:none;}}


@media (max-width: 420px) { 
    .logo img{width:40%; padding-right:0px;}
}