/*
Theme Name: ecoland-service
Theme URI: ---
Author: Web Minister
Author URI: https://web-minister.com/
Template: colornews
Description: Ecoland service v1
Version: 1.0.9.002
Text Domain: ecoland
Tags: one-column, two-columns, right-sidebar, left-sidebar, flexible-header, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, post-formats, footer-widgets, blog, e-commerce, news
*/

/*html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 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 {}*/
body {
	font-size: 17px;
}


.site-header .middle-header-wrapper {
	background-color: #383e42;
	color: #fff;
	padding: 0px 0; /* reset from 20px */
	border-bottom: 1px solid #181e22;
}
	/* #site-title a */
	.site-header a,
	.site-header #site-title a {
		color: #fff;
	}
		.site-header a:hover,
		.site-header #site-title a:hover {
			color: #ccc;
		}

	.bottom-header-wrapper {
		display: none;
	}
	
	.header-advertise5 {
		float: right;
	}
		@media (max-width: 979px) {
			.header-advertise5 {
				margin: 0 auto;
				max-width: 728px;
				text-align: center;
				float: none;
			}
		}
		
		.site-header .header-advertise5 .widget {
			margin: 0;
			line-height: 1.7;
			padding: 20px 20px 0 0;
		}
		.site-header .header-advertise5 a {
			text-decoration: underline;
		}
			.site-header .header-advertise5 a:hover {
				text-decoration: none;
			}

.wp-custom-header .header-image-wrap img {
	
}



.hentry {
	/*max-width: 960px;
	margin: 0 auto;
	*/
	margin-top: 30px;
}

.hentry .extraLineHeight {
	line-height: 1.9;
}

.page-template-page-wide {
	
}

@media (min-width: 640px) {
	#site-title {
		font-size: 50px;
	}
}


.hentry ul {
	margin-left: 0;
}
.hentry ul li {
	list-style-type: none;
}
	.hentry ul li:before {
		content:"\f046"; /* .fa-check-square-o:before */
		font-family: 'FontAwesome';
		
		  display: inline-block;
		/*  font: normal normal normal 14px/1 FontAwesome;
		  font-size: inherit;
		*/
		  text-rendering: auto;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		
		/*color: #003920;*/
		/*color: #23ab70;*/
		padding: 0 8px 0 0;
	}

.wpcf7-checkbox .wpcf7-list-item {
	margin-left: 0;
}
.wpcf7 form .wpcf7-response-output {
	font-weight: bold;
	border-width: 3px;
}







/* Color scheme */

/* menu transitions have different transitions for LI and A elements!! So it seems the background is set to LI elements mostly and the hover is set on LI:hover */
	/*
	a {
		transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
	}
	#site-navigation ul > li {
		-webkit-transition: background 0.5s ease;
		-moz-transition: background 0.5s ease;
		-ms-transition: background 0.5s ease;
		-o-transition: background 0.5s ease;
		transition: background 0.5s ease;
	}
	*/

.bottom-header-wrapper,
.bottom-header-wrapper:before,
.bottom-header-wrapper:after,
#site-navigation ul.sub-menu,
#site-navigation ul.children {
	background-color: #383e42; /* RAL 7016/7001 replaces #272727 ... #8c969d */
}

#site-navigation ul > li:hover,
#site-navigation ul > li.current-menu-item,
#site-navigation ul > li.current-menu-ancestor,
#site-navigation ul > li.current-menu-parent {
	background-color: #009597; /* RAL 3013/or else    replaces #dc3522 ... #972e25 */
}

@media (max-width: 768px) {
	#site-navigation ul > li:hover,
	#site-navigation ul > li.current-menu-item,
	#site-navigation ul > li.current-menu-ancestor,
	#site-navigation ul > li.current-menu-parent {
		background: none !important; /* if we set a color here, on big screens there is a defect where the LI and the A elements get hovered at different order and the A goes 100% opacity earlier that LI element */
	}
		#site-navigation ul > li:hover > a,
		#site-navigation ul > li.current-menu-item > a,
		#site-navigation ul > li.current-menu-ancestor > a,
		#site-navigation ul > li.current-menu-parent > a {
			background: none;
			background-color: #009597;
		}
}

#site-navigation .menu-toggle:hover { /* mobiles menu-toggle */
	background-color: #009597;
}
#site-navigation ul.menu > li:last-child {
	background-color: #009597 !important;
}
	#site-navigation ul.menu > li:hover:last-child {
		background-color: #00c5c7 !important;
	}
