html{
    font-size: 80%;
}

body{
    background-color: #ffffff;
    width: 100%;
    color: #000000;
    font-size: 18px; /*font-size: 1.125rem;*/
}

/* hide labels theorical result */
.hide_fork {
  display: none;
}

/* BANNER */
.header-wrap .banner img.img-fluid {
    max-width: 100%;
    height: auto;
}

.header-wrap {
    width:100%;
    position:fixed;
    background:#fff;
    top:0px;
    z-index:1000;
}

.dropdown-menu {
  z-index: 900;
}

.tabs-schedule {
  margin: 0 0 30px 0;
}

.logo_container {
  display: flex;
}

.logo {
   height: 30px;
}

/* CONTENT */
#content {
  position: relative;
  top: 50px;
  margin-bottom:42px;
  padding-bottom: 33px;
}

/* BREADCRUMB */
.bg-brreadcrumb {
    background-color: #ffffff;
    padding: 15px 0px;
}

.breadcrumb {
    background-color: #f4f4f4;
    margin-bottom: 0px;
    color:#797979;
}

/* NAVBAR TOP */
.navbar-fixed-top {
    border: 0;
    background-color: rgba(210,210,210,.7);
    box-shadow: 0 0 2px #000000;
    top: initial;
}

.navbar-brand {
   padding: 10px 15px;
}

.navbar-toggle {
   margin-left: 6px;
}

.navbar-nav>li>.dropdown-menu {
   font-size: 18px;
}




/* Navbar mobile */
.navbar-toggle {
  margin-left: 6px;
  border: none;
  background: transparent !important;
}

.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .t-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .m-bar {
  opacity: 0;
}
.navbar-toggle .b-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggle.collapsed .t-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .m-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .b-bar {
  transform: rotate(0);
}

.navbar-default .navbar-collapse {
    background-color: #fff;
}


/* NAVBAR BOTTOM */
.footer-mobile{
    margin-top: 25px;
    padding: 0px 45px;
}

a.logo_airweb img {
  width: 100px;
  height: 30px;
  position: relative;
  top: -2px;
}


.xs-navbar-bottom ul li a {
    margin:0;
    padding: 5px 15px;
}

.navbar-fixed-bottom, .xs-navbar-bottom {
  background-color: rgba(128,128,128,.5);
  box-shadow: 0 0 10px #000000;
  font-size: 17px;
  border: 0;
}

.navbar-fixed-bottom ul li a, .xs-navbar-bottom ul li a {
    color: #eeeeee;
    font-weight: 600;
}

.navbar-fixed-bottom ul li a:hover,
 .navbar-fixed-bottom ul li a:focus,
    .xs-navbar-bottom ul li a:hover,
        .xs-navbar-bottom ul li a:focus {
   color: #333333;
   background-color: transparent;
}

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

/************************ For all of pages ******************************************/
/* Flux */
.feedpage img,
.flux-content img{
  max-width: 100%;
  height:auto !important;
}
/* select custom */
select.custom {
  background-image: url("/assets/img/select.png");
  background-repeat: no-repeat;
  background-position: right center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.custom::-ms-expand {
  display: none;
}
/* Space between divs */
.empty{
  height:50px;
}
.
/*.content {
    width: 100%;
    height: 100%;
}*/

/* Remove padding row */



/************************ Homepage ********************************************/

.home-center-align {
    margin: 0 auto;
    padding: 20px 30px;
}
@media (min-width: 768px) and (max-width: 991px) {
  #homepage .container{
    width:90%;
  }
  .home-center-align{
    width: initial;
    padding-right: 0px;
    padding-left: 0px;
  }
}
#homepage .select-label,
#page-horaires .select-label{
   display:none;
}

/* Block */

.block{
  margin:5px;
  position: relative;
  border: 2px solid #EEEEEE;
}
.block .content {
  width: 100%;
  height: 100%;
  padding: 10px;
  z-index: 50;
  background-color: rgba(200,200,200,.7);
}


.block .title {
  padding-top: 15px;
  font-size: 20px;

}
.block .subtitle{
  margin-top: -5px;
  padding-bottom: 5px;
  font-size: 19px;
}
.block .title,
.block .subtitle {
  float: right;
  margin-right: 2%;

}


