/***
	THEME PICCARD2 RESPONSIVE STYLE
***/

/* TABLETS */
@media only screen and (max-width: 800px) {
	
	/* main */
	html, body {
		height: 100%;
		overflow-y: hidden;
	}

	/* header */
	#header {
		border-top: none;
	}
	#mobilesp {
		margin-top: 59px;
	}
	#logo_centre {
		width: 100%;
		max-height: 57px;
	}
	#logo_centre a {
		position: relative;
		display: inline-block;
	}
	#logo {
		top: 0px;
		max-height: 57px;
	}

	/* home slider */
	#content_mobile {
		padding: 0px !important;
		overflow-x: hidden;
		overflow-y: visible;
		height: inherit;
	}
	
	/* home module location */
	#acc_widget {
		width: 100% !important;
	}
	#acc_widget #resaloc {
		width: 100% !important;
		height: 190px !important;
		top: -210px !important;
		padding: 3px 0;
	}
	#acc_widget .coldate {
		display: block !important;
		width: 100% !important;
		padding: 6px 0 0 0;
	}
	#acc_widget .coldatetxt {
		display: block !important;
		width: 100% !important;
	}
	.datepicker_minimal {
		margin-left: -125px;
	}
	
	/* footer */
	#footer {
		height: auto !important;
	}
	
	/* home blocs liens footer */
	#acc_widget {
		text-align: center;
	}
	#acc_widget a {
		display: inline-block;
		margin: 0 auto;
	}
	
	/* page titre */
	#contenutitre {
		min-height: 200px;
	}
	
	/* page iframe */
	.pagetxt iframe {
		max-width: 100%;
		margin: 16px auto;
	}
	
	/* page forms */
	#page_contact form .form-groupResa {
		width: 45%;
	}
	#page_contact form input[type="text"], #page_contact form input[type="email"], #page_contact form textarea {
		width: 40%;
		margin: 5px 15% 5px 0;
	}
	.pagetxt #page_contact {
		max-width: 100%;
	}
	#pageswipe table #page_contact form .datatable {
		width: auto !important;
		max-width: 100% !important;
	}
	#pageswipe table #page_contact form .datatable input {
		width: auto;
		max-width: 100px;
	}
	#pageswipe table #page_contact form .datatable select {
		max-width: 50px;
	}
	
}

/* STRUCTURE FIX BETWEEN TABLET & MOBILE */
@media only screen and (max-width: 750px) {
	
	/* main */
	html, body {
		height: 100%;
		overflow-y: hidden;
	}
	
	/* header */
	#header {
		opacity: 1 !important;
	}
	#logo {
		opacity: 1 !important;
	}
	
	/* home slider */
	.mask img {
		margin: 0px !important;
		/* max-width: 150% !important; */
		/* height: auto !important; */
		min-height: 460px !important;
		/* max-height: 380px !important; */
		max-height: 100% !important;
		width: auto !important;
		min-width: 100% !important;
	}
	#centre {
		position: absolute;
	}
	.accueiltitre {
		font-size: 25px;
	}
	#content_mobile {
		padding: 0px !important;
		overflow-x: hidden;
		overflow-y: visible;
		height: inherit;
	}
	#acc_widget {
		margin-top: 400px !important;
	}
}

/* MOBILE */
@media only screen and (max-width: 480px) {
	
	/* main */
	html, body {
		height: 100%;
		overflow-y: hidden;
	}
	h1, h2, h3, h4, h5, h6 {
		height: auto;
	}

	/* header */
	#header {
		border-top: none;
	}
	#mobilesp {
		margin-top: 59px;
	}
	#logo_centre {
		width: 100%;
		max-height: 57px !important;
	}
	#logo_centre a {
		position: relative !important;
		display: inline-block !important;
	}
	#logo {
		position: relative !important;
		display: inline-block !important;
		top: 0px !important;
		max-height: 57px !important;
	}
	
	/* home slider */
	.mask img {
		margin: 0px !important;
		/* max-width: 150% !important; */
		/* height: auto !important; */
		min-height: 260px !important;
		/* max-height: 380px !important; */
		max-height: 100% !important;
		width: auto !important;
		min-width: 100% !important;
	}
	#centre {
		position: absolute;
	}
	.accueiltitre {
		font-size: 25px;
	}
	#content_mobile {
		padding: 0px !important;
		overflow-x: hidden;
		overflow-y: visible;
		height: inherit;
	}
	#acc_widget {
		margin-top: 200px !important;
	}
	
	/* home module location */
	#acc_widget {
		width: 100% !important;
	}
	#acc_widget #resaloc {
		width: 101% !important;
		height: 225px !important;
		top: -245px !important;
		padding: 3px 0 !important;
	}
	#acc_widget .coldate {
		display: block !important;
		width: 100% !important;
		padding: 5px 0 0 0 !important;
	}
	#acc_widget .coldatetxt {
		display: block !important;
		width: 100% !important;
	}
	.datepicker_minimal {
		margin-left: 5px;
	}
	
	/* home blocs liens footer */
	#acc_widget {
		text-align: center !important;
	}
	#acc_widget a {
		display: inline-block !important;
		margin: 0 auto !important;
	}
	
	/* page titre */
	#contenutitre{
		min-height: 250px !important;
	}
	#footer{
		top: 330px !important;
	}
	
	/* page text */
	#pageswipe table .pagetxt{
		max-width: 96%;
	}
	
	/* page images */
	#pageswipe table .pagetxt p img, #pageswipe table .pagephotos img{
		max-width: 100%;
		height: auto;
	}
	
	/* page iframe */
	.pagetxt iframe, .pagephotos iframe{
		max-width: 100%;
		margin: 8px auto;
	}
	
	/* page forms */
	#page_contact form .form-groupResa {
		width: 90%;
	}
	#page_contact form input[type="text"], #page_contact form input[type="email"], #page_contact form textarea {
		width: 90%;
		margin: 5px auto;
	}
	.pagetxt #page_contact {
		max-width: 100%;
	}
	#pageswipe table #page_contact form {
		width: 100% !important;
		max-width: 100% !important;
	}
	#pageswipe table #page_contact form .datatable {
		display: block;
		/* table-layout: fixed; */
		width: 300px !important;
		max-width: 100% !important;
		padding: 0 0 8px 0;
		/* overflow-x: visible; */
		overflow-x: scroll;
		/* -webkit-overflow-scrolling: touch; */
		/* white-space: nowrap; */
		/* scroll-snap-type: proximity; */
		/* scroll-snap-points-x: repeat(50px); */
	}
	
	::-webkit-scrollbar {
		-webkit-appearance: none;
	}
	::-webkit-scrollbar:horizontal {
		height: 22px;
	}
	::-webkit-scrollbar-thumb {
		background-color: rgba(130, 130, 130, .5);
		border-radius: 10px;
		border: 2px solid #ffffff;
	}
	::-webkit-scrollbar-track {
		border-radius: 10px;  
		background-color: #ffffff; 
	}
	#pageswipe table #page_contact form .datatable input {
		width: auto;
		max-width: 80px;
	}
	#pageswipe table #page_contact form .datatable select {
		max-width: 60px;
	}
	
}