/*
 Theme Name: #JeBentNietAlleen 1.0
 Theme URI: http://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: http://www.elegantthemes.com
 Redesign: QUEM Identiteit Makers
 Redesign URI: https://www.quem.nl
 Template: Divi
 Installation: 28.02.2019
 Last update: 28.02.2019
*/

/* Import Styling
------------------------------------------------------- */
 
@import url("../Divi/style.css");
@import url("../jbna/cf7.css");
@import url("../jbna/MyFontsWebfontsKit.css");



/* Custom Font
------------------------------------------------------- */

/* Mont-Regular
/* Mont-SemiBold
/* Mont-Book
/* Mont-Bold
/* Mont-Black

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

p,body {
    font-family:'Mont-Regular';
}

h1,h2,h3,h4 {
        font-family:'Mont-Bold';
}

/* CSS styling
------------------------------------------------------- */

.bericht_intro {
	font-size: 1.6em !important;
}

.intro_small {
	font-size: 1.3em !important;
	line-height: 1.8em !important;
}

.quote p {
	font-family:'Mont-Bold';
	font-size: 1.4em;
	line-height: 1.4em;
	color: #e94243;
	border-left: 0px;
	padding-top: 60px;
}

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(https://www.jebentnietalleen.nl/wp-content/uploads/2019/07/Beeldmerk-Website.png);
}

/* Header and footer
------------------------------------------------------- */
#top-menu li {
	font-size: 16px;
}
#top-menu .menu-item a {
	font-size: 16px;
	font-weight: 400;
}

.nav li ul {
	width: 300px;
}

.bottom-nav li {
    font-weight: 400;
}

#top-menu li li a {
	width: 260px;
}

.et_header_style_left #et-top-navigation nav>ul>li>a, .et_header_style_split #et-top-navigation nav>ul>li>a {
	padding-bottom: 40px !important;
}
.et_header_style_left .et-fixed-header #et-top-navigation nav>ul>li>a, .et_header_style_split .et-fixed-header #et-top-navigation nav>ul>li>a {
    padding-bottom: 20px !important;
}
@media screen and (min-width: 981px){
	.et-fixed-header #top-menu li a {
		font-size: 16px !important;
	}	
}
.et-fixed-header #top-menu li a {
	font-size: 16px;
}

#top-menu>li:last-child .sub-menu {
    right: 0;
}



.wp-caption {
    border: none;
    background-color: #222;
}

/* Custom Styling Template
------------------------------------------------------- */

/* Posts Footer*/

.single .et_pb_post {
    margin-bottom: -27px;
}
.single .post {
    padding-bottom: 0;
}

.row1 p {
	color: #e94243 !important;
}

/* Verhalen CSS */

.verhalen .et_pb_image img {
    height: 100%;
    width: auto;
    max-width: initial;
}

.verhalen .et_pb_column.et_pb_column_1_3 {
	margin-bottom: 50px;
}

.verhalen .et_pb_column.et_pb_column_1_3:nth-child(3n+3) {
    margin-right: 0;
}

