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

 html, body {
	height: 100%;
	margin: 0;

}

body {
	background-image: url(../images/intro.jpg);
	background-repeat: no-repeat; 
    background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
    width:100%; 
}


* { box-sizing: border-box;}

#GrandeIntro {
	height: 100%;
}
#siteWrapper {margin-top:-75px;width: 100%;}
#siteWrapper header {
	height: 75px;
	width: 100%; 
  background-color: rgba(240, 248, 255, 0.5);
	z-index: 2;
}
#siteWrapper header.fixed {position:fixed;width:100%;height:61px;top:0;left:0; background-color: rgba(154, 125, 101, 0.4);margin-top: -12px}


.social {
	padding: 5px 20px;
	font: 600 12px 'Poppins', sans-serif;
	letter-spacing: 1.5px;
    opacity: .98;
}

.construction {
	padding: 100px;
}

#container {
	padding:0 0;
	background:url(../images/portrait.jpg);
	background-attachment: fixed;
	background-size: cover;
	text-align:justify;
	min-height:500px;
	}
	

#siteWrapper header.fixed+#content {margin-top:75px}

.active {
  text-align:left;
	padding-top: 24px;
	padding-left: 40px;
	padding-right: 20%;
	font: 200 28px 'Helvetica Neu', sans-serif;
	letter-spacing: 1px;
}

.topnav .icon {
  display: none;
}
.menu {
	font: 400 17px 'Geneva', sans-serif;
	letter-spacing: 0px;
	margin:auto;
	padding-top: 29px;
	padding-left: 13px;
	padding-right: 13px;
 
}


.langues {
	font-size: 13px;
	padding: 23px 3px;
	font: 200 13px 'Helvetica Neue', sans-serif;
	letter-spacing: -1px;
	margin:auto;
}


#content {
	width:80%;
	height:auto;
	margin:auto;
	padding:30px 30px;
	font: 200 16px 'Helvetica Neue', sans-serif;
}

#facebook {
 width: 50%;
	border-bottom: 1px solid #929292;
 padding-bottom: 50px;
	}
 #insta {
 width: 50%;
	border-bottom: 1px solid #929292;
 padding-bottom: 50px;
	}
 
#news {
	border-bottom: 1px solid #929292;
	}


.transbox img {
	max-width: 400px;
	height:auto;
	float:left;
	margin: 0px 35px 35px 0px
}


.transbox {
    padding: 50px 10%;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 1;
}

.blank {
 background-color: transparent;
 height: 70px;
 width: 100%;
}

#biography {
 padding-top: 30px;
 padding-bottom: 30px;
}

#centre { 
	width: 100%;
	border-right: none;
	min-height: 5px;
 text-align: center;
 padding-top: 30px;

}

.item {
 width:40%;
 height: 220px;
 min-width: 47%;
 min-height: 157px;
 margin: 10px;
 
}

.item iframe {
 width: 100%;
}

#album {
 	width: 50%;
  float:left;
   padding: 10px;
}
.album iframe {
 width: 100%;
 margin-bottom: 30px;
}

#spotify {
 width: 100%;
 height: auto;
 float: left;
}

.spotify {
  display: flex;
 justify-content: center;
 }

#info { 
	width: 50%;
	float:left;
	border-right: 1px solid #929292;
	min-height: 210px;
 text-align: center;
 padding-right: 10%;
}

#booking {
	width:48%;
	float:left;
 text-align: center;
 padding-left: 10%;
}

#contact2 {
 min-height:200px;
 margin-bottom: 60px;
}

h1 {
	font: normal 200 16px 'Helvetica Neue', sans-serif;
    color: #666;
	border: 0px solid powderblue;
	padding: 10px 20px;
}

h2 {
	font: normal 40 17px 'Optima', sans-serif;
    color: #929292;
	border: 0px solid powderblue;
	padding: 10px 20px;
}

h3 {
	font: normal 400 26px 'Helvetica Neue', sans-serif;
    color: black;
	border: 0px solid powderblue;
	line-height:0px;
	text-align: center;
}
.contact {
	text-align: center;
	font: normal 200 16px 'Helvetica Neue', sans-serif;
}

h1 {
	font: normal 300 18px 'Helvetica Neue', sans-serif;
    color: #666;
	border: 0px solid powderblue;
	padding: 10px 20px;
}

h2 {
	font: normal 900 16px 'Poppins', sans-serif;
    color: rgb(18, 33, 61);
	border: 0px solid powderblue;
	padding: 10px 20px;
}

