/* Applied colours */
/*
Plain text: #000;
Green titles: #6b8d2f;
Links: #6b8d2f;
Visited links: #94bd4c;
Hover links: #496615;
Active links: #6b8d2f;

Borders: #e2e2e2;
Button link: #f47b23;
Button visited: #f47b23; 
Button hover: #c85b0c;
Button active: #c85b0c; 


*/

/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
 
 

/* @font-face {
     font-family:'FontAwesome';
     src:url('/fonts/fontawesome-webfont.eot?v=4.7.0');
     src:url('/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
     url('/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
     url('/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
     url('/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
     url('/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
     font-weight:normal;
     font-style:normal
 } */
 @font-face {
    font-family: 'Genericons';
    src: url('../fonts/genericons/genericons-regular-webfont.woff');
}


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* <uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 300 to 800 */

/*.open-sans-<uniquifier> {
  font-family: 'Open Sans', sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 75;
} */
.alegreya-sans-thin {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 100;
  font-style: normal;
}

.alegreya-sans-light {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 300;
  font-style: normal;
}

.alegreya-sans-regular {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.alegreya-sans-medium {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 500;
  font-style: normal;
}

.alegreya-sans-bold {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-style: normal;
}

.alegreya-sans-extrabold {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-style: normal;
}

.alegreya-sans-black {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 900;
  font-style: normal;
}

.alegreya-sans-thin-italic {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 100;
  font-style: italic;
}

.alegreya-sans-light-italic {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 300;
  font-style: italic;
}

.alegreya-sans-regular-italic {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 400;
  font-style: italic;
}

.alegreya-sans-medium-italic {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 500;
  font-style: italic;
}

.alegreya-sans-bold-italic {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-style: italic;
}

.alegreya-sans-extrabold-italic {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-style: italic;
}

.alegreya-sans-black-italic {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 900;
  font-style: italic;
}
.arvo-regular {
  font-family: 'Arvo', serif;
  font-weight: 400;
  font-style: normal;
}

.arvo-bold {
  font-family: 'Arvo', serif;
  font-weight: 700;
  font-style: normal;
}

.arvo-regular-italic {
  font-family: 'Arvo', serif;
  font-weight: 400;
  font-style: italic;
}

.arvo-bold-italic {
  font-family: 'Arvo', serif;
  font-weight: 700;
  font-style: italic;
}




/* CSS base */
html, body, h1, h2, h3, h4, h5, h6, div, p, ul, ol, li, dl, dt, dd, form, fieldset, legend, blockquote, table, tr, th, td {
	margin: 0; 
	padding: 0; 
	border: 0;
	}
	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, th {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}
	
	
body {
    font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 19px;
	line-height: 1.4em; 
	text-align: center; 
	color: #000;
	text-align: left;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	}
	#loginform, .login form .input, .login input[type="text"], .login input[type="submit"], p, ul, ol, p#nav, p#nav a, .login label {
	font-family: 'Alegreya Sans',sans-serif !important;
	}
strong {font-weight: 700;}
li {list-style-type: none;}
.inhoudelijke-opzet li {list-style-type: disc; list-style-position: inside;}
.inhoudelijke-opzet  ul {margin-bottom: 1em;}
input, textarea, select, option {font-size: 100%; border: 0;}
figure {margin: 1em 0;}
figcaption {font-size: .8em; font-style: italic; font-weight: 400;}







/* h1 {font-size: 1.2em; font-weight: 600; letter-spacing: 0.02em; margin-bottom: .5em;} */


/*
h1 {font-family: 'Open Sans', sans-serif; font-optical-sizing: auto; font-weight: 700;   font-style: normal; text-transform: uppercase; font-size: 42px !important; letter-spacing: .02em; padding-top: 2em !important; font-variation-settings: 'wdth' 75;}

h1 span {font-size: .4em; text-transform: uppercase; letter-spacing: .01em; display: block;}
*/

h1 {
  font-family: 'Open Sans', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-variation-settings:
    "wdth" 75;
  margin-top: 3em;
  padding-top: 1em;
  padding-bottom: 1em;
  word-wrap: break-word;
  line-height: 1.1;
}

