@font-face {
  font-family: 'Canela';
  font-weight: 100;
  src:  url('webfonts/Canela-Thin.woff') format('woff');
}
@font-face {
  font-family: 'Canela';
  font-weight: 200;
  src:  url('webfonts/Canela-Light.woff') format('woff');
}
@font-face {
  font-family: 'Canela';
  font-weight: 400;
  src:  url('webfonts/Canela-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Gill Sans';
  font-weight: 400;
  src:  url('webfonts/GillSansNova-Book.woff') format('woff');
}
@font-face {
  font-family: 'Gill Sans';
  font-weight: 500;
  src:  url('webfonts/GillSansNova-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Gill Sans';
  font-weight: 600;
  src:  url('webfonts/GillSansNova-SemiBold.woff') format('woff');
}

:root {
  --black: #3F3F3F;
  --green: #176754;
  --light-green: #e7f0ee;
  --dark_green: #143E35;
  --white: #ffffff; 
  --grey: #f9f9f9;
  --margin: 5%;
}

/* Page Loader */
.loader{
	transition:.3s cubic-bezier(1,.01,.29,1.01);
	background-color:var(--dark_green);
	left:0;
	right:100%;
	position:fixed;
	height:100vh;
	z-index:101;
	clip-path: inset(0 0 0 0);
}
.loading:after{
	background-color:var(--dark_green);
	content:" ";
	position:fixed;
	top:0;
	bottom:0;
	width:100%;
	z-index:100
}

#logo_loader{
	max-width: 2rem;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	animation: fadein 2s;
	animation-delay: 600ms;
}

@keyframes fadein {
	from {
	 opacity: 0; }
	to   {
	 opacity: 1; }
}

/* UNIVERSAL */
html,
body {
  height: 100%;
  width: 100%;
  width: 100vw;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 100%;
  font-family: 'Gill Sans', sans-serif;
  font-size: 16px;
}

#page,
#page_container{
	overflow: hidden;
	width: 100vw;
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
	height: auto;
}

figure img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* ==== GRID SYSTEM ==== */

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 1%;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 98%;
}

.col-1-sm {
  width: 8%;
}

.col-2-sm {
  width: 18%;
}

.col-3-sm {
  width: 28%;
}

.col-4-sm {
  width: 38%;
}

.col-5-sm {
  width: 48%;
}

.col-6-sm {
  width: 58%;
}

.col-7-sm {
  width: 68%;
}

.col-8-sm {
  width: 78%;
}

.col-9-sm {
  width: 88%;
}

.col-10-sm {
  width: 98%;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
  .container {
	width: 80%;
  }
}

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
	width: 8%;
  }
  
  .col-2 {
	width: 18%;
  }
  
  .col-3 {
	width: 28%;
  }
  
  .col-4 {
	width: 38%;
  }
  
  .col-5 {
	width: 48%;
  }
  
  .col-6 {
	width: 58%;
  }
  
  .col-7 {
	width: 68%;
  }
  
  .col-8 {
	width: 78%;
  }
  
  .col-9 {
	width: 88%;
  }
  
  .col-10 {
	width: 98%;
  }

  .hidden-sm {
	display: block;
  }
}

@media only screen and (min-width: 60em) { /* 960px */
  .container {
	width: 90%;
	/* max-width: 60rem; */
  }
}