.block .icon {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
.icon:hover{
  cursor: pointer;
  background-color: rgba(0,0,0,0.35);
}

.icon .img-icon{
  background-color: #000000;
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.col {
  margin: 25px 0;
}


/* Form control*/
.block .form-control,
#page-horaires .form-control {
  position: relative;
  border: 0;
  padding: 0;
  height: 40px;
  color: #000000;
  text-align: left;
  border-radius: 4px;
  font-size: 19px;
}

/*.block .form-control,
#page-horaires .form-control {
  padding: 0;
  height: 40px;
  font-size: 18px;
  border-radius: 4px;
}
*/

.form-control .autocomplete {
    /*display: none;*/
    position: absolute;
    left: 0;
    top: 40px;
    z-index: 90;
    margin-bottom: 60px;
    border: 1px solid #000;
    padding: 5px 12px;
    width: 100%;
    max-height: 300px;
    background-color: #fff;
    border-radius: 5px;
    overflow: auto;
    color: #000;
}


.form-control .autocomplete a {
    color: #000;
    font-size: 17px;
    text-decoration: none;
}

.form-control .autocomplete a:hover, .autocomplete-arret .item-active , .autocomplete-addr .item-active {
   background-color: #EAEAEA;
   cursor: pointer;
}


.input_calendar input.time_picker_input {
  cursor: pointer;
}

.input_calendar .time_picker_control table tbody input {
    padding: 6px 13px !important;
}

.input_calendar .time_picker_control {
    position: absolute;
    z-index: 50;
    width: 100%;
    background-color: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 10px 0 0 0;
    margin-top: 2px;

}

.input_calendar .time_picker_control table{
    margin: 0 auto !important;
}


.autocomplete-group-title {font-weight: 600;}

.form-control .autocomplete hr {
  margin: 0;
}



.form-control input[type=date]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
  right: 5px;
  margin-right: 4px;
}
.form-control input[type=date]::-webkit-inner-spin-button {
  height: 30px;
}
.form-control input[type=date]::-webkit-calendar-picker-indicator {
  font-size: 18px;
}
.form-control input[type=date]::-webkit-calendar-picker-indicator:hover {
  background-color: #959595;
  color: #e6e6e6;
  cursor: pointer;
}


.form-control .autocomplete .item {
   display: inline-block;
   width: 100%;
}

.form-control .autocomplete .item:hover {
   background-color: #FBF9F9;
   cursor: pointer;
}



.autocomplete  .autocomplete-group-border {height: 20px;}


.block .form-control select,
#page-horaires .form-control select {
  border: 0;
  padding: 0 10px;
  color: #000;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #FFFFFF;
  cursor: pointer;
}

#page-horaires .form-control select option.select-label {
    color:#A9A9A9;
}

.block .form-control .btn-group,
#page-horaires .form-control .btn-group {
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #FFFFFF;
}


.block .form-control input,
#page-horaires .form-control input{
  border: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  color: #000;
  padding: 0 12px;
  background-color: #FFFFFF;
}
#page-horaires .form-control input,
#page-horaires .form-control input[type="text"]:focus{
  font-size: 19px;
}
.block .form-control input:focus {
  border: none;
}


.input-group-addon {
    color:black;
    cursor: pointer;
}

.block  .input-group-addon,
#page-horaires .input-group-addon,
.input_calendar .block-time .input-group-addon {
    margin: 0;
    border: 0;
    padding: 0;
    width: 40px;
    height: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    position: initial;
}

.input_calendar .block-time .input-group-addon {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/****** Button ******/
a.user-btn {
  -webkit-transition: all .25s ease;
     -moz-transition: all .25s ease;
      -ms-transition: all .25s ease;
       -o-transition: all .25s ease;
          transition: all .25s ease;
}


input[type="submit"].user-btn:hover,
input[type="submit"].user-btn:active,
input[type="submit"].user-btn:focus {
  box-shadow: 0 0 100px rgba(0,0,0,0.45) inset;
  -webkit-transition: all .25s ease;
     -moz-transition: all .25s ease;
      -ms-transition: all .25s ease;
       -o-transition: all .25s ease;
          transition: all .25s ease;

}

a.user-btn:hover,
a.user-btn:active,
a.user-btn:focus {
  box-shadow: 0 0 100px rgba(0,0,0,0.45) inset;
  -webkit-transition: all .25s ease;
     -moz-transition: all .25s ease;
      -ms-transition: all .25s ease;
       -o-transition: all .25s ease;
          transition: all .25s ease;
}

a.user-btn.btn-default:hover,
a.user-btn.btn-default:active,
a.user-btn.btn-default:focus {
  box-shadow: 0 0 10px rgba(0,0,0,1) inset;
  -webkit-transition: all .25s ease;
     -moz-transition: all .25s ease;
      -ms-transition: all .25s ease;
       -o-transition: all .25s ease;
          transition: all .25s ease;
}
.user-btn
{
  display: block;
  margin: 15px auto;
  border: 0;
  height: 40px;
  font-size: 19px;
  border-radius: 2px;
}

/* Special buttons */

.btn-recherche{
    width: 200px;
    color: rgb(255, 255, 255);
    background-color: black;
}

.btn-infos {
    width: 100px;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
}
.btn-iti{
    margin: 0;
    border: 0;
    width: 50%;
    height: 100%;
    font-size: 19px;
}


/************ Homepage/ horaires ***********/
.nostation{
  text-align: center;
  margin: 10px;
}

/************ Homepage/ itinerary ***********/
.block #itinerary .input-group input{
  font-size: 16px;
}

/************ Homepage/ infos-trafic ***********/

.block #infos {
  margin: 25px auto;
  overflow: auto;
  margin-left: 20%;
}

.block .icon-line {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  text-align: center;
  line-height: 30px;
  font-size: 19px;
  color: #FFFFFF;
}

/************ Homepage/ actualite ***********/
#actualites .news{
  margin:10px auto;
}

