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

/*html::before {
  content: ' ';
  display: block;
  background-image: url('../img/accueil.jpg');
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10;
}*/
/*
* {
  box-sizing: border-box;
}*/

body{
	margin: 0;
	padding: 0;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
	overflow-x: hidden;
}

h1 {
	font-family:"Arvo";
	font-weight:normal;
	font-size: 55px;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0;
}

h2 {
	font-family:"Bitter";
	font-weight: normal;
	font-size: 40px;
	text-align: center;
	color: #333;
	margin: 0;
	padding: 0;
}

h3 {
	font-family: "Oswald";
	font-weight: normal;
	font-size: 16px;
	text-align: center;
	margin: 5px 0;
	padding: 0;
	z-index: 1;
	position: relative;
}

h4 {
	font-family: "Oswald";
	font-weight: normal;
	font-size: 1em;
	text-align: center;
	margin: 5px 0;
	padding: 0;
	z-index: 1;
	position: relative;
}

iframe {
	float:left;
	margin : 3px;
}

.center { margin: 0 auto; }
.content{ margin: 0 auto; width: 75%; }
.clear { clear: both; }

.content a {
	text-decoration: none;
	color: #2daae8;
}
.content a:hover { text-decoration:underline; }

#header {
	width: 100%;
	height: 80px;
	position: fixed;
	margin-top: 0px;
	z-index:100;
}

#logo1 {
	background-image: url(../img/deboussole-lettrage-blanc.svg);
	background-size: contain;
	background-repeat: no-repeat;
	height: 100px;
	width: 600px;
	top: 40px;
	left: 20px;
	position: fixed;
	opacity: 0.7;
}
#logo1 a { color: #fff; text-decoration: none; float: left; font-size: 30px; margin-top: 20px; color: #fff; font-family:"Wellfleet"; font-weight: bold;}

#logo { color: #FDD900; font-size: 80px; margin: -50px 0 0 -55px; font-family:"Bitter"; font-weight: bold; position:fixed; opacity: 0.7;}
#souslogo { color: #EEE; font-size: 27px; font-family:"Bitter"; font-weight: bold; position:fixed; opacity: 0.7;  margin: 50px 0 0 -50px; }

/*#xplose {
	background-image: url(../img/xplose300.png);
	background-repeat: no-repeat;
	height: 100px;
	width: 300px;	
	position: fixed;
	margin: 120px 0 0 -85px;
}*/

#ft {
	background-image: url(../img/logo-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
	height: 136px;
	width: 200px;
	bottom: 0px;
	right: 20px;
	position: fixed;
	opacity: 0.4;
}

 #photoFranck {
	background-image: url(../img/FranckTira_600.jpg);
	background-repeat: no-repeat;		
	float:left;
	width:600px;
	height:490px;
	margin: 0 25px 80px 25px;
 }

#disco {
	float:left;
	margin:97px 30px 0 5px;
}

.merch_vgn {
	height: 213px;
	width: 280px;
	float:left;
	margin: 0 10px 100px 0;
}

#album1 {
	background-image: url(../img/album1_vgn.jpg);
	background-repeat: no-repeat;		
	height: 213px;
	width: 200px;
	float:left;
	margin: 0 10px 0 0;
}
#album2 {
	background-image: url(../img/album2_vgn.jpg);
	background-repeat: no-repeat;		
	height: 213px;
	width: 200px;
	float:left;
	margin: 0 10px 0 0;
}
#album3 {
	background-image: url(../img/album3_vgn.jpg);
	background-repeat: no-repeat;		
	height: 213px;
	width: 200px;
	float:left;
	margin: 0 10px 0 0;
}
#single1 {
	background-image: url(../img/orfeo_vgn.jpg);
	background-repeat: no-repeat;		
	height: 213px;
	width: 213px;
	float:left;
	margin: 0 10px 0 0;
}
#livre1 {
	background-image: url(../img/livre_vgn.jpg);
	background-repeat: no-repeat;		
	height: 213px;
	width: 278px;
	float:left;
	margin: 60px 10px 0 0;
}

#shop1, #shop2, #shop3, #shop4, #shop5 {
	position:relative;
	top:220px;
}

#backnav {
	width: 100%;
	margin-top: 0px;
	background-color: #CCC;
	height: 40px;
	opacity: 0.5;
}

/*#nav { width: 660px; float: right; margin-top: 20px; }*/
#nav { 
	width: 100%;
	margin-top: 0px;
	height: 40px;
}