p{
	font-family: 'Gill Sans', sans-serif;
	font-size: 16px;
	font-size: clamp(0.9rem, 1vw, 1rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-align: left;
	color: var(--green);
	margin: 0 auto 1rem;
}
a{
	font-family: 'Gill Sans', sans-serif;
	text-decoration: none;
	text-align: left;
	color: var(--green);
}

a.cta{
	font-size: 13px;
	font-size: clamp(0.7rem, 0.813vw, 0.813rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--green);
	padding-bottom: 0.4rem;
}

a.cta.reverse_cta{
	border-bottom: 1px solid var(--white);
}

a.cta:after{
	content: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.98577 8.2983L6.29261 8.36327L7.53384 8.38766L6.65598 7.50981L0.707104 1.56107L1.56102 0.707121L7.50989 6.65622L8.38774 7.53411L8.36335 6.29286L8.29838 2.98587L9.48913 3.01489L9.49999 8.92157L9.48682 9.48681L8.92122 9.49999L3.01479 9.48914L2.98577 8.2983Z" fill="%23176754" stroke="%23176754"/></svg>');
	display: inline-block;
	margin-left: 0.4rem;
}

a.cta.reverse_cta:after{
	content: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.98577 8.2983L6.29261 8.36327L7.53384 8.38766L6.65598 7.50981L0.707104 1.56107L1.56102 0.707121L7.50989 6.65622L8.38774 7.53411L8.36335 6.29286L8.29838 2.98587L9.48913 3.01489L9.49999 8.92157L9.48682 9.48681L8.92122 9.49999L3.01479 9.48914L2.98577 8.2983Z" fill="white" stroke="white"/></svg>');
	display: inline-block;
	margin-left: 0.4rem;
}

ul{
	color: var(--green);
	padding-left: 1.3rem;
}

h1{
	font-family: 'Gill Sans', sans-serif;
	font-size: 70px;
	font-size: clamp(3.5rem, 4.375vw, 4.375rem);
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: 0.33rem;
	text-align: center;
	color: var(--white);
	text-transform: uppercase;
	margin: 0 auto;
}
h2{
	font-family: 'Gill Sans', sans-serif;
	font-size: 59px;
	font-size: clamp(2.6rem, 3.688vw, 3.688rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--green);
	margin: 0 auto 2rem;
}
h3{
	font-family: 'Gill Sans', sans-serif;
	text-transform: uppercase;
	font-size: 32px;
	font-size: clamp(1.6rem, 2vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0em;
	text-align: left;
	color: var(--green);
	margin: 0 auto 2rem;
}
h4{
	font-family: 'Gill Sans', sans-serif;
	font-size: 26px;
	font-size: clamp(1.2rem, 1.625vw, 1.625rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-align: left;
	color: var(--green);
	margin: 0 auto 2rem;
}

h5{
	font-family: 'Canela', sans-serif;
	font-size: 27px;
	font-size: clamp(1.2rem, 1.688vw, 1.688rem);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: 0.03em;
	padding-left: 7vw;
	color: var(--green);
	position: relative;
	margin: 0 auto 2rem;
}
h5::before{
	content: "";
	width: 5.6vw;
	height: 1px;
	position: relative;
	background-color: var(--green);
	display: block;
	top: 0.8rem;
	left: -7vw;
}
h6{
	
}
small{
	font-family: 'Gill Sans', sans-serif;
	text-transform: uppercase;
	font-size: 13px;
	font-size: clamp(0.7rem, 0.813vw, 0.813rem);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-align: left;
	color: var(--green);
}
.uppercase{
	text-transform: uppercase;
}
.number{
	font-family: 'Canela', sans-serif;
	font-size: 30vw;
	font-size: clamp(30rem, 38vw, 35rem);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-align: left;
	color: var(--green);
	position: absolute;
	z-index: 1;
	line-height: 0.77;
	pointer-events: none;
}

section{
	position: relative;
	padding: 10vh 0;
}

.section_name{
	font-family: 'Canela', sans-serif;
	font-size: 36px;
	font-size: clamp(1.9rem, 2.25vw, 2.25rem);
	font-weight: 250;
	line-height: 1;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--green);
	position: absolute;
	text-transform: uppercase;
	transform-origin: center left;
	transform: rotate(-90deg);
	margin: 0;
}

.section_name.left_name{
	left: 9.4%;
}

.section_name.right_name{
	right: 9.5%;
	transform-origin: center right;
}

/* ==== Modal ==== */

.modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.modal-bg {
  position: absolute;
  background: #000;
  width: 100%;
  height: 100%;
}
.modal-container {
  background: var(--white);
  position: relative;
  padding: 7vw;
  max-width: 900px;
  width: 80vw;
}
.modal-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  outline: none;
  appearance: none;
  color: var(--green);
  background: none;
  border: 0px;
  cursor: pointer;
  font-size: 2rem;
  line-height: 0.5;
  padding: 0;
}

/* ==== Header ==== */

.site-header{
	background-image: url("img/veralta_hero.jpg");
	background-size: cover;
	height: 100vh;
	width: 100vw;
	position: relative;
}
header.site-header::before{
	content: "";
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.8;
	position: absolute;
	left: 0;
	top: 0;
}
.site-header_content{
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.site-header_content figure{
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(var(--margin) + 5% - 2px);
	height: 55%;
}
#logo{
	background-image: url("img/veralta_logo.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: auto;
	width: 20vw;
	height: 8rem;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 5vh;
}

/* ==== Section Clarté ==== */
#entry-clarte{
	padding-top: 40vh;
}
#entry-clarte .number{
	display: none;
}
#entry-clarte .section_name{
	bottom: 0;
}

