@charset "UTF-8";

/*--------------------------------------------------------------
Webfont
--------------------------------------------------------------*/
@font-face{
	font-family:'Montserrat';
	src:url("../fonts/Montserrat-Regular.woff2") format('woff2');
	font-style:normal;
	font-weight:400;
	font-display:swap;
}
@font-face{
	font-family:'Montserrat';
	src:url("../fonts/Montserrat-Thin.woff2") format('woff2');
	font-style:normal;
	font-weight:300;
	font-display:swap;
}
@font-face{
	font-family:'Montserrat';
	src:url("../fonts/Montserrat-Bold.woff2") format('woff2');
	font-style:normal;
	font-weight:700;
	font-display:swap;
}
@font-face{
	font-family:'Bebas Neue';
	src:url("../fonts/BebasNeue.woff2") format('woff2');
	font-style:regular;
	font-display:swap;
}

/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/

html,body,p,ol,ul,li,blockquote,figure,legend,textarea,hr,h1,h2,h3{margin:0;padding:0}button,input,textarea{margin:0}*,*:before,*:after{box-sizing:border-box}img,video,svg,iframe{display:block;height:auto;max-width:100%;border:0}img{width:100%}

/*--------------------------------------------------------------
Vars
--------------------------------------------------------------*/

:root{
	--leading:1.75rem;

	--white:#fff;
	--primary:#009cb4;
	--text:#020300;

	--width:100%;

	--font_default:Montserrat, system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
	--font_heading:'Bebas Neue', system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
}

/*--------------------------------------------------------------
Helpers
--------------------------------------------------------------*/

