/*
Theme Name: Sektesignaal Theme
Author: TMRW / Innouveau
*/



/* overall */

* {   
    box-sizing: border-box;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;  
}



/* architecture */

html {
    width: 100%;
    height: 100%;   
}

body {
    background: #fff;
    font-family: 'Source Sans Pro';
    font-size: 14px;
    color: #000;
    line-height: 20px;
    width: 100%;
    height: 100%;
    margin: 0;
}

a {
    color: #000;
}

a:hover {
    color: #99C67F;
}

#content a {
    color: #000;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px dotted #000;
}

#content a:hover {
    color: #99C67F;
    border-bottom: 1px dotted #99C67F;
}


.home-widget a, .actueel-text a {
    text-decoration: none;
    color: #000;
}

.home-widget a.read-more, .actueel-text a.read-more {
    padding-bottom: 1px;
    border-bottom: 1px dotted #000;
}

.home-widget a.read-more:hover, .actueel-text a.read-more:hover {
    color: #99C67F;
}

h2 {
    font-weight: 600;
    font-size: 22px; 
    text-transform: uppercase;
}

h3 {
    font-weight: 600;
    font-size: 22px; 
}

h4 {
    font-size: 26px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0;
}

#preload {
    display: none;
}

.pagewrap {
    width: 1024px;
    padding: 0 32px;
    margin: 0 auto;
    position: relative;
}

#header {
    height: 119px;
    background: #99C67F;
    width: 100%;
    
}

#content {

}


#footer {
	clear: both;
    width: 100%;
    background: transparent;
    color: #fff;
    margin-top: 40px;
    min-height: 50px; 
}


/* identity */

#identity {
    position: absolute;
    left: 26px;
    top: 22px;
}

#identity a {
	display: block;
}

#identity img {
    width: 339px;
    max-width: 100%;
    height: relative;
    display: block;
}

#identity a img {
	border: none; /* for IE border */
	outline: none;
}

#slogan {
    position: absolute;
    right: 32px;
    top: 84px;
}

#slogan h3 {
    color: #fff;
    text-transform: uppercase;  
    font-weight: 700;
    font-size: 15px;  
    margin: 0;
}

#slogan-mobile {
    display: none;
}



/* menu */

#hamburger {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 100;
    display: none;
    width: 40px;
    height: 38px;
    background: #fff;
    border-radius: 12px;
    padding: 9px;
    cursor: pointer;
}

.burger {
	width: 100%;
	height: 3px;
	background: #99c67f;
	margin: 3px 0;
}

#menu {
    height: 45px;
    width: 100%;
}

#menu ul {
    margin: 0;
    padding: 0;
}

#menu-sektesignaal-menu {
	opacity: 0;
	transition: 0.5s all ease;
}

#menu ul li {
    list-style: none;
    display: inline-block;
    margin: 0
    float: left;
}

#menu ul li:last-child {
    float: right;
}

#menu ul li a {
    display: block;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    
    text-transform: uppercase;
}

#menu ul li a span {
    color: #000;
    padding-bottom: 2px;
    border-bottom: 1px dotted transparent;
}

#menu ul li a:hover span {
    color: #99C67F;
    border-bottom: 1px dotted #000;
}

#menu ul li.current-menu-item a span {
    color: #99C67F;
}



/* home template */

.main-image-mobile {
    display: none;
    width: 100%;
    height: 276px;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 2px solid #99C67F;
}

.main-image {
    
}

.main-image img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 2px solid #99C67F; 
}

.home-widgets-wrapper-total {
    padding-top: 30px;
}

.home-widgets-wrapper-left {
    width: calc(100% - 220px);
    display: inline-block;
    position: relative;
    overflow: hidden; /* for the mobile slider */
}

.home-excerpt-button {
    display: none;
}

.home-excerpt {
    width: 33%;
    display: inline-block;
    padding-right: 30px;
    vertical-align: top;
}

.home-excerpt a {
    text-decoration: none;
}

.home-excerpt a h2 span {
    color: #000;
    padding-bottom: 2px;
    border-bottom: 1px dotted transparent;    
}

.home-excerpt a h2:hover span {
    color: #99C67F;
    border-bottom: 1px dotted #000;    
}

a.read-more-helper {
	display: block;
	padding: 0!important;
	border: 0!important;
}

.home-excerpt .read-more {
    background: #99C67F;
    padding: 4px 20px;
    font-size: 15px;
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    text-transform: uppercase;
    margin-top: 20px;
}

.home-excerpt .read-more:hover {
    color: rgb(79,79,79);
}

.home-widget-left {
    width: 50%;
    display: inline-block;
    padding-right: 16px;
    vertical-align: top;
}

.home-widget-4 .home-widget-left {
	width: 60%;
}

.home-widget-4 .home-widget-right {
	width: 40%;
}


.home-widget-4 h3:after {
	content: 'Over sekte-signaal';
}

.home-widget-left img {
    width: 100%;
    height: relative;
    display: block;
}