.verhalen#activiteit .absolute {
	position: absolute;
    max-height: 500px;
    height: 100%;
    max-width: 100%;
    bottom: 81px;
    transform: translateY(50%);
    cursor: pointer;
    transition: filter 0.4s;
    object-fit: cover;
} 
.verhalen.actueel#activiteit .absolute {
    position: relative;
    max-height: 500px;
    height: 500px;
    max-width: 500px;
    width: 500px;
    cursor: pointer;
    transition: filter 0.4s;
    object-fit: cover;
    transform: inherit;
    bottom: inherit;
}
.verhalen.actueel#activiteit .absolute.zoomed {
    position: absolute;
}
.verhalen#activiteit .zoomed img {
    position: relative;
    bottom: initial;
    transform: translateY(0);
    max-height: 100%;
    margin: 0 auto;
    cursor: default;
    height: auto;
}
.actueel-section * {
    color: #fff !important;
}
.actueel-section img {
    max-height: 240px;
    height: 240px;
    object-fit: cover;
}
.actueel-section a.more-link {
    border-width: 0px!important;
    border-radius: 0px;
    background-size: contain;
    background-position: center;
    width: 200px;
    background-repeat: no-repeat;
    background-blend-mode: normal;
    background-image: url(https://www.jebentnietalleen.nl/wp-content/uploads/2019/03/Buttons-Large-Geel.png);
    display: inline-block !important;
    padding: 20px;
    font-size: 20px;
    margin-top: 20px;
}
.actueel-content .et_pb_row {
    max-width: 864px;
}
.actueel-section a.et_pb_button.et_pb_bg_layout_light {
    border-width: 0px!important;
    border-radius: 0px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: normal;
    background-image: url(https://www.jebentnietalleen.nl/wp-content/uploads/2019/03/Buttons-Large-Geel.png);
    min-width: 200px;
}
#verhaal p {
    width: 57.8%;
}
a.alle-berichten {
    margin: 30px auto 0;
    border-width: 0px!important;
    border-radius: 0px;
    font-size: 18px;
    padding: 20px;
    width: 320px;
    text-align: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    background-blend-mode: normal;
    background-image: url(https://www.jebentnietalleen.nl/wp-content/uploads/2019/03/Buttons-Large-Rood.png);
}
#verhaal blockquote {
    font-size: 1.4em;
    line-height: 1.4em;
    color: #e94243;
    border-left: 0px;
    padding-top: 85px;
    padding-left: 0;
    background-size: initial;
    background-position: top left;
    background-image: url(https://www.jebentnietalleen.nl/wp-content/uploads/2019/03/Quote-v1-Small.png);
    background-repeat: no-repeat;
    margin-left: -120px;
    margin-bottom: 80px;
}
#verhaal.actueel-content blockquote {
    margin-left: 0;
    margin-bottom: 20px;
    margin-top: 50px;
}
#verhaal blockquote p {
	width: calc(75% + 120px);
	font-family: 'Mont-Bold';
}
#verhaal img {
    width: calc(57.8% + 120px);
    margin-left: -120px;
    display: block;
    margin-bottom: 9px;
}
#verhaal .onderschrift {
    color: #7b7b7b;
    font-weight: 400;
    border-left: 4px solid #eb4340;
    padding: 15px;
    font-size: 15px;
}
.verhalen#activiteit .absolute.author {
    bottom: 0;
    top: initial;
    display: flex;
    flex-flow: column-reverse;
    margin-bottom: 20px;
    pointer-events: none;
}
body #page-container .et_pb_section.more-actueel .et_pb_button_2 {
    border-width: 0px!important;
    border-radius: 0px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 205px;
    background-blend-mode: normal;
    background-image: url(https://www.jebentnietalleen.nl/wp-content/uploads/2019/03/Buttons-Large-Geel.png);
}

#verhaal.actueel-content p {
    width: 100%;
}

#verhaal.actueel-content img {
    width: 100%;
    margin: 0 auto;
}

#verhaal.actueel-content .onderschrift {
    display: block;
}

/* CSS Samen de Passion kijken */

.wijk-lijst {
    counter-reset: wijknummer;
}
.wijk-lijst .wijk h3:before {
    counter-increment: wijknummer;
    content: counters(wijknummer, "") "";
    background: #e94423;
    color: #fff;
    padding: 0px;
    border-radius: 50px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}
