body {
	margin: 0;
	padding:0;
	font-family: 'Alegreya Sans',sans-serif;
}
header {
	background: url(https://wallpaperaccess.com/full/1614319.jpg);
	text-align: center;
	//padding-top: 25%;
	height: 100vh;
}
img.topleft {
	position: fixed;
	width: 45%;
	left: 0%;
	top:0%;
	animation-name: top_left;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-fill-mode: both;
	z-index: 100;
}
@keyframes top_left {
0%
{
	left: 0;
	top: 0;}

	100% {
	left: -20%;
	top: -25%;
}
}
img.topright {
	position: fixed;
	width: 45%;
	right: 0%;
	top:0%;
	animation-name: top_right;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-fill-mode: both;
	z-index: 100;
}
@keyframes top_right {
0%
{
	right: 0;
	top: 0;
}
	100% {
	right: -20%;
	top: -25%;
}
}
img.bottomleft {
	position: fixed;
	width: 45%;
	left: -20%;
	bottom:-25%;
	animation-name: bottom_left;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-fill-mode: both;
	z-index: 100;
}
@keyframes bottom_left {
0%
{
	left: 0;
	bottom: 0;
}
100% {
	left: -20%;
	bottom: -25%;
}
}
img.bottomright {
	position: fixed;
	width: 45%;
	right: 0;
	bottom:0;
	animation-name: bottom_right;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-fill-mode: both;
	z-index: 100;
}
@keyframes bottom_right {
0%
{
	right: 0;
	bottom: 0;
}
100% {
	right: -20%;
	bottom: -25%;
}
}

nav {
	position: absolute; 
	width: 100%;
	text-align: center;
	top: 30%;
	left: 0;
	opacity: 0;
	animation-name: nav;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-fill-mode: both;
}
@keyframes nav {
0%
{
	opacity: 0;
}
	100% {
	opacity: 1;
}
}
nav ul {
	margin: 0;
	padding:0;
	list-style: none;
}
nav ul a {
	color: white;
	text-decoration: none;
	font-size: 1.5em;
	font-weight: 800;
	display: inline-block;
	padding:20px;
	color: white;
	margin: 2px;
	transition-duration: 0.5s;
	overflow: hidden;
}
li a {
	color: #fff;
}
@keyframes nav {
0%
{
opacity: 0;

}
100% {
opacity: 1;
}
}
@keyframes logo_GERBOR {
0%
{
	//opacity: 1;
	//display: none;
	opacity: 0;
}
	100% {
	//
	opacity: 1;
	display: block;
	//position: relative;
	//z-index: -10;
}
}
img.logo_GERBOR {
	animation-name: logo_GERBOR;
	animation-duration: 1.5s;
	animation-delay: 3s;
	animation-fill-mode: both;
	//position: relative;
	//z-index: -10;
}
nav a::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	background: yellow;
	transition-duration: 0.5s;
	//margin: 0 auto;
	transform: translate(30px, -5px) rotate(45deg);
}
nav a:hover::after{
	transform: translate(10px, -5px) rotate(45deg);
}
nav a:hover{
	color: white;
}
nav a:before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	background:  blue;
	transition-duration: 0.5s;
	//margin: 0 auto;
	transform: translate(-30px, -5px) rotate(45deg);
}
nav a:hover::before{
	transform: translate(-10px, -5px) rotate(45deg);
}

img.fb {
		width: 30px;
		height: 30px;
}

img.inst {
		width: 30px;
		height: 30px;
}

div.FORMULE div.left {
background: #f9f7f8;
width: 50%;
float: left;
position: relative;
padding-bottom: 130px;
}
div.FORMULE div.right {
width: 50%;
float: right;
}
div.FORMULE h2{
color: ff212b;
transform: rotate(-90deg);
position: absolute;
top:400px;
letter-spacing: 3px;
font-weight: 800;
}

img.logo2_gerbor {
	width: 450px;
	padding-left: 180px;
	padding-top: 100px;
}

div.FORMULE h3 {
padding-left: 200px;
padding-right: 200px;
padding-top: 30px;
color: #e42529; 
font-size: 1,5em;
font-weight: 800;
line-height: 1em;
}

div.FORMULE p {
padding-left: 200px;
padding-right: 100px;
color: black; 
}

