/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* nunito-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/nunito-sans-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/lato-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/lato-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* architects-daughter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/architects-daughter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body { font-family:  "Lato", sans-serif; font-weight: 400; font-size: 1.1em; }
.nav > li > a { font-family:  "Lato", sans-serif; font-weight: 700; }
/*.off-canvas-center .nav-vertical > li > a {  font-size: 1.5em; padding-bottom: 0; padding-top: 0;}*/
h1, h2,h3,h4,h5,h6, .heading-font { font-family: "Nunito Sans", sans-serif; font-weight: 700; }
.alt-font { font-family: "Architects Daughter", sans-serif;  }




#main { /*background: #fff url('/img/bg.png') top 100px center no-repeat; background-size: cover; */
/*background: rgb(160,202,60,0.1);*/
/*background: linear-gradient(180deg, rgba(160,202,60,0.1) 0%, rgba(160,202,60,1) 100%);*/
/*background: linear-gradient(180deg, rgba(160,202,60,0.1) 0%, rgba(160,202,60,.2) 18%, rgba(160,202,60,.2) 60%, rgba(160,202,60,1) 80%);*/
}

#main a:not(.button) { text-decoration: underline; }
.current_page_item a { background-color: rgba(0,0,0,.1); }



.h1, h1 { font-size: 2.5em; font-weight: 300; }
p.lead, a.lead { font-size: 1.25em; }
.gdriehoek-links > .bg-fill { background: url(/wp-content/uploads/2022/02/gele-driehoek-links.svg) top left no-repeat; background-size: auto !important; background-position: -1em 50%; }

.dark .button.secondary { color:#064; }

/*tegels*/
/*.tegel a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; z-index: 2; }
/*.tegel:hover { top: 1px; border-radius: 10px;}*/
/*.tegel a + div { position: absolute; z-index: 1; }*/
.tegel .image-cover img { 
width: 80%;
height: 80%;
left: 40%;
right: 0;
top: 30%;
bottom: 0;
position: absolute;
-o-object-position: 50% 50%;
object-position: 50% 50%;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;"; }
.tegel .col-inner { padding: 0; }
.tegel .box-image { z-index: 20; }
.tegel .image-cover .overlay { background-color:transparent !important; }
.tegel .box-text { text-align: left; color:#444; font-size: 1em; }
.tegel .box-text h2 { font-size: 1.1em; color:#444; font-weight: bold; }
.tegel .box-text h3 { font-size: 1.1em; color:#444; /*margin-top: 1em;*/ }
.tegel .box-text h5 { font-size: .8em; margin-top: 1.5em; color:#444; }

.tegel .box-overlay.dark .box-text { text-shadow: none; }
.tegel .box-overlay.dark p { color:#444 !important; }
.tegel .hovertekst { display: none;  }

@media screen and (max-width: 549px) {
.tegel .box-text h2 { font-size: 1.4em; }
.tegel .box-text h3 { font-size: 1.4em;  }
.tegel .box-text h5 { font-size: 1em; margin-top: 1.5em; }
}

@media screen and (min-width: 550px) {
.tegel .box-text h2 { font-size: 1.2em; }
.tegel .box-text h3 { font-size: 1.2em;  }
.tegel .box-text h5 { font-size: 1em; margin-top: 1.5em; }
}

@media screen and (min-width: 1220px) {
.tegel .hovertekst { display: inline-block; font-size: .8em; padding-top: .5em; opacity: 0;  }
.tegel:hover .hovertekst { opacity:1; transition: opacity 2s; }

.tegel .box-text h2 { font-size: 1.4em; }
.tegel .box-text h3 { font-size: 1.4em;  }
.tegel .box-text h5 { font-size: 1em; margin-top: 1.5em; }

}

.tegel.wit .box-text h2, .tegel.wit .box-text h3, .tegel.wit .box-text h5 { color:#fff; }
.tegel.wit .box-overlay.dark p { color:#fff !important; }

/*.themaheader .bg-fill { background-size: cover !important; background-position: 50% 0%; }*/
/*.bgcontain { position: relative; }*/
/*.bgcontain .bg-fill { background-size: contain !important; }*/
.bgcontain .section-bg :is(img, picture, video) { top: 0em; bottom:0em; right: -12%; left: auto; width: 50%; object-fit: none !important;  object-position: 50% 100%; }	

/*.bgcontain .section-bg :is(img,picture,video) {
 height: auto;
 left: 80%;
 object-fit: contain;
 position: absolute;
 top: 10em;
 width: auto;
}
.bgcontain .fill {
	
}*/

.logo-aanbieder { margin-bottom: 1em; }
.logo-aanbieder .banner-bg :is(img,picture,video) {
    height: 100%;
    left: 0;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    position: absolute;
    top: 0;
    width: 100%;
}

.nobgsize .bg-fill { background-size: unset !important; }

.headerslider .flickity-page-dots {
  position: absolute;
  bottom: 15px;
  left: 0%;
  right: 0%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: left;
  line-height: 1;
  top: 2em;
}
.headerslider .slider-nav-dots-dashes-spaced .flickity-page-dots .dot { width: 20px; height: 2px; }

/*.themaheader { background: linear-gradient(180deg, rgba(160,202,60,.1) 0%, rgba(160,202,60,1) 50%); }*/
.themaheader { background: linear-gradient(180deg, rgba(160,202,60,.1) 70%, rgba(160,202,60,.5) 100%); }
ul li.bullet-arrow { border-bottom: none; }


/* mobiel menu*/
.button.icon i {
  font-size: 1.8em;
}
.mfp-close { color:#000; }
.off-canvas-left.dark .mfp-content {
  background-color: rgb(54,179,126);
}
.off-canvas-left .mfp-content {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 80%;
  background-color: rgba(0,0,0,.95);
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  -o-transition: transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
  -webkit-transform: translateX(-270px);
  -ms-transform: translateX(-270px);
  transform: translateX(-270px);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,.5);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,.5);
}
.mobile-sidebar-levels-2 .nav-slide > li > ul.children > li:not(.nav-slide-header) > a, .mobile-sidebar-levels-2 .nav-slide > li > .sub-menu > li:not(.nav-slide-header) > a {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  text-transform: uppercase;
  font-size: .8em;
  letter-spacing: .02em;
  color: rgba(255,255,255,.85);
}


/*contactform 7 sections in help mij kiezen*/
.wpcf7 .section p, .antwoord p { margin-bottom: 1.3em; }
.wpcf7 .section { padding-left: 0 !important; padding-right: 0 !important; }
.helpmijkiezen { padding: 1em; /*background:#f1f1f1 !important;*/ }

.form-flat select { background-color:#fff !important; }

/*************** POPUP: PERSONAL ***************/

.popup-personal img {
    border-radius:99px; 
    border: 5px solid #fff;
    width:120px;
    height:120px;
	background: #fff;
}

.popup-personal .col-inner {
     margin-top:-80px;
}

.lightbox-content {
    border-radius:5px; 
}
.mfp-close { color:#fff; }
.berekenbmi { padding: 30px; border: 2px solid #f1f1f1; }


/*parallax effect*/
.aa-parallax { min-height: calc(100vh - 160px) !important; /*height: calc(100vh - 160px) !important;*/ }
.aa-parallax .bg, .aa-parallax .bg.bg-loaded, .aa-parallax {
  /* The image used */
  /*background-image: url("/wp-content/uploads/header-home-2.jpg");*/

  /* Set a specific height */
  /*min-height: 600px;*/

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  /*background-position: top 100px right;*/
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover !important;
}