html{
	scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
	html{
		 scroll-behavior:auto;
	}
	*,*::before,*::after{
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		scroll-behavior:auto !important;
	}
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

html{
	font-size:100%;
	-webkit-text-size-adjust:100%;
}
body{
	position:relative;
	min-height:100vh;
	text-rendering:optimizeSpeed;
	background:var(--white);
	color:var(--text);
	font-family:var(--font_default);
	font-size:1rem;
	line-height:1.75;
	overflow-x:hidden;
	word-wrap: break-word;
}
a{
	color:var(--primary);
	text-decoration:underline;
	text-underline-offset:.1em;
}
a:where(:hover,:focus-visible){
	text-decoration: none;
}
h1,h2,h3,.h1-like,.subtitle{
	font-weight:700;
	line-height:1.1;
	margin:3rem 0 1.75rem;
	text-transform: uppercase;
}
h1,.h1-like, .subtitle{
	font-size:4rem;
	line-height:.8;
	margin-top:0;
	font-weight:400;
	font-family:var(--font_heading);
}
h2{
	font-size:2.074rem;
}
h3{
	font-size:1rem;
}
h1 small,.h1-like small{
	font-size:2rem;
	display: block;
}
.subtitle{
	margin-top:-1.75rem;
	font-size:1.25rem;
	line-height:1.75;
	color:var(--primary);
}
.subtitle strong{color:var(--text)}
p,address,ol,ul,dl,blockquote{
	margin-top:0;
	margin-bottom:var(--leading);
}
li p,li ul,li ol,ol ol,ul ul{
	margin-top:0;
	margin-bottom:0;
}
ul,ol{
	padding-left:2em;
}
em,address,cite{
	font-style:italic;
	position:relative;
	vertical-align:baseline;
}
abbr{
	text-transform:uppercase;
	letter-spacing:.1em;
}
abbr[title]{
	text-decoration:none;
	border-bottom:1px dotted;
}
summary{cursor: pointer}
sup,sub{
	font-size:.833rem;
	line-height:0;
	position:relative;
	vertical-align:baseline;
}
sup{top:-.5em}
sub{bottom:-.5em}
small{font-size:.833rem;}
/*strong{
	color:var(--primary);
	font-weight: 400;
}*/
figcaption{
	font-size:.833rem;
	margin-top:.5rem;
	font-weight: 300;
}
.text-xl{
	font-size:3rem;
	font-family: var(--font_heading);
	line-height: 1.1;
}
.text-xl strong{
	color:var(--primary);
	font-weight: 400;
}
.lead{
	font-weight: 700;
	text-transform: uppercase;
	margin:0;
}

/*--------------------------------------------------------------
Quotes
--------------------------------------------------------------*/

blockquote{
	font-style:normal;
	font-size:1.5rem;
	line-height: 1.3;
	padding:0 2rem;
	position:relative;
	font-weight:700;
}
blockquote:before,blockquote:after{
	content:"";
	position:absolute;
	width:1.5rem;
	height:1.5rem;
	top:0;
	left:0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M259 507c-39 0-70-13-94-37-24-25-36-61-36-108 0-61 18-124 56-191 37-67 82-122 136-166l44 40c-14 16-27 36-39 61a496 496 0 0 0-46 164c31 5 56 18 75 40s28 47 28 77c0 35-11 64-35 86-23 23-53 34-89 34Z'/%3E%3C/svg%3E");
}
blockquote:after{
	transform:rotateZ(180deg);
	top:auto;
	left:auto;
	bottom:0;
	right:0;
}
.quote{margin:7rem 0}
.quote figcaption{
	text-align: right;
	margin:-1.25rem 2rem 1.75rem;
}

/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/

::placeholder{
	color:var(--primary);
	font-style: italic;
}
fieldset{
	padding:0;
	border:none;
}
fieldset legend{
	color:var(--text);
	padding-top:5rem;
	font-family:var(--font_heading);
	font-size:2.5rem;
	line-height: 1.3;
}
label{
	display:block;
	cursor:pointer;
	font-weight:700;
	text-transform:uppercase;
}
[type=text],[type=email],[type=password],[type=submit],select,.btn,textarea{
	font-family:inherit;
	font-size:inherit;
	vertical-align:middle;
	margin:0 0 var(--leading);
	transition:.2s;
	transition-property:background-color,color,border;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	width:100%;
	padding:.5rem;
	border:3px solid var(--primary);
	background:rgba(159,159,159,.1);
}
select{
	padding-right:1.75rem;
	position: relative;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23009cb4'%3E%3Cpath d='m6 9 6 6 6-6H6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 1.25rem;
	background-position: top .5rem right .25rem;
}
button,.btn,[type=submit]{
	font-weight: 700;
	display:inline-block;
	text-decoration:none;
	color:var(--white);
	cursor:pointer;
	text-align: center;
	width:auto;
	padding:.5rem 1.5rem;
	
}
.btn:hover,.btn:focus,[type=submit]:hover,[type=submit]:focus{
	background: var(--primary);
	text-decoration: none;
}
.btn-icon{
	display:flex;
	max-width:fit-content;
	align-items: center;
	gap:.5rem;
	background: none;
	border:none;
	padding:0;
	color:var(--primary);
	font-family: var(--font_heading);
	font-size:1.25rem;
}
.btn-icon svg{
	fill:currentColor;
	height:2rem;
}
.btn-icon path{
	transition:transform .3s;
	transform-origin: 50% 50%;
}
.btn-icon:hover,.btn-icon:focus{background: none;}
.btn-icon:hover .btn-icon-top,.btn-icon:focus .btn-icon-top{transform: translateY(12.5%) scaleX(75%)}
.btn-icon:hover .btn-icon-bottom,.btn-icon:focus .btn-icon-bottom{transform: translateY(-12.5%) scaleX(75%)}
.btn-icon:hover .btn-icon-plus,.btn-icon:focus .btn-icon-plus{transform: rotate(180deg)}
.btn-icon-l{
	color:var(--text);
	font-size:1.5rem;
}

/*--------------------------------------------------------------
Utilities
--------------------------------------------------------------*/

/*:focus:not(:focus-visible){outline:0;}
:focus-visible{outline-offset:5px;}
@media (prefers-reduced-motion:no-preference){
	:focus-visible{transition:outline-offset .25s ease;}
}*/
::selection{
	background:var(--primary);
	color:var(--white);
}

/* Hidden text */
.screen-reader-text,.email{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
}
.screen-reader-text:focus{
	background-color:var(--white);
	clip:auto !important;
	display:block;
	width:auto;
	height:auto;
	top:0;
	left:0;
	padding:.5em 1em;
	text-decoration:none;
	z-index:999;
}

/* Wrapper */
.wrapper{
	max-width:var(--width);
	padding-left:var(--leading);
	padding-right:var(--leading);
	margin-left:auto;
	margin-right:auto;
}

/* Blocks right aligned */
.block-right{
	display: flex;
	justify-content: flex-end;
}

.text-center{text-align: center}

/*--------------------------------------------------------------
Blocks with shapes
--------------------------------------------------------------*/

.shape{position:relative;}
.shape:before,.shape:after{
	content:"";
	position:absolute;
	left:0;
	bottom:100%;
	width:100%;
	background-size:100% 100%;
}
.shape:after{top:100%}
.shape .grid > * > *:first-child{margin-top:0;}
.shape-1{
	background: var(--text);
	color:var(--white);
	margin:calc(3rem + 5rem) 0;
	padding:3rem 0;
}
.shape-1:before{
	height:3rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23020300' viewBox='0 0 600 83'%3E%3Cpath d='M600 83V0C572 6 152 88 0 83h600z'/%3E%3C/svg%3E");
}
.shape-1:after{
	height:3rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23020300' viewBox='0 0 600 33'%3E%3Cpath d='M600 0H0v33c9-1 295-49 600-22V0z'/%3E%3C/svg%3E");
}

/*--------------------------------------------------------------
Hero block
--------------------------------------------------------------*/

.hero{
	position:relative;
	display:grid;
	grid-template-columns: 1fr;
	grid-template-areas:"content";
	margin-bottom:5rem;
}
.hero:after{
	content:"";
	position:absolute;
	top:0;
	height:100%;
	width:100%;
	background: linear-gradient(to right, rgba(2,3,0,.85), rgba(2,3,0,.65) 50%, rgba(2,3,0,.25));
}
.hero > *{grid-area:content;}
.hero .wrapper{
	display:flex;
	position: relative;
	z-index: 1;
	flex-direction: column;
	justify-content: flex-end;
	width:100%;
}
.hero h1{
	color:var(--white);
	margin-top:15rem;
}
.hero .subtitle{color:var(--white)}
.hero strong{color:var(--primary)}
.hero img{
	width:100%;
	height:100%;
	object-fit: cover;
}

/*--------------------------------------------------------------
Images hover blocks
--------------------------------------------------------------*/

.img-hover a{
	display:block;
	position:relative;
	margin-bottom:3rem;
	overflow: hidden;
}
.img-hover figcaption{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	margin:0;
	padding:.5rem;
	display:flex;
	background: rgba(2,3,0,.75);
	flex-direction: column;
	justify-content: center;
	opacity:0;
	transition:opacity .3s;
	color:var(--white);
	text-align: center;
	font-family: var(--font_heading);
	font-size:1.25rem;
	line-height:1.1;
}
.img-hover .btn-icon{
	color:var(--white);
	margin:0 auto;
}
.img-hover img{transition:transform .3s}
.img-hover a:hover img,.img-hover a:focus img{transform:scale(1.1)}
.img-hover a:hover figcaption,.img-hover a:focus figcaption{opacity:1}

/*--------------------------------------------------------------
Main Header
--------------------------------------------------------------*/

.main-header{
	position: fixed;
	width:100%;
	background: var(--white);
	z-index: 9999;
}
.main-header > *{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo{
	border:none;
	margin:.5rem 0;
}
.logo svg{
	height:5rem;
	fill:var(--text);
}
.logo-big{opacity:0;}
.home-logo .logo-big{opacity:1}
.home-logo .logo-small{opacity:0}
.menu-toggle{
	position: relative;
	z-index: 999;
	margin:0;
	padding:0;
	background:none;
	box-shadow: none;
	border:none;
}
.menu-toggle svg{
	fill:var(--text);
	width:36px;
}
.menu-toggle path{transition:opacity .2s, transform .2s;}
.menu-toggle[aria-expanded=true] path:nth-child(1) {
	transform: rotate(-45deg) translateX(-11px) translateY(-5px);
}
.menu-toggle[aria-expanded=true] path:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded=true] path:nth-child(3) {
	transform: rotate(45deg) translateX(4px) translateY(-6px);
}
.menu-toggle[aria-expanded=true] svg{fill:var(--white)}

/*--------------------------------------------------------------
Main menu
--------------------------------------------------------------*/

.menu-container{
	background: var(--primary);
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-height: 100%;
	padding-top: 6rem;
	overflow-y: auto;
	z-index:998;
	opacity:0;
	transform:scale(.5);
	transform-origin:100% 0;
	visibility:hidden;
	transition:opacity .2s,transform .2s;
	text-align:center;
	display:flex;
	flex-direction: column;
	justify-content: center;
}
.menu-container.active{
	opacity:1;
	visibility:visible;
	transform:scale(1);
}
.menu-logo{
	height:3rem;
	position:absolute;
	top:1.5rem;
	left:1.75rem;
	fill:var(--white);
}
.menu-container button{border:none;}
.menu-container ul{
	margin:0;
	padding:1rem var(--leading);
	list-style:none;
	font-size:1.5rem;
}
.main-menu a{
	color:var(--white);
	display:block;
	text-align: left;
	text-decoration:none;
	text-transform:uppercase;
	padding:.5rem;
	position:relative;
	font-weight: 700;
	letter-spacing: .2em;
}
.language-switcher{display:none;}
.social-menu, .language-menu{
	display:flex;
	justify-content: flex-start;
	gap:1rem;
}
.menu-container .social-menu{margin-top:auto}
.social-menu a{
	color:var(--white);
	text-decoration: none;
}
.language-menu a{text-decoration: none}
.social-menu svg{height:1.5rem;}
.menu-container .language-menu{
	background: var(--white);
	text-transform: uppercase;
	font-family: var(--font_heading);
}
.language-menu a:hover,.language-menu .active a{text-decoration: underline}

/*--------------------------------------------------------------
Main content
--------------------------------------------------------------*/

.main-content{padding-top:6rem}

/*--------------------------------------------------------------
Main Footer
--------------------------------------------------------------*/

.main-footer{
	background:var(--text);
	color:var(--white);
	position:relative;
	padding:calc(5rem + 3rem) 0;
}
.main-footer:before{
	height:3rem;
	top:0;
	z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23fff' viewBox='0 0 600 31'%3E%3Cpath d='M0 0h600v22C295 49 9 2 0 0z'/%3E%3C/svg%3E");
}
.main-footer:after{
	height:3rem;
	bottom:0;
	top:auto;
	z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23020300' viewBox='0 0 600 83'%3E%3Cpath d='M0 83h600V0h-30C399 5 26 77 0 83z'/%3E%3C/svg%3E");
}
.main-footer .wrapper{
	position: relative;
	display:flex;
	flex-direction: column;
	gap:var(--leading);
}
.main-footer .btn, .main-footer input, .main-footer button{
	background:rgba(255,255,255,.2);
	color:var(--white);
	border-color:var(--white);
	margin:0;
}
.main-footer a,.legals a{
	color:var(--white);
	text-decoration: none;
}
.main-footer a:not(.btn):hover,.main-footer a:not(.btn):focus,.legals a:hover,.legals a:focus{text-decoration: underline}

/* Footer image */
.footer-image{
	position:absolute;
	top:0;
	z-index: 0;
	width:100%;
	height:100%;
}
.footer-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:.2;
}

