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

 Theme Name:   Van Til Transport | Vrachtwagens met autolaadkraan
 Theme URI:    https://vantiltransport.nl
 Description:  Customized divi theme by Netfire
 Author:       Netfire
 Author URI:   https://netfire.nl/
 Template:     Divi
 Version:      1.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/*********************************
* Variables */
:root{
    --donkerblauw: #202c45;
    --lichtblauw: #1196cc;
}

/*********************************
 * Text selection */
::-moz-selection {  color: #1d1d1b;background-color:#ece4d9;}
::selection {       color: #1d1d1b;background-color:#ece4d9;}

/*********************************
* youtube icon header 
* Whatsapp icon header */
.et-social-youtube a.icon:before { content: '\e0a3'; }
.et-social-whatsapp a.icon:before { content: '\e065'; }

#et-info{float:none;}
#top-header .et-social-icons{float:right;}
#top-header .nf_wrapper_netfire_nl{display:none !important;opacity:0;}



.nf_box_center{
  display:flex;
  align-items:center;
  justify-content:center;
}


#footer-info{
  display:flex;
}

#nf_footer_anim {
  display:flex;
  /*font-family: 'Courier New', Courier, monospace;      */
  position: relative;   
  min-width:13.5em;
  margin-left:5px;
}

.nf_writer {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #fff;
  width: 0;
  opacity: 0;
  left:0;
  top:0;
  position: absolute;
  text-align:left;
}
@keyframes nf_blink {
  50% { border-color: transparent; }
}

@keyframes nf_typing {
  0% { opacity: 0; width: 0; } 
  5% { opacity: 1; width: 0; } 
  30% { width: 100%; }         
  40% { width: 100%; opacity:1; }
  45% { width: 100%; opacity:0; }
  100% { width: 100%; opacity:0; }  
}

.nf_writer:nth-child(1) {
  animation: nf_typing 12s steps(30) infinite, nf_blink 0.5s step-end infinite;
}

.nf_writer:nth-child(2) {
  animation: nf_typing 12s steps(30) infinite, nf_blink 0.5s step-end infinite;
  animation-delay: 6s;
}

/* diensten*/
.nf_col_diensten{
  position: relative;
  display: block;
  margin-bottom: 30px;
}
.nf_col_diensten:hover .nf_blurb_diensten{
    margin-top: -105px;
}
.nf_col_diensten .nf_img_diensten{
  position: relative;
  display: block;
  overflow: hidden;
  background:var(--donkerblauw);
  
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0% 100%);

}
.nf_col_diensten .nf_img_diensten .et_pb_image_wrap img {
  width: 100%;
  height: 100%;
  transform: scale(1.1) translateX(4%);
  transition: all 0.4s;
}
.nf_col_diensten:hover .nf_img_diensten .et_pb_image_wrap img {
  opacity: .4;
  transform: scale(1.1) translateX(-4%);
}

