a,a:visited{color:#4783e7}article,aside,details,figcaption,figure,footer,header,hgroup,hr,nav,section{display:block}a,ins{text-decoration:none}ins,mark{color:#000}dfn,mark{font-style:italic}b,mark,strong{font-weight:700}hr,ol,ul{margin:1em 0}body,fieldset,figure,form,nav ol,nav ul{margin:0}fieldset,hr,img,legend{border:0}audio[controls],canvas,video{display:inline-block}html{font-size:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-size:14px;line-height:1.231}body,button,input,select,textarea{font-family:sans-serif;color:#4d4d4d}table td{padding:0}table.padding td{padding:0 5px}fieldset,hr,legend{padding:0}::-moz-selection{background:#2A2A2A;color:#fff;text-shadow:none}::selection{background:#2A2A2A;color:#fff;text-shadow:none}a:focus{outline:dotted thin}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}blockquote{margin:1em 40px}hr{height:1px;border-top:1px solid #ccc}ins{background:#ff9}mark{background:#ff0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:"";content:none}small{font-size:85%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}ol,ul{padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ol,nav ul{list-style:none;padding:0}img{-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}label{cursor:pointer}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}input[type=checkbox],input[type=radio]{box-sizing:border-box}input[type=search]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}input:invalid,textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}

/* =============================================================================
   Primary style
   ========================================================================== */

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

@font-face {
    font-family: 'Eurofurencelight';
    src: url('fonts/eurof35.eot');
    src: url('fonts/eurof35.eot?#iefix') format('embedded-opentype'),
                     url('fonts/eurof35.woff') format('woff'),
                     url('fonts/eurof35.ttf') format('truetype'),
                     url('fonts/eurof35.svg#eurof35') format('svg');
    font-weight: normal;
    font-style: normal;
}

header{position:relative}

#flags{position: absolute;left:4px;top:1px}

#contenu-interne a{border-bottom:1px solid #DFDFDF}
#contenu-interne a:hover, 
#contenu-interne a:active {border-bottom:1px solid #ff0000}

a.lienpdf{
    background:url(/static/img/page_white_acrobat.png) no-repeat top left;
    padding:0 0 0 20px;
}
figcaption{
    font-size:11px;
}
figcaption p{
    margin:0;
}

.couleur-theme1{color:#0463bc;}
.couleur-theme2{color:#6888ff;}
.couleur-theme3{color:#8e8e8e;}
.couleur-theme4{color:#d702f1;}
.couleur-theme5{color:#ff8400;}

html{
    overflow-x: hidden;
}
body{
    background: #19181D ;
    font-family: "Trebuchet MS";
    font-size:14px;
    width: 100%;
}
.nomobile #container,
.nomobile body{
    width: 970px;
}
#contenu{padding:0px 0 50px 0;color: #707070;}
#contenu ul{padding-left:14px}
#contenu ul ul{padding-left:40px}

#coldroite{
    border-left:1px solid #d9d9d9;
}
#coldroite a img{
    max-width:175px;
}
#coldroite .play{
    position: absolute;
    width:63px;
    height:63px;
    top:20px;
    left:60px;
    background: url(/static/img/flecheplay.png) center top no-repeat;
}

.coldroitetitre{
    font-size:18px;
    font-family: 'Raleway', cursive;
    padding:0 0 20px 0;
    color:#333;
}

#coldroite a:hover{
    text-decoration: underline;
}

#accueilrandomvideos{
    position: relative;
    max-width:960px;
    width: 100%;
    height:170px;
    overflow: hidden;
    padding-left:78px;
}
#accueilrandomvideos a{
    display:block;
    position: relative;
    float:left;
    width:294px;
    height:170px;
    overflow: hidden;
    background: #000;
}
#accueilrandomvideos a img{
    max-width: 294px;
}
#accueilrandomvideos a#accueilrandomvideos-next{
    width:56px;
    height:56px;
    position:absolute;
    background: url(/static/img/accueil-random-fleche.png);
    left:8px;
    top:60px;
}
#accueilrandomvideos .random-textes{
    padding:9px 0;
    position:absolute;
    bottom:0;
    left:0;
    background: url(/static/img/opa80black.png);
    color:#fff;
    width:100%
}
#accueilrandomvideos .random-textes span{
    height: 38px;
    line-height: 20px;
    padding-left:18px;
    display:block;
    overflow: hidden;
}
#accueilrandomvideos .random-titre{
    font-size:18px;
    font-family: 'Lobster Two', cursive;
}


#video-list a.video{
    float:left;
    position:relative;
    padding-bottom:0px;
    width:100%;
    border-bottom:1px solid #D8D8D8;
    border-left:1px solid #D8D8D8; 
    height: 125px;
    overflow: hidden;
    text-align: center;
    background: #000;
}
#video-list a span{
    display:block;
    text-align: center;
}

.videos-container.Bleuclair{background:#c4d3f0;}
.videos-container.Bleu{background:#89a9e4;}
.videos-container.Gris{background:#bfbfbf;}
.videos-container.Violet{background:#ebb3b6;}
.videos-container.Orange{background:#fbc57b;}

.videos-container{
    text-align: center;
}
a#videos-next{
    position: relative;
    display: inline-block;
    width:56px;
    height:56px;
    margin:10px 0;
    background: url(/static/img/videos-fleche.png);
    border-bottom:none !important;
}

.allvideo{
    clear:both;
    display:none;
}

#video-list .random-titre{
    font-size:16px;
    font-family: 'Lobster Two', cursive;
}
#video-list .random-textes {
    background: url("/static/img/opa80black.png") repeat scroll 0 0 transparent;
    bottom: 0;
    color: #FFFFFF;
    left: 0;
    padding: 2px 0;
    position: absolute;
    width: 100%;
}
#video-list .random-textes span{
    height:21px;
    line-height: 25px;
    padding:0 6px;
    display:block;
}
#video-list a img{
    display:inline-block;
    max-width: 219px;
}
#video-list .play{
    position: absolute;
    width:63px;
    height:63px;
    top:20px;
    left:60px;
    background: url(/static/img/flecheplay.png) center top no-repeat;
}

