/*
Theme Name: Cine Fab
Theme URI: http://www.cinefabrique.fr/
Description: Le site institutionnel de la Cine Fabrique.
Version: 2.0
Author: Studio ME_TO

Cine Fab by ME_TO
*/

/* ==========================================================================
BASE DES SECTIONS
========================================================================== */

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

body {
font-family: "lato", Helvetica, Sans-serif;
font-size: 14px;
text-align: left;
background: #fff;
line-height: 1.42857143;
margin: 0;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/*body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
color: #000;
font-size: 18px;
line-height: 3;
}

body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] {
border: 1px solid #ccc;
color: black;
font-size: 16px;
width: 70%;
}*/

#page {
margin: 0 auto 0 auto;
}

img {
vertical-align:middle;
}

h1, h2 {
font-family: "montserrat", Helvetica, Sans-serif;
margin: 0.67em 0;
color: black;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 5px;
}

h1.arrow, h1.arrow2 {
font-size: 15px;
letter-spacing: 1px;
}

h1.arrow2.text-center {
color:#808080!important;
}

span.bg-color {
background: black;
color: white;
}

a {
text-decoration: none;
}

/*a:hover, a:focus {
color: black;
text-decoration: none;
}

p {
color: #b0b1b1;
word-spacing: 1px;
line-height: 25px;
font-size: 14px;
margin: 0 0 10px;
}*/

@font-face {
font-family: 'lato';
src: url('fonts/lato.ttf') format('truetype');
}

@font-face {
font-family: 'MaisonNeue';
src: url('fonts/maisonneue.ttf') format('truetype');
}

@font-face {
font-family: 'merriweather';
src: url('fonts/merriweather.ttf') format('truetype');
}

@font-face {
font-family: 'raleway';
src: url('fonts/raleway.ttf') format('truetype');
}

@font-face {
font-family: 'montserrat';
src: url('fonts/montserrat.ttf') format('truetype');
}

@font-face{
font-family: 'fontawesome';
src: url('fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype');
font-weight: normal;
font-style: normal;
}

::selection {
background-color: black;
color: white;
}

input[type=text] {
border: 0px;
background: transparent;
border-bottom: 1px solid white;
outline: none;
width: 25%;
margin-right: 20px;
padding-bottom: 7px;
color: white;
font-size: 11px;
}

sup {
font-size: 7px;
}

/* ==========================================================================
HEADER
========================================================================== */

header.head-home, header.head-page, header.head-intranet {
position: fixed;
z-index: 1;
top: 0;
width: 100%;
}

header.head-page, header.head-intranet {
position: absolute!important;
}

.head-intranet #logo {
-webkit-transform: scale(0.3)!important;
-moz-transform: scale(0.3)!important;
-o-transform: scale(0.3)!important;
-ms-transform: scale(0.3)!important;
transform: scale(0.3)!important;
margin-left: -80px!important;
margin-top: -90px!important;
}

.head-page #logo {
position: absolute;
background: url('img/header/logo.png') no-repeat;
width: 300px;
height: 314px;
/*-webkit-transform: translateX(-50%) scale(0.6);
-moz-transform: translateX(-50%) scale(0.6);
-o-transform: translateX(-50%) scale(0.6);
-ms-transform: translateX(-50%) scale(0.6);
transform: translateX(-50%) scale(0.6);*/
left: 9.8%;
top: 32px;
margin-left: 0;
margin-top: 0;
}

.animated {
-webkit-animation-name: bounceIn;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-name: bounceIn;
animation-duration: 4s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

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

@keyframes fadeOut{ 
0% {opacity: 1;} 
100% {opacity: 0;} 
}

.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}

@-webkit-keyframes pulse {
0% { -webkit-transform: translateX(-50%) scale(.6); }
/*50% { -webkit-transform: translateX(-50%) scale(.57); }*/
100% { -webkit-transform: translateX(-50%) scale(.57); }
}

@keyframes pulse {
0% { transform: translateX(-50%) scale(.6); }
/*50% { transform: translateX(-50%) scale(.57); }*/
100% { transform: translateX(-50%) scale(.57); }
}

.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}

#logophone {
background: url('img/header/logophone.png') no-repeat;
width: 300px; height: 314px;
display: block;
-webkit-transform: scale(0.07);
-moz-transform: scale(0.07);
transform: scale(0.07);
opacity: .6;
position: fixed;
z-index: 10;
right: 0; top: 0;
margin: -130px -120px 0 0;
}

.head-page .separation {
display: none;
}

.head-page li.index-coucou {
display: block;
}

.head-page li.index-coucou a {
color: #2f297f!important;
}

.head-page li.index-coucou a:hover {
color: #eb6355;
}

.head-page .display {
display: none;
}

.head-intranet #navigation {
margin: 15px 50px 0 0!important;
}

.head-intranet #recherche {
top: 55px!important;
}

.head-intranet #reseaux-sociaux-liens {
top: 100px!important;
}

.head-intranet #langues {
top: 65px!important;
}

#logo {
position: absolute;
background: url('img/header/logo.png') no-repeat;
width: 300px; height: 314px;
-webkit-transform: scale(0.47);
-moz-transform: scale(0.47);
-o-transform: scale(0.47);
-ms-transform: scale(0.47);
transform: scale(0.47);
margin-left: -48px;
margin-top: -5px;
}

#bloc {
width: 100%;
height: 50px;
position: absolute;
background: white;
}

.head-home nav.ordinateur {
position: absolute;
width: 100%;
}

.head-page nav.ordinateur {
float: left;
width: 100%;
background: white;
height: 52px;
position: fixed;
z-index: 10;
/*border-top: 2px solid #2f297f;*/
}

.head-page #navigation {
margin: 12px auto 0;
z-index: 1;
position: relative;
font-size: 14px;
width: auto;
display: table;
float: none;
}

.head-page ul#navigation {
-webkit-padding-start: 0px;
-moz-padding-start: 0px;
padding-start: 0px;
}

nav ul, nav li {
list-style-type: none;
font-weight: bold;
}

.ipad, .iphone, #dl-menu {
display: none;
}

#navigation {
margin: 10px auto 0;
z-index: 1;
position: relative;
font-size: 14px;
width: auto;
display: table;
float: none;
text-align: center;
}

.index-coucou {
display: none;
}

#link1 {width: 165px;}
#link2 {width: 110px;}
#link3 {width: 107px;}
#link4 {width: 140px;}
#link5 {width: 56px;}
#link6 {width: 102px;}
#link7 {width: 112px;}
.head-page #link7 {width: 112px;}
#link8 {width: 160px;}
#link8 a {color: #eb6355 !important;}

.sousmenu {
list-style-type: none;
margin: 0;
padding: 2px 10px 2px 50px;
}

.head-home #navigation p {
color: #2f297f!important;
}

#navigation a, #navigation p {
display: block;
color: white;
text-transform: uppercase;
text-decoration: none;
padding: 4px 8px;
font-family: raleway!important;
}

#navigation p {
margin-top: 0px;
cursor: pointer;
}

.head-page #navigation p {
color: #2f297f;
}

#navigation li {
float: left;
margin-right: 10px;
}

/*.head-page #navigation li {
margin-right: 25px;
}*/

#navigation li:last-child {
margin-right: 0px!important;
}

#navigation li.separation {
color: #2f297f;
margin-top: 3px;
}

#navigation .sousmenu {
font-size: 12px;
display: none;
list-style-type: none;
line-height: 14px;
margin: 0;
padding: 0;
}

#navigation .sousmenu li {
clear: both;
width: auto!important;
text-align: left!important;
padding-right: 10px;
margin-bottom: 4px;
}

#navigation li:hover > .sousmenu {
float: left;
display: block;
background: rgba(255, 255, 255, 1);
width: 176px; height: auto;
padding: 10px;
margin: 10px 0 0 5px;

