@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.4);
	z-index: 2;
}
#siteWrapper header.fixed {
	position:fixed;
	width:100%;
	height:75px;
	top:0;
	left:0;
  background-color: rgba(63, 119, 127, 0.6);
	margin-top: 0px;
	background-repeat: no-repeat; 
    background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

.logo {
height:60px;
margin: 5px 600px 5px 50px;
}

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

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


#container {
	padding:0 0;
	background:url(../images/fond2.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 'Futura', sans-serif;
	letter-spacing: 0px;
	margin:auto;
	padding-top: 29px;
	padding-left: 13px;
	padding-right: 13px;
 
}


.langues {
 text-align: right;

}


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

 
#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;
}

#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 200 14px 'Helvetica Neue', sans-serif;
    color: #666;
	border: 0px solid powderblue;
	line-height:0px;
}
.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: #fca9d4;
	text-decoration: none;
}
a:visited {
	color: #fca9d4;
	text-decoration: none;
}
a:hover {
	color: #fca9d4;
	-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: #fca9d4;
	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(63, 119, 127, 0.7);
	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: #666;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
.btn-group .button:hover {
   	color: #fca9d4;
	-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: #FFF;
  text-decoration: none;
}

.topnav a:hover {  
	color: #fca9d4;
	-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: 1600px) {
.logo {
height:60px;
margin: 5px 400px 5px 50px;
}
}

@media screen and (max-width: 1400px) {
.logo {
height:60px;
margin: 5px 200px 5px 50px;
}
}

@media screen and (max-width: 1200px) {
.logo {
height:60px;
margin: 5px 100px 5px 50px;
}
}
@media screen and (max-width: 1000px) {
.logo {
height:60px;
margin: 5px 30px 5px 40px;
}
}


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

@media screen and (max-width: 800px) {
  .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;
}


.menu {
 background-color: rgba(19, 51, 50, 0.8);
}
.reseaux {
visibility: hidden;
}


  .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:-60px;
}
#siteWrapper {margin-top:-70px;width: 100%;}
#siteWrapper header {
	height: 70;
	width: 100%;
 background-color: rgba(240, 248, 255, 0.8);
	color: #666;
	z-index: 2;
}
#siteWrapper header.fixed {position:fixed;width:100%;top:0;left:0;background-color: rgba(63, 119, 127, 0.7)}


	body {;
	background-image: url(../images/bio.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/bio.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:10px 10px;
	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 {
    padding: 5% 5%;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 1;
}

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

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

.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 */