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

/* PATAN */

/* Style the video: 100% width and height to cover the entire window 
#HomeVideo {
  position: relative;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
	margin: 0;
	padding: 0;
}*/

/*///////////////////////////////*/

/* HERO WRAPPER */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
	background: url("../images/backgrounds/bg-azul.jpg") no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
}

/* VIDEO COMO BACKGROUND */
#HomeVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 1s ease;
}

#HomeVideo.loaded {
  opacity: 1;
}

/* CONTENIDO CENTRADO */

.hometop-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
  z-index: 2;
  text-align: center;

  width: 90%;
  max-width: 400px;
  aspect-ratio: 1 / 1; /* 🔥 ESTO GARANTIZA EL CÍRCULO */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: linear-gradient(45deg, #131a44 10%, #24317f 90%);
  border-radius: 50%;
  padding: 30px;
}

/* LOGO RESPONSIVE */
.hometop-content img {
  width: 80%;
  max-width: 60%;
  height: auto;
}

/* NAVBAR POR ENCIMA */
.navigation {
  z-index: 9999;
}

/* MOBILE */
@media (max-width: 768px) {
  .hometop-content {
    padding: 30px 20px;
  }

  .hometop-content img {
    /*width: 140px;*/
  }
	.hero {
	background-size: auto 100% ;
	}
}

section {
  scroll-margin-top: 80px;
}
/*///////////////////////////////*/
/* Add some content at the bottom of the video/page 
.hometop-content {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

	padding: 125px;
  background: rgba(256, 256, 256, 0.5);
	    background: linear-gradient(45deg, #131a44 10%, #24317f 90%);
  text-align: center;
	border-radius: 500px;
}
.hometop-content img {
	width: 250px;
	height: auto;
	
}*/

/* Style the button used to pause/play the video */
#BtnVideo {
  width: 60%;
  font-size: 18px;
  padding: 10px;
  border: 3px solid #fff;
	border-radius: 100px;
	background: transparent;
  color: #fff;
	font-weight: bold;
  cursor: pointer;
}

#BtnVideo:hover {
/*background: linear-gradient(45deg, #c651bf 10%, #ffca70 90%);*/
	background: #d60081;
}