border: 2px solid #2f297f;
-webkit-box-shadow: 5px 5px 0 white;
-moz-box-shadow: 5px 5px 0 white;
box-shadow: 5px 5px 0 #2f297f;
-webkit-transform: translate(-5px, -5px);
-moz-transform: translate(-5px, -5px);
-ms-transform: translate(-5px, -5px);
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}

.sousmenu a {
color: #2f297f!important;
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
width: auto;
}

.sousmenu a:hover {
color: #eb6355!important;
}

.head-page #langues {
position: absolute;
top: 330px; left: 50px;
width: 200px
}

.head-page #recherche {
display: none;
}

.head-page #reseaux-sociaux-liens {
position: absolute;
top: 355px;
right: 0;
width: 150px;
z-index: 10;
}

.qtranxs-lang-menu-item-es {
display: none!important;
}

#langues {
position: absolute;
top: 82px;
right: 40px;
/*display: none!important;*/
}

#langues a {
color: black!important;
}

ul#menu-langues.menu, ul.sub-menu {
-webkit-padding-start: 0px;
-moz-padding-start: 0px;
-o-padding-start: 0px;
padding-start: 0px;
}

#menu-langues img {
display: none;
}

#menu-langues a {
font-size: 0px;
}

#menu-langues ul, #menu-langues li {
list-style-type: none;
float: left;
padding-right: 5px;
}

li#menu-item-107 a:before {
content: 'FR';
background: white;
display: inline;
padding: 4px;
font-size: 11px;
margin-right: 6px;
}

li#menu-item-108 a:before {
content: 'EN';
background: white;
display: inline;
padding: 4px;
font-size: 11px;
margin-right: 6px;
}

li#menu-item-109 a:before {
content: 'ES';
background: white;
display: inline;
padding: 4px;
font-size: 11px;
}

li#menu-item-107 a:hover:before, li#menu-item-108 a:hover:before, li#menu-item-109 a:hover:before {
opacity: .5;
}

#recherche {
position: absolute;
top: 65px; right: 54px;
width: 25%;
}

#recherche input[type=submit] {
width: 44px; height: 48px;
float: left;
background: url('img/header/btn-search.png') no-repeat;
border: none;
color: rgba(255, 255, 255, 0);
-webkit-transform: scale(0.46);
-moz-transform: scale(0.46);
-o-transform: scale(0.46);
-ms-transform: scale(0.46);
transform: scale(0.46);
cursor: pointer;
margin-top: -7px;
}

#recherche input[type=text] {
width: 85%;
text-transform: none;
margin-right: 0px;
float: right;
}

#reseaux-sociaux-liens {
position: absolute;
top: 115px;
right: 142px;
}

#reseaux-sociaux-liens a {
color: white;
padding-right: 25px;
text-transform: uppercase;
font-weight: bold;
}

#reseaux-sociaux-liens a:last-child {
padding-right: 0px;
}

.fa {
display: inline-block;
font: normal normal normal 14px/1 fontawesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}

.fa-facebook::before {
content:"\f09a";
font-size: 20px;
}

.fa-twitter::before {
content:"\f099";
font-size: 20px;
}

.fa-vimeo-square::before {
content:"\f194";
font-size: 20px;
}

/* ==========================================================================
INDEX
========================================================================== */

.bords {
position: absolute;
z-index: 0;
top: 0;
border: 20px solid white;
border-bottom: 0px;
width: 100%; height: 100%;
display: none;
}

.degrade, .degrade-left {
width: 100%;
height: 150px;
background-image: linear-gradient(black 0%, transparent 100%);
position: fixed;
z-index: -1;
top: 0;
opacity: .8;
}

.degrade-left {
background: linear-gradient(to right, black 0%, transparent 100%)!important;
width: 250px!important;
height: 100%!important;
left: 0!important;
}

/*.flou {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
}*/

.bg {
/*background-size: cover;*/
width: 100%; height: 100%;
position: fixed;
z-index: -2;
top: 0; left: 0;
}

#images1, #images2, #images3, #images4, #images5, #images6, #images7, #images8, #images9, #images10, #images11, #images12, #images13, #images14 { background-size: cover!important; }
#images1 { background: url('img/accueil/bg1.jpg') no-repeat center center; }
#images2 { background: url('img/accueil/bg2.jpg') no-repeat center center; }
#images3 { background: url('img/accueil/bg3.jpg') no-repeat center center; }
#images4 { background: url('img/accueil/bg4.jpg') no-repeat center center; }
#images5 { background: url('img/accueil/bg5.jpg') no-repeat center center; }
#images6 { background: url('img/accueil/bg6.jpg') no-repeat center center; }
#images7 { background: url('img/accueil/bg7.jpg') no-repeat center center; }
#images8 { background: url('img/accueil/bg8.jpg') no-repeat center center; }
#images9 { background: url('img/accueil/bg9.jpg') no-repeat center center; }
#images10 { background: url('img/accueil/bg10.jpg') no-repeat center center; }
#images11 { background: url('img/accueil/bg11.jpg') no-repeat center center; }
#images12 { background: url('img/accueil/bg12.jpg') no-repeat center center; }
#images13 { background: url('img/accueil/bg13.jpg') no-repeat center center; }
#images14 { background: url('img/accueil/bg14.jpg') no-repeat center center; }

#content {
z-index: 2;
}

#liens-index {
position: absolute;
width: 137px;
left: 34px !important; top: 260px;
border-top: 2px solid white;
padding-top: 20px;

/*border: 2px solid white;
padding: 20px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
-webkit-box-shadow: 5px 5px 0 white;
-moz-box-shadow: 5px 5px 0 white;
box-shadow: 5px 5px 0 white;
-webkit-transform: translate(-5px, -5px);
-moz-transform: translate(-5px, -5px);
-ms-transform: translate(-5px, -5px);
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);*/
}

#liens-index a {
clear: both;
float: left;
color: white;
font-weight: bold;
text-transform: uppercase;
padding-bottom: 15px;
/*font-size: 14px;*/
}

#liens-index a:last-child {
padding-bottom: 0px;
}

#liens-index a:hover {
color: #eb6355;
}

#actu-index {
position: absolute;
width: 60%;
bottom: 0;
right: 0;
}

#actu-index article {
position: absolute;
z-index: 1;
width: 30%;
right: 50px;
bottom: 115px;
}

#actu-index .date-event {
text-align: center;
font-weight: bold;
color: black;
}

#actu-index h2 {
color: black;
text-align: center;
font-size: 15px;
margin: 0.83em 0;
letter-spacing: 0;
line-height: 1.1;
}

#actu-index h2::before {
content: '';
border-top: solid 1px black;
display: block;
width: 35px;
margin: 15px auto 16px;
}

#actu-index p {
color: black;
text-align: center;
font-size: 13px;
}

a.btn-ensavoirplus {
/*color: black;
display: block;
text-transform: uppercase;
border: 2px solid black;
padding: 8px;
font-size: 11px;
width: 140px;
text-align: center;
margin: 20px auto 0;
text-decoration: none!important;*/

color: black;
display: block;
text-transform: uppercase;
padding: 8px;
font-size: 11px;
width: 140px;
text-align: center;
margin: 20px auto 0;
text-decoration: none !important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border: 2px solid black;
-webkit-box-shadow: 5px 5px 0 black;
-moz-box-shadow: 5px 5px 0 black;
box-shadow: 5px 5px 0 black;
-webkit-transform: translate(-5px, -5px);
-moz-transform: translate(-5px, -5px);
-ms-transform: translate(-5px, -5px);
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}

a.btn-ensavoirplus:hover {
color: #2f297f;
border: 2px solid #2f297f;
-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}

#actu-index .wcp-carousel-main-wrap {
position: absolute;
z-index: 1;
width: 30%;
right: 50px; bottom: 115px;
}

#actu-index .wcp-carousel-main-wrap article {
position: relative;
z-index: 1;
width: 100%;
right: 0; bottom: 0;
}

#actu-index .wcp-carousel-main-wrap .slick-track a {
-webkit-box-shadow: 5px 5px 0 black;
-moz-box-shadow: 5px 5px 0 black;
box-shadow: 5px 5px 0 black;
border: 2px solid black;
}