#nav ul{
	list-style: none;
	display: block;
	/*margin: 0 auto;*/
	margin: 0 20px;
	list-style: none;
	float: right;
}
#nav li{
	margin-top: 9px;
	float: left;
	padding-left: 21px;
}
#nav li a { color: #222; opacity:0.95; font-size: 16px; text-decoration: none; font-family: 'Wellfleet'; }
#nav li a.active { color: #222; opacity:1; border-bottom: 2px solid #222; }
#nav li a:hover { color: #222; opacity:1; }

#nav a { 
	color: white;
	font-family: sans-serif;
}
#nav a#pull { display: none; }

.quotes {
	font-family: 'Goudy Bookletter 1911', serif;
	font-weight: normal;
	font-size: 24px;
	text-align: left;
	margin: 50px auto;
}

.author_name_white { font-family:"Wellfleet"; margin: 70px 0 0 75px; color: #fff; font-size: 20px; } 
.author_name_gray { font-family:"Wellfleet"; margin: 70px 0 0 75px; color: #94a4a4; font-size: 20px; } 
.quotes_container { width: 100%; margin: 0 auto; }
#divider { background: url('../img/divider.png')no-repeat; width: 300px; height: 35px; margin: 0px auto 27px auto; }

#slide1, #slide2{ width: 100%; height:100%}
#slide1{
	background:url('../img/accueil2.jpg') 50% 0 no-repeat fixed;
	color: #fff;
	height: 700px;
	margin: 0;
	padding: 200px 0 0 0;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover;
}

#slide2{
	/*background-color: #BFAE83;*/
	color: #333333;
	height: auto;
	overflow: hidden;
	padding: 120px 0 0 0;
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../img/fond.jpg);
	background-repeat: repeat;
	background-position: center 0;
}
#slide2 .content {
	float:left;
}
#sbg2 {
	/*background-color: rgba(204,153,102,0.4);
	padding: 150px 0;*/
}

#slide3{
	color: #444;
/*	height: 600px;*/
	height: auto;
	/*padding: 10px 0 ;*/
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../img/fond.jpg);
	background-repeat: repeat;
	background-position: center 0;
}
#sbg3 {
	background-color: rgba(102,102,102,0.1);
	padding: 150px 0;
}

#slide4{
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../img/fond.jpg);
	background-repeat: repeat;
	background-position: center 0;
	color: #333333;
	height: auto;
	/*padding: 150px 0;*/
}
#sbg4 {
	/*background-color: rgba(51,51,255,0.1);*/
	padding: 150px 0;
}

#slide5{
	/*background: url('../img/slide5.jpg') 50% 0 no-repeat fixed;*/
	height: auto;
	margin: 0 auto;
	padding: 150px 0;
	color: #666;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../img/fond.jpg);
	background-repeat: repeat;
	background-position: center 0;
}
#slide4 .content, #slide5 .content {
	width:95%;
}
#sbg5 {
	background-color: rgba(95, 134, 196, 0.1);
	padding: 150px 0;
}

#slide6{
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../img/fond.jpg);
	background-repeat: repeat;
	background-position: center 0;
	color: #333333;
	height: auto;
}
#sbg6 {
	background-color: rgba(153,153,153,0.1);
	padding: 100px 0;
}

#slide3 table {
	padding : 3px;
	background-color:#3B1E1A;
	opacity: 0.7;
}
#slide6 table {
	padding : 3px;
	background-color:#5F4224;
	opacity: 0.7;
}

#slide6 td, #slide6 th {
	font-family: "Oswald";
	font-weight: normal;
	font-size: 1.2em;
	padding:3px 8px;	
}

#slide7{
	/*background: url('../img/fond_contact.jpg') 50% 0 no-repeat fixed;*/
	background-color: #666666;
	height: auto;
	margin: 0 auto;
	padding: 80px 0;
	color: #111;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../img/fond.jpg);
	background-repeat: repeat;
	background-position: center 0;
}

#slide8{
	/*background: url('../img/slide6.jpg') 50% 0 no-repeat fixed;*/
	background-color: #EAF2F2;
	height: 80px;
	margin: 0 auto;
	padding: 40px 0;
	color: #444;
}

