/*
    Theme Name: Probu Bootstrap
    Template: genesis
*/

/*** extra css  ****/

.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {font-size: 1.5em;}
.navbar-default .navbar-toggle .icon-bar {background-color:#fff;}


/*** STYLES ****/
    html,body {height:100%;}

    body {background: url(images/concrete_seamless.png);}

    html,body,p {font-family:"Open Sans",verdana,arial,tahoma,sans-serif;line-height:2;font-size:16px!important;}
    

    
    h1,h2,h3,h4,h5,h6 {
        font-family: 'Vidaloka', times, serif;
        font-weight:normal;
        color:#0e90a3;
    }
    .page h1,h1 {font-size:2rem;color:#563f2e;}
    .page h2,h2 {font-size:1.6rem;}
    .page h3,h3 {font-size:1.3rem;}
    .page h4,h4,.page h5,h5,.page h6,h6 {font-size:1.1rem}

    a {
        
      transition: all .5s ease-in-out; 
      color: #0e90a3;
      text-decoration: none; }
      a:hover,
      a:focus {
        color: #23527c;
        text-decoration: underline; }
      a:focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px; }
      
   .button,input.button,.paneel .ow-button-hover,.paneel.ow-button-hover {
        color:#fff!important;
        background-color:#0e90a3!important;
        border:0px solid rgba(0,0,0,0)!important;
        text-transform:uppercase;
        border-radius:3px;
        letter-spacing:0.1rem;
        padding:15px 25px!important;
        font-size:1.2rem;   
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease; 
    }
    .button:hover,input.button:hover {
        background-color:#25a6b9;
        text-decoration:none;
    }
    @media (min-width: 768px) {   
        .align-right {text-align:right;}
        .align-center {text-align:center;}
    } 
    
    .home .page-title {display:none!important;}

/*** HEADER ****/
    .entry-title {display: none;} /* verwijder pagina titel op alle paginas */

    .probu-header,.site-footer {background:url(images/wood-bg.jpg);background-size:cover;}
    .title-area {border:1px solid rgba(0,0,0,0);padding:15px 0;}
    
    .header-image .site-title {        
        overflow: hidden;
    }
    
    .header-image .site-title > a {
        margin-top:15px;margin-bottom:15px;
        background: url(images/logo-wit.svg) no-repeat center center;
        float: left;
        min-height: 130px;
        width: 100%;
        background-size:contain;
    }

    .header-image p.site-title a {color:rgba(0,0,0,0)} /*** verberg tekst */
    .header-image p.site-description {display:none;text-align:center;}

    .header-widget {margin-top:60px;}
    .header-widget,.header-widget p,.header-widget a {
        color:#fff;line-height:150%!important;
        font-family: 'Vidaloka', times, serif;
        font-size:18px!important;
    
    }
    
    /*add logo to mobile menu*/ 
    @media (max-width: 767px) {   
        .header-image .site-title > a {
        min-height: 100px; 
        }
        #probu-header {background-size:100vh auto;background-attachment:fixed;}
        
/*        .site-container .title-area {display:none;}
        .navbar-default  .navbar-brand#logo { background: url(images/logo-wit.svg) no-repeat center center;background-position:left center;background-size:contain;}
        .navbar-default  a.navbar-brand#logo {display:block;width:60%;color:rgba(0,0,0,0)}*/
    }
    
/*formulieren opmaak*/
    /*Verwijder de extra ruimte onder het naamveld*/
    body .gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container input[type="text"],body  .gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container select {
        margin-bottom: 0px;
    }
    
/** nav **/
    #nav-collapse-primary {padding:0;} 
    .container.nav-container {padding:0;}
    
    .nav-container .navbar-default {
        background-color: rgba(167, 148, 121, 1);
        border-color: rgba(0,0,0,0);
        border:0px!important;
        margin-bottom:30px!important;
    }
    
    .nav-container .navbar {margin-bottom:0;}
    
    .navbar .navbar-nav {
      display: inline-block;
      float: none;
      vertical-align: top;
    }

    .navbar .navbar-collapse {
      text-align: center;
    }

    .navbar-default a.navbar-brand {
        color:#fff;
    }
        
    .navbar-default .navbar-nav.probu-nav > li > a {
        color:#fff; /* navbar tekstkleur */
        text-transform:uppercase;
        font-weight:500;
        font-size:0.85rem;
        letter-spacing:0.1rem;
    }
    .navbar-default .navbar-nav.probu-nav > li > a:hover, .navbar-default .navbar-nav.probu-nav > li > a:focus,
    .navbar-default .navbar-nav.probu-nav > .active > a, .navbar-default .navbar-nav.probu-nav > .active > a:hover, .navbar-default .navbar-nav.probu-nav > .active > a:focus
    /* css voor submenu toggle */ .navbar-default .navbar-nav.probu-nav > .open > a, .navbar-default .navbar-nav.probu-nav > .open > a:hover, .navbar-default .navbar-nav.probu-nav > .open > a:focus {
        color: #fff; /* navbar actief */
        background-color:#0e90a3;
    }
    .navbar-default .navbar-nav.probu-nav > li > a:hover {
        background-color:#1b9fb2;}
    /** css voor dropdown menu item */
    .nav.probu-nav .open > a, .nav.probu-nav .open > a:hover, .nav.probu-nav .open > a:focus, .nav.probu-nav .open > a {
        color: #fff!important; 
    }
    .nav-container .dropdown-menu {
        background-color: rgba(167, 148, 121, 1)!important;
    }
    .nav-container .dropdown-menu > li > a:hover,.nav-container  .dropdown-menu > li > a:focus {
        color: #fff;
        background-color: rgba(0,0,0,0);
    }
    .nav-container .dropdown-menu > .active > a,.nav-container  .dropdown-menu > .active > a:hover, .nav-container .dropdown-menu > .active > a:focus {
        background-color: #86A498;
        color: #fff;
    }
    .nav-container .dropdown-menu > li > a {
        color: #fff;
    }


/*main*/

.site-inner {padding:45px 0;}

/*.webshop-sidebar,.webshop-sidebar a,.webshop-sidebar p,.webshop-sidebar h4 {
    color:#fff;
}*/
.webshop-sidebar a {
    color:#fff;
}
.webshop-sidebar {
    /*background-color:#563f2e;*/
    padding:5px 10px;
}
.webshop-sidebar .cat-item {
    /*background-color:rgba(255,255,255,0.2);*/
    /*background-color:#0e90a3;*/
    background-color:#0e90a3;
    padding:2px 6px; margin-bottom:10px;
    position:relative;
    clear:both;
    padding-right:25px;
}
.webshop-sidebar .cat-item span.count {   
    background-color:#a79479;
    display:inline-block;
    position:absolute;
    right:-3px;top:-3px;
    /*float:left top;*/
    margin-left:5px;
    float:right;
    
    width:24px;height:24px;
    font-size:10px;
    text-align:center;
    padding-top:4px;
    border-radius:14px;
    box-shadow:-3px 3px 3px rgba(0,0,0,0.3);
}

/*Maak images 100% breedte op mobile in gallery*/
@media (max-width: 767px) {  
    .msnry_item,.msnry_item img,.photoswipe_showme{width:100%!important}    
}

.msnry_item img{    
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */}
.msnry_item img:hover {    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */}

/** carousel */
.item {display:none;} /* carousel fix */
#myCarousel .slide {background-position:center center;background-size:cover;}

/*.slide {
    display: flex;
    flex-direction: column;}
.slidefill { 
    flex-grow: 1; }*/

#myCarousel .caption {
    width:100%;
    color:#fff;padding:10px;
    font-size:0.8rem;

    font-size:0.9rem;text-align:center;
}

#myCarousel .caption,#myCarousel .caption p,#myCarousel .caption a,#myCarousel .caption h1,#myCarousel .caption h2,#myCarousel .caption h3,#myCarousel .caption h4,#myCarousel .caption h5,#myCarousel .caption h6
    {line-height:1.5;color:#fff;text-shadow: 0 4px 4px rgba(0,0,0,.8)}
#myCarousel .caption.zwart,#myCarousel .caption.zwart p,#myCarousel .caption.zwart a,#myCarousel .caption.zwart h1,#myCarousel .caption.zwart h2,#myCarousel .caption.zwart h3,#myCarousel .caption.zwart h4,#myCarousel .caption.zwart h5,#myCarousel .caption.zwart h6
    {color:#000;text-shadow: 0 1px 4px rgba(255,255,255,1)}
#myCarousel .caption a {border-bottom:1px dotted #fff;display:inline-block;}
#myCarousel .caption.zwart a {border-bottom:1px dotted #000;}
#myCarousel .caption a:hover {transform: scale(1.1); }

#myCarousel .carousel-indicators {
    bottom: 0px;
}

a.carousel-control{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.caption-wrap {
  height:100%;
  display:flex; 
  
}

.caption-wrap.center {justify-content: center;align-items: center; /* to center the caption vertical */}
.caption-wrap.top {} /* no css needed */
/* to align the caption to bottom */ 
    .caption-wrap.bottom {
       display: flex;
       flex-direction: column;margin-bottom:60px;  
   }
   .caption-wrap.bottom .slidefill {flex-grow: 1;}

/* slide sizes */
.slide {height:25vh;}
@media (max-width: 769px) {
    #myCarousel .caption,#myCarousel .caption p,#myCarousel .caption a {
        font-size:0.9em!important;
    }
    #myCarousel .caption h1,#myCarousel .caption h2,#myCarousel .caption h3,#myCarousel .caption h4,#myCarousel .caption h5,#myCarousel .caption h6 {
         font-size:1.3em!important;
    }
}


@media (min-width: 576px) { 
    .slide {height:33vh;}
}

@media (min-width: 768px) {
    /*#myCarousel {position:absolute;top:0;left:0;right:0;}*/
/*    #myCarousel .caption {width:40%;}*/
    .slide {height:40vh;}
    .contentcol {margin-top:40vh;} 
}
@media (min-width: 992px) { 
    /*#myCarousel .caption {width:33%;}*/
    .slide {height:50vh;}
    .contentcol {margin-top:50vh;} 
}
@media (min-width: 1200px) {  }

.align-right {width:100%;text-align:right;}


/** footer */
.site-footer, .site-footer a,.site-footer p,.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,.site-footer h6,.site-footer h5 {color:#fff;}
.site-footer .widget_sow-google-map p,.site-footer .widget_sow-google-map a {color:#0e90a3!important;}
.site-footer a {font-weight:bold;border-bottom:1px dotted #0e90a3;}
.site-footer {padding:30px 0;}
    .credits {text-align:center;}
    .credits .branding {text-transform:uppercase;font-size:0.8rem;}
    
.site-container .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.site-container textarea{
    background-color:rgba(255,255,255,0.8);
    color:#000;
    border:none;
    border-bottom:3px solid #0e90a3;
}	
/*Page loader, icoon laten zien totdat pagina is geladen*/
    /* This only works with JavaScript, 
    if it's not present, don't show loader */
    .no-js #loader { display: none!important;  }
    .js #loader { display: block; position: absolute; left: 100px; top: 0; }
    .se-pre-con {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
        display:flex;
        justify-content: center;
        align-items: center;
    }	
    .center {text-align:center;}
	    a.back-to-top i {font-size:1.2rem;}
    a.back-to-top {	
	width: 40px;
	height: 40px;
	position: fixed;
	z-index: 80;
	right: 20px;
	bottom: -200px;
	background: #0e90a3;
        color:#fff!important;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.37);
        -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.37);
        box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.37);
    }
    a.back-to-top.to-top-active {
        bottom:20px;
    }

/*** voor RESPONSIVE CSS ****/
@media (max-width: 769px) {
    header,footer {text-align:center;}
    #header-bar {padding:3px 0}
    .probu-build .site-title a {margin-top:0;margin-bottom:0;}
}



/*** Nieuws css ****/
.probu-news .single-featured-image,.probu-news .entry-categories {display:none;}
.probu-news .entry-title {display:block;margin-bottom:0;}
.probu-news .entry-meta {color:#999}



/*** voor hergebruik ****/
/*// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap*/


/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {  }
@media (min-width: 576px) and (max-width: 767px) {  }
@media (max-width: 767px) {  }

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {  }
@media (min-width: 768px) and (max-width: 991px) {  }
@media (max-width: 991px) {  }

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {  }
@media (min-width: 992px) and (max-width: 1199px) {  }
@media (max-width: 1199px) {  }

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  }