/* * * * * * * * * * * * RESPONSIVE WIDESCREEN * * * * * * * * * * * */

@media (min-width: 768px) and (max-height: 700px) {
	.article-content, .background-article { height: 700px;}
	#de-lecole-a-lauberge { height: 900px;}
}	



/* * * * * * * * * * * * RESPONSIVE WIDESCREEN * * * * * * * * * * * */

@media screen and (min-width: 1500px) {

	/* ACCUEIL */
	.top-menu {
		width: 70%;
		padding: 0 15%;
	}
	.header-main-btn a { height: 75px; line-height: 65px;}
	.entry-content p,
	.header-etiquette img { margin: 30px auto;}
	#sur-notre-ardoise ul .formule-jeudi-content { margin: 60px 180px 0;}
	#sur-notre-ardoise .souvenir-content { margin: 0 180px;}
	#sur-notre-ardoise ul .pot-vin-content { width: 40%; margin: -500px 0 0 35%; padding: 150px 0 270px 15%; background-size: 18% auto;}
	#sur-notre-ardoise ul .pot-vin-content ul li { width: 33%; display: inline-block;}

	/* SUR NOTRE ARDOISE */
	#sur-notre-ardoise .a-la-carte li:nth-child(4n+0) { 
		background: url('images/fromages-secs.png') -100px center no-repeat;
		background-size: 65% auto;
	}
	#sur-notre-ardoise .entry-content .bottom-ardoise { padding: 90px 0 120px 50%;}
	#sur-notre-ardoise ul { background-size: 11% auto;}
	#sur-notre-ardoise .bons-cadeaux-content img { width: 400px;}

	/* ON EST LÀ */
	.bouchala-map { height: 450px;}
}



/* * * * * * * * * * * * DESKTOP * * * * * * * * * * * */

@media screen and (min-width: 540px) {

	/* MOBILE MENU */
	.topbar-mobile {
		display: none; 
	}
}



/* * * * * * * * * * * * RESPONSIVE TABLET LANDSCAPE * * * * * * * * * * * */

@media screen and (max-width: 1200px) {
	.top-menu {
		width: 80%;
		padding: 0 0 0 20%;
	}
	.top-menu ul li {
		padding: 0 30px 0 0;
	}
	.top-menu ul li a {
		padding: 0;
		font-size: 0.85em;
	}
}



/* * * * * * * * * * * * RESPONSIVE SMARTPHONE * * * * * * * * * * * */

