/*
 Theme Name:   marike theme
 Theme URI:    -
 Description:  Theme van marikefarenhorst.nl
 Author:       Erik Knaake
 Author URI:   -
 Template:     twentyseventeen
 Version:      1.0.1
 Tags:         green, blue, yellow, metaslider
 Text Domain:  -
*/

@import url("../twentyseventeen/style.css");

/*Language specific word breaks*/
* {
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
}

.dropdown-toggle {
	width: 60%;
	display: flex;
	justify-content: flex-end;
}

/*Background colors*/
.page, .custom-header, footer, .site-content-contain, .site-header
{
	background-color: #bccdca;
}

.panel-content .wrap, .site-footer, footer .wrap
{
	background-color: #8bc6bb;
}

.navigation-top, footer, .sub-menu, .menu
{
	background-color: #8bc6bb !important;
}

.sub-menu .menu-item:hover
{
	background-color: #4a8038 !important;
}

.menu
{
	display: flex !important;
	justify-content: center;
}

.main-navigation ul ul {
	border-color: #888;
}

footer .textwidget div
{
	padding-top: 1%;
	width: 30%;
	border-radius: 1.6em;
	background-color: rgba(255, 255, 255, 0.3);
}

footer .wrap
{
	padding: 0 !important;
	width: 100%;
}


.panel-content .entry-content > p, .panel-content .entry-content > div
{
	padding: 2%;
	width: 45%;
	margin: 2.5%;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 1.6em;
}

body
{
	overflow-x: hidden;
}

img
{
	box-shadow: none !important;
}

.navigation-top
{
	border-top: none;
}

.main-navigation a:hover, .current-menu-item a
{
	color: rgba(255, 255, 255, 0.7) !important;
}


footer .wrap > p
{
	padding-top: 1%;
	text-align: center;
}
.site-content-contain .wrap
{
	margin-top: 1%;
	border-radius: 1.6em;
}

.site-content-contain .wrap .entry-header
{
	padding-top: 2%;
	width: 100% !important;
	text-align: center;
}

.panel-content
{
	display: flex;
	justify-content: center;
}