#actualites .news .img{
  width:72%;
  float:left;
  position:relative;

}
#actualites .news .img-gradient{
  min-width: 205px;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 35%;
  background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(0,0,0,.9)); /* IE 10 */
  background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(0,0,0,.9)); /* Firefox */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0)), to(rgba(0,0,0,.9))); /* Chrome */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0)), to(rgba(0,0,0,.9))); /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(0,0,0,.9)); /* Safari5.1 Chrome 10+ */
  background: -o-linear-gradient(top, rgba(255,255,255,1), rgba(0,0,0,.9)); /* Opera 11.10+ */
}

#actualites .news .detail{
  position: absolute;
  /*left: 0;*/
  width: 72%;
  color: #FFFFFF;
  padding : 0 15px;
  bottom : 0px;
  font-size: 17px;
}

#actualites .news .detail p {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#actualites .news .more{
  padding-left:5px;
}
#actualites .news .btn-infos{
  position: absolute;
  bottom:0px;
  right: 0px;
  border-radius:2px;
  width:100px;
  font-size:18px;
  text-align:center;
}
#actualites .news .btn-sm{
  position:absolute;
  width:50px;
  text-align:center;
  color: #FFFFFF;
  bottom : 0px;
  font-size: 17px;
  margin-right: 20px;
}


@media (min-width: 992px) and (max-width: 1199px) {
  #actualites .news .img{
   width:72%;
  }
  #actualites .news .btn-infos{
    width:85px;
    padding:6px 6px;
  }

}
@media (min-width: 768px) and (max-width: 991px) {

  #actualites .news .detail{
  padding : 0 20px;
  }
}




/************ Homepage/ plans, contact & boutique ***********/
.small-home-button { text-align: center; }
.small-home-button .icon,
.small-home-button .title {
  float:none;
  display: block;
  margin: auto;
  text-align: center;
}
.small-home-button .title {
  padding-top: 5px;
  height: 30px;
  line-height: 20px;
}


/************ Homepage/ Version Mobile ***********/

#mobile .icon,
#mobile .title{
  float:none;
  display: block;
  text-align: center;
}

#mobile .icon{
 margin: 10px auto;
}
#mobile .title{
 margin: 3px auto;
}

/******************************* Page Horaires/Itinéraires *********************************/

#page-horaires .user-btn{
    margin:50px auto;
}

/*#page-itinerary .block-date date-picker .input-date,
#page-itinerary .block-time time-picker .input-time{
  -webkit-appearance: none;
}*/


/************ Head button ***********/
.btn-background {
    position:relative;
    background-color: black;
    width: 100%;
    height: 60px;
    text-align: center;
}

.head-button {
  padding:18px 0;
  display:block;
  height: 60px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
}

.head-button {
 background-color: rgba(255,255,255,.45);
  -webkit-transition: background-color .25s ease;
     -moz-transition: background-color .25s ease;
      -ms-transition: background-color .25s ease;
       -o-transition: background-color .25s ease;
          transition: background-color .25s ease;
}

.head-button:hover{
background-color: rgba(0,0,0,.35);
  cursor: pointer;
  -webkit-transition: background-color .25s ease;
     -moz-transition: background-color .25s ease;
      -ms-transition: background-color .25s ease;
       -o-transition: background-color .25s ease;
          transition: background-color .25s ease;
}
.head-button-active{
  background-color: black;
  pointer-events: none;
}

.head-button-active:after{
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 30px;
    margin-left: -30px;
}

@media (max-width: 767px) {
    .head-button {
      padding:9px 0;
      font-size: 16px;
    }
    .head-button-iti {
      padding:20px 0;
      font-size:18px;
    }

}

#page-horaires .user-btn{
    margin:50px auto;
}

.form-control ul.dropdown-menu {
  width: 100%;
}

.iframe_ccontainer {
   margin: 20px 0 0 0;
}

.iframe_ccontainer iframe {
  width: 100%;
  height: 400px;
}

.loading_image {
  text-align: center;
}

/******************************* Result horaire *********************************/

/*************** Result pp **********/


.block_trip .icon-line,
#result-iti .icon-line,
#result-pp .icon-line,
#result-ht .icon-line{
  display: inline-block;
  /*width: 36px;
  height: 36px;
  border-radius: 18px;*/
  display: inline-block;
  width: 41px;
  height: 41px;
  border-radius: 20px;
  text-align: center;
  line-height: 35px;
  font-size: 16px;
  color: #FFFFFF;
  padding: 2px;

}



#result-pp .block{
    display:block;
    text-align: center;
    border:none;
    padding: 15px 0 15px 0;
}
#result-pp #station-name{
    font-weight: bold;
    color: #222222;
}


#result-pp #icon-flag{
    width: 40px;
    height: 40px;
}

#result-pp .table th {
  vertical-align: middle;
}

#result-pp .table td:first-child,
#result-pp .table td:last-child,
#result-pp .table th:first-child,
#result-pp .table th:last-child{
    vertical-align: middle;
    text-align: center;
}
/*#result-pp .table td:last-child,
#result-pp .table th:last-child{
    font-weight: bold;
}*/


#result-pp .table th{
    color: #FFFFFF;
}


#result-pp .table {
    width:100%;
    white-space: nowrap;
}

#result-pp .table td,
#result-pp .table th{
    border:none;
}