@media screen and (max-width: 768px) {
	
	section.page { float: left;}

	/* MOBILE MENU */
	.top-menu { display: none;}
	
	.topbar-mobile { 
		z-index: 999;
		background: url('images/auberge_ecole_logotype_blanc.svg') center 5px no-repeat rgba(0,0,0,0.88);
		background-size: auto 45px;
		height: 45px;
		width: 100%;
		padding: 5px 0;
		position: fixed;
		top: 0;
		overflow: hidden;
	}
	.topbar-mobile .map-icon { float: left; margin-left: 10px;}
	.topbar-mobile .phone-icon { float: right; margin-right: 10px;}
	.topbar-mobile a img { width: 45px;}

	/*
	.menu ul li { background-size: auto 45px; }
	.menu ul li a { margin: 6px; padding: 45px 0 0; height: 30px;}
	*/

    .background-article {
		display: inline-block;
	  	width: 100%;
	  	height: 50%;
	}
	.article-content {
		width: 100%;
		height: 50%;
		background: #EEE;
		display: inline-block;
		float: none;
	}
	.article-content-info  {
		margin: 30px;
	}
	article h1 { 
		margin: 0; 
		padding: 15px 0; 
		font-size: 1.75em;
	}

	/* ACCUEIL */
	#accueil .article-content-info {
		margin: 0;
		height: 100%;
		border: none;
	}
	#accueil header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		border-radius: 0;
	}
	#accueil .entry-content {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		height: 100%;
	}
	.guides-note {
		margin: 0 1.5%;
		padding: 0;
		top: 15px;
		position: absolute;
		width: 97%;
	}
	.guides-note a {
		margin: 0;
		width: 31%;
		height: 70px;
	}
	.tourisme img { height: 50px; width: auto; margin: 0 25px;}
	.guides-note .tripadvisor { background-size: auto 100%;}
	
	.info-pratique { 
		top: 100px;
		width: 355px;
		height: 70px;
	}
	.info-pratique a { 
		font-size: 0.7em;
	}
	.info-pratique a img { 
		height: 20px;
	}


	#accueil #mobile-menu { display: none;}
	.logo { margin: 5px 0; width: 180px;}
	.entry-content p { margin: 10px auto 20px; font-size: 1.05em; line-height: 1.25em;}
	.header-etiquette img { width: 160px; margin: -10px auto 0;}
	.header-main-btn { position: absolute; bottom: -1px; width: 100%;}
	.header-main-btn a {
		height: 60px;
		line-height: 60px;
		font-size: 1.25em;
	}
	.social-content { 
		bottom: 100%;
		left: 0px;
		width: 100%;
		background: rgba(255, 255, 255, 0.3);
	}
	
	/* WIDGET TRIPADVISOR */
	.cdsROW { background: #FFF !important}

	.follow { background: rgba(255, 255, 255, 0.6); width: 100%; padding: 3px 0; margin-bottom: 5px;}
	.fb_iframe_widget_fluid { margin: 0;}

	.small-screen { display: inline-block;}
	.large-screen { display: none;}

	/* LES MIDIS */
	#les-midis-a-lecole .article-content { height: 600px; border-bottom: 1px solid #DEDEDE;}
	#les-midis-a-lecole .entry-content { width: 100%; margin: auto 0; left: 0;}
	#les-midis-a-lecole h3 { font-size: 1.5em;}
	#les-midis-a-lecole .entry-content img { width: 90px;}

	/* AU JOUR LE JOUR */
	#au-jour-le-jour article h1 { margin: 0; padding: 15px 0;}
	#au-jour-le-jour p { margin: 0; width: 100%;}
	#au-jour-le-jour .article-content-info {margin: 0}
	iframe, #au-jour-le-jour video { width: 100%; height: 56.25vw; margin: 0; border-radius: 0;}
	.powr-social-feed { margin-top: 15px; display: none;}

	#appView { margin: 0;}
	.socialFeed { width: 100%;}
	.socialFeed .postItem { width: 100%;}

	/* NOTRE ARDOISE */
	#sur-notre-ardoise { padding: 0; background: none;}
	#sur-notre-ardoise .menu-content {
		margin: 0;
		padding: 15px 0 30px;
		border-radius: 0;
	}
	#sur-notre-ardoise .formule-jeudi-content { width: 100%; margin: 15px 0; padding-bottom: 35px;}
	#sur-notre-ardoise .formule-jeudi-content table  { padding-bottom: 0; margin-bottom: 30px;}
	#sur-notre-ardoise .formule-jeudi-content tr { float: none; text-align: center;}
	#sur-notre-ardoise .formule-jeudi-content tr td { padding: 0 3px; font-size: 1.25em; line-height: 30px;}
	#sur-notre-ardoise .formule-jeudi-content .ou { font-size: 1.5em;}
	#sur-notre-ardoise .a-la-carte li,
	#sur-notre-ardoise .a-la-carte li:first-child { width: 91%; margin: 0 0 30px 9%; padding: 0; display: inline-block; float: left;}
	#sur-notre-ardoise .a-la-carte li:nth-child(4n+0) {
		margin: 30px 0 90px;
		padding: 60px 0 0 9%;
		width: 91%;
		background: url('images/fromages-secs.png') top center no-repeat;	
		background-size: 80% auto;
	}
	#sur-notre-ardoise .a-la-carte li { list-style: none;}
	#sur-notre-ardoise .entry-content .bottom-ardoise { width: 95%; padding: 0 0 0 5%;}
	#sur-notre-ardoise ul { background-size: 30% auto; background-position: 114% top;}
	#sur-notre-ardoise article h1 { padding: 15px 10%; width: 80%;}
	#sur-notre-ardoise .pot-vin-content h2 { margin-bottom: 15px;}
	#sur-notre-ardoise .pot-vin-content tr td { line-height: 30px;}
	#sur-notre-ardoise .souvenir-content .prix-souvenir { width: 65%;}
	#sur-notre-ardoise .bons-cadeaux-content img { width: 95%;}

	#sur-notre-ardoise .menu-content .edit-link { border-radius: 0;}

	/* DE L’ÉCOLE À L’AUBERGE */
	#de-lecole-a-lauberge { height: auto; background-size: 100%; background-position: 100% -60px;}
	#de-lecole-a-lauberge .background-article { height: 120px;}
	#de-lecole-a-lauberge .ecole-fade { height: 120px; display: block;}
	#de-lecole-a-lauberge h1.entry-title { padding: 60px 0; color: #000; text-shadow: 0 1px 2px #000; animation-name: none;}
	#de-lecole-a-lauberge .entry-content { width: 100%; border-radius: 0; box-shadow: none; background: url('images/patterns/asfalt/asfalt.png') 0 0; padding-bottom: 20px;}
	#de-lecole-a-lauberge .article-content { background: transparent; position: relative; height: auto;}
	#de-lecole-a-lauberge .article-content-info { position: relative; top: 0; transform: translateY(0);}
	#de-lecole-a-lauberge header { top: 0; position: relative; width: 100%;}

	/* ON EST LA */
	#on-est-la { height: 100%;}
	#on-est-la .article-content { height: 100%;}
	#on-est-la .article-content header { height: 100%;}
	#on-est-la .article-content header .logo { margin: 22.5% auto 15px;}
	#on-est-la .background-article { height: 50%;}
	#on-est-la .article-content { left: 0; background: none;}
	iframe.bouchala-map {
 		position: absolute;
	 	top: 50%;
	 	left: 0;
	 	margin: 0;
	 	padding: 0;
	 	border-radius: 0;
	 	box-shadow: none;
	 	width: 100%;
	 	height: 50%;
	} 
	/* MODAL BOOKING */
	.md-head { height: 55px;}
	.md-head h3 { font-size: 2em;}
	.md-head a { top: 20px; right: 20px;}
	.md-content > div { padding: 15px 20px 30px;}
	#modal-2 { 
		position: absolute;
		top: 1rem;
		left: 0;
		margin: 0 1rem;
		width: auto;
		max-width: auto;
		height: 100%;
		transform: none;
		}
}



/* * * * * * * * * * * * RESPONSIVE SMARTPHONE < 4" * * * * * * * * * * * */

@media screen and (max-width: 360px) {
	.logo-small { width: 145px;}
	.entry-content p { font-size: 0.8em; width: 100%;}
	.header-main-btn a { height: 50px; line-height: 50px; font-size: 1.15em;}
}