/* reset for responsive */

body {
    width: auto;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 999;
}
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
    max-width: 100%;
}
img {
    height: auto;
    width: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#footer #contact img {
    width: 110px;
    height: 110px;
}
textarea, table, td, th, code, pre, samp {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
 }
code, pre, samp {
    white-space: pre-wrap;
}

/* set width to auto */
div#header {
    height: 40px;
}
div#header .center,
div.center,
ul.listing li h4 {
    width: auto;
}
div#header .center {
    height: 48px;
}
strong#logo {
    margin: 0 auto;
    display: block;
    width: 240px;
}
strong#logo a {
    position: relative;
    top: auto;
    left: auto;
    padding: 0;
    display: block;
    height: 70px;
    width: 240px;
}
#content div.center {
    margin: 0 6%;
}
/* Form search */
.float-radio {
    float: left;
    width: 50%;
    margin-bottom: 10px;
}
.c0 .wrap p {
   margin: 6px 0 7px 0; 
}
.listing.event em {
    margin-left: 10px;
}
form {
    margin-right: 0 !important;
}
form.search fieldset {
    width: 100%;
}
#eventlist input {
    margin-top: 20px;
}
form,
input[type=text],
input[type=submit],
input[type=password],
textarea {
    width: 100% !important;
}
select {
   width: 100% !important; 
}
/* Event Home */
ul.listing.event li {
    position: relative;
}
ul.listing.event li h4 {
    margin-left: 38px;
    z-index: 1;
    position: relative;
    padding: 0;
}
ul.listing.event li a.more {
    float: right;
}
ul.listing.event li a.more span {
    position: absolute;
    top: 32%;
    right: 25%;
}
@media screen and (max-width: 600px){
    ul.listing.event li a.more span {
        top: 0;
        right: 20%;
    }
}
ul.listing.event li p {
    margin-bottom: 0;
    margin-left: 30px;
}
/* Bas page Home */ 
.bloc.third {
    /*display: none;*/
}
.frievent-header {
    flex-direction: column;
}
.frievent-header-mapocc {
    width: 300px;
}
/* Menu */
#results {
    display: none;
}
div#content {
    margin-top: -45px;
}
.toggle-menu-main {
    background: url('../css/img/toggle-menu.png') no-repeat;
    padding: 25px;
    position: absolute;
    top: 4px;
    right: 0;
    background-size: 80%;
    cursor: pointer;
}
.toggle-menu-main:hover {
    background: url('../css/img/toggle-menu-hover.png') no-repeat;
    background-size: 80%;
}
#header #topNav {
    background: #A43146;
    height: auto;
    margin: 0 -18px 0 -15px;
    padding: 0;
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 13;
    float: none;
    display: none !important;
}
#header #topNav li.lang {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}
#header #topNav ul li {
    width: 100%;
    border-bottom: 1px solid #fff;
    margin: 0;
}
#header #topNav li a {
    width: 95%;
    display: block;
    padding: 15px 9px !important;
}
#header #topNav li.lang a{
    width: 45%;
    float: left;
}
div#content {
    z-index: 12;
}
/* hide */
 
#slider,
#map {
    display: none !important;
}
#mainNav,
#header #car {
    display: none !important;
}

/* form */
form .left,
form .right {
    float: none;
}
form .left.back {
    padding-top: 10px;
    width: 100%;
}
form.search .date_toggle fieldset {
    width: 0;
}
form label, label {
    display: block;
    margin-bottom: 10px;
}
input[type="radio"]:nth-of-type(1) {
    margin-left: 0;
}
#datepicker {
    position: fixed;
    margin-top: 0 !important;
    width: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999;
}
#daypick span {
    display: block;
    margin-bottom: 5px;
}
#daypick div.clr.sep {
    margin: 0;
}
.ui-datepicker-inline.ui-datepicker {
    width: auto;
}
#datepicker {
    padding-top: 80px;
}
input[type="submit"].dateok {
    margin-top: 10px;
}
a#tpf img {
    height: 40px;
}