#result-pp .table .row-ligne{
    width:20%;
}
#result-pp .table .row-direction{
    width:45%;
}
#result-pp .table .row-minute{
    width:35%;
}

#result-pp .table td.directionName {
    vertical-align:middle;
}



@media only screen and (max-width:768px) {
  #result-pp .table td,  #result-pp .table th{
        font-size:15px;
    }
}

/*************** Result ht **********/

#result-ht #station{
   display: block;
   padding: 20px 0 20px 0;
}

#result-ht #direction,
#result-ht #resultat
{
   display: block;
   padding: 10px 0 10px 0;
}


#result-ht .switch-direction-btn {
  position: relative;
  margin:0 auto;
  margin-top: 2px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  text-align: center;
  padding: 0px;
}

#result-ht #direction-label{
  color: #7A7A7A;
}

#result-ht .table{
    table-layout: fixed;
}

#result-ht .table th
{
  position: relative;
  text-align: center;
  border: 2px solid #F4F4F4;
}
#result-ht .table td {
  text-align: center;
  border: 2px solid #F4F4F4;
}
#result-ht .table th .vertical-separator {
  position: absolute;
  top: 0;
  right: -8px;
}

#result-ht .table> thead > tr> td, #result-ht #time-table> thead > tr> th {

   background-color: #F4F4F4;
}
#result-ht .table> tbody > tr:nth-child(2n+1) > td, #result-ht .table> tbody > tr:nth-child(2n+1) > th {
   background-color: #DBDBDB;
}

#result-ht .table> tbody > tr:nth-child(2n) > td, #result-ht .table> tbody > tr:nth-child(2n) > th {
   background-color: #E7E7E7;
}
#result-ht .btn-down{
   max-width:300px;
   color:white;
}

/******************************* Result itinerary *********************************/
/*************** Result iti 1 **********/
#new-search #big {
  margin: 10px 0;
  border: 1px solid #FFFFFF;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 18px;
  color:#FFFFFF;
  float:left;

}
#new-search #small,
#new-search #larger-map {
  margin: 10px 0;
  border: 1px solid #FFFFFF;
  width: 50px;
  height: 40px;
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
}
#new-search #small{
  float:left;
}
#new-search #larger-map{
  float:right;
}
#new-search #small img,#new-search #larger-map img{
  margin-top: -1px;
  height: 40px;
}

#result-iti .block-label{
  display: block;
  margin-top:20px;
  margin-bottom: 20px;
  padding:2px 5px;
  height: 25px;
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: left;
}

#result-iti .block{
  cursor: pointer;
  display: block;
  padding-top:5px;
  text-align: left;
  border:none;
}

#result-iti .block.selected{
  background-color: rgba(0,0,0,.35);
}

#result-iti .result{
  display: block;
  padding-bottom: 10px;
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: #ddd;
  /*border-bottom: 2px solid #ddd;*/
}
#result-iti .icon-line{
  margin-left: 10px;
}

#result-iti .block_trip .icon-line{
  margin: 0;
}

#result-iti #station-name{
  padding-top: 5px;
}
#result-iti #time-label{
  text-align : right;
}
#result-iti #time{
  display:inline-block;
  font-weight: bold;
  text-align : right;
  float : right;
}
#result-iti .icon-bus{
  background-image: url("/assets/img/icon_bus_even.png");
}
#result-iti .icon-man{
  background-image: url("/assets/img/icon_man_even.png");
}

#result-iti img{
  border:0;
}
#result-iti .icon-man,
#result-iti .icon-bus{
  display: inline-block;
  width: 16px;
  height: 20px;
  background-size: 100% 100%;
  color: #ffffff;
  background-color: rgb(160,160,160);
}
#result-iti .icon-arrow{
  color: rgb(160,160,160);
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  top: -2.5px;
}

#result-iti {
  margin-top:30px;
}
@media screen and (min-width: 900px){
  #result-iti {
  padding-left: 30px;
  }
}
@media screen and (max-width: 990px){
  #result-iti {
  padding-left: 0px;
  }
  #result-iti .block-label{
    font-size: 14px;
  }
}
/*@media screen and (max-width: 768px){
  #result-iti #time-label {
  text-align: center;
  }
}
*/

/******************************* Page Contact *********************************/

#page-contact .lower{
    font-size: small;
    color:#777777;
  }
#page-contact .static label{
  display: block;
}
#page-contact .static .form-control{
  display: inline-block;
}
#page-contact .glyphicon-ok,
#page-contact .glyphicon-remove{
  display:inline;
}
#page-contact .green{
  width: 30px;
  height: 30px;
  text-align: center;
  pointer-events: none;
  color: #3c763d;
  font-size: initial;
}

#page-contact .red{
  width: 30px;
  height: 30px;
  text-align: center;
  pointer-events: none;
  color: #a94442;
}


#page-contact textarea{
    height:100px;
    padding: 10px;
    width:100%;
    color: #666;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
  }

#page-contact .table > tbody > tr >td{
    vertical-align: middle;
    width:50%;
}

#page-contact label{
    margin-top: 5px;
}
#page-contact .display{
  margin-top:15px;
}
#page-contact .display2{
  margin-top:45px;
}
#page-contact .text{
  margin-bottom:15px;
}

