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

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,600;1,600&display=swap');

body, html{
  font-family: "Exo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.bg-gradient-menu {
	background: linear-gradient(-45deg, #2D91D9, #05698C);
	color: #ffffff;
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.bg-slide {
  background-image: url("../images/bg_slide.jpg");
  background-size: cover; /* Scales the image to cover the entire element */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents image repetition */
  background-attachment: fixed;
	
	h2{
		font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
		background: #FFFFFF;
		padding: 10px;
		border-radius: 10px;
		font-weight: 100;
		text-align: center;
	}
	
	h4{
		font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
		margin: 30px 0px;
		font-weight: 300;
		text-align: center;
		color: #ffffff;
		
		span{
			display: inline-block;
			font-size: 2em;
		}
	}
	
}

.bg-bloque1 {
  background-image: url("../images/bg_bloque1.png");
  background-size: cover; /* Scales the image to cover the entire element */
  background-position: right bottom; /* Centers the image */
  background-repeat: no-repeat; /* Prevents image repetition */
	
}

.btn-inscripcion{
	background: linear-gradient(-45deg, #FFD708, #BB0000);
	color: #ffffff;
	padding: 10px;
	border-radius: 10px;
	background-size: 400% 400%;
	animation: gradient 15 ease infinite;
}

.bg-pqr {
	background: linear-gradient(-45deg, #FF0004, #FF9E00, #21DF04);
	color: #ffffff;
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

.bg-footer{
	background-color: #006894;
	color: #ffffff;
}

.marcas{
	img{
		height: 100%;
		object-fit: cover;
	}
}

.clickable{
    cursor: pointer;   
}

.pqrs-point {
  padding-right: 4rem;
}

.pqrs-point .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.bg-web {
  background-image: url("../images/bgweb.jpg");
  background-size: cover; /* Scales the image to cover the entire element */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents image repetition */
  background-attachment: fixed;
}

.bg-white-90 {
  background-color: rgba(255,255,255,0.90) !important;
}

.bg-white-80 {
  background-color: rgba(255,255,255,0.80) !important;
}

.bg-white-70 {
  background-color: rgba(255,255,255,0.70) !important;
}

.bg-white-60 {
  background-color: rgba(255,255,255,0.60) !important;
}

.bg-white-50 {
  background-color: rgba(255,255,255,0.50) !important;
}

.bg-white-40 {
  background-color: rgba(255,255,255,0.40) !important;
}

.bg-white-30 {
  background-color: rgba(255,255,255,0.30) !important;
}

.bg-white-20 {
  background-color: rgba(255,255,255,0.20) !important;
}

.bg-white-10 {
  background-color: rgba(255,255,255,0.10) !important;
}

.whatsapp{
	z-index: 99999;
	position: fixed;
	bottom: 10px;
	right: 10px;
}

/*Menu Movil*/
.nav {
  height: 65px;
}


#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 25px;
  left: 25px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  z-index: 9999;
}

#menuToggle input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #36383F;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 300px;
  height: 500px;
  box-shadow: 0 0 10px #85888C;
  margin: -50px 0 0 -50px;
  /*padding: 50px;*/
  padding-top: 80px;
  background-color: rgb(255,255,255);
  -webkit-font-smoothing: antialiased;
  border-bottom-right-radius: 60px;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  transition-delay: 2s;
  list-style-image: none;
  text-decoration: none;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}
/*------*/

#contadorn{
	li {
	  display: inline-block;
	  font-size: 0.7em;
	  list-style-type: none;
	  padding: 1em;
	  text-transform: uppercase;
	}

	li span {
	  display: block;
	  font-size: 3.2rem;
	}

	@media all and (max-width: 768px) {
	  #contadorn{
		  li {
			font-size: calc(0.5em * var(--smaller));
		  }

		  li span {
			font-size: calc(3.375em * var(--smaller));
		  }
	  }
	}
}
	
.bg-hashtag{
	/*background-color: #0F2A77;*/
	background-image: url("../images/blue-wave.jpg");
  	background-size: cover; /* Scales the image to cover the entire element */
  	background-position: center; /* Centers the image */
  	background-repeat: no-repeat; /* Prevents image repetition */
	color: #FFFFFF;
}

.bg-bloque-azul{
	background: linear-gradient(45deg, #07357C, #0F49A2);
	color: #ffffff;
	background-size: 400% 400%,	
}