/* Contact button */
.footer-contact{
	padding-bottom:var(--leading);
	border-bottom:1px solid #b4b4b4;
}
.contact-btn{text-align: center}
.footer-contact strong{
	font-family: var(--font_heading);
	font-size:2rem;
	line-height:.8;
	color:var(--white);
}
.footer-contact .btn:hover, .footer-contact .btn:focus{
	color:var(--primary);
	background: var(--white);
}

/* Addresses */
address{
	font-style: normal;
	text-align: center;
	margin:0
}
address > *{margin-bottom:1.75rem}
address p{margin:0;}
address strong, address small{
	color:inherit;
	font-weight: 700;
}

/* Newsletter */
.newsletter-input div{
	display:flex;
	min-width:20rem;
}
.newsletter button{
	order:-1;
	border-right:0;
	padding:.5rem;
	color:var(--primary);
}
.newsletter svg{height:1.5rem;}
.newsletter button:hover, .newsletter button:focus{color:var(--white)}

/* Legals */
.legals{
	background:var(--text);
	color:var(--white);
	padding:var(--leading) 0;
	text-align: center;
}
.legals svg{
	fill:var(--white);
	height:20rem;
	margin:0 auto 2rem;
}
.legals p{
	display:flex;
	justify-content: center;
	align-items:center;
	gap:1rem;
}
.legals p > *{
	display:inline-block;
	color:#b4b4b4;
	position:relative;
	text-align: left;
}
.legals p > *:not(:last-child){padding-right:1rem}
.legals p > *:not(:last-child):after{
	content:"";
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:0;
	width:1px;
	height:1rem;
	background: currentColor;
}

