@font-face
{
	font-family: 'neutrif';
	src: url('../neutrif.ttf') format('truetype');
}

*
{
	font-family: 'neutrif',helvetica,arial ;
	font-size: 0.95rem ;
	color: #506070;
	line-height: 20px;
	letter-spacing: 0.3px;
}
small
{
	font-size: 90% ;
}

a, a:visited
{
	color: #007096;
}
a:hover
{
	color: #4c9bb5;
}


#liste_flags, #liste_flags *
{
	text-align: left;
	color: #555;
	text-decoration: none;
}
#liste_flags a
{
	clear: both;
	display: block;
	padding-left: 4px;
	padding-top: 12px;
	padding-bottom: 4px;
	border-top: solid 1px #eee;
}
#liste_flags a:hover
{
}
#liste_flags a span
{
	position: relative;
	top: -12px;
}

#flags
{
	max-height: 420px;
	overflow: auto;
	padding: 6px;
	padding-top: 12px;
	border-radius: 5px;
	background-color: #fff;
	cursor: hand ;
	border: solid 1px #ddd;
	width: 270px ;
	left: 500px;
	top: 20px;
	margin-top: 0.1rem;
	display: none;
}
#div_pays
{
	clear: both;
	float: right;
}
#sepclear
{

}
#sep2clear
{
}

#tab_haut_d
{
	float: right;
	width: 300px;
}