#actu-index .slick-dots { bottom: -45px!important; }

/* ==========================================================================
PAGE
========================================================================== */

#background404 {
position: fixed;
background: #ccc;
width: 100%;
left: 0;
top: 0;
height: 100%;
border: 20px solid white;
}

#background404 h6, #background404 p {
color: white;
}

#background404 article {
position: absolute;
text-align: center;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}

#background404 #logo {
position: relative!important;
margin-left: 20px!important;
}

#background404 h6 {
font-size: 30px;
border-bottom: 2px solid white;
width: 40%;
padding-bottom: 30px;
text-align: center;
margin: 0 auto;
font-family: merriweather;
}

#background404 p {
text-transform: uppercase;
margin-top: 40px;
}

#page {
background: white;
}

#base-page .degrade {
display: none;
}

/*.bg-page {
width: 100%;
position: absolute;
z-index: -2;
top: 0; left: 0;
}*/

.bg-page {
width: 100%;
position: absolute;
z-index: -2;
top: 50px;
left: 0;
}

/*.bg-page .flou {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}*/

.bottom-page {
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
width: 100%;
}

.bg-page img {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
height: auto;
}

.image-cropper {
position: fixed;
width: 100%;
height: 350px;
overflow: hidden;
}

/*.image-cropper img:hover {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}*/

.animated2 {
-webkit-animation-name: bounceIn;
-webkit-animation-duration: 40s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-name: bounceIn;
animation-duration: 40s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

@-webkit-keyframes pulse2 {
0% { -webkit-transform: scale(1); }
100% { -webkit-transform: translateX(-20px) translateY(-20px) scale(1.3); }
}

@keyframes pulse2 {
0% { transform: scale(1); }
100% { transform: translateX(-20px) translateY(-20px) scale(1.3); }
}

.pulse2 {
-webkit-animation-name: pulse2;
animation-name: pulse2;
}

/*.attachment-post-thumbnail {
-webkit-animation: blur 30s;
}

@-webkit-keyframes blur {
0%  { -webkit-filter: blur(0px); }
100% { -webkit-filter: blur(10px); }
}*/

.content {
position: relative;
width: 100%;
/*z-index: 10;*/
float: left;
background: white;
margin: 400px 0 120px 0;
padding: 20px 0 120px;
border-bottom: 5px solid #2f297f;
/*box-shadow: 0 3px 5px rgba(0, 0, 0, .2)*/
}

.gauche {
float: left;
width: 15%;
margin: 42px 0 0 5%;
color: #ccc
}

.gauche h2, .droite h2 {
font-size: 15px;
letter-spacing: 0;
line-height: normal;
width: 60%;
color: black;
}

.img-parcours {
width: 60%!important;
margin: 50px auto 0px;
display: block;
}

.droite #recherche {
position: relative;
top: 0;
right: 0;
width: 100%;
float: left;
margin-bottom: 20px;
}

.droite #recherche h2 {
width: 100%;
}

.droite #recherche input[type=submit] {
background: url('img/pages/btn-search.jpg') no-repeat;
float: right;
}

.droite #recherche input[type=text] {
border-bottom: 3px solid #ccc;
color: #2f297f;
width: 78%;
float: left;
margin-right: 5%;
margin-top: -1px;
}

.droite #recherche input[type=text]:focus {
border-bottom: 3px solid #2f297f;
}

#mots-cles svg {
margin-top: 15px;
width: 100%;
padding: 8%;
/*box-shadow: 5px 5px 0 #2f297f;
border: 3px solid #2f297f;*/
}

#mots-cles span {
display: inline-block;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}

.cmn-t-translate-bshadow {
background-color: none;
border: 3px solid #ccc;
-webkit-box-shadow: 5px 5px 0 #ccc;
-moz-box-shadow: 5px 5px 0 #ccc;
box-shadow: 5px 5px 0 #ccc;
-webkit-transform: translate(-5px, -5px);
-moz-transform: translate(-5px, -5px);
-ms-transform: translate(-5px, -5px);
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}

.cmn-t-translate-bshadow:hover {
color: #fff;
-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}

.gauche .liens-sidebar {
float: left;
margin-bottom: 40px;
}

.gauche .liens-sidebar h2:first-child {
border-bottom: 3px solid #ccc;
padding-bottom: 30px;
width: 100%;
margin-bottom: 48px;
}

.liens-sidebar a.saut {
margin-top: 10px;
}

.share-sidebar, .contact-sidebar {
margin-bottom: 40px 
}

.share-sidebar img {
cursor: pointer;
}

.share-sidebar img.twit {
margin-left: 10px;
vertical-align: -3px;
}

.contact-sidebar img {
width: 100%;
}

.contact-sidebar a {
color: #ccc!important;
}

.contact-sidebar a:hover, .liens-sidebar a:hover {
color: #2f297f!important;
}

.liens-sidebar a {
clear: both;
float: left;
text-transform: uppercase;
color: #ccc;
line-height: 25px;
font-weight: bold;
}

.liens-sidebar a:first-child {
margin-top: 5px;
}

.centre {
float: left;
width: 47%;
margin-left: 4%;
margin-top: 15px
}
.content article ul {
border-left: 3px solid #2f297f!important;
padding-left: 25px!important;
list-style: none!important;
}

.centre img {
width: 100%;
height: auto;
}

.col3 {
width: 25%;
float: left;
margin-right: 10%;
text-align: left;
}

.col3:last-child {
margin-right: 0%!important;
}

.team {
width: 45%;
text-align: center;
float: left;
margin-right: 2.5%;
}

.team img {
-webkit-filter: grayscale(1);
-o-filter: grayscale(1);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ?.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-ms-filter: grayscale(1);
}

.team h3 {
font-weight: normal!important;
text-transform: uppercase;
font-size: 12px;
font-style: normal!important;
color: black!important;
}

.team p {
font-size: 11px;
margin: -5px 0 25px;
line-height: 12px;
color: #676767;
}

.content h1 {
font-weight: 700;
font-size: 25px;
margin: 37px 0 50px 0;
line-height: 1.2;
color: #2f297f;
border-bottom: 3px solid #2f297f;
padding-bottom: 20px;
text-transform: uppercase;
letter-spacing: 5px;
font-family: raleway!important;
width: 100%;
text-align: left!important;
clear: both;
}

.content a.btn-ensavoirplus {
color: #2f297f!important;
font-weight: bold!important;
width: 190px!important;
float: right!important;
text-decoration: none !important;
margin: 20px 0 40px 20px!important;
padding: 10px!important;

display: inline-block;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border: 2px solid #2f297f;
-webkit-box-shadow: 5px 5px 0 #2f297f;
-moz-box-shadow: 5px 5px 0 #2f297f;
box-shadow: 5px 5px 0 #2f297f;
-webkit-transform: translate(-5px, -5px);
-moz-transform: translate(-5px, -5px);
-ms-transform: translate(-5px, -5px);
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}

.content a.btn-ensavoirplus:hover {
/*color: white!important;
background: #2f297f!important;
border: 2px solid #2f297f!important;*/

-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}

.content article {
text-align: justify;
}

.content article h3 {
color: black;
text-transform: uppercase;
clear: both;
margin-top: 30px;
}

.content article p {
clear: both;
}

.content article ul {
-webkit-padding-start: 17px;
-moz-padding-start: 17px;
padding-start: 17px;
margin: 15px 0 15px;
}

.content article a {
color: blue;
border-bottom: 2px solid blue;
padding-bottom: 1px;
}

.content article a:hover {
color: #2f297f;
}

.content article a.noline {
border-bottom: 0px!important;
}

.content article.documentation {
width: 47%!important;
float: left!important;
margin-right: 6%;
}

.content article.documentation:nth-child(2n+1) {
margin-right: 0%!important;
}

