@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/*-----------------------------------
COMMONS
-----------------------------------*/

html,
body {
height: 100%;
}

body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
color: #3a3938;
overflow-x: hidden;
}

.section {
overflow: hidden;
}

.section.standard {
padding: 15vh 0;
}

.section.bottom {
padding: 0 0 15vh 0;
}

.section.top {
padding: 15vh 0 0 0;
}

.section.odd {
background: #f7f7f7;
}

.section .section-title {

}

.section .section-content {

}

.section .section-title + .section-content {
margin-top: 10vh;
}

.separator {
height: 5vh;
}

.separator.big {
height: 10vh;
}

.cta-container {
}

h1 {
font-size: 1.5rem;
letter-spacing: 1px;
}

h2 {
font-size: 1.75rem;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.4;
font-weight: 600;
}

h3 {
line-height: 1.4;
font-size: 1.5rem;
}

h4 {
font-size: 1.25rem;
line-height: 1.6;
}

h6 {
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.9375rem;
}

p {
font-size: 0.9375rem;
}



@media (min-width: 768px) {
	h1 {
	font-size: 2.75rem;
	letter-spacing: 1px;
	}

	h2 {
	font-size: 2.25rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.4;
	font-weight: 600;
	}

	h3 {
	line-height: 1.4;
	}

	h4 {
	font-size: 1.5rem;
	line-height: 1.6;
	}

	h6 {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 1rem;
	}

	p {
	font-size: 1rem;
	}
}




.color-0 {
color: #3a3938;
}

.color-1 {
color: #05849a;
}

.color-2 {
color: #759aa8;
}

.color-3 {
color: #db464a;
}

.color-4 {
color: #f5b747;
}

.bg-0 {
color: #3a3938;
}

.bg-1 {
color: #05849a;
}

.bg-2 {
color: #759aa8;
}

.bg-3 {
color: #db464a;
}

.bg-4 {
color: #f5b747;
}






/*-----------------------------------
BUTTONS
-----------------------------------*/

.btn {
position: relative;
z-index: 0;
overflow: hidden;
text-transform: uppercase;
outline: none !important;
border-radius: 2rem;
box-shadow: 0 0 0 !important;
transition: all 250ms ease-out;
padding: .75rem 2rem;
letter-spacing: 0.5px;
font-weight: 300;
}

@media (min-width: 1200px) {
	.btn:hover {
	transform: translateY(-3px);
    -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,.15) !important;
    box-shadow: 0 3px 10px 0 rgba(0,0,0,.15) !important;
	}
}

.btn.btn-primary {
color: #ffffff !important;
border: 0 !important;
background: #05849a !important;
}

.btn.btn-secondary {
color: #ffffff !important;
border: 1px solid #fff !important;
background: transparent !important;
}

.btn.btn-secondary:hover {
color: #3a3938 !important;
border: 1px solid #fff !important;
background: #ffffff !important;
}

/*
.btn:before {
content: "";
position: relative;
z-index: -1;
}

.btn:after {
content: "";
position: relative;
z-index: -1;
}

.btn.btn-primary {
color: #ffffff;
transition: color 0.2s ease-out;
border: 0 !important;
background: #05849a;
}

.btn.btn-primary:hover {
color: #ffffff;
}

.btn.btn-primary:before {
background-color: #759aa8;
width: 0;
height: 110%;
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
will-change: opacity, width;
transition-property: opacity, width;
transition-duration: 0.25s, 0.25s;
transition-delay: 0.15s, 0s;
transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24);
}

.btn.btn-primary:hover:before {
opacity: 1;
width: 110%;
transition-duration: 0.25s, 0.4s;
transition-delay: 0s;
}

.btn.btn-primary.btn-hollow {
color: #05849a;
transition: color 0.2s ease-out;
border: 1px solid #05849a !important;
background: none;
}

.btn.btn-primary.btn-hollow:hover {
color: #ffffff;
}

.btn.btn-primary.btn-hollow:before {
background-color: #05849a;
width: 0;
height: 0;
padding: 50%;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0) scale(0);
transition: transform 0.15s ease-out;
}

.btn.btn-primary.btn-hollow:hover:before {
transition-duration: 0.3s;
transform: translate3d(-50%, -50%, 0) scale(1.5);
}
/*








/*-----------------------------------
HEADER
-----------------------------------*/