.wijk-lijst .wijk h3 {
    padding-bottom: 30px;
    border-bottom: 4px solid #e94243;
}
.wijk-lijst .wijk .locatie-lijst {
    display: flex;
    flex-flow: row wrap;
    padding-top: 5px;
    padding-bottom: 60px;
    margin-left: -30px;
    margin-right: -30px;
    counter-reset: locatieletter;
}
.wijk-lijst .wijk .locatie-lijst .locatie {
    margin: 30px;
    flex: 0 0 calc(33.3333% - 60px);
    width: calc(33.3333% - 60px);
    box-sizing: border-box;
    counter-increment: locatieletter;
}
.wijk-lijst .wijk .locatie-lijst .locatie .row-container {
    
}
.wijk-lijst .wijk .locatie-lijst .locatie .row-container .row {
    display: flex;
    flex-flow: row wrap;
}
.wijk-lijst .wijk .locatie-lijst .locatie .row-container .row:first-child .value {
    color: #e94243;
    font-family: 'Mont-Bold';
    font-size: 25px;
    background-image: url(../jbna/images/Buttons-Large-Geel.png) !important;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px 20px 15px;
    margin-left: -4px;
    margin-right: -3px;
    border-radius: 7px;
    margin-bottom: 15px;
    position: relative;
}
.wijk-lijst .wijk .locatie-lijst .locatie .row-container .row:first-child .value:before {
    content: counter(wijknummer) counter(locatieletter, upper-alpha) ".";
    padding-right: 0px;
    position: absolute;
    left: -44px;
}
.wijk-lijst .wijk .locatie-lijst .locatie .row-container .row:nth-child(even) {
    background: #efefef;
}
.wijk-lijst .wijk .locatie-lijst .locatie .row-container .row .label {
    width: 150px; 
    display: inline-block;
    padding: 10px 10px 10px 20px;
    border-right: 3px solid #fff;
    margin-right: 17px;
    color: #999;
}
.wijk-lijst .wijk .locatie-lijst .locatie .row-container .row .value {
    flex: 1; 
    display: inline-block;
    padding: 10px 20px 10px 10px;
    word-break: break-word;
    word-wrap: break-word;
}

.turn-mobile {
	display: none;
}
span.author {
    color: #eb4a4b;
}

#small-banner {
	padding-top: 100px !important;
}

#small-banner h1 {
    font-size: 48px !important;
}

#small-banner .et_pb_text>:last-child {
    padding-bottom: 0;
    font-size: 20px !important;
}

/* Mobile styling */

@media screen and (max-width: 1024px) {
    .wijk-lijst .wijk .locatie-lijst {
        margin-left: -30px;
        margin-right: -30px;
    }
    .wijk-lijst .wijk .locatie-lijst .locatie {
        flex: 0 0 calc(50% - 60px);
        width: calc(50% - 60px);
    }
    .wijk-lijst .wijk .locatie-lijst .locatie .row-container .row .value {
        word-break: break-word;
    }
}

@media screen and (max-width: 768px) {
    .wijk-lijst .wijk .locatie-lijst .locatie {
        flex: 0 0 calc(100% - 60px);
        width: calc(100% - 60px);
    }
    #verhaal p {
        width: 100%;
    }
    #verhaal blockquote {
        margin-left: 0;
    }
    .et_pb_text_inner h1, #activiteiten .col-9 .page-title {
        font-size: 36px !important;
    }
    #activiteit .diff-margin h1 {
        font-size: 36px;
    }
    .et_pb_column.et_pb_column_2_5.et_pb_column_0.et_pb_css_mix_blend_mode_passthrough.et_pb_column_empty {
        display: block;
        position: relative;
    }
    .verhalen#activiteit .absolute {
        position: relative;
        pointer-events: none;
    }
}

@media screen and (max-width: 425px) {
	h1, h1.et_pb_contact_main_title, .et_pb_title_container h1 {
	    font-size: 40px !important;
	}
	.et_pb_text_inner, #activiteiten .col-9 .intro-tekst, #activiteit .intro-tekst {
	    font-size: 17px;
	}
    .wijk-lijst .wijk .locatie-lijst .locatie .row-container .row:first-child .value {
        background-size: cover;
    }
	.turn-mobile {
		display: flex;
		margin-bottom: 30px;
		align-items: center;
	}
	.turn-mobile img {
		width: 60px;
		display: inline-block;
	}
	.turn-mobile span {
		display: inline-block;
		width: 100%;
		padding-left: 20px;
		color: #a1a1a1;
	}
}