/*--------------------------------------------------------------
Home page
--------------------------------------------------------------*/

/* Slider */
.slider-inner:before{
	content:"";
	position:absolute;
	width:80%;
	height:100%;
	background:linear-gradient(to right,rgba(38,39,35,.6),transparent);
	z-index: 1;
}
.home-slider-content{
	position:absolute;
	width:100%;
	top:0;
	margin-top:var(--leading);
	color:var(--white);
	font-family: var(--font_heading);
	z-index:2;
}
.home-slider-content h2{
	font-size: 1.25rem;
	line-height:.8;
	margin:0;
}
.home-slider-content p{font-size:1rem;}
.home-slider-content strong{
	font-weight: 400;
	display:inline-block;
	padding:0 .5rem;
	background:var(--primary);
}
.home-slider-content .btn-icon{
	display:inline-block;
	margin:0 0 0 .5rem;
}
.home-slider-content .btn-icon svg{height:1rem}

/* Headline */
.home-headline{padding:7.5rem 0;}

/* Projects */
.home-projects{padding:7.5rem 0;}
.home-projects ul{
	margin:0 0 3rem;
	padding:0;
	list-style: none;
	display:grid;
	gap:1.75rem;
	grid-template-columns: 1fr 1fr;
}
.home-projects li{
	transition:transform 1s, opacity 1s;
	transform:translateY(7rem);
	opacity:0;
}
.home-projects li.active{
	transform: translateY(0);
	opacity: 1;
}
.home-projects ul a{margin: 0}

/* Skills */
.skills{
	padding:5rem 0;
}
.skills .wrapper{
	display:flex;
	flex-wrap: wrap;
	gap:5rem;
	justify-content: center;
}
.skills span{
	width:50%;
	color:var(--white);
	position:relative;
	padding:1rem;
	aspect-ratio:1/1;
	display:flex;
	align-items: center;
	font-weight: 700;
	font-size:1.3rem;
	line-height: 1.1;
	text-align: center;
}
.skills span:nth-child(odd){color:var(--primary);}
.skills span:before,.skills span:after{
	content:"";
	position:absolute;
	width:50%;
	height:50%;
	border:2px solid currentColor;
}
.skills span:before{
	left:0;
	bottom:0;
	border-width:0 0 2px 2px;
}
.skills span:after{
	right:0;
	top:0;
	border-width:2px 2px 0 0;
}

/* Agency */
.home-agency{
	padding-top:7.5rem;
}
.home-agency .grid{margin-bottom:3rem}
.home-agency .square{
	position:relative;
	padding:3rem 0;
}
.home-agency .square:before{
	content:"";
	position:absolute;
	width:calc(100% - 6rem);
	height:100%;
	top:0;
	left:3rem;
	border:2px solid var(--primary);
	z-index: -1;
}
.home-agency .square p{
	background:var(--white);
}

/* Knowledge */
.knowledge{
	background: var(--text);
	padding:5rem 0;
	color:var(--white);
}
.knowledge:before,.knowledge:after{z-index: 99;}
.knowledge:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 600 83'%3E%3Cpath d='M600 0H0v83h30C201 79 574 6 600 0z' fill='%23fff'/%3E%3C/svg%3E");
	top:0;
}
.knowledge:after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 600 33'%3E%3Cpath d='M0 33h600V11C295-16 9 32 0 33z' fill='%23fff'/%3E%3C/svg%3E");
	top:auto;
	bottom:0;
}
.knowledge .wrapper{
	padding-top:3rem;
	padding-bottom:3rem;
	position:relative;
}
.knowledge-image{
	position:absolute;
	top:0;
	z-index: 0;
	width:100%;
	height:100%;
}
.knowledge-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:.2;
}
.knowledge h1{color:var(--primary)}
.knowledge .subtitle{color:var(--white)}
.knowledge ul{
	margin:3rem 0 0;
	padding:0;
	list-style: none;
	display:grid;
	gap:3rem var(--leading);
	grid-template-columns: 1fr 1fr;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
}
.knowledge ul a{
	color:var(--white);
	text-decoration: none;
}
.knowledge ul a:hover, .knowledge ul a:focus{color:var(--primary)}
.knowledge ul svg{
	height:1.5rem;
	margin:0 auto .5rem;
}

/* Confiance */
.confiance{padding:7.5rem 0;}
.clients{margin-top:3rem;}
.clients-slider{
	position:relative;
	overflow:hidden;
	margin:0 -1.75rem;
	height:10rem;
}
.clients-slider > *{
	display:flex;
	justify-content:space-around;
	align-items: center;
	gap:1rem;
	position:absolute;
	top:0;
	left:0;
	overflow: hidden;
	animation: marquee 20s linear infinite;
	padding-right:1rem;
	background: var(--white);
}
.clients-slider > .clients-2{
	transform:translateX(100%);
	animation: marquee_2 20s linear infinite;
}
.clients-slider figure{
	width:10rem;
	height:10rem;
}
.clients-slider img{height:10rem;}
@keyframes marquee {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(-100%);
	}
}
@keyframes marquee_2 {
	0% {
		transform:translateX(100%);
	}
	100% {
		transform:translateX(0);
	}
}
@keyframes marquee_vertical {
	0% {
		transform:translateY(-100%);
	}
	100% {
		transform:translateY(100%);
	}
}

