/* Mini-reset */ 

body {
	margin: 0;
    max-width: 2500px; 
}

h1, h2, h3, h4 {
    margin: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    font-weight: normal;
}


a {
	text-decoration: none;
	color: unset;
}

div, a {
	font-family: "Muli", sans-serif; 
	font-size: medium; 
	line-height: 2; 
	text-align: justify;
	font-weight: 200; 
	color: #717171; 
}

blockquote {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

button {
	font-family: "Muli", sans-serif; 
	font-size: medium; 
	line-height: 2; 
	text-align: justify;
	background-color: transparent;
	border: 1px solid; 
	padding: 10px; 
	margin: 10px;
	text-transform: uppercase;
	margin-left: 50%; 
	transform: translateX(-50%);
	text-align: center;
	cursor: pointer;
}



.section-title {    
	text-transform: uppercase;
    color: #525252;
    font-family: 'Muli', sans-serif;
    text-align: center;
    padding: 60px 0 45px 0; 
}




/* Header */ 


header {
	height: 250px; 
	position: relative;
}

#hero-image {
	height: 100%; 
}


.TopToBottom_gradient:before {
	content: " "; 
	position: absolute;
	height: 30%; 
	width: 100%; 
	left: 0; 
	top: 0; 
	display: inline-block;
	background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.4)));
	background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */
}


.bottomToTop_gradient:after {
	content: " "; 
	position: absolute;
	height: 30%; 
	width: 100%; 
	left: 0; 
	bottom: 0; 
	display: inline-block;
	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.4)));
	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */
}





/* Main navigation */ 

nav {
	text-transform: uppercase;
	padding-top: 10px; 
	position: fixed;
	display: block;
	right: 0; 
	top: 0;     
    width: 100%;
}

nav a {
	color: #FFF;
	font-family: 'Oswald';  
}

nav ul {
    flex-direction: column;
    width: 80%;
    margin: 0; 
    text-align: left;
}

.nav-notDisplay {
    display: none;
}

.nav-toDisplay {
	float: right;
}

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

	nav ul {
		list-style: none;
		margin: 0 10px 0 0; 
		float: right;
		display: block;
		width: auto;
	}

	.nav-notDisplay {
    	display: list-item;
	}
}

nav ul li {
	display: list-item;
	padding: 0; 
}

nav > ul li a {
	font-size: large; 
}


nav ul li:hover {
	font-weight: 400; 
}

nav ul li a:hover {
	font-weight: 400; 
}

li ul {
	position: absolute; padding: 0; 
	display: block;
	padding-bottom: 10px; 
	transition: opacity 0.3s ease-in-out; 
}

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

	li ul {
		display: none; 
		opacity: 0; 
	}
}

li ul li {
	padding-top: 0; 
	padding-bottom: 0; 
	padding-left: 20px; 
	line-height: 1.25; 
	border: none;
}

li ul li a {
	padding-top: 0; padding-bottom: 0; line-height: 1; font-size: 2.5vh; 
}

#toggle-nav {
	position: absolute;
	margin-bottom: 0; 
	top: 0; 
	left: 0; 
	color: #FFF; 
	margin-left: 0; 
	transform: translate(0);
	border: none;
}

/* Top navigation - later included- to mingle with provious */ 


#navigation {
  transition: all 0.4s ease; 
  z-index: 30; 
}


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

  .onTop:hover {
    background-color: rgba(0,0,0,0.3);
  }


  li ul li {
	padding-left: 10px; 
  }
}

.onTop {
  height: 40px; 
  opacity: 1; 
  background-color: transparent;
  padding-bottom: 30px; 
}

.onTop li {
  color: #FFF; 
}

.onTop svg {
	stroke: #FFF;
	stroke-width: 5; 
}
.onScroll {
  height: auto; 
  padding-bottom: 0px; 
}


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

  .onScroll {
  padding-bottom: 10px; 
}}


.onScroll li {
  color: #000; 
}

.onScroll a {
  color: #000;  
}


#nav-contact a {
  border: 1px solid; 
  border-radius: 15px; 
  padding: 5px 10px; 
}

.onTop #nav-contact {
  border-color: #FFF; 
}