.top-menu-wrap ul li:hover > .sub-menu {
	background-color: #383e42; /* replaces #333333 */
}
@media (max-width: 768px) {
	#site-navigation .menu {
		background-color: #383e42; /* replaces #333333 */
	}
	.sub-toggle {
		background-color: #009597;
	}
	#site-navigation ul > li:hover > .sub-toggle,
	#site-navigation ul > li.current-menu-item .sub-toggle,
	#site-navigation ul > li.current-menu-ancestor .sub-toggle {
		background-color: #00c5c7; /* replaces #ba2a1a */
	}
	.main-small-navigation li.current-menu-item > .sub-toggle {
		background-color: #ffffff;
	}
}
@media (max-width: 768px) {
	/* 2nd level offset */
	/*
	#site-navigation ul.sub-menu li > a {
		padding-left: 30px;
	}
	*/
	/* Add next level offset */
	#site-navigation ul.sub-menu ul.sub-menu li > a {
		padding-left: 45px;
	}
}

#top-footer {
	background-color: #383e42; /* #3e3e3e */
}
#bottom-footer {
	background-color: #282e32; /* #333 */
}

.cfw_1, .cfw_1:before {
	background-color: #f7b500 !important;
	background-color: #00e5e7 !important;
	background-color: #9ffeff !important;
	background-color: #77fdff !important;
	color: #111;
}
	.cfw_1_inner {
		font-size: 30px !important;
        text-align: center; /* 2021.04.01 - used for centering the buttons */
	}
	.cfw_1_inner .wp-block-buttons {
		margin-top: 16px;
        display: inline-block; /* 2021.04.01 - used for centering the buttons */
	}
    	 /* 2021.04.01 - SIZE increased too much, let's adjust it for this block only - .wp-block-button__link */
    	.cfw_1_inner .wp-block-button__link {
        	font-size: 1.125em;
            padding: .667em 1.333em;
        	font-size: 0.8em;
            padding: .3em 0.8em;
        }
		.cfw_1_inner .wp-block-button__link:hover {
			background-color: #32373c;
			background-color: #62676c;
			color: #fff !important; /* this one is needed for footer line. Replaces "inherit" declaration. */
		}
.footer_1 .widget .cfw_1, .footer_1 .widget .cfw_1:before {
	background-color: #bbb !important;
}

h1, h2, h3, h4, h5, h6, h1.entry-title, h2.entry-title {
	color: #007577;
}
	.footer_1 h3 {
		color: #333; /* restore grey color in footer */
	}

h2 a,
h3 a,
.home .entry-content > .wp-block-media-text .wp-block-media-text__content a {
	color: #007577 !important;
}
	h2 a:hover,
	h3 a:hover,
	.home .entry-content > .wp-block-media-text .wp-block-media-text__content a:hover {
		color: #00a5a7 !important;
	}

/* END Color scheme */


#colophon {
	/*padding-bottom: 32px; /* leave some space for cookie notification */
	margin-top: 0px; /* margin-top: 50px; */
}
#bottom-footer {
	/*padding: 10px;*/
	padding: 35px 10px 45px 10px; /* leave some space for cookie notification */
}

h1.entry-title, h2.entry-title {
	/*
	color: #353535;
	font-size: 36px;
	font-weight: 700;
	*/
	text-transform: none; /* reset capitalize */
}
article.post.hentry h1.entry-title,
article.post.hentry h2.entry-title {
	line-height: 120%; /* reset size in pixels */
}

.entry-content {
	text-align: justify;
}

body.custom-background {
	background: #789;
	background: #444;
	background: #5c9bf1;
	background: #1e4c8c;
	background: #fff;
	background: #ddd;
	background-image: none !important;
}

.show-both #header-text {
	border-left: 0;
	padding-left: 0; /* reset 15px as we don't have vertical line anymore */
}

#site-title {
	/*font-size: 55px;*/
}

/*
body:not(.home) #wp-custom-header,
body:not(.home) .wp-custom-header {
	display: none;
}
	.wp-custom-header .header-image-wrap {
		height: 180px;
	}
*/

/* Overwrite: font-family: 'Roboto', sans-serif; */
body, button, input, select, textarea {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
	h1, h2, h3, h4, h5, h6 {
		font-family: 'PT Sans Narrow', 'Oswald', Helvetica, Arial, sans-serif;
	}
	h1.entry-title, h2.entry-title {
		font-size: 42px; /* 36px */
	}
	h2 {
		font-size: 36px; /* 30px */
		line-height: 115%;
	}
	body, button, input, select, textarea,
	#site-navigation ul > li {
		font-weight: 400;
	}
		h1.entry-title,
		h2.entry-title {
			font-weight: 400;
		}