#page-contact input.invert{
    width: 50px;
    padding: 6px 10px;
    display : inline-block;
}

#page-contact .help{
  color: #a94442;
  font-size: small;
  font-weight: initial;
}
#page-contact .help-block{
  color: #a94442;
  font-size: small;
  font-weight: initial;
}
#page-contact .help-mess{
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  font-size:16px;
}

/*input of date-picker has class = form-control*/
#page-contact date-picker{
  display: inline-table;
}
#page-contact date-picker{
  width:100%;
}

#page-contact date-picker input[type="text"],
#page-contact date-picker input[type="date"]{
    display: inline-block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

    -webkit-appearance: none;

}

#page-contact date-picker input[type="text"]:focus,
#page-contact date-picker input[type="date"]:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

#page-contact .select-error,
#page-contact .error input[type="text"] {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

#page-contact .input-group-addon{
  position: initial;
}
#page-contact .btn-submit{
  text-align:center;
}
#page-contact .horizontal-separator {
  background-size:100% 2px;
}
#page-contact .formcontact{
  font-size:20px;
  font-weight: bold;
}

/******************************* Version Mobile *********************************/


#v-mobile .mobile_icon {
   text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    margin: 10px auto;
}


 #v-mobile .mobile_icon img.img-icon {
    width: 100%;
    height: 100%;
}

#v-mobile .title {
    text-align: center;
}


.blurred-bg {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -ms-filter: blur(3px);
    -o-filter: blur(3px);
    filter: blur(5px);
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;

}

.background-img {
    /*position: fixed;*/
    left: 0;
    right: 0;
    z-index: 0;
    /*background: url("../img/main_background.png") no-repeat center fixed;*/
    width: 100%;
    height: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}



.v-mobile .link-block:hover{
  background-color: rgba(0,0,0,0.35);
}


.xs-block  .xs-icon {
    /*background-color: rgb(1, 57, 130);*/
}

.xs-block .xs-title {
    text-align: center;
    margin: 3px 0 0 0;
    line-height: 25px;
    /*color: rgb(1, 57, 130);*/
}

.xs-block {
  margin:5px;
  padding: 5px;
  position: relative;
  border: 1px solid #ddd;
  height: 120px;
  box-shadow: 0 2px 5px #555;
  background-color: rgba(200,200,200,.7);
  overflow: hidden;
}

.xs-block a.link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0,0,0,0);
  -webkit-transition: background-color .25s ease;
     -moz-transition: background-color .25s ease;
      -ms-transition: background-color .25s ease;
       -o-transition: background-color .25s ease;
          transition: background-color .25s ease;
}

.xs-block a.link:hover,
.xs-block a.link:active,
.xs-block a.link:focus {
  background-color: rgba(0,0,0,0.35);
  -webkit-transition: background-color .25s ease;
     -moz-transition: background-color .25s ease;
      -ms-transition: background-color .25s ease;
       -o-transition: background-color .25s ease;
          transition: background-color .25s ease;
}


/******************************* Feed pagexx *********************************/

.main-content .title, .main-content .sub-title {
    margin: 10px 0px;
}

.main-content .title h1 {
    margin:0;
}

.main-content .sub-title h2  {
    margin:0;
    font-size: 24px;
    color: #797979;
    font-weight: bold;
}

/******************************** Page Plans *********************************/

.plan > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}


.plan .block {
    border-radius: 5px;
}

.plan .block .row {
    margin: 0;
}


.plan .block .name {
    height: 40px;
    text-align: center;
    margin: 5px 0 0 0;
    padding: 5px 0 5px 10px;
}

.plan .block .number {
    height: 56px;
    font-size:26px;
}

.plan .block .down-plan {
    width: 30px;
    height: 30px;
    margin: 8px auto;
}


.plan .block .down-plan a {
    display: block;
}

.plan .block .down-plan a img:hover,
 .plan .block .down-plan a img:focus,
   .plan .block .down-plan a img:active
{
    background-color: rgba(0,0,0,0.35);
    -webkit-transition: background-color .25s ease;
       -moz-transition: background-color .25s ease;
        -ms-transition: background-color .25s ease;
         -o-transition: background-color .25s ease;
            transition: background-color .25s ease;
}

.plan .block .icon-down img {
    width: 100%;
    height: 100%;
    cursor: pointer;
}


.plan .block span.line-number {
    display: inline-block !important;
}

.plan .block span.line-number {
    border-radius: 25px;
    display: inline-block;
    width: 50px;
    height: 50px;
    color: #fff;
    left: -5px;
    position: relative;
    line-height: 50px;
}



/******************************* Page Infos Traffic ****************************/

.description-trafic {
    background-color:#f5f5f5;
    padding:18px;
}

.description-trafic img {
    max-width: 100%;
}

.line-separator {
    height:1px;
    background:#717171;
    border-bottom:1px solid #DCDCDC;
}

.traffic {padding: 0 0 9px 0;margin: 20px 0 0 0;}

.traffic .type {
    margin:0 0 0 30px;
    font-size: 18px;
    font-weight: bold;
    color: #797979;
    line-height: 40px;
}

.traffic .ligne {
    font-size: 27px;
}

.traffic .icon-line {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 22px;
    color: #fff;
    background-color: #000;
}