.nf_blurb_diensten{
  margin-top: -100px;
  transition: all 500ms ease;
}
.nf_blurb_diensten .et_pb_blurb_content{  
    position: relative;
    display: block;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    z-index: 1;
    filter: drop-shadow(0 5px 10px #ddd);
}
.nf_col_diensten:hover .nf_blurb_diensten .et_pb_blurb_content{
  filter: drop-shadow(0px 10px 60px rgba(0, 0, 0, 0.07));
}



.nf_blurb_diensten .et_pb_blurb_content .et_pb_main_blurb_image {
  position: absolute;
  top: -12px;
  right: 5px;
  height: 35px;
  width: 35px;
  background-color: var(--lichtblauw);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  z-index: 2;
}
.nf_blurb_diensten .et_pb_blurb_content .et_pb_main_blurb_image .et_pb_image_wrap .et-pb-icon {
  font-size:22px;
  position: relative;
  display: inline-block;
  transition: all 250ms linear;
  transition-delay: 0s;
  transition-delay: 0.05s;
  transform: scale(1);
  color: #fff;
}
.nf_col_diensten:hover .nf_blurb_diensten .et_pb_blurb_content .et_pb_main_blurb_image .et_pb_image_wrap .et-pb-icon {
  transform: scale(1.4);
}


.nf_blurb_diensten .et_pb_blurb_content .et_pb_blurb_container {
  position: relative;
  display: block;
  background-color: #ffffff;
  border-radius: 15px;
  padding: 49px 20px 20px;
  clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
  margin: 0px 15px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  z-index: 1;
}

.nf_blurb_diensten .et_pb_blurb_content .et_pb_blurb_container .et_pb_blurb_description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nf_col_diensten:hover .nf_blurb_diensten .et_pb_blurb_content .et_pb_blurb_container .et_pb_module_header {
  color: var(--lichtblauw);
}




/*********************************
 * Credits */
.netfire{
    display: block;
    width: 20px;/*30*/
    height: 30px;/*45*/
    background: url(https://netfire.nl/images/logo_netfire_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
}

/* slider kraan ico */
.et_pb_slides:before {
    z-index: 2;
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: .05;
    pointer-events: none;
    background-image: url(/wp-content/uploads/2024/09/icon_kraan_vantil_purmerend.png);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: bottom right;
}


/* Menu */
li#menu-item-111 a,
li#menu-item-133 a{
  border-radius: 30px;
  background-color: var(--lichtblauw);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px !important;
  margin: 0;
}

li#menu-item-111.current_page_item a,
li#menu-item-133.current_page_item a{
  color:#fff;
  background-color: var(--donkerblauw);
}



/*********************************
 * Slider arrows */
.et-pb-arrow-next, .et-pb-arrow-prev,
.et-pb-arrow-next, .et-pb-arrow-next{
  color:var(--lichtblauw);
}
.et-pb-controllers a,
.et-pb-controllers .et-pb-active-control{
  background-color:var(--lichtblauw);
}



/*********************************
 * Footer menu */
#menu-hoofdmenu .current_page_item a{
  color:#fff !important;
}

@media screen and (max-width: 980px) {
  .et_pb_section_3_tb_footer  .et_pb_menu__menu,
  .et_pb_section_3_tb_footer .et_pb_menu__wrap,
  .et_pb_menu .et_pb_menu__menu>nav>ul{
    flex-direction:column;
  }
  .et_pb_menu .et_pb_menu__menu {
    display: block !important;
  }
  .et_pb_section_3_tb_footer  .mobile_menu_bar {
    display: none;
  }
  .et_pb_menu--style-left_aligned .et_pb_menu__wrap {
    justify-content:flex-start !important;
  }

  .et_mobile_nav_menu{display:none !important;}
}

