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

body {
	margin: 0;
	font-family: 'Lato', sans-serif;
	color: #555;
}

p {
	color: #555;
	text-align: justify;
}

a {
	text-decoration: none;
	color: #eb7a09;
	font-weight: 800;
}
a:hover {
	color: #f39a00;
}

.container {
	width: 100%;
	margin: 20px 0 20px 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: strech;
}

.containerleft {
	width: 40%;
	/*margin: 25px;*/
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}
.containerright {
	width: 40%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}
@media (max-width: 800px) {
	.container {
		flex-flow: column nowrap;
	}
	.containerleft {
		width: 90%;
		margin: auto;
	}
	.containerright {
		width: 90%;
		margin: auto;
	}
}

.spacer25 {
	height: 25px;
}
.spacer50 {
	height: 50px;
}
.spacer75 {
	height: 75px;
}

/* HEADER */
header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
}
@media (max-width: 800px) {
	header {
		flex-flow: column nowrap;
	}
}

.logo {
	width: 70%;
	max-width: 350px;
	height: auto;
}
.rbq {
	margin-left: 5%;
	margin-right: auto;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
@media (max-width: 800px) {
	.rbq {
		margin-left: auto;
		margin-right: auto;
	}
}

.headerinfo {
	margin-right: 5%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	align-items: center;
}
.headercontact {
	text-align: center;
}
.headercontact p {
	margin-top: -1em;
	font-weight: 400;
}

nav ul {
	list-style: none;
}
nav li {
	display: inline-block;
	padding-right: 15px;
}
nav a {
	font-weight: 600;
}

/* INTRO */
.intro {
	width: 100%;
	height: 60vh;
	background-image: url(img/introback1.jpg);
	background-size: cover;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
}
.intro h1 {
	color: #eee;
	font-weight: 800;
	background-color: #f60;
	padding: 0.5em;
}
.intro h2 {
	color: #eee;
	font-weight: 800;
	background-color: #F60;
	padding: 0.5em;
}

/* À PROPOS */


/* SERVICES */
.services {
	width: 100%;
	background-image: url(img/back1.jpg);
	background-size: cover;
}

/* GARANTIES */
.garanties {
	width: 100%;
	min-height: 500px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
}
.garantiesleft {
	width: 50%;
	min-height: 500px;
	background-image: url(img/garanties.jpg);
	background-position: center;
	background-size: cover;
}
.garantiesright {
	width: 50%;
	/*background-color: #333;*/
	margin-left: 50px;
	margin-right: 50px;
}
.garanties2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.garanties21 {
	width: 40%;
}
@media (max-width: 800px) {
	.garanties{
		height: auto;
		flex-flow: column nowrap;
	}
	.garantiesleft {
		width: 100%;
	}
	.garantiesright {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* FOOTER */
footer {
	width: 100%;
	margin: auto;
	background-color: #333;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
footer p {
	color: #999;
	font-weight: 400;
}
.footercopy {
	margin-left: 5%;
}
.stc {
	width: 150px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.stc img {
	margin-left: 15px;
}
.footergnu {
	margin-right: 5%;
}
.footergnu a {
	color: #999;
	font-weight: 400;
}

/* PAGE GNU */
.gnubody {
	width: 50%;
	margin: auto;
	text-align: justify;
}

.gnu {
	text-align: justify;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.gnu2 {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}

.gnulogo {
	width: 90%;
	max-width: 400px;
	height: auto;
}
.gnustc {
	margin-right: 10%;
}

@media (max-width: 800px) {
	.gnubody {
		width: 90%;
	}
	.gnu2 {
		flex-flow:  column nowrap;
	}
	footer {
		flex-flow: column nowrap;
	}
	.footercopy {
		margin-right: 10%;
		text-align: center;
	}
	.stc {
		margin: auto;
	}
}

/* CONTACT */
.contact {
	/*background-image:url(img/contact-back3.jpg);
	background-size: cover;*/
	padding-top: 50px;
	padding-bottom: 50px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.contactleft {
	padding-right: 100px;
}
.contactright {
	padding-left: 100px;
}
@media (max-width: 800px) {
	.contact {
		flex-flow: column nowrap;
	}
}
.horaire {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	font-weight: 600;
}
.horaire ul {
	list-style: none;
}

.contacttitle {
	max-width: 500px;
	background-color: #F93;
	padding: 20px 0px 20px 0px;
}
.contacttitle h1{
	font-size: 2em; 
	color: #fff; 
}
.carte {
	width: 100%;
}
input {
	/*border-radius: 5px;*/
	border-left: none;
	border-top: none;
	border-right: none;
	border-bottom-style: solid;
	border-bottom-color: #333;
	border-bottom-width: medium;
	padding: 5px;
	border-color: #eee;
}
button {
	border-radius: 15px;
	margin-top: 15px;
	padding: 10px 15px 10px 15px;
	border-style: none;
	background-color: #f60;
	cursor: pointer;
	font-weight: 400;
	font-size: 16px;
	color: #eee;
}

.emlok {
	width: 90%;
	height: 100vh;
	margin: auto;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
.emllogo {
	width: 70%;
	max-width: 350px;
	height: auto;
}

/* Animations */

.animtitle {
	animation-name: text-focus;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animatino-fil-mode: none;
}
@keyframes text-focus {
	0%{
		filter: blur(12px);
		opacity: 0;
	}
	100%{
		filter: blur(0);
		opacity: 1;
	}
}


@media only screen and (max-width: 900px) {
	header img {
		display:  block;
		padding-left: auto;
		padding-right: auto;
		width: 50%;
		height: auto;
	}
}