/* Copyright © DVN Communication - dvn.fr - Tous droits réservés
Toute reproduction, totale ou partielle, et toute représentation du contenu substantiel de ce document, d’un ou de plusieurs de ses composants, par quelque procédé que ce soit, sans autorisation expresse de DVN Communication, est interdite, et constitue une contrefaçon sanctionnée par les articles L.335-2 et suivants du Code de la propriété intellectuelle.*/

html, body {
	font-family: var(--primary-typo);
	overflow-x: hidden;
}

/*
 * OVERLAY
 */

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: var(--secondary-color);
	-webkit-animation: fadeOut 3s 2s ease 1 normal forwards;
	-moz-animation: fadeOut 3s 2s ease 1 normal forwards;
	animation: fadeOut 3s 2s ease 1 normal forwards;
}

#overlay img {
	opacity: 0;
	-webkit-animation: fadeIn 2.5s 0s ease 1 normal forwards;
	-moz-animation: fadeIn 2.5s 0s ease 1 normal forwards;
	animation: fadeIn 2.5s 0s ease 1 normal forwards;
	transform: scale(0.5);
}

@media (min-width: 992px) {
	#overlay img {
		transform: scale(0.9);
	}
}

@-webkit-keyframes fadeOut {
	0% { opacity: 1; }
	99% { opacity: 0; background-color: rgba(44, 51, 58, 0); }
	100% { opacity: 0; z-index: -1; background-color: rgba(44, 51, 58, 0); }
}

@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

/*
 * HEADER
 */

#header {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	padding-bottom: 150px;
	animation: zoomOut 12s ease forwards;
}

@media (min-width: 992px) {
	#header {
		padding-bottom: 200px;
	}
}

#header-logo {
	padding: 10px 0 15px 0;
	text-align: center;
}

#header-logo img {
	transform: scale(0.5);
}

@media (min-width: 992px) {
	#header-logo {
		text-align: left;
		padding-left: 10%;
	}
	#header-logo img {
		transform: scale(0.6);
	}
}

#header-accroche {
    margin-top: 50px;
	font-family: var(--secondary-typo);
	font-size: 22px;
	color: var(--text-color);
	text-align: center;
	padding: 0 10px;
}

@media (min-width: 992px) {
	#header-accroche {
		font-size: 28px;
	}
}

#header-h1 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -25px;
	border: solid 4px var(--primary-color);
	color: var(--text-color);
	padding: 15px 15px 25px 15px;
	text-align: center;
	width: 92%;
}

@media (min-width: 576px) {
	#header-h1 {
		padding: 25px 55px 40px 55px;
		bottom: -30px;
		width: auto;
		min-width: 550px;
	}
}

#header-title {
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 10px;
}

@media (min-width: 992px) {
	#header-title {
		font-size: 30px;
		font-weight: 800;
	}
}

#header-subtitle {
	font-size: 25px;
	font-weight: 500;
}

@media (min-width: 992px) {
	#header-subtitle {
		font-size: 28px;
	}
}

/*
 * BUTTONS
 */

.btn-custom {
	height: 36px;
	line-height: 36px;
	font-size: 16px;
	color: var(--text-color);
	font-weight: 700;
	background-color: var(--secondary-color);
	padding: 0px 20px 0 6px;
	text-transform: uppercase;
	transition: background-color .2s ease;
	display: inline-block;
}

.btn-custom:hover {
	background-color: var(--primary-color);
	color: var(--text-color);
	text-decoration: none;
}

.btn-custom div {
	float: left;
	height: 36px;
	width: 36px;
	line-height: 36px;
	margin-top: -2px;
	text-align: center;
	transition: transform .4s ease;
	-webkit-transform-origin: center 20.5px;
	-moz-transform-origin: center 20.5px;
	transform-origin: center 20.5px;
	font-size: 22px;
	-webkit-animation: spin 5s ease infinite;
	-moz-animation: spin 5s ease infinite;
	animation: spin 5s ease infinite;
}

.btn-custom:hover div {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	25% { -webkit-transform: rotate(180deg); }
	100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes spin {
	0% { -moz-transform: rotate(0deg); }
	25% { -moz-transform: rotate(180deg); }
	100% { -moz-transform: rotate(180deg); }
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(180deg); }
	100% { transform: rotate(180deg); }
}

/*
 * BROCHURES
 */

@media (max-width: 1199.98px) {
	#logo-bis {
		transform: scale(0.7);
	}
}

#btn-realisations {
	margin-right: 0;
}

@media (min-width: 1400px) {
	#btn-realisations {
		margin-right: 80px;
	}
}

@media (max-width: 1199.98px) {
	#container-side-logo {
		margin-top: -20px;
	}
}

#container-brochure {
	background-color: #eef0ef;
	padding: 0;
}

#blank-top {
	height: 85px;
	background-color: var(--text-color);
}

#brochures {
	margin-top: -60px;
	padding: 0 15px 0 15px;
	position: relative;
	text-align: center;
}

@media (min-width: 768px) {
	#brochures {
		padding: 0 15px 0 120px;
		text-align: left;
	}
}

.brochure {
	width: 270px;
	margin: 0 8px 15px 8px;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

@media (min-width: 768px) {
	.brochure {
		float: left;
		display: block;
		margin: 0 8px 25px 8px;
	}
}

.brochure:hover {
	text-decoration: none;
}

.brochure .trait-rose {
	height: 8px;
	width: 45px;
	background-color: var(--primary-color);
	margin-bottom: 10px;
	margin-top: -1px;
}

.brochure:hover .trait-rose {
	background-color: var(--secondary-color);
}

.brochure h2 {
	color: var(--secondary-color);
	font-weight: 800;
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: none;
	transition: font-size .5s ease;
	text-align: left;
	min-height: 76px;
}

.brochure:hover h2 {
	color: var(--primary-color);
	font-size: 22px;
}

.brochure h2 div {
	font-weight: 500;
	font-size: 16px;
}

#boutons {
	position: absolute;
	bottom: -20px;
	left: 120px;
	padding-left: 8px;
	height: 40px;
}

/*
 * TIMELINE
 */

#timeline {
	overflow: hidden;
}

.timeline-items {
	float: left;
	height: 50px;
	position: relative;
}

.timeline-round-outline {
	width: 18px;
	height: 18px;
	border-radius: 18px;
	border: none;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
}

.timeline-round {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background-color: var(--text-color);
	border: solid 2px var(--secondary-color);
}

.timeline-round-outline.active {
	border: solid 2px var(--primary-color);
}

.timeline-round-outline.active .timeline-round {
	background-color: var(--secondary-color);
}

.timeline-trait {
	position: absolute;
	top: 24px;
	z-index: 1;
	border-bottom: dashed 2px var(--secondary-color);
}

.timeline-content-items {
	float: left;
	text-align: center;
	color: var(--secondary-color);
}

.timeline-title {
	font-size: 19px;
	font-weight: 700;
    display: inline-block;
    border-bottom: solid 3px var(--primary-color);
}

.timeline-date {
	font-size: 18px;
	display: inline-block;
	
}

.timeline-items-mobile {
	position: relative;
}

.timeline-trait-mobile {
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: calc(50% - 1px);
	z-index: 1;
	border-right: dashed 2px var(--secondary-color);
}
/*#boutons {
    visibility:  hidden !important;
}*/