/*****************
		RESPONSIVE 
******************/

@media (max-width: 1024px) {
	/*paysage ipad*/
	#traduction {
		float: right;
	}

	.page_dynamique_content {
		max-width: 100%;
		clear: both;
		padding: 15px;
	}

	.bloc_home h1 {
		font-size: 16px;
	}

	.fil_ariane {
		margin: 20px 0 0;
	}

	.page_dynamique_content .image1,
	.page_dynamique_content .images_droite,
	.page_dynamique_content .images_droite img {
		height: 180px;
	}

	#menuSuppMobile{
		display: block;
	}


	/******* MENU ***********/
	body nav {
		height: auto;
		margin-top: 0 !important;
		display: none;
		width: 260px;
		top: -10px;
	}

	body nav.open {
		display: block;
	}

	#menuDroit, #menuGauche {
		float: none;
	}

	body header nav ul li {
		width: 100%;
		float: none;
		height: auto;
	}

	body nav ul li a {
		border: none;
		font-weight: normal;
		text-align: right;
		width: auto;
		float: none;
		line-height: 45px;
		background: none;
		border-bottom: 1px solid #fff;
	}

	body nav ul li:hover a {
		color: #FFFFFF;
	}

	body nav ul li.reseaux_sociaux {
		margin-right: 0;
		width: auto;
		float: right;
		height: 35px;
		padding: 10px 5% 0 0;
	}

	body nav ul li.reseaux_sociaux a {
		float: right;
		border: none;
		padding: 0;
		line-height: normal;
	}

	/****  SOUS MENU *******/
	body nav ul li ul {
		position: relative;
		padding: 0;
		top: 0;
		left: 0;
		width: 100%;
		background: #666;
		border-top: none;
	}

	body nav ul li ul li {
		background: none;
	}

	nav ul li > ul li:last-child a {
		background: #666;
	}

	nav ul li > ul li a {
		line-height: 30px;
		text-align: right;
		text-shadow: none;
		width: auto;
		font-size: 15px;
		float: none;
		box-sizing: content-box; /* annulation du border-box du desktop */
	}

	body nav ul li ul li a:hover {
		padding-right: 10px;
		padding-left: 0px;
	}

	nav ul li > ul li:last-child a {
		border-bottom: 1px solid #fff;
	}

	/********** DEBUT MENU PUSH ***********/
	/***ANIMATION MENU HAMBURGER***/
	.text_menu {
		margin-top: 45px;
	}

	.menu-icon {
		position: absolute;
		width: 60px;
		height: 25px;
		transition: transform 0.5s;
		-moz-transition: transform 0.5s;
		-webkit-transition: transform 0.5s;
	}

	.menu-icon span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-webkit-transform: translateX(-50%) translateY(-50%);
		display: block;
		width: 60px;
		height: 3px;
		background-color: #FFF;
		transition: background 0.5s;
		-moz-transition: background 0.5s;
		-webkit-transition: background 0.5s;
	}

	.menu-icon span::before, .menu-icon span::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		transform: translateY(-6px);
		-moz-transform: translateY(-6px);
		-webkit-transform: translateY(-6px);
		display: block;
		width: 60px;
		height: 3px;
		background-color: #FFF;
		transition: transform 0.5s;
		-moz-transition: transform 0.5s;
		-webkit-transition: transform 0.5s;
	}

	.menu-icon span::after {
		transform: translateY(6px);
		-moz-transform: translateY(6px);
		-webkit-transform: translateY(6px);
	}

	.menu-icon.is-opened span {
		background: transparent;
	}

	.menu-icon.is-opened span::before {
		transform: translateY(0) rotate(45deg);
		-moz-transform: translateY(0) rotate(45deg);
		-webkit-transform: translateY(0) rotate(45deg);

	}

	.menu-icon.is-opened span::after {
		transform: translateY(0) rotate(-45deg);
		-moz-transform: translateY(0) rotate(-45deg);
		-webkit-transform: translateY(0) rotate(-45deg);
	}

	.menu-icon.is-opened {
		transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}

	/***FIN ANIMATION MENU HAMBURGER***/
	#menu {
		transition: all 0.3s ease;
		position: absolute;
		width: 0%;
		top: 0;
		left: -300px;
		background: #404142;
		height: auto;
		z-index: 999;
	}

	#menu-toggle {
		font-size: 22px;
		position: absolute;
		color: #FFF;
		text-transform: uppercase;
		top: 0;
		left: 0;
		background: #3C2314;
		z-index: 1000;
		padding: 10px 20px;
		transition: all 0.3s ease;
		text-align: center;
		height: 80px;
		width: 60px;
		font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
	}

	#menu-toggle:hover {
		cursor: pointer;
	}

	#menu.open, #menu-deroulant {
		left: 0;
		width: 200px;
		display: block !important;
		z-index: 1000;
		padding-bottom: 5px;
		height: auto;
		border: none;
	}

	#menu-toggle.open {
		left: 260px;
		width: 54px;
	}

	#menu-toggle span {
		display: block;
		font-size: 12px;
		color: #FFFFFF;
		text-transform: uppercase;
	}

	/********** FIN MENU PUSH ***********/


	.tablette {
		display: block;
	}

	#headerGauche .btnLienDivers, #headerGauche #lienFourchette, #headerDroit > .btnOffresEmploi, #headerDroit > .logos > .logosPub{
		display: none;
	}

	#headerGauche > .adresse{
		position: absolute;
		bottom: 0;
		left: 0;
	}

	header .telephone{
		display: block;
	}

	#grosTitre{
		top: 30px;
	}

	#page_home .page_dynamique_content, .page_dynamique_content{
		position: static;
		transform: none;
		padding: 15px;
		left: auto;
	}

	#page_home .page_dynamique_content{
		margin-top: 43.123%; /* correspond à la hauteur du carousel */
	}

	#blocsHome, #blocsHome > .gauche, #blocsHome > .centre, #blocsHome > .droite{
		position: static;
	}

	#blocsHome > .gauche{
		float: left;
		width: auto;
		max-width: 48%;
	}

	#blocsHome > .droite{
		float: right;
		width: auto;
		max-width: 48%;
	}

	#blocsHome > .centre{
		width: auto;
		transform: none;
		margin-top: 15px;
		left: auto;
	}

	#page_home .page_dynamique_content h1{
		font-size: 40px;
	}

	#footer_content_up > .gauche, #footer_content_up > .droite{
		float: none;
	}

	main{
		min-height: 0;
	}

	#slider{
		height: auto;
	}

	.page_dynamique_content > h1{
		transform: none;
		position: static;
	}

	#page_home #slider #supersized{
		padding-top: 43.123%;
		overflow: hidden;
	}

	#page_home .page_dynamique_content{
		margin-top: 0;
	}
}

