/*
Theme Name: Route Manager
Version: 1.0
Theme URI: http://www.bonbay.fr/
Author: Bonbay
Author URI: http://www.bonbay.fr/
Text Domain:
*/

/*	Copyright: (c) 2013 Alexander "Alx" Agnarson
	License: GNU General Public License v3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html*/
	
/*
MDP USER 
hccqY_~3_v,7
*/


/*RESET*/
/*---------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}


/*  Base awesome
================================================== */
.fa { width: 1em; text-align: center; }


/*  Base formulaire
================================================== */
input, textarea, button, select, label { font-family: inherit; }
input,
textarea,
button,
select,
label { font-size: 14px; }
input::-moz-focus-inner,
button::-moz-focus-inner { border: 0; padding: 0; }
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"],
input[type="tel"],
button,
select,
textarea { margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0; border-radius: 0; width:100%;}
input,
textarea,
select,
button { -moz-appearance: none; -webkit-appearance: none; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .2s ease; }
input[type="checkbox"] { -moz-appearance: checkbox; -webkit-appearance: checkbox; }
input[type="radio"] { -moz-appearance: radio; -webkit-appearance: radio; }
label { font-weight: 600; color: #3a7f81; }
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    background: #fff;
    border: 1px solid #3a7f81;
    color: #000;
    display: block;
    max-width: 100%;
    outline: none;
    padding: 7px 8px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus { border-color: #ccc; color: #444; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1); box-shadow: 0 0 3px rgba(0,0,0,0.1); }
label .required { color: #8d001a; }
input[type="submit"],
button[type="submit"] {
    background: #3a7f81;
    color: #fff;
    padding: 8px 14px;
    font-weight: 600;
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: 20px;
    max-width: 50%;
}
input[type="submit"]:hover,
button[type="submit"]:hover { background: #b78b14; }

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing{
    border: 1px solid #8d001a;
}


/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: auto; padding: 0;width:100%;display: block;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; position:relative} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block; border: none;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {position: relative;  zoom: 1; }
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 37px; height: 49px;  display: block; background: url(gfx/fleches.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 5000; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav .flex-next {background-position: 100% 0; right:-80px; }
.flex-direction-nav .flex-prev {left:-80px;}
.flexslider:hover .flex-next {opacity: 0.8; }
.flexslider:hover .flex-prev {opacity: 0.8; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled { cursor: default;}

/* Control Nav */
.flex-control-nav { width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; display: inline;}
.flex-control-paging{
    width: 50%; position: absolute; left: 25%;  bottom:0px; text-align: center; height: 9px;
}
.flex-control-paging li{ display: inline-block; margin: 0 6px; width: 60px; height: 9px; }
.flex-control-paging li a {
    width: 60px;
    height: 9px;
    display: inline-block;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    text-indent: -9999px;
}
.flex-control-paging li a:hover { background:#fff;}
.flex-control-paging li a.flex-active { background: #fff; cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%;   margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

a.flex-caption{ background: url(img/fleche-txt.png) no-repeat;  padding-left:25px; ; padding-right:15px; font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color:#000; display:block; width:auto; position:absolute; bottom: 0px; width: 60%; left:22%; text-decoration:none; height: 36px; }
div.flex-caption{ background: url(img/fleche-txt.png) no-repeat;  padding-left:25px; ; padding-right:15px; font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color:#000; display:block; width:auto; position:absolute; bottom: 0px; width: 60%; left:22%; text-decoration:none; height: 36px; }
.etiquette-slogan{padding-top: 5px;}
a.flex-caption:hover{background: url(../img/fleche-txt.png) no-repeat 5px 12px #e2003b;color:#fff;text-decoration:none;}


@media screen and (max-width: 480px) {
 a.flex-caption{ background: url(../img/fleche-txt.png); font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color:#000; display:block; width:auto; position:absolute; bottom: 0px; width: 60%; left:22%; text-decoration:none; height: 36px; }
a.flex-caption:hover{background: url(../img/fleche-txt.png) no-repeat 5px 5px #e2003b;color:#fff;text-decoration:none;}
}

/** GRID ***/
  .row{
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: row wrap;
  }
  .row.nowrap{ flex-flow: row nowrap; }
  .row.flow-row{ flex-flow: row wrap; }

  @media (max-width: 767px){
      .row{ flex-flow: column wrap; }
      .row.nowrap{ flex-flow: column nowrap; }
  }

    .spannomargin-1, .spannomargin-2, .spannomargin-3,
    .spannomargin-4, .spannomargin-5, .spannomargin-6,
    .spannomargin-7, .spannomargin-8, .spannomargin-9,
    .spannomargin-10, .spannomargin-11, .spannomargin-12,
    .spannomargin-13, .spannomargin-14, .spannomargin-15,
    .spannomargin-16, .spannomargin-17, .spannomargin-18,
    .spannomargin-19, .spannomargin-20, .spannomargin-21,
    .spannomargin-22, .spannomargin-23, .spannomargin-24{ width: 100%; }

/* tablette portrait */
@media (min-width: 768px){
    .spannomargin-1{ width: 25%; }
    .spannomargin-2{ width: 25%; }
    .spannomargin-3{ width: 25%; }
    .spannomargin-4{ width: 25%; }
    .spannomargin-5{ width: 50%; }
    .spannomargin-6{ width: 50%; }
    .spannomargin-7{ width: 50%; }
    .spannomargin-8{ width: 50%; }
    .spannomargin-9{ width: 50%; }
    .spannomargin-10{ width: 50%; }
    .spannomargin-11{ width: 50%; }
    .spannomargin-12{ width: 50%; }
    .spannomargin-13{ width: 50%; }
    .spannomargin-14{ width: 50%; }
    .spannomargin-15{ width: 50%; }
    .spannomargin-16{ width: 50%; }
    .spannomargin-17{ width: 75%; }
    .spannomargin-18{ width: 75%; }
    .spannomargin-19{ width: 75%; }
    .spannomargin-20{ width: 75%; }
    .spannomargin-21{ width: 100%; }
    .spannomargin-22{ width: 100%; }
    .spannomargin-23{ width: 100%; }
    .spannomargin-24{ width: 100%; }
}
/* tablette paysage */
@media (min-width: 1024px){
    .spannomargin-1{ width: 4.16666667%; }
    .spannomargin-2{ width: 8.33333333%; }
    .spannomargin-3{ width: 12.5%; }
    .spannomargin-4{ width: 16.666666666667%; }
    .spannomargin-5{ width: 20.83333335%; }
    .spannomargin-6{ width: 25%; }
    .spannomargin-7{ width: 29.16666667%; }
    .spannomargin-8{ width: 33.333%; }
    .spannomargin-9{ width: 37.5%; }
    .spannomargin-10{ width: 41.66%; }
    .spannomargin-11{ width: 45.833333333333%; }
    .spannomargin-12{ width: 50%; }
    .spannomargin-13{ width: 54.166666666667%; }
    .spannomargin-14{ width: 58.3333333%; }
    .spannomargin-15{ width: 62.5%; }
    .spannomargin-16{ width: 66.666%; }
    .spannomargin-17{ width: 70.8266666%; }
    .spannomargin-18{ width: 75%; }
    .spannomargin-19{ width: 79.16%; }
    .spannomargin-20{ width: 83.32%; }
    .spannomargin-21{ width: 87.4866666%; }
    .spannomargin-22{ width: 91.6533333%; }
    .spannomargin-23{ width: 95.82%; }
    .spannomargin-24{ width: 100%; }
    .mille{ max-width: 960px; width: 100%; }
}
@media (min-width: 1280px){
    .mille{ max-width: 1080px; }
}
@media (min-width: 1480px){
    .mille{ max-width: 1440px; }
}

.nomobile{ display: none; }
@media (min-width: 1024px){ .nomobile{ display: block; } }
.onlymobile{ display: block; }
@media (min-width: 1024px){ .onlymobile{ display: none; } }

/*****************************************/

/*FONTS*/
    .thin{ font-weight: 100; }
    .light{ font-weight: 300; }
    .regular{ font-weight: 400; }
    .medium{ font-weight: 500; }
    .semibold{ font-weight: 600; }
    .bold{ font-weight: 700; }
    .ultrabold{ font-weight: 900; }

/**/

img, iframe{ max-width: 100%; }
h1, h2, h3, h4, h5, h6{ }
h1{ font-size: 32px; }
h2{ font-size: 28px; }
h3{ font-size: 24px; }
h4{ font-size: 20px; }
.italique, i, em{ font-style: italic; }
.lowercase{ text-transform: lowercase; }
.uppercase{ text-transform: uppercase; }
.black, a.black{ color:#000; }
.white, a.white{ color: #fff; }
.grey, a.grey{ color: #959393; }
.green, a.green{ color:#3a7f81; }
.orange, a.orange{ color:#b78b14; }

strong, b{ font-weight: 700; }
.align-left, .alignleft{ text-align: left; justify-content: flex-start; }
.align-right, .alignright{ text-align: right; justify-content: flex-end; }
.align-center, .aligncenter{ text-align: center; justify-content: center; }
.middle{ align-items: center; }

img.alignleft, img.align-left{ float: left; margin: 0 1em 1em 0 }
img.alignright, img.align-right{ float: right; margin: 0 0 1em 1em }
img.aligncenter, img.align-center{ float: none; margin: 0 auto 1em auto }

.justify{ text-align: justify; }

.button{
    display: block;
    width: auto;
    text-decoration: underline;
    font-size: 16px;
    text-align: center;
    transition: ease-in-out all 0.1s;
    cursor: pointer;
    background: white;
    text-decoration: none;
}
.button:hover{
    background: black!important;
    text-decoration: none;
}

a{ color: #000; text-decoration: none; cursor: pointer; }
a:hover{ color: #959393; text-decoration: underline; }
p{ margin: 10px 0; }
label, input[type="text"], input[type="tel"], input[type="email"], textarea, select{
    width: 100%;
    margin: 5px 0;
    font-size: 16px;
}
article ul{ margin: 1em 0; }
article ul li{ list-style-type: square; margin-left: 2em; }

.gallery {
  display: flex;
  width: 100%;
  align-items: flex-start;
  flex-flow: row wrap;
}
.gallery-item{ margin: 0 1rem 1rem 0; }


.left{ float: left; }
.right{ float: right; }
.center{ margin: 0 auto; }

.relative{ position: relative; }
.absolute{ position: absolute; }

.error{ color: red; font-weight: bold; }

/*****/
/* base */

body{
    background: rgb(57,127,128);
    background: linear-gradient(90deg, rgba(57,127,128,1) 12.5%, rgba(116,188,194,1) 87.5%);
    margin:0;
    padding:0;
    color:#000;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
}
body#home{
    background: #3a7f81 url('gfx/background-home.jpg') no-repeat center top;
    background-size: cover;
}
.conteneur{ max-width: 1920px; margin: 0 auto; }

header{
    width: 100%;
    position: relative;
}
#home header .row.middle{ height: 13vw; }
header .row.middle{ height: 8vw; }

.slider{ position: relative; }
.slider ul{ margin:0; padding:0;  }

main, footer, .home_contenu{ width: 100%; }
label, input[type="text"], input[type="tel"], input[type="email"], textarea, select{
    width: 100%;
    margin: 8px 0;
}
.clear{ width: 100%; float: left; clear: left; height: 1px; }

#page a.logo img{ max-width: 95%; }


.menu-toggle{
    width: 100%;
    padding: 54px 0 0 0;
    background: transparent url('gfx/menu.png') no-repeat center top;
    border: 0;
    display: block;
    text-align: center;
    cursor: pointer;
    margin: .5rem 0 0 0;
}
.menu-toggle:active, 
.menu-toggle:focus, 
.menu-toggle:hover{
    text-decoration: none;
}
.menu-toggle span{ 
    display: inline-block;
    color: #fff;
    width: 100%;
    margin: .75rem 0 1rem 0;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: .2rem;
    text-transform : uppercase;
 }
.menu-toggle.toggled-on span{ color: black; }
.menu-menu-principal-container{ display: flex; position: relative; width: 100%; }
.nav-menu{ 
    display: flex; 
    flex-flow: column wrap;
    height: 0; 
    padding:0; 
    margin:0; 
    z-index: 10001; 
    width: 100%; 
    opacity: 0; 
    transition: ease-in-out all .2s;
    align-items: flex-start;
}
.nav-menu.toggled-on{ height: auto; opacity: 1; transition: ease-in-out all .2s; }
.nav-menu li{ display: none; }
.nav-menu.toggled-on li{ display: inline-flex; }
#menu-menu-principal.nav-menu{
    position: absolute;
    top: .25rem;
    right: 1rem;
    width: 200%;
    background: rgba(255,255,255,.9);
    padding: 1rem 0;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: 2px 5px 15px rgba(0,0,0,.3);
}
nav ul li{
    list-style-type: none;
    display: inline-flex;
    text-align: center;
    background: transparent;
    transition: ease-in-out all 0.1s;
    margin: .5rem 5%;
    width: 90%;
}
nav ul li a{
    font-size: .75rem;
    text-transform: uppercase;
    display: inline-block;
    color: black;
    text-decoration: none;
    line-height: 1rem;
    padding: 0;
    margin: 0;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: center;
}
nav ul li:hover{ }
nav ul li:hover a, 
nav ul li.current-menu-item a{
    transition: ease-in-out all 0.1s;
    text-decoration: none;
    color: #3a8081;
}
/*nav ul li ul{
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 5001;
    padding: 0;
    background: white;
    border: 1px solid #f6772b;
    display: none;
}
nav ul li:hover ul{ display: block;  }
nav ul li ul li{
    display: list-item;
}
nav ul li ul li a{
    color: #f6772b;
    border-bottom: 1px solid white;
    padding: 6px 14px;
    margin: 8px 10px;
}
nav ul li ul li a:hover{
    color: black;
    border-bottom: 1px solid black;
    text-decoration: none;
}*/
header a.gest-perso{
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
}
header .gest-perso img{
    margin: 0 auto;
}
header .gest-perso span{
    display: inline-block;
    color: #fff;
    width: 100%;
    margin: .75rem 0 1rem 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .05rem;
    text-transform : uppercase;
    text-align: center;
}
header .gest-perso:hover{ text-decoration: none; }
header .gest-perso:hover span{ color: black; }

#page .fond{ background:#f5f4f4; }
#page header{ 
    background: rgb(57,127,128);
    background: linear-gradient(90deg, rgba(57,127,128,1) 0%, rgba(116,188,194,1) 100%);
    border-bottom-right-radius: 50px;
    position: relative;
 }
#page main{ position: relative; min-height: 30vw; }
#page header::after{ 
    content: " ";
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 50px;
    height: 50px;
    background:  rgba(57,127,128,1);
    z-index: 1;
}
#page main::before{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background:#f5f4f4;
    border-radius: 50px 0 0 0;
    z-index: 2;
}
#page main::after{
    content: " ";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    background:#f5f4f4;
    border-radius: 0 0 50px 0;
    z-index: 2;
}
#page main{ padding: 50px 0 70px 0; }

#page footer{ 
    background: rgb(57,127,128);
    background: linear-gradient(90deg, rgba(57,127,128,1) 0%, rgba(116,188,194,1) 100%);
    border-top-left-radius: 50px;
    position: relative;
 }
 #page footer::after{ 
    content: " ";
    position: absolute;
    right: 0;
    top: -50px;
    width: 50px;
    height: 50px;
    background:  rgba(116,188,194,1);
    z-index: 1;
 }
footer, footer a{ color:#bad8d8; font-size: 14px; font-weight: 300; }
footer a:hover{ color: white; }
footer p{ margin: 0; }
footer{ display: flex; align-items: center; justify-content: center; flex-flow: row wrap; height: 5vw; }
#menu-pied-de-page{ 
    height: auto; 
    opacity: 1; 
    flex-flow: row wrap; 
    margin: 0 .5rem 0 0; 
    padding: 0 .5rem 0 0; 
    border-right: 1px solid #bad8d8;  
    width: auto; 
}
#menu-pied-de-page li{ 
    display: inline; 
    width: auto; 
    padding: 0 0 0 .5rem; 
    margin: 0 0 0 .5rem; 
    border-left: 1px solid #bad8d8; 
}
/* HOME */
.content p{ font-size: 15px; line-height: 24px; margin: 0 auto 1rem auto; text-align: justify; }
#home .content{ margin: 4vw auto 6vw auto; }
.encart-blanc{
    display: block;
    width: 50%;
    padding: 3vw 25%;
    background: white;
    border-radius: 50px;
    transition: ease-in-out all .1s;
    margin: 2vw 0;
}
.encart-blanc h2, 
.encart-vert h2, 
.encart-noir h2{ 
    font-weight: 300; 
    font-size: 17px; 
    line-height: 24px;
    text-transform: uppercase; 
    min-height: 72px;
    margin: 1rem 0 0 0;
 }
 .encart-blanc:hover{ color: black; text-decoration: none; background: #deebd3; transition: ease-in-out all .1s; }

/* page pb pdt transport en cours */
#page .pb-transport-encours .fond{
    background:#e6e2de url('gfx/background-etape1.jpg') no-repeat center center;
    background-size: cover;
}
#page .pb-transport-encours .row.middle{ justify-content: center; }
#page .pb-transport-encours main::after{ background:#e7e5e5; box-shadow: -1rem -1rem 1rem #e7e5e5; }
#page .pb-transport-encours main::before{ background: #eeeeef; box-shadow: 1rem 1rem 1rem #eeeeef; }
#page .encart-blanc.small{
    width: 78%;
    padding: 2vw 8%;
    background: rgba(255,255,255,.72);
    margin: .5vw 3%;
    border-radius: 30px;
}
#page .encart-noir.small{
    display: block;
    width: 78%;
    padding: 2vw 8%;
    background: black;
    margin: .5vw 3%;
    border-radius: 30px;
    transition: ease-in-out all .1s;
}
#page .encart-vert.small{
    display: block;
    width: 78%;
    padding: 2vw 8%;
    background: #397f80;
    margin: .5vw 3%;
    border-radius: 30px;
    transition: ease-in-out all .1s;
}
.encart-blanc h2 span{ 
    color:#9f9f9f; 
    text-transform: none; 
    display: inline-block; 
    width: 100%; 
    letter-spacing: 0; 
    font-size: 16px;
    line-height: 18px;
}
.encart-vert.small h2, .encart-noir.small h2{ color: white; }
#page .encart-blanc.small h2, 
#page .encart-vert.small h2, 
#page .encart-noir.small h2{ min-height: 90px;  }

.encart-vert{
    display: block;
    width: 78%;
    padding: 2vw 8%;
    background: #357b7c;
    margin: .5vw 3%;
    border-radius: 30px;
    transition: ease-in-out all .1s;
}
.encart-vert h2{ 
    color: white;
    font-weight: 300; 
    font-size: 17px; 
    line-height: 24px;
    text-transform: uppercase; 
    min-height: 90px;
    margin: 1rem 0 0 0;
    transition: ease-in-out all .1s;
}
.encart-vert:hover{ text-decoration: none; background: black; transition: ease-in-out all .1s;}
.encart-vert:hover h2{ transition: ease-in-out all .1s; }
#page .encart-blanc.small:hover, 
#page .encart-vert.small:hover, 
#page .encart-noir.small:hover{ background: rgb(222,235,211); text-decoration: none; } 
#page .encart-vert.small:hover h2, 
#page .encart-noir.small:hover h2{ color: black; }
#page h1{ font-size: 28px; line-height: 34px; font-weight: 600; margin-left: 1rem; }
#page .lignetitre{ margin: 0 0 4vw 0; }
#page .pb-transport-encours .lignetitre{ margin: 2vw 0; }
#page .lignetitre h2{ 
    font-size: 16px; 
    line-height: 24px;
    font-weight: 300; 
    color:#959393; 
    text-transform: uppercase; 
    margin: 0 0 1rem 1rem;
}
.picto1{ max-width: 80%; }
.titreconseils{ margin: 1vw 0 2vw 1rem; font-size: 24px; }
.contenu-colonne ul{
    list-style-type: disc;
    margin-left: 1rem;
}
.contenu-colonne ul li{ font-size: 18px; font-weight: 300; line-height: 24px; margin-bottom: 1rem; letter-spacing: .05rem; }
.contenu-colonne p{ font-size: 18px; font-weight: 300; line-height: 24px; margin-bottom: 1rem; letter-spacing: .05rem; }
#page .encart-vert.small.valid, 
#page .encart-blanc.small.valid, 
#page .encart-noir.small.valid{ padding-bottom: 0; margin-bottom: 2rem; }
#page .encart-vert.small.valid img, 
#page .encart-blanc.small.valid img, 
#page .encart-noir.small.valid img{ margin: 1rem auto -2rem auto; }

#page .quefaire{
    width: 56%;
    padding: 2vw 12% 3vw 12%;
    margin: 0.5vw 10% 3vw 10%;
    border-radius: 30px;
}
#page .encart-gris.quefaire{ background:#dce0e0; }
#page .encart-bleu.quefaire{ background:#dfeeec; }
#page .encart-vert.quefaire{ background:#deebd3; }
#page .quefaire h2{ 
    color: black; 
    text-transform: none; 
    font-size: 24px; 
    font-weight: 600; 
    margin: 1vw auto; 
    min-height: auto; 
}
#page .quefaire h3{ 
    color: black; 
    text-transform: uppercase; 
    font-size: 18px; 
    font-weight: 300; 
    margin: 1vw auto; 
    min-height: auto; 
}
h2.choix-cli-titre{ font-size: 24px; font-weight: 600; padding: 2vw 0 4vw 0; }
h2.choix-cli-titre::before{
    content: " ";
    display: block;
    width: 7px;
    height: 192px;
    background: transparent url('gfx/tiret-etape-choix.png') no-repeat center bottom;
    position: absolute;
    left: calc( 50% - 3px );
    top: -192px;
}
.choix-cli-titreh2.short h2.choix-cli-titre::before{ height: 70px; top: -70px; }
.rappel-loi h2.choix-cli-titre::before{ height: 70px; top: -70px; }
.row.choix-cli-titreh2{
    background: transparent url('gfx/tiret-horizontal.png') no-repeat center bottom;
}
.row.choix-cli-titreh2.nb1{ background-image: url('gfx/tiret-horizontal-1.png'); }
.row.choix-cli-titreh2.nb2{ background-image: url('gfx/tiret-horizontal-2.png'); }
.row.choix-cli-titreh2.nb3{ background-image: url('gfx/tiret-horizontal-3.png'); }
.row.choix-cli-titreh2.nb4{ background-image: url('gfx/tiret-horizontal-4.png'); }

.bg-choix-cli a.mini{
    display: block;
    width: 70%;
    padding: 1vw 10%;
    margin: 0.5vw 5% 3vw 5%;
    border-radius: 20px;
    color: white;
}
.bg-choix-cli a.mini.encart-noir{ background: black; }
.bg-choix-cli a.mini.encart-blanc{ background: white; color: black; }
.bg-choix-cli a.mini h3{ font-size: 18px; line-height: 26px; }
.bg-choix-cli a.mini img{ margin: .5rem 0 -3rem 0; }
.bg-choix-cli a.mini:hover{ text-decoration: none; }
.bg-choix-cli a.mini.encart-blanc:hover,
.bg-choix-cli a.mini.encart-noir:hover, 
.bg-choix-cli a.mini.encart-vert:hover{ background:rgb(222,235,211); color: black; transition: ease-in-out all .1s; }
.bg-choix-cli{ background:#dfeeec; }
.bloc-rappel{
    width: 70%;
    padding: 1vw 10%;
    margin: 0 5%;
    border-radius: 20px;
    display: block;
}
.bloc-rappel h3{
    color: white;
    font-size: 13px;
    line-height: 18px;
}
.bloc-rappel:hover{ text-decoration: none; }
.bloc-rappel.coul-vert{ background:#397f80; }
.bloc-rappel.coul-gris{ background:#c1c0c0; }
.bloc-rappel.coul-noir{ background:#000; }
.bloc-rappel img{ margin: .5rem 0 -3rem 0; }
.contenu-colonne.orange.right-col{ margin: 6vw auto 2vw auto; }
.contenu-colonne.orange.right-col ul{
    list-style-type:none;
    list-style-image: url('gfx/tiret-choix.png');
}
.contenu-colonne.orange.right-col ul li{ padding-left: .5rem; font-weight: 500; margin-bottom: 2rem; }
.contenu-colonne.orange.right-col p{  font-weight: 500; margin-bottom: 1rem; }
.rappel-loi h2.choix-cli-titre{ padding: 1vw 0; }
.rappel-loi .encart-vert.mini{

}
.rappel-loi .encart-vert.mini h3{
    font-size: 16px;
    line-height: 22px;
    color: white;
    font-weight: 300;
    text-transform: uppercase;
    margin: 1rem 0;
}
.rappel-loi .encart-vert.mini h4{
    font-size: 14px;
    line-height: 20px;
    color: white;
    font-weight: 300;
}
.rappel-loi div.encart-vert.mini:hover{ background:#357b7c; }
.rappel-loi a.encart-vert.mini:hover{ background:#deebd3; }
.rappel-loi a.encart-vert.mini:hover h3, .rappel-loi a.encart-vert.mini:hover h4{ color: black; }
.rappel-loi .encart-vert.mini img.valid{ margin: 1rem auto -4rem auto; }

.contenu-colonne td{ 
    border: 1px solid #b78b14; 
    padding: .25rem; 
    font-size: 14px; 
    line-height: 16px; 
    vertical-align: middle; 
    text-align: center; 
    font-weight: 400;
}
.contenu-colonne td p, 
.contenu-colonne.orange.right-col td p{ font-size: 14px; line-height: 16px; margin: 0; text-align: center; font-weight: 400; }
.top-colonne{ margin: 0 auto 2vw auto; }
.contenu-colonne.orange.right-col.nomrg{ margin: 2vw auto 6vw auto; }
.simplepages p{ font-size: 18px; line-height: 28px; font-weight: 300; margin: 0 auto 1rem auto; }
.simplepages h2{ color:#3a7f81; font-size: 32px; line-height: 42px; margin: 0 0 1rem 0; }
.simplepages h3{  color: #b78b14; font-size: 26px; line-height: 36px; margin: 0 0 1rem 0; }

.rappel-reglementaire{
    width: 140px;
    height: 140px;
    background: white;
    box-shadow: 5px 10px 10px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    flex-flow: column wrap;
    justify-content: center;
    text-align: center;
    border-radius: 26px 26px 26px 0;
    border: 2px solid #397f80;
    cursor: pointer;

    position: fixed;
    right: 1vw;
    top: 32vh;
    z-index: 10000;
}
.rappel-reglementaire span{ 
    text-transform: uppercase;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    color: #397f80;
    display: inline-block;
    width: 100%;
    margin: .75rem 0 0 0;
 }
.rappel-reglementaire img{ margin-left: -1rem; }
.rappel-loi{
    background: white;
    box-shadow: 5px 10px 10px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    flex-flow: column wrap;
    justify-content: center;
    text-align: center;
    border-radius: 26px 0 26px 26px;
    border: 2px solid #397f80;
    cursor: pointer;
    position: fixed;
    right: calc( 1vw + 144px );
    top: calc( 32vh + 144px );
    z-index: 10000;
    height: 0;
    width: 50%;
    padding: 0;
    overflow:hidden;
    opacity: 0;
    transition: opacity ease-in-out .1s;
}
.rappel-loi.show{
    height: auto;
    overflow: auto;
    padding: 3vw 0;
    opacity: 1;
    transition: opacity ease-in-out .1s;
}







/**/
@media (min-width: 2px) and (max-width: 1023px){

    nav{
        margin: 0;
        width: 100%;
    }
    nav ul li{
        list-style-type: none;
        display: block;
        position: relative;
        text-align: center;
    }
    nav ul li a{
        font-size: 1.1rem;
        line-height: 1.5rem;
        margin-bottom: 1rem;
    }
    nav ul li a:hover{ color: #8d001a; }
    nav ul li ul{
        margin:0;
        padding:0;
    }
    nav ul li:hover ul{ }
    nav ul li:after{
        display: none;
    }
    nav ul li ul li{
        display: list-item;
    }
    nav ul li ul li a{
        color: #000;
    }
    nav ul li ul li a:hover{
        color: black;
        text-decoration: none;
    }
    #home header .row.middle, header .row.middle{ height: 9rem; flex-flow: row wrap; }
    #home header .row.middle .spannomargin-8, 
    header .row.middle .spannomargin-6{ width: 50%; }
    #home header .row.middle .spannomargin-2, 
    #home header .row.middle .spannomargin-4, 
    header .row.middle .spannomargin-2, 
    header .row.middle .spannomargin-4{ width: 25%; }
    #home header .row.middle .spannomargin-8:nth-child(3), 
    #home header .row.middle .spannomargin-2:first-child, 
    header .row.middle .spannomargin-10, 
    header .row.middle .spannomargin-2:first-child{ display:none }
    #home header .row.middle .spannomargin-8 a.logo img, 
    header .row.middle .spannomargin-6 a.logo img, 
    #page a.logo img{ max-width: 85%; margin-left: 10%; }
    header .gest-perso img{ max-width: 50%; }
    .menu-toggle{ background-size: 60%; padding-top: 40px; margin-top: 1rem; }
    header a.gest-perso{ margin-top: 10px; }
    header .gest-perso span{ font-size: 8px; margin: 0.2rem 0 1.25rem 0; }
    #menu-menu-principal.nav-menu{ width: 380%; right: -90%; }
    #home main{ width: 80%; margin: 0 10%; }
    .encart-blanc{ width: 60%; padding: 3vw 15%; margin: 3vw 5%; }
    footer{ height: auto; padding: 2rem 0; margin: 0; }
    footer, footer a{ line-height: 26px; font-size: 16px; }
    #menu-pied-de-page li, #menu-pied-de-page{ border: 0px; }
    header .row.middle{ height: 9rem; flex-flow: row wrap; }
    .lignetitre{ flex-flow: row wrap; }
    .lignetitre .spannomargin-2:nth-child(2){ display: block; width: 15%; margin-left: 5%; }
    .lignetitre .spannomargin-2{ width: 20%; }
    .pb-transport-encours .spannomargin-2{ display:none; }
    .lignetitre .spannomargin-8{ width: 65%; }
    .lignetitre .spannomargin-10{ width: 60% }
    #page h1{ font-size: 1.2rem; line-height: 1.4rem; }
    #page .encart-blanc.small, .encart-vert{ width: 68%; margin: 1rem 8%; padding: 1rem 8%;}
    #page .pb-transport-encours main::after{ background: #d7d5d3; box-shadow: -1rem -1rem 1rem #d7d5d3; }
    #page .lignetitre h2{ font-size: .7rem; line-height: 1rem; }
    #page .quefaire{ margin: 2rem 10%; }
    #page .quefaire h2{ margin: 1rem auto; }
    #page .quefaire h3{ margin: .75rem auto; }
    h2.choix-cli-titre::before{ display: none; }
    .row.choix-cli-titreh2{ background: transparent!important; }
    h2.choix-cli-titre{ text-align: center; margin: 3rem auto 2rem auto; }
    .bg-choix-cli a.mini{ width: 50%; margin: 1rem 15% 3rem 15%; padding: 1rem 10%; }
    .lignetitre .spannomargin-8 .spannomargin-8{ width: 50%; }
    .lignetitre .spannomargin-8 .row{ flex-flow: row wrap; }
    .lignetitre .spannomargin-8.lesrappels{ width: 100%; }
    .bloc-rappel h3 { font-size: 12px; }
    .bloc-rappel{ margin: 1rem 5%; }
    .rappel-loi .encart-vert.mini{ margin-bottom: 1rem }
    .contenu-colonne.orange.top-colonne, 
    .contenu-colonne.orange.right-col, .simplepages{ width: 90%; margin: 1rem auto; }

    .rappel-reglementaire{
        width: 70px;
        height: 70px;
        top: 24vh;
        right: 0;
    }
    .rappel-reglementaire img{ max-width: 80%; }
    .rappel-reglementaire span { display:none; }
    .rappel-loi{ right: calc( 5% - 2% ); top: calc( 24vh + 74px ); width: 90%; }
    .rappel-loi .row .spannomargin-6{ width: 50%; }
    .rappel-loi .row .spannomargin-2{ display: none; }
    .rappel-loi .row{ flex-flow: row wrap; }
    .rappel-loi .row .spannomargin-6 img{ display: none; }
    .rappel-loi .row .spannomargin-6 br{ display: none; }



}
/**/
@media (min-width: 768px) and (max-width: 1023px){

}
/**/
@media (min-width: 1024px) and (max-width: 1279px) {
    #home header .row.middle{ height: 18.5vw; }
    #home .content { margin: 4vw auto 5vw auto; }
    .menu-toggle span{ font-size: 10px; }
    #menu-menu-principal.nav-menu{ width: 300%; }
    nav ul li a{ font-size: .65rem; }
    .encart-blanc h2, .encart-vert h2 { font-size: 12px; line-height: 16px; }
    header .gest-perso span{ font-size: 9px; }
    .content p { font-size: 12px; line-height: 20px; }
    footer, footer a{ font-size: 10px; }
    header .row.middle { height: 13vw; }
    #page h1{ font-size: 18px; line-height: 24px; }
    .encart-blanc h2 span{ font-size: 11px; line-height: 12px; }
    #page .encart-blanc.small h2, .encart-vert h2 { min-height: 70px; }
    #page .pb-transport-encours main::before { background: #e8e5e5; box-shadow: 1rem 1rem 1rem #e8e5e5; }
    #page .lignetitre h2{ font-size: 12px; line-height: 14px; margin-bottom: .5rem; }
    #page .encart-vert.small.valid img, 
    #page .encart-blanc.small.valid img, 
    #page .encart-noir.small.valid img{ max-width: 20%; }
    .titreconseils{  font-size: 18px; }
    .contenu-colonne ul li, .contenu-colonne p { font-size: 12px; line-height: 16px; letter-spacing: .01rem }
    #page .quefaire h2{ font-size: 15px; }
    #page .quefaire h3{ font-size: 13px; }
    h2.choix-cli-titre{ font-size: 15px; padding-bottom: 6vw; }
    .bg-choix-cli a.mini{ padding: 1vw 5%; width: 80%; }
    .bg-choix-cli a.mini h3{ font-size: 11px; line-height: 14px; }
    .bg-choix-cli a.mini img{ max-width: 25%; margin-bottom: -2rem; }
    .row.choix-cli-titreh2.nb2{ background-size: 26%; }
    .row.choix-cli-titreh2.nb4{ background-size: 75%; }
    .row.choix-cli-titreh2.nb3{ background-size: 50%; }
    .bloc-rappel h3{ font-size: 10px; line-height: 12px; }
    .bloc-rappel{ width: 80%; padding: 1vw 5%; }
    .bloc-rappel img{ max-width: 20%; margin: .5rem 0 -2rem 0 }
    .rappel-loi .encart-vert.mini h3{ font-size: 12px; line-height: 16px; }
    .rappel-loi .encart-vert.mini h4{ font-size: 11px; line-height: 16px; }
    .rappel-loi .encart-vert.mini img{ max-width: 35%; }
    .rappel-loi .encart-vert.mini img.valid{ max-width: 20%; margin: 1rem auto -3rem auto; }
    .rappel-reglementaire{
        width: 120px;
        height: 120px;
    }
    .rappel-reglementaire span { font-size: 10px; line-height: 12px; }
    .rappel-loi{ right: calc( 1vw + 124px ); top: calc( 32vh + 124px ); width: 60%; }


}
/**/
@media (min-width: 1280px) and (max-width: 1479px){
    #menu-menu-principal.nav-menu{ width: 300%; }
    .encart-blanc h2, .encart-vert h2 { font-size: 14px; line-height: 20px; }
    header .row.middle { height: 11vw ; }
    #page h1{ font-size: 22px; line-height: 28px; }
    .encart-blanc h2 span{ font-size: 14px; }
    #page .pb-transport-encours main::before { background: #e8e5e5; box-shadow: 1rem 1rem 1rem #e8e5e5; }
    #page .lignetitre h2{ font-size: 14px; }
    .contenu-colonne ul li, .contenu-colonne p { font-size: 15px; line-height: 22px; letter-spacing: .01rem }
    #page .quefaire h2{ font-size: 17px; }
    #page .quefaire h3{ font-size: 15px; }
    h2.choix-cli-titre{ font-size: 17px; }
    .bg-choix-cli a.mini h3 { font-size: 12px; line-height: 16px; }
    .bg-choix-cli a.mini img{ max-width: 25%; margin-bottom: -2rem; }
    .bg-choix-cli a.mini{ padding: 1vw 5%; width: 80%; }
    .row.choix-cli-titreh2.nb2{ background-size: 26%; }
    .row.choix-cli-titreh2.nb4{ background-size: 76%; }
    .row.choix-cli-titreh2.nb3{ background-size: 50%; }
    .bloc-rappel h3{ font-size: 11px; line-height: 14px; }
    .bloc-rappel{ width: 80%; padding: 1vw 5%; }
    .rappel-loi .encart-vert.mini h3{ font-size: 14px; line-height: 20px; }
    .rappel-loi .encart-vert.mini h4{ font-size: 12px; line-height: 18px; }



}
/**/
@media (min-width: 1480px) and (max-width: 1599px){
    header .row.middle { height: 10vw; }


}
/**/
@media (min-width: 1600px) and (max-width: 1799px){

}
/**/
@media (min-width: 1800px){

}
/**/