/*Theme Name: Christian Lumière
Autor: Thierry Caizes
Author URI: http://www.thierrycaizes.com
Description: Thème personalisé;
Version: 1.0;
/*


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	color: white;
	font-family: 'montserrat';
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@font-face{
font-family: 'montserrat';
src: url(font/montserrat/Montserrat-Regular.ttf);	
}

p{
font-size: 14px;
line-height: 24px;	
}

a{
text-decoration: none	
}


h1, h2, h3, h4{
font-size: 23px;
text-transform: uppercase; 
letter-spacing: 2px  
}


/*MENU*/

#menu-burger{
width: 43px;
height: 43px;
background: #535353;
border-radius: 61%;
position: fixed;
top: 50px;
right: 5%;
cursor: pointer;
z-index: 200;
}
#menu-burger .burger {
display: block;
height: 2px;
width: 18px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-left: -9px;
margin-top: -1px;
}

#menu-burger .burger:after {
  content: '';
  display: block;
  height: 2px;
  width: 18px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -9px;
  margin-top: -5px;
  transition: 570ms;
}

#menu-burger .burger:before {
  content: ' ';
  display: block;
  height: 2px;
  width: 18px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -9px;
  margin-top: 3px;
  transition: 570ms;
}

#menu-burger .burger.open:before{
  transform: rotate(45deg);
  margin-top: -1px;
  background: #000;
}

#menu-burger .burger.open:after{
  transform: rotate(-45deg);
  margin-top: -1px;
  background: #000;
}

#menu-burger.open {
  background: #fff;
}

#menu-burger .burger.open {
  background: #fff;
}

#menu-nav {
  position: fixed;
  background: #080808;
  height: 100%;
  width: 35%;
  z-index: 100; 
  right: -100%;
  transition: 570ms;
}

#menu-nav.open {
  right: 0%;
}

#menu-nav ul { 
    right: 19px;
    transform: translateY(-50%);
    font-size: 32px;
    text-align: center;
    margin-top: 50vh;
}

#menu-nav li ul {
  display: inline-block;
  margin: auto;
  height: 100%;
}

#menu-nav ul li {
  position: relative;
  color: #fff;
  margin-bottom: 20px;
 
}

#menu-nav  a {
  color: white;
}


#menu-nav li {
font-weight: initial;
display: block;
font-size: 22px
}

#menu-nav li:hover {
opacity: 0.5
}


#menu-nav ul {
float: initial;
right: initial;
}

.title-menu{
position: relative;
top: 34px;
font-size: 15px;
opacity: 0.5;  
}


/*ACCUEIL*/

.clearfix::after{
content:'';
clear: both;
display: block;	
}

.header-home{
height: 100vh;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background-repeat: no-repeat;
}

.bouton-scroll{
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;	
}

.bouton-scroll img{
width: 33px;
cursor: pointer;
}

.titre-home{
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}

.titre-home h1{
font-family: 'montserrat';
color: white;
font-size: 80px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 3px;
margin-bottom: 9px;
}
}


.titre-home h2{
font-size: 27px;
letter-spacing: 1px;
text-transform: uppercase;
}


/*PRESENTATION*/

.present-home{
background-color: black;
padding-bottom: 181px;
padding-top: 181px;
}

.container-present{
max-width: 1200px;
margin: auto;
}

.edit-present{
float: left;
width: 50%;
}

.edit-present h3{
color: #c9c9c9;
margin-bottom: 19px; 
}

.edit-present img{
position: relative;
left: 6%;	
}



/*PARC LUMIERES HOME*/

.parc-lumieres{
background: #0e0e0e;	
}

.parc-lumieres {
padding-top: 107px;
padding-bottom: 107px;
padding-left: 17px;
padding-right: 17px;
}

.edit-parc-lumiere h3{
margin-bottom: 64px;
font-size: 19px
}

.container-parc-lumieres{
margin: auto;
text-align: center;
}

/*PARC LUMIERES PAGE*/


.photo-parc{
background-repeat: no-repeat;
width: 50%;
height: 572px;
position: relative;
display: table;	
float: left;
}

.section-parc{
background: #252424;
height: 572px;	
}

.block-parc{
width: 50%;
height: 100%;
position: relative;
display: table;
float: right;
padding-top: 133px;
}

.container-parc{
max-width: 675px;
margin: 0 auto;	
}

.info-parc{
max-width: 621px;
width: 100%;
margin: 0 auto;	
}

.info-parc h1{
color: #c9c9c9;
margin-bottom: 19px;  
}


.realisation{
background: #0c0c0c;	
}

.realisation-parc{
padding-left: 17px;
padding-right: 17px;
padding-top: 142px;
padding-bottom: 142px;
text-align: center;
}

.realisation-parc h2{
margin-bottom:87px;
font-size: 25px;
color: #c9c9c9;  
}



/*PROJET VIDEO*/

.video-projet{
background: #0e0e0e	
}

.video{
padding-top: 85px;
padding-bottom: 85px;
padding-left: 17px;
padding-right: 17px;
text-align: center;
}

.video h1{
font-size: 32px;
color: #c9c9c9;
margin-bottom: 47px; 
}


/*REALISATION*/

.header-realisation{
height: 426px;
background-attachment: fixed;
background-repeat: no-repeat;
}

.section-realisation{
background: #252424;	
}

.realisation-carrouselle{
max-width: 890px;
margin: auto;
width: 50%;
padding-bottom: 54px;
padding-top: 54px;
}

