@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
b{
font-weight:bold;
}
ol, ul {
list-style: none;
}
html{
background-image:url(../images/fond_commande.jpg);
background-position: center top; /* Center the image */
background-size: auto;
background-attachment:fixed;
}
body{
background:none;
position:relative;
z-index:-100;

}
header{
border-bottom:1px solid #ffcf00;
opacity: 1;
filter: alpha(opacity=100);
z-index:5;
position:relative;
}
nav{
position:relative;
margin-top:30px;
margin-left:30px;
margin-right:30px;
z-index:-1;
background:none;
}
strong{
font-weight:bold;
}
#form_resa{
margin-top:10px;
z-index:-100;
position:relative;
}

#coordonnees{
position:relative;
margin:auto;
width: 370px;
}
.petittel{
text-decoration:none;
font-weight:bolder;
color:#ffcf00;
}
.input-line {
border: none;
}
button:focus {
outline: none;
}
::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.65);
}
::-webkit-input-placeholder .input-line:focus +::input-placeholder {
color: #fff;
}
.highlight {
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
cursor: pointer;
transition: color .2s ease;
}

.highlight:hover {
color: #fff;
transition: color .2s ease;
}

p.separator::after {

    content: "";
    width: 100%;
    height: 1px;
    background-color: #dedede;
    position: absolute;
    top: 50%;
    left: 0;
}
p.separator{
position: relative;
margin: 1em 0;
text-align:center;
}
p.separator span{
background: #a8a8a8;
box-sizing: border-box;
color: #ffffff;
font-size: 15px;
font-style: italic;
line-height: 22.5px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 15px;
padding-top: 0px;
position: relative;
text-align: center;
z-index: 1;	
}


.spacing {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-height: 40px;
font-weight: 200;
font-size:14px;
text-align: center;
margin-top: 10px;
color: rgba(255, 255, 255, 0.65)
}
.cgv{
font-size:13px;
text-align:justify;
}
.input-line:focus {
outline: none;
border-color: #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}

.ghost-round {
cursor: pointer;
background: none;
border: 1px solid rgba(255, 255, 255, 0.65);
border-radius: 25px;
color: rgba(255, 255, 255, 0.65);
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
font-size: 19px;
font-size: 1.2rem;
font-family: roboto;
font-weight: 300;
line-height: 2.5em;
margin-top: auto;
margin-bottom: 25px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}

.ghost-round:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}

.input-line {
background: none;
margin-bottom: 10px;
 height:47px;
color: #fff;
font-family: roboto;
font-weight: 300;
letter-spacing: 0px;
letter-spacing: 0.02rem;
font-size: 19px;
font-size: 1.2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.65);
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.input-date{
margin-bottom:0;
padding:0;
padding-left:5px;
}


.full-width {
width: 100%;
}

.input-fields {
margin-top: 25px;
}



.content {
padding-left: 25px;
padding-right: 25px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
z-index: 5;
 position:relative;
}

.welcome {
font-weight: 300;
margin-top: 25px;
text-align: center;
font-size: 40px;
font-size: 1.8rem;
letter-spacing: 0px;
letter-spacing: 0.05rem;
}

.subtitle {
text-align: center;
line-height: 1em;
font-weight: 100;
letter-spacing: 0px;
letter-spacing: 0.02rem;
}

.window {
position:relative;
z-index: 2;
color: #fff;
font-family: roboto;
box-shadow: 0px 15px 50px 10px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
width: 360px;
background: #fff;
margin: 0 auto;
}

.overlay {
background: #999;
opacity: 0.85;
filter: alpha(opacity=85);
height: 1030px;
position: absolute;
width: 360px;
z-index: 1;
}

.control {
 font-family: roboto;
font-weight: 300;
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 5px;
padding-top: 3px;
cursor: pointer;
font-size: 16px;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control_indicator {
position: absolute;
top: 2px;
left: 0;
height: 20px;
width: 20px;
background: #e6e6e6;
border: 0px solid #000000;
}
.control-radio .control_indicator {
border-radius: undefined%;
}

.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
background: #cccccc;
}

.control input:checked ~ .control_indicator {
background: #ffcf00;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
background: #0e6647d;
}
.control input:disabled ~ .control_indicator {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
.control_indicator:after {
box-sizing: unset;
content: '';
position: absolute;
display: none;
}
.control input:checked ~ .control_indicator:after {
display: block;
}
.control-checkbox .control_indicator:after {
left: 8px;
top: 4px;
width: 3px;
height: 8px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
border-color: #7b7b7b;
}
.ui-datepicker td.red a{
color:gray !important;
font-style:italic;
cursor:none;
pointer-events: none;
} 
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }

.custom-select {
position: relative;
font-family: roboto;
font-weight: 300;
margin-bottom: 0;
border:0;
}
.custom-select select{
padding: 0;
height: 25px;
padding-left: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #DDD;
	background: none;
height: 47px;
color: #fff;
letter-spacing: 0px;
letter-spacing: 0.02rem;
font-size: 19px;
font-size: 1.2rem;
border:0;
width:150px;
border-bottom: 1px solid rgba(255, 255, 255, 0.65);
-webkit-transition: all .2s ease;
transition: all .2s ease;	
}
.custom-select select option{
	text-align:center;
	background: #333;
}
.h{
width:10px;
padding-top:15px;
padding-left:5px;
padding-right:5px;
}

.cal{
width:130px;

}
.cal, .h, .custom-select{
float:left;
bottom:0;

height:25px;
margin:0;
}
.nombre{
float:none;
}
#dateheure{

display:inline-block;
}

#clear{
clear:left;
display:inline-block;
position:relative;
width:100%;
}

.select-selected {

}

/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 23px;
right:5px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;

 
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #ffffff;
font-family: roboto;
font-weight: 300;
border: 1px solid transparent;
border-color: transparent transparent rgba(255, 255, 255, 0.7) transparent;
cursor: pointer;
user-select: none;
font-size:18px;
padding-bottom:12px;
padding-top:13px;
padding-left:13px;
}

/*style items (options):*/
.select-items {
position: absolute;
background-color: gray;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}

.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}

.tel{
color:#ffcf00;
text-decoration:none;
}

.lienparmail a{
color: #ffcf00;
}

@media (max-width: 500px) {
.window {
width: 100%;
height: 100%;
}
.overlay {
width: 100%;
height: 100%;
}
}


@media (max-width: 330px) {
.window {
width: 100vw;
height: 100%;
}
.overlay {
width: 100vw;
height: 100%;
}
#coordonnees{

width: 100vw;
}
}

@media screen and (max-width: 640px){
.choix{
position:relative;
display: block;
margin:auto;
float:none;
margin-bottom:15px;
}
}