header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4.375rem;
display: flex;
justify-content: center;
align-items: center;
padding: 0 15px;
z-index: 99;
transition: all 250ms ease-out;
transform: translateY(-100%);
}

@media (min-width: 768px) {
	header {
	padding: 0 2rem;
	justify-content: space-between;
	}
}

header .header-top {
height: 2rem;
width: 2rem;
background: #f7f7f7;
border-radius: 50%;
padding: 0.5rem;
}

header .header-top svg {
display: block;
}

header .header-top svg * {
fill: #05849a;
}

header .logo {
cursor: pointer;
opacity: 0;
transition: opacity 100ms ease-out;
}

header .logo img {
height: 2rem;
}

header .logo svg {
height: 2rem;
}

header .logo svg .st0 {
fill:#05849A;
}

header .logo svg .st1 {
fill:#3A3938;
}

header .custom-nav {
display: flex;
height: 100%;
margin: 0;
padding: 0;
}

header .custom-nav li {
font-size: 0.75em;
color: #ffffff !important;
display: flex;
position: relative;
align-items: center;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
}

header .custom-nav li:after {
content: "";
display: block;
width: 0;
height: 2px;
background: #05849a;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
transition: all 100ms ease-out;
opacity: 0;
}

header .custom-nav li:before {
content: "";
display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: 1;
position: absolute;
}

header .custom-nav li.active:after {
width: 100%;
}

header .custom-nav li + li {
margin-left: 2rem;
}

header .custom-nav li a {
text-decoration: none !important;
color: #ffffff;
transition: color 150ms linear;
}

@media (min-width: 1200px) {
	header .custom-nav li:hover a {
	color: #05849a;
	}
}

.not-top header {
background: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transform: translateY(0);
}

.not-top header .logo {
opacity: 1;
}

.not-top header .custom-nav li a {
text-decoration: none !important;
color: #3a3938;
}

.not-top header .custom-nav li:after {
opacity: 1;
}


@media (min-width: 1200px) {
	.not-top header .custom-nav li:hover a {
	color: #05849a;
	}
}







/*-----------------------------------
OFFCANVAS
-----------------------------------*/

.custom-offcanvas {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 3;
background: #05849a;
transform: translateX(100%);
transition: transform 250ms ease-out;
}

.custom-offcanvas.home-open {
transform: translateX(0);
}

.custom-offcanvas .title {
display: flex;
width: 100%;
align-items: center;
padding: 2rem 0;
text-transform: uppercase;
background: #05849a;
justify-content: center;
}

.custom-offcanvas .title .logo-picto {
height: 160px;
width: 160px;
background: #fff;
position: relative;
border-radius: 50%;
}

.custom-offcanvas .title .logo-picto img {
position: absolute;
height: 70%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.custom-offcanvas-nav {
list-style-type: none;
padding: 0;
margin: 0;
}

.custom-offcanvas-nav li {
position: relative;
padding: 0.75rem 0;
overflow: hidden;
text-align: center;
}

.custom-offcanvas-nav li a {
position: relative;
z-index: 2;
color: #fff;
transition: color ease-out 250ms;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.custom-offcanvas-nav li.active a {
color: #ffffff;
}

.custom-offcanvas-nav li:before {
content:"";
display: block;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
}

.custom-offcanvas-nav li:after {
content: "";
display: block;
position: absolute;
top: 0;
z-index: 1;
background: rgba(255, 255, 255, 0.2);
transform: translateX(-100%);
left: 0;
bottom: 0;
right: 0;
transition: transform ease-out 250ms;
}

.custom-offcanvas-nav li.active:after {
transform: translateX(0);
}

.home-nav-container {
position: fixed;
z-index: 100;
top: 11px;
right: 8px;
overflow: hidden;
height: 50px;
width: 50px;
}

.home-nav-trigger {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
margin-top: -40px;
margin-left: -40px;
}

.ham {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 400ms;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
height: 80px;
}

.active .hamRotate {
transform: rotate(45deg);
}

.line {
fill: none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, stroke 400ms;
stroke: #fff;
stroke-width: 2px;
stroke-linecap: round;
}

.not-top .line {
stroke: #05849a;
}

.active .line {
stroke: #ffffff !important;
}

.ham4 .top {
stroke-dasharray: 40 121;
}

.ham4 .bottom {
stroke-dasharray: 40 121;
}

.active .ham4 .top {
stroke-dashoffset: -68px;
}

.active .ham4 .bottom {
stroke-dashoffset: -68px;
}

.home #offcanvas-left {
transform: translateX(-100%);
top: 0;
}

.home #offcanvas-left.home-open {
transform: translateX(0);
}




