/* General Settings */

body {
  font-family: 'Roboto', sans-serif;
  background: #ffa093;
  box-sizing: border-box;
  height: auto;
  overflow-x: hidden;

}

.description1{
	height: 200%;
	width: 33%;
	float: left;
	position: relative;
	background: yellow; 
}

.description2{
	height: 200%;
	width: 33%;
	float: left;
	text-align: center;
	position: relative;
	background: red; 
}

#sousTitreArtiste{
	height: 50%;
}

#sousTitreCollaborations{
	width: 35%;
}

.description3{
	height: 200%;
	width: 34%;
	float: right;
	position: relative;
	background: blue; 
}

.description4{
	height: 200%;
	width: 100%;
	float: left;
	position: relative;
	background: orange; 
}

#titre1{
	font-size: 200%;
	 
}

#artistePres{
	height: 1000%;
	position: relative;
}

h1,
h2,
h3 {

}

h1 {
  font-size: 250%;
  text-transform: uppercase;
	width: 500px;
}

h2 {
  font-size: 150%;
  text-transform: capitalize;
}

img {
    display: none;
	width:20%;
	margin-left:auto;
	margin-right:auto; 
}


#oeuvres{

	width:30%;
	cursor: pointer;
	position: absolute;
}

.oeuvres{
	left: 55%;
	padding-top: 1%
}

#titre{
	display: none;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	
}

main {
  max-width: 900px;
  margin: auto;
  box-shadow: 30px 0 40px rgba(0, 0, 0, 0.1), -30px 0 40px rgba(0, 0, 0, 0.1);
	background: #f0f0f0;
}

.main-content-flex,
.main-text-img,
.caption,
footer {
  text-align: center;
}

/* Partie haute */

.main-content {
  background: white;
}

.main-content-flex {
  display: flex;
  flex: 0 1 40vw;
  height: 50vh;
  justify-content: center;
  align-items: center;
}

.main-content-img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 50vh;
  flex: 0 1 60vw;
  margin: 0;
width: 100%;
	
}

.btn {
  padding: 10px 20px;
  border: 1px solid #cccccc;
  display: inline-block;
  margin: 20px 0;
  border-radius: 25px;
  text-decoration: none;
  color: #4e4e4e;
  cursor: pointer;
}

.vignettes6{
	height: 200px;
}

.vignettes11{
	height: 200px;
}

.vignettes16{
	height: 200px;
}

.vignettes21{
	height: 200px;
}

.vignettes26{
	height: 200px;
}

.vignettes31{
	height: 200px;
}

/* Partie basse */

.main-text-img {
  padding: 10px;
  background: #333;
  color: white;
}

.caption {
  padding: 12px;
	position: relative;
}

/* Footer */

footer {
  padding: 15px 10px;
  margin: auto;
  color: rgb(59, 59, 59);
}

footer h3 {
  font-size: 180%;
}

.footer-text {
  font-weight: bold;
}

/* Medias Queries */

@media (min-width: 750px) {
  .main-content {
    display: flex;
    height: 100%;
  }
  .main-content-flex {
    height: 100vh;
  }
  .main-content-img {
    height: 100vh;
  }
}



/* Page Oeuvres */

.logoClick{
	height: 25%;
}

#presentationIntro{
	width:50%; 
	position: relative;
	left: 0%;
	cursor: pointer;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

#presentationIntro:hover{

	-webkit-transform:opacity(0); /* Safari et Chrome */
	-moz-transform:opacity(0); /* Firefox */
	-ms-transform:opacity(0); /* Internet Explorer 9 */
	-o-transform:opacity(0); /* Opera */
	transform:opacity(0);
}
.presentationSuperpose{
	position: absolute;
	width: 48%;
	height: 95%;
	left: 26%;
	margin-top: 0%;
	cursor: pointer;
	
}


#presentationSuperpose{
	opacity: 0;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

#presentationSuperpose:hover{
	-webkit-transform:opacity(0); /* Safari et Chrome */
	-moz-transform:opacity(0); /* Firefox */
	-ms-transform:opacity(0); /* Internet Explorer 9 */
	-o-transform:opacity(0); /* Opera */
	transform:opacity(0);
}

.presentationSuperpose2{
	position: absolute;
	width: 48%;
	height: 95%;
	left: 26%;
	margin-top: 0%;
	cursor: pointer;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

#presentationSuperpose2:hover{
	-webkit-transform:opacity(0); /* Safari et Chrome */
	-moz-transform:opacity(0); /* Firefox */
	-ms-transform:opacity(0); /* Internet Explorer 9 */
	-o-transform:opacity(0); /* Opera */
	transform:opacity(0);
}

.presentationSuperpose3{
	position: absolute;
	width: 48%;
	height: 95%;
	left: 26%;
	margin-top: 0%;
	cursor: pointer;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

#presentationSuperpose3:hover{
	-webkit-transform:opacity(0); /* Safari et Chrome */
	-moz-transform:opacity(0); /* Firefox */
	-ms-transform:opacity(0); /* Internet Explorer 9 */
	-o-transform:opacity(0); /* Opera */
	transform:opacity(0);
}