#container{
    width:100%;
    margin:0 auto;
}
#nav-top{
    background: url(/static/img/menu-top-fond.png) right top no-repeat;
    float:right;
    height:27px;
    line-height: 25px;
    color:#fff;
    width: 100%;
    text-align: right;
}
#nav-top input{
    border:0;
    font-size:12px;
}
#nav-top a{
    color:#fff;
    font-family: arial;
    font-size:12px;
}
.recherche{
    display:inline;
}
.recherche input{
    -webkit-box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.2) inset;
    box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.2) inset; 
}
.recherche input:first-child{
    width:120px;
    position:relative;
    left:20px;
    padding:2px 30px 2px 5px;
}
.recherche form{display:inline}
.recherche .btn{
    position:relative;
    left:-10px !important;
    top:0;
    font-size:9px !important;
    height:10px;
    padding: 0 2px 0 5px;
    background: #fff;
    border-left:1px solid #aba8aa !important;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none; 
}

.logoc{
    padding: 8px 0;
    text-align: center;
    background: url(/static/img/fond.jpg) center top no-repeat fixed;
}
#logo{
    margin-top:5px;
}
#menu-top{
    float:right;
    height:111px;
    width:735px;
    background: url(/static/img/menutopfond.png) left top no-repeat;
}
#menu-top ul{
    list-style: none;
    margin:0;padding:0;
}
#menu-top ul li{
    float:left;
}
#menu-top a{
    position: relative;
    display:block;
    padding:0px 0 11px 23px;
    width:146px;
    height:111px;
    font-size:18px;
    font-family: 'Lobster Two', cursive;
    line-height: 100px;
}
#menu-top a span{
    display: block;
    line-height: 20px;
    padding: 0 0 10px;
    position: absolute;
    top: 10px;
    vertical-align: middle;
}
#menu-top a .lib {
    bottom: 0;
    display: inline-block;
    padding: 42px 0 0 0;
    position: static;
}
/*
.ru #menu-top a{
    font-size:17px;
    padding:10px 0 11px 15px;
    width:132px;
}*/
#menu-top #menu1 a{
    color:#93bbfd;
}
#menu-top #menu2 a{
    color:#6888ff;
}
#menu-top #menu3 a{
    color:#cdcdcd;
}
#menu-top #menu4 a{
    color:#e622cd;
}
#menu-top #menu5 a{
    color:#fead00;
}

#menu-top #menu1 a{
    background: url(/static/img/supermenu-fleches.png) no-repeat;
    background-position:  64px 112px;
}
#menu-top #menu2 a{
    background: url(/static/img/supermenu-fleches.png) no-repeat;
    background-position:  -79px 112px;
}
#menu-top #menu3 a{
    background: url(/static/img/supermenu-fleches.png) no-repeat;
    background-position:  -229px 112px;
}
#menu-top #menu4 a{
    background: url(/static/img/supermenu-fleches.png) no-repeat;
    background-position:  -379px 112px;
}
#menu-top #menu5 a{
    background: url(/static/img/supermenu-fleches.png) no-repeat;
    background-position:  -529px 112px;
}

#main{
    background: #fff;
}
.index #main{
    background: none;
}


#filariane{
    background: url(/static/img/filariane.jpg) left top repeat-y;
    color:#dce6f6;
    /*height: 23px;*/
    padding: 5px 0 6px 15px;
    clear:both;
}
#filariane a{
    color:#a7c7fb;
}