#div_pays
{

}
@media only screen and (max-width: 700px)
{
	#tab_haut_d
	{
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	#flags
	{
		margin-top: 0.5rem;
		margin-bottom: 6px;
		margin-left: auto;
		margin-right: auto;
	}
	#div_pays
	{
		clear: both;
		float: none;
		text-align: center;
		margin-top: 0.7rem;
	}
	#sepclear
	{
		clear: both;
		height: 2rem;
	}
	#sep2clear
	{
		clear: both;
	}
}


#logo_et_menus
{
	text-align: center;
}



body
{
	background-color: white ;
	padding: 0.5rem ;
	margin: 0 ;
}

#head_logo_img, .head_logo_img
{
	margin-top: 0px;
	width: 130px; /* 200 */
	float: left;
}
@media only screen and (max-width: 700px)
{
	#head_logo_img, .head_logo_img
	{
		float: none;
	}
}


#main
{
	width: 100% ;
	margin: 0 auto ;
	max-width: 875px ;
}

.flag_main
{
	width: 28px;
}

.bloc_gris
{
	margin-top: 1rem !important ;
}
.bloc_gris_high
{
	margin-top: 2rem !important;
	border-left: solid 4px #449bcc;
	padding-left: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

#bandeau
{
	border-radius: 5px;
	width: 100%;
	margin-bottom: 0rem ;
	margin-top: 0.5rem ;
}

h1
{
	margin-top:4rem !important ;
	margin-bottom: 2rem ;
	font-size: 1.6rem ;
	font-weight: normal;
}

#div_liste_motifs, #div_marques
{
/*
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	width: auto;*/
}
@media only screen and (max-width: 700px)
{
/*
	#ddiv_liste_motifs
	{
		width: 350px;
		margin-left: 30px;
	}
	#ddiv_liste_motifs, #div_marques
	 {
		 width: 350px;
		 margin-left: 10px;
	 }
*/
}

.col_motifs
{
	text-align: center;
	float: left;
	width: 19%;
}
@media only screen and (max-width: 700px)
{
	.col_motifs
	{
		width: 99%;
	}
}

.titre_motif
{
	position: relative;
	left: 0.63rem;
	text-align: center;
	margin-top: 12px;
	padding-left: 0px;
	height: 190px ;
	font-size: 1.2rem ;
	color: #004b89;
	cursor: pointer;
	line-height: 130%;
	margin-right: 1rem;
}
@media only screen and (max-width: 700px)
{
	.titre_motif
	{
		height: 120px ;
	}
}


.titre_motif_on,.titre_motif:hover
{
	color: #3c88bc !important;
}

.liste_motifs
{
	display: none;
}

.btn_motif
{
	margin-left: auto;
	margin-right: auto;
	padding: 8px;
	width: 140px;
	height: 80px;
	border: solid 1px #e0e0e0;
	color: #555;
	border-radius: 5px;
	margin-bottom: 1rem ;
	text-align: center ;
	cursor: hand ;
	ddisplay: block ;
	text-decoration: none ;
	/*background-color: #F1EFEE;
	display: flex;
	align-items: center;
	background: url(../images/bloc_motif.png?r=2) ;
	background-size: 156px 96px;*/

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-grid;
	display: grid;
	justify-items: center;
}

@media only screen and (max-width: 700px)
{
	h1, .bloc_gris
	{
		margin-right: 1rem;
	}

	.btn_motif
	{
		margin-left: 1rem;
		margin-right: 1rem;
		margin-left: auto;
		margin-right: auto;
	}
}

.btn_motif:hover
{
	box-shadow: 0 0 6px 0 rgba(0,0,0,.17);
}
.btn_motif_on
{
	font-weight: normal;
	color: white;
	background-color: #307194;
	/*background: url(../images/bloc_motif_on.png?r=2) ;
	background-size: 156px 96px;*/
}

@media only screen and (max-width: 700px)
{
	.btn_motif_on
	{
		background-size: 156px 96px;
	}
}

.btn_marque
{
	border: solid 1px #eee;
	width: 102px;
	border-radius: 3px;
	float: left;
	text-align: center;
	margin-right: 12px;
	box-shadow: 2px 2px 4px 2px #eee;
}
@media only screen and (max-width: 700px)
{
	.btn_marque
	{
		margin-bottom: 0.5rem;
	}
}
.btn_marque_on
{
	border-color: #307194;
}
.btn_marque img
{
	width: 102px;
	border-radius: 3px;
}

.div_txt_descr_motif
{
	margin-bottom: 1.4rem;
}

.div_txt_libelle
{
	margin-bottom: 0.5rem;
}

.bloc_champ
{
	margin-top: 1rem;
}

input:focus, select:focus, textarea:focus, button:focus
{
    outline: none;
}

.div_champ
{
	border-radius: 3px ;
	margin-top: 0.4rem ;
}
.div_champ div
{
	display: none ;
	height: 1rem;
	font-size: 0.7rem ;
	margin-top: 0.2rem ;
	margin-left: 0.3rem ;
}
.div_champ input, .div_champ textarea, .div_champ select
{
	border-radius: 3px ;
	height: 2rem ;
	border-width: 0px ;
	background-color: #F1EFEE ;
	width: 45% ;
	padding-left: 0.3rem ;
	color: #506070;
}
.cent
{
	float: left;
	width: 46.666%;
}
@media only screen and (max-width: 700px)
{
	.div_champ input, .div_champ textarea, .div_champ select
	{
		width: 100% !important ;
	}
	.cent
	{
		float: none;
		width: 100%;
	}
}

.cent .div_champ input[type=text]
{
	width: 100% !important;
}
.div_champ input[type=text]
{
	height: 35px;
}

#div_champ_nom, #div_champ_nom_reservataire, #div_champ_adresse, #div_champ_adresse_postale
{
	margin-right: 1rem;
}
@media only screen and (max-width: 700px)
{
	#div_champ_nom, #div_champ_nom_reservataire, #div_champ_adresse
	{
		margin-right: 0;
	}
}

.div_champ_on
{
}
.div_champ_on div
{
	display: block !important ;
}
.div_champ_on input, .div_champ_on textarea
{
	background-color: #f0f0ef !important ;
	height: 1.5rem ;
}
.div_champ_focus
{
	background-color: #f0f0ef !important ;
	border-radius: 3px ;
}

.intitule_erreur
{
	margin-top: 1rem ;
	color: #aa0000 ;
	font-weight: bold ;
	display: none ;
}

#champ_description
{
	height: 10rem ;
}

.err
{
	background-color: pink !important ;
	border: solid 1px #aa0000 ;
	color: #aa0000 ;
	border-radius: 3px ;
	padding: 0.3rem ;
	font-weight: bold ;
	font-size: 1rem ;
	margin-bottom: 1rem;
}


#ss_titre_votre_resa
{
	display: none ;
}

#div_form
{
	display: block ;
	overflow: hidden ;
}
#div_recap
{
	display: none ;
}

#btn_valider, #btn_valider:visited
{
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 60%;
	background-color: #D64D1E;
	color: #fff !important ;
	text-align: center ;
	padding: 0.8rem ;
	margin-top: 2rem ;
	text-decoration: none ;
	border-width: 0;
}


#table_recap
{
	width: 90%;
	border: solid 1px #888 ;
	border-radius: 2px ;
}
#table_recap tr td
{
	padding: 0.6rem ;
	border-bottom: solid 1px #888 ;
}
.intitule_recap
{
	background-color: #eee ;
	text-align: right ;
}


#modif_info
{
	margin-top: 1rem ;
	margin-bottom: 0.4rem ;
	text-align: center ;
}
#modif_info a, #modif_info a:visited
{
	font-weight: bold ;
	color: #506070 ;
}
#modif_info a:hover
{
	text-decoration: none ;
}

#btn_submit
{
	display: block ;
	width: 100% ;
	height: 35px;
	color: #014a97 ;
	text-align: center ;
	padding: 0.3rem ;
	margin-top: 1.2rem ;
	text-decoration: none ;
	background-color: #e1825e;
}
#btn_submit:hover
{
	font-weight: bold !important ;
}

#footer
{
	text-align: left ;
	font-size: 0.8rem ;
	margin-top: 2rem ;
	color: #555 ;
}

.flag
{
	width: 24px ;
	border: 0 ;
	margin-left: 4px ;
	padding-bottom: 4px;
	border-bottom: solid 2px #fff ;
}
.flag_on
{
	border-bottom: solid 2px #014a97 ;
}

#champ_date_debut_sejour
{
	background-image: url(../images/calendar.png?r=30) ;
	background-size: 36px 24px ;
	background-repeat: no-repeat ;
	background-position: left ;
	padding-left: 38px;
}

#overlay
{
	z-index: 100;
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.7); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

#msgbox
{
	display: none;
	overflow: auto;
	z-index: 101;
	position: fixed;
	width: 50%;
	border: solid 2px #555;
	border-radius: 5px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 16px;
	padding-top: 0;
	background-color: #f8f8f8;
}
@media only screen and (max-width: 700px)
{
	#msgbox
	{
		width: 85%;
	}
}
#msgbox_txt
{
	color: #555;
}

#msg_box_header
{
	text-align: right;
}
#msg_box_header img
{
	width: 32px ;
	position: relative ;
	left: 16px;
	cursor: pointer;
}

.barre_tel
{
	margin-top: 1rem;
	border-left: solid 3px #014a97;
	padding-left: 0.7rem;
}

.btn_langue {
    float: left;
    margin-top: 35px;
    margin-left: 15px;
    margin-right: 15px;
}