@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

html, body{position : relative;width : 100%; height : 100%;}

h1, h2, h3, h4, h5, h6, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{font-family: 'Open Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 {font-weight : 400;}

h3 {font-size: 20px;}

p, ul, li, a, span{font-family: 'Open Sans', Arial;}
ul, li, ol{font-size : 14px;}
/*li {list-style-type: "- ";}*/
p{font-size: 14px; line-height: 22px;}
a {color : #185a97;}
a:hover, a:focus{color: #4997cd;}

a.button{background-color : #185a97; color:#fff; border-radius: 4px;}
a.button:hover, a.button:focus{background-color : #4997cd;}

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {margin: auto !important;}

/* Utility Class */
.clearfix{clear : both;}
.fix-me:after{content:""; clear : both; display : block;}
.table-me{display : table;}
.table-cell-me{display : table-cell; vertical-align:middle;}
.full-width{width : 100%;}
.full-height{height : 100%;}
.g-recaptcha{display : inline-block;margin-bottom: 1rem;margin-top: 0.5rem;}
.uppercase{text-transform: uppercase;}
.valign {display: table; width: 100%;}
.valign > * {display: table-cell; vertical-align: middle;}
img{max-width : 100%;}
.top {margin-top:90px;}
.middle {margin-top:40px;}
.bottom {padding-bottom:18px;}
.head {margin-top:35px;}
.more {font-size:18px; color:#185a97; font-weight: 700;line-height: 25px;}
.margin {margin-top:35px;}

/* Font Awesome */
.fa-credit-card, .fa-chevron-circle-down, .fa-eye, .fa-clock, .fa-user, .glyphicon-plus, .fa-file-pdf {padding-right: 6px;}

.btn-primary {background-color:#1a5d9b; color:#fff; border-radius:8px; padding:15px 25px; text-align:center; display:inline-block; margin-top:25px; margin-bottom: 15px;}
.btn-info {background-color:#2b94e2; color:#fff; border-radius:8px; padding:15px 25px; text-align:center; display:inline-block; margin-top:25px; margin-bottom: 15px;}

.breadcrumb, .breadcrumb li a {background-color:#fff!important; border-radius:0!important; font-size: 12px; text-transform: uppercase; color:#999;}
.breadcrumb > .active {font-size: 12px; text-transform: uppercase; color:#666!important;}

/* -- HOME-PAGE -- */

/* Carrousel */
.hp-fleche-previous {background: url(../img/slider-previous.png) no-repeat;width: 18px;height: 30px;position: absolute;top: 20%;left:-13px;}
.hp-fleche-next {background: url(../img/slider-next.png) no-repeat;width: 18px;height: 30px;position: absolute;top: 20%; right:-13px;}

.carousel-caption p {color:#fff; font-family: 'Open Sans', sans-serif; font-size:35px; line-height:37px; text-align: center; /*padding-top:20px;*/}
.carousel-caption p span {font-size:100px; font-family: 'Open Sans', sans-serif; /*padding-bottom:25px;*/}

/* Bandeau image */
#bandeau-hp {background: url(../img/slider-hp01.jpg) no-repeat; width:100%; height: 550px;background-size: cover;background-position: center;}

/* Subheader */
#bt-esp-client > a {background-color:#185a97; font-family: 'Open Sans', sans-serif; text-align:center; color:#fff; border-radius: 10px; padding: 10px 20px; display: inline-block; margin-top: 20px; text-decoration: none;}
#bt-esp-client > a.fs-normal {font-size: 14px;}
#bt-esp-client > a.fs-big {font-size: 18px;}

/* Header / Menu */
.icon-bar {background-color:#4997cd;}

.navbar-brand {height: 105px!important; padding: 15px 0!important;}

.nav-position {margin-top: 70px;}

li.dropdown:hover ul.dropdown-menu {display: block;}
.dropdown-menu > li > a {color:#fff;}
/*.abonnements .dropdown-menu > li > a:hover, .abonnements .dropdown-menu > li > a:active, .abonnements .dropdown-menu > li > a:focus {list-style-type: none!important;}*/
li.dropdown:hover ul.dropdown-menu {background-color:#005aa1; font-size:15px; line-height:23px;}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {background-color:#4997cd!important; background-image: none !important;}

/* Sous-menus */
li.qsn > .dropdown-menu > li > a, li.stationner > .dropdown-menu > li > a, li.abonnements > .dropdown-menu > li > a, li.timo > .dropdown-menu > li > a, li.recours > .dropdown-menu > li > a {color:#fff!important;list-style-type: none!important;}

/* Contenus */
#onclic {background-color: #185a97; padding:15px 0; height:auto; color:#fff;}
#onclic .actus a {color:#fff; font-weight:700;}
#onclic h3 {text-align:center; font-family: 'Open Sans', sans-serif; font-weight:700;padding-bottom: 25px;}

#acces p a {color:#fff;}
#acces p a:hover, #acces p a:active, #acces p a:focus {color:#fff; text-decoration: none;}

.puce-more {text-align: center;position: absolute;left: 48.5%;margin-top: -45px;}

#bg-qsn {background: url(../img/bg-qsn-hp.jpg) no-repeat; background-position: center;background-size: cover; width:100%; text-align:center; padding:75px 0; height:250px;}
#bg-qsn h2 {color:#fff;text-align:center; font-family: 'Open Sans', sans-serif; font-size:50px; text-transform:uppercase;}

#paves-hp {margin:60px;}

.border {border: 6px #002157 solid; border-radius:15px; padding:35px 25px; height: 420px;}
.border > .titre-paves {font-family: 'Open Sans', sans-serif; text-transform: uppercase; color:#002157; text-align: center;font-weight: 700;font-size: 21px; line-height: 27px;}
.border > p {font-family:'Open Sans'; font-size:14px; color:#333; line-height:22px; text-align:center;}

#bande-supfooter {background-color: #185a97; padding:10px 0; height:auto; color:#fff;}
#bande-supfooter h2 {text-align:center; font-family: 'Open Sans', sans-serif; font-size: 50px;}

/*#diaporama{background: url(../img/bg-diaporama.jpg) no-repeat; width:100%; padding:105px 0;* height:440px;}
#diaporama p {color:#fff; font-family:'Playfair Display'; font-size:20px; line-height:28px; text-align: center; padding-top:20px;}
#diaporama p span {font-size:150px; font-family:'Playfair Display'; padding-bottom:25px;}*/

/* -- STATIONNER A MARSEILLE -- */
#bandeau-stationner {background: url(../img/bandeau-qsn.jpg) no-repeat; background-position: center;background-size: cover; width:100%; height: 300px;}

#zones, #forfait {margin: 30px 0;}
#zones > .col > ul > li, #forfait > .col > ul > li {list-style-type: none; font-family: 'Open Sans', sans-serif; font-weight:400; font-size: 18px;line-height: 35px; margin-left: -20px}

.marge {margin: 30px 0;}

.titre-bleu {font-family: 'Open Sans', sans-serif; font-weight:700; font-size:18px; color:#1a5d9b;}

.list-timo {line-height:22px;}
.list-timo li {list-style-type: "- ";}


/* -- PAGE ABONNEMENTS -- */
#bandeau-abonnements {background: url(../img/bandeau-abo.jpg) no-repeat;background-position: center;background-size: cover; width:100%; height: 300px;}

#bandeau-titre {background-color: rgba(255, 255, 255, 0.7); width:100; height:auto; text-align:center; position: relative; bottom:-72%;}
#bandeau-titre h1 {display:inline-block; color:#0e406e; font-family: 'Open Sans', sans-serif; font-weight:700; font-size:40px; text-transform:uppercase; margin-top:0!important; padding:20px 0;}

.picto-abo {text-align:center; position:absolute; left:30%; top:-13%;}
.picto-abo02 {text-align:center; position:absolute; left:45%; top:-36%;}
.vignette {text-align:center; position:absolute; left:45%; top:-22%;}

#paves-abo {margin: 120px 0 60px 0;}

.border-abo {border: 6px #002157 solid; border-radius:15px; padding:70px 8px 10px 8px; height: 370px;}
.border-abo > .titre-paves-abo {font-family: 'Open Sans', sans-serif; text-transform: uppercase; color:#002157; text-align: center;font-weight: 700;font-size: 21px; line-height: 27px;}
.border-abo > p {font-family:'Open Sans'; font-size:14px; color:#333; line-height:22px; text-align:center;}

#bg-abonnements {background-color:#f4f4f4; padding-top:90px; padding-bottom:30px;}
#bg-abonnements ul li, #pro-abonnement ul li {font-size:14px; line-height: 22px;}

#pro-abonnement{margin-top: 90px;}

.border-titre-abo {border: 6px #002157 solid; border-radius:15px; padding:40px 10px 10px 10px; height: auto; margin-bottom:30px;}
.border-titre-abo-2col {border: 6px #002157 solid; border-radius:15px; padding:16px 10px 10px 10px; height:120px; margin-bottom:30px;}
.border-titre-abo-more {border: 6px #002157 solid; border-radius:15px; padding:16px 10px 10px 10px; height:180px; margin-bottom:30px;}

.border-titre {border: 6px #002157 solid; border-radius:15px; padding: 20px 10px 10px 10px; height: auto; margin-bottom:30px;}

.cadre-border {border: 6px #002157 solid; border-radius:15px; padding:20px 10px; height: auto; margin-bottom:30px;}
.cadre-border > p {margin:0!important;}

.cadre-rappel {border: 3px #002157 dotted; border-radius:15px; padding:25px 20px; height: auto; margin-bottom:30px;}
.cadre-rappel > p {margin:0!important;}

.title-orange {color:#f08118; font-weight:700; font-family: 'Open Sans'; font-size:18px;}

.titre-actu {color:#0e406e; font-family: 'Open Sans', sans-serif; font-weight:700; font-size:25px;line-height: 25px; text-transform:uppercase; margin-top:0!important; text-align: center;}

.titre-abo {color:#0e406e; font-family: 'Open Sans', sans-serif; font-weight:700; font-size:25px;line-height: 25px; text-transform:uppercase; margin-top:0!important; text-align: center; padding-top: 30px;}
.titre-abo > span {font-family:'Open Sans'; font-size:18px; line-height: 55px; font-weight: 400;}
.titre-abo > span.mentions {font-family:'Open Sans'; font-size:14px; line-height: 20px; font-weight: 400; text-transform: none;}
.line {padding-top:0;}
.tophead {padding-top: 20px;}

.ss-titre-abo {color:#0e406e; font-family: 'Open Sans', sans-serif; font-weight:400; font-size:16px; /*padding-top:10px;*/ text-align: center;}

#cadre-vignette {margin-top:50px;}

.rappel {text-align:center; font-size:16px; color:#333;}

.sstitre-bleu {font-family: 'Open Sans', sans-serif; font-weight:700; font-size:16px; color:#1a5d9b;}
.sstitre-bleu > span {font-size:30px; font-family: 'Open Sans', sans-serif; font-weight:700; line-height: 40px;}
.sstitre-bleu span.glyphicon-pencil, .sstitre-bleu span.glyphicon-phone {font-family: 'Glyphicons Halflings'; font-size: 23px;}

.head span {font-size:16px; font-weight:400; font-family: 'Open Sans', sans-serif; color:#1a5d9b;line-height: 30px;}

#bg-abonnements .demande-abo, #pro-abonnement .demande-abo {text-align:center;}
#bg-abonnements .demande-abo a, #pro-abonnement .demande-abo a {background-color: #1a5d9b; color:#fff; text-transform: uppercase; padding: 15px 20px; display: inline-block; margin: 25px 0; border-radius:8px;}
.glyphicon-file {padding-right:8px;}

.important {color:#4a77b6; font-size:15px;}

.obtention {margin:20px 0; display:inline-block;}
.obtention img {padding-bottom:25px;}

.mentions-abo {font-size:13px;}

/* -- TIMO -- */
/* QSN */
#bandeau-timo {background: url(../img/bandeau-timo.jpg) no-repeat; width:100%; height: 300px;}

.row-top {margin-top:25px;}

.marge-cadre {margin-top: 80px;}

#border {border: 3px solid #1a5d9b;padding: 30px;display: inline-block;margin-top: 25px;}

/* -- RECOURS -- */
#bandeau-recours {background: url(../img/bandeau-recours.jpg) no-repeat; background-position: center;background-size: cover; width:100%; height: 300px;}

.center {text-align: center;}

/* -- QSN -- */
#bandeau-qsn {background: url(../img/bandeau-qsn.jpg) no-repeat; background-position: center;background-size: cover; width:100%; height: 300px;}

/* ACTUALITES */
a.bt-plan {background-color: #185a97;color: #fff; border-radius: 50px;padding: 15px 30px;font-size: 14px;display: inline-block;}
a:hover.bt-plan {color:#fff;text-decoration:underline;}

.carousel-control .glyphicon-chevron-left {margin-left: -60px!important;}
.carousel-control.right, .carousel-control.left {background-image: none!important;}

/* -- FOOTER -- */
footer{position: relative;  padding : 50px 0; background-color: #185a97; color : #fff; margin-top: 25px;}
footer ul{list-style-type: none; padding : 0px; margin : 0px;}
footer ul li a{color : #fff;}
footer .en-tete {color:#fff; font-family: 'Open Sans', sans-serif; font-size:30px; text-align:center;}

.titre-footer {font-family: 'Open Sans', sans-serif; font-size:25px; color:#fff; text-align:center; margin-top:20px; }

#form {text-align:center;}
.bt-footer {background-color:#fff; color:#1a5d9b; border-radius:8px; padding:15px 40px; display:inline-block; text-align:center; margin-top:25px;}

.modal-body > h4 {color:#337ab7;}
/* .modal-dialog {width: 800px!important;} */

.accessibility {font-size:13px; font-weight: 700; text-transform: uppercase;}
.fa-wheelchair, .fa-envira {padding-right: 5px;}


/* -- SUBFOOTER -- */
#subfooter {position: relative;  padding : 10px 0; background-color: #fff; color : #0e406e;}
#subfooter p{font-size : 14px; font-family:'Open Sans'; text-align:center; padding-top:5px;}
#subfooter p a {color:#0e406e;}
#subfooter p a:hover, a:focus {color:#0e406e; text-decoration: underline;}

/* -- MEDIA-QUERIES -- */

@media screen and (min-width:992px) {
    .navbar-right{margin-top: 30px!important;}

    .navbar > .container-fluid .navbar-brand {margin-top: -30px;}

    .border-abo {height: 390px;}
}

@media (min-width:768px) and (max-width:992px) {
    .border-abo {height: 270px; margin-bottom: 70px;}

    .picto-abo {left: 42%;top: -17%;}
    .picto-abo02 {left: 42%;}
}

@media screen and (max-width:768px) {
    .navbar-brand {width: 50%;}
    .navbar-nav:before {margin-top: 30px;}

    .border-abo {height: 260px; margin-bottom: 85px;}

    .picto-abo {left: 42%;top: -20%;}
    .picto-abo02 {left: 33%;}

    .top {margin-top:40px;}

    footer .en-tete {font-size:25px;}
    .bt-footer {margin-top: 10px; padding:12px 22px;}
}