.Bleuclair{color:#76A4ED;}
.Bleu{color:#6888ff;}
.Gris{color:#8e8e8e;}
.Violet{color:#d702f1;}
.Orange{color:#ff8400;}



.navigation{
    list-style:none;
    margin:0;
    padding:25px 0 28px 0;
}

.Bleuclair h1,
.Bleuclair h2,
.Bleuclair .intro{
    color:#4783e7;}
.Bleuclair .rappelTitreMenu{
    color:#6da2fc;}
.Bleuclair .navigation{background: url(/static/img/fond-colg1.jpg) left top no-repeat #6f9ae2;}
.Bleuclair #coldroite a{color:#6f9ae2;}

.Bleu h1,
.Bleu h2,
.Bleu .intro{
    color:#203889;
}
.Bleu .rappelTitreMenu{
    color:#364a90;
}
.Bleu .navigation{background: url(/static/img/fond-colg2.jpg) left top no-repeat #364a90;}
.Bleu #coldroite a{color:#364a90;}

.Gris h1,
.Gris h2,
.Gris .intro{
    color:#654949;
}
.Gris .rappelTitreMenu{
    color:#665f5f;
}
.Gris .navigation{background: url(/static/img/fond-colg3.jpg) left top no-repeat #756565;}
.Gris #coldroite a{color:#756565;}

.Violet h1,
.Violet h2,
.Violet .intro{
    color:#b0137b;
}
.Violet .rappelTitreMenu{
    color:#b0137b;
}
.Violet .navigation{background: url(/static/img/fond-colg4.jpg) left top no-repeat #b0137b;}
.Violet #coldroite a{color:#b0137b;}

.Orange h1,
.Orange h2,
.Orange .intro{
    color:#b86e0d;
}
.Orange .rappelTitreMenu{
    color:#cc820e;
}
.Orange .navigation{background: url(/static/img/fond-colg5.jpg) left top no-repeat #cc820e;}
.Orange #coldroite a{color:#cc820e;}


.Bleuclair h1,
.Bleuclair h2,
h2.Bleuclair{color:#215EBA;}
.Bleu h1,
.Bleu h2,
h2.Bleu{color:#11276D;}
.Gris h1,
.Gris h2,
h2.Gris{color:#513939;}
.Violet h1,
.Violet h2,
h2.Violet{color:#820957;}
.Orange h1,
.Orange h2,
h2.Orange{color:#8C5105;}


.intro{
    font-weight:bold;
}

.navigation li{
    background: url(/static/img/navigation-borderbottom.png) repeat-x left bottom;
}
.navigation li:last-child{
    background: none;
}

.navigation li{
    margin:0;
    padding:0;
}
.navigation li ul{
    list-style:none;
    margin:0;
    padding:0 0 0 26px;
    display:none;
}
.navigation li a{
    display:block;
    padding:12px 10px 12px 28px;
    color:#fff;
    font-size:14px;
    font-family: "Trebuchet MS";
}
.navigationwithfolder li a {
    display:block;
    padding:12px 10px 12px 28px;
    color:#fff;
    font-size:14px;
    font-family: 'Raleway', cursive;
}
.navigationwithfolder{
    margin: 0;
    padding: 0;
    list-style: none;
}

#colgauche .navigation{
    width:197px;
}
#colgauche .navigation li span{
    display:block;
    padding:12px 10px 12px 28px;
    color:#fff;
    font-size:14px;
    font-family: 'Raleway', cursive;
}
.navigation li a.plus{
    padding:12px 20px 12px 28px;
}
.navigation ul li{
    border-bottom: none;
}
.navigation li ul a{
    padding:9px 0 9px 15px;
    font-size:13px;
}

.navigation li.active ul{
    display: block;
}

.colg_padding{
    padding: 0 10px;
}

a.plus{
    background: url(/static/img/picto+.png) 175px 13px no-repeat !important;
}
a.plus.mainactive{
    background-position: 175px -72px !important;
}

.lib{position: absolute;bottom:0;}

#main .navigation li a.mainactive,
#main .navigation li a.active{
    color:#fff;
    background: url(/static/img/picto-fleche-on.png) no-repeat 12px 16px;
}

#main .navigation li ul li a.active{
    background: url(/static/img/picto-fleche-on.png) no-repeat 4px 13px;
}

#main .navigation li>a.mainactive.plus,
#main .navigation li>a.active.plus{color:#fff;background-color:transparent;opacity:1;filter : alpha(opacity=100)}

#contenu a{
    border-bottom:1px solid #dedede;
}
#contenu a:hover{
    border-bottom:1px solid #6DA2FC;
}

.super-menu-image{
    float:left;
    width:225px;
    height:100%;
    min-height:160px; 
    
    -webkit-box-shadow:4px 0 0 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow:4px 0 0 0 rgba(0, 0, 0, 0.2);
    box-shadow:4px 0 4px 0 rgba(0, 0, 0, 0.2);   
}
.super-menu{
    position: relative;
}
.super-menu .fermer{
    background: url(/static/img/opac30.png);
    font-size:12px;
    display:inline-block;
    color:#fff;
    padding:3px 10px 3px 10px;
    position: absolute;
    right:0;
    bottom:0;
}
.super-menu span{
    display:inline-block;
    padding-left:10px;
    font-size:14px;
    margin-right:8px;
}

#super-menu1 .super-menu-image{
    background: url(/static/img/photos-supermenu/meditation.jpg) no-repeat center top;
}
#super-menu2 .super-menu-image{
    background: url(/static/img/photos-supermenu/recherches.jpg) no-repeat center top;
}
#super-menu3 .super-menu-image{
    background: url(/static/img/photos-supermenu/david-lynch.jpg) no-repeat center top;
}
#super-menu4 .super-menu-image{
    background: url(/static/img/photos-supermenu/beatles.jpg) no-repeat center top;
}
#super-menu5 .super-menu-image{
    background: url(/static/img/photos-supermenu/maharishi.jpg) no-repeat center top; 
}

.hsep{
    height:1px;
    background: #fff;
    width: 50%;
    margin: 34px auto 0;
}

.super-menu-citation{
    float:left;
    margin-right: 0;
    width: 700px;
    background: url(/static/img/picto-citation-menu.png) no-repeat 28px 7px;
    color:#fff;
    font-size:14px;
    font-style: italic;
}
.super-menu-citation div{
    padding:45px 0 0 26px;
}

#super-menu1{
    background: #6f9ae2;
}
#super-menu2{
    background: #6384ff;
}
#super-menu3{
    background: #897b7b;
    background-image: -ms-linear-gradient(top, #807171, #b2a4a4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#807171), to(#b2a4a4));
    background-image: -webkit-linear-gradient(top, #807171, #b2a4a4);
    background-image: -o-linear-gradient(top, #807171, #b2a4a4);
    background-image: linear-gradient(top, #807171, #b2a4a4);
    background-image: -moz-linear-gradient(top, #807171, #b2a4a4);
    background-repeat: repeat-x; 
}
#super-menu4{
    background: #982289;
    background-image: -ms-linear-gradient(top, #88217c, #bb25a8);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#88217c), to(#bb25a8));
    background-image: -webkit-linear-gradient(top, #88217c, #bb25a8);
    background-image: -o-linear-gradient(top, #88217c, #bb25a8);
    background-image: linear-gradient(top, #88217c, #bb25a8);
    background-image: -moz-linear-gradient(top, #88217c, #bb25a8);
    background-repeat: repeat-x; 
}
#super-menu5{
    background: #d9a12b;
    background-image: -ms-linear-gradient(top, #c68f19, #fbc34b);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#c68f19), to(#fbc34b));
    background-image: -webkit-linear-gradient(top, #c68f19, #fbc34b);
    background-image: -o-linear-gradient(top, #c68f19, #fbc34b);
    background-image: linear-gradient(top, #c68f19, #fbc34b);
    background-image: -moz-linear-gradient(top, #c68f19, #fbc34b);
    background-repeat: repeat-x; 
}
.super-menu{
    display:none;
}
.super-menu ul.navigation{
    float:left;
    margin:0;
    margin: 34px 0 0 0;
    padding:0px 28px 0 28px;
    background:none;
    line-height: 24px;
}
.super-menu ul.navigation li{
    background: none;
}
.super-menu ul.navigation li a{
    font-family: "Trebuchet MS";
    padding:4px 0px 1px 12px;
    /*float:left;
    /*width:200px; Si 2 navigation (li > 4) voir JS*/
    margin-left:6px;
    line-height: 16px;
}
#super-menu2 ul.navigation li a{
    /*max-width:165px;*/
}
#super-menu1 .navigation {
    border-left:1px solid #4787c1;
}
#super-menu2 .navigation {
    border-left:1px solid #4967d8;
}
#super-menu3 .navigation {
    border-left:1px solid #6b5f5b;
}
#super-menu4 .navigation {
    border-left:1px solid #d564ca;
}
#super-menu5 .navigation {
    border-left:1px solid #90631d;
}
#super-menu1 .navigation li{
    color: #115188;
}
#super-menu1 .navigation li a {
    color: #115188;
}
#super-menu2 .navigation li{
    color: #213b9d;
}
#super-menu2 .navigation li a {
    color: #213b9d;
}
#super-menu3 .navigation li{
    color: #362f2d;
}
#super-menu3 .navigation li a {
    color: #362f2d;
}
#super-menu4 .navigation li{
    color: #ff90f6;
}
#super-menu4 .navigation li a {
    color: #ff90f6;
}
#super-menu5 .navigation li{
    color: #603913;
}
#super-menu5 .navigation li a {
    color: #603913;
}
.super-menu li a.mainactive,
.super-menu li a.active,
.super-menu li.active span,
.super-menu li a:hover,
.super-menu li:hover span{
    color:#fff !important;
}