.home-widget-right {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

.home-widget h3 {
    margin-top: 0;
    color: #99c67f;
    text-transform: uppercase;
}

.widget-white {
    border: 1px solid #000;
}

.home-widgets-bottom {
    padding-top: 40px;
    padding-right: 30px;
}

.home-widgets-bottom-left {
    display: inline-block;
    width: calc(50% - 20px);
    margin-right: 40px;
    vertical-align: top;
}

.home-widgets-bottom-right {
    display: inline-block;
    width: calc(50% - 20px);
    vertical-align: top;
}

.home-widgets-wrapper-right {
    width: 220px;
    display: inline-block;
    vertical-align: top;
}

.twitter-feed {
    margin-top: 16px;
}



/* widgets */

.widget {
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.widget-green {
    background: #99C67F;  
}

.widget-green blockquote {
    background: none !important;
    color: #FFFFFF;
    font-size: 1.4em;
    line-height: 1.2em;
    padding: 4px !important;
    margin: 0 !important;
}

.widget-white {
    background: #fff;  
    border: 1px solid #000;
}

.widget h4 {
    margin-bottom: 16px;
}

.widget-white h4 {
	color: #99C67F; 
}



/* single page */

.single-page {
    padding-top: 40px;
}

.content-image {
	width: calc(100% / 3);
	float: left;
}

.content-main-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 16px;
    padding-right: 30px;
}

.content-side-bar {
    width: calc(100% / 3);
	float: left;
    padding-right: 30px;
}

.actueel-page .content-side-bar h2 {
	margin-top: 0;
}

.content-text {
    width: calc(200% / 3);
	float: right;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    padding-top: 16px;
    border-top: 1px dotted #000;
}

.content-text strong {
    font-weight: 600;
}

.content-text .intro {
    font-weight: 400;
    font-size: 18px; 
}

.content-text h1 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 40px;
    color: rgb(153,198,127);
}

.content-text h2 {
    font-size: 18px;
    font-weight: 400;
    text-transform: none;
}

.content-text .col-50 {
    display: inline-block;
    float: left;
    width: 50%;
    vertical-align: top;
    padding-right: 40px;
}
.single-page ul{
    list-style: square;

}


/* actueel */

.actueel-sidebar-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 16px;
}

.actueel-item {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #000;
}

.actueel-item h3 {
    margin-bottom: 8px;
}

.actueel-date {
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 30px;
}

.actueel-text p:first-child {
    font-size: 16px;
    font-weight: 300;
    margin-top: 0;
}

.actueel-main-image {
    width: 100%;
    height: auto;
    display: block;
    padding-bottom: 30px;
}

.acuteel-preview {
    
}

.acuteel-preview a {
    text-decoration: none;
}

.acuteel-preview a h5:first-child {
    margin-top: 0;
}

.acuteel-preview a h5 {
    border-left: 3px solid rgb(153, 198, 127);
    padding-left: 15px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}

.acuteel-preview a h5:hover, .acuteel-preview a.current h5 {
    color: rgb(153, 198, 127);
}


/* footer */




/* single page */




/* screen sizes */

@media (max-width: 1025px) {
    .pagewrap {
        width: 100%;
    }  
    
    .home-widgets-wrapper-left {
        width: 100%;
    }
}

@media (max-width: 768px) {  
	
	#menu-sektesignaal-menu {
		opacity: 1;
	}
	
	#menu-sektesignaal-menu > li {
		margin: 20px;
	}
	
	#menu ul li:last-child {
		float: none;
	}
		
	/* architecture */
	
	#content {
		padding-top: 20px;
	}
	
	.content-image, .content-side-bar, .content-text {
		width: 100%;
		float: none;
	}
	
	#identity {
		left: 10px;
		width: calc(100% - 20px);
	}

	
	
	
	/* home */
	
    .home-widgets-bottom-left, .home-widgets-bottom-right, .home-widgets-wrapper-right, .home-excerpt {
        width: 100%;
    }
    
    .home-widgets-bottom-left {
    	margin-right: 0;
    }
    
    .home-widgets-bottom {
    	padding-right: 0;
    }
    
    .home-excerpt {
    	border-bottom: 1px dotted #000;
    	padding-bottom: 12px;
    	margin-bottom: 10px;
    }
    
    .home-excerpt .read-more {
    	border-bottom: 1px dotted #000;
	    padding: 0 0 1px 0;
	    color: #000;
	    text-decoration: none;
	    background: none;
	    border-radius: 0;
	    margin-top: 0;
	    display: inline-block;
	    text-transform: none;
    }
    
    .home-excerpt .read-more:hover {
    	color: #99c67f;
    	border-bottom: 1px dotted #99c67f;
    }
    
    .home-excerpt .read-more:after {
    	content: '...';
    }
    
    a.read-more-helper {
    	display: inline-block;
    }
    
    .home-widgets-bottom-left, .home-widget-about {
    	padding: 0;
    	border: 0;
    	border-bottom: 1px dotted #000;
    	padding-bottom: 20px;
    	margin-bottom: 20px;
    	border-radius: 0;
    }
    
    .home-widgets-bottom-left .read-more:after, .home-widget-about .read-more:after {
    	content: '...';
    }
    
    .home-widget-4 h3:after {
		content: 'Over sektesignaal';
	}

    
    /* switch to mobile elements */
    
    #slogan {
        display: none;
    }
    
    #slogan-mobile {
        display: none;
        padding: 20px;
        margin: 0;
        font-size: 12px;
        line-height: 18px;
        color: #969696;
    }
    
    .main-image-mobile {
        display: block;
    }
    
    .main-image {
        display: none;
    }
    
    .single-page {
        padding-top: 0;
    }
    
    .content-side-bar {
        width: 100%;
        padding-right: 0;
    }
      
    .content-text {
        width: 100%;
    }
    
    .content-text .col-50 {
        width: 100%;
        padding: 0;
    }
       


    /* hamburger menu */
   
   #hamburger {
       display: block;
   }

    #menu {
        display: none;
        position: absolute;
        right: 70px;
        top: 20px;
        width: auto;
        padding: 10px;
        background: #fff;
        border: 1px solid #99C67F;
        border-radius: 12px;
        box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
        z-index: 1000;
        height: auto;
    }
    
    #menu .pagewrap {
        padding: 0;
        margin: 0;
    }
    
    #menu ul li {
        list-style: none;
        display: block;
        text-align: right;
    }
}

@media (max-width: 498px) { 
     
}