.header-image-wrap {
	height: 180px;
	overflow: hidden;
}
	body.home .header-image-wrap {
		height: auto;
		overflow: auto;
	}
.widget_archive a::before,
.widget_categories a::before,
.widget_recent_entries a::before,
.widget_meta a::before,
.widget_recent_comments li::before,
.widget_rss li:before,
.widget_pages li:before,
.widget_nav_menu li:before {
	top: -1px !important;
}


a:hover,
a:focus,
a:active {
	color: #aa1606; /* dc3522, BA2616 */
	color: #f00;
	color: #981507;
}

.tg-block-wrapper,
.widget {
	border: 0;
}

#site-navigation ul.sub-menu li {
	line-height: 30px; /* reset - 40px not good for 2 rows */
}

#site-navigation {
	width: 100%;
}
#site-navigation ul.menu > li:last-child {
	float: right;
	
	margin-top: 7px;
	padding: 8px 15px;
	background: #529106;
	line-height: 20px; /* 50px with "padding: 0 15px;" */
}

/*
@media (min-width: 769px) and (max-width: 979px) {
	.logo {
		float: none;
		text-align: center;
	}

	.header-advertise {
		margin: 0 auto;
		max-width: 728px;
		text-align: center;
		float: none;
	}
}
*/
@media (max-width: 979px) {
	.header-advertise {
		margin: 0 auto;
		max-width: 728px;
		text-align: center;
		float: none;
	}
}

.switchLanguage {
	padding: 13px 0 0 0;
}
	.switchLanguage a {
		display: inline-block;
		/* Set this when we need to spread on multiple rows: */
		/*
		float: left;
		clear: both;
		*/
		padding: 3px 0;
	}
		.switchLanguage a.current_language {
			
		}
		.switchLanguage a img {
			border: 2px solid #e6e6e6;
		}

@media (min-width: 980px) {
	.switchLanguage a {
		/* Set this when we need to spread on multiple rows: */
		float: left;
		clear: both;
	}
}


/* POPUP MAKER plugin - add !important so we can overwrite the styles, addes after current stylesheet...
wp-content/uploads/pum/pum-site-styles.css
wp-content/uploads/pum/pum-site-scripts.js
*/
/* Overlay - make it dark, not light */
.pum-theme-451,
.pum-theme-default-theme {
	background-color: rgba( 0, 0, 0, 0.80 ) !important;
}

.pum-theme-451 .pum-container,
.pum-theme-default-theme .pum-container {
	padding: 20px 30px !important; /* 18px */
	padding: 30px 40px !important; /* 18px */
}

/* Close buttons - top-right / separate custom button as SPAN? */
.pum-theme-451 .pum-content + .pum-close,
.pum-theme-default-theme .pum-content + .pum-close {
	font-size: 24px !important;
	line-height: 120% !important;
	padding: 10px 15px !important;
	
	background-color: rgba( 0, 183, 205, 1.00 );
	background-color: rgba( 220,53,34, 1.00 ) !important; /* #dc3522 */
}
button.pum-close {
	/* min-width: 44px !important; /* line-height: 36px; */
}
	button.pum-close .fa {
		font-size: 24px;
		line-height: 120%;
	}
span.pum-close {
	
}
/* Integrate the default button ".wp-block-button" with the close button of the popup (.pum-close.popmake-close) */
/* https://docs.wppopupmaker.com/article/159-shortcode-popup-close --- [popup_close tag="a" classes="wp-block-button__link"]CLOSE[/popup_close] */
/*
.wp-block-button .popmake-close {
	background-color: #32373c;
	border:none;
	border-radius:28px;
	box-shadow:none;
	color:inherit;
	cursor:pointer;
	display:inline-block;
	font-size:18px;
	margin:0;
	padding:12px 24px;
	text-align:center;
	text-decoration:none;
	overflow-wrap:break-word
}
.wp-block-button .popmake-close:active,
.wp-block-button .popmake-close:focus,
.wp-block-button .popmake-close:hover,
.wp-block-button .popmake-close:visited{color:inherit}
.wp-gs .wp-block-button .popmake-close:not(.has-background){background-color:var(--wp-block-core-button--color--background,var(--wp-color--primary,#32373c))}
.wp-block-button .is-style-squared .popmake-close{border-radius:0}
.wp-block-button .no-border-radius.popmake-close{border-radius:0!important}
*/