.box {
/*-webkit-transform: translateY(200px);
-moz-transform: translateY(200px);
transform: translateY(200px);*/
-webkit-animation: moveUp 0.65s ease forwards;
-moz-animation: moveUp 0.65s ease forwards;
animation: moveUp 0.65s ease forwards;
width: 47%;
float: left;
margin-right: 6%;
margin-bottom: 6%;
}

.box:nth-child(2n+1) {
margin-right: 0%!important;
}

@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@-moz-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

.card {
overflow: hidden;
padding-left: 3px;
}

.card a {
color: black;
}

.card h2 {
font-weight: bolder;
width: auto;
color: #2f297f;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.09em;

opacity: 0;

-webkit-transform: translate3d(0, 16px, 0);
-moz-transform: translate3d(0, 16px, 0);
-ms-transform: translate3d(0, 16px, 0);
transform: translate3d(0, 16px, 0);

-webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
-moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
-o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.card:hover h2 {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.card--loaded {
opacity: 1;
}

.card-image img {
height: auto;
}

.title-centered {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
top: 0px;
opacity: 0;
}

.title-centered:hover {
opacity: 1;
-webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-moz-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-o-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.table {
display: table;
width: 100%;
height: 100%;
border-spacing: 0;
}

.table:hover {
background: rgba(255,255,255,0.8);
}

.table-cell {
padding: 22px 30px;
opacity: 0;
position:relative;

display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
height: 100%;
}

.card:hover .table-cell {
opacity: 1;

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.galerie-photo h5 {
text-transform: uppercase;
margin-top: 20px;
margin-bottom: -12px;
text-align: center;
}

.galerie-photo h3 {
text-align: center;
font-size: 13px;
}

.galerie-photo h3, .galerie-photo h5 {
text-align: left!important;
}

.galerie-photo img {
border: 0px !important;
width: 95%;
}

.wpcf7 p {
float: left;
width: 47%;
clear: none!important;
margin-right: 6%;
}

.wpcf7 p:nth-child(2n+1) {
margin-right: 0%!important;
}

.wpcf7 input {
border-bottom: 2px solid black;
border-top: none;
border-left: none;
border-right: none;
width: 100%;
color: black;
margin-right: 0;
padding-bottom: 7px;
outline: none;
}

.wpcf7 textarea {
outline: none;
padding: 10px;
resize: none;
margin-top: 23px;
border: 2px solid black;
}

.wpcf7 input:focus, .wpcf7 textarea:focus {
border-color: #2f297f;
}

.wpcf7 input[type=submit] {
cursor: pointer;
color: black;
text-transform: uppercase;
/*border: 2px solid black;*/
padding: 8px;
font-size: 11px;
width: 140px;
background: white;
float: right;

display: inline-block;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border: 2px solid black;
-webkit-box-shadow: 5px 5px 0 black;
-moz-box-shadow: 5px 5px 0 black;
box-shadow: 5px 5px 0 black;
-webkit-transform: translate(-5px, -5px);
-moz-transform: translate(-5px, -5px);
-ms-transform: translate(-5px, -5px);
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}

.wpcf7 input[type=submit]:hover {
/*color: #2f297f;
background: white;
border: 2px solid #2f297f;*/

-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}

div.wpcf7 img.ajax-loader {
border: none;
vertical-align: middle;
margin-right: 14px;
height: 15px;
margin-top: 11px;
width: auto;
float: right;
}

div.wpcf7-mail-sent-ok {
clear: both;
width: 170px!important;
float: right;
margin-top: -160px!important;
margin-left: 0px!important;
border: none!important;
padding: 0!important;
color: #2f297f;
text-align: right;
font-weight: bold;
}

.droite {
float: left;
width: 20%;
margin: 42px 0 0 5%;
}

/*.newsletter {
display: none;
}*/

.newsletter li {
margin-top: 50px;
list-style: none;
}

.newsletter input[type="text"] {
border-bottom: 3px solid #ccc;
color: #2f297f;
width: 78%;
padding-bottom: 10px;
text-transform: none;
float: left;
margin-right: 0px!important;
}

.newsletter input[type="text"]:focus {
border-bottom: 3px solid #2f297f;
}

.newsletter input[type="submit"] {
display: inline-block;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border: 2px solid #ccc;
-webkit-box-shadow: 5px 5px 0 #ccc;
-moz-box-shadow: 5px 5px 0 #ccc;
box-shadow: 5px 5px 0 #ccc;
-webkit-transform: translate(-5px, -5px);
-moz-transform: translate(-5px, -5px);
-ms-transform: translate(-5px, -5px);
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
background: none;
padding: 7px 10px;
color: #ccc;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
float: right;
}

.newsletter input[type="submit"]:hover {
-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}

.response {
font-size: 10px;
margin-top: 50px;
color: #ccc;
}

.sidebar {
}

.whistles {
font-family: lato, Helvetica, sans-serif!important;
}

.whistles-toggle .whistle-title, .whistles-accordion .whistle-title {
color: white!important;
background: #2f297f!important;
border: 1px solid white!important;
font-family: lato, Helvetica, sans-serif!important;
}

.whistles-toggle .whistle-content, .whistles-accordion .whistle-content {
border: none!important;
padding: 40px!important;
color: black!important;
}

.whistle-content strong {
color: #2f297f!important;
}

/* ==========================================================================
PRE INSCRIPTION
========================================================================== */

.gform_title {
display: none;
}

.gform_body {
clear: both;
}

.gform_body input {
border-bottom: 2px solid #ccc;
color: black!important;
padding-bottom: 5px!important;
margin-top: 5px!important;
}

#field_1_2, #field_1_3,
#field_1_4, #field_1_5,
#field_1_7, #field_1_8,
#field_1_10, #field_1_18 {
width: 47%!important;
float: left;
clear: none;
}

#field_1_4, #field_1_7, #field_1_10 {
clear: both!important;
}

#field_1_9 {
margin-top: 120px;
}

.bas_input {
margin-top: 40px!important;
position: absolute;
text-transform: none;
font-size: 10px!important;
font-weight: normal;
width: 19%!important;
}

#input_1_2, #input_1_3,
#input_1_4, #input_1_5,
#input_1_7, #input_1_8,
#input_1_10, #input_1_18 {
width: 92%!important;
}

#input_1_6, #input_1_9_1, #input_1_9_2, #input_1_13 {
width: 90.5%!important;
}

#input_1_9_3, #input_1_9_5 {
width: 89.5%!important;
}

.gform_body input[type="radio"] {
margin-left: 1px!important;
margin-right: 13px;
}

.gform_body input[type="radio"]:not(:checked), .gform_body input[type="radio"]:checked{display:none;}

.gform_body input[type="radio"]+label {
display:block;
margin:2px;
}

.gform_body input[type="radio"]+label:before {
content:"";/* pour que le bouton soit visible*/
display:inline-block;
width:15px;
height:15px;
background-color:white;
border:2px solid #2f297f;
border-radius:0px;
vertical-align: -3px!important;
}

.gform_body input[type="radio"]+label:hover:before {
background-color: #2f297f;
}

.gform_body input[type="radio"]:checked+label:before {
background-color: #2f297f;
}

.gform_body input[type="radio"]:disabled+label:before {
background-color:#999;
border:2px solid #333;
}

.gform_footer input[type="submit"] {
color: #2f297f!important;
font-weight: bold!important;
/*border: 2px solid #2f297f!important;*/
float: right!important;
text-decoration: none !important;
margin: 20px 0 40px 20px!important;
padding: 10px!important;
background: white!important;
outline: none!important;
cursor: pointer;
text-transform: uppercase;
font-size: 11px!important;

display: inline-block;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border: 2px solid #2f297f;
-webkit-box-shadow: 5px 5px 0 #2f297f;
-moz-box-shadow: 5px 5px 0 #2f297f;
box-shadow: 5px 5px 0 #2f297f;
-webkit-transform: translate(-5px, -5px);
-moz-transform: translate(-5px, -5px);
-ms-transform: translate(-5px, -5px);
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}

.gform_footer input[type="submit"]:hover {
/*background: #2f297f!important;
color: white!important;*/

-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}