#slide8 a {
	color : #366;
	text-decoration: none;
}
#slide8 a:hover {
	color : #D56A00;
}

 #slide4 .quotes_container, #slide4 .rslides_tabs {
	  width: 800px;
 }
 
 .rslides_tabs  a, .rslides_here a {
	 color:#666;
 }
 
 #slide9{
	background: url('../img/slide31.jpg') 50% 0 no-repeat fixed;
	color: #fff;
	height: auto;
	padding: 170px 0 0 0;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover;
}
  
 form {
	font-family: sans-serif;
	font-size: 0.9em;
 }
 
 form input, form textarea {
	border: 1px solid #CBD5E2;
	padding-left: 2px;
	font-family: sans-serif;
	font-size: 1em;
	-moz-border-radius: 4px 4px 4px 4px / 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px / 4px 4px 4px 4px;
	-webkit-border-top-left-radius: 4px 4px;
	-webkit-border-top-right-radius:4px 4px;
	-webkit-border-bottom-right-radius: 4px 4px;
	-webkit-border-bottom-left-radius: 4px 4px;
	border-radius: 4px 4px 4px 4px / 4px 4px 4px 4px;
	-moz-box-shadow:    2px 2px 2px 2px #777;
  	-webkit-box-shadow: 2px 2px 2px 2px #777;
  	box-shadow:        2px 2px 2px 2px #777;
 }
 
 #social {
    position: absolute;
    /*top: -10px;*/
	top: 8px;
	left: 20px;
   /* right: 20px;*/
 }
 
 .fa-square {
	color: #333333;
 }

#actus {
	/*background-color : rgba(255,255,255,0.2);*/
    padding: 25px 15px 0 15px;
}
#concerts {
   background-color : rgba(92,63,33,0.6);
   padding: 5px;
}
#actus, #concerts {
    font-family: 'Goudy Bookletter 1911', serif;
    font-weight: normal;
    font-size: 1.4em;
}

#merch p {
 	margin :  3px 0;
	/*font-size : 0.8em;*/
	font-family: "Oswald";
	min-height: 40px;
}
 
#plus {
    font-weight: normal;
    font-size: 1.2em;
}

.img {
	margin:auto;
	padding : 0 30px;
}


@media screen and (max-width: 1100px) {
      #logo1 {
        background-size: 50% auto;
		background-position: center;
		margin:auto;
		top : 80px;
      }
	  #logo {
        font-size:36px;
		margin:auto;
		top : 80px;
      }
	  
	  #slide3 td, #slide3 th, #slide6 td, #slide6 th, #slide9 td, #slide9 th {
	  	font-size: 1em;
	  }
	  #slide3 .content, #slide6 .content,  #slide9 .content, {
		width:80%;
	  }
 }
 
