@charset "UTF-8";
/* CSS Document */

* {box-sizing:border-box;}

body {
	font-family: 'Lato', sans-serif;    
	font-weight: 300;
	width:auto;
	margin:0;
	padding:0;
	width: 100%;
	height:auto; 
    color: #0d1215;
    font-size: 14px;
    line-height: 18px;
}
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/loader.gif) center no-repeat #696852;
}
a.chevron {
	cursor: pointer;
}
.breadcrumb {
    background: none;
}
a, a:hover {
    text-decoration: inherit;
    color: inherit;
}
.cb {
    clear: both;
}
header {
	position: fixed;
	padding: 50px 0px 0px 0px;
	left: 5%;
	z-index: 30000;
	width: 90%;
}
header .logo {
	opacity: 0;
	animation: fadeIn 1s ease forwards;
	animation-delay: .5s;
}
.homepage .intro-container,.projets .intro-container, .equipe .intro-container {
	background-size: cover;
	height: 100vh;
	min-height: 600px;
	position: relative;
	color: #fff;
	/*opacity: 0;
	 animation: fadeIn .5s ease forwards; 
	animation-delay: 0.5s; */
	overflow: hidden;
}
.homepage .intro-bg {
	/*background-size: cover !important;*/
	background-size: cover;
	height: 100%;
	width: 100%;
	position: absolute;
	/*opacity: 0;
	 animation: fadeIn .5s ease forwards; 
	animation-delay: 0.5s; */
	overflow: hidden
}
.homepage .intro-bg.anim {
	animation: ReplaceBG 5s ease forwards;
}
.homepage .intro {
	/*background-size: cover !important;*/
	height: 100%;
	width: 100%;
	/*opacity: 0;
	 animation: fadeIn .5s ease forwards; 
	animation-delay: 0.5s; */
}
.homepage .intro .content {
	bottom: 15%;
	transform: translateX(-50%);
	left: 50%;
}
.homepage .intro h1 {
	font-size: 27px;
}
.homepage .intro h1,.projets .intro h1,.inspirations .intro h1, .equipe .intro h1 {
	font-size: 17px;
}
.homepage .intro h1 {
	font-size: 15px;
    display: inline-block;
    background: #696852;
    color: #fff;
    padding: 5px 10px;
}
.homepage .baseline {
	width: 70%;
	opacity: 0;
	animation-delay: 1s;
}
.homepage .baseline.anim {
	animation: ReplaceBaseline 2s ease forwards;
}
@keyframes ReplaceBG {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1.10);
	}
}
@keyframes loadBG {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes ReplaceBaseline {
	0% {
		width: 70%;
		opacity: 0;
	}
	50% {
		width: 70%;
		opacity: 1;
	}
	100% {
		width: 50%;
		opacity: 1;
	}
}
.intro .chevron {
	transform: translateX(-50%);
	bottom: 20px;
	left: 50%;
}
.mosaic .img {
	display: flex;
	flex-flow: column;
	z-index: 1;
	transition: .5s;
}
.mosaic .img:hover {
	
}
.mosaic .img img {
	width: 100%;
}
.mosaic .img-container.img-container-1 {
	margin-top: 70px;
}
.mosaic .img-pattern {
	position: absolute;
	z-index: -1;
	width: 340px;
	height: 340px;
	border: 1px solid #000;
}
.mosaic .img-pattern-1 {
	left: -35px;
	top: -35px;
}
.mosaic .img.img-1 {
	width: 370px;
}
.mosaic .img.img-2 {
	width: 202px;
}
.mosaic .img.img-3 {
	width: 334px;
	margin-left: 55px;
}
.mosaic .img.img-4 {
	width: 675px;
	margin:62px 0px 0px 0px;
}
.mosaic .img.img-5 {
	width: 365px;
	margin: 105px 0px 105px 105px;
}
.mosaic .img.img-6 {
	width: 420px;
}
.mosaic .img-container.img-container-6 {
	margin: 60px;
}
.mosaic .img-pattern-6 {
	bottom: -35px;
	right: -35px;
}
.mosaic .img.img-7 {
	width: 610px;
	margin-left: 50px;
}
.homepage .mosaic .img.img-8 {
	width: 380px;
	align-self: flex-end;
	margin-top: 15px;
}
.mosaic .img.img-9 {
	width: 450px;
	margin-top: 100px;
}
.mosaic .img.img-10 {
	width: 270px;
	margin-right: 180px;
	margin-top: 50px;
}
.mosaic .img.img-11 {
	width: 460px;
}
.mosaic .img-container.img-container-11 {
	margin: 110px;
	margin-bottom: 45px;
}
.mosaic .img-pattern-11 {
	top: -40px;
	left: -60px;
}
.mosaic .img.img-12 {
	width: 450px;
	margin-right: 80px;
	margin-top: 115px;
}
.mosaic .img.img-13 {
	width: 580px;
	margin-right: 20px;
}
.mosaic .img.img-14 {
	width: 450px;
}
.mosaic .img-container.img-container-14 {
	margin-top: 270px;
}
.mosaic .img-pattern-14 {
	bottom: -55px;
	right: -55px;
}
.mosaic .img.img-15 {
	width: 455px;
	margin-top: 135px;
}
.mosaic .img.img-16 {
	width: 455px;
	margin: 50px 0px;
}
/* LISTE DES PROJETS */
.navigation {
	position: fixed;
	z-index: 2;
	top: 20%;
	right: 5%;
	font-weight: 300;
	transition: .5s;
	text-align: right;
}
.navigation a {
	transition: .5s;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-end;
	padding:5px 0px;
	font-size: 15px;
	color: #696852;
	cursor: pointer;
	 text-transform: uppercase; 
	/*text-shadow: rgba(0,0,0,0.4) 1px 1px 3px;*/
	letter-spacing: .25rem;
}
.navigation a .check {
	width: 13px;
	height: 13px;
	border: 1px solid #696852;
	display: inline-flex;
	margin-left: 10px;
	transition: .5s;
}
.navigation a:hover, .navigation a:active {
	color:#696852;
}
.navigation a:hover .check, .navigation a.active .check {
	box-shadow: rgba(0,0,0,0.4) 1px 1px 3px;
	background:#696852;
}
.navigation a .name {
	transition: .6s;
	opacity: 0;
}
.navigation a.active .name, .navigation a:hover .name  {
	opacity: 1;
}
.projets .intro, .inspirations .intro, .equipe .intro {
	background-size: cover;
	height: 100vh;
	min-height: 600px;
	position: relative;
	color: #fff;
	background: #2e2d30;
	opacity: 0;
	animation: loadBG 3s ease forwards;
}
.projets .intro h1, .inspirations .intro h1, .equipe .intro h1, .page-media .intro h1 {
	line-height: 24px;
	line-height: 21px;
    font-size: 16px;
	font-weight: 100;
}
.projets .baseline {
	width: 380px;
	opacity: 1;
}
.projets .intro .content, .inspirations .intro .content, .equipe .intro .content {
	bottom: 30%;
	width: 35%;
	transform: translateX(-50%);
	left: 50%;
}
.projets .projet {
	display: flex;
	transition: .5s;
}

.projets .img.img-1 {
	width: 950px;
	margin-bottom: 125px;
}
.projets .mosaic .img-pattern-1 {
	right: -35px;
	top: -35px;
	left: inherit;
}
.projets .img.img-2 {
	width: 350px;
	margin-left: 150px;
}
.projets .img.img-3 {
	width: 504px;
	margin-left: 50px;
}
/*
.mosaic .img {
	display: none;
}
*/
.mosaic.all .img {
	display: flex;
}
.mosaic.all .hide {
	display: none !important;
}
@keyframes hideImg {
	0% {
		display: flex;
	}
	100% {
		display: none !important;
	}
}

.projets .mosaic .img-container.img-container-4 {
	margin-left: 280px;
	margin-top: 95px;
}
.projets .mosaic .img-pattern-4 {
	left: -35px;
	bottom: -35px;
}
.projets .mosaic .img.img-4 {
	width: 950px;
	margin-top: 0px;
}
.projets .mosaic .img.img-5 {
	width: 640px;
	margin-left: 100px;
	margin-top: 115px;
}
.projets .mosaic .img.img-6 {
	width: 290px;
	margin: 0;
	margin-left: 100px;
	margin-top: 160px;
}
.projets .mosaic .img.img-7 {
	width: 435px;
	margin-left: 75px;
}
.projets .mosaic .img.img-8 {
	width: 440px;
	margin: 60px 0px 60px 75px;
}
.projets .mosaic .img.img-9 {
	width: 453px;
	margin: 0;
	margin-left: 75px;
}
.projets .mosaic .img-pattern.img-pattern-10 {
	left: -35px;
	top: -35px;
}
.projets .mosaic .img-container.img-container-10 {
	margin-top: 50px;
}
.projets .mosaic .img.img-10 {
	width: 550px;
	margin-right: 0px;
	margin-top: 0px;
}
.projets .mosaic .img-pattern.img-pattern-11 {
	right: -35px;
	top: -35px;
	left: inherit;
	width: 240px;
	height: 240px;
}
.projets .mosaic .img-container.img-container-11 {
	margin-top: 50px;
}
.projets .mosaic .img.img-11 {
	width: 690px;
}
.projets .mosaic .img.img-12 {
	width: 470px;
	margin: 105px 0px 0px 0px;
}
.mosaic .img-pattern.img-pattern-12 {
	right: -35px;
	bottom: -35px;
	left: inherit;
	width: 200px;
	height: 200px;
}
.projets .mosaic .img.img-13 {
	width: 590px;
	margin:60px 0px 0px 0px;
}
.projets .mosaic .img.img-14 {
	width: 505px;
	margin: 60px 0px 0px 190px
}
.projets .mosaic .img.img-15 {
	width: 505px;
	margin:60px 0px 0px 0px;
}
.projets .mosaic .img.img-16 {
	width: 505px;
	margin:80px 0px 0px 0px;
}
.projets .mosaic .img.img-17 {
	width: 505px;
	margin:85px 0px 0px 0px;
}
.projets .mosaic .img.img-19 {
	width: 470px;
    margin: 105px 0px 0px 0px;
}
.projets .mosaic .img.img-20 {
	width: 505px;
	margin:100px 0px 0px 0px;
}
.projets .mosaic .img-pattern.img-pattern-18 {
	left: 50%;
	top: -30px;
	width: 450px;
	height: 450px;
	transform: translateX(-50%);
}
.projets .mosaic .img-container.img-container-18 {
	margin-top: 125px;
}
.projets .mosaic .img.img-18 {
	width: 950px;
}
.ss-projets .baseline {
	margin: 0 auto;
}
.ss-projets .intro .content {
	bottom: 50%;
}
/* FICHE PROJETS */
.projets .description {
	background: #696852;
	height: 180px;
	width: 100%;
	display: none;
}
.projets .description.active {
	display: flex;
}
.projets .description h1 {
	color:#19171a;
	font-weight: 300;
	font-size:30px;
	letter-spacing: .2rem;
}

/* REDISGN MOSAIC */
.projets .mosaic.sports .container-sports, .projets .mosaic.education .container-sports {
	max-width: 80%;
	flex: 0 0 100%;
	margin: 0 auto;
}
.projets .mosaic.sports .img.img-16 {
	width: 100%;
}
.projets .mosaic.education .projet-education {
	width: 70%;
}
.projets .mosaic.culture .projet-culture {
	margin:50px auto;
}
.projets .mosaic.sante .projet-sante {
	margin:50px auto;
}
.projets .mosaic.commerces .projet-commerces {
	max-width: 80%;
	flex: 0 0 100%;
	margin: 0 auto;
}
.projets .mosaic.commerces .img.img-3 {
	width: 80%;
	margin-bottom: 80px;
}
.projets .mosaic.commerces .img.img-17 {
	margin-top: -300px;
}

/* FICHE PROJET */
/*.projet .description {
	position: absolute;
	bottom: 0px;
	width: 100%;
}*/
.projet .container {
	max-width: 80%;
}
.projet .description h1 {
	font-size: 30px;
	letter-spacing: .35rem;
	font-weight: 300;
}
.projet .description h2 {
	font-size: 17px;
	font-weight: 300;
	position: relative;
	margin-bottom: 50px;
}
.projet .description h2::after {
	content: '';
	position: absolute;
	bottom: -25px;
	left: 50%;
	width: 115px;
	transform: translateX(-50%);
	height: 1px;
	background: #62614e;
	transition: .35s;
}
.projet .gallery {
	width: 50%;
}
/* INSPIRATIONS */
.inspirations .intro {
	background:#a05635;
}
.inspirations .baseline {
	width: 600px;
}
@keyframes ReplaceBaseline2 {
	0% {
		width: 100%;
		opacity: 0;
	}
	50% {
		width: 100%;
		opacity: 1;
	}
	100% {
		width: 80%;
		opacity: 1;
	}
}
.inspirations .content .font-weight-bold {
	font-weight: 700;
	font-size: 20px;
}
.inspirations .block {
	position: relative;
}
.inspirations .block p {
	font-size: 17px;
	line-height: 24px;
}
.inspirations .block p.span {
	font-size: 22px;
	line-height: 24px;
}
.inspirations .pattern {
	position: absolute;
	z-index: -1;
	border: 1px solid #000;
}
.inspirations .block-1 {
	width:700px;
	margin-top: 100px;
}
.inspirations .block-1 .pattern {
	right: -35px;
	top: -35px;
	width: 340px;
	height: 340px;
}
.inspirations .block-1 .img {
	width:700px;
}
.inspirations .block-2 {
	width:875px;
	margin-top: 30px;
}
.inspirations .block-2 .img {
	width:500px;
}
.inspirations .block-3 {
	width:800px;
	margin: 80px 0px 0px 160px;
}
.inspirations .block-3 .pattern {
	left: -100px;
	top: -100px;
	width: 280px;
	height: 280px;
}
.inspirations .block-3 .img {
	width:800px;
}
.inspirations .block-4 {
	width:1100px;
	margin: 150px 0px 0px 0px;
}
.inspirations .block-4 .img {
	width:630px;
}
.inspirations .block-5 {
	width:1050px;
	margin: 230px 90px 0px 0px;
}
.inspirations .block-5 .pattern {
	right: 110px;
	top: -70px;
	width: 535px;
	height: 535px;
}
.inspirations .block-5 .img {
	width:725px;
}
/* EQUIPE */
.equipe .intro {
	background:#696852;
}
.equipe .mosaic .img-container.img-container-1 {
	margin-left: 200px;
	margin-top: 60px;
}
.equipe .mosaic .img-pattern-1 {
	top: -35px;
	left: -45px;
	width: 230px;
	height: 230px;
}
.equipe .mosaic .img.img-1 {
	width: 350px;
}
.equipe .mosaic .img-container.img-container-2 {
	margin-left: 110px;
	margin-top: 140px;
}
.equipe .mosaic .img-pattern-2 {
	bottom: -35px;
	right: -35px;
	width: 250px;
	height: 250px;
}
.equipe .mosaic .img.img-2 {
	width: 250px;
}
.equipe .mosaic-equipe .img {
	width:240px;
	margin: 0px;
	position: relative;
}
.equipe .mosaic-equipe .mask {
	position: absolute;
	width: 100%;
	height: 100%;
	background:#696852d3;
	opacity: 0;
	visibility: hidden;
	display: flex;
	flex-flow: column;
	justify-content: center;
	transition:.6s;
	text-align: left;
	color: #fff;
	font-size: 20px;
	padding: 20px;
}
.equipe .mosaic-equipe .mask.mask-partenaire {
	background:#e0e0deda;
	color: #62614e;
}
.equipe .mosaic-equipe .mask h2 {
	font-size: 16px;
    font-weight: 700;
}
.equipe .mosaic-equipe .mask p {
	font-size: 14px;
    font-weight: 300;
	line-height: 20px;
}
.equipe .mosaic-equipe .img:hover .mask {
	opacity: 1;
	visibility: visible;
}
.equipe .mosaic .img.img-3 {
	margin-top: 100px;
}
.equipe .mosaic .img.img-4 {
	margin-top: 25px;
	margin-left: 50px;
}
.equipe .mosaic .img.img-5 {
	margin-top: 65px;
	margin-left: 20px;
}
.equipe .mosaic .img.img-7 {
	margin-top: 110px;
	margin-left: 30px;
}
.equipe .mosaic .img.img-8 {
	margin-top: -20px;
}
.equipe .mosaic .img.img-9 {
	margin-top: 50px;
	margin-right: 40px;
}
.equipe .mosaic .img-container.img-container-10 {
	margin-right: 35px;
	margin-top: 20px;
}
.equipe .mosaic .img-pattern-10 {
	bottom: -35px;
	left: -25px;
	width: 200px;
	height: 200px;
}
.equipe .mosaic .img.img-11 {
	margin-top: 130px
}

.equipe .mosaic .img.img-12 {
	margin-top: -50px;
}
.equipe .mosaic .img.img-13 {
	margin-top: 15px;
	margin-right:50px;
}
.equipe .mosaic .img.img-14 {
	margin-top: -15px;
}
.equipe .mosaic .img.img-15 {
	margin-top: 70px;
	margin-left:30px;
}
.equipe .mosaic .img.img-16 {
	margin-top: -120px;
}
.equipe .mosaic .img.img-17 {
	margin-top: 45px;
}
.equipe .mosaic .img.img-18 {
	margin-top: -65px;
	margin-right: 60px;
}
.equipe .mosaic .img.img-19 {
	margin-top: 75px;
}
.equipe .mosaic .img.img-20 {
	margin-top: -50px;
}
.equipe .mosaic .img.img-21 {
	margin-top: 60px;
}
.equipe .mosaic .img.img-22 {
	margin-top: -22px;
	margin-right: 40px;
}
.equipe .mosaic .img.img-23 {
	margin-top: 110px;
	margin-left: 20px;
}
.equipe .mosaic .img-container.img-container-24 {
	margin-right: 35px;
	margin-top: 20px;
}
.equipe .mosaic .img-pattern-24 {
	bottom: -100px;
	right: -55px;
	width: 250px;
	height: 250px;
}
.equipe .mosaic .img.img-24 {
	margin-top: 20px;
}
.equipe .mosaic .img.img-25 {
	margin-top: 75px;
}
.equipe .mosaic .img.img-26 {
	margin-top: -50px;
}
.equipe .mosaic .img.img-27 {
	margin-top: -120px;
}
/* CONTACT */
.contact .baseline {
	width: 400px;
}
.contact .intro {
	background: #ecebec;
}
.contact .intro .content {
	color: #2e2d2f;
}
.contact form {
	width: 80%;
}
.contact .adresse {
	font-size: 18px;
	font-weight: 700;
}
.contact .numero {
	font-size: 28px;
	font-weight: 700;
	margin: 10px 0px;
}
.contact .mail {
	font-size: 18px;
	font-weight: 700;
}
.contact label {
	margin: 10px 0px;
}
.contact input, .contact textarea {
	height: 40px;
	border-radius: 0px;
	border: 1px solid #000;
}
.contact textarea {
	min-height: 150px;
}
.contact .btn {
	height: 50px;
	text-transform: uppercase;
	background:#2e2d30;
	color: #fff;
	border-radius: 0px;
	margin: 30px auto 10px auto;
	transition: .6s;
	border: none;
	width: 180px;
}
.contact .btn:hover {
	background:#696852;
}
/* MEDIA */
.page-media .baseline {
	width: 350px;
}
.page-media p {
	font-size: 17px;
	line-height: 24px;
}
/* MENTIONS LEGALES */
.mentions .intro {
	padding-top: 200px;
}
.mentions .intro {
	min-height: 100vh;
	height: auto;
}
/* FOOTER */
footer {
	background: #2e2d30;
	height: 150px;
}
footer .mentions {
	transition: .6s;
}
footer .mentions:hover {
	color: #fff;
}
footer .dot {
	width: 6px;
	height: 6px;
	display: block;
	margin:0 30px;
	border-radius: 50%;
}
footer .telephone {
	font-size: 22px;
	font-weight: 700;
}
footer .mail {
	font-weight: 700;
}
/* MENU */
.button_container {
	position: absolute;
	right: 0px;
	height: 27px;
	width: 35px;
	cursor: pointer;
	z-index: 2000;
	transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
	transform: translateY(11px) translateX(0) rotate(45deg);
	background: #000;
	z-index: 2000;
}
.button_container.active .middle {
	opacity: 0;
	background: #FFF;
}
.button_container.active .bottom {
	transform: translateY(-11px) translateX(0) rotate(-45deg);
	background: #000;
	z-index: 2000;
}
.button_container span {
	background: #fff;
	border: none;
	height: 3px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .35s ease;
	cursor: pointer;
}
.button_container span:nth-of-type(2) {
	top: 11px;
}
.button_container span:nth-of-type(3) {
	top: 22px;
}
.overlay {
	position: fixed;
	background: rgba(237, 236, 236, 0.95);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s, visibility .35s, height .35s;
	overflow: hidden;
	z-index: 1000;
}
.overlay.open {
	opacity: 1;
	visibility: visible;
	height: 100%;
}
.overlay.open li {
	animation: fadeInRight .5s ease forwards;
	animation-delay: .35s;
	letter-spacing: .2rem;
}
.overlay.open li:nth-of-type(2) {
	animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
	animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
	animation-delay: .50s;
}
.overlay .logo {
	border-right: 1px solid #6a696b;
	padding-right: 90px;
	margin-right: 90px;
}
.overlay nav {
	position: relative;
	/* height: 70%;
	top: 50%;
	transform: translateY(-50%); */
	font-size: 25px;
	line-height: 25px;
	font-weight: 300;
	text-align: left;
	text-transform: uppercase;
}
.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	position: relative;
	height: 100%;
}
.overlay ul li {
	display: block;
	/*height: 25%;
	height: calc(100% / 4);
	min-height: 50px;*/
	position: relative;
	opacity: 0;
	margin-bottom: 20px;
}
.overlay ul li a {
	position: relative;
	color: #2d2c30;
	text-decoration: none;
	overflow: hidden;
	transition: .6s;
	font-weight: 100;
}
.overlay ul li a:hover {
	color: #2d2c3065;
}
.overlay ul li a.active {
	font-weight: 700;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
	width: 100%;
}
.overlay ul li a:after {
	/* content: '';
	position: absolute;
	bottom: 13px;
	left: 50%;
	width: 0%;
	transform: translateX(-50%);
	height: 1px;
	background: #2d2c30;
	transition: .35s; */
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		left: 20%;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.reveal-loaded .reveal [class*="reveal-"] {
    opacity: 1!important;
    transform: translateY(40px)!important;
    transition: 0s!important;
}

.reveal-loaded [class*="reveal-"]{
    transition: 2s cubic-bezier(.5, 0, 0, 1);
}

.reveal-loaded  .reveal-2 {
    transition-delay: .2s;
}

.reveal-loaded .reveal-3 {
    transition-delay: .4s;
}

.reveal-loaded .reveal-4 {
    transition-delay: .6s;
}

#svgContainer {
	max-width: 100%;
	max-height: 100%;
	background-image: linear-gradient(70deg, #f0f0f0 10%, #ffffff 100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
}


@keyframes outline {
  from {
    stroke-dasharray: 0, 3.1416 * 55px * 2;
  }
  to {
    stroke-dasharray: 3.1416 * 55px * 2, 3.1416 * 55px * 2;
  }
}

#outline {
  animation: .38s ease-in outline;
  transform: rotate(0deg);
  transform-origin: center;
}