.super-menu .navigation:first-child{
    border:none !important;
}

#super-menu4 .menus .folder{
    border-left: 1px solid #ff90f6;
}
#super-menu4 .menus .folder:first-child{
    border:none;
}
.super-menu .navigationwithfolder span{
    padding-left:2px;
}
.folder{
    width:311px;
    float: left;
}

.super-menu .navigationwithfolder {
    line-height: 24px;
}
#super-menu4 .navigationwithfolder li {
    color: #ff90f6;
}
#super-menu4 .navigationwithfolder li a {
    color: #ff90f6;
}
.super-menu .navigationwithfolder li a {
    font-family: "Trebuchet MS";
    line-height: 16px;
    margin-left: 0px;
    padding: 4px 0 1px 3px;
}
.navigationwithfolder li {
    margin: 0;
    padding: 0;
}

.navigation{
    width:670px;
}
.ulx2{
    width:305px;
}
.ulx3{
    width:245px; /*187px*/
}


#blockhaut{
    position:relative;
}
.imageescalier{
    position: absolute;
    bottom:0;
    left:0;
}
#diaporama{
    position:relative;
    height:330px;
    overflow: hidden;
}

.diaporama-image{
    position:absolute;
    top:0;
    left:0;
    display: none;
}

.diaporama-texte{
    position:absolute;
    top:0;right:0;
    background: url(/static/img/opa.png) repeat;
    color:#737373;
    width:294px;
    height:330px;
    overflow:hidden; 
}

.diaporama-texte div{
    position:relative;
    padding:0 30px 0 40px;
}

#diaporama h2,
.diaporamamobile h2{
    font-family: 'Lobster Two', cursive;
    font-size:30px;
    font-weight: normal;
    line-height: 25px;
    margin:5px 0 10px 0;
}
#diaporama .ss-titre,
.diaporamamobile .ss-titre{
    font-family: 'Raleway', cursive;
    font-size:30px;
    line-height: 25px;
    color:#000;
}

#diaporama .couleur-theme1 h2,
.diaporamamobile .couleur-theme1 h2{color:#0463bc;}
#diaporama .couleur-theme1 .ss-titre,
.diaporamamobile .couleur-theme1 .ss-titre{color:#0463bc;}

#diaporama .couleur-theme2 h2,
.diaporamamobile .couleur-theme2 h2{color:#6888ff;}
#diaporama .couleur-theme2 .ss-titre,
.diaporamamobile .couleur-theme2 .ss-titre{color:#35436e;}

#diaporama .couleur-theme3 h2,
.diaporamamobile .couleur-theme3 h2{color:#8e8e8e;}
#diaporama .couleur-theme3 .ss-titre,
.diaporamamobile .couleur-theme3 .ss-titre{color:#000;}

#diaporama .couleur-theme4 h2,
.diaporamamobile .couleur-theme4 h3{color:#d702f1;}
#diaporama .couleur-theme4 .ss-titre,
.diaporamamobile .couleur-theme4 .ss-titre{color:#d702f1;}

#diaporama .couleur-theme5 h2,
.diaporamamobile .couleur-theme5 h2{color:#ff8400;}
#diaporama .couleur-theme5 .ss-titre,
.diaporamamobile .couleur-theme5 .ss-titre{color:#ff8400;}

.diaporama-mobile-texte{
    padding: 20px 20px 25px;
}
.diaporamamobile .slick-dots{
    background: #fff;
}
.diaporamamobile .slick-dots li.slick-active button::before{
    color: #000;
}

.diaporama-controls{
    position: absolute;
    bottom:14px;
    left:14px;
    z-index:500;
}
.diaporama-controls a{
    background: url(/static/img/diaporama-rond.png) 0 0;
    display: inline-block;
    width:16px;
    height:16px;
    margin:0 0 0 4px;
}
.diaporama-controls a.on{
    background: url(/static/img/diaporama-rond.png) -16px 0;
}

.search_result{
    border-top:1px solid #D9D9D9;
    padding:0 0 10px 0;
}
#search_paging{
    margin:10px 0 0;
    border-top:1px solid #D9D9D9;
}

.citation{
    display: inline-block;
    text-align: center;
    font-size:21px;
    color:#000000;
    font-family: 'Eurofurencelight', cursive;
    font-weight: normal;
    line-height:22px;
}
.citation-debut{
    display: inline-block;
    padding:0 0px 0px 50px;
    background: url(/static/img/citation-debut.png) 0 0 no-repeat;
}
.citation-fin{
    display: inline-block;
    padding:8px 50px 5px 0;
    background: url(/static/img/citation-fin.png) right bottom no-repeat;
}

blockquote{
    margin:0;
    padding:0;
}
q{
    margin:0;
    padding:0;
}

#colgauche .citation{
    width:100%;
    padding:16px;
    margin:0px 0 0 0;
    border-top:1px dashed #bababa;
    border-bottom:1px dashed #bababa;
    font-style:Italic;
    font-size:13px;
    font-family:"Trebuchet Ms";
    color:#666666;
}

#colgauche .citation-debut{
    padding:25px 0 0;
    background: url(/static/img/citationGdebut.jpg) 0 0 no-repeat;
}
#colgauche .citation-fin{
    padding:0 0 25px 0;
    background: url(/static/img/citationGfin.jpg) right bottom no-repeat;
}

#searchForm input{border:1px solid #788eae;padding:5px;}

#searchForm button, 
#searchForm input[type="button"], 
#searchForm input[type="reset"], 
#searchForm input[type="submit"]{
    background: #486897;
    color:#fff;
}

#pictos-g{
    padding:0;
    text-align: center;
}
#pictos-g a{
    display:inline-block;
    color:#596c9c;
    padding:20px 0 20px 0;
    font-size: 12px;
    text-align: center;
    min-width: 45px;
}
#pictos-g a span{
    display:inline-block;
    text-align: center;
    min-width: 45px;
}

#pictos-g a:hover{
    text-decoration:underline;
}
#picto-imprimer{
    margin-left:14px;
    background: url(/static/img/pictos-colg.png) 20px 0 no-repeat;
    min-width:46px;
}
#picto-partager{
    margin-left:10px;
}
#picto-partager a{
    padding-top:0;
}
#picto-envoyer{
    margin-left:10px;
    background: url(/static/img/pictos-colg.png) -104px 0 no-repeat;
    min-width:40px;
}