@media screen and (max-width: 830px) {
  #slide4 .rslides, #slide4 iframe {
	  width: 700px;
	  height: 393px;
  }
  #slide4 .quotes_container, #slide4 .rslides_tabs {
	  width: 700px;
  }
  .img {
	margin:auto;
	width:100%;
	}
}
 @media screen and (max-width: 720px) {
   
   #slide1{
	background:url('../img/accueil2.jpg') 65% 0 no-repeat fixed;
   }
   /* #social { display:none}*/
   #social {
    position: relative;
	top:16px;
	width:60%;
	margin:auto;
   }
   
	#logo1 {
        background-size: 70% auto;
		top : 80px;
		width: 100%;
		margin:auto;
		background-position: center;
    }
	
	#souslogo {
		font-size:14px;
		margin: 40px 0 0 0px;
		top : 80px;
		width:80%;
	}
	#logo {
		font-size:24px;
		margin:auto;
		top : 80px;
	}
	#xplose {
		background-size: 50%;
		margin: -15px 0 0 -23px;
	}
	
	 #slide2 .content {
		 float:none;
	 }
	 
	 #photoFranck {
		background-image: url(../img/FranckTira_300.jpg);
		background-repeat: no-repeat;		
		float:none;
		width:300px;
		height:245px;
		margin: 0px auto 20px auto;
	 }
	 
	#disco {
		float:none;
		margin:auto;
	}
	
	#discoimg {
		width:300px;
		margin:auto;
	}
	
	#album1 {
		background-image: url(../img/album1_vgn140.jpg);
		background-repeat: no-repeat;		
		float:left;
		width:140px;
		height:149px;
		margin: 0 5px 10px 0;
	}
	#album2 {
		background-image: url(../img/album2_vgn140.jpg);
		background-repeat: no-repeat;		
		float:left;
		width:140px;
		height:149px;
		margin: 0 5px 10px 0;
	}
	#album3{
		background-image: url(../img/album3_vgn140.jpg);
		background-repeat: no-repeat;		
		float:left;
		width:140px;
		height:149px;
		margin: 0 5px 10px 0;
	}
	#single1 {
		background-image: url(../img/orfeo_vgn140.jpg);
		background-repeat: no-repeat;		
		height: 140px;
		width: 140px;
		float:left;
		margin: 0 5px 10px 0;
	}
	#livre1 {
		background-image: url(../img/livre_vgn140.jpg);
		background-repeat: no-repeat;		
		height: 140;
		width:183px;
		float:left;
		margin: 0 5px 10px 0;
	}
	
	#shop1 {
		position:relative;
		top:118px;
		left: -2px;
		display:grid;
	}
	#shop2 {
		position:relative;
		top:118px;
		left: -2px;
		display:grid;
	}
	#shop3 {
		position:relative;
		top:110px;
		left: -2px;
		display:grid;
	}
	#shop4, #shop5 {
		position:relative;
		top:110px;
		left: -2px;
		display:grid;
	}
	
	.shop {
		position:relative;
		top:-38px;
		left: -2px;
		display:grid;
	}
	
	#merch p {
		display:none;
	}
	
	.merch_vgn {
		margin:0 auto 8px auto;
		float:none;
	}
	
	#backnav {
		height:auto;
	}
	#nav {
		width: 100%;
		float: right;
		border-bottom: 0;
	}
	#nav a {
		text-decoration: none;
		text-align: left;
		width: 100%;
		text-indent: 25px;
		line-height: 40px;
		font-weight:bold;
	}
	#nav ul {
		float:none;
		list-style: none;
		height: auto;
		margin:0;
		padding-left: 0;
	}
	#nav li {
		padding:0;
		margin : 0;
		display: block;
		float: none;
		width: 100%;
	}
	#nav li a {
		display: inline-block;
		text-align: center;
		text-decoration: none;
		font-size: 14px; 
		font-weight:normal;
		font-family:Arial, Helvetica, sans-serif;
		color:white;
		background-color : #6b6963;
		line-height: 30px;
		border-bottom: 1px solid #4b4847;
	}
	#nav li a.active { color:white; background-color: #555; opacity:1; border:none}
	#nav li a:hover { color:white; background-color: #555; opacity:1; }
	
	#nav a#pull {
		display: block;
		/*background-color: #283744;*/
		background-color: #444;
		width: 100%;
		position: relative;
	}
	#nav a#pull:after {
		content:"";
		background: url('../img/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	
	#ft { left: 20px; }
	  
  	#slide1 {
	  background-size:cover;
	  /*height:auto;*/
  	}
	
	#actus {
    	padding: 25px 5px 0 5px;
	}
	
	#actus .img {
		padding : 0 ;
	}
	
	 #actus img {
		max-width: 325px;
		height : 200px;
	 }
	  
	  #slide2 p, #actus, #concerts {
		font-size:18px;  
	  }
	  
	  #slide4 .rslides, #slide4 iframe {
		 width: 99%;
	  }
	  #slide4 .quotes_container, #slide4 .rslides_tabs {
		  width: 99%;
	  }
	   #slide3 td, #slide3 th, #slide6 td, #slide6 th, #slide9 td, #slide9 th {
	  	font-size: 0.9em;
	  }
	  #slide3 .content, #slide6 .content, #slide9 .content {
		width:85%;
	  }
	  
	   .img {
			margin:auto;
			width:100%;
		}
 }
 
 @media screen and (max-width: 460px) {
	
	.quotes { margin:30px auto }

	#slide2 {
		padding:80px 0;  
	}
	#slide3 .quotes_container, #slide9 .quotes_container {
		width:90%;
	}
	#slide4 {
		padding: 80px 0;
		height:500px;
	}
	#slide5 {
	  	padding: 80px 0;
		height:500px;
	}
	#slide6 {
		background-position: -25px;
		padding: 120px 0;
		height: auto;
	}
	#slide6 .quotes_container {
		width:90%;
	}
	#slide3 td, #slide3 th, #slide6 td, #slide6 th, #slide9 td, #slide9 th {
		font-size: 0.9em;
	}
	#slide3 .content, #slide6 .content, #slide7 .content, #slide9 .content, {
		width:90%;
	}
	#slide4 .content, #slide5 .content  {
		width:100%;
	}
	#slide7 {
	 	padding: 10px 0;
	}
	
	#formulaire1 textarea {
	 	width: 265px;
	}
	#nomcontact1, #prenomcontact1, #mailcontact1 {
		width : 265px;  
	}
	
	#header {
	  margin-top:0;
	}
	
 }