/* ===================================
    08. Video
====================================== */

.video-wrapper { height: 100%; overflow: hidden; position: absolute; width: 100%; }
.html-video { background-color: #000; left: 50%; width: auto; height:auto; min-height: 100%; min-width: 100%; position: absolute; top: 0; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); z-index: 0; }
.video-wrapper iframe { height: 100%; left: 0; position: absolute; top: -5px !important; width: 100%; }
.video-background { position: absolute; height: 100%; width: 100%; z-index: 1; top:0; background: rgba(67,67,67,0.5) }

.html-video-play { position: relative; text-align: center; }
.html-video-play .play-icon, .html-video-play .pause-icon { position: absolute; left: 50%; padding-left: 8px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.html-video-play[ playing = "true" ] .play-icon, .html-video-play .pause-icon { opacity: 0; top: 0; visibility: hidden; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
.html-video-play[ playing = "true" ] .play-icon { top: 0; }
.html-video-play .pause-icon { top: 100%; }
.html-video-play .play-icon, .html-video-play[ playing = "true" ] .pause-icon { opacity: 1; top: 50%; visibility: visible; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
.play-icon-animation { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); -o-transform: scale(1); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out ;}
.play-icon-animation:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); -o-transform: scale(1.1); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; }

.bg-video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-video-wrapper iframe { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.avatar.avatar-ex-sm 
	{
	max-height: 50px !important;
	}

.cookie-popup
	{
	bottom: 30px;
	}

@-webkit-keyframes cookie-popup-in {
  from {
    bottom: -6.25rem;
  }
  to {
    bottom: 1.875rem;
  }
}

@keyframes cookie-popup-in {
  from {
    bottom: -6.25rem;
  }
  to {
    bottom: 1.875rem;
  }
}

/* ReCaptcha */
.grecaptcha-badge
	{
	width: 70px !important;
	overflow: hidden !important;
	transition: all 0.3s ease !important;
	left: 30px !important;
	bottom: 30px !important;
	z-index: 99999;
	visibility: hidden;
	}

.grecaptcha-badge:hover
	{
	width: 256px !important;
	}

@media (max-width:767.98px) 
	{
	.grecaptcha-badge
		{
		visibility: hidden;
		}
	}
/* ReCaptcha */

/* Mensaje POP */
.message-popup 
	{
	position: fixed;
	bottom: 12px;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 512px;
	z-index: 5;
	z-index: 999999;
	}

.message-popup .message-popup-actions button 
	{
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	font-weight: 700;
	position: absolute;
	top: 10px;
	right: 10px;
	}

@media (max-width: 425px) 
	{
	.message-popup 
		{
		left: 12px;
		right: 12px;
		}
	}

.message-popup-close
	{
	display: block;
	-webkit-animation: message-popup-in 0.5s ease forwards;
	animation: message-popup-in 0.5s ease forwards;
	}

@-webkit-keyframes message-popup-in 
	{
	from 
		{
		bottom: -6.25rem;
		}
	to
		{
		bottom: 1.25rem;
		}
	}

@keyframes message-popup-in
	{
	from 
		{
		bottom: -6.25rem;
		}
	to 
		{
		bottom: 1.25rem;
		}
	}
/* Mensaje POP */

/* WhatsApp */
.flotante
	{
	position:fixed;
	width:36px;
	height:36px;
	bottom:30px;
	right:30px;
	background-color:#25d366;
	color:#FFF;
	border-radius:6px;
	text-align:center;
  	font-size:25px;
	box-shadow: 3px #efefef;
  	z-index:100;
	}

.flotante:hover
	{
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	color:#dedede;
	}

.flotante:hover i 
	{
	-webkit-transform: rotate(-45deg) !important;
	transform: rotate(-45deg) !important;
	}
/* WhatsApp */


/**/
.bg-gradient
	{
	background-color: rgba(255, 255, 255, 1);
	position: absolute; 
	width: 100%; height: 30%; 
	top: 70%; bottom: 0; left: 0; right: 0;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
	}
/**/
/* Dark */
/*
.bg-gradient
	{
	background-color: rgba(30, 40, 53, 1);
	position: absolute; 
	width: 100%; height: 30%; 
	top: 70%; bottom: 0; left: 0; right: 0;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #1e2835 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #1e2835 100%);
	}
*/
/**/

/* Máscaras */
.shape-1
	{
	position: absolute; top: 0px; width: 100%; left: 0; right: 0;
	}
.shape-2
	{
	position: absolute; right: 0; top: 0; height: 100%; width: 100%;
	}

/* Extra Small devices (landscape phones, 320px and up) */
@media (min-width: 320px) 
	{  
	.shape-1.bottom
		{
		top: inherit; bottom: -0px;
		}
	}

/* Extra Small devices (landscape phones, 400px and up) */
@media (min-width: 400px) 
	{  
	.shape-1.bottom
		{
		top: inherit; bottom: -0px;
		}
	}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) 
	{  
	.shape-1.bottom
		{
		top: inherit; bottom: -0px;
		}
	}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) 
	{  
 	.shape-1.bottom
		{
		top: inherit; bottom: -0px;
		}
	}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) 
	{
 	.shape-1.bottom
		{
		top: inherit; bottom: -0px;
		}
	}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
	{
    .shape-1.bottom
		{
		top: inherit; bottom: -0px;
		}
	}