a:link {
	color: #9a856f;
	text-decoration: none;
}
a:visited {
	color: #9a856f;
	text-decoration: none;
}
a:hover {
	color: white;
	-webkit-transition: color 1s; /* Safari */
	-moz-transition: color 1s;
    -o-transition: color 1s;
    -ms-transition: color 1s;
    transition: color .2s;
	text-decoration: none;
}
a:active {
	color: #9a856f;
	text-decoration: none;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Le parent */
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
/* L'enfant */
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#footer {
	height: 18%;
	background-color:rgba(240, 248, 255, 1);
	margin-bottom:-20px;
	border-top: 1px solid #EBEBEB;
}

#social {
	text-align: center;
	padding: 20px 10px 0px;
}


#copyright {
	color:#999;
	text-align:center;
	font-family:"Lao Sangam MN";
	font-size:12px;
	padding: 4px 0px 4px 4px; 
}
.btn-group .button {
	background-color:transparent;
    border: none;
    color: #9a856f;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
.btn-group .button:hover {
   	color: white;
	-webkit-transition: color 1s; /* Safari */
	-moz-transition: color 1s;
    -o-transition: color 1s;
    -ms-transition: color 1s;
    transition: color .2s;
	text-decoration: none;
}

.cadre {
 border: 1px solid #929292;
 padding: 10px 20px;
}

.topnav {
  overflow: hidden;
  padding-right: 20px;
}

.topnav a {
  float: left;
  display: block;
  color: #32130e;
  text-decoration: none;
}

.topnav a:hover {  
	color: white;
	-webkit-transition: color 1s; /* Safari */
	-moz-transition: color 1s;
    -o-transition: color 1s;
    -ms-transition: color 1s;
    transition: color .2s;
	text-decoration: none;
}





@media screen and (max-width: 768px) {
	.active {
	padding-right: 20px;
	}
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
	padding-top:17px;
    float: right;
    display: block;
  }
  .active {
  color: white;
  text-align:left;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 20px;
	padding-right: 0px;
	font: 200 23px 'Helvetica Neue', sans-serif;
	letter-spacing: -1px;
}
}


@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
	  padding-right: 20px;
	  padding-bottom: 20px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
 #footer {
	height: 10%;
	margin-bottom:-10px;
}

#siteWrapper {margin-top:-60px;width: 100%;}
#siteWrapper header {
	height: auto;
	width: 100%;
	background-color: rgba(240, 248, 255, 0.9);
	color: #666;
	z-index: 2;
}
#siteWrapper header.fixed {position:fixed;width:100%;top:0;left:0;}

	body {;
	background-image: url(../images/intromobile.jpg);
	background-repeat: no-repeat; 
    background-attachment: scroll;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
    width:100%; 
}

#container {

 	background:url(../images/portraitmobile.jpg);
 background-attachment: fixed;
 	background-repeat: no-repeat; 
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



#content {
 

	width:100%;
	height:auto;
	margin:auto;
	padding:30px 30px;
	font: 200 16px 'Helvetica Neue', sans-serif;
}

.contact {
	text-align: center;
	font: normal 200 12px 'Helvetica Neue', sans-serif;
}

h1 {
	font: normal 300 14px 'Helvetica Neue', sans-serif;
    color: #666;
	border: 0px solid powderblue;
	padding: 10px 20px;
}

h2 {
	font: normal 900 12px 'Poppins', sans-serif;
    color: rgb(18, 33, 61);
	border: 0px solid powderblue;
	padding: 10px 20px;
}


.transbox img {
	width: 100%;
	min-height:60px;
	float:left;
	margin: 0px 35px 35px 0px
}

.acheter  {
	width: 100%;
	min-height:60px;
text-align: center;
margin: 0px 35px 35px 0px
}

#info { 
	width: 100%;
	float:left;
	border-right: none;
	border-bottom: 1px solid #929292;
	min-height: 100px;
 text-align: center;
 padding-right: 0%;
}


#booking {
	width:100%;
	float:left;
 text-align: center;
 padding-left: 0%;
 padding-bottom: : 30px;
}
.social {
	padding: 5px 10px;
	font: 500 10px 'Poppins', sans-serif;
	letter-spacing: 0px;
    opacity: .98;
}
	
#copyright {
	color:#999;
	text-align:center;
	font-family:"Lao Sangam MN";
	font-size:8px;
	padding: 4px 0px 10px 4px; 
}


}
/* CSS Document */