/* Slider on home page - remove page title??? Or make custom home page template instead? */
	.home .hentry .entry-header h2.entry-title {
		/*display: none;*/
	}
	.home #main {
		padding-top: 0; /* 20px reset */
	}
	.home .page-content,
	.home .entry-content,
	.home .entry-summary {
		/*margin-top: 0; /* 15px reset */
	}
	.home .home-slider-wrapper {
		/*background: #efeeee none repeat scroll 0 0;*/
		border: 0;
		padding: 0; /* 20px reset */
	}
		.home .home-slider-wrapper .widget {
			padding: 0; /* 10px reset */
		}

/* Slider - expand the slider on big resolutions, similer to .wp-block-media-text -100px */
@media (max-width: 1200px) {
	.home .widget_metaslider_widget,
	.sliderContainer {
		margin: 0 -2%; /* expand to full-width */
	}
}
/* @media (max-width: 1500px) {} */
@media (min-width: 1201px) {
	.home .widget_metaslider_widget,
	.sliderContainer {
		margin: 0 -20px;
	}
}
@media (min-width: 1501px) {
	.home .widget_metaslider_widget,
	.sliderContainer {
		margin: 0 -100px;
	}
}
/* Slider - fix/replace text size, defined in REM. USE !important */
.metaslider.ms-theme-cubic .flexslider ul.slides .caption-wrap .caption,
.metaslider.ms-theme-cubic .rslides .caption-wrap .caption,
.metaslider.ms-theme-cubic .nivoSlider .nivo-caption {
	/*font-size: .9rem;*/
	font-size: 16px !important;
}
@media (min-width: 1201px) {
	.metaslider.ms-theme-cubic .flexslider ul.slides .caption-wrap .caption,
	.metaslider.ms-theme-cubic .rslides .caption-wrap .caption,
	.metaslider.ms-theme-cubic .nivoSlider .nivo-caption {
		/*font-size: .9rem;*/
		font-size: 18px !important;
	}
}




/* has-media-on-the-right --- .home OR .page-id-8 (FR) OR page-id-xx (NL) */
/* instead of using .wp-block-media-text.has-media-on-the-right */
/* !!!NOTE: nth-of-type selects the DIV elements, not the exact selector as does jQuery! So we adjust (2n+0) or (2n+1) according the needs. */
@media (min-width: 600px) {
	.home .entry-content div.wp-block-media-text:nth-of-type(2n+1) {
		/*
		-ms-grid-columns: 1fr 50%;
		grid-template-columns: 1fr 50%;
		*/
	}
		.home .entry-content > div.wp-block-media-text:nth-of-type(2n+1) .wp-block-media-text__media {
			-ms-grid-column: 2;
			grid-column: 2;
		}
		.home  .entry-content > div.wp-block-media-text:nth-of-type(2n+1) .wp-block-media-text__content {
			-ms-grid-column: 1;
			grid-column: 1;
		}
}




