/*
 Theme Name:     veroservices
 Theme URI:      https://www.veroservices.nl/veroservices/
 Description:    Custom Theme built by Pixelein
 Author:         Pixelein
 Author URI:     https://www.pixelein.nl
 Version:        1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
@import url("https://use.typekit.net/uzp1sut.css");

html {scroll-behavior: smooth;}

body {background:#ffffff;font-family:'roboto', arial, helvetica, sans-serif;color:#333;font-size:16px;font-weight: 300;line-height:26px;margin:0;padding:0;}

p {margin:0 0 10px 0;}
a {cursor:pointer;text-decoration:none;}
strong {font-weight:700 !important;}

img {border:none;}
.alignleft,img.alignleft {display:inline;float:left;margin-right:24px;margin-top:4px;}
.alignright,img.alignright {display:inline;float:right;margin-left:24px;margin-top:4px;}
.aligncenter,img.aligncenter {clear:both;display:block;margin-left:auto;margin-right:auto;}
img.alignleft,img.alignright,img.aligncenter {margin-bottom:12px;}

ol {list-style-type:decimal;list-style-position:outside;}
ul {}
li {}

h1 {color:#ffffff;font-size:30px;line-height:40px;font-family: 'roboto', arial, helvetica, sans-serif;font-weight:700;text-align:center;padding:40px 0;}
h2 {color:#333;font-size:44px;line-height:33px;padding:5px 0;font-family:'Merriweather',serif;text-align:center;font-weight:700;margin:30px 0;}
h3, h4 {color:#de3e8f;}

#top {position:fixed;width:100%;height:180px;display:block;z-index:10;background:transparent;-webkit-transition: all 1s, -webkit-transform 1s;transition: all 1s, transform 1s;}
#top h2 {color:#ffffff;font-style:italic;}
#top .logoholder {position:absolute;top:0;z-index:500;}
#top a.logo {background:url('../veroservices/assets/images/Vero-Services__White.svg') no-repeat center center;background-size:80px;width:240px;height:180px;display:block;-webkit-transition: all 1s, -webkit-transform 1s;transition: all 1s, transform 1s;cursor:pointer;position:absolute;top:-30px;left:-60px;}
#top.scroll a.logo {background-size:80px;top:-30px;left:-60px;}
#top.scroll {background:url('../veroservices/assets/images/darken.png') repeat 0 0;height:120px;}


.wrap {width:90%;margin:0 auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#wrapper {position:relative;}

#header {display:block;width:100%;height:160px;position:absolute;background-color:transparent;z-index:9;top:0;}
#branding {height:0;position:relative;z-index:6;margin:0 0 0 2%;}
#site-title {text-indent:-9999px;}
#site-title h1, #site-title a, #site-description {font-size:1px;text-indent:-9999px;line-height:0;margin:0;padding:0;}

@media screen and (min-width: 1080px) {
	#top a.logo {background-size:150px;top:0px;left:0;}
	#top.scroll a.logo {left:-20px;}
}

#container {padding:0;margin:0;position:relative;}


.home .head {display:block !important;}

.hero-overlay div.head {font-family:'roboto', helvetica, arial, "sans-serif";width:100%;text-align:center;margin:0 auto;position:relative;text-shadow: 1px 4px 5px rgba(0,0,0,0.37);}

.hero-overlay div.big h1 {color:#ffffff;font-size:52px;line-height:50px;font-weight:700;padding:0;margin:0;}
.hero-overlay div.norm h2 {color:#ffffff;font-size:30px;line-height:35px;font-weight:400;padding:20px 0 70px 0;margin:0;}

.hero-video {position:relative;width:100%;height:100vh;overflow:hidden;background-color:#000}
.hero-bg-video {position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:200px;transform: translate(-50%, -50%);z-index:1;object-fit:fill;opacity:0.5;}
/*.hero-bg-video {position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform: translate(-50%, -50%);z-index:1;object-fit:cover;opacity:0.5;}*/