/*********************************
 * Border button wrapper */

  .nf_block_wrapper{
    display: inline-block;
    position: relative;
    
  }
  .nf_block_wrapper .nf_block_span{
    display: block;
    height:300px;
    width:100%;
  }
  .nf_block_wrapper .et_pb_blurb_content{padding:50px;}

  .nf_block_wrapper .nf_block_span::before, .nf_block_wrapper .nf_block_span::after,
  .nf_block_wrapper .et_pb_image_wrap::before, .nf_block_wrapper .et_pb_image_wrap::after,
  .nf_block_wrapper .et_pb_blurb_content::before, .nf_block_wrapper .et_pb_blurb_content::after{
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    transition: 0.5s ease-in-out;
    pointer-events: none;
  }
  .nf_block_wrapper .nf_block_span::before,
  .nf_block_wrapper .et_pb_image_wrap::before,
  .nf_block_wrapper .et_pb_blurb_content::before {
    top: -2px;
    left: -2px;
    border-top: 2px solid var(--matzwart);
    border-left: 2px solid var(--matzwart);
  }
  .nf_block_wrapper .nf_block_span::after,
  .nf_block_wrapper .et_pb_image_wrap::after,
  .nf_block_wrapper .et_pb_blurb_content::after{
    right: -2px;
    bottom: -2px;
    border-bottom: 2px solid var(--matzwart);
    border-right: 2px solid var(--matzwart);
  }
  .nf_block_wrapper.et_had_animation .nf_block_span::before, .nf_block_wrapper.et_had_animation .nf_block_span::after,
  .nf_block_wrapper.et_had_animation .et_pb_image_wrap::before, .nf_block_wrapper.et_had_animation .et_pb_image_wrap::after,
  .nf_block_wrapper.et_had_animation .et_pb_blurb_content::before, .nf_block_wrapper.et_had_animation .et_pb_blurb_content::after {
    width: calc(100% + 30px);
    height: calc(100% + 30px);
  }
  .nf_block_wrapper.et_had_animation:hover .nf_block_span::before, .nf_block_wrapper.et_had_animation:hover .nf_block_span::after,
  .nf_block_wrapper.et_had_animation:hover .et_pb_image_wrap::before, .nf_block_wrapper.et_had_animation:hover .et_pb_image_wrap::after,
  .nf_block_wrapper.et_had_animation:hover .et_pb_blurb_content::before, .nf_block_wrapper.et_had_animation:hover .et_pb_blurb_content::after{
    width: calc(100% + 40px);
    height: calc(100% + 40px);
  }





  .nf_block_wrapper::before, .nf_block_wrapper::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    transition: 0.7s ease-in-out;
    pointer-events: none;
  }
  .nf_block_wrapper::before {
    top: -12px;
    left: -12px;
    border-top: 1px solid var(--matzwart);
    border-left: 1px solid var(--matzwart);
  }
  .nf_block_wrapper::after {
    right: -12px;
    bottom: -12px;
    border-bottom: 1px solid var(--matzwart);
    border-right: 1px solid var(--matzwart);
  }
  .nf_block_wrapper.et_had_animation::before, .nf_block_wrapper.et_had_animation::after{
    width: calc(50% + 12px);
    height: calc(50% + 12px);
  }
  .nf_block_wrapper.et_had_animation:hover::before, .nf_block_wrapper.et_had_animation:hover::after{
    width: calc(60% + 12px);
    height: calc(60% + 12px);
  }



/*********************************
 *  Preloader */
.nf_preloader_wrapper:before,
.nf_preloader_wrapper:after{
    z-index:999997;
    position:fixed;
    content:'';
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
}
.nf_preloader_wrapper:before{
    background-color:#202c45;        
}
.nf_preloader_wrapper:after{    
    opacity:.1;
    background-image: url('/wp-content/uploads/2024/09/icon_kraan_vantil_purmerend.png');
    background-repeat:no-repeat;
    background-position: bottom right;      
}

.nf_preloader_wrapper{
    z-index:999998;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nf_preloader {
    z-index:999999;
    overflow:hidden;
}
.nf_preloader img{
    max-width:300px;
    width:100%;
    clip-path: inset(0px 0px 3px 0px);
}
.nf_preloader_bar {
    margin-top:-9px;
    display:block;
    border-radius:5px;
    height:2px;
    width: 100%;
    transform:translateX(-100%);
    background-color:#ffffff;
    animation: nf_preloader_bar_anim 1s ease-in-out;
}

@keyframes nf_preloader_bar_anim {
  0%{
    transform:translateX(-100%);
  }
  25%{
    transform:translateX(-40%);
  }
  100% {
    transform:translateX(0%);
  }
}



/***********************
 *  nf-swiper */
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 30px;
    font-weight:500;
    color: #fff;
}

.nf-swiper-brands .swiper-container{
  padding:20px 0px 40px;
}
.nf-swiper-brands .swiper-slide{
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:rgba(255,255,255,1);
    padding:12px;
    border-radius:16px;
    text-align:center;
    transform:scale(1);
    transition:ease 250ms all;    
}

.nf-swiper-brands .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-height:100px;
    object-fit: cover;
    
}
.nf-swiper-brands .swiper-slide:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.nf-swiper-brands .swiper-slide:hover{
    transform:scale(1.05);
}

