/******GENERAL ATTRIBUTES******/

@font-face {
    font-family: title;
    src: url('../fonts/Arabella.ttf');
}


@font-face {
    font-family: manuscrite;
    src: url('../fonts/gunnymar-v36.ttf');
}

div.alert, div.alertnohide
{
	margin-top: 15px; margin-bottom: 15px;
	padding: 15px 15px 15px 15px; border: none;
	cursor: pointer;
	color: white;
	
}

.alert-success 			{	background-color: #4CAF50;	}
.alert-danger			{	background-color: #F44336;	} /*fail -> danger */
.alert-warning			{	background-color: #FFC107;	} /*alert -> warning */
.alert-info				{	background-color: #03A9F4;	}
.alert-undefined		{   background-color: #eaeaea;  }

.txt-success 			{	color: #4CAF50;	}
.txt-danger				{	color: #F44336;	}
.txt-warning			{	color: #FFC107;	}
.txt-info				{	color: #03A9F4;	}

td.unselected			{	background-color: #F44336	}
td.selected				{	background-color: #4CAF50	}
	
html { scroll-behavior: smooth }

a { text-decoration: none; }

/**<<block modify: global dimentions and theme color >>**/

.color-theme-orange-txt, .color-theme-orange-txt-hover:hover 	{ color:						#ebb02d; }
.color-theme-orange-bg, .color-theme-orange-hover:hover 	{ background-color: 			#ebb02d; }
.color-theme-orange-br, .color-theme-orange-focus:focus  	{ border-color: 				#ebb02d; }
.color-theme-orange-un 										{ text-decoration-color:		#ebb02d; }
header, footer, .color-theme-dark-bg 						{ background-color: 			#212529; }

p															{ margin-top: 20px; margin-bottom: 20px }
.envdev 													{ color:red; font: 'Arial'; font-size: 0.5em; }

body 														{ width: 100%; padding: 0px; margin: 0px; font-family: 'Trebuchet MS'; text-align: center !important; }
header 														{ width: 100%; font-style: bolder; position: fixed; z-index: 2; height: 160px;  }
main article 												{ max-width: 1200px; margin: auto; text-align: justify; color: black; font-family: 'Trebuchet MS'; font-size: 1.2em; box-shadow: 0 10px 40px -10px rgba(0,64,128,.2); } 
header nav 													{ max-width: 1200px; margin: auto; line-height: 44px; width: 100%; }
header nav a												{ color: white }
header nav ul 												{ display: inline-block; padding: 20px; }
header nav ul li 											{ display: inline-block; margin: 2px; }
header nav ul li.title 										{ display: inline-block; font-family: 'title'; font-size: 4em; padding-right: 20px; color: white }
header nav ul li div								
{ 
	display: none;
	position: absolute; 
	padding: 10px;
    margin-left: -10px;
    border-radius: 10px;
}

header nav ul li:hover div
{
	display: block; 
}

header nav ul li div a								
{ 
	display: block;
}
 		
@media screen and (max-height: 600px) 	{
header 														{  position: absolute; height: auto  }
}

@media only screen and (max-width: 900px) 	{	

header nav ul 												{ padding: 0px }
}

@media only screen and (max-width: 600px) 	{	

header nav ul li.title 										{ display: inline-block; font-family: 'title'; font-size: 2em; padding-right: 10px; color: white }

}

footer 														{ line-height: 70px; font-size: 1.2em; width: 100%; font-family: 'Trebuchet MS', sans-serif; color: white;  }
footer a 													{ color: white; }										

div#topcontrol 												{  position: fixed; bottom: 5px; right: 5px; border-radius: 54px }
div#topcontrol a 											{  color: white; }

main { z-index: 0 }

/******ANCHOR SETTINGS******/

main div.anchors { position: relative; top: -158px; }

@media screen and (max-height: 600px) 	{
main div.anchors { top: 0px; }
}

/******HEADER IMAGE+TITLE******/

main div.header-summer										{ background-image: url('../images/index/header_summer.jpg'); }
main div.header-summer h1									{ top: 290px; }
main div.header-summer	svg									{ display: none }
main div.header-winter										{ background-image: url('../images/index/header_winter.jpg'); }
main div.header-winter h1									{ top: -430px; }
main div.header												{ padding-top:160px; height: 700px;  background-repeat: no-repeat; background-position: center ; background-size: cover; color: white; }
main div.header h1 											{ position: relative; font-size: 5.5em;  margin: 0px; font-family: 'title';  }
main div.header svg											{ position: relative; top: -20px; height: 720px; width: 100%;   }

@media only screen and (max-width: 450px) 	{	

main div#header												{ background-position: center top; }
main div#header h1 											{ position: relative; top: -490px; }

}

/******4 TOP ICONS******/

main div.atous 												{ padding-top: 30px; padding-bottom: 30px; color: white; }
main div.atous ul											{ padding: 0px; margin: 0px }
main div.atous ul li										{ display:inline-block; margin-left: 30px; margin-right: 30px; margin-top: 30px; margin-bottom: 30px;}
main div.atous ul li div, main div.atous ul li button 		{ float: left;  font-size: 1.5em; text-align: left; position: relative; height: 50px; }
main div.atous ul li button 								{ border: none; background-color: transparent; color: white; cursor: pointer; }
main div.atous ul li img 									{ height: 100%; margin-right: 20px }
main div.atous ul li div a									{ text-decoration: none; color: white }

/******MAIN ARTICLE******/

main div#recover 											{ height: 100px; }
main article.top, main article.prix, main article.contact 	{ border-radius: 15px 15px 15px 15px; background-color: white;   }
main article.top											{ margin-top: -100px;  } 

/******IMAGES******/

main section.topimg div.img 								{ display: grid; grid-template-columns: 33.3% 33.3% 33.3%; background-color: black; }
main section.topimg div.img img 							{ width: 100%; opacity: 0.6 }
main section.topimg div.img div:hover img					{ opacity:1 }
main section.topimg div.img div:hover span 					{ opacity:1 }
main section.topimg div.img div								{ width: 100% }
main section.topimg div.img div span						{ position:relative; top: -40px; padding: 10px; border-radius: 10px; opacity:0  }
main section.topimg div.img div img							{ width: 100%; height: 100%; }

@media only screen and (max-width: 600px) 	{	
main section.topimg div.img 								{ grid-template-columns: 49.9% 49.9%;  }
}

/******ARTICLE COMMONS******/

main article h2 											{ font-family: 'title'; font-size: 4em; text-align:center; margin: 0px }
main article												{ padding: 40px; }

@media only screen and (max-width: 600px) 	{	
main article												{ padding: 10px; }
main article h2 											{ font-size: 2.5em; padding-top: 10px; padding-bottom: 10px; }
}

/******APPARTEMENTS ARTICLE******/

main section.appartement 									{ display: flex; flex-wrap: wrap; /*flex: 20% 20% 20% 20% 20%;*/ background-color: white; max-width: 100%  }
main section.appartement div								{ padding: 20px; padding-bottom: 0px; max-width: 360px; margin: auto; height: 100%; }
main section.appartement div img							{ width: 100%; border-radius: 15px 15px 0px 0px ; }
main section.appartement div h3 							{ font-family: 'Trebuchet MS', sans-serif; padding: 15px; margin: 0px;  }
main section.appartement div p								{ margin: 0px; padding: 15px; font-size: 1.2em; text-align: justify; }
main section.appartement div p.desribe						{ min-height: 120px; }
main section.appartement div p:last-child					{ text-align: center; border-bottom: 1px solid rgba(0,64,128,.2); border-radius: 0px 0px 15px 15px; }
main section.appartement div a 								{ border-radius: 5px; padding: 10px; margin: auto; color: white; font-size: 0.8em; }
/*
@media only screen and (max-width: 1500px) 	{
 main section.appartement 									{ flex: 33% 33% 33%; }
}

@media only screen and (max-width: 1050px) 	{
 main section.appartement 									{ flex: 50% 50%; }
}

@media only screen and (max-width: 800px) 	{
 main section.appartement 									{ flex: 100%; }
}
*/
/******APPARTEMENTS DETAILS******/

/*SLIDER*/
div.slider													{ overflow: hidden; display:flex; width: 150%; text-align: center; color: white; box-sizing: border-box; margin-top: 20px; }
div.slider div  											{ flex: 33.3%;  }
div.slider div img 											{ width: 100%; border-radius: 10px; }
div.slider div.translate 									{ transform: translate(0%, 0px); }
div.slider div.hide 										{ transform: translate(-100%, 0px); background-color: white; box-sizing: border-box;  }
div.slider div span											{ position:relative; opacity:0; }
div.slider div span.describe								{ top: -60px; padding: 10px; border-radius: 10px; }
div.slider div span.arrows									{ top: -55px; padding: 10px; border-radius: 42px; cursor: pointer }
div.slider div.translate:hover span							{ opacity: 1 }
div.slider_content											{ width: 100%; position: relative; text-align: justify;  }
div.slider_content div 										{ width: 50%; position: absolute; box-sizing: border-box; padding: 20px; margin-left: 50%; z-index: 1 }


@media only screen and (max-width: 800px) 	{
div.slider													{ width: 300%;  }
div.slider_content div 										{ width: 100%; position: relative; margin-left: 0%; }

}

main article.appartementdetails																			{ overflow: hidden; }	
main article.appartementdetails span.appartementequipments 												{ list-style: none; font-size: 1em; }
main article.appartementdetails span.appartementequipments  span.text									{ line-height: 24px;  background-color: white;  }
main article.appartementdetails span.appartementequipments  div.details									{ background-color: white; margin-top: -54px; margin-left: 50% }
main article.appartementdetails span.appartementequipments  div.details span.material-symbols-outlined 	{ margin-left: 15px; margin-right: 25px;  }

@media only screen and (max-width: 800px) 	{
main article.appartementdetails span.appartementequipments  div.details									{ background-color: white; margin-top: 0px; margin-left: 0% }

}
/******PRICE ARTICLE******/
						
main article.prix div										{ overflow-x: auto; }
main article.prix table 									{ border-collapse: collapse; margin: 0px; font-size: 0.9em; font-family: sans-serif; width: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); white-space: nowrap; }
main article.prix table thead th 							{ padding: 10px; }
main article.prix table thead tr 							{ color: #ffffff; text-align: left; }
main article.prix table tbody tr							{ border-bottom: 1px solid #dddddd !important; width: 100%; }
main article.prix table tbody td 							{ padding: 10px 10px 10px 10px; }
main article.prix table tbody tr:nth-of-type(even) 			{ background-color: #f3f3f3; }
main article.prix table tbody tr:last-of-type 				{ border-bottom-width: 2px; border-bottom-style: solid;  }

/******PAY ARTICLE******/

main article.pay 											{ text-align: center; border-radius: 15px 15px 0px 0px; }
main article.pay div#payicons ul 							{ margin: 0px; padding: 0px }
main article.pay div#payicons ul li img 					{ height: 80px; }
main article.pay div#payicons ul li 						{ display:inline-block; padding: 0px; font-size: 1.2em; padding: 20px; }

@media only screen and (max-width: 450px) 	{	
main article.pay div#payicons ul li 						{  padding: 20px; }
}

/******MAP ARTICLE******/

main section.map 											{ background-image: url('../images/index/map150.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; color: white; }
main section.map article 									{ box-shadow: none; color: white; }
main section.map article  a									{ text-decoration: none; color: white; display: inline-block; }

/******CONTACT ARTICLE******/

main article.contact 										{ border-radius: 0px;  }
main article.contact a										{ text-decoration:none; display: inline-block; }
main article.contact a.icons								{ color: white; }
main article.contact a.text									{ color: black; }
main article.contact a.text:hover							{ text-decoration:underline }						

main article.contact section#legal							{ text-align: justify; }

.material-symbols-round, .material-symbols-app				{ display: inline-block; padding:15px; border-radius: 54px; cursor: pointer; color: white }
.material-symbols-app	 									{ cursor: default }
.material-symbols-align										{ display: inline-block; line-height: 54px; height: 54px; vertical-align: middle; margin-bottom: 10px; margin-left: 10px; }

main section.cal											{ background-image: url('../images/index/lake.jpg');  background-repeat: no-repeat; background-position: center top; background-size: cover; }
main section.cal article 									{ margin: auto; border-radius: 0px; background-color: white; opacity: 0.9 }

/******FORMULAIRE GENERAL UI******/

label,input,button,h4,select,textarea,date,number 							{ font-weight: 400; font-family: 'Open Sans', Arial, Helvetica, sans-serif; color: #555555; font-size: 1.2em }
input,select,textarea,date,number 											{ color: #495057; font-size: 1.2em; width: 100%; box-sizing: border-box; padding: 0.375rem 0.75rem; border: 1px solid #e1e1e1; background-color: #fff; background-clip: padding-box; }

.formcssvalid:invalid														{ border-color: #f44336 }	
.formcssvalid:focus:not(:placeholder-shown):valid, 
.formcssvalid:not(focus):not(:placeholder-shown):valid						{ border-color: #4CAF50 }
.formcssvalid:not(:invalid):focus											{ border-color: #ebb02d }

input:focus,select:focus,textarea:focus,date:focus,number:focus 			{ outline:none; border-width: 1px; border-style: solid; background-color: #e1e1e130 }

/******OPEN RESERVATION FORM******/

main article.form table 									{ border-collapse: collapse; margin: 0px; font-size: 0.9em; font-family: sans-serif; width: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); white-space: nowrap; }
main article.form table thead th 							{ padding: 10px; }
main article.form table thead tr 							{ color: #ffffff; text-align: left; }
main article.form table tbody tr							{ border-bottom: 1px solid #dddddd !important; width: 100%; }
main article.form table tbody td 							{ padding: 10px 10px 10px 10px; }
main article.form table tbody tr:last-of-type 				{ border-bottom-width: 2px; border-bottom-style: solid;  }

main article.form section.progressbar div.formprogressbar											{ padding-top: 20px;  }
main article.form section.progressbar div.formprogressbar div.round				   					{ display: grid; grid-template-columns: 20% 20% 20% 20% 20%  			} 
main article.form section.progressbar div.formprogressbar div.bar				   					{ display: grid; grid-template-columns: 10% 20% 20% 20% 20% 10% 		} 

main article.form section.progressbar div.formprogressbar div.round div.material-symbols-outlined	{ margin:auto;  width: 50px; font-size: 50px;  border-radius: 35px; padding: 10px; cursor: pointer; }
main article.form section.progressbar div.formprogressbar div.round div.label						{ font-size: 0.75em; color:#c9c9c9; }
main article.form section.progressbar div.formprogressbar div.round div.progress					{ font-size: 1em; color: black;  }
main article.form section.progressbar div.formprogressbar div.bar div								{ height: 20px; width: 100%; position: relative; top: 45px; z-index: -1 }

.color-theme-level-formprogressbar-bg 																{ background-color:#f5f5f5; }
.color-theme-level-formprogressbar-txt																{ color: white; }

main article.form section.progressbar div.formprogressbar div.labellittlescreen	div.label			{ display: none }

@media only screen and (max-width: 600px) 	{	
main article.form section.progressbar div.formprogressbar div.round div.label						{ display: none }
main article.form section.progressbar div.formprogressbar div.labellittlescreen	div.progress		{ display: block }
}

//main article.form section#stepdetails

/******NEW RESERVATION FORM******/

main article.form h4										{ font-size: 1.5em }	
main article.form label										{ font-size: 1em; margin-top: 20px; margin-bottom: 10px; display: block; }			
main article.form button									{ font-size: 1.2em; border: 1px solid #e1e1e1; background-color: #fff; padding: 10px; margin: 20px 10px 20px 10px; }
main article.form button.smallmargin						{ margin: 0px; }
main article.form button:hover								{ background-color: #e1e1e1 }
main article.form div 										{ text-align: center;  }
main article.form textarea									{ width: 100%; resize: none }
main article.form input										{ display: block }
main article.form input#departuredate   					{ background-color: #e1e1e1 }
main article.form select option.bold 						{ font-weight: bolder }
main article.form input.optioncheckboxhidden				{ display: none; }
main article.form div.optionclick							{ cursor: pointer; }

/******LIVRE D'OR******/

main article.livredor 											{ background-image: url('../images/index/papier.jpg'); background-repeat: no-repeat; background-position: top center; }
main article.livredor div#livredorbody 							{ font-size: 1.2em; margin: auto; background-color: transparent; padding-top: 222px; transform: rotate(-1deg); line-height: 26px; }
main article.livredor div#livredorbody div.title				{ text-decoration-line: underline; margin-bottom: 29px;  }
main article.livredor div#livredorbody div.sign					{ font-family: 'manuscrite'; font-weight: bold; text-align: right; width: 100%; padding: 0px; margin-bottom: -2px; }
main article.livredor div#livredorbody div.content				{ font-family: 'manuscrite'; font-weight: bold; }

main article.livredor div#livredorbody span#morereview			{ cursor: pointer; padding: 7px; border-radius: 30px; }
main article.livredor div#livredorbody span#morereview:hover	{ color: white; }