.gform_body span {
width: 47%!important;
margin-bottom: 15px;
}

.gform_body span label, .gfield_description {
color: #2f297f!important;
font-size: .875em!important;
margin-bottom: 0px!important
}

.gform_body label, .gfield_description, .gsection_title {
color: black;
text-transform: uppercase;
clear: both;
font-weight: bold!important;
font-family: "lato", Helvetica, Sans-serif!important;
}

.gform_body label, .gsection_title {
font-size: 1.17em!important;
margin-bottom: 1em!important;
}

.gform_body select {
border: 2px solid #2f297f!important;
border-radius: 0px!important;
background: white;
margin-top: 15px;
padding: 5px!important;
outline: none!important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 11px!important;
color: #2f297f;
background: url("img/pages/select.png") no-repeat scroll 94% center;
}

.gfield_label {
margin: 0!important;
}

.gfield_required {
display: none!important;
}

.gform_wrapper .gsection {
border-bottom: none!important;
}

.gsection {
margin-bottom: 0px!important;
}

.instruction {
font-size: .688em!important;
margin-top: .25em!important;
color: #B7B7B7!important;
width: 92%!important;
white-space: nowrap!important;
}

#input_1_1_2_container {
float: left;
}

#input_1_1_3_container {
float: left;
clear: both;
}

#input_1_1_6_container {
float: left;
}

.ginput_container_radio {
margin-top: 15px!important;
}

#label_1_14_0, #label_1_14_1,
#label_1_15_0, #label_1_15_1, #label_1_15_2, #label_1_15_3, #label_1_15_4,
#label_1_16_0, #label_1_16_1,
#label_1_17_0, #label_1_17_1, #label_1_17_2, #label_1_17_3, #label_1_17_4, #label_1_17_5, #label_1_17_6  {
font-size: 14px!important;
text-transform: none!important;
clear: none!important;
font-weight: normal!important;
margin: 1px 0 0 0!important;
color: black!important;
}

.gform_confirmation_message {
clear: both;
}

/* ==========================================================================
USERPRO
========================================================================== */

.userpro {
float: left!important;
width: 100%!important;
background: white!important;
/*margin-bottom: 120px!important;
box-shadow: 0 3px 5px rgba(0, 0, 0, .2)!important;*/
}

.userpro-centered {
background: #2f297f!important;
height: 140px!important;
border: none!important;
}

.userpro-profile-img-coucou {
margin: 50px 0 15px 52px !important;
z-index: 0!important;
width: 20% !important;
text-align: left !important;
/*border-right: 1px solid #eee!important;*/
height: 130px!important;
}

.userpro-profile-img-coucou img {
padding: 3px !important;
border: 1px solid #ccc !important;
border-radius: 2px !important;
width: 110px;
height: 110px;
z-index: 9999;
position: relative;
}

.userpro-profile-img {
margin: 175px 0 15px 52px !important;
z-index: 0!important;
width: 20% !important;
text-align: left !important;
/*border-right: 1px solid #eee!important;*/
}

.userpro-profile-img img {
padding: 3px !important;
border: 1px solid #ccc !important;
border-radius: 2px !important;
}

.userpro-profile-img-after {
width: 20%!important;
text-align: left!important;
float: left;
margin: -24px 0 0 52px!important;
/*border-right: 1px solid #eee!important;*/
}

.userpro-profile-name {
margin-bottom: 15px!important;
}

.userpro-profile-name a {
font-size: 13px!important;
letter-spacing: 2px!important;
font-family: "lato", Helvetica, Sans-serif!important;
font-weight: bold;
color: #2f2d7e !important;
}

.userpro-sc-bar {
border-bottom: none!important;
width: 20%!important;
/*border-right: 1px solid #eee!important;*/
margin-left: 52px!important
}

.userpro-sc-left {
margin: -130px 0 0 140px!important;
display: none;
}

.userpro-sc-right {
margin: -100px 0 0 140px !important;
}

a.userpro-count-link {
border: none!important;
clear: both!important;
padding: 0px!important;
margin: 0 0 7px 0!important;
}

a.userpro-count-link:hover, a.userpro-count-link:hover span {
color: #e3444b!important;
background: none!important;
}

.userpro-sc-right {
float: left!important;
clear: both!important;
}

a.userpro-button.secondary.userpro-show-chat.userpro-tip {
margin-top: 5px!important;
}

#light {
width: 20%!important;
margin: 0 0 0 52px!important;
float: left!important;
/*border-right: 1px solid #eee!important;*/
padding-top: 30px!important;
}

#light .userpro-head {
padding: 0px!important;
border: none!important;
margin: -25px 0 0!important;
border-top: 1px solid #eee !important;
border-radius: 0 !important;
width: 90% !important;
padding-top: 20px !important
}

.article-add {
text-align: left!important;
text-transform: uppercase;
font-size: 13px!important;
letter-spacing: 0!important;
line-height: normal!important;
width: 90%!important;
color: #ccc!important;
font-weight: bold!important;
}

#light .userpro-body {
padding: 0px!important;
float: left!important;
width: 100%!important;
}

.userpro-field {
width: 90%!important;
}

.userpro-input input {
color: black!important;
border: 1px solid #eee !important;
padding: 0 10px !important;
height: auto !important;
margin-bottom: 20px!important;
}

.userpro-input textarea {
border: 1px solid #eee!important;
padding: 10px!important;
height: 300px!important;
resize: none!important;
}

.userpro-warning, [data-key="post_categories"] {
display: none!important;
}

[data-key="post_featured_image"] {
width: auto!important;
float: left!important;
}

.userpro-field.userpro-submit {
border-top: none!important;
}

.userpro-field.userpro-submit.userpro-column {
width: auto !important;
float: right!important;
margin-right: 14px!important;
padding-top: 0px !important;
}

input.userpro-button.fullwidth-block, .userpro-button {
width: auto !important;
background: white !important;
text-transform: uppercase !important;
border: 1px solid #2f2d7d !important;
color: #2f2d7d !important;
font-weight: bold !important;
font-size: 11px !important;
}

a.userpro-button.secondary.userpro-show-chat.userpro-tip {
text-transform: none!important;
}

input.userpro-button:hover {
border: 1px solid #2f2d7d!important;
background: #2f2d7d!important;
color: white!important;
}

.userpro-button.chat.userpro-init-chat {
border: 1px solid #353535 !important;
background: white !important;
color: #666 !important;
text-transform: none !important;
font-size: 11px !important;
margin-top: 8px;
}

a.userpro-button.chat:hover {
border: solid 1px #bbb !important;
color: #666 !important;
background: white!important;
}

.userpro-awsm-bio {
display: none;
}

a.userpro-flat-btn.userpro-transition {
border: 1px solid black!important;
background: white !important;
border-radius: 0 !important;
margin-top: 10px!important;
}

.hack-display {
display: none;
}

.userpro-post-wrap {
width: 37%!important;
margin: -185px 0 110px 0!important;
float: left;
border-left: 1px solid #eee;
padding-left: 2.5%;
}

.userpro-post {
width: 100%!important;
float: left !important;
}

.userpro-post-title {
text-align: left!important;
}

.userpro-post-title h1 {
font-weight: 700;
font-size: 25px;
margin: 37px 0 50px 0;
line-height: 1.2;
color: #2f297f;
border-bottom: 3px solid #2f297f;
padding-bottom: 20px;
text-transform: uppercase;
letter-spacing: 5px;
font-family: raleway!important;
width: 100%;
text-align: left !important;
}

.userpro-post-title h3.postmetadata {
color: black;
text-transform: uppercase;
clear: both;
}

.userpro-post img {
width: 100%;
height: auto;
}

.userpro-post p {
text-align: justify!important;
}

.droite.intranet {
float: right!important;
}

.droite.intranet h2 {
border-bottom: 3px solid #ccc;
padding-bottom: 30px;
width: 100%;
margin-bottom: 48px;
margin-top: -7px;
}