/* titles */

h1.h1trajet {
    width: 100%;
    margin-bottom: 30px;
}
h1.h1trajet small {
    font-weight: 400;
    font-size: 14px;
}
h2 span {
    left: -35px;
    padding: 32px 0 0 40px;
}
h2 span.itinerary {
    background-size: 20px;
}
h2 span.event {
    background-size: 30px;
}
h2 a {
    display: block;
    padding-left: 0;
    margin-top: 3px;
}

/* listing */
.listing .col4 a,
.listing .col4 a:hover {
    background-image: none;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0!important;
}
.details-trajet .type {
    width: 100%;
}
ul.listing li h4,
ul.listing li p {
    display: block;
}

/* footer */
div#footer {
    text-align: center;
    margin-bottom: 50px;
    background-image: url(img/ft_bg_mobile.png);
}

div#footer div#sponsors {
    margin: 0 -15px;
    padding: 16px 15px 50px;
}
div#footer #sponsors .left h2 {
    margin: 0;
    max-width: none;
}
div#footer div#sponsors a, div#footer div#sponsors a.groupe-e, div#footer div#sponsors a.tpf, div#footer div#sponsors a.acf, div#footer div#sponsors a.ocn {
    margin: 0;
    float: left;
}
div#footer div.left,
div#footer div.right {
    float: none;
    width: auto;
    margin: 0;
    padding: 10px 0 16px;
}
div#footer #sponsors .left {
    margin-left: 0;
}
div#footer #sponsors .left h2 {
    text-align: center;
}
div#footer #sponsors  .right {
    /*margin-left: 20px;*/
   width: 300px;
   margin: 0 auto;
}
div#footer #contact div.left {
    border: none;
}
div#footer div.right {
    margin-top: 10px;
}
div#footer div.right p {
    margin: 0;
}