.st_sharethis_custom{
    background: url(/static/img/pictos-colg.png) -39px 0 no-repeat;
    padding:20px 0 0 0;
}
.ru .st_sharethis_custom{
    background: url(/static/img/pictos-colg.png) -25px 0 no-repeat;
    padding:20px 0 0 0;
}


.Bleuclair #picto-imprimer,
.Bleuclair #picto-envoyer,
.Bleuclair .st_sharethis_custom{background-image:url(/static/img/pictos-colg.png);color:#4783E7}

.Bleu #picto-imprimer,
.Bleu #picto-envoyer,
.Bleu .st_sharethis_custom{background-image:url(/static/img/pictos-colgbleu.png);color:#596C9C}

.Gris #picto-imprimer,
.Gris #picto-envoyer,
.Gris .st_sharethis_custom{background-image:url(/static/img/pictos-colggris.png);color:#756565}

.Violet #picto-imprimer,
.Violet #picto-envoyer,
.Violet .st_sharethis_custom{background-image:url(/static/img/pictos-colgviolet.png);color:#B0137B}

.Orange #picto-imprimer,
.Orange #picto-envoyer,
.Orange .st_sharethis_custom{background-image:url(/static/img/pictos-colgorange.png);color:#CD820F}


.en #picto-imprimer{
}
.en #picto-partager{
}
.en #picto-envoyer{
}

#social{
    display: none;
    padding-left: 13px;
    padding-top: 6px;
    position:absolute;
}
#social ul{
    list-style: none;
    padding:0;
    margin:0;
}
#social ul li a{
    display: inline-block;
    overflow:hidden;
    width:26px;
    height:17px;
    padding:0;
    margin:0;
}
#social ul a{
    text-indent: 6000px;
}

#video-top a{
    background-color:#000; 
    background-position:  center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.duration{ 
    color: #fff;
    padding: 2px 3px;
    position: absolute;
    right: 0;
    background:#000;
    top: 0;
    /*
    opacity:0.8;
    filter : alpha(opacity=80);  
    */
    font-family: arial;
    font-size: 11px;    
}

cite{display:block;font-style: normal;border-top:1px solid #dedede;padding:10px 0 10px}
cite .auteur{font-weight: bold}
cite .titre{font-style: normal}
cite .revue{font-style: italic}
cite .numero{}
cite .date{}
cite .page{}
cite .oeuvre{}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.refs-bas-page p{
    margin:0;
}

/*
#main            { height: 3000px;}
html>body #main  { height: auto; min-height:3000px;}
*+html>body #main{ min-height: 3000px;}
*/

.facebook{
    display:inline-block;
    background: url(/static/img/picto-fb.png) left center no-repeat;
    padding:0 0 0 26px; 
    margin:0 0 0 20px;
}

.rappelTitreMenu{    
    display: none;
    padding:30px 25px 25px;
    color:#6da2fc;
    font-size:24px;
    font-family: 'Lobster Two', cursive;
    text-align: center;
}

h1{
    color:#4783e7;
    font-size:25px;
    font-family: 'Eurofurencelight', cursive;
    font-weight: normal;
}

h2{
    color:#4783e7;
    font-size:19px;
    font-family: 'Eurofurencelight', cursive;
    font-weight: normal;
    line-height:22px;
}

h3{
    font-weight: normal;
}

.Bleuclair #footer-stairs{background: url(/static/img/footer1.jpg);padding-top:84px}
.Bleu #footer-stairs{background: url(/static/img/footer2.jpg);padding-top:84px}
.Gris #footer-stairs{background: url(/static/img/footer3.jpg);padding-top:84px}
.Violet #footer-stairs{background: url(/static/img/footer4.jpg);padding-top:84px}
.Orange #footer-stairs{background: url(/static/img/footer5.jpg);padding-top:84px}

footer{
    position:relative;
    background: url(/static/img/footer.jpg) no-repeat right -320px #867A86;
    padding:120px 0 80px 25px;
    /*height:472px;*/
    color:#dadada;
}
footer ul{
    padding:0;
}
footer p{
       margin:5px 0; 
}
footer a, footer a:visited {
    color:#DADADA;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}
footer #liensfooters{
    position:relative;
    bottom:5px;
    width:100%;
}

footer #liensfooters a, 
footer #liensfooters a:hover,
footer #liensfooters a:visited,
footer #liensfooters span{
    color:#333;
    font-weight: bold;
    float:none;
    margin:0 8px;
}
.cb{clear:both}