@media (max-width: 770px) {
	/*portrait ipad*/
	#logo{
		display: block;
		margin-left: 130px;
		margin-bottom: 20px;
		position: static;
	}

	header{
		height: auto;
	}

	body {
		overflow-x: hidden;
		overflow-y: visible;
	}

	#traduction {
		right: 5px;
		position: absolute;
	}

	#slider, #bloc_archives .une_archive {
		height: auto;
	}

	#page_dynamique table {
		width: 100%;
		border-collapse: collapse;
	}

	/*ACCUEIL*/
	.bloc_home, .bloc_home:last-child {
		float: none;
		width: 95%;
		height: auto;
		margin: 0 auto 20px;
	}

	.page_dynamique_content .image1,
	.page_dynamique_content .images_droite,
	.page_dynamique_content .images_droite img {
		height: 130px;
	}

	/*PAGE ACTU*/
	#bloc_archives .img_archive, .ligne_or img {
		display: none;
	}

	#bloc_archives .archive_content {
		float: none;
	}

	.ligne_or_content {
		float: none;
		max-width: 95%;
		margin: 0 auto;
	}

	.bloc_partenaire_content {
		width: 75%;
		float: none;
	}

	body .carousel-navigation li:hover .hover_effect, body .carousel-navigation li.active .hover_effect {
		display: none;
	}

	body .connected-carousels .carousel-stage {
		width: 50%;
	}

	.content_left, #bloc_dispo, #page_reservation .content_left {
		float: none;
		width: 95%;
		margin: 30px auto 0;
	}

	.content_left h3, #bloc_dispo h2, #page_reservation .content_left h2 {
		margin-top: 10px;
	}

	.input {
		max-width: 525px;
	}

	select, option {
		width: 76%;
	}

	#headerGauche, #headerDroit{
		height: auto;
	}

	#headerDroit > #traduction{
		position: absolute;
		top: -160px;
		right: 0;
	}

	#headerDroit > .infosContact{
		position: static;
		float: right;
	}

	#headerGauche > .adresse{
		position: static;
	}

	#headerDroit .txtSuivezNous{
		display: none;
	}

	#headerDroit > .logos{
		top: -130px;
	}

	#headerDroit > .logos li{
		margin-left: 3px;
	}

	#grosTitre{
		font-size: 50px;
		top: 20px;
	}

	#blocsHome > .gauche{
		float: none;
		max-width: none;
	}

	#blocsHome > .droite{
		float: none;
		max-width: none;
		margin-top: 20px;
	}

	#blocsHome h2{
		width: auto;
	}

	#blocsHome > .droite h2{
		float: none;
	}

	.tableWrapper > .info{
		display: block;
	}
}

