/*
Theme Name: Buro YOUP
Theme URI: https://www.lemon.nl
Description: 
Version: 1.1
Author: Roeland ten Holder | Lemon
Author URI: roeland@lemon.nl
*/

/** ******************************** **/
/**      _____                       **/
/**    _(  _  )__________________    **/
/**   ( | (___)     | ____ |  _  |   **/
/**   |_|_______|_|_|______|_| |_|   **/
/**                                  **/
/**            www.lemon.nl          **/
/**                                  **/
/** ******************************** **/

/*************** COLORS ***************/
:root {
	--green-light: #e1eae1;
	--green:  #d2dfd2;
	--green-medium: #c1d6c1; 
	--green-dark: #a4c0a4; 
	--purple-lighter:  #fdecf5;
	--purple-light:  #ba4f84;
	--purple:  #b23c77;
	--purple-medium:  #a82a69;
}

.g-5, .gx-5 {
	--bs-gutter-x: 5rem;
}

.row {
	--bs-gutter-x: 3rem;
}


.content img,
.roundcorners {
	border-radius: 20px;
}


.notround .content img {
	border-radius: 0px;
}

.bggreen-lighter	{ background-color: var(--green-lighter); }
.bggreen-light		{ background-color: var(--green-light); }
.bggreen			{ background-color: var(--green); }
.bggreen-medium		{ background-color: var(--green-medium); }
.bggreen-dark		{ background-color: var(--green-dark); }
.bgpurple-lighter	{ background-color: var(--purple-lighter); }
.bgpurple-light		{ background-color: var(--purple-light); }
.bgpurple			{ background-color: var(--purple); }
.bgpurple-medium	{ background-color: var(--purple-medium); }
.bgpurple-dark		{ background-color: var(--purple-dark); }
.bgwhite			{ background-color: #ffffff; }
.bgblack			{ background-color: #000000; }


.bgblack h1, .bgblack h2, .bgblack h3, .bgblack h4, .bgblack h5, .bgblack h6, .bgblack p { color: #ffffff; }
.bgpurple-light h1, .bgpurple-light h2, .bgpurple-light h3, .bgpurple-light h4, .bgpurple-light h5, .bgpurple-light h6, .bgpurple-light p { color: #ffffff; }
.bgpurple-lighter h1, .bgpurple-lighter h2, .bgpurple-lighter h3, .bgpurple-lighter h4, .bgpurple-lighter h5, .bgpurple-lighter h6, .bgpurple-lighter p { color: #000000; }
.bgpurple h1, .bgpurple h2, .bgpurple h3, .bgpurple h4, .bgpurple h5, .bgpurple h6, .bgpurple p { color: #ffffff; }
.bgpurple-medium h1, .bgpurple-medium h2, .bgpurple-medium h3, .bgpurple-medium h4, .bgpurple-medium h5, .bgpurple-medium h6, .bgpurple-medium p { color: #ffffff; }
.bgpurple-dark h1, .bgpurple-dark h2, .bgpurple-dark h3, .bgpurple-dark h4, .bgpurple-dark h5, .bgpurple-dark h6, .bgpurple-dark p { color: #ffffff; }


.green-lighter		{ color: var(--green-lighter); }
.green-light		{ color: var(--green-light); }
.green				{ color: var(--green); }
.green-medium		{ color: var(--green-medium); }
.green-dark			{ color: var(--green-dark); }
.purple-lighter		{ color: var(--purple-lighter); }
.purple-light		{ color: var(--purple-light); }
.purple				{ color: var(--purple); }
.purple-medium		{ color: var(--purple-medium); }
.purple-dark		{ color: var(--purple-dark); }
.white 				{ color: #ffffff !important;}


/*************** FONTS ****************/

h1					{ font: 700 normal 50px/50px "Hind", Arial, Helvetica, Verdana, sans-serif; color: #000000; padding: 0 0 0 0; }
h2 					{ font: 700 normal 45px/45px "Hind", Arial, Helvetica, Verdana, sans-serif; color: #000000; padding: 0 0 0 0; }
h3 					{ font: 700 normal 40px/40px "Hind", Arial, Helvetica, Verdana, sans-serif; color: #000000; padding: 0 0 0 0; }
h4 					{ font: 600 normal 30px/30px "Hind", Arial, Helvetica, Verdana, sans-serif; color: #000000; padding: 0 0 0 0; }
h5 					{ font: 400 normal 22px/22px "Hind", Arial, Helvetica, Verdana, sans-serif; color: #000000; padding: 0 0 0 0; }
h6					{ font: 400 normal 20px/20px "Hind", Arial, Helvetica, Verdana, sans-serif; color: #000000; padding: 0 0 5px 0; }
.form-container-contact legend,
body 				{ font: 400 normal 18px/32px "Open Sans", Arial, Helvetica, Verdana, sans-serif; color: #000000; }
.small,.small a 	{ font: 400 normal 14px/16px									 	Arial, Helvetica, Verdana, sans-serif; color: #000000; }
.date 				{ font: 400 normal 12px/16px "Open Sans", Arial, Helvetica, Verdana, sans-serif; color: #000000; }

.rtl				{ direction: rtl; }
b, strong 			{ font-weight: 700; }

.blogposts p 		{ padding-top: 20px; line-height: 1.2em; }

a.underline 		{ text-decoration: underline; }

h1 a, h2 a, h3 a, 
h4 a, h5 a, h6 a 	{ text-decoration: none; }

.font-700 { font-weight: 700; }
.font-600 { font-weight: 600; }
.font-500 { font-weight: 500; }
.font-400 { font-weight: 400; }
.font-300 { font-weight: 300; }
.font-200 { font-weight: 200; }

#wp-admin-bar-wp-logo,
#wp-admin-bar-customize,
#wp-admin-bar-updates,
#wp-admin-bar-comments,
#wp-admin-bar-itsec_admin_bar_menu,
#wp-admin-bar-wh_checking,
#wp-admin-bar-cs-explain,
#wp-admin-bar-themes,
#wp-admin-bar-gform-forms {
	display: none;
}


/* .contentblock .content ul li, */
.nicebullets ul li {
	list-style-type: none;
	margin-left: 0.95em;
	padding-left: 0.9em;
	text-indent: -0.9em;
}

/* .contentblock .content ul li::before, */
.nicebullets ul li::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	/* font: var(--fa-font-solid);
	content: "\f00c"; */
	font-weight: 700;
	content: '✓';
	margin-right: 15px;
	color: var(--purple);
}


/************* CONTAINERS *************/
.pagewrapper 				{ width: 100%; margin: 0 auto; }
.fullcontainer 				{ width: 100%; }
.headerwrapper 				{ width: 100%; max-width: 1440px; padding-top: 100px; padding-bottom: 80px; margin: 0 auto; }

.widthcontainer 			{ width: 100%; max-width: 1240px; padding: 0 20px; margin-left: auto; margin-right: auto; }
.container 					{ width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; }
.smallcontainer 			{ width: 100%; max-width: 740px; padding: 0 20px; margin-left: auto; margin-right: auto; }
iframe 						{ max-width: 100%; }




.headerwrapper {
	background-size: contain;
	background-repeat: no-repeat;
	/* aspect-ratio: 2/1; */
	height: 720px;
}

.logo {
	width: 100%;
	max-width: 450px;
}

.content-bottom {
	position: absolute;
	bottom: 0;
}

.headerwrapper h1 {
	max-width: 750px;
	color: #ffffff;
}

.headerwrapper .container,
.headerwrapper .container .row {
	height: 100%;
}

body:not(.home) .headerwrapper .container {
	aspect-ratio: unset;
}

body:not(.home) .homepage-block,
body:not(.home) .homepage,
body.home .subpage {
	display: none;
}

body.home .homepage,
body:not(.home) .subpage {
	display: inline-block;
}

body.home .homepage-block {
	display: block;
}





/************** Buttons **************/


.gform_button,
.btn {
	position: relative;
	display: inline-block;
	border-radius: 30px;
	text-shadow: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	padding: 12px 45px 14px;
	font-weight: 500;
	font-size: 23px;
	line-height: 28px;
	text-decoration: none;
	border: 0;
	margin: 15px 20px 0 0;
}


.btn:hover {
	text-decoration: none;
}

.btn.button-arrow {
	padding-right: 40px;
}

.btn.button-arrow i {
	position: absolute;
	right: 3px;
	top: 3px;
	padding-left: 1px;
	width: 24px;
	height: 24px;
	border-radius: 23px;
	font-size: 14px;
	line-height: 25px;
	text-align: center;
}

.gform_button,
.btn {
	color: #000000;
	background-color: var(--green);
}
.gform_button:hover,
.btn:hover {
	color: #000000;
	background-color: var(--green-dark);
}

.bggreen .btn {
	color: #000000;
	background-color: #ffffff;
}

.bggreen .gform_button,
.bggreen .btn:hover {
	color: #ffffff;
	background-color: #000000;
}



.gform_validation_errors,
.gform_required_legend {
	display: none;
}




.gform_button:hover {
	color: #000000;
	background-color: var(--yellow);
}

.gform_button {
	margin-right: 0;
}









.footerwrapper  {
	position: relative;
	overflow: clip;
	width: 100%;
	min-height: 200px;
	background-color: var(--grey1);

}

.footerwrapper .container {
	position: relative;
	z-index: +1;
	padding-top: 240px;
	padding-bottom: 40px;
	color: #ffffff;
	font-weight: bold;
	font-size: 17px;
	line-height: 32px;
}

.footerwrapper a {
	color: #ffffff;
}

.footerwrapper .logo {
	float: right;
	max-width: 200px;
}










/*************** SOCIAL ***************/

.social-link {
	display: inline-block;
	text-align: center;
	margin: 0 2px;
	width: 44px;
	height: 44px;
	border-radius: 30px;
	background-color: #000000;
	color: #ffffff !important;
	font-size: 24px;
	line-height: 45px;
}

.social-link .fa-instagram {
	font-size: 26px;
}

.social-links {
	margin: 0;
}

.social-links .social-link {
	margin: 5px 15px 0 2px;
}

.social-links a {
	position: relative;
	opacity: 1;
	top: 0;
	transition: top	0.2s;
}

.social-links a:hover {
	opacity: 0.8;
	top: -1px;
	transition: top	0.2s;
}


a.social-spotify {
	position: relative;
	margin: 5px 15px 0 2px;
	font-size: 45px;
	top: 7px;
	z-index: +1;
}

a.social-spotify::before {
	content: " ";
	width: 36px;
	height: 36px;
	position: absolute;
	top: 8px;
	left: 4px;
	border-radius: 20px;
	background-color: #fff;
	z-index: -1;
}

a.social-spotify:hover {
	top: 6px;
}




.social-links .podimo-link .podimo-icon {
	fill: #000;
	width: 34px;
}

.social-links .podimo-link {
	top: -5px;
	margin: 0 5px;
}
.social-links .podimo-link:hover {
	top: -6px;
}

.contentpanel {
	border: 0;
	overflow-y: clip;
	padding-bottom: 0px;
}

.equal .panel.contentpanel {
	height: calc(100% - 30px);
}

.contentpanel .panel-header {
	min-height: 300px;
	background-size: cover;
}

.contentpanel .panel-body {
	text-align: center;
	padding: 0 20px 20px;
}

.contentpanel .panel-body h3 {
	padding-bottom: 10px;
}

.contentpanel .panel-body,
.contentpanel .panel-body p,
.contentpanel .panel-body a,
.contentpanel .panel-body h3 {
	
}


a.has-card ,
a.has-card:hover {
	text-decoration: none;
}

.card {
	border: none;
	border-radius: 0;
	margin-left: 0px;
	margin-right: 0px;
	/* height: 100%; */
	aspect-ratio: 1 / 1;
	background-position: center center;
	background-size: 105%;
	transition: all 0.4s;
}

a.has-card:hover .card {
	background-size: 110%;
	transition: all 0.2s;
}

.card-body {
	padding: 30px 30px 0 30px;
	text-align: center;
}

.card-body h4 {
	color: #ffffff;
	text-shadow: 0 0 15px rgba(0,0,0,0.25);
}

.card-footer {
	border: none;
	border-radius: 0;
	background: none;
	text-align: center;
	color: #ffffff;
	text-shadow: 0 0 15px rgba(0,0,0,0.25);
	padding-bottom: 20px;
	font-weight: bold;
}

ul.menu_shortcode_programma {
	margin-bottom: 0;
}



.coworker-links {
	max-width: 300px;
	margin: 0 !important;
}

.coworker-links a {
	width: 32px;
	height: 32px;
	background-color: var(--purple-light);
	color: #ffffff;
	border-radius: 16px;
	margin: 0 2px 5px;
	display: inline-block;
	line-height: 32px;
	font-size: 16px;
}

.coworker-links a:hover {
	background-color: var(--purple);
}


.row.quote {
	position: relative;
	overflow: hidden;
}

.row.quote::before,
.row.quote::after {
	position: absolute;
	pointer-events: none;
	content: " ";
	width: 140px;
	height: 140px;
	background-image: url('images/quote.svg');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.5;
}

.row.quote::before {
	left: 0;
	top: -40px;
}

.row.quote::after {
	right: 0;
	bottom: -40px;
	transform: rotate(180deg);
}


.row.quote .content {
	position: relative;
	z-index: +1;
	font-weight: 500;
	font-style: italic;
}

/************* RESPONSIVE *************/
.desktop 				{ display: block; }
.mobile, .mobilebut		{ display: none !important; }


/* Bootstrap Breakpoint - Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1199.98px) {
	.headerwrapper {
		padding-top: 60px;
		padding-bottom: 60px;
		background-size: 60% auto;
		height: 580px;
	}
	h1 { font-size: 40px; line-height: 40px; }
}


/* Bootstrap Breakpoint - Large devices (desktops, 992px and up) */
@media (max-width: 991.98px) {
	.desktop 	{ display: none !important; }
	.mobile 	{ display: block !important; }

}


/* Bootstrap Breakpoint - Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px) {

	.g-5, .gx-5 {
		--bs-gutter-x: 1rem;
	}

	
	.row {
		--bs-gutter-x: unset;
	}

	.widthcontainer,
	.container,
	.smallcontainer { 
		padding-right: var(--bs-gutter-x,.75rem);
    	padding-left: var(--bs-gutter-x,.75rem);
		max-width: 90vw !important;
	}

	.fullcontainer .container { 
		/* max-width: 100vw !important; */
	}

	h1					{ font-size: 24px; line-height: 24px; }
	h2 					{ font-size: 24px; line-height: 24px; }
	h3 					{ font-size: 24px; line-height: 24px; }
	h4 					{ font-size: 24px; line-height: 24px; }
	h5 					{ font-size: 16px; line-height: 16px; }
	h6					{ font-size: 16px; line-height: 16px; }
	body 				{ font-size: 17px; line-height: 26px; }
	.small,.small a 	{ font-size: 14px; line-height: 16px; }
	.date 				{ font-size: 14px; line-height: 16px; }

	.col_1_of_2 .contentpadding,
	.col_1_of_3 .contentpadding {
		padding-bottom: 0;
	}

	.fullcontainer .contentpadding {
		/* padding-top: 20px;
		padding-bottom: 20px; */
	}


	.gform_button, .btn {
		margin-right: 0;
		padding: 12px 20px 14px;
	}

	.bottoms {
		margin-bottom: 20px !important;
	}

	.bottoms-xl {
		margin-bottom: 40px !important;
	}

	.headerwrapper {
		padding-top: 20px;
		padding-bottom: 20px;
		background-size: 50% auto;
		height: 280px;
	}


	.card {
		margin: 0 15px 30px;
	}
}


/* Bootstrap Breakpoint - Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {

}


/* Extra Breakpoint */
@media all and (max-width: 480px) {

}