.hero-overlay {position:relative;z-index:2;align-items:center;height:auto;text-align:center;color:#fff;top:50%;left:50%;transform:translate(-50%, -50%);}
.hero-overlay .btn {background-color:#de3e8f;color: #fff;padding: 0.75rem 2rem;text-decoration: none;border-radius: 5px;font-weight: bold;}

.hero-overlay div.big {animation-delay: 0.4s;}
.hero-overlay div.norm {animation-delay: 1s;}

@media screen and (min-width: 1080px) {
	.hero-overlay div.big h1 {font-size:95px;line-height:50px;}
	.hero-overlay div.norm h2 {font-size:55px;line-height:50px;padding:40px 0 70px 0;}
}

/************ animate up ************/
@-webkit-keyframes show-up {
  0%   { opacity: 0;top: 10px; }
  100% { opacity: 1;top: -20px; }
}
@-moz-keyframes show-up {
  0%   { opacity: 0;top: 10px; }
  100% { opacity: 1;top: -20px; }
}
@-o-keyframes show-up {
  0%   { opacity: 0;top: 10px; }
  100% { opacity: 1;top: -20px; }
}
@keyframes show-up {
  0%   { opacity: 0;top: 10px; }
  100% { opacity: 1;top: -20px; }
}
.animate {opacity: 0;position: absolute;}
.animate.animatethis {
  opacity: 0;
  -webkit-animation: show-up 1s 0s 1 forwards; /* safari 4+ */
  -moz-animation:    show-up 1s 0s 1 forwards; /* fx 5+ */
  -o-animation:      show-up 1s 0s 1 forwards; /* opera 12+ */
  animation:         show-up 1s 0s 1 forwards; /* ie 10+, fx 29+ */
    top: 10px;
}


/* hoofdmenu
----------------------------------------------------------------------------------------------------------------------------------------------------------- */

#iizmenubutton {display:block;cursor:pointer;position:fixed;top:75px;right:40px;}
#iizmenubutton:before {font-family: 'fontawesome';content: '\f0c9';color:#ffffff;font-size:25px;text-shadow: 1px 4px 5px rgba(0,0,0,0.37);}

/* normal -- niveau 1 */
#menu {text-transform:uppercase;text-align:right;height:50px;position:relative;z-index:500;-webkit-transition: padding 1s, -webkit-transform 1s; /* for safari */transition: padding 1s, transform 1s;}
#top nav#menu .desktop-menu {display:none;height:50px;margin:0;padding-top:60px;-webkit-transition: padding 1s, -webkit-transform 1s; /* for safari */transition: padding 1s, transform 1s;}
#menu .desktop-menu ul {margin:0;padding:0;}
#menu .desktop-menu li {display:inline-block;height:50px;width:auto;line-height:50px;position:relative;}
#menu .desktop-menu li a {color:#ffffff;font-size:15px;line-height:15px;font-family:"roboto",sans-serif;font-weight:500;text-transform:uppercase;text-wrap:nowrap;background-color:transparent;margin:0px 3px 0px 3px;padding: 9px 13px 9px 13px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;letter-spacing: 0.2em;-webkit-transition: background 0.3s ease; /* for safari */transition: background 0.3s ease;}

/*scroll*/
#top.scroll nav#menu .desktop-menu {padding-top:19px;}
/*hover-selected*/
nav#menu ul.desktop-menu li a:hover, nav#menu ul.desktop-menu li.daddy.touched a {color:#4b3c22;background-color:#ffffff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #4b3c22;}


/* responsive -- niveau 1 */
nav#menu .mobile-menu {display:block;opacity:0;max-height:0px;position:relative;background-color:#333;width:100%;text-align:left;margin:0;padding:68px 0 0 0;position:fixed;overflow:hidden;-webkit-transition: all 1s; /* for safari */transition: all 1s;}

nav#menu.open .mainmenu-nav.parent {position:relative;}

nav#menu.open .mobile-menu {display:block;max-height:500px;opacity:1;-webkit-transition: all 1s ease-in; /* for safari */transition: all 1s ease-in;}

nav#menu .mobile-menu ul {margin:0;padding:0;list-style-type:none;}
nav#menu .mobile-menu li {cursor:pointer;width:100%;}

nav#menu .mobile-menu li a {color:#ffffff;background-color:#333;font-size:15px;font-family:"roboto",sans-serif;font-weight:500;text-transform:uppercase;display:block;width:100%;min-height:50px;padding:10px 0 10px 30px;border-bottom:1px solid #000;line-height:30px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

nav#menu.open #iizmenubutton {display:none !important;}

nav#menu.open .mobile-menu li.openclose {text-align:right;margin:15px 0 0 0;}
.menu-open {margin:0;position:absolute;right:40px;top:40px;}
.menu-open:before {font-family:'fontawesome';content: '\f078';color:#ffffff;font-size:30px;}

@media screen and (min-width: 1200px) {
	#iizmenubutton {display:none;}
	#top nav#menu .desktop-menu {display:block;}
	#menu .desktop-menu ul.sub-menu li {width:110%;}
}

/*hover-selected*/
nav#menu.open .mobile-menu li.daddy:hover a {background-color:#c5e1c0;}
nav#menu.open .mobile-menu li:hover a {color:#ffffff;background-color:#c5e1c0;}
nav#menu.open .mobile-menu li.current-menu-item a  {color:#ffffff;background-color:#777;}

/* end hoofdmenu

----------------------------------------------------------------------------------------------------------------------------------------------------------- */

#content, .wrap {width:90%;margin:0 auto;padding:30px 0 70px 0;}

#diensten{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}

.kaart {position:relative;width:30%;height:250px;perspective:1000px;flex:1 1 30%;cursor:pointer;margin-bottom:20px;}
.kaart-inner {position:relative;width:100%;height:100%;transition:transform 0.6s;transform-style:preserve-3d;}
.kaart.active .kaart-inner {transform:rotateY(180deg);}

@media(max-width:1080px){
    .kaart {flex:1 1 100%;}
}

.front,.back {position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:10px;overflow:hidden;}
.front.int {background:url('../veroservices/assets/images/webp/vero-interieur-car-detailing.webp') no-repeat 0 center;background-size:cover;}
.front.ext {background:url('../veroservices/assets/images/webp/vero-exterieur-car-detailing.webp') no-repeat 0 center;background-size:cover;}
.front.pc {background:url('../veroservices/assets/images/webp/vero-polish-coating-car-detailing.webp') no-repeat 0 center;background-size:cover;}
/*
@media (min-width:550px) and (max-width: 1080px) {
    .front.int {background:url('../veroservices/assets/images/webp/interieur-car-detailing_1080.webp') no-repeat 0 center;background-size:cover;}
    .front.ext {background:url('../veroservices/assets/images/webp/exterieur-car-detailing_1080.webp') no-repeat 0 center;background-size:cover;}
    .front.pc {background:url('../veroservices/assets/images/webp/polish-coating-car-detailing_1080.webp') no-repeat 0 center;background-size:cover;}
}*/

/*.front img {width:100%;height:100%;object-fit:cover;}*/
.front .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.4);border-radius:10px;}
.front .dienst-naam {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:bold;font-size:1.2rem;text-align:center;}

.back {background:#fff;color:#333;padding:10px;transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;box-sizing:border-box;border:1px solid #ccc;border-radius:11px;}
.back h3 {margin:0 0 15px 0;font-size:1.1rem;}
.back p {margin:0;font-size:0.9rem;line-height:1.4;}
.content_block {width:90%;}
.back ul {list-style:none;margin:0;padding:0;text-align:left;column-count:2;column-gap:1rem;}
.back ul li {position:relative;padding-left:1.2em;margin-bottom:0.35em;font-size:12px;line-height:15px;}
.back ul li::marker {content:none;}
.back ul li::before {content:"\f00c";font-family:"fontawesome";font-weight:900;position:absolute;left:0;color:#28a745;font-size:0.9em;}

#contact {background-color:#f8f8f8;}
#contact h2 {font-size:28px;}
#contact h4 {margin-bottom:10px;}
#contact .nf-field-container.html-container {margin-bottom:0px;}
#contact .nf-form-fields-required {font-size:10px;font-style:italic;}
#contact .nf-field-element input, #contact .nf-field-element select {padding-left:10px;height:40px;display:block;font-family:'roboto', arial, helvetica, sans-serif;color:#333;border:1px solid #ccc;border-radius: 5px;box-shadow:none;}
#contact .nf-field-element textarea {border:1px solid #ccc;border-radius: 5px;padding:15px;font-family:'roboto', arial, helvetica, sans-serif;color:#333;}
#contact .nf-field-element select {padding-left:6px;}
#contact .nf-field-element hr {border:0;border-top:1px solid #d8d8d8;}
#contact .nf-field-element input[type=submit] {width:100%;height:45px;background-color:#de3e8f;color: #fff;padding: 0.75rem 2rem;text-decoration: none;border:0;border-radius: 5px;font-size:16px;font-weight: bold;text-align:center;text-transform:uppercase;cursor:pointer;}
.nf-form-errors, .nf-response-msg {text-align:center;}

#footer {width:100%;min-height:200px;background-color:#000;margin-top:0px;}
#footinfo {padding:40px 0;}

#footinfo .blockcontainer {display:grid;grid-template-columns: 1fr;}
#footinfo .block {width:100%;color:#ffffff;text-align:center;}
#footinfo .block.left {margin-bottom:30px;}
#footinfo .social {width:100%;display:block;}
#footinfo .social a {width:25px;display:inline-block;margin-left:10px;position:relative;}
#footinfo .social a:first-child {margin:0;}
#footinfo .social img {width:25px;display:block;}

#footinfo .contact a {color:#fff;text-decoration:none;}

@media screen and (min-width: 1080px) {
	#footinfo .blockcontainer {display:grid;grid-template-columns: 1fr 1fr;}
	#footinfo .block {text-align:left;width:50%;}
}

#copyright {background-color:#fff;}
#copyright .txt {color:#de3e8f;font-size:11px;text-align:center;padding:5px 0 40px 0;margin-top:40px;}
#copyright a {color:#de3e8f;}
#copyright .divide {display:none;width:7px;height:10px;margin:0 10px;}
#copyright .client, #copyright .design {width:100%;display:block;}

@media screen and (min-width: 680px) {
	#copyright .divide {display:inline-block;}
	#copyright .client, #copyright .design {display:inline;}
}

/* colors

hotpink: color:#de3e8f;

*/