.presentationSuperpose4{
	position: absolute;
	width: 48%;
	height: 95%;
	left: 26%;
	margin-top: 0%;
	cursor: pointer;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

#presentationSuperpose4:hover{
	-webkit-transform:opacity(0); /* Safari et Chrome */
	-moz-transform:opacity(0); /* Firefox */
	-ms-transform:opacity(0); /* Internet Explorer 9 */
	-o-transform:opacity(0); /* Opera */
	transform:opacity(0);
}

.presentationSuperpose5{
	position: absolute;
	width: 48%;
	height: 95%;
	left: 26%;
	margin-top: 0%;
	cursor: pointer;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

#presentationSuperpose5:hover{
	-webkit-transform:opacity(0); /* Safari et Chrome */
	-moz-transform:opacity(0); /* Firefox */
	-ms-transform:opacity(0); /* Internet Explorer 9 */
	-o-transform:opacity(0); /* Opera */
	transform:opacity(0);
}

.presentationSuperpose6{
	position: absolute;
	width: 48%;
	height: 95%;
	left: 26%;
	margin-top: 0%;
	cursor: pointer;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

#presentationSuperpose6:hover{
	-webkit-transform:opacity(0); /* Safari et Chrome */
	-moz-transform:opacity(0); /* Firefox */
	-ms-transform:opacity(0); /* Internet Explorer 9 */
	-o-transform:opacity(0); /* Opera */
	transform:opacity(0);
}

.presentationSuperpose7{
	position: absolute;
	width: 48%;
	height: 95%;
	left: 26%;
	margin-top: 0%;
	cursor: pointer;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

#presentationSuperpose7:hover{
	-webkit-transform:opacity(0); /* Safari et Chrome */
	-moz-transform:opacity(0); /* Firefox */
	-ms-transform:opacity(0); /* Internet Explorer 9 */
	-o-transform:opacity(0); /* Opera */
	transform:opacity(0);
}

.presentationSuperpose8{
	position: absolute;
	width: 48%;
	height: 95%;
	left: 26%;
	margin-top: 0%;
	cursor: pointer;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

#presentationSuperpose8:hover{
	-webkit-transform:opacity(0); /* Safari et Chrome */
	-moz-transform:opacity(0); /* Firefox */
	-ms-transform:opacity(0); /* Internet Explorer 9 */
	-o-transform:opacity(0); /* Opera */
	transform:opacity(0);
}



.logoClick{
	position: absolute;
	left: 43%;
	margin-top: -42%;
	width: 10%;
	cursor: pointer;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

.logoClick:hover {
	/* L'image est grossie de 25% */
	-webkit-transform:scale(1.25); /* Safari et Chrome */
	-moz-transform:scale(1.25); /* Firefox */
	-ms-transform:scale(1.25); /* Internet Explorer 9 */
	-o-transform:scale(1.25); /* Opera */
	transform:scale(1.25);

}

#presentation2{
	display: none;
	width:100%;
	margin-left:auto;
	margin-right:auto;  
}




.hamburger{
  background:none;
  float: left;
	position: absolute;
  top:0;
  right:1;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
	float: left;
	position: relative;
  top:0;
  right:0;
  padding:7px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:3em;
  line-height:45px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;	
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1; text-align:center; }
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
.menu ul li a:hover {  color: #666; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}

.titreOeuvres{
	position: relative;	
}







/* Page Contacter Artiste */

.contact{
	position: relative;
}


.espace2{
	padding: 5%;
  	background: none;
  	color: white;
	position: relative;
}

.instagram{
	height: 20%;
	width: 20%;
	position: relative;
	left: 20%;
	cursor: pointer;
}

#instagramTexte{
	position: absolute;
	left: 20%;
	margin-top: 10%;
	width: 30%;
	height: 30%;
	opacity: 0;
}

#telephone{
	height: 20%;
	width: 20%;
	position: relative;
	left: -15%;
	cursor: pointer;
}

#telephoneTexte{
	position: absolute;
	left: 55%;
	margin-top: 10%;
	width: 30%;
	height: 30%;
	opacity: 0;
}


#mail{
	height: 20%;
	width: 20%;
	position: relative;
	left: 20%;
	cursor: pointer;
}

#mailTexte{
	
	position: absolute;
	left: 20%;
	margin-top: 10%;
	width: 30%;
	height: 30%;
	opacity: 0;
}



.espace{
  padding: 30px;
  background: none;
  color: white;	
	position: relative;
}

/* Page Collaborations */


#texteCollaboration{
	font-size: 100%;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}

#titreCollab{
	width: 40%;
}

.titreCollab{
	position: relative;
}

/*Disposition Vignettes Collaborations */

.apple{
	height: 100%;
	float: left;
	padding-left: 50px;
}