.intranet, .intranet-edit {
display: inline-block!important;
/*border-left: 1px solid #eee!important;*/
padding: 10px 0 20px 30px!important;
width: 17%!important;
}

.userpro-follow {
display: none!important;
}

.intranet {
margin: -150px 33px 0 0!important;
}

.intranet-edit {
margin: -142px 33px 0 0!important;
}

.droite.intranet a, .droite.intranet-edit a {
clear: both;
float: left;
text-transform: uppercase;
color: #ccc;
line-height: 25px;
font-weight: bold;
}

.droite.intranet a:hover, .droite.intranet-edit a:hover {
color: #2f297f !important;
}

.profil-footer {
clear: both;
width: 100%;
height: 135px;
background: #f2f2f2;
margin-top: 30px;
margin-bottom: 120px;
}

.userpro-profile-img_foot {
z-index: 9999;
position: relative;
float: none;
text-align: center;
margin: 0 auto;
padding: 27px 0 5px 0;
opacity: .6;
}

.userpro-profile-img_foot img {
padding: 6px !important;
width: 80px;
height: 80px;
background: #fff !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border-radius: 999px !important;
}

.userpro-body.editionprofil {
width: 37% !important;
margin: -347px 0 0 2.5% !important;
float: left;
}

.userpro-body form[data-action="publish"] {
padding-bottom: 130px;
}

.userpro-search {
border-bottom: 1px solid #eee;
padding-bottom: 20px!important;
}

.cartedemembre {
width: 80%!important;
}

div.userpro-awsm {
width: 25%!important;
margin-right: 5%;
}

.userpro-search-results {
display: none;
}

input#searchuser {
border-bottom: 2px solid #ccc !important;
color: black!important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
box-shadow: none !important;
width: 300px !important;
padding: 0 0 10px 0 !important;
}

button.userpro-icon-search.userpro-tip, button.userpro-icon-remove.userpro-clear-search.userpro-tip {
background: none !important;
border: none !important;
box-shadow: none !important;
margin-top: 5px !important;
}

form.userpro-search-form button:hover {
border: none !important;
background: none!important;
}

/* ==========================================================================
FOOTER
========================================================================== */

#test {
background: white;
position: fixed;
width: 100%;
bottom: 0;
height: 140px;
z-index: -10;
}

.bottom-left {
position: absolute;
bottom: 60px; left: 0;
z-index: 0;
width: 100%;
}

#bas-foot {
position: absolute;
width: 100%;
height: 60px;
bottom: 0; left: 0;
z-index: 0;
background: white;
}

#partenaires {
z-index: 1;
position: absolute;
bottom: 0; left: 37px;
width: 700px; height: 110px;
}

.partenaire {
position: absolute;
-webkit-transform: scale(0.46);
-moz-transform: scale(0.46);
-o-transform: scale(0.46);
-ms-transform: scale(0.46);
transform: scale(0.46);
-webkit-filter: grayscale(1);
-o-filter: grayscale(1);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-ms-filter: grayscale(1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.partenaire:hover {
-webkit-filter: grayscale(0);
-o-filter: grayscale(0);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-ms-filter: grayscale(0);
}

.ministere {
background: url('img/footer/partenaires/ministere.png');
width: 67px; height: 88px;
margin: 0 0 0 0;
}

.fondation-france {
background: url('img/footer/partenaires/fondation-france.png');
width: 66px; height: 88px;
margin: 0.5px 0 0 40px;
}

.drac {
background: url('img/footer/partenaires/drac.png');
width: 64px; height: 64px;
margin: 17px 0 0 80px;
}

.univ-lyon2 {
background: url('img/footer/partenaires/univ-lyon2.png');
width: 250px; height: 30px;
margin: 65px 0 0 -49px;
}

.sacd {
background: url('img/footer/partenaires/sacd.png');
width: 85px; height: 21px;
margin: 28px 0 0 116px;
}

.afdas {
background: url('img/footer/partenaires/afdas.png');
width: 107px; height: 38px;
margin: 39px 0 0 110px;
}

.cnc {
background: url('img/footer/partenaires/cnc.png');
width: 80px; height: 27px;
margin: 65px 0 0 123px;
}

.rhone-alpes {
background: url('img/footer/partenaires/auvergne-rhonealpes.jpg');
width: 266px; height: 53px;
margin: 47px 0 0 123px;
z-index: 10;
}

.formasup {
background: url('img/footer/partenaires/formasup30.jpg');
width: 91px; height: 30px;
margin: 34px 0 0 169px;
}

.scam {
background: url('img/footer/partenaires/scam.png');
width: 77px; height: 22px;
margin: 18px 0 0 175px;
}

.cpnef {
background: url('img/footer/partenaires/francetv.jpg');
width: 500px; height: 126px;
-webkit-transform: scale(0.16);
-moz-transform: scale(0.16);
-o-transform: scale(0.16);
-ms-transform: scale(0.16);
transform: scale(0.16);
margin: 10px 0 0 120px;
}

.neuflize {
background: url('img/footer/partenaires/neuflize.png') no-repeat;
width: 965px; height: 480px;
margin: -105px 0 0 0;
background-size: auto 80px;
}

.grandlyon {
background: url('img/footer/partenaires/grandlyon.jpg');
width: 500px; height: 107px;
-webkit-transform: scale(0.16);
-moz-transform: scale(0.16);
-o-transform: scale(0.16);
-ms-transform: scale(0.16);
transform: scale(0.16);
margin: -10px 0 0 150px;
}

.total {
background: url('img/footer/partenaires/total.jpg');
width: 500px; height: 143px;
-webkit-transform: scale(0.12);
-moz-transform: scale(0.12);
-o-transform: scale(0.12);
-ms-transform: scale(0.12);
transform: scale(0.12);
margin: 0 0 0 210px;
}

.copieprivee {
background: url('img/footer/partenaires/copie_privee.jpg');
width: 500px; height: 175px;
-webkit-transform: scale(0.12);
-moz-transform: scale(0.12);
-o-transform: scale(0.12);
-ms-transform: scale(0.12);
transform: scale(0.12);
margin: -15px 0 0 290px;
}

#liens-foot {
z-index: 1;
position: absolute;
bottom: 19px; right: 54px;
}

#liens-foot a {
padding-right: 60px;
color: black;
text-transform: uppercase;
font-size: 11px
}

#liens-foot a:hover {
color: #2f297f;
}

#liens-foot span {
font-size: 11px
}


/* ==========================================================================
RESPONSIVE TABLETTE
========================================================================== */

@media only screen 
and (min-device-width : 768px) and (max-device-width : 1024px) {

#bloc, .ordinateur, .display, #recherche, .separation, #liens-index, #actu-index, svg, #partenaires, #liens-foot, .contact-sidebar, .liens-sidebar {
display: none!important;
}

.bords {
display: block;
}

header.head-page {
background: white;
position: fixed!important;
}

header #logo {
position: fixed;
margin: 0;
top: 50%; left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%) scale(.7);
-moz-transform: translateY(-50%) translateX(-50%) scale(.7);
transform: translateY(-50%) translateX(-50%) scale(.7);
}

.head-page #logophone {
background: url('img/header/logophone.png') no-repeat;
width: 300px; height: 314px;
display: block;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
margin-top: -126px;
margin-left: 180px;
opacity: .1;
position: absolute;
right: 0;
top: 0;
margin-top: -132px;
margin-right: -114px;
}

#dl-menu {
display: block;
z-index: 1;
}

.dl-menuwrapper {
width: 100%;
max-width: 185px;
float: left;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 200%;
perspective-origin: 50% 200%;
}

.dl-menuwrapper:first-child {
margin-right: 100px;
}

.dl-menuwrapper button {
background: none;
border: none;
width: 121px;
height: 45px;
overflow: hidden;
position: relative;
cursor: pointer;
outline: none;
color: white;
margin: 20px 0 0 15px;
}

.head-page .dl-menuwrapper button {
color: black;
margin: 0!important;
}