.traffic .more-info-traffic {
    color: #fff;
    background-color: red;
    float: right;
    position: absolute;
    top: 5px;
    right: 0;
}

/******************************* Page Actualites ******************************/

.news {
  display: block;
  margin: 10px 0;
  overflow: hidden;
  position: relative;

}

.news .thumb {min-width: 205px;}
.news img {
    width: 100%;
    height: auto;
    min-width: 205px;
}

.news .info {padding:0 0 0 3%}

.news .info .title,
.news .info .sub-title  {
    color: #777;
    height: 26px;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
}


.news .info .description{
    font-size: 18px;
    overflow: hidden;
}

@media (min-width: 1200px) {
  .news .info .description {
    height: 60px;
    line-height: 20px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .news .info .description {
    height: 92px;
    line-height: 23px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .news .info .description {
    height: 80px;
    line-height: 25px;
  }
}
.news .info .ellipsis {
  overflow: hidden;
  height: 80px;
  line-height: 25px;
}
.news .info .ellipsis:before {
  content:"";
  float: left;
  width: 5px; height: 80px; }

.news .info .ellipsis > *:first-child {
  float: right;
  width: 100%;
  margin-left: -5px; }

.news .info .ellipsis:after {
  content: "\02026";

  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;

  float: right; position: relative;
  top: -25px; left: 100%;
  width: 3em; margin-left: -3em;
  padding-right: 5px;

  text-align: right;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

.news .plus{
  position: absolute;
  bottom:0;
  right:0;
}


.hr-separator {
  background: url("../img/horizontal_separator.png") repeat-x ;
  height: 6px;
  background-size: 100% 4px;
}

.btn-more a {
   width: 100%;
   color: rgb(255, 255, 255);
   background-color: rgb(0, 0, 0);
}

.horizontal-separator {
  width: 100%;
  height: 8px;
  background-image: url("../img/horizontal_separator.png");
  background-repeat: repeat-x;
  background-size: 100% 4px;
}
.vertical-separator {
  width: 8px;
  height: 100%;
  background-image: url("../img/vertical_separator.png");
  background-repeat: repeat-y;
  background-size: 4px 100%;
}


/*************** Result iti 2 **********/

#map_container {
    height: 800px;
}


#result-iti .block_trip {
    padding: 25px;
}

#result-iti .block_trip:nth-child(odd) {
    background-color: #f3f3f3;
}

#result-iti .block_trip:nth-child(even) {
    background-color: #ededf2;
}

#result-iti .block_trip .label_trip {
   color: #777;
}

#result-iti .bus-line {
    width: 2px;
    background-image: url('../img/line_trajet.png');
    background-size: 100% 100%;
}

#result-iti .block_trip table tr td:nth-child(4) div.scroll-text {
  width: 100%;
  white-space: nowrap;
}


#result-iti .block_trip .bus-line-1 {
    margin: -5px auto -34px auto;
    height: 39px;
}
#result-iti .block_trip .bus-line-2 {
    margin: -44px auto -44px auto;
    height: 88px;
}
#result-iti .block_trip .bus-line-3 {
    margin: -35px auto -10px auto;
    height: 45px;
}


#result-iti .block_trip table {
    margin: 0;
}

#result-iti .block_trip table tr td {
    border: 0;
    padding: 0;
    vertical-align: middle;
}

#result-iti .block_trip table tr.bus-route > td {
  padding-bottom: 1em;
  padding-top: 0.8em;
}


#result-iti .block_trip table tr td:nth-child(1),
 #result-iti .block_trip table tr td:nth-child(3),
  #result-iti .block_trip table .picto-point  {
    width: 20px;
}


#result-iti .block_trip table tr td:nth-child(2){
    width: 52px;
    padding: 0 0 0 5px;
}


#result-iti .block_trip table .glyphicon {
    font-size: 15px;
    color:#777;
}

#result-iti .block_trip table .walk-line {
    margin: -13px auto;
    width: 2px;
    height: 79px;
    background-image: url('../img/point_trajet.png');
    background-size: 50% 10%;
}

#result-iti .block_trip table .picto-point {
    height: 20px;
    background-image: url('../img/picto_point.png');
    background-size: cover;
}


/* DATE-PICKER & TIME-PICKER*/
.itinerary-params {
  width: 50%;
}


.content .col {
  margin: 25px 0;
}

.input_calendar .input-group input[type="text"],
 .input_calendar .input-group input[type="time"],
 .input_calendar .input-group input[type="date"]{
    border: 0;
    padding: 6px 12px;
    width: 100%;
    height: 40px;
    color: #000;
    background-color: #FFFFFF;
    font-size: 17px;
}

/** keep format of datepicker and timepicker in mobile devices **/
.input_calendar .input-group input[type="time"],
 .input_calendar .input-group input[type="date"]{
     -webkit-appearance: none;
 }

.input_calendar .block-date .input-group input[type="text"] {
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
}

.input_calendar time-picker,
.input_calendar date-picker {
    width: 100%;
}

.block-date .col-xs-6
{
  padding-left: 0px;
  padding-right: 1px;
}
.block-time .col-xs-6
{
  padding-left: 1px;
  padding-right: 0px;
}