/* Page Accueil + LOGO */


.logo{
	position: absolute;
	width: 3%;
	cursor: pointer;
	left: 60%;
	margin-top: 1%;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

.logo:hover {
	/* L'image est grossie de 25% */
	-webkit-transform:scale(1.25); /* Safari et Chrome */
	-moz-transform:scale(1.25); /* Firefox */
	-ms-transform:scale(1.25); /* Internet Explorer 9 */
	-o-transform:scale(1.25); /* Opera */
	transform:scale(1.25);
}

.logo2{
	position: absolute;
	width: 3%;
	cursor: pointer;
	left: 70%;
	margin-top: 2%
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
	
}


.logo2:hover {
	/* L'image est grossie de 25% */
	-webkit-transform:scale(1.25); /* Safari et Chrome */
	-moz-transform:scale(1.25); /* Firefox */
	-ms-transform:scale(1.25); /* Internet Explorer 9 */
	-o-transform:scale(1.25); /* Opera */
	transform:scale(1.25);
}

.vignetteArtiste{
	position: absolute;
	width: 3%;
	cursor: pointer;
	left: 20%;
	padding-top: 1%
	
}

/* Vignettes Pages Collaborations */
.vignetteBandcamp{
	position: relative;
	width: 20%;
	left: -20%;
}

.vignetteFader{
	position: absolute;
	width: 20%;
	left: 60%;
}

.vignetteMTV{
	position: absolute;
	width: 20%;
	left: 60%;
	margin-top: 4%;	
}

.vignetteApple{
	position: relative;
	width: 15%;
	left: -20%;
	
}

.vignetteNike{
	position: relative;
	width: 20%;
	left: -20%;
}

.vignetteRedBull{
	position: absolute;
	width: 20%;
	left: 60%;
	margin-top: 2%;		
}

.vignetteTheNewYorker{
	position: relative;
	width: 20%;
	left: -20%;
	margin-top: 5%;
}

.vignetteTheVillageVoice{
	position: absolute;
	width: 20%;
	left: 60%;
	margin-top: -8%;	
}

.vignettetheGuardian{
	position: relative;
	width: 20%;
	left: -20%;
	margin-top: 5%;	
}

.vignetteWarnerMusicGroup{
	position: absolute;
	width: 20%;
	left: 60%;
	margin-top: 2%;	
}

.vignetteWired{
	position: relative;
	width: 20%;
	left: -20%;
	margin-top: 5%;	
}

.accueil{
	position: relative;
	right: 20%
}


.sousTitre1{
	position: relative;
	left: 20%;
	margin-top: 10%;
	
}

.sousTitre2{
	position: relative;
	left: -20%;
	margin-top: 10%;
}

#artiste{
	display: none;
	width:20%;
	margin-left:auto;
	margin-right:auto;
	cursor: pointer;
}

#collabArtiste{
	display: none;
	width:30%;
	margin-left:auto;
	margin-right:auto;
	cursor: pointer;	
}


#contact{
	width:30%;
    cursor: pointer;
	position: absolute;
}

.contact{
	left: 55%;
	padding-top: 1%
		
}

.collabArtiste{
	position: absolute;
	width: 3%;
	cursor: pointer;
	left: 15%;
	padding-top: 1%
}
/*Page Artiste */

#texteArtiste1{
	position: absolute;
	margin: auto;
	top: 7%;
	left: 4%;
	height: 80%;
	width: 25%;
	
}

#texteArtiste2{
	position: absolute;
	margin: auto;
	top: 7%;
	right: 6%;
	height: 70%;
	width: 30%;
	
}

#presentation2{
	position: relative;
}

#texteArtiste2{

	position: absolute;
	margin: auto;
	top: 7%;
	right: 6%;
	height: 70%;
	width: 30%;
	-webkit-animation: float 4s infinite; /* Safari 4+ */
	-moz-animation:    float 4s infinite; /* Fx 5+ */
	-o-animation:      float 4s infinite; /* Opera 12+ */
	animation:         float 4s infinite; /* IE 10+, Fx 29+ */
}

@keyframes float {
  0% {
    -webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-5px);
	-moz-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	-o-transform: translateY(-5px);
  }
  100% {
  	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
  }
}

#texteArtiste1{

	position: absolute;
	margin: auto;
	top: 7%;
	left: 4%;
	height: 80%;
	width: 25%;
	-webkit-animation: float 4s infinite; /* Safari 4+ */
	-moz-animation:    float 4s infinite; /* Fx 5+ */
	-o-animation:      float 4s infinite; /* Opera 12+ */
	animation:         float 4s infinite; /* IE 10+, Fx 29+ */
}

@keyframes float {
  0% {
    -webkit-transform: translateY(-5px);
	-moz-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	-o-transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
  }
  100% {
  	-webkit-transform: translateY(-5px);
	-moz-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	-o-transform: translateY(-5px);
  }
}

.artiste{
	position: relative;
}