/*   
	Theme Name:        Studio Campo Theme
	Theme URI:         https://studiocampo.nl
	Description:       Studio Campo theme.
	Author:            Studio Campo
	Author URI:        https://studiocampo.nl
	License:           GNU General Public License v3 or later.
	License URI:       https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain:       sc-theme
*/

:root {

	--paars:#504084;
	--donkerpaars:#21193C;
	--donkerpars2:#211D4E;
	--lichtgroen:#00c292;
	--groen:#1C948D;
	--blauw:#346F89;
	--zwart:#000000;
	--wit:#ffffff;
	--lichtgrijs:#f5f5f5;
	--lichtgrijs2:#ebebeb;
}

/* Font */
@font-face {
	font-family: 'Museo';
	src: url('assets/fonts/MuseoSans-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Museo';
	src: url('assets/fonts/MuseoSans-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Museo';
	src: url('assets/fonts/MuseoSans-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Algemeen */
html,
body {
	padding: 0;
	margin: 0;
	font-family: 'Museo', sans-serif;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-weight: 300;
	color:var(--zwart);
}

h1,
h2,
h3 {

	margin-top: 0;

	&.elementor-heading-title {

		line-height: initial;
	}
}

h1,
.h1,
h2,
.h2 {

	font-weight: 700;
}

h1,
.h1 {

	color:var(--lichtgroen);
	@media (min-width:1024px) {
		font-size: 62px;
		line-height: 88px;
	}
	@media (max-width:1023px) {
		font-size: 48px;
		line-height: 60px;
	}
	@media (max-width:460px) {
		font-size: 36px;
		line-height: 52px;
	}
}
h2,
.h2 {

	color:var(--paars);
	@media (min-width:768px) {
		font-size: 40px;
		line-height: 50px;
	}
	@media (max-width:767px) {
		font-size: 30px;
		line-height: 38px;
	}
}

h3,
.h3 {

	font-weight: 500;
	@media (min-width:768px) {
		font-size:30px;
		line-height: 40px;
	}
	@media (max-width:767px) {
		font-size:24px;
		line-height: 32px;
	}
}

.sc-h1-light {

	font-weight: 500;
	color:var(--wit);
}

h4 {

	font-size: 20px;
	line-height: 25px;
	font-weight: 500;
}

.sc-intro,
.sc-intro .elementor-heading-title {

	color:var(--paars);
	font-weight: 500;

	@media (min-width:768px) {

		font-size: 20px;
		line-height: 32px;
	}

	@media (max-width:767px) {

		font-size: 18px;
		line-height: 28px;
	}
}

.elementor-widget-menu-anchor {

	margin-top: -150px;
	padding-top: 150px;
}

@media(min-width:1101px) {

	header .elementor-sticky--active {

		top: 20px !important;
		
		>.e-con-inner {

			background-color: var(--donkerpars2);
			border-radius: 30px;
		}
	}
}

/**
* Menu 
*/
@media(min-width:1024px) {

	header .elementor-nav-menu--main .elementor-item {

		border-radius: 30px;
		background-color: rgba(255, 255, 255, 0.1);
	}

	header .elementor-nav-menu--main .elementor-item:hover,
	header .elementor-nav-menu--main .elementor-item.elementor-item-active {

		background-color:var(--paars);
	}
}

/**
* Hero
*/
.sc-header-container.e-con {

	position: absolute;
	max-width: 100%;
	width:1340px;
	left:50%;
	transform: translateX(-50%);
	padding-left: 50px;
	padding-right: 50px;

	@media(min-width:1501px) {
		padding-top:160px;
	}

	@media(min-width:1301px) and (max-width:1500px){
		padding-top:120px;
	}	

	@media(max-width:1300px) {
		padding-top:160px;
	}

	h1 {

		@media(min-width:1420px) {

			max-width: 700px;
			width:100%;
		}
	}

	.sc-header-container-extra h1 {

		@media(min-width:1320px) {

			max-width: 900px;
		}
	}

	.sc-h1-full h1 {
		max-width: 100%;
	}

	&.sc-header-long-h1 {

		h1 {

			@media(min-width:1400px) {

				max-width: 900px;
				width:100%;
			}
		}
	}

	@media(max-width:480px) {

		padding-left: 40px;
		padding-right: 40px;
		padding-top:120px;
	}
}

.sc-header-intro.e-con {

	@media(min-width:1301px) {

		position: absolute;
		left:0;
		bottom:0;
		max-width: 1100px;
		width:100%;
		padding-top: 40px;
		padding-right: 60px;
		padding-bottom: 0;
		padding-left:80px;

		&.sc-header-intro-full {

			max-width: 1200px;
		}
	}

	@media(max-width:1300px) {

		width:calc(100% - 60px);
		padding: 40px;
		border-top-left-radius: 40px;
		justify-content: flex-start;
	}

	@media(min-width:1101px) and (max-width:1300px) {

		margin-top: -200px;
	}

	@media(min-width:901px) and (max-width:1100px) {

		margin-top: -80px;
	}

	@media(max-width:900px) {

		margin-top: -30px;
	}

	@media(max-width:1024px) {

		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
		padding: 30px;
	}

	@media(max-width:767px) {

		width:calc(100% - 20px);
		margin-top: 0;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		padding: 20px;
	}

	.sc-intro {

		@media(min-width:1301px) {

			padding-right: 20px;

			&.sc-intro-approach {

				width:870px;
			}

		}

		@media(min-width:1581px) {

			width: 800px;

			&.sc-intro-full {

				width:960px;
			}
		}

		@media(max-width:1580px) {

			width: 100%
		}

		@media(max-width:767px) {

			width: 100%;
		}
	}

	.sc-intro-button {

		@media(min-width:1581px) {

			margin-left:80px;
		}
	}
}

.sc-header-intro-50.e-con {

	@media (min-width: 1301px) {

		width: 50%;
		padding-left:170px;
	}
}

/**
* Text in image
*/
.sc-image-caption {

	position:absolute;
	bottom:20px;
	background-color: var(--wit);
	text-align: right;

	&.sc-image-caption-right {

		right: 0;
		padding:20px 20px 20px 30px;
		border-top-left-radius: 40px;
	}

	&.sc-image-caption-left {

		left:0;
		padding:20px 30px 20px 20px;
		border-top-right-radius: 40px;
	}

	.sc-text {

		text-transform: uppercase;
		color:var(--paars);
		line-height: 18px;
	}

	.curved-corner-topleft {

		top:-40px;
		left:0;
		transform: rotate(-90deg);
	}

	.curved-corner-bottomleft {

		bottom:0;
		left:-40px;
		transform: rotate(-90deg);
	}

	.curved-corner-topright {

		top:-40px;
		right:0;
		transform: rotate(90deg);
	}

	.curved-corner-bottomright {

		bottom:0;
		right:-40px;
		transform: rotate(90deg);
	}

	@media (min-width:488px) {

		&.sc-image-caption-60 {

			width:60%;
		}

		&.sc-image-caption-70 {

			width:70%;
		}

		&.sc-image-caption-80 {

			width:80%;
		}
	}

	@media (max-width:487px) {

		width:calc(100% - 120px);
		max-width:80%;
	}
}

/**
* For all blocks with background with color
*/
.sc-curved-corners {

	position:absolute;
	top:20px;
	background-color: var(--wit);
	padding: 10px 60px 30px;
	border-bottom-right-radius: 40px;
	min-width:50%;

	&.sc-curved-corners-66 {

		width: 66%;
	}

	@media(max-width:768px) {

		width:70%;
		padding: 10px 30px 20px;
	}

	h2 {

		margin: 0;
	}
	
	.curved-corner-topleft {

		top:-40px;
		left:10px;
		transform: rotate(-90deg);
	}

	.curved-corner-topright {

		top:-0;
		right:-40px;
		transform: rotate(-90deg);
	}

	.curved-corner-bottomleft {

		bottom:-40px;
		left:0;
		transform: rotate(90deg);
	}

	.curved-corner-bottomright {

		bottom:10px;
		right:-40px;
		transform: rotate(90deg);
	}

	/* @media(max-width:768px) {

		.curved-corner-topleft,
		.curved-corner-topright,
		.curved-corner-bottomleft,
		.curved-corner-bottomright {

			display: none;
		}
	} */
}

/**
* Only header
*/
.sc-curved-corners-header {

	height: 100%;
	border-top-right-radius: 40px;
	z-index: 0 !important;

	@media(max-width:1300px) {

		border-top-left-radius: 40px;

		.curved-corner-topleft,
		.curved-corner-bottomright {

			display: none;
		}
	}
}

.curved-corner-bottomleft,
.curved-corner-bottomright,
.curved-corner-topleft,
.curved-corner-topright {

	width: 40px;
	height: 40px;
	overflow: hidden;
	position: absolute;
}

.curved-corner-bottomleft:before,
.curved-corner-bottomright:before,
.curved-corner-topleft:before,
.curved-corner-topright:before {

	content: "";
	display: block;
	width: 200%;
	height: 200%;
	position: absolute;
	border-radius: 50%;
}

.curved-corner-bottomleft:before {

	bottom: 0;
	left: 0;
	box-shadow: -20px 20px 0 0 var(--wit);
}

.curved-corner-bottomright:before {

	bottom: 0;
	right: 0;
	box-shadow: 20px 20px 0 0 var(--wit);
}

.curved-corner-topleft:before {

	top: 0;
	left: 0;
	box-shadow: -20px -20px 0 0 var(--wit);
}

.curved-corner-topright:before {

	top: 0;
	right: 0;
	box-shadow: 20px -20px 0 0 var(--wit);
}

.sc-rounded {

	background-color: var(--paars);
	border-radius: 40px;
	width:600px;
	color:var(--wit);
	box-sizing: border-box;
	padding: 40px 80px 80px 40px;
	padding: 80px;
	position: relative;
	
	.sc-rounded-inner {

		width: 80px;
		height: 80px;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;

		&.sc-top-left {

			top: -1px;
			left: -1px;
			border-bottom-right-radius: 40px;
		}

		/* &:hover {

			background-size: 100% 100%;

			.sc-span-border {

				&:before {

					border-radius: 0;
					transition: 0.5s;
				}
			}
		} */

		&.sc-top-right {

			top: -1px;
			right: -1px;
			border-bottom-left-radius: 40px;
		}

		&.sc-bottom-right {

			bottom: -1px;
			right: -1px;
			border-top-left-radius: 40px;
		}

		&.sc-bottom-left {

			bottom: -1px;
			left: -1px;
			border-top-right-radius: 40px;
		}
	}

	.sc-rounded-right {

		position: absolute;
		top:0;
		right: -80px;
		width: 80px;
		height: calc(100% - 80px);
		border-top-right-radius: 40px;
		border-bottom-right-radius: 40px;

		.sc-rounded-curved {

			width: 40px;
			height: 40px;
			display: block;
			position: absolute;
			left:0;
			bottom: -40px;
			overflow: hidden;

			&:after {

				content: "";
				display: block;
				width: 200%;
				height: 200%;
				position: absolute;
				border-radius: 50%;
				top: 0;
				left: 0;
			}
		}

		&.sc-bg-lichtgroen .sc-rounded-curved:after {

			box-shadow: -20px -20px 0 0 var(--lichtgroen);
		}

		&.sc-bg-paars .sc-rounded-curved:after {

			box-shadow: -20px -20px 0 0 var(--paars);
		}

		&.sc-bg-blauw  .sc-rounded-curved:after {

			box-shadow: -20px -20px 0 0 var(--blauw);
		}

		&.sc-bg-groen .sc-rounded-curved:after {

			box-shadow: -20px -20px 0 0 var(--groen);
		}
	}

	.sc-rounded-top {

		position: absolute;
		top:-80px;
		left: 0;
		height: 80px;
		width: calc(100% - 80px);
		border-top-left-radius: 40px;
		border-top-right-radius: 40px;

		.sc-rounded-curved {

			width: 40px;
			height: 40px;
			display: block;
			position: absolute;
			right:-40px;
			bottom: 0;
			overflow: hidden;

			&:after {

				content: "";
				display: block;
				width: 200%;
				height: 200%;
				position: absolute;
				border-radius: 50%;
				bottom: 0;
				left: 0;
			}
		}

		&.sc-bg-lichtgroen .sc-rounded-curved:after {

			box-shadow: -20px 20px 0 0 var(--lichtgroen);
		}

		&.sc-bg-paars .sc-rounded-curved:after {

			box-shadow: -20px 20px 0 0 var(--paars);
		}

		&.sc-bg-blauw  .sc-rounded-curved:after {

			box-shadow: -20px 20px 0 0 var(--blauw);
		}

		&.sc-bg-groen .sc-rounded-curved:after {

			box-shadow: -20px 20px 0 0 var(--groen);
		}
	}

	.sc-bg-wit {

		background-color: var(--wit);
		background-image: linear-gradient(135deg, var(--paars),var(--paars));
		background-size: 0 100%;
		background-repeat: no-repeat;
		transition: 0.4s;
		transition-delay: 0.2s;
	}

	.sc-bg-paars {

		background-color: var(--paars);
	}

	.sc-bg-lichtgroen {

		background-color: var(--lichtgroen);
	}

	.sc-bg-blauw {

		background-color: var(--blauw);
	}

	.sc-bg-groen {

		background-color: var(--groen);
	}


	/* span {

		position: absolute;

		&.sc-span-40 {

			width: 40px;
			height: 40px;
		}

		&.sc-span-30 {

			width: 30px;
			height: 30px;
		}

		&.sc-span-top-left {

			left:-40px;
			top:1px;
		}

		&.sc-span-left-top {

			top:-40px;
			left:1px;
		}

		&.sc-span-top-right {

			right: 1px;
			top:-40px;
		}

		&.sc-span-right-top {

			top: 1px;
			right:-40px;
		}

		&.sc-span-bottom-left {

			left: -40px;
			bottom:1px;
		}

		&.sc-span-left-bottom {

			bottom: -40px;
			left:1px;
		}

		&.sc-span-bottom-right {

			bottom: -40px;
			right:1px;
		}

		&.sc-span-right-bottom {

			right: -40px;
			bottom:1px;
		}

		&.sc-span-border {

			&:before {

				content: '';
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		&.sc-span-border-paars {

			&:before {

				background-color: var(--paars);
			}
		}

		&.sc-span-border-lichtgroen {

			&:before {

				background-color: var(--lichtgroen);
			}
		}

		&.sc-span-border-blauw {

			&:before {

				background-color: var(--blauw);
			}
		}

		&.sc-span-border-groen {

			&:before {

				background-color: var(--groen);
			}
		}

		&.sc-span-border-top-left {

			&:before {

				border-top-left-radius: 100%;
			}
		}

		&.sc-span-border-top-right {

			&:before {

				border-top-right-radius: 100%;
			}
		}

		&.sc-span-border-bottom-right {

			&:before {

				border-bottom-right-radius: 100%;
			}
		}

		&.sc-span-border-bottom-left {

			&:before {

				border-bottom-left-radius: 100%;
			}
		}
	} */

	.sc-action {

		width: 50px;
		height:50px;
		color: var(--wit);
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

}

/**
* Button in rouded block
*/
.sc-button-round {

	svg {

		transform: rotate(-135deg);
		transition: all 0.3s linear;
	}

	&:hover {

		svg {

			transform: rotate(0deg);
		}
	}
}

.sc-rounded:has(.sc-button-round:hover) {
    background-color: lightcoral;
}

/**
* Dots as after background
*/
.sc-dot-before {

	position: absolute !important;
	width: 30%;
	height: 40%;
}

.sc-dot-before-top-right{

	top:-100px;
	right:-20px;
}

.sc-dot-before-left {

	bottom:-40px;
	left:-40px;
}

.sc-dot-before-right {

	bottom:-40px;
	right:-20px;
}

/**
* Footer
*/
.sc-menu-list-before {
	
	a {
		&:after {

			content: '>';
			font-size: 12px;
			position: absolute;
			top: 50%;
			left:0;
			transform: translateY(-50%);
			opacity:1 !important;
			background-color: transparent !important;
		}

		&:hover {

			&:after {

				transform: translateY(-50%) !important;
				top: 50% !important;
				left:2px;
			}
		}
	}
}

/**
* Tha latest blog
*/
.sc-the-latest {

	display: grid;

	@media (min-width:1024px) {

		grid-template-columns: 1fr 1fr;
	}

	@media (max-width:1023px) {

		margin: 0 20px;
	}

	.sc-the-latest-content {

		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;

		@media (min-width:1024px) {

			padding-right: 80px;
		}

		@media (max-width:1023px) {

			padding: 50px;
		}

		@media (max-width:641px) {

			padding: 10px;
		}

		&:before {

			content:'';
			position: absolute;
			offset: 0;
			padding: 30px;
			background-color: var(--lichtgrijs);
			border-radius: 30px;
			z-index: -1;
			top:-50px;

			@media(min-width:1100px) {

				left:-50px;
				width: calc(100% + 180px);
				height: calc(100% + 100px);
			}
			@media(max-width:1099px) {

				left:-20px;
				right:20px;
				width: calc(100% + 180px);
				height: calc(100% + 100px);
			}
			@media (max-width:1023px) {

				left:-20px;
				right:20px;
				width: calc(100% + 40px);
				height: calc(100% + 100px);
			}
		}

		.sc-the-latest-content-terms {

			text-transform: uppercase;
			color: var(--paars);
			font-size: 14px;
			font-weight: 400;
			margin-bottom: 10px;
		}

		.sc-the-latest-content-title {

			color:var(--paars);
			margin-bottom: 4px;
			font-size: 28px;
		}

		.sc-the-latest-content-time {

			font-size: 14px;
		}

		.sc-the-latest-content-excerpt {

			margin-top:20px;
			margin-bottom: 20px;
		}

		.sc-the-latest-content-permalink {

			font-weight: 500;
			color:var(--paars);
			display: flex;
			align-items: center;
			transition: all 0.3s linear;

			&:hover {

				color: var(--lichtgroen);

				.sc-the-latest-content-more-arrow {

					background-color: var(--lichtgroen);
					margin-left: 13px;
				}
			}
		}

		.sc-the-latest-content-more-arrow {

			background-color: var(--paars);
			padding:10px;
			width: 38px;
			aspect-ratio: 1;
			border-radius: 50%;
			margin-left: 10px;
			transition: all 0.3s linear;
		}
	}

	.sc-the-latest-thumbnail {

		position: relative;
		
		img {

			border-radius: 40px;
			display: block;

			@media(max-width:1023px) {

				max-width: 90%;
			}
		}

		@media(max-width:1023px) {

			text-align: center;
			margin-top: 20px;
		}

		&:before {

			content:'';
			width:150px;
			height: 250px;
			background-image: url(assets/img/dots-small-2.webp);
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			transform: rotate(180deg);
			position: absolute;
			z-index: -1;

			@media(min-width:1201px) {

				right: -60px;
			}

			@media(max-width:1200px) {

				right: 0;
			}

			@media(min-width:768px) {

				top:-120px;
			}

			@media(max-width:767px) {

				top:-80px;
			}
		}

		&:after {

			content: '';
			position: absolute;
			z-index: 0;
			width: 100%;
			height: 100%;
			inset: 0;
			opacity:0.5;
			top: 0;
			left: 0;
			border-radius: 40px;
			transition: all 0.3s linear;
			background-color: var(--paars);
		}
	}
}

/**
* Alle blogs:
* @offset: 1
*/
.sc-all-blogs {

	display: grid;
	gap:30px;

	@media(min-width:1024px) {

		grid-template-columns: 1fr 1fr 1fr;
	}

	@media(min-width:640px) and (max-width:1023px) {

		grid-template-columns: 1fr 1fr;
	}

	@media(max-width:639px) {

		grid-template-columns: 1fr;
	}

	.sc-all-blog {

		border-radius: 40px;
		color:var(--wit);
		padding: 30px 30px 80px;
		background-blend-mode: luminosity;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		transition: all 0.3s linear;
		position: relative;
		display: flex;

		&:before {

			content: '';
			position: absolute;
			z-index: 0;
			width: 100%;
			height: 100%;
			offset: 0;
			opacity:0;
			top: 0;
			left: 0;
			border-radius: 40px;
			transition: all 0.3s linear;
		}

		&:nth-child(2n+1),
		&:nth-child(2n+1):before {

			background-color: var(--lichtgroen);
		}

		&:nth-child(2n+2),
		&:nth-child(2n+2):before {

			background-color: var(--paars);
		}

		.sc-all-content {

			position: relative;
			z-index: 1;
		}

		.sc-all-content-terms {

			font-weight: 400;
			text-transform: uppercase;
			font-size: 14px;
			margin-bottom: 10px;
		}

		.sc-all-content-title {

			font-size: 26px;
			line-height: 32px;
			font-weight: 600;
		}

		.sc-all-content-excerpt {

			-webkit-line-clamp: 7;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			opacity: 0;
			transition: all 0.3s linear;
		}

		&:hover {

			background-image: none !important;
			background-blend-mode: normal;
			
			&:before,
			.sc-all-content-excerpt {

				opacity: 1;
			}
		}

		.sc-all-content-permalink {

			position: absolute;
			right: 0;
			bottom: -50px;
			display: flex;
			align-items: center;

			.sc-all-content-more-text {

				font-weight: 500;
				color: var(--wit);
				font-weight: 600;
				opacity:0;
				margin-right: 20px;
				transition: all 0.3s linear;
			}

			.sc-all-content-more-arrow {

				padding: 8px;
				width: 40px;
				height: 40px;
				border-radius: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: var(--wit);
				transition: all 0.3s linear;
				position: relative;

				img {

					position: absolute;
					left: 50%;
                    transform: translateX(-50%);
				}

				.arrow {

					opacity:0;
				}
			}
		}

		&:nth-child(2n+1):hover {

			.sc-all-content-more-arrow {

				background-color: var(--paars);
			}
		}

		&:nth-child(2n+2):hover {

			.sc-all-content-more-arrow {

				background-color: var(--lichtgroen);
			}
		}

		&:hover {

			.sc-all-content-permalink {

				.sc-all-content-more-text {

					opacity:1;
					margin-right: 8px;
				}

				.arrow {

					opacity:1;
				}

				.plus {

					opacity: 0;
				}
			}
		}
	}
}

/**
* Insights
*/
.sc-insight-image {

	background-color: var(--donkerpaars);
	background-blend-mode: luminosity;
	overflow: hidden;

	&:before {

		background-color: var(--donkerpaars);
	}

	.sc-curved-corners {

		.curved-corner-topleft {
	        left: 0;
		}

		.curved-corner-bottomright {

        	bottom: 0;
		}
	}

	/* @media(max-width:1100px) {

		.sc-header-intro {

			position: absolute;
			bottom: -40px !important;
			left:10px !important;
		}
	} */
}

/**
* Impact
*/
.sc-anchor-with-dot:after {

	content:'';
	width:10px;
	height: 10px;
	background-color: var(--lichtgroen);
	border-radius: 100%;
	position: absolute;
	right: 0;
	bottom:-6px;
}

/**
* Digital Assets
*/
.sc-digital-assets-h2-title {
	span {
		color:var(--paars);
		display: block;
	}
}