.block-date .dropdown-menu .uib-daypicker{
   width:300px;
 }

.block-date .dropdown-menu .uib-monthpicker{
  width:250px;
}
.block-date .dropdown-menu .uib-yearpicker{
  width:230px;
}

.block-time .uib-timepicker .form-control {
 font-size:15px;
 text-align: center;
}
.uib-datepicker-popup {
 max-width: 255px;
}
/***************** Page Points de vente ******************/
#page-vente .search{
  display : none! important;
}
#page-vente .clear-btn,
.search-btn {
    background-color: #fff;
}
.search-btn .span{
    color:black;
}

#page-vente #alert {
  margin-top: 15px;
  margin-bottom: 0;
  padding: 2px 10px;
  font-size: 14px;
}
#page-vente #map {
  margin-top:10px;
  margin-bottom:10px;
  height: 300px;
}
#page-vente .address-block {
  display: block;
  position: relative;
  margin: 3px 0;
  min-height:90px;
  color: #000;
  line-height: 35px;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
  background-color: #f4f4f4;
  -webkit-transition-property: color, background-color, border-radius, box-shadow;
     -moz-transition-property: color, background-color, border-radius, box-shadow;
      -ms-transition-property: color, background-color, border-radius, box-shadow;
       -o-transition-property: color, background-color, border-radius, box-shadow;
          transition-property: color, background-color, border-radius, box-shadow;
  -webkit-transition-duration: .25s;
     -moz-transition-duration: .25s;
      -ms-transition-duration: .25s;
       -o-transition-duration: .25s;
          transition-duration: .25s;
}
#page-vente .address-block:hover,
#page-vente .address-block:active,
#page-vente .address-block:focus{
  background-color: rgba(0,0,0,.25);
  cursor: pointer;
  -webkit-transition: background-color .25s ease;
     -moz-transition: background-color .25s ease;
      -ms-transition: background-color .25s ease;
       -o-transition: background-color .25s ease;
          transition: background-color .25s ease;

}
#page-vente .visible-add,
#page-vente .visible-cp{
      display : none!important;
}

#page-vente .depositary{
  padding-top: 10px;
  margin-left: 15px;

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

  #page-vente .depositary{
  margin-left: 0px;
  }

}
.icon-map-vente {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 10px;
  width: 70px;
  height: 70px;

}
.icon-map-vente img,
.icon-map-vente div { position: absolute; }
.icon-map-vente img {
  left: 0;
  top: 0;
  width: 70px;
  height: 70px;
}
.icon-map-vente div {
  left: 13px;
  top: 17px;
  width: 41px;
  height: 24px;
  background-color: black;
}
.autocomplete-suggestions { border: 1px solid #999; background: #fff; overflow: auto; border-radius: 5px }
.autocomplete-suggestion { padding: 2px 10px; font-size: 14px; white-space: nowrap }
.autocomplete-selected { background: #F0F0F0 }
.autocomplete-suggestions strong { font-weight: bold; font-size: 14px }
.H_ib_content { color: #fff; min-width: 10em !important }
.btn-group .btn { margin-left: 0 !important }
.bgGrey { background: rgb(244,244,244) !important }
.bgWhite { background: #FFF !important }
.click { cursor: pointer }
.row { margin-left: 0; margin-right: 0 }

.custom_error_msg {
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  font-size:16px;
  margin: 5px 0 0 0;
}


/********************************************** Media Queries **********************************/
@media only screen and (min-width:1200px) {
  .navbar-header{
    margin : 0 3% 0 0;
  }
}
@media only screen and (min-width:768px) {
    /* Force left position for the logo */
    .navbar-header {
      width: 103px;
    }

    /* NAVBAR hover */
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    }
   /* Btn actualite */
    .btn-col {
      position: absolute;
      right: 0;
      bottom: 0px;
    }
    .navbar-nav{
    width: 78%;
    display: flex;
    justify-content: space-around;
    }
    .navbar-nav>li>a{
      cursor: default;
    }
}

@media only screen and (max-width:768px) {
    /* Page contact / MODAL */
    .modal-sm {
      width: 300px!important;
    }
    .modal-dialog {
      margin: 30px auto;
    }
    /* center logo in phone devices */
    img.logo {margin: 0 auto;}

    .navbar-brand {
        position: relative;
        left: 50%;
        margin-left: -130px;
    }


    /* Page plans */
    .plan .block {
        width: 100%;
        overflow: hidden;
        height:48px !important ;
    }

    .plan .block .name {
        width: 70%;
        float: left;
        text-align: left;
        font-size:15px;
    }

    .plan .block .down-plan {
        float: right;
        margin: 5px;
    }

    .plan .block .down-plan a{
        display: block;
    }

   .form-control input.time_picker_input {
      height: auto !important;
      padding-top: 8px !important;
    }


    .plan .block .down-plan a:hover,
     .plan .block .down-plan a:active,
      .plan .block .down-plan a:focus {
          background-color: rgba(0,0,0,0.35);
            -webkit-transition: background-color .25s ease;
            -moz-transition: background-color .25s ease;
            -ms-transition: background-color .25s ease;
            -o-transition: background-color .25s ease;
            transition: background-color .25s ease;
    }


    .plan .name .text {
        display:inline-block !important;
    }

    .plan .block span.line-number {
        border-radius: 15px;
        background: #000;
        display: inline-block;
        width: 30px;
        height: 30px;
        color: #fff;
        text-align: center;
        position: absolute;
        left: 53px;
        top: 7px;
        line-height: 30px;
    }

    /* Page Infos traffic */
    .traffic .type {
       margin:15px 0;
    }

    .traffic .more-info-traffic {
        float: none;
        position: static;
        display: inline;
    }


}

@media screen and (max-width: 939px){
   .navbar-nav,
   .navbar-nav>li .dropdown-menu { font-size: 16.5px; }


    /* Title and Subtitles */

    .main-content .title h1 {
        font-size: 30px;
    }

    .main-content .sub-title h2  {
        font-size: 28px;
    }

}

/********************************** Media Queries / PHONE devices**********************************/
/**** Page Contact ****/
@media only screen and (max-width: 568px){

  /**** Page Contact ****/
    #page-contact .col-xs-8{
      width:80%;
    }
    #page-contact .col-xs-6,
    #page-contact .col-xs-5,
    #page-contact .col-xs-12{
      width:100%;
      padding-left: 0px;
      padding-right: 0px
    }
     #page-horaires .col-xs-offset-2{
      margin-left: 0%;
    }
    #page-horaires .col-xs-8{
      width:100%;
      padding-right: 0px;
      padding-left: 0px;
    }
    #page-contact .help-textarea{
      display : block ;
    }
    .main-content .col-xs-12{
      width:100%;
      padding-left: 0px;
      padding-right: 0px
    }
    #result-ht .table {
    overflow-x: auto;
    display: block;
    }
    #result-iti .block-label{
      display: block;
      margin-top: 0px;
      margin-bottom: 10px;
      padding: 5px 5px;
      font-weight: 600;
      font-size: 12px;
    }
    #result-iti .block{
      margin:0px;
      font-size: 13px;
    }
    #result-iti .icon-line{
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 20px;
      text-align: center;
      line-height: 26px;
      font-size: 15px;
      color: #FFFFFF;
      background-color: rgb(99, 176, 0);
      padding: 2px;
    }
     #page-itinerary #map_container{
      height:450px;
     }
     /* Title and Subtitles */

    .main-content .title h1 {
        font-size: 22px;
    }

    .main-content .sub-title h2  {
        font-size: 20px;
    }
}