#clarte_img{
	position: absolute;
	height: 22vw;
	width: 34.2vw;
	right: calc(var(--margin) + 10% - 2px);
	top: -6vw;
	z-index: 1;
}

/* ==== Section Intergité ==== */
#entry-integrite {
	padding-top: 0;
	padding-bottom: 25vh;
}
#entry-integrite::before{
	content: "";
	width: 150vh;
	height: 150vh;
	background-image: url('img/veralta_map.svg');
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -54%;
	top: -20%;
	z-index: 1;
}
#entry-integrite .section_name{
	top: 2vh;
}
#entry-integrite #forest{
	position: absolute;
	height: 20vw;
	width: 16.2vw;
	left: calc(var(--margin) + 19% - 1px);
	bottom: 0;
	z-index: 1;
}
#entry-integrite .number{
	position: absolute;
	right: -10%;
	bottom: 0;
	z-index: 1;
}

/* ==== Section Atouts ==== */

#entry-atouts .section_name{
	top: 0;
	right: 0;
}

#entry-atouts::after{
	content: "";
	width: 100%;
	height: 90vh;
	background-color: var(--green);
	z-index: -1;
	position: absolute;
	bottom: 0;
}

#entry-atouts .first_row{
	margin-bottom: 10vh;
}

/* ==== Section Confidentialité ==== */

#entry-confidentialite .number{
	position: absolute;
	left: -20%;
	top: -10%;
	z-index: 1;
}

#entry-confidentialite .years{
	font-family: 'Gill Sans', sans-serif;
	font-size: 91px;
	font-size: clamp(4.5rem, 5.688vw, 5.688rem);
	font-weight: 400;
	line-height: 1.2;
	display: inline-block;
	color: var(--green);
	margin-right: 0.5rem;
}
#entry-confidentialite .years + h3{
	display: inline-block;
}

#entry-confidentialite .section_name.right_name{
	top: 30%;
}

#entry-confidentialite .first_row{
	margin-bottom: 20vh;
}

/* ==== Section Expertise ==== */

#entry-expertise::before{
	content: "";
	width: 150vh;
	height: 150vh;
	background-image: url('img/veralta_map.svg');
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: -24%;
	top: -10%;
	z-index: -1;
}
#entry-expertise .number{
	position: absolute;
	right: 10%;
	bottom: 30%;
	z-index: 1;
}

#entry-expertise .section_name.top_name{
	top: 17.5%;
}

#entry-expertise .section_name.bottom_name{
	bottom: 20%;
}

#entry-expertise .first_row{
	margin-bottom: 30vh;
}

#entry-expertise figure{
	height: 55vw;
}

/* ==== Section Adaptabilité ==== */

#entry-adaptabilite{
	background-color: var(--grey);
	padding-top: 50vh;
	margin-top: 20vh;
}

#entry-adaptabilite .number{
	top: -10vh;
}

#entry-adaptabilite .section_name{
	bottom: 50%;
}

#entry-adaptabilite .first_row{
	display: flex;
	align-items: center;
	margin-top: 10vh;
	margin-bottom: 5vh;
}

#entry-adaptabilite .project_row{
	margin-bottom: 10vh;
}

#entry-adaptabilite .project_row figure{
	height: 35vw;
}

/* ==== Section Projets ==== */

#entry-projets{
	background-color: var(--green);
	padding: 15vh 0;
}