.dl-menuwrapper ul {
background: white;
}

.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 12px;
background: url(img/header/menu2.png) no-repeat;
top: 17px;
left: 23px;
}

.head-page .dl-menuwrapper button:after {
background: url(img/header/menuicon.png) no-repeat;
}

.dl-menuwrapper ul {
padding: 0;
list-style: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.dl-menuwrapper li {
position: relative;
}

.dl-menuwrapper li:first-child {
padding-top: 4px;
}

.dl-menuwrapper li:last-child {
padding-bottom: 10px;
}

.dl-menuwrapper li a {
display: block;
position: relative;
padding: 7px 20px 7px;
font-size: 13px;
font-weight: bold;
color: black;
outline: none;
}

.dl-menuwrapper li a:first-letter {
text-transform: capitalize;
}

.no-touch .dl-menuwrapper li a:hover {
background: rgba(255,248,213,0.1);
}

.dl-menuwrapper li.dl-back > a {
/*padding-left: 30px;
background: rgba(0,0,0,0.1);*/
}

/*.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
position: absolute;
top: 0;
line-height: 50px;
font-family: 'icomoon';
speak: none;
-webkit-font-smoothing: antialiased;
content: "\e000";
}*/

.dl-menuwrapper li.dl-back:after {
left: 10px;
color: rgba(212,204,198,0.3);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

.dl-menuwrapper li > a:after {
right: 10px;
color: rgba(0,0,0,0.15);
}

.dl-menuwrapper .dl-menu {
margin: 0 0 0 20px;
position: absolute;
width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}

.dl-menuwrapper li .dl-submenu {
display: none;
}

.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
display: block;
}

.dl-menuwrapper > .dl-submenu {
position: absolute;
width: 100%;
top: 50px;
left: 0;
margin: 0;
}

.dl-menu.dl-animate-out-2 {
-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
animation: MenuAnimOut2 0.3s ease-in-out;
}

@-webkit-keyframes MenuAnimOut2 {
0% { }
100% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
}

@keyframes MenuAnimOut2 {
0% { }
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
}

.dl-menu.dl-animate-in-2 {
-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
animation: MenuAnimIn2 0.3s ease-in-out;
}

@-webkit-keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}

@keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
animation: SubMenuAnimIn2 0.3s ease-in-out;
}

@-webkit-keyframes SubMenuAnimIn2 {
0% {
-webkit-transform: translateX(100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}

@keyframes SubMenuAnimIn2 {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
animation: SubMenuAnimOut2 0.3s ease-in-out;
}

@-webkit-keyframes SubMenuAnimOut2 {
0% {
-webkit-transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%);
opacity: 0;
}
}

@keyframes SubMenuAnimOut2 {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
}

.no-js .dl-menuwrapper .dl-menu {
position: relative;
opacity: 1;
-webkit-transform: none;
transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
display: block;
}

.no-js .dl-menuwrapper li.dl-back {
display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
content: '';
}

.head-page #langues {
position: absolute;
top: 330px; right: -90px;
left: unset;
width: 200px;
}

#langues {
position: fixed;
margin: 0;
display: block;
float: none;
right: 24px; top: 10px;
z-index: 1;
}

li#menu-item-107 a:before, li#menu-item-108 a:before, li#menu-item-109 a:before {
opacity: 1;
}

#reseaux-sociaux-liens {
position: fixed;
margin: 0;
display: block;
float: none;
top: auto; bottom: 40px;
left: 40px; right: auto;
font-size: 12px;
z-index: 1;
}

.fa-facebook::before, .fa-twitter::before, .fa-vimeo-square::before {
font-size: 15px;
}

#bas-foot {
height: 20px;
}

.image-cropper {
height: 300px;
}

.bg-page img {
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
}

.head-page #logo {
left: 50%;
-webkit-transform: translateX(-50%) scale(0.5);
-moz-transform: translateX(-50%) scale(0.5);
transform: translateX(-50%) scale(0.5);
margin-top: 20px;
display: none;
}

.content {
margin: 320px 0 0 0;
padding: 0;
}

.gauche {
width: 100%;
margin: 20px 0 0;
text-align: center;
border-top: 1px solid #ccc;
padding-top: 15px;
}

.gauche h2 {
width: 100%;
}

.centre {
width: 100%;
margin: 30px 0 0 0;
padding: 0 15%;
}

.centre article h1 {
font-size: 25px;
line-height: 35px;
text-align: center;
}

.centre article p {
font-size: 12px;
line-height: 20px;
}

.droite {
display: none;
}

.droite.newsletter {
float: left;
clear: both;
margin: 30px 0px 0px 0;
width: 100%;
border-top: 1px solid #eee;
height: 200px;
}

.droite.newsletter h2 {
text-align: center;
width: auto;
}

.droite.newsletter form {
width: 70%;
margin: 20px auto 0 auto;
}

.droite.newsletter input {
width: 100%;
margin-bottom: 20px;
}

.droite.newsletter input[type="submit"] {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}

.head-page #reseaux-sociaux-liens a {
color: black;
}

}

/* ==========================================================================
RESPONSIVE SMARTPHONE
========================================================================== */

@media only screen 
and (min-device-width : 100px) and (max-device-width : 767px) {

#bloc, .ordinateur, #recherche, .display, .separation, #liens-index, #actu-index, svg, #partenaires, .contact-sidebar, .liens-sidebar {
display: none!important;
}

header.head-page {
background: white;
position: fixed!important;
}

.bords {
border: 5px solid white;
display: block;
}

header #logo {
position: fixed;
margin: 0;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) scale(.6);
-moz-transform: translateX(-50%) translateY(-50%) scale(.6);
transform: translateX(-50%) translateY(-50%) scale(.6);
}

.head-page #logophone {
background: url('img/header/logophone.png') no-repeat;
width: 300px; height: 314px;
display: block;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
margin-top: -126px;
margin-left: 180px;
opacity: .1;
position: absolute;
right: 0;
top: 0;
margin-top: -124px;
margin-right: -120px;
}

#dl-menu {
display: block;
z-index: 1;
}

.dl-menuwrapper {
width: 100%;
max-width: 185px;
float: left;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 200%;
perspective-origin: 50% 200%;
}

.dl-menuwrapper:first-child {
margin-right: 100px;
}

.dl-menuwrapper button {
background: none;
border: none;
width: 121px;
height: 45px;
overflow: hidden;
position: relative;
cursor: pointer;
outline: none;
margin-top: 11px;
color: white;
}

.head-page .dl-menuwrapper button {
color: black;
}

.dl-menuwrapper ul {
background: white;
}

.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 12px;
background: url(img/header/menu2.png) no-repeat;
top: 17px;
left: 23px;
}

.head-page .dl-menuwrapper button:after {
background: url(img/header/menuicon.png) no-repeat;
}

.dl-menuwrapper ul {
padding: 0;
list-style: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.dl-menuwrapper li {
position: relative;
}

.dl-menuwrapper li:first-child {
padding-top: 4px;
}

.dl-menuwrapper li:last-child {
padding-bottom: 10px;
}

.dl-menuwrapper li a {
display: block;
position: relative;
padding: 7px 20px 7px;
font-size: 13px;
font-weight: bold;
color: black;
outline: none;
}

.dl-menuwrapper li a:first-letter {
text-transform: capitalize;
}

.no-touch .dl-menuwrapper li a:hover {
background: rgba(255,248,213,0.1);
}

.dl-menuwrapper li.dl-back > a {
/*padding-left: 30px;
background: rgba(0,0,0,0.1);*/
}

/*.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
position: absolute;
top: 0;
line-height: 50px;
font-family: 'icomoon';
speak: none;
-webkit-font-smoothing: antialiased;
content: "\e000";
}*/

.dl-menuwrapper li.dl-back:after {
left: 10px;
color: rgba(212,204,198,0.3);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

.dl-menuwrapper li > a:after {
right: 10px;
color: rgba(0,0,0,0.15);
}

.dl-menuwrapper .dl-menu {
margin: 4px 0 0 0;
position: absolute;
width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}

.dl-menuwrapper li .dl-submenu {
display: none;
}

.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
display: block;
}

.dl-menuwrapper > .dl-submenu {
position: absolute;
width: 100%;
top: 50px;
left: 0;
margin: 0;
}

.dl-menu.dl-animate-out-2 {
-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
animation: MenuAnimOut2 0.3s ease-in-out;
}

@-webkit-keyframes MenuAnimOut2 {
0% { }
100% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
}

@keyframes MenuAnimOut2 {
0% { }
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
}

.dl-menu.dl-animate-in-2 {
-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
animation: MenuAnimIn2 0.3s ease-in-out;
}

@-webkit-keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}

@keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
animation: SubMenuAnimIn2 0.3s ease-in-out;
}

@-webkit-keyframes SubMenuAnimIn2 {
0% {
-webkit-transform: translateX(100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}

@keyframes SubMenuAnimIn2 {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
animation: SubMenuAnimOut2 0.3s ease-in-out;
}

@-webkit-keyframes SubMenuAnimOut2 {
0% {
-webkit-transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%);
opacity: 0;
}
}

@keyframes SubMenuAnimOut2 {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
}

.no-js .dl-menuwrapper .dl-menu {
position: relative;
opacity: 1;
-webkit-transform: none;
transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
display: block;
}

.no-js .dl-menuwrapper li.dl-back {
display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
content: '';
}

#reseaux-sociaux-liens {
position: fixed;
margin: 0;
display: block;
float: none;
top: auto; bottom: 20px;
left: 20px; right: auto;
font-size: 12px;
z-index: 1;
}

.fa-facebook::before, .fa-twitter::before, .fa-vimeo-square::before {
font-size: 15px;
}

.head-page #langues {
position: absolute;
top: 180px; right: -130px;
left: unset;
width: 200px;
}

#langues {
position: fixed;
margin: 0;
display: block;
float: none;
bottom: 20px;
right: 7px;
top: -10px;
z-index: 1;
}

li#menu-item-107 a:before, li#menu-item-108 a:before, li#menu-item-109 a:before {
opacity: 1;
font-size: 9.5px;
}

#bas-foot {
height: 5px;
}

.image-cropper {
height: 220px;
margin-top: 10px;
}

.bg-page img {
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;

position: absolute!important;
top: 30%!important;
width: 100%!important;
height: auto!important;
}

.head-page #logo {
left: 50%;
-webkit-transform: translateX(-50%) scale(0.5);
-moz-transform: translateX(-50%) scale(0.5);
transform: translateX(-50%) scale(0.5);
margin-top: 20px;
margin-left: 0;
display: none;
}

.content {
margin: 200px 0 0 0;
padding-bottom: 0px;
z-index: 0;
}

.content a.btn-ensavoirplus {
float: none!important;
margin: 30px 0px 0px !important;
width: 100% !important;
}

.table-cell {
display: none;
}

.gauche {
width: 100%;
margin: 20px 0 0;
text-align: center;
border-top: 1px solid #eee;
padding-top: 15px;
}

.gauche h2 {
width: 100%;
}

.centre {
width: 100%;
margin: 0;
padding: 0 15%;
}

.centre h1 {
font-size: 18px;
line-height: 25px;
text-align: center;
margin-bottom: 30px;
}

.centre article p {
font-size: 11px;
line-height: 18px;
}

.droite {
display: none;
}

.droite.newsletter {
float: left;
clear: both;
margin: 30px 0px 0px 0;
width: 100%;
border-top: 1px solid #eee;
height: 200px;
}

.droite.newsletter h2 {
text-align: center;
width: auto;
}

.droite.newsletter form {
width: 70%;
margin: 20px auto 0 auto;
}

.droite.newsletter input {
width: 100%;
margin-bottom: 20px;
}

.droite.newsletter input[type="submit"] {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}

.head-page #reseaux-sociaux-liens a {
color: black;
display: none;
}

#liens-foot {
display: none;
}

}

/* ==========================================================================
RESPONSIVE SMARTPHONE PAYSAGE
========================================================================== */

@media only screen (orientation: landscape) and (min-device-width : 100px) and (max-device-width : 767px) {

#bloc, .ordinateur, .ipad, #recherche, .display, .separation, #liens-index, #actu-index, svg, #partenaires, #liens-foot, .contact-sidebar, .liens-sidebar {
display: none!important;
}

.bords {
border: 5px solid white;
display: block;
}

header.head-page {
background: white;
position: fixed!important;
}

.head-home #logo {
position: fixed;
margin: 0;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) scale(.6);
-moz-transform: translateX(-50%) translateY(-50%) scale(.6);
transform: translateX(-50%) translateY(-50%) scale(.6);
}

.iphone {
display: block;
}

#navigation {
margin: 0;
padding-top: 10px;
height: 35px;
background: white;
}

nav ul {
-webkit-padding-start: 0px;
-moz-padding-start: 0px;
padding-start: 0px;
}

#navigation li {
font-size: 12px;
position: absolute;
width: 100%;
}

#navigation p {
color: black;
width: auto;
float: left;
padding: 0px;
font-size: 10px;
}

#link1 { margin: 0 0 0 20px; }
#link2 { margin: 0 0 0 90px; }
#link3 { margin: 0 0 0 170px; }
#link4 { margin: 0 0 0 245px; }
#link5 { margin: 0 0 0 330px; }
#link6 { margin: 0 0 0 400px; }
#link7 { margin: 0 0 0 475px; }
#link8 { margin: 0 0 0 575px; }

#navigation li:hover > .sousmenu {
width: 100%;
position: fixed;
left: 0;
z-index: 10;
margin: 15px 0 0 0;
padding: 5px 10px 5px;
border-bottom: 1px solid #2f2d7e;
}

#navigation .sousmenu li {
position: relative;
clear: none;
padding: 0px;
}

.sousmenu a {
font-size: 9px!important;
font-weight: normal!important;
color: #2f2d7e!important;
}

#reseaux-sociaux-liens {
position: fixed;
margin: 0;
display: block;
float: none;
top: auto; bottom: 20px;
left: 20px; right: auto;
font-size: 12px;
}

.fa-facebook::before, .fa-twitter::before, .fa-vimeo-square::before {
font-size: 15px;
}

#langues {
position: fixed;
margin: 0;
display: block;
float: none;
bottom: 20px;
right: 20px;
}

li#menu-item-107 a:before, li#menu-item-108 a:before, li#menu-item-109 a:before {
opacity: 1;
font-size: 9.5px;
}

#bas-foot {
height: 5px;
}

.image-cropper {
height: 300px;
}

.bg-page img {
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
}

.head-page #logo {
left: 50%;
-webkit-transform: translateX(-50%) scale(0.5);
-moz-transform: translateX(-50%) scale(0.5);
transform: translateX(-50%) scale(0.5);
margin-top: 20px;
margin-left: 0;
}

.content {
margin: 320px 0 60px 0;
padding-bottom: 50px;
}

.gauche {
width: 100%;
margin: 0;
text-align: center;
border-bottom: 1px solid #eee;
}

.gauche h2 {
width: 100%;
}

.centre {
width: 100%;
margin: 30px 0 0 0;
padding: 0 15%;
}

.centre article h1 {
font-size: 18px;
line-height: 25px;
text-align: center;
margin-bottom: 30px;
}

.centre article p {
font-size: 11px;
line-height: 18px;
}

.droite.newsletter {
float: left;
clear: both;
margin: 30px 0px 0px 0;
width: 100%;
border-top: 1px solid #eee;
height: 200px;
}

.droite.newsletter h2 {
text-align: center;
width: auto;
}

.droite.newsletter form {
width: 70%;
margin: 20px auto 0 auto;
}

.droite.newsletter input {
width: 100%;
margin-bottom: 20px;
}

.droite.newsletter input[type="submit"] {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}

.head-page #reseaux-sociaux-liens a {
color: black;
}

}