.fleft{
    float:left;
}
.fright{
    float:right;
}


form#contact{
    color:#4D4D4D;
}
#sendtoafriend-message{
    color:#4D4D4D;
    padding:15px 0;
    font-weight: bold;
}

#container form#contact {
    width: 98%;
    margin: 0 auto;
    padding:1px;
    overflow: auto;
}
     
#container form#contact label {
        color: #4c4c4c;
    }
     
    /**
     * Adding red star after label of each required Zend_Form_Element
     */
    form#contact label.required {
        
    }
 
    form#contact dl{margin: 0}
    
    /**
     * Horizontally centering submit button, 'submit-container' class added by jquery
     */
    form#contact dd.submit-container {
        clear: both;
        text-align: center;
    }
 
    form#contact fieldset {
        border: none;
    }
 
    form#contact dd {
        margin: 0 0 0.7em 0;
    }
 
        form#contact dd p.description {
            width: 100%;
            max-width: 350px;
            margin: 0.2em 0 0 0.2em;
            padding: 0;
            color: #4c4c4c;
            font-size: 0.85em;
        }
 
        form#contact dd ul.errors {
            margin: 0 0 0 1.6em;
            padding: 0;
        }
 
            form#contact dd ul.errors li {
                width: 100%;
                max-width: 350px;
                margin-top: 0.2em;
                margin: 0.2em 0 0 0;
                padding: 0;
                color: #ff0000;
                font-size: 0.9em;
            }
 
 
    form#contact input,
    form#contact button,
    form#contact textarea,
    form#contact select {
        display:block;
        width: 100%;
        max-width: 350px;
        padding: 0.5em;
        color: #000;
        font-size: 1em;
        background: #fff;
        border: 1px #6F9AE2 solid;
        /*
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        */
    }
    
    form#contact input[type="submit"]{
        background: #6F9AE2;
        color:#fff;
       max-width: 365px;
    }
    
    
form#contact button {
        border: 1px #fff dashed !important;
    }
    
    /**
     * Highlighting current element
     */
form#contact input:focus,
form#contact select:focus,
form#contact textarea:focus {
        outline: 1px solid #6F9AE2;
    }
    
.bouton,.button {
       background: #6F9AE2;
       color:#fff;
       cursor:pointer;
       text-decoration:none !important;
    }
 
form#contact select {
        max-width: 365px;
    }
 
form#contact textarea {
        height: 100px;
    }
     
    /**
     * Highlighting elements that were found invalid.
     * 'error' class added by jquery.
     */
form#contact input.error,
form#contact select.error,
form#contact textarea.error {
        background: #ff0000;
    }


.infos{
    font-weight: bold;
    padding:20px 5px;
}

#newsletter-label{
    padding: 0 0 20px 20px;
    position: absolute;
    height:30px;
}
#newsletter-element{
    position:absolute;
    margin:2px 0 0 0 !important;
}

#submit-element{
    margin-top:20px !important;
}

.colg-textlibre {
    color:#707070;
    text-align: justify;
}
.colgauchetitre{
    /*border-top:1px solid #dedede;*/
    color: #333333;
    font-family: 'Raleway',cursive;
    font-size: 18px;
    padding: 20px 0 5px;
    margin: 20px 0 0;
    text-align: center;
}
.one-texte-libre{
    margin: 20px 0 0;
}
.colg-textlibre p{
    margin: 4px 0;
}
.colg-textlibre img{
    width: 100%;
    max-width: 197px;
    height: auto !important;
}
.colg-textlibre a:hover{
    text-decoration: underline;
}

.one-texte-libre a span{
    display: block;
    margin: 0 5px;
}

/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.pimcore_tag_input,
.pimcore_tag_textarea{
    width: 100%;
    background: #fff; 
    border: 1px solid  #d0d0d0;
    min-height: 35px;
}


/* =============================================================================
   Print styles.
   Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }

    /* Specif */
    body{
        background: none;
    }
    #colgauche,
    #coldroite{display:none}

    header,
    footer{
        display:none
    }
    #filariane{display:none}
    #video-top{display:none}
}

img {max-width: 100%;height: auto !important;}

.vignettesCustom{text-align: center;}
.vignettesComplete{text-align: center;}
.vignettesCustom .pimcore_area_content{
    display: inline-block;
    vertical-align: top;
}
.vignettesCustom .pimcore_area_content a{
    display: inline-block;
    width: 175px;
}
.vignettesComplete a{
    position:relative;
    width: 175px;
    display: inline-block;
    vertical-align: top;
}
.vignettesComplete a span{
    display: block;
}

.pimcore_tag_video iframe{
    max-width: 100% !important;
}

.mobile-wrapper{
    padding: 0 20px;
}