/*-----------------------------------
HERO
-----------------------------------*/

section.hero {
height: 100%;
background-image: url(../img/sections/hero-v.jpg);
background-size: cover;
background-position: center top;
background-color: #000000;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
overflow: hidden;
}

@media (min-width: 992px) {
	section.hero {
	background-image: url(../img/sections/hero-h.jpg);
	}
}

@media (min-width: 1200px) {
	section.hero {
	background-attachment: fixed;
	}
}

.hero .custom-container {
width: 100%;
max-width: 900px;
text-align: center;
padding: 0 15px;
}

@media (min-width: 768px) {

	.hero .custom-container {
	max-width: 1200px;
	padding: 0;
	}

}

.hero .custom-container img {
max-width: 250px;
}

@media (min-width: 768px) {

	.hero .custom-container img {
	max-width: 300px;
	}

}

.hero .custom-container h1 {
margin: 6vh 0;
color: #fff;
}

.hero .custom-container .btn {
-webkit-box-shadow: 0 0 0 !important;
box-shadow: 0 0 0 !important;
}


/*-----------------------------------
FEATURES
-----------------------------------*/

.feature-box {
max-width: 350px;
margin: 0 auto 5vh;
}

.feature-box .icon {
margin: 0 auto;
width: 7.5rem;
height: 7.5rem;
border-radius: 50%;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
padding: 0.75rem;
margin-bottom: 1.5rem;
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.07);
transition: all 300ms ease-out;
}

.feature-box .icon img {
width: 100%;
}

.feature-box .icon svg {
width: 100%;
}

@media (min-width: 1200px) {
	.feature-box:hover .icon {
	transform: translateY(-5px);
	webkit-box-shadow: 0 0px 10px 2px rgba(0,0,0,.15) !important;
	box-shadow: 0 0px 10px 2px rgba(0,0,0,.15) !important;
	}
}

.feature-box .icon svg * {
}

.iconA0 {
fill:#05849A;
}

.iconA1 {
fill:#3A3938;
}

.iconB0 {
fill:#07849A;
}

.iconB1 {
fill:#3A3938;
}

.iconC0 {
fill:#3A3938;
}

.iconC1 {
fill:#07849A;
}

.feature-box h4 {

}

.feature-box p {

}


/*-----------------------------------
VIDEO
-----------------------------------*/

.video-container {
position: relative;
width: 100%;
padding-bottom: 56.22222222222%;
}

.video-container iframe {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
}


/*-----------------------------------
PROJECT
-----------------------------------*/

.project img {
max-width: 100%;
margin-bottom: 30px;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.4) !important;
}

.project .row {
margin-top: 10vh;
}

.project h6 {
position: relative;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
}

.project h6:after {
content: "";
display: block;
width: 2rem;
height: 2px;
background: #05849a;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

.project-left,
.project-right {
text-align: center;
}

@media (min-width: 992px) {

	.project-left {
	text-align: right;
	}

	.project-right {
	text-align: left;
	}

	.project .project-right h6:after {
	left:0 ;
	transform: none;
	}

	.project .project-left h6:after {
	left:auto ;
	right: 0;
	transform: none;
	}

}



/*-----------------------------------
TEAM
-----------------------------------*/

.team-box {
max-width: 400px;
margin: 0 auto 15vh;
}

.team-box .icon {
margin: 0 auto;
width: 12rem;
height: 12rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1.5rem;
}

.team-box .icon img {
width: 100%;
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.07);
border-radius: 50%;
transition: all 300ms ease-out;
}

@media (min-width: 1200px) {
	.team-box:hover .icon img {
	transform: translateY(-5px);
    webkit-box-shadow: 0 0px 10px 2px rgba(0,0,0,.15) !important;
    box-shadow: 0 0px 10px 2px rgba(0,0,0,.15) !important;
	}
}