.panel-content .entry-content
{
	width: 100% !important;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.centered
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.column
{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 2%;
}

.full-width-flex-item {
	flex-basis: 100%;
}

iframe {
	margin-bottom: 0;
}

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

.noline:hover { box-shadow: none !important;}


/*Mooie eerste letter in een paragraaf*/
.panel-content .entry-content > p:first-letter, .content-area > main > article > .entry-content > p:first-letter
{
	font-family: Brush Script MT, Brush Script Std, cursive;
	font-size: 400%;
	line-height: 60%;
}

/*Tweede ordered list in een ordered list is met kleine letters*/
ol li ol {list-style-type: lower-alpha;}

/*Zodat h2 en h3 niet heel anders zijn dan de andere h's*/
h2 {color: #222 !important; font-size: 1.1em; font-weight: 600;}
h3 { color: #222 !important; font-size: 1em; font-weight: 600;}
.custom-header { margin-bottom: 0 !important;}
/*Vanwege de i geen "Limbre Franklin"*/
h1, h2, h3, h4, h5, h6, th, .site-branding-text a, .site-branding .site-description { font-family: "Helvetica Neue", helvetica, arial, sans-serif !important;}
/*Het eerste kopje op een pagina wat dichter bij de content en iets groter*/
.entry-header { margin-bottom: 0 !important; font-size: 1.1em;}


/*Site branding*/
.site-branding
{
	display: flex;
	justify-content: space-between;
}
.site-branding-text a, .site-title a 
{
	color: #4a8038;
	font-size: 1.2em;
	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #67BBAC; 
}
.site-branding .site-description 
{
	color: #4a8038;
	font-size: 2em;
	font-weight: 600;
	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #67BBAC; 
}
.site-branding { padding-bottom: 0; padding-top: 1px; /*wordpress bug, als dit < 1 is raak je de slider kwijt*/}
.site-branding .wrap{ margin-top: -10%;}
.site-title { text-transform: none;}

.site-branding .wrap img
{
	border-radius: 20%;
}

/*Footer titels in zelfde style*/
.widget-title { text-transform: none !important; font-size: 1em !important;}
/* footer naast elkaar*/
.site-footer .wrap .widget-area .widget-column { display: flex; flex-direction: row; justify-content: space-between; width: 100%; flex-wrap: wrap;}
.site-footer .wrap .widget-area .widget-column .widget { width: 40%; min-width: 250px; }
/*Media slider layering, logo en naam boven de slider: positie in - margin*/
.metaslider { z-index: 2;  }

.entry-title a, .entry-meta a, .page-links a, .page-links a .page-number, .entry-footer a, .entry-footer .cat-links a, .entry-footer .tags-links a, .edit-link a, .post-navigation a, .logged-in-as a, .comment-navigation a, .comment-metadata a, .comment-metadata a.comment-edit-link, .comment-reply-link, a .nav-title, .pagination a, .comments-pagination a, .site-info a, .widget .widget-title a, .widget ul li a, .site-footer .widget-area ul li a, .site-footer .widget-area ul li a
{
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 1) !important;
}

.entry-content a:focus, .entry-content a:hover, .entry-summary a:focus, .entry-summary a:hover, .comment-content a:focus, .comment-content a:hover, .widget a:focus, .widget a:hover, .site-footer .widget-area a:focus, .site-footer .widget-area a:hover, .posts-navigation a:focus, .posts-navigation a:hover, .comment-metadata a:focus, .comment-metadata a:hover, .comment-metadata a.comment-edit-link:focus, .comment-metadata a.comment-edit-link:hover, .comment-reply-link:focus, .comment-reply-link:hover, .widget_authors a:focus strong, .widget_authors a:hover strong, .entry-title a:focus, .entry-title a:hover, .entry-meta a:focus, .entry-meta a:hover, .page-links a:focus .page-number, .page-links a:hover .page-number, .entry-footer a:focus, .entry-footer a:hover, .entry-footer .cat-links a:focus, .entry-footer .cat-links a:hover, .entry-footer .tags-links a:focus, .entry-footer .tags-links a:hover, .post-navigation a:focus, .post-navigation a:hover, .pagination a:not(.prev):not(.next):focus, .pagination a:not(.prev):not(.next):hover, .comments-pagination a:not(.prev):not(.next):focus, .comments-pagination a:not(.prev):not(.next):hover, .logged-in-as a:focus, .logged-in-as a:hover, a:focus .nav-title, a:hover .nav-title, .edit-link a:focus, .edit-link a:hover, .site-info a:focus, .site-info a:hover, .widget .widget-title a:focus, .widget .widget-title a:hover, .widget ul li a:focus, .widget ul li a:hover{
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 1) !important;
}

/*Main footer styling*/

footer .widget
{
	padding: 2%;
}
footer .widget_text
{
	width: 100% !important;
}

footer .widget-area
{
	text-align: center;
	border-radius: 1.6em;
	padding: 1% 1% 0 1% !important;
}


footer .textwidget
{
	display: flex;
	justify-content: space-around;
}


footer .wrap > p
{
	padding: 0 0 1% 0;
}

/*Pages other than home page styling*/
.entry-content
{
	width: 80% !important;
}

.site-content .wrap
{
	padding: 0;
}

.site-content .wrap .content-area > main > article
{
	background-color: #8bc6bb;
}

.site-content .wrap .content-area > main > article > .entry-content > div
{
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 1.6em;
}

.site-content .wrap .content-area > main > article, .site-content .wrap .content-area > main > article > .entry-content > div > form
{
	border-radius:  1.6em;
	padding: 2% 0;
	display: flex;
	flex-direction: column;
}

.site-content .wrap .content-area > main > article > .entry-content > div > form
{
	padding: 2%;
}

.site-content .wrap .content-area > main > article > .entry-content > div > form label
{
	margin: 2% 0 0 0;
}

.site-content .wrap .content-area > main > article > .entry-content > div > form .button
{
	margin-top: 2%;
}

.content-area > main > article > header
{
	text-align: center;
}

.content-area > main > article > .entry-content > p
{
	padding: 3%;
	border-radius: 1.6em;
	background-color: rgba(255, 255, 255, 0.3);
	width: 100%;
}

/*Wordpress bug fix*/
p:empty { display:none; }

.button
{
	background-color: #328118;
	color: #FFF;
	border-radius: 0.5em;

}

.button:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	color: #266013;
}


/*Image gallery styling*/
.bwg_container
{
	background-color: rgba(255, 255, 255, 0.3);
	padding: 2% !important;
	border-radius: 1.6em;
}

.spider_popup_wrap
{
	background-color: rgba(255, 255, 255, 0.75) !important;
}

.bwg_ctrl_btn_container, .bwg_toggle_container, .spider_popup_close
{
	background-color: rgba(103, 177, 78, 0.75) !important;
}

.spider_popup_close:hover
{
	background-color: rgba(103, 177, 78, 1) !important;
}

#spider_popup_right-ico, #spider_popup_left-ico
{
	background-color: #67BBAC !important;
}

#spider_popup_right-ico:hover, #spider_popup_left-ico:hover
{
	background-color: #3a8275 !important;
}

.bwg_ctrl_btn_container span, .bwg_ctrl_btn_container i, .bwg_toggle_container i, #spider_popup_right-ico i, #spider_popup_left-ico i, .spider_popup_close i
{
	color: black;
}

.bwg_image_info_container1
{
	display: table-cell !important;
}

.bwg_info, .bwg_toggle_container
{
	display: none !important;
}

#spider_popup_wrap, .bwg_image_wrap, #bwg_image_container {
	width: 100% !important;
	height: 100% !important;
}

#spider_popup_wrap {
	margin: 0 !important;
	left: 0 !important;
	top: 0 !important;
}


.spider_popup_close {
	margin: 1.5% 1.5% 0 0;
}