.nf-swiper-brands .swiper-wrapper {
    transition-timing-function: linear !important;
}



.image-hover-anim img{
    transition:ease all 350ms;
    transform:scale(1.1) translate(-20px,10px);    
}
.image-hover-anim:hover img{
    transform:scale(1) translate(0,0);
}

.image-hover-anim .et_pb_image_wrap{overflow:hidden;}
































/* ===== NF Mobile menu ======*/
  
.et_mobile_menu li li{padding-left: 5% !important;}
.et_pb_menu .et_mobile_menu li ul{padding-left: 10px !important;}

.et_pb_module .et_mobile_menu .menu-item-has-children.clickable, .et_pb_module .et_mobile_menu .menu-item-has-children>a {
	position:relative
}
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable>span.parent_icon:after, 
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable)>a:after {
  font-family:ETmodules;
  text-align:center;
  speak:none;
  font-weight:400;
  font-variant:normal;
  text-transform:none;
  color:var(--color-1);
  font-size:16px;
  -webkit-font-smoothing:antialiased
}
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable)>a:after {
  position:absolute;
  top:13px;
  right:10px;
}
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable>span.parent_icon {
  display:grid;
  align-items:center;
  position:absolute;
  width:50px;
  height:50px;
  background:rgba(0, 0, 0, 0);
  right:0;
  top:0;
  z-index:9
}
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable>span.parent_icon:after, .et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable)>a:after {
  content:"\4c"
}
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable.visible>span.parent_icon:after, .et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable).visible>a:after {
  content:"\4b"
}
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu>ul.sub-menu, .et-db #et-boc .et-l .et_pb_menu .et_mobile_menu>ul.sub-menu, .et_pb_module .et_mobile_menu ul.sub-menu {
  display:none!important;
	visibility:hidden!important
}
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu .visible>ul.sub-menu, .et-db #et-boc .et-l .et_pb_menu .et_mobile_menu .visible>ul.sub-menu, .et_pb_module .et_mobile_menu .visible>ul.sub-menu {
	display:block!important;
	visibility:visible!important
}
.mobile_nav.closed .et_mobile_menu {
  -webkit-transform:translateX(-100%);
  -moz-transform:translateX(-100%);
  -ms-transform:translateX(-100%);
  -o-transform:translateX(-100%);
  transform:translateX(-100%);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transition:-webkit-transform .4s 0s;
  -moz-transition:-moz-transform .4s 0s;
  transition:transform .4s 0s
}
.mobile_nav.opened .et_mobile_menu {
  -webkit-transform:translateX(100%);
  -moz-transform:translateX(100%);
  -ms-transform:translateX(100%);
  -o-transform:translateX(100%);
  transform:translateX(100%);
  -webkit-overflow-scrolling:touch;
  -webkit-transition:-webkit-transform .4s 0s;
  -moz-transition:-moz-transform .4s 0s;
  transition:transform .4s 0s
}
.et_mobile_menu {
	min-height:100vh;
	height:100%;
	display:block!important;
	padding-top:40px !important;
	padding-bottom:100px !important;
	position:absolute;
	z-index:9998;
	overflow:scroll;
	border-top:none;
	padding-right:0;
	top:0px !important;
	left:-100%;
	position:fixed
}
.et_mobile_menu {
	width:320px;
	margin-left:calc(100% - 340px);
	border-top: 0px solid #fff;
	font-weight: normal;
}
.et_mobile_menu .menu-item-has-children > a:hover, .et_mobile_menu .menu-item-has-children > a {
	background-color: transparent;
	font-weight:normal;
}
.et_pb_menu ul li.current-menu-item a:hover, .et_pb_menu ul li.current-menu-item a {
	color:var(--color-1);
}
.mobile_nav.opened .mobile_menu_bar::before {
  content:"\4d";
}
.mobile_nav.opened:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .8);
}