h2 {font-family: 'Arvo', 'Open Sans', Arial, sans-serif !important; font-size: 1.8em; line-height: 1.2em; font-weight: 400; margin-bottom: .5em; padding-top: 30px;}


h3 {font-family: 'Alegreya Sans', 'Open Sans', Arial, sans-serif; font-size: 1em; font-weight: bold; margin-bottom: 0em;}

h4 {font-size: 1em; margin-top: 2em; margin-bottom: .5em;}
#het-consult h4 {margin-top: .5em;}
img {border: 0;}

a {color: #a50000;}
a:visited {color: #a50000;}
a:hover {color: /*#df7e01;*/ orange;}
a:active {color: #a50000;}

p {margin-bottom: .8em}




/* CSS structure */

	#header, 
	#content, 
	footer {
		width: 100% !important;
		max-width: 980px;
		margin: 0 auto; 
		text-align: center; 
		background: #fff; 
		clear: both;
		box-sizing: border-box;
		display: block;
		}
	#content {background: #fafafa;}
img {width: 100%; height: auto}

.wrap {box-sizing: border-box; margin: 1em; text-align: left; display: block; /*border: 1px solid blue;*/}
.wrap div {box-sizing: border-box; /*background: yellow;*/ }

.wrap.inhoudsopgave {margin-bottom: 0; padding-bottom: 2em;}

/* Header */

header {text-align: center; padding-top: 0.5em}
div.logo {font-style: italic; color: #a50000;}
.logo span {display: none;}
div.logo h1 {margin-top: 0;}
.logo img {width: 75% /*!important*/; height: auto;}

/* MENU MOBIEL */

/* @media screen and (max-width: 885px) { */


 
 #nav #main-nav, nav {
     margin-top: 10px;
 }
/* .site-header-inner {
       border-top: 1px solid orange;
    }*/
    
    #content .banner {
        overflow: hidden;
        height: auto;
        margin-bottom: 1.5em;
    }
    #content .banner img {
        height: 300px;
        width: 150%;
        margin-left: -250px;
    }

    body {background: #fff;}
    #header, #content, footer  {
        width: 100%;
        max-width: inherit;
    }
    .site-header-inner {
        width: 100%;
        text-align: center;
    }
    
    .logo {
        float: none;
        width: auto;
        margin: .3em auto 3em;
    }
    
    .logo h1 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0;
    }
    .site-title {
            margin-left: 15px;
        }
    #nav, .site-header-inner {
        font-size: 1.0em;
    }
    nav.main-navigation {
        float: none;
        max-width: /*13em*/ 100%;
        width: 100%;
        position: absolute;
        z-index: 1000000;
        top: 4em;
        left: 0;
        border: 0;
        margin-left: 0;
    }
    div.menu-main-menu-container {
        background: #fff;
        position: absolute;
        width: 100%;
        top: 88px;
        left: 0;
        -webkit-box-shadow: 0;
        -moz-box-shadow: 0;
        box-shadow: none;
        text-align: left;
    }
    nav.main-navigation ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
        border-top: none;

    }
    nav.main-navigation ul ul.submenu {
        display: block;
        background: #fff;
        font-size: .8em;
        border-bottom: none;
        border-top: 0;
    }
    nav.main-navigation ul ul.submenu:after {
        clear: both;
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
    }
    nav.main-navigation ul li {
        display: inline-block;
        position: relative;
        height: auto;
        border-left: 0;
    }
    nav.main-navigation ul li.dest span {
        background: none;
    }
    .main-navigation ul li a:link {
        display: block;
        text-decoration: none;
        padding: 15px 10px 10px;
        background: none;
    }
    .main-navigation ul li a:visited {
        color: #000;
    }
    .main-navigation ul li a:hover {
        color: #BF5317;
        background: /*url(/img/bg-tabs.png) no-repeat center top*/ none;
        border: 0;
    }
    .main-navigation ul li:hover {
        border: 0;
        background: none;
    }
    .main-navigation ul li a:focus {
        color: #922a24;
        background: #fff;
        background-image: none !important;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    
    .main-navigation ul li:hover > ul {
        display: block;
        opacity: 1;
        visibility: visible;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    .main-navigation ul ul {
        background: #fff;
        box-shadow: none;
        display: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        float: left;
        text-align: left;
        opacity: 0;
        position: absolute;
        top: 40px;
        left: 0;
        visibility: hidden;
        z-index: 99999;
    }
    .main-navigation ul ul:hover > a {
        color: #07a1f2;
    }
    .main-navigation ul ul li {
        padding: 5px 0;
    }
    .main-navigation ul ul li a {
        color: white;
        width: 180px;
    }
    .main-navigation ul ul ul {
        left: 100%;
        top: 0;
    }
    
    /* Small menu */
    .menu-toggle {
     font-size: 1.85em;
        line-height: 1.62162em; 
     /* clear: none;*/
        color: #333;
        cursor: pointer;
        display: none;
        float: right;
        font-weight: bold;
        margin: 0;
        padding: 3.75px 0;
        position: absolute;
        top: 1em;
        left: calc(50% - 18px);
        
    /*    text-align: left;
        text-transform: uppercase;*/
        
    }
   .menu-toggle:before {
        color: #000;
        content: "\f419";
        display: inline-block;
        float: right;
        font-size: 18px;
        padding: 15px;
        vertical-align: middle;
        -webkit-font-smoothing: antialiased;
        font-family: "Genericons";
        font-size: 24px;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        text-decoration: none;
        vertical-align: text-bottom;
    }
  
    .menu-toggle,
    .main-navigation.toggled .nav-menu {
        display: block;
        clear: both;
    }
    .main-navigation.toggled .nav-menu {
            border-top: 1px solid #d5d5d5;
            }
            

    #menu-main-menu li:first-child a, #menu-main-menu li:first-child span  {
    border-bottom: 0 !important;
    padding-bottom: .3em;
    }
    
    #menu-main-menu li:first-child svg {display: none;}
    .menu-toggle li,
    .main-navigation.toggled .nav-menu li {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .menu-toggle li a,
    .main-navigation.toggled .nav-menu li a,
    .menu-toggle li span,
    .main-navigation.toggled .nav-menu li span {
        border-bottom: 1px solid #d5d5d5;
        border-left: 0 !important;
        border-right: 0 !important;
        padding: .9em 1.2em;
        display: block;
        color: #000;
    }
    .nav-menu li li span, .nav-menu li li a {
    	border-bottom: 0;
    } 
     
    
    .main-navigation.toggled .nav-menu li:last-child a {
        padding-bottom: 18px;
    }
     .main-navigation.toggled .nav-menu li li:last-child a {
        padding-bottom: .7em !important;
        
    }
    
    .main-navigation.toggled .nav-menu li li a, .main-navigation.toggled .nav-menu li li span {
        padding: .3em 2.4em;
    }
    .main-navigation.toggled .nav-menu li .submenu li:last-child a {
        padding-bottom: 10px;
    }
    
    .main-navigation.toggled .nav-menu li.pf.dest span {
        border-bottom: 0;
        
    }
    
    .main-navigation.toggled .nav-menu li.pf a  {
        border-bottom: 0;
    }
    .main-navigation.toggled .nav-menu .submenu li a  {
        border-bottom: 0;
    }
    
    .menu-toggle ul,
    .main-navigation.toggled .nav-menu ul {
        background: transparent;
        box-shadow: none;
        clear: both;
        display: block;
        float: none;
        opacity: 1;
        visibility: visible;
        margin: 0;
        position: relative;
        top: auto;
        left: auto;
        border-bottom: 1px solid #d5d5d5;
    }
    .menu-toggle ul a,
    .main-navigation.toggled .nav-menu ul a {
        padding-left: 30px;
    }
    .menu-toggle ul ul,
    .main-navigation.toggled .nav-menu ul ul {
        clear: both;
        float: none;
        left: auto;
        top: auto;
        width: 100%;    
    }
    .menu-toggle ul ul a,
    .main-navigation.toggled .nav-menu ul ul a {
        padding-left: 45px;
    }
    .menu-toggle ul ul ul a,
    .main-navigation.toggled .nav-menu ul ul ul a {
        padding-left: 60px;
    }
    .menu-toggle ul a,
    .main-navigation.toggled .nav-menu ul a {
        width: 100%;
    }
    .menu-toggle ul a:hover,
    .main-navigation.toggled .nav-menu ul a:hover {
        background: none;
    }
    
   
    
    .main-navigation ul {
        display: none;
    }
    
    .menu-toggle {
        clear: none;
    }

/* Text meant only for screen readers */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  left: -1000em;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
  background-color: #fff;
  border: 1px solid #000;
  -webkit-box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 10px;
  box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 10px;
  clip: auto !important;
  display: inline-block;
  font-weight: 600;
  line-height: 24px;
  padding: 24px;
  z-index: 100000;
  position: absolute !important;
  top: 24px;
  left: 24px;
}


/* Page Title */

.title h1:before {
  font-size: 21px;
  margin: 10px 0 14px !important;
  margin-top: 10px;
  color: #922a24;
  content: 'De Haarvriendelijke Kapper';
  display: block;
  line-height: .1em;
  margin-top: 1em !important;
}

/* # Statusbox */

.wrap div.statusbox {background: #f0f3f6; font-family: 'Alegreya Sans', 'Open Sans', arial, sans-serif;}
.wrap div.statusbox div { margin: 0 auto; text-align: center; background: none;}

.statusbox:after {clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;}
.statusbox div {width: 100%; /*float: left; margin-top: .5em;*/ border-bottom: 1px solid #e2e7ed; padding-top: 1em; padding-bottom: 1em;}
.statusbox div a {background: #a50000; text-transform: uppercase; color: #fff; padding: .5em 1.3em; font-size: .8em; display: inline-block; margin: .5em auto; width: auto; text-decoration: none; font-weight: 400; letter-spacing: .05em;}
.statusbox span {font-size: .8em; /*color: #728188*/ color: #474747; text-transform: uppercase; display: block;}
.statusbox .prijs p {font-weight: 600; font-size: 1.8em; padding-top: .2em; margin-bottom: 0;}
.statusbox .cta {border-bottom: 0;}
.wrap div.statusbox div.huidige-status p {background: #e2e7ed !important; text-transform: uppercase; font-size: 1em; display: inline-table; padding: .3em .8em;
  font-weight: 600; letter-spacing: .05em;}
/* # Overzicht */

.wrap.overzicht {margin: 0 0 2em; padding: 0 1em 1em; background: #fdf0df;}
.overzicht .right {margin-bottom: 2em;}
.overzicht h2 {color: #922a24;}
.overzicht .right ul a {color: #922a24; text-decoration: none;}
.overzicht li {list-style: disc outside !important; margin-left: 1em;}

/* # Gallery */    
.wrap.gallery:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;}
.gallery div {width: 47%; float: left;}
.gallery div:nth-of-type(2n) {float: right;}
.gallery img {margin-bottom: 8%;}

/* # Button Call to action */

.btn-cta {}
.btn-cta div {width: 80%; margin: 0 auto; text-align: center; background: none;}
.btn-cta div a {background: #f47b23; text-transform: uppercase; font-family: 'Alegreya Sans', arial, sans-serif; font-weight: 400 !important; color: #fff; padding: 1em 1.3em; font-size: 1.2em; display: inline-block; margin: 1em auto; width: auto; text-decoration: none; font-weight: 300;}

.btn-cta div a:hover {background: #c85b0c;}


/* # Cursusopzet */


.kosten .box {padding: 1em; background: #fdf0df;}
.kosten .box h2 {color: #922a24; font-size: 1em; padding-top: 0;}
.kosten .box ul {margin-left: 1em;}
.kosten .box li {list-style: disc outside;}

/* # Kosten */

/* # Teller */

.teller div {padding-top: 1em;  text-align: center;
} 
.teller div div {margin-bottom: 2em;} 
.teller svg {width: 48px; height: 48px; fill: #4B4F58; margin-bottom: 2em;}
.teller p { font-weight: 400;}
.teller span {font-weight: 700; font-size: 4.2em; display: block; color: #922a24;  margin-bottom: .5em;} 

/* # Reviews */


.reviews h2 {margin-bottom: 1em;} 
.reviews svg {height: 48px; width: 48px; fill: #922a24;}
.reviews blockquote {font-family: 'Alegreya Sans', 'Open Sans', arial, sans-serif;}
.reviews blockquote p {color: #922a24; font-style: italic; font-size: 2em; font-weight: 400; line-height: 1.3em;}
.reviews blockquote span {color: #888; font-weight: 400; font-size: 1.2em;}


/* # Accreditatie */

.accreditatie h3 {font-family: 'Arvo', serif; color: #922a24; font-size: 1.2em; font-weight: 300; margin-bottom: 1em;}



/* Inhoudsopgave LearnDash */

.inhoudsopgave h3 {margin-bottom: .8em;}
.inhoudsopgave ol {}
.inhoudsopgave ol ol {border: none; margin-left: 1em; padding-left: 0; padding-top: .5em; margin-bottom: 1em;}
.inhoudsopgave ol li {font-weight: 600; color: #922a24; margin-bottom: 1em; border: 2px solid #e2e7ed; padding-top: 1em; padding-left: 1em; margin-bottom: 1em;}
.inhoudsopgave ol li.hst {padding-bottom: 1em;}
.inhoudsopgave ol li li {list-style-type: circle; list-style-color: red; font-weight: 300; color: #000; margin-bottom: 0; border: 0; padding-top: 0; padding-left: .3em;}
.inhoudsopgave ol li span {display: block; font-size: .8em; color: #728188; font-weight: 400;}
.inhoudsopgave ol li span span {display: inline-block; color: #922a24; padding-left: .5em; padding-right: .5em;}

.inhoudsopgave ol li:before {
    content:"";
    font-size:1em;
    font-weight: 700;
    vertical-align:middle;
    line-height:20px;
}


/* OPRUIMEN ! */

.btn-cta span {display: inline; border: 0; border-radius: 0;}
.btn-cta span:link {background: #f47b23;}
.btn-cta span:visited {background: #f47b23;}
.btn-cta span:hover {background: #c85b0c;}
.btn-cta span:active {background: #c85b0c;} 
.btn-cta span a {color: #fff; text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 20px;}





div.up {
    
    position: fixed;
    right: 30px;
    bottom: 30px;
    margin-bottom: 0;
    z-index: 2000000;
    padding: 14px 0 0;
    background: #922a24;
    padding-left: 10px;
    border-radius: 0;
    overflow: hidden;
    width: 40px;
    height: 40px;
    
}
div.up svg {width: 40px; height: 40px; fill: none;}
div.up polyline {stroke: #fff; stroke-width: 1;}
div.up a:before {/*content: '';  -webkit-font-smoothing: antialiased; vertical-align: top;  font-family: 'Font Awesome 5 Pro'; color: #fff;*/ margin-right: 40em;}
div.up a {
    
    text-decoration: none;
    color: #fff;
    width: 40px !important;
    height: 40px;
    display: block;
    box-sizing: border-box;

}




/* Footer */
footer {color: #fff;}

footer .bg-wrap {background-color: #fafafa;}
footer .bg-wrap, footer .bg-wrap img {display: block; margin: 0 0 -1px; border: 0;}
footer .wrap {margin: 0; padding: 1em; background: #922a24;}
footer .wrap img {width: 80%; margin-bottom: 1em;}
footer .left div, footer .right, footer .copyright {margin-left: 15%;}

footer h3 {font-family: 'Open Sans', arial; font-weight: 400; font-variation-settings: "wdth" 100;}
footer ul {margin: 0 0 14px; padding: 1.6em 0 2.2em 0; background: none;}
footer .right ul {padding-bottom: 1.5em;}
footer a,
footer a:link, footer .copyright a:link,  
footer a:visited, footer .copyright a:visited,
footer a:hover, footer .copyright a:hover,
footer a:active, footer .copyright a:active {color: #fff !important;}
footer .copyright {font-size: .9em;  line-height: .8em;}
footer .copyright ul {padding-top: .5em;}  
footer .copyright .mp {font-size: .9em; margin-top: 0em;}