.onScroll #nav-contact {
  border-color: #000; 
}

.onColor {
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid #CDCDCD; 
}


.onWhite {
  background-color: rgba(255, 255, 255, 0.8); 
  border-bottom: 1px solid #CDCDCD; 
}



.nav-notDisplay {
  display: none;
}

.nav-notDisplay ul {
  list-style: none;
  position: relative;
  display: none;
  opacity: 0; 
}



nav > ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0 0 0 20%;
    -webkit-padding-start: 0;
}


#navigation-ul {
  margin-top: 30px; /* à rendre dynamique */ 
}

nav ul li {
  text-align: left;
}

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

  #navigation-ul {
  margin-top: 0; /* à rendre dynamique */ 
}

  nav ul {
    margin: 0 10px 0 0; 
    float: right;
    flex-direction: row;
    width: auto;
  }

  .nav-notDisplay {
      display: list-item;
    padding: 0 10px; 
  }

  .nav-notDisplay ul {
      display: none;
      position: absolute;
      left: 0; 
    opacity: 1;
    position: absolute;
    flex-direction: column;
    padding-left: 0.5vw;
  }

}


#toggle-nav {
  position: absolute;
  left: 100%; 
  transform: translate(-120%);
  transition: all 1s ease; 
  display: flex;
  font-size: large; 
}


.onTop #toggle-nav {
  color: #FFF; 
}

.onScroll #toggle-nav {
  color: #000; 
}

#toggle-nav span {
  margin-right: 10px; 
}

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

  #toggle-nav {
    display: none;
  }
}

nav > ul li {
  cursor: pointer;
  font-family: 'Oswald'; 
  font-size: large; 
}

#cross ,
.onTop #cross , 
.onScroll #cross {
  stroke: #FFF; 
}

.onMenu {
  color: #FFF;  
  background-color: rgba(0,0,0,0.7);
  stroke: #FFF;
  padding-bottom: 10px; 
}

.onMenu a {
  color: #FFF ; 
}

.onMenu svg {
  stroke: #FFF ; 
}



/* Site branding */ 


.site-branding {
	position: absolute;
	z-index: 12; 
	bottom: 30px; 
	left: 20px; 
	text-transform: uppercase; 
	color: #FFF; 
}


.site-title {
	font-size: x-large; 
	font-weight: 700;  
	line-height: 1; 
	color: #FFF; 
	text-align: left;
}


.site-description {
	font-size: large; 
	line-height: 1; 
	color: #FFF; 
	text-align: left;
}

.site-description:first-letter {
	font-size: x-large; 
	font-weight: 700; 
}




/* Footer */ 



footer {
	background-color: #FFF; 
	padding-top: 30px;
}

.callToAction {
	background-color: #db8014;
	padding: 50px 0;  
	color: #000	
}


.callToAction-title {
	font-size: large; 
	color: orange;
	color: #FFF; 
	padding-bottom: 25px; 
}

.callToAction-text {
	color: white; 
	font-weight: 400; 
	padding: 0vh 10%; 
	font-size: medium;
}

.callToAction button {
	padding: 10px 20px;
	font-size: large;
	margin-top: 40px; 
	margin-bottom: 40px;
	border-width: 2px; 
	color: white; 
}

#mentions-legales {
	padding: 40px 10%; 
	background-color: #252525; 
	color: #FFF; 
	margin-top: 30px; 
}

#mentions-legales_title {
	font-size: medium;
	color: #FFF;
}

#mentions-legales_subContainer {
	font-size: small;
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	color: #FFF; 
}

#mentions-legales_subContainer ul {
	list-style: none;
}

#mentions-legales_subContainer li {
	line-height: 1; 
	padding: 0; 
}


	


/* Article pages style */ 


#section1Single {
	padding-left: 30px; 
	padding-right: 30px
}


@media screen and (min-width: 1000px) {
#section1Single {
	padding-left: 70px; 
	padding-right: 70px
}

.pageHeader {
	height: 200px; 
	position: relative;
}

.article {
	color: #535353; 
	padding: 30px; 
}

.article-content {
	font-weight: 400; 
	font-size: medium;
}





/* Content */ 

#gallery_container, .small, .big {
  transition: all 0.5s ease; 
}