.realisation-photo h1{
font-size: 23px;
padding-bottom: 5px;
text-transform: uppercase;
margin-bottom: 19px
}

.demo-realisation{
background: black;
}

.demo-container{
padding-top: 181px;
padding-bottom: 181px	
}

/*FOOTER*/

.footer{
background: #161616;
padding-bottom: 73px;
padding-top: 73px;	
text-align: center;
}

.footer h4{
text-transform: uppercase;
color: #a2a2a2;
margin-bottom: 20px;
font-size: 21px;
}

.footer span{
line-height: 27px;
font-size: 13px;
color: #a2a2a2;	
}

.footer img{
width: 18px;
opacity: 0.8;
}	

/* 404 ERROR*/

.erreur{
background: black;
height: 100vh; 
}

.erreur-container{
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
text-align: center;
font-size: 109px;
line-height: 153px;
}

.erreur p{
font-size: 20px  
}


/*MENTIONS LEGALES*/

.mentions-légales{
background: black;
}

.mentions{
padding-top: 45px;
padding-bottom: 45px;
padding-left: 17px;
padding-right: 17px;
}

.mentions-container h1{
font-size: 29px;
margin-bottom: 39px;
text-transform: uppercase;  
}

.mentions-container h2{
font-size: 19px;
margin-bottom: 11px; 
}


@media only screen and (max-width:1600px){
.info-parc{
width: 80%;
}
}

@media only screen and (max-width:1280px){



p {
font-size: 14px;
line-height: 24px;
}

#menu-nav {
width: 50%;
}

.titre-home h1{
font-size: 64px;
margin-bottom: 11px;
}


.edit-present {
float: initial;
width: initial;
text-align: center;
}

.edit-present img {
left: initial;
}


.photo-present{
text-align: center;
margin-top: 69px;
}

.present-home {
padding-bottom: 83px;
padding-top: 83px;
text-align: center;
}

.parc-lumieres  {
padding-bottom: 83px;
padding-top: 83px;
text-align: center;
}


.section-parc {
padding-top: 96px;
padding-bottom: 96px;
height: initial;
text-align: center;
}

.realisation-parc {
padding-top: 96px;
padding-bottom: 96px;
}


.photo-parc {
background-image: url(images/photo-parc.png);
background-repeat: no-repeat;
width: 100%;
float: initial;
height: 322px;
}

.container-parc {
max-width: 1200px;
margin: auto;
width: 71%;
}

.container-parc-lumieres {
margin: auto;
text-align: center;
}

.realisation-carrouselle {
width: 71%
}

.block-parc{
width: 100%;
height: initial;
float: initial;
padding-top: initial;
margin: auto;
}

.info-parc {
max-width: initial;
margin: initial;
width: initial;
}

.realisation{
text-align: center;
}

.section-realisation {
text-align: center;
}

.demo-realisation {
text-align: center;
}

.video{
text-align: center;	
}

.video-projet {
text-align: center;
}

.photo-parc {
display: none;
}
}



@media only screen and (max-width:1024px){
.titre-home h1{
font-size: 56px;
}

.titre-home h2 {
font-size: 24px;
}

.edit-present img {
width: 418px;
}
}

@media only screen and (max-width:800px){
.titre-home h1{
font-size: 42px;
}

.titre-home h2 {
font-size: 22px;
letter-spacing: initial;
}

.video h1 {
font-size: 30px;
}
}

@media only screen and (max-width:768px){

h1, h2, h3, h4{
font-size: 19px 
}

p {
font-size: 13px;
line-height: 22px;
}

#menu-nav {
width: 100%;
}


.container-present {
width: 71%;
}


.footer span {
line-height: 24px;
font-size: 13px;
}


.footer h4 {
margin-bottom: 17px;
}


.realisation-carrouselle {
padding-bottom: 108px;
padding-top: 108px;
width: 71%
}



.header-realisation {
display: none;
}

.erreur-container {
font-size: 86px;
}
}

@media only screen and (max-width:736px){

.parc-lumieres {
padding-bottom: 51px;
padding-top: 51px;
}

.present-home {
padding-bottom: 51px;
padding-top: 51px;
}

.section-parc {
padding-top: 51px;
padding-bottom: 51px;
}

.realisation-parc {
padding-top: 51px;
padding-bottom: 51px;
}

.realisation-parc h2 {
font-size: 20px;
}

.video h1 {
font-size: 28px;
}

.titre-home h1{
letter-spacing: 1px;
line-height: 49px;
}


.titre-home h2 {
font-size: 19px;
}

.video {
padding-top: 51px;
padding-bottom: 51px;
}

.edit-present img {
width: 333px;
}


.realisation-carrouselle {
padding-bottom: 51px;
padding-top: 51px;
}

.erreur-container {
font-size: 68px;
line-height: 96px;
}

.erreur p {
font-size: 16px;
}

.footer{
background: #161616;
padding-bottom: 51px;
padding-top: 51px;  
text-align: center;
}
}



@media only screen and (max-width:480px){
.titre-home h2 {
font-size: 17px;
}

.container-present {
width: 80%;
}

.video h1 {
font-size: 27px;
}
}


@media only screen and (max-width:384px){
.edit-present img {
width: 251px;
}

.erreur-container {
font-size: 55px;
line-height: 72px;
}

.erreur p {
font-size: 14px;
}

.video h1 {
font-size: 25px;
}
}

@media only screen and (max-width:360px){
.edit-present img {
width: 227px;
}
}