/* Slick Slider */
.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
.slick-dots,.slick-next,.slick-prev{position:absolute;display:block;padding:0}.slick-dots li button:before,.slick-next:before,.slick-prev:before{font-family:slick;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-loading .slick-list{background:url(/static/img/ajax-loader.gif) center center no-repeat #fff}.slick-next,.slick-prev{font-size:0;line-height:0;top:50%;width:20px;height:20px;margin-top:-10px\9;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-size:20px;line-height:1;opacity:.75;color:#fff}.slick-prev{left:-25px}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←'}.slick-next:before,[dir=rtl] .slick-prev:before{content:'→'}.slick-next{right:-25px}[dir=rtl] .slick-next{right:auto;left:-25px}[dir=rtl] .slick-next:before{content:'←'}.slick-slider{margin-bottom:30px}.slick-dots{bottom:-45px;width:100%;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000}.slick-dots li.slick-active button:before{opacity:.75;color:#000}
.accueilrandomvideomobile{background: rgba(0, 0, 0, 1);}
.accueilrandomvideomobile .imgc{background: #000;}
.accueilrandomvideomobile .random-textes {
    display: block;
    color: #fff;
    left: 0;
    padding: 9px 0;
    position: relative;
    width: 100%;
}
.accueilrandomvideomobile .random-titre {font-family: "Lobster Two",cursive;font-size: 13px;}
.accueilrandomvideomobile .random-textes span{padding:0 8px;display:block;overflow: hidden;}
.slick-arrow{display: none !important;}
.accueilrandomvideomobile  .slick-list a{text-align: center;}

#accueilrandomvideos{display: none;}
.accueilrandomvideomobile{display: block;}
#diaporama{display: none;}
.diaporamamobile{display: block;}

.slick-slider{margin: 0;padding: 0 0 40px 0}
.slick-dots{bottom: 0px;margin: 0;padding:10px 0;background: #000}
.slick-dots li button::before{font-size: 45px;color: #fff;}
.slick-dots li button::before{opacity: 0.6}
.slick-dots li.slick-active button::before{color: #e995b7}
.accueilrandomvideomobile .imgc{height: 170px;overflow: hidden;}
.accueilrandomvideomobile img{display: inline-block;}

.diaporamamobile{background: #fff;}
.diaporamamobile .slick-dots li button::before{color: #000;}

#pc-cookie-notice #pc-button button{
    background: #fff !important;
}
#pc-message{padding:0 5px;}

.footercol{
    width:100%;
}

@media only screen and (min-width: 340px) {
    #video-list a.video{
        width:50%;
    }
}

@media only screen and (min-width: 420px) {
    .accueilrandomvideomobile img{display: block;}
    .accueilrandomvideomobile .imgc{height: auto;}
}


@media only screen and (min-width: 640px) {
}


@media only screen and (max-width: 970px) {
    #contenu table,  #contenu tr, #contenu tbody,  #contenu td{display: block;width: 100% !important;height:auto;}
}


#menu-mobile{display: block;}
#menu-top{display: none;}

ul.navigation{display:none;}

#colgauche{width:100%;}
.colgauchetextlibre{display: none;}

.coldroitei .mobile-wrapper{
    padding: 0;
}

@media only screen and (min-width: 970px) {

    body{background: url(/static/img/fond.jpg) center top no-repeat fixed;}

    #menu-mobile{display: none;}
    #menu-top{display: block;}
    #mp-menu{display: none;}

    .colgauchetextlibre{display: block;}

    ul.navigation{display:block;}

    #colgauche{
        width:197px;
    }
    #colgauche .citation{
        width:147px;
        margin:20px 0 0 0;
    }

    .rappelTitreMenu{    
        display: block;
        padding:30px 0px 25px;
    }
    #container{max-width: 960px;}
    #flags{left:0;}

    #accueilrandomvideos{display: block;}
    .accueilrandomvideomobile{display: none;}
    #diaporama{display: block;}
    .diaporamamobile{display: none;}

    .mobile-wrapper{
        padding: 0 0;
    }

    .logoc{
        padding: 0;
    }
    #logo{
        float:left;
    }
    #nav-top{
        background: url(/static/img/menu-top-fond.png) right top no-repeat;
        float:right;
        height:27px;
        line-height: 25px;
        color:#fff;
        padding-left: 400px;
        width: auto;
        text-align: left;
    }
    #pictos-g{
        padding:20px 0 0 0;
    }

    div.table{
        display: table;
        width: 100%;
    }
    div#coldroite{
        width:204px;
    }
    div.col{
        display: table-cell;
        vertical-align: top;
        padding:0 5px;
        border:1px solid #000;
    }
    div.cell{
        display: table-cell;
        vertical-align: top;
    }
    footer #liensfooters{
        position:absolute;
        bottom:5px;
        width:840px;
    }
    .footercol{
        width:140px;
        padding:0 15px;
        float:left;
    }

    .vignettesCustom{text-align: left;}
    .vignettesComplete{text-align: left;}
    .vignettesComplete a{display:block;padding-bottom:20px}

    aside .coldroitei{
        padding:80px 0 0 29px;
    }

    #video-list a.video{
        width:219px;
    }
    #video-list a img{
        display:block;
        max-width: 219px;
    }
    a#videos-next{
        display: inline-block;
        float:left;
        margin:36px 0 0 12px;
    }

    footer{
        background: url(/static/img/footer.jpg) no-repeat top left #867A86;
        padding:40px 0 280px 60px;
    }
    footer #liensfooters a, 
    footer #liensfooters a:hover,
    footer #liensfooters a:visited,
    footer #liensfooters span{
        float:right;
    }
}














*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body, .container, .scroller {
    height: 100%;
}

.scroller {
    overflow-y: scroll;
}

.scroller,
.scroller-inner {
    position: relative;
}

.container {
    position: relative;
    overflow: hidden;
    background: #34495e;
}

.menu-trigger {
    position: relative;
    padding-left: 60px;
    font-size: 0.9em;
}

.menu-trigger:before {
    position: absolute;
    top: 2px;
    left: 0;
    width: 40px;
    height: 6px;
    background: #fff;
    box-shadow: 0 6px #34495e, 0 12px #fff, 0 18px #34495e, 0 24px #fff;
    content: '';
}

.mp-pusher {
    position: relative;
    left: 0;
    height: 100%;
    /*perspective: 1000px;*/
}

.mp-menu {
    display: none;
    position: absolute; /* we can't use fixed here :( */
    top: 0;
    left: 0;
    z-index: 1;
    width: 300px;
    height: 80%;
    left:-100%;
/*
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);*/
}

body.mp-pushed .mp-menu{
    display: block;
    left:0;
}

.mp-level {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #336ca6;
    left:-100%;
    /*
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    */
}

