/*
Theme Name: Weet waar je koopt
Theme URI: https://www.weetwaarjekoopt.nl
Author: Eventim - P. Henkemans
Author URI: https://www.eventim.nl
Description: A custom made theme for Weet waar je koopt
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: weetwaarjekoopt
This theme, like WordPress, is licensed under the GPL.
*/
@font-face {
	font-family: "DinPro";
	src: url("https://weetwaarjekoopt.nl/wp-content/themes/wwjk/font/DINPro-Medium.otf") format("opentype");
}
@font-face {
	font-family: "DinProBold";
	src: url("https://weetwaarjekoopt.nl/wp-content/themes/wwjk/font/DINPro-CondBold.otf") format("opentype");
}
@font-face {
	font-family: "DinProBlack";
	src: url("https://weetwaarjekoopt.nl/wp-content/themes/wwjk/font/DINPro-CondBlack.otf") format("opentype");
	}

html, body {height: 100%;}
html {overflow: hidden;} 
body {font-family: "DinPro", Arial, Verdana, sans-serif; overflow-y: auto; overflow-x: hidden; letter-spacing: 0.02rem; line-height: 1.5em; color: #000; background: #edece7;position: relative; z-index: 0; font-size: 1.5em;}
h1 {font-size: 3em; margin: 0 0 30px 0;}
h1, h2, h3, h4, h5 {font-family: 'DinProBlack', 'Arial narrow', arial, verdana, sans-serif; font-weight: 700; color: #202867;}
h2 {font-size: 3em;} 
h3 {font-size: 2em;}
a {color: #fff; text-decoration: underline;}
a:focus {outline: none;}
section {padding: 0;}
:focus {outline: none;}
i {color: #202867;}
video {margin: 50px 0 -10px 0; width: 100%; height: auto;}

.navbar {background: #ffed00; height: 50px; width: 100%; position: fixed; z-index: 99; top: 0;}
	.ticker-wrap {position: fixed; top: 0; left: 55px; width: 100%; overflow: hidden; height: 3rem; box-sizing: content-box;}
	.ticker-wrap .ticker { padding-top: 7px; display: inline-block; height: 2rem; line-height: 2rem; white-space: nowrap; padding-right: 100%; box-sizing: content-box; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: ticker; animation-name: ticker; -webkit-animation-duration: 90s; animation-duration: 90s; }
	  .ticker-wrap .ticker__item { display: inline-block; padding: 0 2rem; font-size: 2rem; color: #000; text-transform: uppercase; font-family: 'Montserrat', 'Arial narrow', arial, verdana, sans-serif; font-weight: 700; }
	  @-webkit-keyframes ticker {
		0% {
			-webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);  visibility: visible;}
			100% {-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
	  	}
	  @keyframes ticker {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			visibility: visible;
		}
		100% {
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
		}
	  }

.logowrapper {padding: 50px 0 0 0; position: relative; z-index: 10;}
	.logo {width: 100%; background: #000;}
	  .logo img {max-width: 700px; height: auto; margin: 0 auto; display: block; padding: 100px 0;}
.zwartwit {width: 100%; height: 60px; background: linear-gradient(45deg, #000000 25%, #ffffff 25%, #ffffff 50%, #000000 50%, #000000 75%, #ffffff 75%, #ffffff 100%); background-size: 60px 60px;}

/*YT VIDEO*/
.video { width: 100vw; height: 100vh; overflow: hidden; position: relative; margin-top: 50px;}
.video iframe {position: absolute; width: 100vw; height: 100vh;}
@media screen and (max-width:991px) {
	.video, .video iframe {height: 50vh !important;}
}
@media screen and (max-width:660px) {
	.video, .video iframe {height: 40vh !important;}
}

/*HOME INTRO*/
.introdiv {background: linear-gradient(90deg, #00e800 50%, #ffed00 50%); position: relative; z-index: 0;}
	.intro {position: relative; z-index: 1;}
	  .intro-links {padding: 75px 0;}
		  .intro-links h1.title {text-transform: uppercase; color: #173dfa; width: 320px; font-weight: bold;}
	  .intro-rechts {padding: 75px 0; background: #ffed00;}
	  	.intro-rechts article {padding: 0 75px;}
		.intro-rechts a {color: #173dfa;}
/*HOME WAAR*/
.waar-title {background: #fff; padding: 20px 0;}
	.waar-title h1 { color: #fa26ad; text-transform:  uppercase; margin-top: 20px;}
.waar-text {background: #000; color: #ffed00;}
.waar-text article {padding: 40px 0;}
.waar-overzicht {background: #173dfa; color: #ffed00; padding: 30px 0 0 0;}
	  .waar-overzicht h3 {display: none !important;}
	  .waar-overzicht h4 {font-size: 2em;}
	  .su-spoiler {margin: 0 0 20px 0 !important;}
	  .su-spoiler-title {font-size: 2em !important; font-family: 'DinProBlack', 'Arial narrow', arial, verdana, sans-serif !important;}
	  .su-spoiler-style-default>.su-spoiler-title {padding-left: 40px;}
	  .su-spoiler-icon {font-size: 0.7em !important; margin-right: 10px;}
	  .su-spoiler-style-default>.su-spoiler-content {margin: 20px 0;}
	  .su-spoiler-content {background: #fff; color: #000;}
		  .su-spoiler-content a {color: #173dfa;}
.waar-spacer {background: #fa26ad; height: 80px; width: 100%;}
/*HOME WAAROM*/
.waarom {background: linear-gradient(90deg, #ffed00 50%, #00e800 50%); position: relative; z-index: 0;}
	.waarom-links {padding: 75px 0;}
		.waarom-links h1.title {text-transform: uppercase; color: #173dfa; width: 350px; font-weight: bold;}
	.waarom-rechts {padding: 75px 0; background: #00e800;}
		.waarom-rechts article {padding: 0 75px;}
		.waarom-rechts h2 {text-transform: uppercase; font-size: 1.2em;}
/*HOME UITVERKOCHT*/
.uitverkocht-title {background: #000; padding: 20px 0;}
	.uitverkocht-title h1 { color: #ffed00; text-transform:  uppercase; margin-top: 20px;}
.uitverkocht-text {background: #fff; color: #173dfa;}
	.uitverkocht-text article {padding: 40px 0;}
	.uitverkocht-text a {color: #00e800;}
	.uitverkocht-spacer {background: #00e800; height: 80px; width: 100%;}	
/*HOME WAAR NIET KOPEN*/
	.waarniet {background: #ffed00; color: #fff;}
	.waarniet h1 { color: #000000; text-transform:  uppercase; margin-top: 40px;}
	.waarniet article {padding: 40px 0 60px 0; color: #000;}
	.waarniet a {color: #173dfa;}
	.waarniet-spacer {background: #000000; height: 80px; width: 100%;}

/*HOME OPGELICHT*/
.opgelicht-title {background: #fa26ad; padding: 20px 0;}
.opgelicht-title h1 { color: #000; text-transform:  uppercase; margin-top: 20px;}
.opgelicht-text {background: #173dfa; color: #fff;}
	.opgelicht-text h1 { color: #ffed00; text-transform:  uppercase; margin-top: 40px;}
	.opgelicht-text article {padding: 40px 0 60px 0;}
	.opgelicht-text-spacer {background: #ffed00; height: 80px; width: 100%;}

/*HOME MEEDOEN/KEURMERK*/
	.meedoen {background: #00e800; color: #000;}
		.meedoen h1 { color: #000000; text-transform:  uppercase; margin-top: 40px;}
		.meedoen article {padding: 40px 0 60px 0;}
		.meedoen-spacer {background: #fa26ad; height: 80px; width: 100%;}	

/*HOME IN DE MEDIA*/
	.media {background: #ffed00; color: #000;}
		.media h1 { color: #000000; text-transform:  uppercase; margin-top: 40px;}
		.media article {padding: 40px 0 60px 0;}
		.media-spacer {background: #173dfa; height: 80px; width: 100%;}
		.media-links {padding: 75px 0;}
			.media-links h1.title {text-transform: uppercase; color: #173dfa; width: 350px; font-weight: bold;}
		.media-rechts {padding: 75px 0; background: #00e800;}
			.media-rechts article {padding: 0 75px;}
			.media-rechts h2 {text-transform: uppercase; font-size: 1.2em;}	

/*HOME CONTACT*/
	.contact {background: #173dfa; color: #fff;}
		.contact h1 { color: #fff; text-transform:  uppercase; margin-top: 40px;}
		.contact article {padding: 40px 0 60px 0;}
		.contact-spacer {background: #00e800; height: 80px; width: 100%;}	

/*HOME LOGOBALK*/
.logos {background: #fff; width: 100%; height: 80px;} 
	.logos article {margin: 0 auto;}
	.logos figure {display: inline-block;}
	.logos img, .logos .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a, .logos .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {width: auto; max-height: 50px; margin: 15px 15px;}
	.logos-spacer {background: #000; height: 80px; width: 100%;}

/* LANDING PAGES */
body.page-template-template-landing {background: #ffed00;}
.landing a {color: #173dfa;}

/*PLUGINS*/
	/*RESPONSIVE MENU PRO*/	
	#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item.responsive-menu-pro-current-item > .responsive-menu-pro-item-link:hover, #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item.responsive-menu-pro-current-item > .responsive-menu-pro-item-link {text-transform: uppercase;}
	/*toont menu onder het gele 'sluiten' kruis*/
	#responsive-menu-pro {margin-top: 50px !important; padding: 30px 0 !important;}

	/*POLYLANG*/
	#responsive-menu-pro li a img {width: 32px !important; height: 22px !important;}


@media screen and (max-width: 1199px){
	h1 {font-size: 2.5em;}
	.row {margin-left: 0; margin-right: 0;}
	.su-spoiler-style-default>.su-spoiler-content p, .su-spoiler-style-default>.su-spoiler-content ul {padding: 0 2em !important;}
}
@media screen and (max-width: 991px){
	h1 {font-size: 1.9em;}
	.container {max-width: 94%;}
	.intro-links h1.title, .waarom-links h1.title {width: auto; margin-right: 10px;}
	.intro-rechts article, .waarom-rechts article  {padding: 0 25px;}
	.logo img {width: 90%; height: auto; padding: 30px 0;}
	.logos {height: 160px;}
	figure {margin: 0;}
}
/*Achtergrondjes*/
@media screen and (max-width: 767px){
	.container {max-width: 100%; padding-left: 0; padding-right: 0;}
	.introdiv {background: #00e800; padding: 0;}
	.intro-links, section, .waarom-links {padding: 40px 25px 20px 25px;}
	.waar-title h1, .uitverkocht-title h1 {margin: 20px 25px 0 25px;}
	section.waar-overzicht {padding: 40px 30px;}
	.waarom {background: #ffed00; padding: 0;}
	.su-spoiler-title {line-height: 40px !important; padding-top: 0 !important;}
	.su-spoiler-style-default>.su-spoiler-content {padding: 1em 0;}
	.su-spoiler-style-default>.su-spoiler-content p {padding: 0 1em 0 0 !important;}
	.su-spoiler-style-default>.su-spoiler-content ul {padding: 0 1em 0 1em !important;}
}

@media screen and (min-width: 768px){
	.waar-overzicht {padding-bottom: 20px;}
}