/* hover */
#header #topNav li a#connexion:hover, 
#header #login a#account:hover, 
#header #topNav li a#connexion:focus, 
#header #login a#account:focus, 
#header #topNav li.lang a:focus, 
#header #topNav li.lang a:hover {
    box-shadow: none;
    text-shadow: none;
    color: #57131e;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
}
#header #topNav li a {
    color: #faf0f2;
}
/* Login */
#login {
    position: relative;
    z-index: 20;
    width: 100%;
    background: #fff;
    margin-left: -15px;
    padding-left: 30px;
    margin-top:-3px;
}
#login .hideable.open {
    display: block !important;
    width: 100% !important;
    margin-left: -30px;
    padding-right: 30px !important;
    padding-bottom: 0 !important;
}
#login .hidable.open {
    width: 100%;
    padding-right: 30px;
}
#login .hideable.open .bloc {
    margin-top: -10px;
    width: 100%;
    padding-right: 30px;
}
#login .hideable.open h3,
#login .hideable.open p {
    padding-left: 10px;
    text-align: center;
}
#login .hideable.open p.cent {
    padding-top: 25px;
}
#login #create h3 a {
    display: block;
    padding-left: 0;
}
#login .loginbutton #account_fb {
    text-align: center;
    display: block !important;
    margin-right: auto !important;
    margin: 0 auto;
    margin-bottom: 10px;
    float: none !important;
}
#login .loginbutton em {
    display: block;
}
#login .loginbutton #account {
    margin: 0 auto !important;
    display: block !important;
    margin-top: 17px !important;
}
#login .bloc.car {
    display: none;
}
#login li {
    margin: 0 12px 2px 12px;
}
#logme form {
    width: 103% !important;
    padding-left: 4%;
}
#logme form fieldset {
    float: left;
    margin-right: 0;
    width: 96%;
    margin-bottom: 20px
}
#logme form fieldset input {
    width: 100%;
}
.friform fieldset {
    width: 100%;
}
div#header.fix {
    height: 30px;
}
#fix {
    display: none;
}
/* Evenements */
.bloc.second .listing.event a.more {
    /*display: none;*/
}
/* Detail */
.details-trajet .lieu .lieu b {
    line-height: 15px;
}
.details-trajet .oneway, .wraphead .oneway {
    padding: 0 16px;
}
.details-trajet .oneway_back, .wraphead .oneway_back {
    background: url('../css/img/oneway_back.png') no-repeat;
    margin-left: 10px;
    float: left;
    height: 15px;
    padding: 0 16px;
}
.c0 .wrap .week p {
    float: left;
    margin: 0;
    width: 19%;
}
.c0 .wrap .week {
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
}
.c0 .wrap .week .oneway {
    margin-top: 0;
}
.c0 .wrap .week p.day {
    float: left;
    margin: 0;
    width: 28%;
}
.details-trajet .profil {
    width: 75%;
    margin-left: 60px;
}
ul.listing li.last {
    padding-right: 0 !important;
    margin-left: 5%;
}
ul.listing li.last h5 {
    margin-left: 5%;
}
ul.listing li.last a {
    float: left;
}
.details-trajet.head {
    width: 100%;
}
.details-trajet .lieu.start {
    width: 43%;
}
.details-trajet .lieu.end {
    width: 40%;
    margin-left: 0;
}
.details-trajet .origin {
    height: 50px;
}
.details-trajet .lieu .destination {
    width: 50%;
    height: 50px;
    margin-left: 80%;
}
.details-trajet .lieu .destination b {
    margin-left: 34%;
}
.details-trajet #maps .map.right {
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
}
.map.left .origin,
.map.right .destination {
    display: none;
}
.wraphead .date {
    float: left;
    margin-bottom: 20px;
}
.details-trajet .dashedline {
    top: 28px;
    width: 86%;
}
.details-trajet .trajet .lieu .roundtrip {
    margin: 0;
    margin-top: 22px;
    z-index: 10;
    position: relative;
}
.bloc.second .listing.event a.more {
    padding: 15% 25% 3% 64%;
    float: none;
    background: url(img/more.png) 98% 50% no-repeat;
    position: relative;
    z-index: 10;
}
ul.listing .col4 a {
    position: absolute;
    bottom: 0px;
    right: -50px;
    padding: 106px 630% 0% 215%;
    background: url(img/more.png) 98% 65% no-repeat;
}
.listing .pass {
    margin-left: 25px;
}
.listing .cond {
    margin-left: 35px;
}
.friroutes.listing .cond {
    margin-left: 0;
}
.friroutes .type {
    padding: 18px 35px;
    margin-top: 15px;
    background-size: 30px;
}
.new_route_event #tpf {
    margin-left: 0;
}
ul.listing .col4.list-trip a {
    display: block;
    left: -201px;
    width: 40%;
    float: right;
    margin-top: 20px;
    padding: 15px 25px;
}
ul.listing .col4.list-trip a:first-child {
    margin-top: 20px;
    display: block;
    left: -164px;
    width: 40%;
    float: left;
    padding: 15px 40px;
}
ul.listing .col4.list-trip a.setalert {
    display: block;
    left: 0px;
    top: -60px;
    width: 40%;
    padding: 0;
    height: 45px;
}
.bloc.second .listing.event a.more p {
    display: none;
}
.shadowline {
    margin-left: -30px;
    padding-right: 63px;
}
ul.listing {
    margin-left: 15px;
}
ul.listing.friroutes {
    margin: 0;
}
ul.listing li {
    position: relative;
    width: 98%;
    margin-left: -15px;
    padding-right: 88px;
}
ul.listing li .col1 {
    width: 100%;
    margin-left: 10px;
    margin-bottom: 0;
    padding-left: 15px;
}

.friroutes.listing li .col1 {
    margin-left: 0;
    padding-left: 0;
}
ul.listing.friroutes li {
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
}