.team-box h4 {
margin-bottom: 0;
}

.team-box h6 {
position: relative;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
}

.team-box h6:after {
content: "";
display: block;
width: 2rem;
height: 2px;
background: #05849a;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

.team-box p {

}


/*-----------------------------------
ROADMAP
-----------------------------------*/

.section-header {
background: #05849a;
padding: 10vh 0;
position: relative;
}

.section-header h2 {
color: #fff;
}

.section-header h4 {
color: #fff;
}

.section-footer {
background: #05849a;
padding: 10vh 0;
position: relative;
}

.section-footer h2 {
color: #fff;
}

.section-footer h4 {
color: #fff;
}

.section-footer:before {
content: "";
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
border-top: 1.5rem solid #ffffff;
border-left: 7rem solid rgba(0, 0, 0, 0);
border-right: 7rem solid rgba(0, 0, 0, 0);
position: absolute;
}

.section-footer:after {
content:"";
display: block;
position: absolute;
border-right: 2px solid #ddd;
top: 0;
left: 50%;
margin-left: -1px;
height: 1.5rem;
}

.roadmap-stepper {
padding: 10vh 0;
position: relative;
display: flex;
flex-wrap: wrap;
}

.roadmap-stepper:after {
content: "";
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
border-top: 1.5rem solid #05849a;
border-left: 7rem solid rgba(0, 0, 0, 0);
border-right: 7rem solid rgba(0, 0, 0, 0);
position: absolute;
z-index: 2;
}

.roadmap-stepper:before {
content:"";
display: block;
position: absolute;
border-right: 2px solid #ddd;
top: 0;
left: 50%;
margin-left: -1px;
bottom: 0;
}

.roadmap-step {
width: 50%;
position: relative;
}

.roadmap-step.left-step {
text-align: right;
margin: 5vh 50% 0 0;
padding-right: 2rem;
}

.roadmap-step.right-step {
text-align: left;
margin: 5vh 0 0 50%;
padding-left: 2rem;
}

.roadmap-step h6 {
margin-bottom: 0.125rem;
}

.roadmap-step p {
margin: 0;
}

.roadmap-date {
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: center;
background: #3a3938;
border-radius: 50%;
color: #fff;
position: absolute;
top: -4px;
border: 2px solid;
box-shadow: 0 0 0 1px #3a3938;
}

.prev-step .roadmap-date {
background: #f5b747;
box-shadow: 0 0 0 1px #f5b747;
}

.left-step .roadmap-date {
right: 0;
margin-right: -0.75rem;
}

.right-step .roadmap-date {
left: 0;
margin-left: -0.75rem;
}

.roadmap-year {
width: 100%;
text-align: center;
position: relative;
}

.roadmap-year > div {
display: inline-block;
background: #000;
color: #fff;
height: 2rem;
border-radius: 2rem;
line-height: 2rem;
padding: 0 2rem;
font-size: 1.25rem;
margin: 5vh 0;
}

.roadmap-year.prev-year > div {
background: #f5b747;
}

.roadmap-present {
width: 100%;
border-bottom: 1px dashed #3a3938;
margin: 7vh 0 5vh 0;
position: relative;
}

.roadmap-present div {
display: inline-block;
position: absolute;
top: 0;
transform: translate(-50%, -50%);
padding: 0.5rem 1rem;
left: 50%;
background: #fff;
font-weight: 600;
color: #05849a;
letter-spacing: 1px;
text-transform: uppercase;
}


/*-----------------------------------
CONTACTS
-----------------------------------*/

.custom-form {
max-width: 500px;
margin: 0 auto;
}

.custom-form .field-container input[type="text"] {
display: block;
width: 100%;
padding: 10px 15px;
outline: none;
transition: 150ms linear background;
background: #eee;
margin-bottom: 15px;
border: 0;
}

.custom-form .field-container select {
display: block;
width: 100%;
padding: 10px;
outline: none;
transition: 150ms linear background;
background: #eee;
margin-bottom: 15px;
border: 0;
}

.custom-form .field-container.checkbox-field {
position: relative;
padding-left: 25px;
margin-top: 15px;
}

.custom-form .field-container input[type="checkbox"]{
position: absolute;
background: rgb(238, 238, 238) !important;
width: 17px;
height: 17px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
border-radius: 50%;
cursor: pointer;
outline: none !important;
margin: 0;
display: inline-block;
top: 4px;
left: 0;
}

.custom-form .field-container.checkbox-field input[type="checkbox"]:before {
content: "";
background: #000000;
position: absolute;
top: 0;
left: 0;
transition: transform 200ms ease-out;
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
transform: scale(0,0);
}

.custom-form .field-container.checkbox-field input[type="checkbox"]:checked:before {
transform: scale(1,1);
}

.custom-form .field-container.checkbox-field label {
font-weight: 300;
font-size: 0.875rem;
font-style: italic;
}

.custom-form .field-container input.alert-field {
background: #ffdfdd !important;
}

.custom-form .field-container.email {
margin-bottom: 15px;
}

.custom-form .field-container.email input {
border-bottom: 1px solid #2b72b9;
}

.custom-form .field-container.split input {
display: block;
width: 50%;
float: left;
}

.custom-form .field-container.split input:last-child {
border-left: 0;
}

.custom-form .field-container textarea {
display: block;
width: 100%;
padding: 10px;
height: 150px !important;
resize: none;
outline: none;
transition: 150ms linear background;
background: #eee;
border: 0;
margin-bottom: 15px;
}

.custom-form .field-container input:focus,
.custom-form .field-container textarea:focus {
background: #f7f7f7;
}

.custom-form .mandatory {
padding: 20px 0;
color: #333;
font-size: 13px;
}

.field-container ::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.4);
}
.field-container ::-moz-placeholder {
color: rgba(0, 0, 0, 0.4);
}
.field-container :-ms-input-placeholder {
color: rgba(0, 0, 0, 0.4);
}
.field-container :-moz-placeholder {
color: rgba(0, 0, 0, 0.4);
}

