html, body
{
	height: 100%;
	width: 100%;
	padding: 0px;
	margin: 0px;
	color: #000000;
	font-family: "Open Sans",arial,helvetica,sans-serif;
	font-size: 18px;
	font-weight: 300;
}

* {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

h2,h3,h4,h5 {font-family: "Open Sans",arial,helvetica,sans-serif; font-weight: normal; margin: 1em 0px;}

.logo {display: block; margin: 0px auto;}

/*TWIST*/
.twist-r {
	padding: 20px;
	transform: rotate(45deg);
	background-color: rgba(255,255,255,0.25);
	transition: .25s all;
	width: 200px;
	height: 200px;
	position: absolute;
	cursor: pointer;
}

.twist-r:hover, .active {
	background-color: rgba(0,194,255,1);
}

.twist-l {
	transform: rotate(-45deg);
	font-family: "Open Sans Condensed";
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	width: 200px;
	margin: 0px auto;
	font-size: 25px;
	position: absolute;
	left: 0px;
}

.twist-l p {
	margin: 0px;
}

.menu-container {
	width: 1200px; height: 450px; margin: 0px auto; position: relative;
}

/*BANNER*/
.banner {
	background-image: url('images/main-bg.jpg');
	background-size: cover;
	background-position: center center;
	height: 100%;
	min-height: 800px;
    padding: 40px 0px;
}

.title {
	text-align: center;
	color: #fff;
	padding: 75px 0px 0px 0px;
}

h1 {margin: 0px; font-family: "Open Sans Condensed"; font-size: 50px; font-weight: bold; text-align: center; color: #9e9e9e;}
.title>h1 {color: #ffffff;}
h2 {font-size: 40px; text-align: center; margin: 20px 0px 0px 0px;}
h3 {font-size: 35px; text-align: center; margin: 20px 0px 40px 0px; font-family: "Open Sans Condensed";}
.title>p {font-size: 18px; margin: 0px 0px 30px 0px;}

.container {margin: 0px auto; max-width: 900px; padding: 60px 0px 100px 0px;}
.container-400 {margin: 0px auto; width: 400px; padding: 60px 0px;}
.container-500 {margin: 0px auto; width: 500px; padding: 0px 0px;}
.container-800 {margin: 0px auto; width: 800px; padding: 0px 0px;}
.container-1000 {margin: 0px auto; max-width: 1000px; padding: 0px 0px;}
.container-1400 {margin: 0px auto; width: 1400px; padding: 60px 0px;}

ul li {
	margin: 30px 0px;
}

.content {display: none;}
.show {display: block;}

.gray {background-color: #f7f7f7;}

.floater {float: left;}

.grid {float: left;}
.grid-2 {width: 50%;}
.grid-3 {width: 33.33333333%;}
.grid-4 {width: 25%;}
.grid-5 {width: 20%;}

.grid-pad {padding: 0px 10px;}

.frame {
	border-radius: 5px;
	border: 1px solid #d9d9d9;
	background-color: #ffffff;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
}

.frame>div:first-child {
	width: 100%;
	height: 155px;
	background-size: cover;
	border-radius: 5px 5px 0px 0px;
}

.frame>div:first-child img {margin: 0px auto; display: block;}

.frame>div:last-child {
	padding: 40px;
}

.frame>div p {margin: 0px;}

button, .myBtn {
	padding: 30px 40px;
	margin-top: 30px;
	font-size: 20px;
	border-radius: 500px;
	background-color: #008aff;
	color: #ffffff;
	border: 0px solid #ffffff;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
    width: 100%;
}

.pad-10 {padding: 10px;}
.pad-20 {padding: 20px;}

.zf {background-image: url('images/zf-bg.jpg'); padding-top: 30px;}
.oris {background-image: url('images/ori-bg.jpg'); padding-top: 40px;}
.revista {background-image: url('images/ilc-bg.jpg'); padding-top: 45px;}
.cota {background-image: url('images/cota-bg.jpg'); padding-top: 45px;}

.min-height-430 {min-height: 430px;}

.whitebtn {
	background-color: #ffffff;
	color: #26cbff;
}

/*FORM*/
form {
    max-width: 400px;
    margin: 40px auto 0px auto;
}

label {color: #ffffff;}

input, select {
	display: block;
	width: 100%;
	border: 0px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	background-color: transparent;
	margin-bottom: 20px;
	padding: 10px 0px;
	font-size: 15px;
    color: #ffffff;
}

input:focus, select:focus {
	outline: none;
}

.fauxBouton {
	display: block;
	padding: 15px;
	color: #ffffff;
	border-radius: 5px;
	font-size: 18px;
	cursor: pointer;
	font-family: "Open Sans",arial,helvetica,sans-serif;
	text-decoration: none;
}

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

.socialBouton {
	padding: 0px !important;
	width: 40px;
	height: 40px;
	line-height: 40px;
	background-color: #000000;
	text-align: center;
	font-size: 12px;
	margin: 0px 10px 10px 0px;
}

.socialBouton:before {
	color: #ffffff;
}

/*SOCIAL*/
.icon-facebook {background-color: #b1bcd2;}
.icon-twitter {background-color: #9cdfef;}
.icon-linkedin {background-color: #a6d0df;}
.icon-youtube {background-color: #e1adac;}
.icon-instagram {background-color: #b7c7d4;}
.icone-blog {background-color: #9dc0ce;}
.icone-mail {background-color: #9eb6f0;}

.icon-facebook:hover {background-color: #7295d9;}
.icon-twitter:hover {background-color: #42cdef;}
.icon-linkedin:hover {background-color: #5cacc9;}
.icon-youtube:hover {background-color: #e55653;}
.icon-instagram:hover {background-color: #5ea2d9;}
.icone-blog:hover {background-color: #56aed1;}
.icone-mail:hover {background-color: #4878ed;}

[class^="icone-"]:before, [class*=" icone-"]:before {
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    margin-right: 0.2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    margin-left: 0.2em;
	height: 40px;
	line-height: 40px;
}

section, footer {padding: 60px 0px 80px 0px;}
footer ul {list-style-type: none; padding: 0px;}
footer a {text-decoration: none; color: #282828; display: block; font-size: 15px;}
footer li {margin: 10px 0px;}
footer a:hover {text-decoration: underline;}

/*MARGINS & PADDINGS*/
.margeHaut-0 {margin-top: 0px;}
.margeHaut-5 {margin-top: 5px;}
.margeHaut-10 {margin-top: 10px;}
.margeHaut-20 {margin-top: 20px;}
.margeHaut-30 {margin-top: 30px;}
.margeHaut-40 {margin-top: 40px;}
.margeHaut-60 {margin-top: 60px;}
.margeHaut-130 {margin-top: 130px;}

.margeBas-0 {margin-bottom: 0px;}
.margeBas-5 {margin-bottom: 5px;}
.margeBas-10 {margin-bottom: 10px;}
.margeBas-20 {margin-bottom: 20px;}
.margeBas-30 {margin-bottom: 30px;}
.margeBas-40 {margin-bottom: 40px;}
.margeBas-60 {margin-bottom: 60px;}
.margeBas-300 {margin-bottom: 300px;}

.rembourrageHaut-0 {padding-top: 0px;}
.rembourrageHaut-10 {padding-top: 10px;}
.rembourrageHaut-20 {padding-top: 20px;}
.rembourrageHaut-40 {padding-top: 40px;}
.rembourrageHaut-60 {padding-top: 60px;}

.rembourrageBas-0 {padding-bottom: 0px;}
.rembourrageBas-10 {padding-bottom: 10px;}
.rembourrageBas-20 {padding-bottom: 20px;}
.rembourrageBas-40 {padding-bottom: 40px;}
.rembourrageBas-60 {padding-bottom: 60px;}

.centree {
    text-align: center;
}

.bulletinColeur {
    background-color: rgb(203, 124, 0);
    height: 40px;
    padding: 10px 0px 0px 0px;
    font-size: 15px;
    max-width: 250px;
}

#take-to-top {
	position: fixed;
	z-index: 1000;
	bottom: 0px;
	right: -100%;
	text-align: center;
	padding: 30px;
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	transition: .25s all;
	cursor: pointer;
}

#take-to-top:hover {
	background-color: #00c2ff;
}

.on {right: 0px !important;}

@media screen and (max-width: 700px){
    .grid {float: none;}
    
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5 {width: 100%;}
}