/*--------------------------------------------------------------
Projects page
--------------------------------------------------------------*/

.projects-list > figure{
	transition:transform .3s, opacity .3s;
	transform:translateY(7rem);
	opacity:0;
}
.projects-list > figure.active{
	transform: translateY(0);
	opacity: 1;
}

/*--------------------------------------------------------------
Single project page
--------------------------------------------------------------*/

/* Reveal slider */
.project-reveal{
	position:relative;
	padding-top:55%;
}
.reveal-image{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:cover;
}
.reveal-slider{
	position:absolute;
	/*-webkit-appearance: none;
	appearance: none;*/
	opacity: 0;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	outline: none;
	margin: 0;
	transition: all 0.2s;
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
}
.reveal-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 6px;
	height: 100%;
	background: white;
	cursor: pointer;
}
.reveal-slider::-moz-range-thumb {
	width: 6px;
	height: 600px;
	background: white;
	cursor: pointer;
}
.reveal-btn{
	pointer-events: none;
	position: absolute;
	width: 5rem;
	height: 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle fill='none' stroke='%23fff' stroke-width='12' cx='50' cy='50' r='44'/%3E%3Cpath fill='%23fff' d='m24 50 13-10v20L24 50zm39 10V40l13 10-13 10z'/%3E%3C/svg%3E") 50% 50% no-repeat;
	background-size:100%;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	filter:drop-shadow(4px 4px 11px rgba(0,0,0,.25));
}
.reveal-btn:before {
	content: "";
	width:12%;
	height:100%;
	position:absolute;
	top:0;
	left:50%;
	transform: translateX(-50%);
	background: #fff;
}
.project-pictures{margin-bottom:var(--leading)}
.project-cover{margin-bottom:var(--leading)}

/*--------------------------------------------------------------
About page
--------------------------------------------------------------*/

.history{
	background: var(--text);
	padding:5rem 0;
	color:var(--white);
}
.history-content > *:first-child{margin-top:0;}

/* Timeline */
.timeline{
	list-style:none;
	margin:0;
	padding:1rem 0 1rem 5rem;
	font-weight:bold;
	color:#9f9f9f;
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content: space-between;
}
.timeline li{position:relative}
.timeline:before,.timeline li:before{
	content:"";
	position:absolute;
	top:0;
	left:calc(3.25rem - 2px);
	width:4px;
	height:100%;
	background:#9f9f9f;
}
.timeline li:before{
	top:50%;
	transform: translateY(-50%);
	left:-2.5rem;
	width:1.5rem;
	height:1.5rem;
	border-radius:50%;
}
.timeline strong{
	color:inherit;
	font-size:1.5rem;
	font-weight:bold;
	display:inline-block;
	margin-right:.5rem;
}

/*--------------------------------------------------------------
Services page
--------------------------------------------------------------*/