div.FORMULE div.right div {
margin: 300px auto;
width: 100%;
height: 600px;
background: url(img/GERBOR.gif);
background-position: center;
background-repeat: no-repeat;
}
div.FORMULE {
	overflow: hidden;
}
div.fon1 {
	height: 700px;
	background: url(img/ambiance-10.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
}
div.MENU {
	position: relative;
	background:#f9f7f8;
	padding-top: 500px;
	padding-bottom: 100px;
    padding-left: 200px;
}

img.pic1  {
width: 60%;
position: absolute;
right: 0;
top: -200px;
box-shadow: -10px 10px 0 #009cd9;

}

img.pic2 {
width: 30%;
position: absolute;
right: 40%;
top: -50px;
box-shadow: -10px 10px 0 #f3e93c;
}


div.fon2 {
	height: 500px;
	background: url(img/img-mobile-8.jpg);
	background-size:100% ;
	background-repeat: no-repeat;
	background-position: left center;
}


a.button {
	display: block;
	margin-left: 250px;
	width: 220px;
	padding: 10px;
	text-decoration: none;
	font-weight: 600;
	color: #395442;
	font-size: 1.2em;
	border: 2px solid #395442;
	text-align: center;
	position: relative;
	overflow: hidden;
}
a.button::before {
	content: "Visitez notre page Facebook";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background:#395442;
	text-align: center;
	color: #f2e3b4;
	padding-top: 10px;
	transform: translateX(-300px);
	transition-duration: 1s;
}

a.button:hover::before {
   transform: translateX(0);
}
div.LIDEE h3 {
	font-size: 1.7em;
	margin-left: 200px;
	margin-top: 50px;
}
div.LIDEE div.box {
	float: left;
	width: 15%;
	//margin-right: calc((40% - 500px)/4);
	height: 200px;
	margin: 5%;
}

 div.LIDEE div.box:first-child {
	//margin-left: 250px;
}
 div.LIDEE div.box:last-child {
	//margin-right:  250px;
}
div.LIDEE div.box p {
	margin: 0;
	padding: 0;
	width: 100%;
}
div.conteiner{
overflow: hidden;
padding-bottom: 200px;
}

div.LIDEE h4 {
	color: black;
	font-weight: 600;
	font-size: 1.6em;
	margin-bottom: 0;

}

div.fon3 {
	height: 500px;
	background: url(img/Kentuki_1.jpg);
	background-size: 100%;
	background-position: left center;
	background-repeat: no-repeat;
}
div.FRIDA {
	position: relative;
	background: #f9f7f8;
	padding-left: 55%;
	padding-bottom: 100px;
}
img.pic5 {
	width: 50%;
	position: absolute;
	left: 0;
	top:-300px;
	box-shadow: -10px 10px 0 #57493c;

}
img.pic6 {
	width: 22%;
	position: absolute;
	left: 50px;
	top:-660px;
	box-shadow: -10px 10px 0 #009cd9;

}

div.MENU p {
	color: black;
	font-size: 1em;
	margin:0;
	padding: 10px 0px;
	padding-top: 0px;
	//padding-bottom: 0;

}
div.FRIDA h2 {
	color: #395442;
	font-weight:800;
	font-size: 12em;
	margin:0;
	padding: 50px 0px;
	//padding-bottom: 0;

}
div.FRIDA p {
	font-weight: 300;
	padding-left: 50px;
	padding-right: 200px;
}

div.FRIDA a {
	margin-left: 0;
	margin-bottom: 200px;
}

div.CONTACT {
	background: url(https://wallpaperaccess.com/full/1614319.jpg);
	padding: 100px 200px;
	padding-left: 25%;
	height: 500px;
	position: relative;
}
img.logo_GERBOR {
	width: 300px;
}
img.logo1 {
	width: 190px;
}
div.CONTACT {

	color: white;
	height: 400px;
}
div.CONTACT div.box {
	float:left;
	width: 20%;
	color: white;
}
b.number {
	font-size: 1.4em;
}
div.CONTACT a {
	color: white;
	text-decoration: none;
	transition-duration: 0.5s;
}
div.CONTACT a:hover {
	color: ;
}

iframe {
    position: absolute;
	right: 100px;
	top: -100px;
	box-shadow: -10px 10px 0 #f3e93c;
	width: 48%;
}


div.lang {
//position: absolute;
//top: -200px;
width: 100%;
text-align: center;
color: white;
}

div.lang a {
text-decoration: none;
color: silver;
margin: 5px;
display: inline-block;
transition-duration: 0.5s;
overflow: hidden;
}

div.lang a::after {
content: "";
display: block;
width: 7px;
height: 7px;
background: #e42529;
transition-duration: 0.5s;
margin: 0 auto;
transform: translate(0,9px) rotate(45deg);
}

div.lang a:hover::after{
transform: translate(0,3px) rotate(45deg);
}

div.lang a:hover{
color: white;
}










div.nets {
position: absolute;
top: 460px;
width: 100%;
text-align: center;
color: white;
}

div.nets a {
text-decoration: none;
color: white;
margin: 5px;
display: inline-block;
transition-duration: 0.5s;
overflow: hidden;
}

div.nets a::after {
content: "";
display: block;
width: 7px;
height: 7px;
background: #e42529;
transition-duration: 0.5s;
margin: 0 auto;
transform: translate(0,9px) rotate(45deg);
}

div.nets a:hover::after{
transform: translate(0,3px) rotate(45deg);
}


a.vfc {
color: #e42529;
font-size: 1,5em;
font-weight: 800;
line-height: 1em;
}


@media screen and (max-width: 1200px){
	img.logo_GERBOR {
    	width: auto;
    	height: 20%;
}
	nav a:before, nav a:after {
		display: none;
	} 
	img.logo_GERBOR {
		width: 250px;
	}
	img.bottomleft, img.bottomright, img.topleft, img.topright {
		display: none;
	}
	div.FORMULE div.left, div.FORMULE div.right {
		float: none;
		width: 100%;
		padding-bottom: 0;
	}
	img.logo2_gerbor {
		width: 50%;
		padding: 100px 25%;
		padding-bottom: 10px;
	}
	div.FORMULE h3 {
		padding: 30px 17%;
	}
	div.FORMULE p {
		width: 65%;
		padding: 10px 0;
		margin: auto;
	}
	div.FORMULE div.right div {
		margin: 0;
	}
	div.fon1 {
		height: 300px;
		background-repeat: no-repeat;
	}
	img.pic1, img.pic2 {
		display: none;
	}
	div.MENU {
		padding-top: 0;
   	padding-bottom: 100px;
   	padding-left: 0;
	}
	h3 {
		padding: 30px 17%;
		padding-bottom: 0;
	}
	div.MENU p {
		width: 65%;
		padding: 10px 0;
		margin: auto;
	}
	div.fon2 {
		height: 300px;
		background-repeat: no-repeat;
	}
	div.LIDEE h3  {
		margin-left: 0;
		text-align: center;
	}
	div.LIDEE div.box:first-child {
		margin-left: 10%;
	}
	div.LIDEE div.box:last-child {
		margin-right: 1%;
	}
	div.LIDEE div.box {
		width: 35%;
		margin: auto 1%;
		margin-left: 10%;
		height: 200px;
	}
	div.fon3 {
		height: 300px;
		background-repeat: no-repeat;
	}
	div.conteiner {
		padding-bottom: 100px;
	}
	img.pic5, img.pic6 {
		display: none;
	}
	div.CONTACT {
		padding: 0;
		text-align: center;
		height: auto;
	}
	div.FRIDA {
		padding-bottom: 0;
	}
	iframe {
		position: static;
		width: 100%;
		height: 380px;
		box-shadow: 0 0 0;
	}
	div.CONTACT div.box {
		float: none;
		margin: auto;
		width: 100%;
		padding-bottom: 50px;
	}
	img.logo1 {
		margin-top: 50px;
	}
}
@media screen and (max-width: 450px){
	
	div.FORMULE h2 {
		display: none;
	}
	div.FORMULE h3, div.MENU h3 {
		padding: 30px 5%;
		padding-bottom: 0;
	}
	div.MENU {
		padding-bottom: 50px;
	}
	div.FORMULE p, div.MENU p {
		width: 90%;
	}
	div.fon1, div.fon2, div.fon3 {
		background-size: 150%;
		background-position: center center;
	}
}
@media screen and (min-aspect-ratio: 1/2) { 
    nav ul a {
    	font-size: 1.2em;
    	margin: 0;
    }
    div.nets {
    	position: static;
    }
    
}