@media only screen and (min-width: 568px) and (max-width: 768px){
    #page-contact .col-xs-6,
    #page-contact .col-xs-5,
    #page-contact .col-xs-12,
    #page-contact .col-xs-12,{
      padding-left: 5px;
      padding-right: 5px
    }
   /* #page-contact .static .form-control,
    #page-contact date-picker{
      width:80%;
    } */
}

@media screen and (min-width:769px) {
    #page-contact .static .form-control,
    #page-contact .date-static date-picker{
      width: 72%;
    }
}
@media only screen and (max-width: 568px) and (orientation:portrait){
      /**** Page vente ****/
     #page-vente .visible-esp{
      display : none;
    }
    #page-vente .visible-add{
      display : block!important;
    }
    #page-vente .visible-cp{
      display : block!important;
    }
    #page-vente .icon-map-vente div {
      left: 9px;
      top: 10px;
      width: 30px;
      height: 20px
    }
    .icon-map-vente {
      width: 50px;
      height: 50px;
    }
    .icon-map-vente img {
      top:0x;
      width: 50px;
      height: 50px;
    }
    #page-vente .depositary{
      margin-left:30px;
    }
    #page-vente .input-group-lg>.form-control,
    #page-vente .input-group-lg>.input-group-addon,
    #page-vente .input-group-lg>.input-group-btn>.btn {
      height: 35px;
      padding: 5px 9px;
      font-size: 14px;
      line-height: 1;
      border-radius: 2px;
    }
    #page-vente .input-group-lg>.dropdown-menu{
      width:100%
      overflow:hidden;
      font-size: 13.5px;
    }
}


@media only screen and (min-width: 320px) and (max-width: 640px){
    /**** Page Horaires/Itineraires ****/

    #page-itinerary .input_calendar .input-group{
      font-size: 15px;
    }
     #page-itinerary .input_calendar .input-group input{
      font-size: 15px;
    }
    #page-itinerary .block-date{
      margin-right: 1px
    }
    #page-itinerary .block-time{
      margin-left: 1px
    }
    /**** Page Vente ****/
    #page-vente .address-block {
      line-height: 25px;
      font-size: 16px;
    }
    #page-vente .depositary{
      margin-left:35px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 667px) and (orientation: portrait){

   /**** Page Horaires/Itineraires ****/
    /*#page-horaires .search-view .col-xs-8{
      width:100%;
      padding-left: 0px;
      padding-right: 0px
    }*/
}
@media only screen and (min-width: 320px) and (max-width: 667px) and (orientation: landscape){
    /**** Page Vente ****/
    #page-vente .visible-esp{
      display : none;
    }
     #page-vente .visible-add{
      display : block!important;
    }
    #page-vente .visible-cp{
      display : none!important;
    }
}