/* COULEURS */
h1 {background-color: transparent;}
.header {border-right-color: #efeb6f;}
.inside {background-color: #efeb6f;}
.horizontal-line {border-bottom-color:  #efeb6f;}
.repli {color: #b73c4e;}
#loadAll > span {background-color: white;}
#caption {background-color: white;}
.endOfFest span {background-color: white;}
.complet {color: red;}
.detail a {color: black;}
/************/

body {padding-bottom: 2em; font-family: "Lucida Grande",sans-serif; font-size: 90%; background: #fdf8e8 url("../img/theme/vu-programme-tgcmc-1024px.jpg") no-repeat 100% top; background-attachment: fixed; background-size: contain;}
#content {width: 100%; max-width: 1024px;}
#logo {float: left; margin-left: 2%;}
h1, h2, h3, h4, p, hr, .header, .horizontal-line, article {padding: 0; margin: 0; border: 0;}
h1 {font-size: 2em; margin-left: 2%; padding-top: 1.6em; padding-bottom: 10px; clear: left;}
h1.first-title {padding-top: 0.6em;}
h1 > span {font-size: smaller;}
h2 { font-size: 1.4em;}
h3 {font-size: 1.4em; font-weight: normal;}
.header {width: 20%; padding-bottom: 1em; border-right-width: 2px; border-right-style: solid;}
h4 {font-size: 1.4em; text-align: right; margin-right: 37%; padding-top: 1em;}
.nextshows {text-align: center; margin-top: 3em; padding-right: 5px; background-color: transparent; font-size: 1rem; color: #282627;}
.nextshows a {color: #282627;}
p {font-size: 1.2em;}
.horizontal-line {border-bottom-width: 2px; border-bottom-style: solid; display: block; float: left; width: 35%; margin-left: 65%; height: 2px; margin-top: -1em; text-align: right; line-height: 2;}
.detail {padding: 0.4em 0;}
.detail a {font-size: 0.9em;}
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.fin {font-style: italic; padding-top: 0.2em;}
article {opacity: 0.9;}
.inside {width: 78%; margin-top: 0; margin-left: 12%; padding: 10px 15px; border-radius: 12px;}
.texte{display: none; padding: 0.4em 0 0.2em 4%;}
.lieu {padding-top: 0.3em; font-size: 1.3em;}
.location {width: 20px;}
.lieu-texte, .repli-texte {padding-left: 1.5%;}
.repli-heure {padding-left: 4%;}
.plan {cursor: pointer;}
.icone-plan {width: 20px; padding-top: 0.3em;}
.plan-texte {padding-left: 1.5%; text-decoration: underline;}
.repli {font-size: 1em; padding-top: 0.4em;}
#arrow {margin-left: 50%; transform: translate(-50%, 0); max-width: 50px;}
#fleche {width: 100%; margin-top: 2em;}
#loader {width: 32px; margin-top: 1.6em; margin-left: 8px; display: none;}
#loadAll {font-size: 1.1em; text-align: center; padding-top: 2em; cursor: pointer; text-decoration: underline;}
#loadAll > span {padding: 2px 5px;}
#mask {position: fixed; z-index: 1000; width: 100%; height: 100%; min-height: 100vh; top:0; left:0; background-color: black; opacity: 0.4;}
#img-loader {position: fixed; z-index: 1001; top: 20%; margin-left: 50%; transform: translate(-50%, 0); max-width: 64px;}
#lightbox {position: fixed; z-index: 1002; overflow-y: auto; top: 0; left: 0; padding: 0; cursor: pointer;}
#img-container {position: fixed; z-index: 1003; width: 100%; overflow-y: auto; top: 0; margin-left: 50%; transform: translate(-52%, 0); max-width: 768px; max-height: 100%;}
#img-container img {padding: 0; margin: 0; border: 0;}
#caption {width: 100%; font-size: 1em; text-align: center; padding: 0; margin: 0;}
.endOfFest {text-align: center; line-height: 3em;}
.endOfFest span {padding: 0.2em 0.5em;}

/* iPad */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
	body {background-image: none;}
	article {opacity: 1;}
	.header {width: 25%;}
	h4 {margin-left: 30%;}
	.horizontal-line {}
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
	body {background-image: none;}
	article {opacity: 1;}
	.header {width: 25%;}
	h4 {margin-left: 30%;}
	.horizontal-line {}
}

/*@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
	.header {width: 100px; padding-top: 1em; padding: 0.5em;}
	h4 {margin-left: 25%; text-align: left;}
	.horizontal-line {}
}*/

/* iPhone 5 & 5S */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
	body {background-image: none;}
	article {opacity: 1;}
	#logo {width: 100px;}
	h1 {font-size: 1.8em}
	.header {width: 35%;}
	h4 {margin-left: 12%;}
	/*.plan:before {content: "\A"; white-space: pre;}*/
	.plan-texte {padding-left: 2%;}
	.icone-plan {width: 25px; margin-top: 0.3em; margin-left: 0;}
}

/* iPhone 6 & 7 */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
	body {background-image: none;}
	article {opacity: 1;}
	h2, h3 {font-size: 1.2em;}
	#logo {width: 120px;}
	.header {width: 30%;}
	h4 {margin-left: 15%;}
	/*.plan:before {content: ""; white-space: normal;}*/
	.plan-texte {padding-left: 2%;}
	.icone-plan {width: 20px; margin-top: 0;}
}

/* iPhone 6 plus & 7 plus */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
	body {background-image: none;}
	article {opacity: 1;}
	.header {width: 25%;}
	h4 {margin-left: 30%;}
}