/*-TOPLA header----------------------------------------------------------------*/

#logoTourne {font-size: 10em; z-index: -6; width: 50%;}

.introProjet{
	z-index: -5;
}

#background1{
	position: absolute;
	top: 25%;
	left: 65%;
	z-index: -7;
	width: 500px;
}
	#background2{
	position: absolute;
	top: 10%;
	left: 70%;
	transform: translate(-50%, -50%);
	z-index: -8;
	width: 800px;
}

#background3{
	position: absolute;
	top: 80%;
	left: 0%;
	transform: translate(-50%, -50%);
	z-index: -10;
	width: 800px;
	}

/*----------------------------------------------------------------------------*/

#mandat{
	background-image: url("../img/projetUn/toplaCouleur.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 70%;
}

#moodboard{
	background-image: url("../img/projetUn/moodboard.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 70%;

}

#test{
	background-image: url("../img/projetUn/arbo.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 70%;

}

#font{
	background-image: url("../img/projetUn/font.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 70%;
}

#picto{
	background-image: url("../img/projetUn/picto-test.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 60%;
}

#picto2{
	background-image: url("../img/projetUn/pictopropre.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 60%;
}

#picto3{
	background-image: url("../img/projetUn/pictoc.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 60%;
}

#final{

}


#changementProjet{
	background-image: url("img/home/frog.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*----------------------PROJET DEUX----------------------------------*/

#mandatDeux{
	background-image: url("../img/projetDeux/bienvenue.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 70%;
}

#moodboardDeux{
	background-image: url("../img/projetDeux/moodboard.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 70%;

}

#arboDeux{
	background-image: url("../img/projetDeux/BY_arborescence.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 70%;

}

#fontDeux{
	background-image: url("../img/projetDeux/font.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 70%;
}

#interfaceCroquisDeux{
	background-image: url("../img/projetDeux/interfacetest.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 60%;
}

#interfaceDeDeux{
	background-image: url("../img/projetDeux/interfacepropre2.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 60%;
}



#mockup{

}

#changementProjet{
	background-image: url("img/home/frog.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.video-background {
  position: relative;
z-index: -100;
  height: 100vh; /* plein écran */
  overflow: hidden;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
	height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
 
}

.video-background .content {
  position: relative;
z-index: -100;
  color: white;
  text-align: center;
  padding: 2rem;
}