body { color: #3b3c3d; font-family: 'Montserrat', sans-serif !important; text-shadow: none !important}
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
.error{color:red; text-align: center}
.ui-page{position: relative !important}
.ui-page-theme-a { background: #fff; }
.ui-page-theme-a .ui-btn { font-family: 'Source Sans Pro', sans-serif !important; background: #27aee1 !important; color: #fff !important; text-shadow: none !important; margin: 0; border: none !important; font-size: 24px; font-weight: bold; }
.ui-page-theme-a .ui-btn:focus, html .ui-bar-a .ui-btn:focus, html .ui-body-a .ui-btn:focus, html body .ui-group-theme-a .ui-btn:focus, html head + body .ui-btn.ui-btn-a:focus, .ui-page-theme-a .ui-focus, html .ui-bar-a .ui-focus, html .ui-body-a .ui-focus, html body .ui-group-theme-a .ui-focus, html head + body .ui-btn-a.ui-focus, html head + body .ui-body-a.ui-focus { box-shadow: none !important; }
.ui-content{width:1380px; margin: 0 auto; max-width:100%;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: black !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: black !important; opacity:1;
}
:-ms-input-placeholder { /* IE 10+ */
  color: black !important;
}
:-moz-placeholder, input::placeholder { /* Firefox 18- */
  color: black !important; opacity:1;
}
hr{float:left; width:100%; height:1px; background-color:#E0E0E0; border:none; margin:15px 0;}
#result{clear:both}
#result h1{color:#26D07C; text-align: center}
#result p{text-align: center}

#home{background-image: url(../images/bg.png); background-size:cover; min-height:500px; text-align: center}
#home .jqm-content{background:rgba(0,0,0,0.5); position: absolute; top:0; left:0; right:0; bottom: 0; width:100vw}
#home h1{font-family: 'Montserrat', sans-serif !important; color:white; font-weight: 700; font-size:46px; text-shadow:2px 2px 2px black ; margin-top:15%}
#home h1 span{color:#26D07C}
#home .flexslider{height:50px !important; border-radius:0; width:90%; margin:0 auto; padding-right:0px; max-width:1080px}
.flex-control-paging{display: none;}
#home .flex-direction-nav a{width:30px; height:50px; top:0; margin:0; }
#home .flexslider .flex-direction-nav .flex-next, .flexslider .flex-direction-nav .flex-next {
    right: 0px; /* adjust offset to match the hover style */
    opacity: 1 !important; /* adjust opacity to match the hover style */
	background-color:#26D07C;
	background-image: url(../images/angle-right.png); background-repeat:no-repeat; background-position: center center;
	text-indent: -10000px;
	color:transparent !important; text-shadow: none; z-index: 1;
}

#home .flexslider .flex-direction-nav .flex-prev, .flexslider .flex-direction-nav .flex-prev {
    right: 30px !important ; /* adjust offset to match the hover style */
	left:auto;
    opacity: 1 !important; /* adjust opacity to match the hover style */
	background-color:#26D07C;
	background-image: url(../images/angle-left.png); background-repeat:no-repeat; background-position: center center;
	text-indent: -10000px; z-index: 1; border-right:solid 1px #e3e3e3;
}
#hotel-booking .flexslider .flex-direction-nav .flex-next{background-color:transparent !important}
#hotel-booking .flexslider .flex-direction-nav .flex-prev{left:0 !important; right: auto !important; background-color:transparent !important; border:none}
.flex-direction-nav a.flex-next::before {content:'' !important; }
.flex-direction-nav a.flex-prev::before {content:'' !important; }
.flex-nav-prev{display: none !important}
.flex-nav-next:hover, .flex-disabled:hover{cursor:pointer !important}
#home .flexslider li{border-right:solid 1px #e3e3e3; line-height: 50px; max-width:210px; }
#home .flexslider li.selected{background-color:#13294B}
#home .flexslider li a{text-decoration: none; font-family: 'Montserrat', sans-serif !important; color:black !important; font-size:14px; font-weight: 300; text-shadow: none}
#home .flexslider li.selected a{color:white !important}
#home .flexslider li img{height:20px !important; width:auto !important; display:inline-block !important; vertical-align: middle}
#home .flexslider li.reposer{background-image:url(../images/reposer.png); background-repeat: no-repeat; background-size:20px auto; background-position: left 20px center}
#home .flexslider li.selected.reposer{background-image:url(../images/reposer_white.png)}
#home .flexslider li.travailler{background-image:url(../images/travailler.png); background-repeat: no-repeat; background-size:20px auto; background-position: left 20px center}
#home .flexslider li.selected.travailler{background-image:url(../images/travailler_white.png)}
#home .flexslider li.detendre{background-image:url(../images/detendre.png); background-repeat: no-repeat; background-size:20px auto; background-position: left 20px center}
#home .flexslider li.selected.detendre{background-image:url(../images/detendre_white.png)}
#home .flexslider li.sport{background-image:url(../images/sport.png); background-repeat: no-repeat; background-size:20px auto; background-position: left 15px center}
#home .flexslider li.selected.sport{background-image:url(../images/sport_white.png)}
#home .flexslider li.restaurer{background-image:url(../images/restaurer.png); background-repeat: no-repeat; background-size:20px auto; background-position: left 20px center}
#home .flexslider li.selected.restaurer{background-image:url(../images/restaurer_white.png)}
#home .flexslider li.garer{background-image:url(../images/garer.png); background-repeat: no-repeat; background-size:20px auto; background-position: left 20px center}
#home .flexslider li.selected.garer{background-image:url(../images/garer_white.png)}
#home .flexslider li.consigne{background-image:url(../images/consigne.png); background-repeat: no-repeat; background-size:20px auto; background-position: left 20px center}
#home .flexslider li.selected.consigne{background-image:url(../images/consigne_white.png)}

.form-wrapper{clear:both; background-color:#13294B; padding:25px; width:90%; margin:0 auto; max-width:1080px}
input, select{font-family: 'Montserrat', sans-serif !important; font-size:14px; padding-left:50px; height:50px; line-height: 50px;  }
.ui-datepicker select{padding-left:0}
input#search{border:none; background-image:url(../images/ville.png); background-repeat: no-repeat; background-size:20px; background-position: left 10px center; float:left; width:25%; }
input#date{border:none; background-image:url(../images/date.png); background-repeat: no-repeat; background-size:20px; background-position: left 10px center; float:left; width:20%; margin-left:15px;}
input#time, input#time2, input#time2_res{border:none; background-image:url(../images/clock.png); background-repeat: no-repeat; background-size:20px; background-position: left 10px center; float:left; width:20%;  margin-left:15px;}
.ui-datepicker .ui-widget-header, .ui-timepicker .ui-widget-header{background:transparent; border:none}
.ui-datepicker .ui-datepicker-title{font-weight: 300}
.ui-datepicker th{font-weight: 300}
.ui-datepicker .ui-state-default, .ui-datepicker .ui-widget-content .ui-state-default, .ui-datepicker .ui-widget-header .ui-state-default, .ui-datepicker .ui-button, .ui-datepicker .ui-button.ui-state-disabled:hover, .ui-datepicker .ui-button.ui-state-disabled:active, .ui-timepicker .ui-state-default, .ui-timepicker .ui-widget-content .ui-state-default, .ui-timepicker .ui-widget-header .ui-state-default, .ui-timepicker .ui-button, .ui-timepicker .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {background:transparent; border:none; height:35px; line-height: 35px; width:100%; padding:0; text-align: center;}
.ui-datepicker .ui-state-disabled, .ui-datepicker .ui-widget-content .ui-state-disabled, .ui-datepicker .ui-widget-header .ui-state-disabled, .ui-datepicker td, .ui-timepicker .ui-timepicker-minute-cell, .ui-timepicker .ui-timepicker-hour-cell{border:solid 1px #E0E0E0}
.ui-timepicker .ui-timepicker-minute-cell, .ui-timepicker .ui-timepicker-hour-cell{padding:0; min-width:30px;}
.ui-datepicker td{padding:0; height:35px; text-align: center}
.ui-datepicker-today.ui-datepicker-days-cell-over .ui-state-default{border:none; background-color:#24D07C; color:white; height:35px; line-height: 35px; padding:0; text-align: center;}
.ui-datepicker .ui-state-active, .ui-datepicker .ui-widget-content .ui-state-active, .ui-timepicker .ui-state-active, .ui-widget-content .ui-state-active{background-color:#24D07C !important; }
.ui-timepicker-table th.periods{display: none}
.ui-widget-header .ui-icon{background-image:url(../jquery-ui-1.12.1.custom/images/ui-icons_444444_256x240_green.png)}

#results input#date, #results input#time{background:none; background-color:#26D07C; border-radius:5px; color:white; width:auto; margin:0; padding:0; text-align: center; margin-left:15px;}
#results input#time{}
#results input{margin-bottom: 10px !important;}
#results input#search{float:left; border:solid 1px #E0E0E0; border-radius:5px; height:50px; line-height: 50px; font-family: 'Montserrat', sans-serif !important; font-size:12px; color:black; position: relative; margin-left:10px; padding:0 35px; width:15%;}
.form-wrapper button{background-color:#26D07C; height:50px; width:50px; border-radius:50px; border:none}
.form-wrapper button img{vertical-align: middle}
.form-wrapper button:hover{cursor: pointer}
#service_select{float:left; width:20%; padding-left:0; background:white; margin-left:15px; }
#travailler{float:left; width:25%; display:none; padding-left:0; background:white; margin-left:15px; }
#breakfast{float:left; width:20%; display:none; padding-left:0; background:white; margin-left:15px; }
div.pers-wrapper, input#pers{border:none; background-image:url(../images/pers.png); background-repeat: no-repeat; background-size:20px; background-position: left 10px center; float:left; width:94px; margin-left:15px; display: none; padding-left:50px;}
.pers-wrapper .custom-select-wrapper{clear:both}
.pers-wrapper .select-items{max-height: 200px; overflow: scroll}
.pers-wrapper .select-selected{text-align: left}

.top-wrapper{padding:1em; width:1380px; margin:0 auto; max-width:100%; position: relative; min-height: 55px}
.checkbox{float:left; width:100%; }
.checkbox input{float:left; margin:0; margin-right: 10px; height:40px; line-height: 40px;}
.checkbox label{float:left; height:40px; line-height: 40px; font-family: 'Montserrat', sans-serif !important; font-size:11px;}
.checkbox label img{vertical-align: middle; margin-right:10px;}
.equipment{float:left; border:solid 1px #E0E0E0; border-radius:5px; height:50px; line-height: 50px; font-family: 'Montserrat', sans-serif !important; font-size:12px; color:black; position: relative; margin-left:10px; padding:0 30px;}
.equipment:hover, .equipment button:hover{cursor:pointer}
.eq-popup{display:none; position: absolute; padding:15px; border-radius:5px; border:solid 1px #707070; left:0; top:58px; background-color:white; z-index: 99999; min-width:300px;}
.eq-popup-button{background-color:#26D07C; border-radius:5px; height:50px; line-height: 50px; font-family: 'Montserrat', sans-serif !important; font-size:12px; color:white; margin-left:10px; border:none; padding:0 30px; }
.eq-popup-button:hover{cursor:pointer}

.ui-timepicker-standard .ui-menu-item{float:left; width:25% !important; font-family: 'Montserrat', sans-serif !important; font-size:11px; height:30px; margin-bottom: 5px !important}
.ui-timepicker-standard .ui-menu-item:nth-of-type(5n){/*clear:both*/}
.ui-timepicker-standard .ui-menu-item a:hover{color:white !important; background-color:#26D07C !important; border:0px !important}
.ui-timepicker-table td a{font-size:12px; width:auto !important}

.custom-select-wrapper{padding:0 !important; height:50px}
/*the container must be positioned relative:*/
.custom-select, .contact-select .nf-field-element {
  position: relative;
	text-align: center;
	width:100%
}
.custom-select select {
  display: none !important; /*hide original SELECT element:*/
}
.select-selected {
  background-color: transparent;
	border:none !important
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 25px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #000 transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #000 transparent;
  top: 15px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #000;
  /*padding: 8px 16px;*/
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
	height:50px; line-height: 50px; font-size:14px; font-family: 'Montserrat', sans-serif !important;
}
.select-selected:hover, .select-items div:hover, .same-as-selected{color:#26D07C !important;}
.select-selected:hover:after{}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #ffffff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;color:#26D07C;
}
.select-hide{display:none}

.product{-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc; overflow: hidden; text-decoration: none; font-weight: normal !important; color:#3b3c3d !important; display:block; margin-bottom: 25px;}
.product p{ font-size:16px; font-family: 'Source Sans Pro', sans-serif !important; margin:0; text-align: left !important;}
.product .price{ font-size:15px; float:left; color:white; background-color:#13294B; text-align: center; padding:0px 15px; margin-right: 20px; border-radius:20px; text-shadow:none; height:32px; line-height: 32px; margin-top:20px; margin-bottom:20px;}
.product img{float:left; width:230px;}
.details{float:left; /*width:60%;*/ margin-left:5px; }
.buttons{float:right; width:15%; text-align: center; margin-right:1%}
.buttons p{border-radius:20px; font-size:14px; font-family: 'Source Sans Pro', sans-serif !important; color:white; font-weight: bold; background-color:#13294B; display: inline-block; padding:10px 15px; margin-top:5px; text-shadow: none; float:right;}
.buttons p.detail{border-radius:20px; border:solid 1px #26D07C; color:#26D07C !important; font-size:13px; width:100px; height:37px; line-height: 37px; text-align: center !important; display: inline-block; margin-top:50px; text-decoration: none; float:right; clear:both; background:transparent; padding:0}


.hotel-detail{width:60%; float:left}
.hotel-desc{position: absolute; height:135px; bottom:0; left:0; width:100%; background:rgba(0,0,0,0.5); z-index: 9999}
.hotel-title, .add{font-family: 'Montserrat', sans-serif !important; font-size:31px; text-shadow: none; color:white; padding-left:5%; margin-bottom: 0;}
.add{font-size:25px; margin-top:0; font-weight: 100}
.hotel-info p{font-size:14px;}
.sub-head{font-size:20px; margin-top:50px;}
#eq_list{padding:0}
#eq_list li{list-style-type: none; border:solid 1px #707070; border-radius:5px; height:60px; padding-right:20px; font-family: 'Montserrat', sans-serif !important; font-size:15px; background-repeat: no-repeat; background-size:34px auto; background-position:left 5px center; padding-left:50px; line-height: 60px; float:left; margin-right: 15px; text-shadow: none; margin-bottom:10px;}
#top-details{font-weight: bold; font-size:14px;}
.frame{float:left; width:38%; margin-left:2%; padding:2%; -moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc; overflow: hidden; text-align: center}
.frame h2{text-align: center; font-family: 'Montserrat', sans-serif !important; font-size:20px; text-shadow: none; }
.frame input, .frame .pers-wrapper{border:solid 1px #E0E0E0 !important; width:100% !important; margin-left:0 !important; margin-top:10px !important}
.frame h5{text-align: left; font-family: 'Montserrat', sans-serif !important; font-size:14px; text-shadow: none; font-weight: bold; margin-bottom: 5px;}
.frame h6{margin-top:0}
.frame h6, .frame p{text-align: left; font-family: 'Montserrat', sans-serif !important; font-size:14px; text-shadow: none; font-weight: 100; margin-left:25px; }
.frame p{margin-left:0; float:left; width:100%; margin-bottom:0px}
.frame p span{float:right}
.frame p em{font-style: normal}
.frame button, .button a{background-color:#26D07C; height:50px; padding:0 50px; border-radius:50px; border:none; font-family: 'Montserrat', sans-serif !important; font-size:20px; color:white !important; margin:0 auto; margin-top:30px;  text-decoration: none; text-shadow: none; display:inline-block; line-height: 50px; font-weight: 100}
.frame button:hover, .button a:hover{cursor: pointer; color:white !important;}

#promoForm{position: relative; clear:both}
#promoForm button{border-radius:0; padding:0 15px; font-size:12px; position: absolute; top:10px; right:0; margin:0 }

.steps{/*border-bottom: solid 1px #E0E0E0; margin-bottom: 10px; padding:20px 0;*/ position: relative}
#loginForm, #cardForm, #recoveryForm{width:90%;}
#loginForm label, #cardForm label, #recoveryForm label{font-size:14px;}
#loginForm input, #cardForm input, #recoveryForm input{border:solid 1px #6E6E6E; background:none; border-radius:5px; box-shadow:none; padding-left:5px; width:100%; margin-bottom: 15px;}
.intl-tel-input{margin-bottom: 15px;}
.check-wrapper{height:20px; line-height: 20px; font-size:14px; float:left;}
.oublie{float:right}
.oublie a, .oublie a:hover{text-decoration: none; height:20px; line-height: 20px; font-size:14px; color:#333; font-weight: 100}
#loginForm input[type="checkbox"], #cardForm input[type="checkbox"]{float:left; width:20px; height:20px; line-height: 20px; margin:0}
#loginForm .button, #cardForm .button, #recoveryForm .button{float:right; clear:both; text-align: right}
.half{float:left; width:49%; margin-right: 2%;}
.half:nth-of-type(2n){margin-right: 0}
.half2{float:left; width:60%; margin-right:4%}
.half3{float:left; width:36%}
.half4{float:left; width:70%; margin-right:4%}
.half5{float:left; width:26%}
#loginForm p, #cardForm p, #recoveryForm p{font-size:14px}
input#card_number{background-image:url(../images/card.png); background-repeat: no-repeat; background-size:32px; background-position: left 10px center; padding-left:50px}
.logout-wrapper{position: absolute; top:20px; right:20px; }
.logout-wrapper a{color:#3b3c3d !important; text-decoration: none; font-size:14px; font-weight: 300 !important}
.download{margin-top:40px;}
.download p{text-align: center}
.download p a{display:inline-block; max-width:30%; margin-right:3%}
.download p a:last-of-type{margin-left:3%}
.download a img{max-width:100%}

@media (max-width: 320px){
	.jqm-home .flexslider .slides img{max-width:70vw; margin:50px auto 0}
	.ui-page-theme-a .ui-btn{font-size:20px}
	#sideNav ul li{margin-bottom:0px}
	#sideNav ul li a{line-height:30px;}
	#sideNav ul{font-size:16px;}
}

/* View source links */

@media (min-width: 60em) {

}
@media (min-width: 35em) {
.jqm-block-content { min-height: 18em; }
}

 /*iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 
	.jqm-content .jqm-header h1 { padding-top:0px; margin-top:-10px}
}

@media (max-width:768px){
	#home .flexslider, .hotel-detail, .frame{width:100%}
	.frame{margin-left:0; margin-top:2%;}
	.form-wrapper{width:100%; overflow: hidden}
	input#search, #service_select{width:100% !important; margin-bottom: 15px !important; margin-left:0}
	input#date, input#time, input#time2, #travailler{width:100% !important; margin-bottom: 15px !important; margin-left:0}
	#breakfast{width:50% !important; margin-bottom: 15px !important;}
	.top-wrapper form{clear: both; margin-top:50px;}
    .select-items{max-height: 200px; overflow-y: scroll}
    #results input#search, .eq-popup-button{margin-left: 0}
    .buttons p.detail{float:none}
    .custom-select{text-align: left; padding-left:50px}
}

@media (max-width:480px){
	.steps img{margin-bottom: 10px;}
	.product img, #results input#date, #results input#time, .equipment, .buttons, .hotel-detail, .frame, .half2, .half3, .half4, .half5{width:100%; margin:0 !important; margin-bottom: 10px !important;}
	.buttons p, .buttons a{float:none; margin:0 auto !important; width:90% !important; margin-bottom: 10px !important}
	.hotel-title, .add, .button a{font-size:16px;}
	.button a{margin-top:10px}
	.hotel-desc{height:auto; padding-bottom: 10px;}
	#loginForm .button, #cardForm .button, #recoveryForm .button{text-align: center;}
}