/* */

/* Forma Colaborador */
.colaborator-form .btn {
  padding: 10px 20px;
}
.colaborator-form input {
  padding: 12px 20px;
  width: 100%;
  color: #212529 !important;
  border: none;
  outline: none !important;
  padding-right: 160px;
  padding-left: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  height: 50px;
}
.colaborator-form input::-webkit-input-placeholder {
  color: #3c4858;
}
.colaborator-form input::-moz-placeholder {
  color: #3c4858;
}
.colaborator-form input:-ms-input-placeholder {
  color: #3c4858;
}
.colaborator-form input::-ms-input-placeholder {
  color: #3c4858;
}
.colaborator-form input::placeholder {
  color: #3c4858;
}
.colaborator-form button {
  position: absolute;
  top: 2px;
  right: 3px;
  outline: none !important;
}
.colaborator-form form {
  position: relative;
  max-width: 600px;
  margin: 0px auto;
}

/* Fonts */
/* Regular */
@font-face {
    font-family: "Scto Grotesk A";
    src: url("/fnt/scto-grotesk-a-regular.eot");
    src: url("/fnt/scto-grotesk-a-regular.eot?#iefix") format("embedded-opentype"),
         url("/fnt/scto-grotesk-a-regular.woff2") format("woff2"),
         url("/fnt/scto-grotesk-a-regular.woff") format("woff"),
         url("/fnt/scto-grotesk-a-regular.ttf") format("truetype"),
         url("/fnt/scto-grotesk-a-regular.svg#Scto Grotesk A") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: "Scto Grotesk A";
    src: url("/fnt/scto-grotesk-a-medium.eot");
    src: url("/fnt/scto-grotesk-a-medium.eot?#iefix") format("embedded-opentype"),
         url("/fnt/scto-grotesk-a-medium.woff2") format("woff2"),
         url("/fnt/scto-grotesk-a-medium.woff") format("woff"),
         url("/fnt/scto-grotesk-a-medium.ttf") format("truetype"),
         url("/fnt/scto-grotesk-a-medium.svg#Scto Grotesk A") format("svg");
    font-weight: 700; /* or 500 if it's actually Medium */
    font-style: normal;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: "Scto Grotesk A";
    src: url("/fnt/scto-grotesk-a-italic.eot");
    src: url("/fnt/scto-grotesk-a-italic.eot?#iefix") format("embedded-opentype"),
         url("/fnt/scto-grotesk-a-italic.woff2") format("woff2"),
         url("/fnt/scto-grotesk-a-italic.woff") format("woff"),
         url("/fnt/scto-grotesk-a-italic.ttf") format("truetype"),
         url("/fnt/scto-grotesk-a-italic.svg#Scto Grotesk A") format("svg");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* QR Code */
.vcard-qr-code 
	{
    border: 4px solid #000000;
    padding: 5px;        /* space between QR and border */
    border-radius: 12px;  /* optional rounded corners */
    background: white;    /* important for QR readability */
	}

/* Tagscloud */
.tagcloud > a.active {
  background: #0047ba;
  color: #ffffff;
}