/* ---------------------------------------------------------------------------*/
/*                    Feuille de style CSS Vidéo des Villas                   */
/* ---------------------------------------------------------------------------*/


@charset "utf-8";

/*      Variables css     */
:root {
	
  /* Codes des Couleurs */ 
	--beige: #fee27f;
	--blanc: #ffffff;
	--creme: #ffeecc;
	--gris-600: #6c757d;
	--marron: #752000;
	--noir: #000000;
	--cyan: #0dcaf0;

}

* {
	box-sizing: border-box;
}  

html {
	margin: 0px;
	padding: 0px;
}

body {
	margin: 0px;
	padding: 0px;
  background-color: var(--gris-600);
}

#global {
  min-height: 670px;
}

/*------------------------- Préloader  ---------------------------------------*/

/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

/*------------------------- Vidéo des Villas ---------------------------------*/

#conteneur_video_villas {
	text-align: center;
	transform: translateY(20%);
}

#video_villas {
  height: 60vh;
  width: auto;
  border-radius: 15px;
}

#conteneur_bouton_sortie {
  display: block;
  width: fit-content;
	margin: 30px auto;
	z-index: 100;
}

.bouton_sortie {
  font: bold 16px Arial, Helvetica, sans-serif;
  background-color: var(--cyan);
  color: var(--creme);
  border-radius: 10px;
  line-height: 35px;
  border: solid 2px transparent;
  text-align: center;
	padding: 0px 20px;
}

.bouton_sortie:hover {
  background-color: var(--beige);
  color: var(--marron);
  text-decoration: none;
  border: solid 2px var(--marron);
}

#erreur_video {
  background-color: var(--creme);
  font: bold 20px Arial, Helvetica, sans-serif;
  padding: 0px 30px;
  border-radius: 15px;
  line-height: 140px;
  color: var(--marron);
}

@media (max-width: 870px) {

	#video_villas {
		height: auto;
		width: 95%;
	}
	
}