ul.listing li .col1 h4 {
    padding-left: 65px;
    padding-right: 0;
    min-width: 100%;
    font-size: 18px;
}
ul.listing li {
    left: -37px;
}
ul.listing .deux {
    left: 20px;
}
.frievents li {
    width: 100%;
}
.listing .epingle {
    display: none;
}
ul.listing .col2 {
    width: 100%;
    margin-left:26px;
}
ul.listing .col2 .dispo {
    padding-left: 41px;
    font-size: 15px;
}
ul.listing .col2 .start {
    margin: 0 0 4px 30px;
    width: 85%;
}
ul.listing .col3 {
    position: absolute;
    top: 15px;
    right: 50px;
    width: 17px;
}
ul.listing .col3 .car {
    padding: 15px 16px;
    float: left;
}
ul.listing .col4 {
    position: absolute;
    bottom: 15px;
    right: 50px;
}
ul.listing .last a {
    margin-left: 8%;
    width: 100%;
}
.listing .last h5 {
    width: 100%;
}
#maps .map {
    width: 100%;
}
.details-trajet {
    margin-left: 0;
}
.details-trajet span.roundtrip, 
.details-trajet span.oneway, 
.wraphead span.roundtrip, 
.wraphead span.oneway {
    margin-top: 22px;
}
/* Edit trajet */
#daypick input[type=text] {
    margin-top: 15px;
}
.right {
    float: none;
}
.dates .week:first-child {
    display: none;
}
ul.listing li a.proposer {
    padding: 16px;
    margin-left: 0;
    width: 110%;
}
@media screen and (max-width: 467px){
    ul.listing li a.proposer {
        padding-top: 7px;
    }
}
.time-picker {
    width: 94%;
}
ul.listing .col4.list-trip {
    position: relative;
    right: -200px;
    bottom: 20px;
    width: 280px !important;
}
#tpick input[type=text] {
    margin: 0 15px 15px 0;
}
/* Mobile bar */
.mobile-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: block;
    z-index: 10000;
    box-shadow: 0 18px 35px 11px black;
}
.mobile-bar .mbl-btn {
    background: #7c33a1;
    border-right: 1px solid #8640a8;
    border-left: 1px solid #6c2d8c;
    width: 19.9%;
    display: inline-block;
    height: 50px;
    margin-right: -4px;
    position: relative;
}
.mobile-bar span {
    height: 50px;
    width: 100%;
    position: absolute;
    background: url('../css/img/icons_mnav_sprite.png') no-repeat;
}
.mobile-bar .account {
    background-position: center 2px;
}
.mobile-bar .event {
    background-position: center -98px;
}
.mobile-bar .trajet {
    background-position: center -48px;
}
.mobile-bar .why {
    background-position: center -148px;
}
.mobile-bar .mobile-menu {
    background-position: center -198px;
}
#botNav {
    background: #fff;
    position: fixed;
    bottom: 50px;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 18px 35px 11px black;
}
#botNav ul {
    padding-bottom: 20px;
}
#botNav li.lang {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
    height: 41px;
}
#botNav ul li {
    width: 100%;
    border-bottom: 1px solid #E1E1E1;
    border-top: 1px solid #F6F6F6;
    margin: 0;
}
#botNav li a {
    font-family: 'Open sans', sans-serif;
    font-size: 1em;
    cursor: pointer;
    padding: 10px 0;
    display: block;
    width: 95%;
    text-decoration: none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    padding-left: 5%;
}
#botNav li a:hover {
    background-color: #692b87;
    color: #ffffff;
}
#botNav li.lang a {
    width: 44.8%;
    float: left;
    text-align: center;
    border-top: 1px solid #F6F6F6;
    border-radius: 0;
}
#botNav li a:hover {
    box-shadow: none;
    text-shadow: none;
    color: #92559F;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
}


/* retina */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    .mobile-bar span {
        background-image: url('img/icons_mnav_sprite_retina.png');
        background-size: 32px 246px;
    }
}