/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/* CSS properties */
:root {
	--border-radius-sm: 10px;
	--border-radius-md: 20px;
	--border-radius-lg: 40px;
	--section-padding-lg: 120px;
	--section-padding-mdlg: 90px;
	--section-padding-md: 60px;
	
	--gap-md: 2rem;
	--gap-lg: 3rem;
	
	--squiggle-fill: var(--color-blaa, #454bc0);
	
	@media (max-width: 780px) {
		--section-padding-lg: 40px;
		--section-padding-md: 40px;
	}
	
}

/* Utility classes */

.global-round-corners {
	border-radius: var(--border-radius-lg, 40px);
}

.embed[data-provider="SoundCloud"] iframe {
	/*border-radius: var(--border-radius-md);*/
	overflow: hidden;
}
.embed[data-type="video"] iframe {
	border-radius: var(--border-radius-lg);
	overflow: hidden;
}

.embed-ratio {
	position:relative;
	display: block;
	overflow: hidden;
	padding-bottom: calc(100% * var(--embed-ratio, .75));
}
.embed-ratio iframe {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
/* Colors */
.bg--moerk-blaa {
	background-color: var(--color-moerk-blaa) !important;
	--color-content-heading: white;
	--color-content-text: white;
	--squiggle-fill: var(--color-himmelblaa);
}
.bg--solopgang {
	background-color: var(--color-solopgang) !important;
	--color-content-heading: black;
	--color-content-text: black;
}
.bg--himmelblaa {
	background-color: var(--color-himmelblaa) !important;
	--color-content-heading: black;
	--color-content-text: black;
}
.bg--laks {
	background-color: var(--color-laks) !important;
	--color-content-heading: black;
	--color-content-text: black;
}
.bg--lavendel {
	background-color: var(--color-lavendel) !important;
	--color-content-heading: black;
	--color-content-text: black;
}


/* ACF flexible content styles */
.repeater-row > .repeater-field:only-child {
	display: block !important;
}

.post_custom_field.type_repeater {
	--block-content-width: var(--site-content-width, 1200px);
	--block-side-padding: 2.5rem;
	--block-bg-offset: max((100vw - var(--block-content-width))/2, var(--block-side-padding));
}

.block-has-background,
.block-to-edge {
	margin-left: calc(-1 * var(--block-bg-offset));
	margin-right: calc(-1 * var(--block-bg-offset));
	padding-left: var(--block-bg-offset);
	padding-right: var(--block-bg-offset);
}

.block-has-background {

	--block-bg-color: transparent;
	position: relative;

	color: var(--color-content-text);
	background-color: var(--block-bg-color);
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.block-has-background-moerk-blaa {
	--block-bg-color: var(--color-moerk-blaa);
	--color-content-heading: white;
	--color-content-text: white;
	--color-content-link: white;
	--squiggle-fill: var(--color-himmelblaa);
}
.block-has-background-solopgang {
	--block-bg-color: var(--color-solopgang);
}
.block-has-background-himmelblaa {
	--block-bg-color: var(--color-himmelblaa);
}
.block-has-background-laks {
	--block-bg-color: var(--color-laks);
}
.block-has-background-lavendel {
	--block-bg-color: var(--color-lavendel);
}


.block-has-background-moerk-blaa-squiggle {
	--block-bg-color: var(--color-moerk-blaa);
	background-image: url('img/bg_parallax_1.png');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}
.block-has-background-laks-squiggle {
	--block-bg-color: var(--color-laks);
	background-image: url('img/bg_parallax_2.png');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}

.block-has-default-bgimg {
	background-image: url('img/header_default_bg.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	/*background-size: max(1450px, 100vw);*/
	background-size: contain;
}

@media (max-width: 768px) {
	
	.block-has-background-moerk-blaa-squiggle {
		background-attachment: inherit;
	}
	.block-has-background-laks-squiggle {
		background-attachment: inherit;
	}
	.block-has-default-bgimg {
		background-image: url('img/header_default_bg_mobile.svg') !important;
		background-position: 100% 0% !important;
		background-size: contain;
		padding-top: 170px !important;
	}
}

/* Grid styles */
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap, 30px);
}

@media (max-width: 768px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

.grid img {
	max-width: 100%;
}


/* Ratio-based layout */
[class*='has-ratio--'] {
	position: relative;
	padding-bottom: 75%;
	overflow: hidden;
}
[class*='has-ratio--portrait'] {
	padding-bottom: 133%;
}
[class*='has-ratio--'] > :only-child {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
[class*='has-ratio--'] > img:only-child {
	object-fit: cover;
}

/* Link with underline */
.l-canvas .us-btn-style_4,
.no-touch .l-canvas .us-btn-style_4:hover {
	color: var(--color-content-link) !important;
}
.l-canvas .us-btn-style_4:after {
	background-color: var(--color-content-link) !important;
}

/* CTA animation */
.cta-arrow {
	--cta-size: 2em;
	--cta-bgcolor: var(--color-content-link);
	--cta-color: white;
	--anim-bezier: cubic-bezier(0.770, 0.000, 0.175, 1.000);
	--anim-timing: 3s;
	--anim-delay: -2s;

	display: block;
	margin: 0;
	text-align: center;
	width: var(--cta-size);
	height: var(--cta-size);
	position: relative;
}

.link--cta .cta-arrow {
    position: absolute;
    display: inline-block;
    margin-left: 0.5em;
    margin-top: -0.45em;
}

.cta-arrow {
	display: none !important;
}

.cta-arrow:before,
.cta-arrow:after {
	content:  '';
	background: var(--cta-bgcolor);
	border-radius: 999em;
	display: inline-block;
	height: calc(var(--cta-size) / 3);
	width: calc(var(--cta-size) / 2.4);

	position: absolute;
	top: 50%;
	left:50%;
	z-index: 5;
	transform: translateX(-50%) translateY(-50%);
	transform-origin: 0%;
}

.cta-arrow:before {
	top: 0;
	transform: translateX(-50%) translateY(0);
}
.cta-arrow:after {
	bottom:0px;
}


.cta-arrow .cta-svg {z-index:9;position:relative;}
.cta-arrow .cta-svg-circle {
	fill:  var(--cta-bgcolor);
}
.cta-arrow .cta-svg-arrow{
	fill:  var(--cta-color);
	perspective: 9000px;
	transform: translateZ(0);
	transform-origin: bottom;
}


.link--cta:hover .cta-arrow:before {
	animation: cta-anim-blob-1 var(--anim-timing) var(--anim-bezier) infinite;
	animation-delay: var(--anim-delay);
}
.link--cta:hover .cta-arrow:after {
	animation: cta-anim-blob-2 var(--anim-timing) var(--anim-bezier)  infinite;
	animation-delay: var(--anim-delay);
}
.link--cta:hover .cta-svg-arrow {
	animation: cta-anim-arrow var(--anim-timing) var(--anim-bezier) forwards infinite;
	animation-delay: var(--anim-delay);
}

@keyframes cta-anim-blob-1 {
	0%{
		transform:translateX(-50%) translateY(0);
	}
	14%{
		transform:translateX(-50%) translateY(calc(-0.08 * var(--cta-size)));
	}
	24% {
		transform:translateX(-50%) translateY(0);
	}
	100% {
		transform:translateX(-50%) translateY(0);
	}
}

@keyframes cta-anim-blob-2 {
	0% {
		transform: scale(1) translate(-50%,calc(0.1 * var(--cta-size)));
	}
	30% {
		transform: scale(1) translate(-50%,calc(0.1 * var(--cta-size)));
	}
	70% {
		transform: scale(1) translate(-50%,calc(0.1 * var(--cta-size))); 
	}
	95% {
		transform: scale(1) translate(-50%,calc(0.26 * var(--cta-size)));
	}
	100% {
		transform: scale(1) translate(-50%,calc(0.1 * var(--cta-size)));
	}
}

@keyframes cta-anim-arrow {
	0% {
		transform: translate3d(0,-150%,0) rotateX(90deg) scale(0.5) skewX(3deg);
	}
	30% {
		transform: translate3d(0,0,0) rotateX(0deg) scale(1) skewX(0deg);
	}
	70% {
		transform: translate3d(0,0,0) rotateX(0deg) scale(1) skewX(0deg);
	}
	95% {
		transform: translate3d(0,50%,0) rotateX(-90deg) scale(0.5) skewX(-3deg);
	}
	100% {
		transform: translate3d(0,50%,0) rotateX(-90deg) scale(0.5) skewX(-3deg);
	}
}


/* Squiggles */
.squiggle {
	width: 100px;
	pointer-events: none;
}
.squiggle > img {
	width: 100%;
	height: auto;
}
.squiggle svg {
	width: 100%;
	height: auto;
}
.squiggle svg [fill] {
	fill: var(--squiggle-fill);
}


/* Custom scrollbar */
.pl-scrollbars {
  --scrollbar-foreground: var(--color-moerk-blaa);
  --scrollbar-background: #F0EADC;
  /* Foreground, Background */
  scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}
.pl-scrollbars::-webkit-scrollbar {
	width: 10px; /* Mostly for vertical scrollbars */
	height: 10px; /* Mostly for horizontal scrollbars */
	border-radius: 10px;
}
.pl-scrollbars::-webkit-scrollbar-thumb { /* Foreground */
	background: var(--scrollbar-foreground);
	border-radius: 10px;
}
.pl-scrollbars::-webkit-scrollbar-track { /* Background */
	background: var(--scrollbar-background);
	border-radius: 10px;
}


/* Card template overrides */
.layout_16718 {
	color: var(--color-content-text);
	--gap: calc(var(--gap-md)/2) !important;
}
.layout_16718 .usg_vwrapper_1 {
	background-color: var(--color-laks);
	color: var(--color-content-text);
}

/* Horizontal card template overrides */
.layout_18089 {
	--card-offset: clamp(100px, 12vw, 170px);
	--card-img-translate: var(--card-offset);
}

.layout_18089 .w-grid-item .card-h__content {
	width: calc(100% - var(--card-offset)) !important;
}
.layout_18089 .w-grid-item .card-h__img {
	margin-right: 0 !important;	
}

.layout_18089 .w-grid-item-h:hover .usg_post_image_1 {
	transform: scale(1) translate(calc(var(--card-img-translate) - 100px), 0%) !important;
}

.layout_18089 .w-grid-item:nth-child(odd) {
	padding-right:5% !important;
}

.layout_18089 .w-grid-item:nth-child(even) {
	padding-left:5% !important;
}

.layout_18089 .w-grid-item:nth-child(2n+1) .card-h__img {
	left: unset !important;
	right: calc(var(--card-offset) - 100px) !important;
}

.layout_18089 .w-grid-item:nth-child(2n) {
	--card-img-translate: calc(-1 * var(--card-offset) + 205px);
}
.layout_18089 .w-grid-item:nth-child(even) .card-h__content {
	left: var(--card-offset) !important;
}
.layout_18089 .w-grid-item:nth-child(2n) .card-h__img {
	left: calc(var(--card-offset) - 100px) !important;
	right: unset !important;
}





[class*="us_animate_"] {
	opacity: 0;
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0,.65,1,1);
	animation-fill-mode: both;
}