.home .entry-content > .wp-block-media-text .wp-block-media-text__media a {
	position: relative;
	display: block;
}
	/*
	.home .entry-content > .wp-block-media-text .wp-block-media-text__media a {
		opacity: 0.85;
	}
	.home .entry-content > .wp-block-media-text .wp-block-media-text__media a:before {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		padding: 15px 30px;
		content: "HELLO!";
		background-color: rgba( 0, 0, 0, 0.60 );
		background-color: rgba( 55, 55, 55, 0.40 );
		color: #fff;
		text-shadow: 1px 1px 3px #222, 1px 1px 6px #444;
		font-size: 40px;
	}
	
	.home .entry-content > .wp-block-media-text .wp-block-media-text__media a:hover {
		opacity: 1;
	}
		.home .entry-content > .wp-block-media-text .wp-block-media-text__media a:hover:before {
			background-color: rgba( 0, 0, 0, 0.90 );
			background-color: rgba( 55, 55, 55, 0.80 );
		}
	*/
	/*
	.home .entry-content > .wp-block-media-text:hover {
		background-color: #e6e6e6;
	}
	*/
	.home .entry-content > .wp-block-media-text .wp-block-media-text__media a:before {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		content: " ";
		background-color: rgba( 0, 0, 0, 0.40 );
		background-image: url("images/block-media-image-hover--preview.svg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 25%;
		transition: all .3s linear;
		
		/*display: none;*/ /* Use opacity so the transition to work smoothly */
		opacity: 0;
	}
		/* focus or focus-within - css focus:before / css focus-within:before */
		/*.home .entry-content > .wp-block-media-text .wp-block-media-text__media a:focus:before,*/
		.home .entry-content > .wp-block-media-text .wp-block-media-text__media a:hover:before {
			/*display: block;*/
			opacity: 1;
		}
	
	.home .entry-content > .wp-block-media-text .wp-block-media-text__content a {
		color: #dc3522;
		transition: all 0.3s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
		.home .entry-content > .wp-block-media-text .wp-block-media-text__content a:hover {
			color: #ba2616;
			color: #aa1606;
			color: #9a0600;
		}

/* 2021.11 - FR-1643,NL-1461 - Products list page, they have different IDs, so need custom classes */
.page .productsList .wp-block-media-text {
  padding: 12px 0;
}

/*
css expand outside container
(for images/content) Full Width Containers in Limited Width Parents - https://css-tricks.com/full-width-containers-limited-width-parents/

css expand child background outside container
(for backgrounds) Extend background-color of header beyond container with css - https://stackoverflow.com/questions/22083157/extend-background-color-of-header-beyond-container-with-css
*/
/*
.cfw_1 {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	
	background-color: #eee;
}
*/
/* WE USE the same .cfw_1 in the FOOTER, and in both cases the background color (and/or the text color) is defined in the COLOR SCHEME block of the CSS */
.cfw_1 {
	position: relative;
	margin: 25px 0;
	/*display: grid;*/
	/*height: 100px;*/
	
	background-color:#CCFFFF;
	background-color: #777;
	z-index: 1; /* do not work without it? - Opera 68 */
	/*padding: 30px 0;*/ /* Set padding to inner element instead!! */
}
	.cfw_1:before {
		content:"";
		position: absolute;
		height: 100%;
			width: 4000px;
			left: -2000px;
		width: 200vw;
		left: -100vw;
		z-index: -1;
		
		background-color: #eee;
		background-color: #CCFFFF;
		background-color: #ddd;
		background-color: #ffcccc;
		
		/*
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: nowrap;
		-ms-justify-content: space-between;
		justify-content: space-between;

		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
		*/
	}
	.cfw_1_inner {
		padding: 30px 0;
		text-align: center;
		
		font-size: 20px;
	}
	


.footer_1 {
	margin: 40px 0 0 0; /* remove this from footer #colophon and put it here */
	padding: 30px 0 0 0; /* another 20px is added?! */
	background-color: #e6e6e6;
}
	.footer_1 .widget {
		margin-bottom: 0;
		padding: 0;
	}
	.footer_1 .widget .cfw_1 {
		margin-bottom: 0;
	}
.partnersLogos {
	text-align: center;
	/*background-color: #e6e6e6;*/ /* Place on the container - .footer_1 ..OR.. #custom_html-5 for FR version */
}

/* .blockTextMedia_2 is used to avoid negative left/right margins for blockMediaText */
/*
.no-sidebar-full-width .alignwide,
.no-sidebar .alignwide {
	margin-left: -100px;
	margin-right: -100px;
	max-width: unset;
}
@media screen and (max-width: 1500px) {
	.no-sidebar-full-width .alignwide {
		margin-left: -20px;
		margin-right: -20px;
	}
}
@media (max-width: 1200px) {
	.no-sidebar-full-width .alignwide {
		margin-left: 0;
		margin-right: 0;
	}
}
@media (max-width: 767px) {
	.no-sidebar-full-width .alignwide,
	.no-sidebar .alignwide {
		margin-left: 0;
		margin-right: 0;
	}
}
*/
.no-sidebar-full-width .blockTextMedia_2,
.no-sidebar .blockTextMedia_2 {
	margin-left: 0;
	margin-right: 0;
}
	/*
	.wp-block-media-text .wp-block-media-text__content {
		padding: 0 8% 0 8%;
	}
	*/
	.blockTextMedia_2 .wp-block-media-text__content {
		padding: 0 0 0 8%; /* reset: padding: 0 8% 0 8%;, when it was margin-left/right -100px? */)
	}
	.has-media-on-the-right.blockTextMedia_2 .wp-block-media-text__content {
		padding: 0 8% 0 0; /* reset: padding: 0 8% 0 8%;, when it was margin-left/right -100px? */)
	}

/* 2020.11.26 - don't overlap cookie bar over the footer (not very good fix, but still seems better)
2021.04.01 - it seems after the plugin update, the CSS priority may have changed, thus the plugin CSS has precedence over the child theme, so just add another seletor in front for priority: #cookie-notice or body
*/
#cookie-notice .cookie-notice-container {
	padding: 15px 30px;
	padding: 6px 30px;
}
@media (max-width: 900px) {
	/*
	.cookie-notice-container #cn-notice-buttons {
		display: block;
	}
	*/
	#bottom-footer {
		padding: 35px 10px 45px 10px;
		padding: 40px 10px 75px 10px;
	}
}