.mp-level.show{
    left: 0;
}

.mp-menu > .mp-level{z-index: 1;}
.mp-menu > .mp-level .mp-level{z-index: 2;}
.mp-menu > .mp-level .mp-level .mp-level{z-index: 3;}
.mp-menu > .mp-level .mp-level .mp-level .mp-level{z-index: 4;}
.mp-menu > .mp-level .mp-level .mp-level .mp-level .mp-level{z-index: 5;}
.mp-menu > .mp-level .mp-level .mp-level .mp-level .mp-level .mp-level{z-index: 6;}
.mp-menu > .mp-level .mp-level .mp-level .mp-level .mp-level .mp-level .mp-level{z-index: 7;}

/* overlays for pusher and for level that gets covered */
.mp-pusher::after,
.mp-level::after,
.mp-level::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    content: '';
    opacity: 0;
}

.mp-pusher::after,
.mp-level::after {
    background: rgba(0,0,0,0.3);
    -webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
    -moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
    transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
}

.mp-level::after {
    z-index: -1;
}

.container{
    overflow: hidden;
}

.mp-pusher.mp-pushed::after,
.mp-level.mp-level-overlay::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.mp-level.mp-level-overlay {
    cursor: pointer;
}

.mp-level.mp-level-overlay.mp-level::before {
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 1;
}

.mp-pusher,
.mp-level {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

/* overlap */
.mp-overlap .mp-level.mp-level-open {
    box-shadow: 1px 0 2px rgba(0,0,0,0.2);

    /*
    -webkit-transform: translate3d(-40px, 0, 0);
    -moz-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0);*/
}

/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open {
    box-shadow: none;
    /*
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);*/
}

/* cover */
.mp-cover .mp-level.mp-level-open {
    /*
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);*/
}

.mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
    /*
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);*/
}

/* content style */
.mp-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-menu h2 {
    margin: 0;
    padding: 1em;
    color: rgba(0,0,0,0.4);
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
    font-weight: 300;
    font-size: 2em;
}

.mp-menu.mp-overlap h2::before {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 8px;
    font-size: 75%;
    line-height: 1.8;
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
    transition: opacity 0.3s, transform 0.1s 0.3s;
    /*
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);*/
}

.mp-menu.mp-cover h2 {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1em;
}

.mp-overlap .mp-level.mp-level-overlay > h2::before {
    opacity: 1;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    /*
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
    */
}

.mp-menu ul li > a {
    display: block;
    padding: 1em 1em 1em 1.8em;
    outline: none;
    box-shadow: inset 0 -1px rgba(0,0,0,0.2);
    text-shadow: 0 0 1px rgba(255,255,255,0.1);
    font-size: 1.4em;
    -webkit-transition: background 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, box-shadow 0.3s;
    transition: background 0.3s, box-shadow 0.3s;
}

.mp-menu ul li::before {
    position: absolute;
    left: 10px;
    z-index: -1;
    color: rgba(0,0,0,0.2);
    line-height: 3.5;
}

.mp-level > ul > li:first-child > a {
    box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}

.mp-menu ul li a:hover,
.mp-level > ul > li:first-child > a:hover {
    box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-menu .mp-level.mp-level-overlay > ul > li > a,
.mp-level.mp-level-overlay > ul > li:first-child > a {
    box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-level > ul > li:first-child > a:hover,
.mp-level.mp-level-overlay > ul > li:first-child > a {
    box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0);
} /* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */

.mp-back {
    background: rgba(0,0,0,0.1);
    outline: none;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    display: block;
    font-size: 0.8em;
    padding: 1em;
    position: relative;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
}

.mp-back::after {
}

.mp-menu .mp-level.mp-level-overlay > .mp-back,
.mp-menu .mp-level.mp-level-overlay > .mp-back::after {
    background: transparent;
    box-shadow: none;
    color: transparent;
}

/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/* We'll show the first level only */
.no-csstransforms3d .mp-pusher/*,
.no-js .mp-pusher*/{
    padding-left: 300px;
}

/*
.no-csstransforms3d .mp-menu .mp-level,
.no-js .mp-menu .mp-level {
    display: none;
}

.no-csstransforms3d .mp-menu > .mp-level,
.no-js .mp-menu > .mp-level {
    display: block;
}*/

.menu-trigger{
    margin: 0 auto;
    color: #6da2fc;
    font-family: "Lobster Two",cursive;
    font-size: 24px;
    padding: 30px 0 25px 43px;
    text-align: center;
}
.menu-trigger::before{
    left: 0px;
    box-shadow: 0 5px transparent, 0 10px #6da2fc, 0 15px transparent, 0 20px #6da2fc;
    background: #6da2fc;
    top: 32px;
    width: 31px;
}
#menu-mobile {
    padding: 10px 0;
    text-align: center;
    background: #19181D;
}
.mp-menu ul li a{
    font-size: 1em;
    font-weight: normal;
    text-align: left;
}
.mp-level{
    background: transparent;
}

.mp-menu a{
    position: relative;
    font-family:"Trebuchet MS";
}
.mp-menu a.withchilds::after{
    content:url("/static/img/picto+simple.png");
    position: absolute;
    right: 8px;top:15px;
}
.mp-level-open{z-index: 20;}

.mp-menu ul{
    background: #19181D;
    min-height: 100%;
}
.mp-back{
    background: #191921;
    padding: 1em 1em 1em 1.8em;
}
.mp-menu h2{
    color: #fff;
    background: #191921;
    padding: 1em 1em 1em 1.8em;
}
li.menumobile-level1 a{background: #355998;color:#93bbfd;}
li.menumobile-level2 a{background: #28466E;color:#6888ff;}
li.menumobile-level3 a{background: #20334C;color:#cdcdcd;}
li.menumobile-level4 a{background: #21293A;color:#e622cd;}
li.menumobile-level5 a{background: #23222C;color:#fead00;}
a.mp-back{color: #fff !important;}