.bwg_image_info {
	width: 10% !important;
	border-bottom-right-radius: 1.6em !important;
	border-top-right-radius: 1.6em !important;
	background-color: #bccdca !important;
	padding-bottom: 1% !important;
}

.bwg_image_info .bwg_image_description {
	color: rgba(255, 255, 255, 0.7) !important;
}

.bwg_image_info .bwg_image_title {
	color: rgba(255, 255, 255, 0.9) !important;
}

.bwg_ctrl_btn_container {
	display: none;
}

.bwg-item0:hover {
	z-index: 3;
}

textarea
{
	resize: vertical;
}

.melding
{
	display: flex;
	justify-content: center;
	align-items: center;

	position: fixed;
	z-index: 5;
	width: 40%;
	height: 10%;
	left: 30%;
	top: 45%;

	animation:melding 1s 1;
	-webkit-animation:melding 1s 1;
	animation-fill-mode: forwards;

	animation-delay:5s;
	-webkit-animation-delay:5s; /* Safari and Chrome */
	-webkit-animation-fill-mode: forwards;
}

@keyframes melding {
	from {opacity: 1;}
	to {opacity: 0;}
}

@-webkit-keyframes melding{
	from {opacity :1;}
	to {opacity :0;}
}

.goed
{
	background-color: green;
}

.fout
{
	background-color: red;
}


td, tr:first-of-type th
{
	margin: auto;
}

th[colspan="3"]
{
	text-align: center;
	background-color: #22B69C;
}

tr
{
	border-bottom: solid #4a8038 1px;
}


td
{
	padding: 1% 2% !important;
}

tr td:nth-child(even), tr th:nth-child(even)
{
	text-align: right;
}

.triple tr td:nth-child(even), .triple tr th:nth-child(even)
{
	text-align: center;
}

.triple tr td:nth-child(3), .triple tr th:nth-child(3)
{
	text-align: right;
}

tr:nth-of-type(even) td
{
	background-color: rgba(255, 255, 255, 0.3);
}

tr:nth-of-type(odd) td
{
	background-color: rgba(255, 255, 255, 0.6);
}

thead tr:first-of-type th
{
	background-color: #4a8038;
	color:#FFF;
	padding: 1% 2%;
}

.one-color tr:nth-of-type(even) td, .one-color tr:nth-of-type(odd):not(:first-of-type) td
{
	background-color: rgba(255, 255, 255, 0.6);
}

td
{
	width: 50%;
}

.triple td
{
	width: 33%;
}

@media screen and (max-width: 1280px) {
	.bwg_image_info {
		width: 15% !important;
	}
}

@media screen and (max-width: 900px)
{
	.site-branding-text h1 a, .site-title a { font-size: 0.9em; }
	.site-branding p, .site-branding .site-description { font-size: 0.9em;}
	.site-branding .wrap
	{
		margin-top: -15% !important;
	}
	.bwg_image_info {
		width: 20% !important;
	}
}

@media screen and (max-width: 769px)
{

	footer, .panel-content
	{
		margin-top: 5%;
	}

	footer .textwidget
	{
		flex-wrap: wrap;
		justify-content: space-around;
	}

	footer .textwidget div
	{
		width: 100%;
	}

	.js .main-navigation.toggled-on > div > ul {
		display: block !important;
	}

	.js .main-navigation ul, .main-navigation .menu-item-has-children > a > .icon, .main-navigation .page_item_has_children > a > .icon, .main-navigation ul a > .icon
	{
		display: none !important;
	}

	.main-navigation ul ul.toggled-on {
		display: block !important;
	}
}

@media screen and (max-width: 600px)
{
	.panel-content .entry-content
	{
		flex-wrap: wrap;
	}

	.panel-content .entry-content > p, .panel-content .entry-content > div
	{
		width: 100%;
	}

	.bwg_image_info {
		width: 25% !important;
	}
}


@media screen and (max-width: 550px)
{
	.site-branding .wrap
	{
		margin-top: -20% !important;
	}

}

@media screen  and (max-width: 400px)
{
	/*.site-branding .wrap {margin-top: -50%; }*/
	.site-title { white-space: nowrap;}
	.site-branding-text h1 a, .site-title a { font-size: 0.6em; }
	.site-branding p, .site-branding .site-description { font-size: 0.7em;}
	.site-branding .wrap
	{
		display: flex;
		justify-content: space-between;
		margin-top: -23% !important;
	}
}


/*Fix IE10+ bugs
	IE9- doesnt support flex, no fallback build in
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.panel-content
	{
		display: block;
		margin: auto;
	}
}

/*Fix firefox bugs*/
@-moz-document url-prefix() {
	.panel-content
	{
		padding-top: 1.2em;
	}
	.panel-content .wrap .entry-content > div, .panel-content .wrap .entry-content > p
	{
		margin-top: 1.2em;
		padding: 0.6em 1.2em;
	}

	.panel-content .wrap .entry-content
	{
		padding: 1.2em 2.4em;
	}

	/*Bug with .site-branding isnt fixable*/
}