@keyframes circle {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}

#white-circle {
  animation: .35s ease-in .35s forwards circle;
  transform: none;
  transform-origin: center;
}

@keyframes check {
  from {
    stroke-dasharray: 0, 75px;
  }
  to {
    stroke-dasharray: 75px, 75px;
  }
}

#check {
  animation: .34s cubic-bezier(0.65, 0, 1, 1) .8s forwards check; 
  stroke-dasharray: 0, 75px;
}

@keyframes check-group {
  from {
    transform: scale(1);
  }
  
  50% {
    transform: scale(1.09);
  }
  
  to {
    transform: scale(1);
  }
}

#check-group {
  animation: .32s ease-in-out 1.03s check-group;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .reveal [class*="reveal-"] {
        opacity: 1!important;
        transform: translateY(0px)!important;
    }
    [class*="reveal-"]{
        transition-duration: 0s!important;
        transition-delay: 0s!important;
    }
}
@media screen and (max-width:1200px) {
	.homepage .mosaic .img.img-2 {
		width: 180px;
	}
	.homepage .mosaic .img.img-3 {
		width: 300px;
	}
	.homepage .mosaic .img.img-7 {
		margin-left: 0px;
	}
	.homepage .mosaic .img-container.img-container-11 {
		margin:60px;
	}
	.homepage .mosaic .img.img-14 {
		width: 350px;
	}

	/* PROJETS */
	.projets .baseline {
		width: 100%;
		max-width: 300px;
	}
	.projet .container {
		max-width: 100%;
	}
	/* INSPIRATIONS */
	.inspirations .baseline {
		width: 100%;
		max-width: 600px;
	}
	/* EQUIPE */
	.equipe .mosaic .img {
		width: 200px;
	}
	/* CONTACT */
	.contact .baseline {
		width: 100%;
		max-width: 600px;
	}
}
@media screen and (max-width:991px) {
	header {
		left: 0px;
		width: 100%;
		padding: 30px 30px;
		position: absolute;
	}
	.button_container {
		right: 30px;
	}
	.projets .intro .content, .inspirations .intro .content, .equipe .intro .content {
		width: 90%;
		bottom: 10%;
	}
	.overlay nav {
		margin-left: 15px;
	}
	.overlay .logo {
		margin-bottom: 30px;
	}
	.mosaic .img {
		width: 100% !important;
		margin: 10px 0px !important;
		padding: 0px 20px;
	}
	.mosaic .img-container {
		margin: 0px !important;
	}
	.mosaic .img-pattern {
		display: none;
	}
	/* EQUIPE */
	.equipe .mosaic-equipe .mask {
		position: relative;
		visibility: visible;
		opacity: 1;
	}
	.equipe .mosaic .img-container {
		width: 100%;
	}
	/* INSPIRATIONS */
	.inspirations .block {
		margin:0px 0px 30px 0px !important;
		padding: 0px 20px;
	}
	.inspirations .mosaic .img {
		padding: 0px;
	}
	.inspirations .pattern {
		display: none;
	}

	/* CONTACT */
	.contact form {
		width: 100%;
	}

	footer {
		height: auto;
		padding: 30px 0px;
	}
	footer .dot {
		margin: 5px auto;
		background: none;
	}


	.homepage .intro .content {
		transform: translate(-50%, -50%);
	}
	.projets .intro .content, .inspirations .intro .content, .equipe .intro .content {
		transform: translate(-50%, -50%);
	}


}
@media screen and (max-width:768px) {
	.overlay .logo {
		padding-right: 0px;
		border-right: 0px;
		position: absolute;
		top: 30px;
		left: 30px;
		margin: 0;
	}
	.homepage .baseline {
		width: 80%;
	}
	@keyframes ReplaceBaseline {
		0% {
			width: 100%;
			opacity: 0;
		}
		50% {
			width: 100%;
			opacity: 1;
		}
		100% {
			width: 80%;
			opacity: 1;
		}
	}
	
	.navigation {
		position: relative;
		top: inherit;
		right: inherit;
		padding: 15px;
		width: 100%;
	}
	.navigation a {
		font-size: 12px;
		letter-spacing: .15rem;
		padding: 3px 0px;
	}
	.navigation a .name {
		opacity: 1;
		margin-left:5px;
	}
	.navigation a {
		margin-left: 10px;
	}
	.navigation a .check {
		width: 10px;
		height: 10px;
	}
}
@media screen and (max-width:576px) {

	.overlay .logo .baseline{
		display: none;
	}
}


.grecaptcha-badge {
	opacity: 0;
}