/**
 *
 * PORTRAIT MODE
 *
*/
@media screen AND (max-width: 767px) {
	
	h1 { margin: 15px 0 0 0; }
	h1:first-child { margin-top: 0; }
	a { color: #4fa0ba; }

	.menu-style { font-family: 'MelancholiaRegular'; text-transform: uppercase; letter-spacing: 1px; }
	.menu-style.orange { color: #fff; background: #e88437; }

	/* ==================================== */
	/* ============== STYLES ============== */
	/* ==================================== */
	@keyframes appear-start { from { opacity: 0; } to { opacity: 1; } }
	@keyframes appear-last { from { opacity: 0; } to { opacity: 1; }	}		

	/* ============ main blocks ============ */
	#container, #main { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; }
	#container { margin: 0; width: auto; height: auto; }

	/* ============ social ============ */
	html[class] #main .social { position: fixed; top: 8px; right: 55px; }

	/* ============ menu ============ */
	.nav { position: fixed; top: 0; bottom: 0; left: -100%; width: 100%; background: #e5f0ef; transition: all 0.3s ease; }
	.nav .top-bar, .menu a { height: 45px; line-height: 45px; }
	.nav .top-bar { display: block; background: #383E32; }
	.nav .top-bar > * { height: 45px; }	
	.nav .top-bar .nav-title { position: absolute; top: 0; left: 0; right: 0; padding-left: 10px; font-family: 'MelancholiaRegular'; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; }
	.nav .top-bar .menu-btn { position: fixed; right: 0; width: 45px; padding: 15px 12px 14px 12px; opacity: 0; animation: appear-start 1s linear 1s forwards; }	
	.nav .top-bar .menu-btn > .inner { position: relative; width: 100%; height: 100%; }
	.nav .top-bar .menu-btn > .inner .stroke { position: absolute; width: 100%; height: 2px; background: #426073; transition: all 0.3s linear; }

	.menu li { margin: 0; }
	.menu a, .renseignements .menu a { background: transparent; }
	.menu a { display: block; position: relative; margin-top: -1px; width: 100%; font-size: 14px; color: #266482; opacity: 1 !important; border-style: solid; border-color: #abc5cf; border-width: 1px 0; }
	.menu .here a, .menu .parent-here a { z-index: 1; width: 100% !important; color: #fff; background: #e88437; border: none; }	

		/* animations and colors */
	.nav.opened { left: 0; }	
	.nav.opened .top-bar .menu-btn > .inner .stroke { background: #e5f0ef; }
	.nav.opened .top-bar .menu-btn > .inner .stroke.one { top: 7px; transform: rotate(45deg); }
	.nav.opened .top-bar .menu-btn > .inner .stroke.two { opacity: 0; }
	.nav.opened .top-bar .menu-btn > .inner .stroke.three { bottom: 7px; transform: rotate(-45deg); }
	.nav.closed .top-bar .menu-btn > .inner .stroke.one { transform: rotate(0deg); }
	.nav.closed .top-bar .menu-btn > .inner .stroke.two { opacity: 1; top: 50%; margin-top: -1px; }
	.nav.closed .top-bar .menu-btn > .inner .stroke.three { bottom: 0; transform: rotate(0deg); }	
	.gris .nav.closed .top-bar .menu-btn > .inner .stroke { background: #8f8f8f; }
	.marron .nav.closed .top-bar .menu-btn > .inner .stroke {background:#939c88;}

	#menu_galerie { display: none; }

	/* ============ page-title ============ */
	.page-title { display: table; position: fixed; z-index: 1; top: 0; left: 0; right: 0; height: 48px; opacity: 0; animation: appear-start 1s linear 1s forwards; }
	.page-title > .inner { display: table-cell; vertical-align: middle; width: 100%; height: 100%; font-size: 0; }
	.page-title > .inner .content { display: inline-block; position: relative; margin-left: 30px; width: auto; height: 25px; line-height: 27px; padding: 0 0.5em; font-size: 13px; }
	.page-title > .inner .content:before { content: ""; position: absolute; top: 0; left: -15px; width: 15px; height: 25px; font-size: 13px; background: #3c4035; }

	/* ============ bouton index ============ */
	#index { display: none; }

	/* ============ montage ============ */	
	html[class] #montage { position: fixed; left: 50%; top: auto; margin-left: -500px; }

	/* ============ diaporamas ============ */	
	#diaporama-link { position: relative; top: 20px; left: 15px; }
	#diaporama-link .link { height: 30px; line-height: 30px; font-family: 'MelancholiaRegular'; font-size: 11px; color: #fff; text-transform: uppercase; letter-spacing: 1px; background: #266482; border-radius: 2px; }

	.diaporama #top { margin-top: 48px; width: auto; }
	.diaporama #top #menu-diaporama-container { position: absolute; top: 55px; right: auto; left: 15px; float: left; }
	.diaporama #top #titre { float: none; margin-top: 95px; width: auto; height: auto; padding: 0 15px; }
	.diaporama #top #titre h1 { margin: 0; color: #b2a750; }	
	.diaporama #top #titre h2 { color: #b2a750; }

	.diaporama #slideshow, .diaporama #slideshow .content, .diaporama #slideshow .content .loader, .diaporama #slideshow .content #photos, .diaporama #slideshow .content #photos a img { width: 100%; } 
	.diaporama #slideshow .content > * { height: 213px; } 
	.diaporama #slideshow .content #photos a img { height: auto; } 
	.diaporama #slideshow { float: none; margin: 5px 0 0 0; height: 240px; }

	.diaporama #slideshow #thumbs .thumbs { margin-left: 15px; }
	.diaporama #slideshow #thumbs #controls { float: none; width: auto; }
	.diaporama #slideshow #thumbs #controls .ss-controls { display: none; }
	.diaporama #slideshow #thumbs #controls .nav-controls { margin-right: 15px; }
	.diaporama #slideshow .loader { background-color: transparent; background-image: url('http://www.chateaudepange.fr/-img_css/loader-222.gif'); }

	.diaporama #bottom, .diaporama #bottom #photographe { width: 100%; }
	.diaporama #bottom { position: fixed; z-index: 10; bottom: 20px; float: none; margin: 0; }
	.diaporama #bottom #photographe { float: none; text-align: center; }

	/* ==================================== */
	/* =============== PAGES ============== */
	/* ==================================== */	
	/* ============ contenus : texte, citation, btn ============ */		
	html[class] #texte, html[class] #texte [class*="txt"], html[class] .citation, .btn { top: auto; right: auto; left: auto; width: auto; height: auto; }
	html[class] #texte, html[class] #texte [class*="txt"], html[class] #texte [class*="decal"], .btn { position: relative; }
	html[class] #texte [class*="txt"], html[class] #texte [class*="decal"], .btn { padding: 0; }
	html[class]:not(.home) #texte [class*="txt"] p, html[class]:not(.home) #texte [class*="txt"] p span, html[class]:not(.home) #texte [class*="txt"] ul, html[class] #texte [class*="decal"] p, html[class] #texte [class*="decal"] span { line-height: 1.2em; font-size: 17px !important; }	
	html[class]:not(.home).device-android #texte [class*="txt"] p, html[class]:not(.home).device-android #texte [class*="txt"] p span, html[class]:not(.home).device-android #texte [class*="txt"] ul, html[class].device-android #texte [class*="decal"] p, html[class].device-android #texte [class*="decal"] span { font-size: 14px !important; }	
	html[class] #texte [class*="txt"], html[class] #texte [class*="txt"] p, .btn { margin-top: 15px; }
	html[class] #texte [class*="txt"]:first-child, html[class] #texte [class*="txt"] p:first-child { margin-top: 0; }
	html[class] #texte { margin-top: 48px; padding: 0 15px 0 15px; }
	html[class] .citation { background: rgba(255,255,255,0.9); }

	html[class] #texte > .inner [class*="txt"] { padding: 15px; background: rgba(255,255,255,0.9); }

	html:not(.home) .citation { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 20px; }
	html:not(.home) .citation:before { content: ""; position: absolute; top: -30px; right: 0; height: 30px; left: 0; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.9)); } 
	.cita-content { font-size: 19px; line-height: 1.2em; }
	.device-android .cita-content { font-size: 15px; }
	.cita-auteur { font-size: 14px; }
	.device-android .cita-auteur { font-size: 12px; }

	.btn { margin-left: 15px; }

	/* ============ home ============ */	
	.home .nav { display: block; }	
	html.home #montage { margin-left: -510px; bottom: -150px; }
	html.home #texte { margin-top: 30px; padding-top: 0; }
	html.home #texte .inner { padding: 0; }	
	html.home #texte > .inner [class*="txt"] { padding: 0; background: transparent; }
	html.home h1 { margin-bottom: 0; line-height: 1.1em; }
	html.home h1 span { display: block; }	
	html.home .citation { position: relative; z-index: 1; padding: 0 15px 0 15px; background: transparent; }
	html.home .cita-content { font-variant: normal; font-size: 20px; letter-spacing: 0; color: #fff; }
	html.home.device-android .cita-content { font-size: 17px; }
	html.home .cita-content br { display: none; }	
	html.home .cita-auteur { font-size: 14px; color: #a5a981; }
	html.home #entrez { position: fixed; z-index: 1; bottom: -20px; padding-left: 62px; font-size: 15px; }
	html.home .infos-pratiques { display: table; z-index: 2; position: fixed; bottom: 0; width: 100%; height: 55px; text-align: center; background: rgba(255,255,255,0.7); opacity: 0; animation: appear-last 1s linear 2.5s forwards; }
	html.home .infos-pratiques > .inner { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }	
	html.home .infos-pratiques > .inner .btn { display: inline-block; margin: 0; padding: 0 0.7em; height: 30px; line-height: 30px; }
	html.home .langues { position: fixed; z-index: 3; top: auto; right: auto; bottom: 5px; left: 10px; }

	/* ============ accueil ============ */	
	.accueil #texte [class*="txt"] [class*="decal"] { margin: 0; }
	.accueil #texte [class*="txt"] .decal1 { margin-bottom: 15px; }	
	.accueil #texte [class*="txt"] .decal2 { display: inline; }	
	.accueil .cita-content br { display: none; }
	.accueil .btn[class] { position: relative; top: 0; left: 0; float: left; }
	.accueil .langues { position: relative; top: auto; float: right; margin-top: 20px; margin-right: 15px; }

	/* ============ histoire ============ */
	html.histoire #montage { bottom: -100px; margin-left: -570px; }
	html.histoire #texte { margin-bottom: 200px; }

	/* ============ chateau ============ */
	.chateau #montage { bottom: -30px; }
	.chateau .btn { top: 62px; left: auto; }
	.chateau .monument-historique { background-color: #fff; }
	.chateau .cita-content { font-size: 16px; }
	.chateau.device-android .cita-content { font-size: 13px; }

	/* ============ jardin ============ */
	.jardin #montage { bottom: -140px; }
	.jardin .btn { margin: 0;}
	.jardin #texte [class*="txt"] p br { display: none; }

	/* ============ livres ============ */
	html.livres #container #main { position: inherit; top: inherit; left: inherit; }
	html.livres #top > .inner { display: table; float: none; margin: 48px 0 0 0; width: 100%; padding: 10px 0; }
	html.livres #top > .inner > * { display: table-cell; vertical-align: top; }	
	html.livres #top > .inner .arrow { float: none; margin: 0; width: 50px; }	
	html.livres #top > .inner #thumbs { float: none; }
	html.livres #top > .inner #thumbs li { display: none; margin-right: 0; width: 100%; height: auto; text-align: center; }
	html.livres #top > .inner #thumbs li a { display: block; margin: 0 auto; width: 152px; height: 235px; }	
	html.livres #top > .inner #thumbs li a img { height: 100%; }		
	html.livres #top > .inner #thumbs li.activeSlide	{ display: block; }
	html.livres #diaporama { margin-top: 20px; }
	html.livres #diaporama .slide { width: auto; padding: 0 30px; }
	html.livres #diaporama .slide > * { float: none; margin: 0; width: auto; padding: 0; }	
	html.livres #diaporama .slide .left .couverture { display: none; }
	html.livres #diaporama .slide .left .vente { margin: 20px 0 30px 0; font-size: 16px; }
	html.livres.device-android  #diaporama .slide .left .vente { font-size: 13px; }
	html.livres #diaporama .slide .right h1 { font-size: 23px; }
	html.livres #diaporama .slide .right h1 br { display: none; }	
	html.livres #diaporama .slide .right h1 .auteur { display: block; font-size: 17px; }
	html.livres #diaporama .slide .right .desc { margin-top: 10px; font-size: 16px; line-height: 1.3em; color: #333334; }
	html.livres.device-android #diaporama .slide .right .desc { font-size: 13px; }	
	html.livres #diaporama .slide .right .cita-content { margin-top: 15px; }
	html.livres #diaporama .slide .right .cita-source { text-align: left; line-height: 1; }

	/* ============ événements ============ */
	html.evenements #montage { bottom: -150px; }
	.evenements .citation .cita-content br { content: ''; }
	.evenements .btn { position: relative; top: auto; left: auto; margin-top: 20px; }

	/* ============ renseignements ============ */
	html.renseignements #montage { bottom: -120px; }
	html.renseignements #texte > .inner { display: flex; flex-flow: column wrap; flex-direction: column-reverse; padding-top: 0; }	
	html.renseignements #texte > .inner [class*="txt"]:not(:last-child) { margin-bottom: 15px; }
	html.renseignements #texte > .inner .txt3 ul { font-size: 18px !important; }

	/* ============ acces ============ */	
	html.acces #montage { margin-left: -330px; bottom: -390px; }
	html.acces #montage .carte img { width: 90%; }	
}

@media screen AND (max-width: 320px) {

	/* ==================================== */
	/* =============== PAGES ============== */
	/* ==================================== */
	html:not(.home) .citation { padding: 10px; }
	html:not(.home) .cita-content { font-size: 16px; }

	/* ============ home ============ */	
	html.home .cita-content { font-size: 18px; }
	html.home .cita-auteur { color: #e5eab6; }
	html.home .infos-pratiques > .inner .btn { font-size: 11px; }

	/* ============ chateau ============ */	
	html.chateau .cita-content { font-size: 15px; }

	/* ============ histoire ============ */
}

/**
 *
 * IPHONE 5/SE HEIGHT
 *
*/
@media screen AND (max-height: 510px) {

	html.home #montage { bottom: -220px; }
	html.home #entrez { bottom: -80px; }	

	html.acces #texte { margin-bottom: 350px; }

}

/**
 *
 * LANDSCAPE MODE
 *
*/
@media screen AND (max-height: 414px) {

	html.home #montage { bottom: -260px; }
	html.home #entrez { bottom: -130px; }	

}

@media screen AND (max-height: 320px) {

	html.accueil .cita-content { font-size: 17px; }

}