@media (max-width: 667px) {
	/*Iphone 6 paysage*/
	.page_dynamique_content .image1, .page_dynamique_content .images_droite, .page_dynamique_content .images_droite img {
		height: 100px;
	}

}

@media (max-width: 568px) {
	/*Iphone 5 paysage*/
	h2 {
		font-size: 20px;
	}

	#logo{
		margin-left: 0;
		display: inline-block;
	}

	#logo img {
		max-width: 320px;
	}

	#page_home .page_dynamique_content {
		height: auto;
	}

	body .photo_actu {
		display: block;
		float: none;
		margin: 0 auto;
		text-align: center;
	}

	.image_droite, .image_gauche, .img_partenaire {
		float: none;
		text-align: center;
		border: none;
		margin: 0 auto;
	}

	.image_droite a, .image_gauche a {
		float: none;
	}

	.bloc_partenaire_content {
		width: 95%;
		float: none;
	}

	.img_partenaire {
		margin: 10px auto;
		max-width: 100%;
		width: auto;
	}

	#headerGauche, #headerDroit{
		width: auto;
		float: none;
		padding-left: 15px;
	}

	#headerDroit > .infosContact{
		float: none;
	}

	#header_content{
		text-align: center;
	}

	header .telephone{
		display: inline;
	}


	#headerDroit > #traduction {
		top: -210px;
	}

	#headerDroit > .logos{
		top: -180px;
	}

	#slider, #grosTitre{
		display: none;
	}

	.page_dynamique_content {
		margin-top: 0;
	}

	#page_home .page_dynamique_content, .page_dynamique_content{
		margin-top: 0;
	}
}

@media (max-width: 480px) {
	/*Iphone 4 paysage*/
	#header_content {
		margin-top: 110px;
	}

	#headerDroit > #traduction {
		top: -250px;
		width: 100%;
		margin: auto;
		justify-content: center;
	}
	#ReservitBookingIframe {
		z-index: 9999 !important;
	}

	#menu-toggle {
		height: 30px;
		width: 100%;
		left: 0;
	}

	#menu-toggle.open{
		width: 100%;
		left: 0;
	}

	#wrapperMenu{
		top: -70px;
		z-index: 99999;
	}

	.text_menu {
		margin-top: 0;
		font-size: 25px;
		line-height: 25px;
	}

	#traduction {
		top: 60px;
	}

}

@media (max-width: 440px) {

	#slider #supersized {
		display: none;
	}

	#page_home .page_dynamique_content {
		height: auto;
		position: relative;
	}

	#traduction {
		top: 0;
	}

	h1 {
		font-size: 30px;
	}

	main {
		margin: 0 auto 20px;
	}

	.page_dynamique_content .images_droite img:last-child {
		display: none;
	}

	#page_dynamique table {
		width: 850px;
		border-collapse: collapse;
		overflow-x: scroll;
	}

	#page_dynamique .text_champ {
		overflow-x: scroll;
	}

	#page_dynamique table tr {
		background: #E2DFDF;
		color: #333;

	}

	#page_dynamique table tr:nth-child(odd) {
		background: #0E76BC;
		color: #fff;
	}

	#page_dynamique table td {
		width: 500px;
		border-collapse: collapse;
		overflow-x: scroll;
		text-align: left;
	}

	#temoignages form {
		width: 90%;
		margin: 0 auto 20px;
	}

	#bloc_dispo #datepicker {
		width: 100%;
		float: none;
	}

	#bloc_dispo #datepicker .ui-datepicker {
		width: 95%;
	}

	/* CAROUSEL  */
	.wrap_carousel #carousel_projet {
		width: 100%;
	}

	#carousel_projet li {
		width: 1%;
	}

	#carousel_projet li a {
		width: 50%;
	}

	.input {
		max-width: 400px;
	}

}

@media (max-width: 360px) {
	/*Galaxy S portrait*/
	.fil_ariane_content {
		display: block;
	}

	.fil_ariane .current_retour {
		display: none;
	}

	#logo img {
		max-width: 250px;
	}

	#carousel_projet li a img {
		padding-left: 0px;
		margin: 0 24px;
	}

	#carousel_projet li a {
		margin-left: 25px;
		width: 70%;
	}

	.input {
		max-width: 320px;
	}

}

@media (max-width: 320px) {
	/*Iphone 5 portrait*/
	#carousel_projet li a img {
		padding-left: 0px;
		margin: 0 24px;
	}

	#carousel_projet li a {
		margin-left: 25px;
		width: 70%;
	}

	body main h1 {
		width: 93%;
	}

}
