html,body {margin:0; padding:0; height:100%;}
body {font-family:Lato,Arial; font-size:15px; color:#333; font-weight:400; background:#eee url('/ima/bck.jpg') center center fixed; background-size:cover;}
.story {margin:auto; width:1300px;}
.storymax {margin:auto; width:1320px; font-size:0;}
.padd {padding:20px 0;}
.tleft {float:left;}
.tright {float:right;}
.clear {clear:both;}
.center {display:block; text-align:center;}
.zero {font-size:0;}
.left {text-align:left;}
.right {text-align:right;}
h1,h2,h3,h4,h5 {font-weight:normal; padding:0; margin:0; font-size:100%;}
form {display:inline;}
img {max-width:100%;}

  #home {position:relative;width:100%; height:80px; padding:20px 0; background:#ef743b; font-size:0;}
  #logo {width:275px; display:inline-block; vertical-align:middle; margin-top:20px;}
  #menu {width:calc(100% - 275px); display:inline-block; vertical-align:middle; text-align:right;}
  .menu {font-size:18px; padding:5px 10px; display:inline-block; color:#333; background:#fff; cursor:pointer; margin-left:10px;}
  .menu a {color:#333 !important;}
  .menu2 {font-size:18px; padding:5px 10px; display:inline-block; color:#fff; background:#e40006; cursor:pointer; margin-left:10px;}
  .menu2 a {color:#fff !important;}
  .menu3 {font-size:18px; padding:5px 10px; display:inline-block; color:#333; background:#eee; cursor:pointer; margin-left:10px;}

  #main {position:relative; width:100%; padding:40px 0 20px 0;}
  .ariane {background:#777; color:#fff; padding:10px; font-weight:700;}
  h1 {font-size:22px; font-weight:bold;}
  #gorecpwd {cursor:pointer;}

  .cell {border:0; background:#fff; padding:10px;}
  .half {width:610px;}
  .full {width:calc(100% - 20px);}
  .btext, .btextd, .bselect {font-family: Lato,Arial;font-size:15px; border:1px solid #777; background:#fff; color:#333; padding:10px 5px; margin:2px 0; transition: 0.3s all ease; text-transform: uppercase; display:inline-block;}
  .btext {width:340px;}
  .bselect {padding:9px 5px;}
  .btext:hover, .bselect:hover {border:1px solid #777; box-shadow:0px 0px 8px #777;}

  .r {border:1px solid #e40006; box-shadow:0px 0px 5px 2px #e40006;}
  .bvert, .brouge, .borange {display:inline-block; font-family:Lato,Arial;font-size:18px; color:#fff; border:0; background:#8fc577; font-weight:700; padding:5px 10px; cursor:pointer; transition:0.4s all ease; margin:5px 0;}
  .bvert:hover {background:#1c6a1a;}
  .brouge {background:#e40006;}
  .borange {background:#ef743b;}
  .borange:hover {background:#c14d01;}
  #legende {display:inline-block; vertical-align:top; width:calc(25% - 20px); margin:40px 20px 0 0; font-size:15px;}
  .leg {display:inline-block; width:40px; height:20px; margin:5px 10px 0 0; background:#51be00;}

  #cal {display:inline-block; vertical-align:top; width:calc(75% - 20px); margin:40px 10px; font-size:15px;}
  #headcal {display:block; text-align:center; margin-bottom:20px; font-size:21px; font-weight:bold;}
  #calendrier {width:100%;}
  #calendrier td {width:14.28%; vertical-align:top; padding:5px;}
  #calendrier .td {height:92px; background:#fff;}
  #calendrier .gris {background:#f5f5f5;}
  #calendrier input[type="checkbox"] {display:none;}
  #calendrier input[type="checkbox"] + label {display:block; font-size:13px; color:#fff; background:#8fc577; padding:8px 4px; cursor:pointer; margin:5px 0 0 0;user-select: none;}
  #calendrier input[type="checkbox"]:checked + label, .legbleu {background-color:#187d8f;}
  #calendrier input[type="checkbox"] + .option, .legorange {background-color:#ff6600;}
  #calendrier input[type="checkbox"]:disabled + .booked, .legrouge {background-color:#e40006;}
  #calendrier input[type="checkbox"] + .limited, .legnoir {background-color:#333;}


  #mjours {display:none;}

  #fin {position:fixed; z-index:99; bottom:0; background-color:#187d8f; color:#fff; text-align:center; width:100%; transition:0.3s;}

  .ac_results {position:relative; font-size:15px; margin-top:5px; border:1px solid #dddd; width:310px!important; background:#f9f9f9; z-index: 15000!important; min-height:100px;}
  .ac_results ul {list-style:none; padding:0; margin:0;}
  .ac_results li {margin:0px; padding: 5px; cursor:default; display:block; overflow:hidden;}
  .ac_loading, .ac_odd {background:#fff;}
  .ac_over {background-color:#333; color:#fff;}

  #bas {position:relative;width:100%; background:#777; color:#fff; padding:10px 0; text-align:center;}

  .service {display:inline-block; vertical-align:top; position:relative; padding:20px; width:100%; max-width:270px; background:#fff; margin:10px; text-align:center; transition:0.3s;}
  .service img {display:block; margin:0 auto 10px auto; width:100%;}

  h2 {font-size:26px; font-weight:bold;}
  h3 {font-size:24px;}
  h4 {font-size:14px; margin:10px 0;}
  h5 {font-size:18px; font-weight:bold;}

  a {outline:none; text-decoration:none;}
  a:link { color:#333;}
  a:visited{ color:#333;}
  a:hover { color:#111;}
  a.b {color:#fff;}

  #admin {position:relative;width:100%; font-size:15px; background:#fff; min-height:100%;}
  #fix {position:fixed; z-index:99; color:#ffffff; background:#777; display:block; padding:10px; font-size:17px; width:100%;}
  #admlogo {display:inline-block; vertical-align:middle; padding:5px;}
  .item {border:1px solid #777; font-weight:400; font-size:15px; padding:3px; display:inline-block; vertical-align:middle; color:#777; cursor:pointer; margin-right:5px; transition: 0.4s all ease;}
  .item:hover, .on  {background:#777; color:#fff;}
  .item2 {border:1px solid #e40006; font-weight:400; font-size:15px; padding:3px; display:inline-block; vertical-align:middle; color:#e40006; cursor:pointer; margin-right:5px; transition: 0.4s all ease;}
  .item2:hover {background:#e40006; color:#fff;}
  #admin .t {width:100%; border-collapse:collapse;}
  #admin .t td {color:#333; font-size:15px; padding:5px;border:1px solid #ddd; overflow:hidden; background:#fff;}
  #admin .t tr:hover td {background:#f9f9f9;}
  #admin .t tr:hover .bande, #admin .t .bande {font-weight:700; background:#aaa; color:#fff; font-size:15px;}
  #admin .t tr:hover .bande2, #admin .t .bande2 {background:#555; color:#fff;} 
  thead th {position: -webkit-sticky; position: -moz-sticky; position: -o-sticky; position: -ms-sticky; position: sticky; top: 50px; padding:5px; border:1px solid #ddd;}
  #admin a {color:#777;}
  #admin a.b {color:#fff;}
  .text, .textadmin {font-family: Lato,Arial;font-size:15px; border:1px solid #ddd; padding:4px; width:300px; color:#333; display:inline-block;}
  .text {text-transform: uppercase;}
  .textarea, .select {font-family: Lato,Arial;font-size:15px; border:1px solid #ddd; padding:4px; color:#333;}
  .bleu, .vert, .orange, .rouge {font-family:Lato,Arial;font-size:15px; color:#fff; border:0; background:#e40006; font-weight:Bold; padding:5px 10px; cursor:pointer;display: inline-block}
  .bleu {background:#187d8f;}
  .vert {background:#2db02d;}
  .orange {background:#ff6600;}
  .codeactuel {background:#2db02d; color:#fff; display:inline-block; padding:2px 4px;}
  .codeexpire {background:#275576; color:#fff; display:inline-block; padding:2px 4px;}

@media screen and (max-width: 767px)
  {
  #menu, #mpan {display:none;}
  #logo {width:100%;}
  #logo img {max-width:100%;}
  .table td {display:block;padding:5px 10px;}
  #legende {margin:15px 0;}
  .service {max-width:calc(100% - 60px); margin:5px 0;}
  .ariane {font-size:16px;}
  .text, .orange, .rouge, .vert {font-size:14px;}
  .btext, .bselect, .bvert, .brouge, .borange {font-size:16px; -webkit-appearance: none;}
  .block {width:calc(100% - 10px); display:block;}
  .arr {height:15px;}
  .no {display:inline-block;}
  .padd {padding:10px 0;}
  #jours {display:none;}
  #mjours {display:contents;}
  #calendrier {margin:2px;}
  #calendrier td {padding:1px;}
  #calendrier input[type="checkbox"] + label {font-size:12px;}
  #legende, #cal {display:block; width:auto;}
  }
@media screen and (max-width: 1330px)
  {
  #home {text-align:center;}
  .story {margin:auto; width: calc(100% - 20px); padding-left:10px; padding-right:10px;}
  .storymax {width:100%; text-align:center;}
  .cell, .half {width:calc(100% - 20px);}
  .tleft, .tright {float:none; margin-bottom:20px;}
  .btext {width:calc(100% - 10px);}
  }