/* === Import styles === */

	@import url(../css/normalize.min.css);
	@import url(../css/fontawesome-all.css);

	@import url(../css/csm-boxstyles.css);
	@import url(../css/csm-colors.css);
	@import url(../css/csm-columns.css);
	@import url(../css/csm-forms.css);
	@import url(../css/csm-others.css);
	@import url(../css/csm-tables.css);
	@import url(../css/csm-texts.css);
	@import url(../css/csm-tools.css);

	@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* === Custom styles === */

html { scroll-behavior: smooth; }

body { background: var(--c0); color: var(--c1); font-family: "Outfit", sans-serif; }

header { position: fixed; width: 100vw; z-index: 1; padding: 1.75em 3.5em; background-color: hsla(var(--c0-h), var(--c0-s), var(--c0-l), 0); backdrop-filter: blur(0px); }

header .logo { display: block; float: left; }
header .logo svg { display: block; height: 2em; }

@media (max-width: 768px) {
	header { padding: 1.45em 2.5em; }
}

.aboutcompanylogo svg { max-height: 145px; max-width: 65vw }

.refereces { gap: 1.5em }
.refereces > div:not(:last-child) { width: 215px; max-width: calc(50% - .75em); }
.refereces img { filter: saturate(0) brightness(1.6); }
.refereces img:hover { filter: saturate(1) brightness(1); }

.service-ico { height: 75px; max-height: 25vw; }

/* === Burger menu === */
	header { transition: background-color 350ms ease-in-out 400ms, backdrop-filter 350ms ease-in-out 400ms; }
	header.headertoggled { background-color: hsla(var(--c0-h), var(--c0-s), var(--c0-l), .8); backdrop-filter: blur(10px); transition: background-color 350ms ease-in-out 0ms, backdrop-filter 350ms ease-in-out 0ms; }

	header nav { height: 0; opacity: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; background-color: hsla(var(--c0-h), var(--c0-s), var(--c0-l), .0); transition: height 0ms ease-in-out 750ms, padding-top 0ms ease-in-out 500ms, opacity 350ms ease-in-out 0ms; }

	header nav.navtoggle { height: calc(100vh - 5.5em); padding-top: 1.75em; opacity: 1; transition: height 0ms ease-in-out 0ms, padding-top 0ms ease-in-out 0ms, opacity 350ms ease-in-out 0ms; }
	header nav:not(.navtoggle) a { pointer-events: none; }

	header nav a, header nav a:hover { text-decoration: none; font-size: 8.25vmin; line-height: 1.25em; margin: .25em 0; transform: translateX(-2em); opacity: 0; transition: transform 350ms ease-in-out, opacity 350ms ease-in-out; }
	header nav a:after { content: " "; display: block; position: absolute; right: -.5em; opacity: 0; bottom: -.1em; height: .1em; width: 2em; background: var(--c3-l3); transition: all 0.15s ease-out; }
	header nav a.active:after { right: 0; opacity: 1; }
	header nav a.active, header nav a:hover, header nav a:focus { box-shadow: none; }

	header { --navdelay: 100ms; --navmult: .4; overflow: hidden; }
	header nav a:nth-child(1) { transition-delay: calc(var(--navdelay) * calc(1 + (var(--navmult) * 1))); }
	header nav a:nth-child(2) { transition-delay: calc(var(--navdelay) * calc(1 + (var(--navmult) * 2))); }
	header nav a:nth-child(3) { transition-delay: calc(var(--navdelay) * calc(1 + (var(--navmult) * 3))); }
	header nav a:nth-child(4) { transition-delay: calc(var(--navdelay) * calc(1 + (var(--navmult) * 4))); }
	header nav a:nth-child(5) { transition-delay: calc(var(--navdelay) * calc(1 + (var(--navmult) * 5))); }
	header nav a:nth-child(6) { transition-delay: calc(var(--navdelay) * calc(1 + (var(--navmult) * 6))); }
	header nav a:nth-child(7) { transition-delay: calc(var(--navdelay) * calc(1 + (var(--navmult) * 7))); }
	header nav a:nth-child(8) { transition-delay: calc(var(--navdelay) * calc(1 + (var(--navmult) * 8))); }

	header nav.navtoggle a { transform: translateX(0em); opacity: 1; }

	header .burger { cursor: pointer; vertical-align: middle; transition: all 0.15s ease-out; }
	header .burger svg { height: 2em; width: auto; padding: .25em 0; }
	header .burger svg path { transform-origin: center; transition: all 0.15s ease-out; }
		header .burger svg path:first-child, header .burger svg path:last-child { transition-delay: 150ms; }
		header .burger.toggled svg path:first-child { transform: translate( 0, 25% ); opacity: 0; }
		header .burger.toggled svg path:nth-child(2) { transform: rotate( 45deg ); transition-delay: 300ms; }
		header .burger.toggled svg path:nth-child(3) { transform: rotate( -45deg ); transition-delay: 300ms; }
		header .burger.toggled svg path:last-child { transform: translate( 0, -25% ); opacity: 0; }

/* === Hero Header === */
	.heroheader .herocontent { position: absolute; inset: 5.5em 2.25em 2.5em 2.5em; display: flex; align-items: flex-end; overflow: hidden; border-radius: .5em; }
	.heroheader .herocontent h1 { position: relative; left: -.075em; bottom: -.1em; font-weight: 800; text-transform: uppercase; font-size: 10.8vw; line-height: 1.025em; }
	.heroheader .heroimg { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; object-fit: cover; }

	@media (max-width: 768px) {
		.heroheader .herocontent { inset: 5em 1.5em 1.5em 1.5em; }
		.heroheader .herocontent h1 { font-size: 15vw; }
	}

/* === Content === */
	body > section { padding-top: 5.5em; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }

/* === Styled Couple === */
	[class*="styled-couple-"] { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; }
	[class*="styled-couple-"] .sc-media { position: relative; }
	[class*="styled-couple-"] .sc-media .sc-image { background-size: cover; background-position: center; }

	@media (max-width: 899px) {
		[class*="styled-couple-"] { flex-direction: column; }
		[class*="styled-couple-"] .sc-text, [class*="styled-couple-"] .sc-text { position: relative; }
		[class*="styled-couple-"] .sc-text { order: 1; padding: 1.5em; }
		[class*="styled-couple-"] .sc-media { order: 0; padding-top: 56.3%; }
 	}

	@media (min-width: 900px) {
		[class*="styled-couple-"] { flex-direction: row; }
		[class*="styled-couple-"] .sc-text { margin: 4em 0; padding: 2em; z-index: 1; }
		[class*="styled-couple-"] .sc-text, [class*="styled-couple-"] .sc-media { position: relative; }

		.styled-couple-tl .sc-text { order: 0; margin-right: calc(100% / 24 * -1); }
		.styled-couple-tl .sc-media { order: 1; }
		.styled-couple-tr .sc-text { order: 1; margin-left: calc(100% / 24 * -1); }
		.styled-couple-tr .sc-media { order: 0; }
	}