.alert-field::-webkit-input-placeholder {
color: #dd473c !important;
}
.alert-field::-moz-placeholder {
color: #dd473c;
}
.alert-field:-ms-input-placeholder {
color: #dd473c;
}
.alert-field:-moz-placeholder {
color: #dd473c;
}

.typeform-widget {
min-height: 670px;
}


/*-----------------------------------
COOKIE BANNER
-----------------------------------*/
#cookies-eu-banner{
padding: 0px !important;
position: fixed;
background-color: #4444447d;
z-index: 99999;
width: 100vw;
left: 0;
top: 0;
margin: 0 !important;
height: 100%;
}

#cookies-eu-banner #cookies-eu-banner-container{
padding: 15px;
font-size: 12px;
background-color: #000;
position: absolute;
bottom: 0;
margin: 0 !important;
left: 0;
}

.cookies-buttons {
margin-top: 10px;
}

#cookies-eu-reject {
color: #ffffff !important;
border: 1px solid #fff !important;
background: transparent !important;
outline: none !important;
margin: 0 10px;
border-radius: 40px;
padding: 5px 15px;
}

#cookies-eu-accept {
color: #ffffff !important;
border: 1px solid #05849a !important;
background: #05849a !important;
outline: none !important;
margin: 0 10px;
border-radius: 40px;
padding: 5px 15px;
}


#cookies-eu-more {
background: none;
padding: 0;
text-decoration: underline;
}

@media (min-width: 768px) {
	footer .data {
	font-size: 0.875rem;
	}
}




/*-----------------------------------
FOOTER
-----------------------------------*/

footer {
padding: 15vh 0;
background: #3a3938;
text-align: center;
}

footer .logo img {
width: 100%;
max-width: 200px;
}

footer * {
color: #ffffff !important;
}

footer .data {
font-weight: 300;
font-size: 0.6rem;
margin: 1.5rem 0 0 0;
}

@media (min-width: 768px) {
	footer .data {
	font-size: 0.875rem;
	}
}


footer .socials {
display: none;
justify-content: space-between;
width: 10rem;
margin: 0 auto;
}

footer .socials a {
background-image: url(https://via.placeholder.com/150x150/FFFFFF/3a3938/?text=ICO);
background-size: cover;
display: block;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
}