.steps{
	list-style: none;
	margin-top:5rem 0;
	padding:0;
}
.steps li{
	counter-increment: steps;
	margin-top:7.5rem;
	position:relative;
}
.steps li:before{
	content:"";
	position:absolute;
	background: var(--primary);
	width:1px;
	height:calc(100% - 5rem);
	top:5rem;
	left:2rem;
	z-index: -1;
}
.steps p{margin-bottom:var(--leading)}
.step-content{
	padding-left:3.5rem;
	position:relative;
}
.step-content:before{
	content:counter(steps);
	font-family:var(--font_heading);
	font-size:8rem;
	line-height: 1;
	position: absolute;
	top:-2.5rem;
	left:0;
	color:var(--primary);
}
.step-content h2{font-size:1.25rem;}
.making-pictures,.animation{
	display: grid;
	grid-template-columns: 1fr;
	gap:var(--leading);
}
.making-pictures figure,.animation figure{
	display:grid;
	grid-template-columns: 1fr;
	grid-template-areas:"content";
}
.making-pictures figure > *,.animation figure > *{grid-area:content}
.making-pictures img,.animation img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.making-pictures figcaption,.animation figcaption{
	font-size:1rem;
	margin-top:0;
	background:rgba(2,3,0,.75);
	color:var(--white);
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:1rem 3rem;
	opacity:0;
	transition:opacity .3s;
}
.making-pictures .img-text.active figcaption{opacity:1}
.animation figcaption{
	padding:1rem;
	opacity: 1;
	align-items: center;
	text-align: center;
}
.animation figcaption strong{
	color:var(--white);
	font-weight: 700;
}
.realization-slider img{width:100%}
.responsibles{
	background: var(--primary);
}
.responsibles:before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23009cb4' viewBox='0 0 600 83'%3E%3Cpath d='M600 83V0C572 6 152 88 0 83h600z'/%3E%3C/svg%3E");}
.responsibles:after{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23009cb4' viewBox='0 0 600 33'%3E%3Cpath d='M600 0H0v33c9-1 295-49 600-22V0z'/%3E%3C/svg%3E");}
.responsibles .grid{align-items: center;}
.responsibles{margin-bottom:80px}
.responsibles:after{height:80px;}

/*--------------------------------------------------------------
Salons
--------------------------------------------------------------*/

.salon-content .grid{
	display:grid;
	margin-bottom:var(--leading);
	gap:var(--leading);
	align-items: center;
}
.salon-contact{
	text-transform: uppercase;
	background: var(--primary);
	color:var(--white);
	border:2px solid var(--primary);
	padding:.5rem 1rem;
	font-weight: 700;
	letter-spacing: .2em;
	transition: background .3s, color .3s;
	text-decoration: none
}
.salon-contact:hover, .salon-contact:focus{
	background: transparent;
	color:var(--primary);
}
.salons-list figure a{
	display:block;
	color:var(--primary);
	text-decoration: none;
	padding:.5rem;
	border:2px solid var(--primary);
	border-radius:5px;
	transition:color .3s, background .3s
}
.salons-list figure a:hover, .salons-list figure a:focus{
	color:var(--white);
	background: var(--primary)
}
.salons-list a img{padding:0 15%}
.salons-list a span{
	display:flex;
	gap:.5rem;
	justify-content: center;
	align-items: center;
}
.salons-list a span svg{height:1rem}
.salon-title{
	font-size:1.25rem;
	font-weight: 700;
	text-transform: uppercase
}

/*--------------------------------------------------------------
Contact page
--------------------------------------------------------------*/

.contact-form{
	color:var(--primary);
	margin-top:7.5rem;
}
.contact-intro{
	font-size:1.75rem;
	font-weight:700;
	line-height: 1.3;
}

/*--------------------------------------------------------------
Forms confirmation
--------------------------------------------------------------*/

.form-confirmation{
	background: url("../img/form.jpg") 50% 50% no-repeat;
	background-size: cover;
	min-height: 100vh;
	padding-top:var(--leading);
	display:flex;
	justify-content:center;
	flex-direction: column;
}
.form-confirmation .wrapper{
	width:100%;
	display:flex;
	justify-content: flex-end;
}
.form-confirmation-content{max-width: 45rem}
.form-confirmation-content h1 small{color:var(--primary);}
.form-confirmation-content p{
	font-size:1.3rem;
	line-height: 1.3;
	font-weight: bold;
}

/*--------------------------------------------------------------
CGV page
--------------------------------------------------------------*/

.cgv h1{font-size:3.5rem}
.cgv h1 small{
	color:var(--primary);
	font-size:2rem;
}
.cgv h2{
	font-size:1rem;
}

/*--------------------------------------------------------------
Error page
--------------------------------------------------------------*/

.error{
	display:flex;
	justify-content:center;
	flex-direction: column;
	min-height: 100vh;
}
.error h1{
	color:var(--primary);
	margin-bottom:5rem;
}
.error h1 small{color:var(--text);}

/*--------------------------------------------------------------
Media queries
--------------------------------------------------------------*/

@media (min-width:42rem){
	.skills span{width:27%;}
}
@media (min-width:62rem){
	:root{
		--width:1440px;
	}
	html{font-size:125%;}
	h1,.h1-like{font-size:7.5rem;}
	h1 small,.h1-like small{font-size:4.5rem;}
	.text-xl{font-size:5rem;}

	/* Quotes */
	blockquote span{display:block;}
	blockquote span:last-child{text-align:right;}

	/* Wrappers */
	.wrapper-l{max-width: calc(var(--width) + 7rem)}
	.wrapper-s{max-width: calc(var(--width) - 7rem)}
	.wrapper-xs{max-width: calc(var(--width) - 35rem)}

	/* Grids */
	.grid{
		display:grid;
		gap:3rem;
	}
	.grid-1-1{grid-template-columns: 1fr 1fr;}
	.grid-2-3{grid-template-columns: 2fr 3fr;}
	.grid-3-2{grid-template-columns: 3fr 2fr;}
	.grid-1-2{grid-template-columns: 1fr 2fr;}
	.grid-2-1{grid-template-columns: 2fr 1fr;}
	.grid-1-3{grid-template-columns: 1fr 3fr;}
	.grid-3-1{grid-template-columns: 3fr 1fr;}
	.grid-5-7{grid-template-columns: 5fr 7fr;}
	.grid-7-5{grid-template-columns: 7fr 5fr;}
	.grid-1-1-1{grid-template-columns: 1fr 1fr 1fr;}

	/* Shapes */
	.shape-1{margin:calc(6rem + 5rem) 0;}
	.shape-1:before{height:6rem;}
	.shape-1:after{height:6rem;}

	/* Images hover blocks */
	.img-hover figcaption{font-size:2.5rem;}

	/* Header */
	.main-header{
		position:absolute;
		background: transparent;
		width:100%;
		z-index: 999;
		transition: all .3s;
	}
	.logo svg{
		height:6rem;
		margin:1.5rem 0;
		fill:var(--white);
		transition: all .3s;
	}
	.logo-xl svg{height:9rem;}
	.logo-dark svg{fill:var(--text)}
	.nav-is-stuck .main-header{
		position:fixed;
		background: rgba(255,255,255,.8);
	}
	.nav-is-stuck .logo svg{
		fill:var(--text);
		height:3rem;
		margin:0;
	}
	.nav-is-stuck .menu-container, .nav-is-stuck .menu-container:after{background: transparent}
	.logo svg{
		height:6rem;
		margin:1.5rem 0;
		fill:var(--white);
	}
	.logo-xl svg{height:9rem;}
	.logo-dark svg{fill:var(--text)}
	.menu-container{
		background: rgba(255,255,255,.8);
		visibility: visible;
		transform: none;
		opacity: 1;
		padding:0 var(--leading);
		position: relative;
		overflow: visible;
		flex-direction: row;
		gap:1rem;
	}
	.menu-container:after{
		content:"";
		position:absolute;
		left:100%;
		height:100%;
		width:50vw;
		background: rgba(255,255,255,.8);
	}
	.menu-logo{display:none}
	.menu-container ul{
		padding:0;
		font-size:.75rem;
	}
	.main-menu, .social-menu{
		display:flex;
		gap:var(--leading);
		align-items:center;
	}
	.main-menu a{
		padding:1rem 0;
		position:relative;
		color:var(--text);
	}
	.main-menu a:after{
		content:"";
		position:absolute;
		bottom:1rem;
		left:0;
		width:calc(100% - 2.5ch);
		height:2px;
		background:var(--text);
		transition: transform .3s;
		transform:scaleX(0);
		transform-origin:left center;
	}
	.main-menu a:hover:after, .main-menu a.active:after{transform:scaleX(1);}
	.main-menu a.menu-item-contact{
		padding:.5rem 1rem;
		background: var(--primary);
		border: 2px solid var(--primary);
		color:var(--white);
		transition:background .3s, color .3s;
	}
	.main-menu a.menu-item-contact:hover, .main-menu a.menu-item-contact:focus{
		color:var(--primary);
		background: transparent;
	}
	.main-menu a.menu-item-contact:after{content:none}
	.main-menu .btn{
		color:var(--white);
		background: var(--primary);
		margin:0;
		border:none;
		padding:.5rem 1.5rem;
	}
	.menu-container .social-menu{
		padding-left:4rem;
		gap:1rem;
		margin-top:0;
	}
	.social-menu a{color:var(--text);}
	.language-switcher{
		display:block;
		color:var(--text);
		background: none;
		padding:0;
	}
	.social-menu a:hover, .social-menu a:focus, .social-menu button:hover, .social-menu button:focus{color:var(--primary);}
	.social-menu svg,.language-switcher svg{height:1rem;}
	.menu-toggle{display:none;}
	.menu-container .language-menu{
		position:absolute;
		top:100%;
		margin-top:.5rem;
		right:calc(var(--leading) - 1rem);
		padding:1rem var(--leading);
		background:rgba(255,255,255,.8);
		transform:scale(.25);
		transform-origin: top right;
		opacity:0;
		visibility: hidden;
		transition:transform .2s, opacity .2s;
	}
	.menu-container .language-menu.active{
		transform: scale(1);
		opacity: 1;
		visibility: visible;
	}
	.language-menu:before{
		content:"";
		position:absolute;
		bottom:100%;
		right:1rem;
		width:1rem;
		height:.5rem;
		border-style: solid;
		border-width: 0 .5rem .5rem .5rem;
		border-color: transparent transparent rgba(255,255,255,.8) transparent;
	}
	.language-menu{
		flex-direction: column;
	}
	.language-menu a{color:var(--text)}

	/* Hero */
	.hero .wrapper{
		padding-top:9rem;
		justify-content:center;
	}
	.hero h1{margin-top:0}

	/* Main content */
	.main-content{padding-top:0}
	.header-padding .main-content{padding-top:14rem}

	/* Main footer */
	.main-footer{padding:calc(5rem + 6rem) 0;}
	.main-footer:before,.main-footer:after{height:6rem}
	.main-footer .wrapper{gap:5rem;}
	.footer-contact{padding-bottom:5rem;}
	.footer-contact, .newsletter{
		display:flex;
		justify-content: space-between;
		margin:0 auto;
		max-width:45rem;
		gap:5rem;
	}
	.footer-contact strong{font-size:3rem;}
	address{
		display:grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap:3rem;
	}

	/* Home page */
	.home-projects ul{grid-template-columns: 1fr 1fr 1fr;}
	.skills span{width:14%}
	.home-agency .square{padding-left:7.5rem;}
	.home-agency .square:before{
		width:50%;
		height:auto;
		aspect-ratio:1/1;
		left:0;
	}
	.knowledge .wrapper{
		padding-top:6rem;
		padding-bottom:6rem;
	}
	.knowledge ul{
		grid-template-columns: 1fr 1fr 1fr;
		padding:0 7rem;
		margin-top:3.5rem;
	}
	.clients{
		margin-top:0;
		max-width:400px;
		aspect-ratio:1/1;
		border:3px solid var(--text);
		margin-left:3rem;
		position:relative;
	}
	.clients-slider{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		margin:0;
	}
	.clients-slider > *{
		width:100%;
		flex-direction: column;
		align-items:center;
		padding-right:0;
		padding-top:1rem;
		transform:translateY(100%);
		animation: marquee_vertical 50s linear infinite;
	}
	.clients-slider > .clients-2{
		transform:translateY(100%);
		animation: marquee_vertical 50s linear infinite;
		animation-delay:25s;
	}
	.clients-slider figure{
		margin: var(--leading) 0;
		height:auto;
	}
	.clients-slider img{height:auto;}

	/* Home slider */
	.home-slider-content{margin-top:50vh;}
	.home-slider-content h2{font-size: 5rem;}
	.home-slider-content p{font-size:1.5rem;}
	.home-slider-content .btn-icon svg{height:2rem}

	/* Projects page */
	.projects-list{
		columns:3;
		column-gap:3rem;
		margin-bottom:5rem;
	}

	/* Single project page */
	.project-header{
		display:flex;
		flex-direction: column;
	}
	.project-title{
		order:1;
		padding:10rem 0 3rem;
	}
	.project-title .wrapper > *{padding-left:calc(50% + 1.5rem);}
	.project-details{
		margin-right:3.5rem;
		position:relative;
	}
	.project-details:before,.project-details:after{
		content:"";
		position:absolute;
		top:-1.75rem;
		left:-1.75rem;
		background:var(--text);
	}
	.project-details:before{
		width:2px;
		height:100%;
	}
	.project-details:after{
		width:50%;
		height:2px;
	}
	.project-details h2{margin-top:0;}
	.project-details h3{margin-bottom:0;}
	.project-pictures{margin-top:5rem;}
	.project-pictures figure{margin-bottom:5rem;}

	/* About page */
	.team-intro{
		padding:0 3.5rem 3.5rem;
		position:relative;
	}
	.team{
		column-gap:0;
		margin-bottom:5rem;
	}
	.team figure{padding:0 10rem 0 3.5rem;}
	.team figure:nth-child(even){
		padding:0 3.5rem 0 10rem;
		transform:translateY(-5rem);
	}
	.team figure{position:relative}
	.team figure:before,.team figure:after,.team-intro:before,.team-intro:after{
		content:"";
		position:absolute;
		background:var(--text);
		z-index: -1;
	}
	.team figure:before{
		width:100%;
		height:2px;
		left:0;
		top:calc(50% - 1px);
	}
	.team figure:nth-child(even):before{top:calc(50% - 1px + 5rem)}
	.team figure:after{
		width:2px;
		height:50%;
		left:0;
		top:0;
	}
	.team figure:nth-child(4n+3):after{
		top:50%;
	}
	.team figure:nth-child(4n+2):after{
		left:auto;
		right:0;
		top:calc(50% + 5rem)
	}
	.team figure:nth-child(4n):after{
		left:auto;
		right:0;
		top:0;
		height:calc(50% + 5rem)
	}
	.team-intro:before{
		width:2px;
		height:100%;
		left:0;
		top:0;
	}
	.team-intro:after{
		width:20%;
		height:2px;
		left:0;
		top:0;
	}

	/* Services page */
	.step-content{
		padding-left:5rem;
		max-width:55%;
	}
	.step-content h2{font-size: 2.074rem}
	.steps li:nth-child(even) .step-content{margin-left:45%;}
	.steps li:before{background:var(--white)}
	.steps li:nth-child(odd):before{
		background:#9f9f9f;
		width:1px;
		height:calc(100% + 5rem);
		top:5rem;
		left:2.5rem;
		transition: background 1s;
	}
	.steps li:nth-child(odd):after{
		content:"";
		position: absolute;
		background:#9f9f9f;
		height:1px;
		width:calc(45% - 2.5rem);
		bottom:-10rem;
		left:2.5rem;
		transition: background 1s;
	}
	.step-content:before{
		color:#9f9f9f;
		transition: color 1s;
		font-size:10rem;
		top:-4rem;
	}
	.active .step-content:before{color:var(--primary);}
	.steps .line-active:nth-child(odd):before,.steps .line-active:nth-child(odd):after{background: var(--primary)}
	.design-step{
		display:grid;
		grid-template-columns: 1fr;
		grid-template-areas:"content";
	}
	.design-step > *{grid-area: content}
	.design-picture{
		z-index:-1;
		position:relative;
		margin-left:20%;
		transition:transform .3s;
	}
	.design-picture:after{
		content:"";
		position: absolute;
		top:0;
		width:100%;
		height: 100%;
		background: linear-gradient(to right, var(--white), rgba(255,255,255,.9) 50%, rgba(0,0,0,0) 80%);
	}
	.realization{
		margin-left:10rem;
		max-width: 50%;
	}
	.responsibles{
		background: var(--text);
		margin:calc(120px + 10rem) 0 120px;
	}
	.responsibles:before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23020300' viewBox='0 0 600 83'%3E%3Cpath d='M600 83V0C572 6 152 88 0 83h600z'/%3E%3C/svg%3E");}
	.responsibles:after{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23020300' viewBox='0 0 600 33'%3E%3Cpath d='M600 0H0v33c9-1 295-49 600-22V0z'/%3E%3C/svg%3E");}
	.custom{margin:7rem auto}

	/* Salons */
	.salon-content p, .salon-content ul, .salon-content ol, .salon-content h1, .salon-content h2, .salon-content h3, .salon-content h4, .salon-content h5{
		max-width: 40rem;
		margin-left:auto;
		margin-right: auto;
	}

	/* Contact page */
	select{width:50%}

	/* Forms confirmation */
	.form-confirmation{
		margin-top:-14rem;
		padding-top:14rem;
	}

}

/*--------------------------------------------------------------
Sliders
--------------------------------------------------------------*/

.tns-outer{padding:0 !important}.tns-outer [hidden]{display:none !important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0;min-height:1px}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery>.tns-slide-active{position:relative;left:auto !important}.tns-gallery>.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left}

.tns-outer{position: relative}
.tns-outer button{
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	border:none;
	background: transparent;
	padding:1rem;
	z-index: 99;
}
.tns-outer button[data-controls="next"]{
	left:auto;
	right:0;
}
.tns-outer button svg{
	width:3rem;
	height:3rem;
	max-width: none;
	filter:drop-shadow(1px 1px 5px rgba(0,0,0,.5));
}
button[data-action="start"],button[data-action="stop"]{
	top:auto;
	left:auto;
	right:0;
	bottom:-1.75rem;
}
button[data-action="start"] svg,button[data-action="stop"] svg{
	width:1.5rem;
	height:1.5rem;
}
@media (min-width:62rem){
	.slider-inner{
		height:100vh;
		min-height: 640px;
	}
	.slider-inner img{
		width:100%;
		height:100%;
		object-fit: cover;
	}
}