@charset "utf-8";
/* CSS Document */

* { margin: 0; padding: 0;}

body {font-family: 'Montserrat', sans-serif;}

h1 { height: 0px; text-indent: -9999px;}

#logo { text-align: center; padding-top: 20px;}
#logo img { width: 200px;}

#slider-controls { position: absolute; color: #fff; z-index: 9999; top: 50%; width: 100%;}
#slider-controls span { width: 51px; height: 98px; display:block; text-indent: -9999px; position: absolute; opacity: 0.5;}
#slider-controls #prev { background: url(images/slider/prev.png) center left no-repeat; left: 40px;}
#slider-controls #next { background: url(images/slider/next.png) center right no-repeat; right: 40px;}
#slider-controls span:hover { cursor: pointer; opacity: 1;}
.slider-element { width: 100%; min-height: 98vh;}

.slider-ailleurs {
background: url(images/slider/ailleurs.jpg) no-repeat top center fixed;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

.slider-norge {
background: url(images/slider/norge.jpg) no-repeat top center fixed;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
  
.slider-devisement {
background: url(images/slider/devisement.jpg) no-repeat top center fixed;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
  
.slider-triptyque {
background: url(images/slider/triptyque.jpg) no-repeat top center fixed;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

#slider-texte { width: 500px; color: #fff; position: absolute; top: 50%; left: 65%;}
.slider-ailleurs #slider-texte { color: #000;}
.slider-norge #slider-texte { top: 50%; left: 50%;}
.slider-devisement #slider-texte { top: 40%; left: 20%;}
.slider-triptyque #slider-texte { color: #000; top: 25%; left: 50%;}
#slider h2 { font-weight: 700; font-size: 80px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px;}
#slider p { font-size: 20px; line-height: 30px; opacity: 0.7; font-weight: 300;}

#description { overflow: hidden; text-align: center; background:url(images/bg-intro.jpg) top right no-repeat;}
#description img { padding: 100px 0 50px 0;}
#description p { color: #515151; font-weight: 300; font-size: 18px; line-height: 32px; padding: 0 60px 100px 60px;}


#spectacles { background: url(images/bg-spectacles.jpg) center center no-repeat #f2f3f3; padding: 100px 0;}
#spectacles a { border-bottom: 1px solid #d9d9d9; display: block; padding: 20px 0; font-weight: 300; font-size: 18px; overflow: hidden; text-decoration: none; color: #000; text-align: center;}
#spectacles a:last-child { border: 0;}
#spectacles .spectacle-date { width: 240px; float: left;}
#spectacles .spectacle-date span { font-size: 50px; font-weight: 700; color: #d6cb6f;}
#spectacles .spectacle-date span span { font-size: 30px;}
#spectacles .spectacle-show { font-weight: 700; width: 350px; float: left; padding-top: 30px;}
#spectacles .spectacle-ville { font-weight: 400; width: 200px; float: left; padding-top: 30px;}
#spectacles .spectacle-theatre { font-weight: 300; width: 200px; float: left; padding-top: 30px;}
#spectacles a:hover { background: #ebde78;}
#spectacles a:hover .spectacle-date span { color: #000;}

#photos { overflow: hidden;}
#photos img { width: 25%; float: left;}

#contact { background: #2b2b2b; overflow: hidden; padding: 100px 0; color: #CCC; font-size: 18px; font-weight: 300;}
#contact h4 { text-transform: uppercase; font-size: 30px; font-weight: 300; letter-spacing: 4px; margin-bottom: 20px; color: #fff;}
#contact p { line-height: 28px;}
#contact a { color: #d6cb6f; text-decoration: none;}
#contact a:hover { color: #000; background-color: #d6cb6f;}
.social { overflow: hidden;}
.social a { padding: 60px; margin: 0 10px; display: block; float: left;}
#contact .social a:hover { background: #000;}

#logos { padding: 100px 0; overflow: hidden; text-align: center;}
#logos a { padding: 40px; display: block; opacity: 0.6;}
#logos a:hover { opacity: 1;}

.col { float: left; width: 50%;}
.div-inner { width: 1000px; margin: 0 auto;}

h3 { font-size: 40px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; text-align: center; margin-bottom: 100px;}


/* CSS TRANSITIONS
*************************/

#slider-controls span, #spectacles a, #spectacles .spectacle-date span, #contact a, .social a, #logos a {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s}


@media all and (max-width : 1500px) {
	.slider-ailleurs #slider-texte { left: 65%; width: 250px;}
}

@media all and (max-width : 1300px) {
	#slider-texte { width: 300px;}
	.slider-ailleurs #slider-texte { top: 60%; left: 50%; background: rgba(0,0,0,0.8); padding: 20px 40px; margin-left: -160px; color: #fff;}
	.slider-norge #slider-texte { top: 50%; left: 50%;}
	.slider-devisement #slider-texte { top: 40%; left: 20%;}
	.slider-triptyque #slider-texte { top: 25%; left: 50%;}
	#slider h2 { font-size: 60px; letter-spacing: 2px;}
	#slider p { font-size: 18px; line-height: 26px;}
	
	#description .col { width: 100%; float: none; background-color: rgba(255,255,255,0.8);}
}

@media all and (max-width : 1000px) {
	.div-inner { width: 92%; padding: 0 4%;}
	#logo img { width: 150px;}
	
	#slider-texte { width: 94%; bottom: 0; padding: 20px 3%; text-align: center;}
	.slider-ailleurs #slider-texte {padding: 20px 3%; width: 94%;}
	.slider-ailleurs #slider-texte { top: auto; left: 0; margin-left: 0;}
	.slider-norge #slider-texte { top: auto; left: 0;}
	.slider-devisement #slider-texte { top: auto; left: 0;}
	.slider-triptyque #slider-texte { top: auto; left: 0;}
	#slider h2 { font-size: 60px; letter-spacing: 2px;}
	#slider p { font-size: 18px; line-height: 26px;}
	
	#slider-controls { position: absolute; color: #fff; z-index: 9999; top: 50%; width: 100%;}
	#slider-controls span { width: 25px; height: 50px; display:block; text-indent: -9999px; position: absolute; opacity: 0.5;}
	
	h3 { letter-spacing: 3px; margin-bottom: 60px;}
	
	#spectacles { padding: 60px 0;}	
	#spectacles a { text-align: center;}
	#spectacles .spectacle-date { width: 100%; float: none; display:block;}
	#spectacles .spectacle-show { width: 100%; float: none; padding-top: 0; display:block;}
	#spectacles .spectacle-ville { width: 100%; float: none; padding-top: 0; display:block;}
	#spectacles .spectacle-theatre { width: 100%; float: none; padding-top: 0; display:block;}
	
	#photos img { width: 50%; float: left;}
	
	#contact {padding: 60px 0;}
	.col { width: 100%; float: none;}
	.social { margin-top: 30px;}
	.social a { padding: 20px;}
	
	#logos { padding: 60px 0;}
	#logos a { padding: 20px 0;}
	#logos a img { max-width: 100%;}
	
	#description p { padding: 0 20px 50px 20px;}
	
}

@media all and (max-height : 800px) {
	.slider-element {min-height: 800px; background-attachment:scroll;}
	#slider h2 { font-size: 40px; letter-spacing: 2px;}
	#slider-controls { top: 300px;}
}

@media all and (max-width : 800px) {
	#slider h2 { font-size: 40px; letter-spacing: 2px;}
}

@media all and (max-width : 600px) {	
	#photos img { width: 100%; float: none;}
	
	#slider h2 { font-size: 30px; letter-spacing: 1px;}
}