#entry-projets *{
	color: var(--white);
}

#entry-projets *::before{
	background-color: var(--white);
}

#entry-projets figure{
	height: 22vw;
	margin-bottom: 1rem;
}

/* ==== Partenaires ==== */
#entry-partenaires {
	padding: 20vh 0;
}
#entry-partenaires .number{
	position: absolute;
	right: -12%;
	top: -5%;
	z-index: -1;
}
#entry-partenaires .logos_row{
	display: flex;
	align-items: center;
}
#entry-partenaires figure{
	display: flex;
	justify-content: center;
	align-items: center;
}
#entry-partenaires figure img{
	object-fit: contain;
	width: 100%;
	height: 100%;
	max-height: 5vw;
	max-width: 10vw;
	margin: auto;
}

/* ==== Footer ==== */

.site-footer{
	background-color: var(--light-green);
	position: relative;
}
#footer_forest{
	position: absolute;
	height: 20vw;
	width: 16.2vw;
	right: calc(var(--margin) + 10% - 2px);
	top: -10vw;
	z-index: 1;
}
.site-footer .first_row{
	padding-top: 20vh;
}
.site-footer .second_row{
	padding-bottom: 20vh;
}
.site-footer .copyright{
	background-color: var(--dark_green);
	padding: 1rem 0;
}
.site-footer .copyright .col-10{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-footer .copyright *{
	color: var(--white);
}

/* iPad Portrait */
@media screen and (max-width: 820px) {
	
}

/* For ipad: */
@media screen and (max-width : 768px){
	
}

/* For iphone: */
/* @media screen and (max-width : 320px){ */
@media screen and (max-width: 430px){
	.site-header{
		/* min-height: -webkit-fill-available; */
		height: 92vh !important;
	}
	.mobile_hidden{
		display: none;
	}
	#logo{
		width: 50vw;
		height: 5rem;
	}
	p{
		font-size: 1rem;
		margin: 0 auto 2rem;
	}
	a.cta{
		font-size: 1rem;
	}
	h1{
		font-size: clamp(1.6rem, 2vw, 2rem);
	}
	h2{
		font-size: clamp(1.8rem, 3vw, 3rem);
		margin: 0 auto 1rem;
	}
	h3{
		font-size: clamp(1.2rem, 1.8vw, 1.8rem);
	}
	h4{
		font-size: clamp(1.2rem, 1.625vw, 1.625rem);
	}
	h5{
		font-size: clamp(1.2rem, 1.688vw, 1.688rem);
	}
	small{
		font-size: clamp(0.7rem, 0.813vw, 0.813rem);
	}
	.number{
		font-size: clamp(10rem, 15vw, 15rem);
		letter-spacing: 0;
	}
	.section_name{
		font-size: clamp(1.6rem, 2vw, 2rem);
	}
	.site-header_content figure{
		width: calc(var(--margin) + 10% - 2px);
		height: 30%;
	}
	#entry-clarte{
		padding-top: 25vh;
	}
	#entry-clarte .number{
		top: -6%;
		left: -10%;
		display: block;
	}
	#clarte_img{
		right: 0;
		width: 45%;
		top: -15vw;
		height: 35vw;
	}
	#entry-clarte .section_name{
		top: 15%;
		bottom: initial;
		left: 40%;
	}
	#entry-integrite{
		padding-top: 10vh;
		padding-bottom: 10vh;
	}
	#entry-integrite::before{
		width: 80vh;
		height: 80vh;
		left: -90%;
		top: -15%;
	}
	#entry-integrite .section_name{
		top: -30%;
	}
	#entry-integrite .number{
		right: -5%;
		bottom: initial;
		top: 65%;
	}
	#entry-integrite #forest{
		width: 30%;
		height: 43vw;
		left: 15%;
		bottom: initial;
		top: 65%;
	}
	#entry-atouts{
		padding-bottom: 5vh;
	}
	#entry-atouts::after{
		height: 32vh;
	}
	#entry-confidentialite{
		padding-top: 20vh;
	}
	#entry-confidentialite .number{
		top: 1%;
	}
	#entry-confidentialite .first_row{
		margin-bottom: 0;
	}
	#entry-expertise{
		padding-top: 0;
	}
	#entry-expertise::before{
		width: 65vh;
		height: 65vh;
		right: -70%;
		z-index: -1;
	}
	#entry-expertise figure{
		width: 70%;
		height: 70vw;
	}
	#entry-expertise .first_row{
		margin-bottom: 18vh;
	}
	#entry-expertise .section_name.top_name{
		top: 48%;
		left: 20%;
		z-index: 1;
	}
	#entry-expertise .number{
		bottom: initial;
		top: 28%;
		right: 15%;
	}
	#entry-confidentialite .section_name.right_name{
		top: initial;
		bottom: -80%;
		z-index: 1;
	}
	#entry-adaptabilite{
		margin-top: 10vh;
		padding-top: 5vh;
		padding-bottom: 0;
	}
	#entry-adaptabilite .number{
		left: -10%;
	}
	#entry-adaptabilite .first_row{
		display: block;
		margin-bottom: 0;
	}
	#entry-adaptabilite .project_row figure{
		height: 60vh;
		margin-bottom: 3vh;
	}
	#entry-expertise .section_name.bottom_name{
		bottom: -50%;
		right: initial;
		left: -41%;
		z-index: 1;
	}
	#entry-adaptabilite .project_row{
		margin-bottom: 0;
		padding-bottom: 3vh;
	}
	#entry-adaptabilite .project_row.second_project{
		display: flex;
		flex-direction: column-reverse;
	}
	#entry-adaptabilite .section_name{
		right: 0;
		bottom: 57%;
	}
	#entry-projets{
		padding-top: 5vh;
		padding-bottom: 5vh;
	}
	#entry-projets .container{
		width: 100%;
	}
	#entry-projets .project_title{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.project_gallery .carousel-cell {
	  width: 70%; /* full width */
	  height: 80vh; /* height of carousel */
	  opacity: 0.4;
	  transition: opacity 0.3s ease;
	}
	.project_gallery .carousel-cell.is-selected{
		opacity: 1;
	}
	.flickity-button{
		background: var(--white);
	}
	.flickity-prev-next-button{
		width: 4rem;
		height: 4rem;
	}
	.flickity-prev-next-button.previous{
		left: 5%;
	}
	.flickity-prev-next-button.next{
		right: 5%;
	}
	.flickity-prev-next-button .flickity-button-icon{
		fill:var(--black);
		width: 20%;
		left: 40%;
	}
	#entry-projets figure{
		height: 60vh;
	}
	#entry-partenaires{
		padding: 10vh 0;
	}
	#entry-partenaires .number{
		right: -10%;
		top: 0%;
	}
	#entry-partenaires .logos_row .col-2{
		width: 23%;
	}
	#entry-partenaires .partners_title{
		width: 60%;
		margin-left: 0;
	}
	#entry-partenaires figure img{
		max-height: 10vw;
		max-width: 15vw;
		margin-left: 0;
	}
	#footer_forest{
		height: 50vw;
		width: 30vw;
		right: 5%;
		top: -15vw;
	}
	.site-footer .first_row{
		padding-top: 5vh;
	}
	.site-footer .second_row{
		padding-bottom: 5vh;
	}
	.site-footer .copyright{
		padding: 2rem 0;
	}
	.site-footer .copyright .col-10{
		flex-direction: column;
		gap: 2rem;
	}
	.site-footer .copyright .col-10 .copyright_info{
		order: -1;
	}
	.modal-container{
		height: 65vh;
		overflow: auto;
	}
	.modal-container p:last-of-type{
		padding-bottom: 3rem;
	}
	.modal-container a.cta::after{
		content: "";
		position: absolute;
		background: linear-gradient(0deg, rgba(217,217,217,1) 20%, rgba(255,255,255,0) 100%);
		bottom: 0rem;
		left: 0;
		max-width: 900px;
		width: 95vw;
		height: 30vh;
		z-index: -1;
		margin: -8vw;
	}
	.modal-container a.cta{
		bottom: 0rem;
		position: sticky;
		z-index: 1;
	}
}