h1.circle {
  font-size: calc(38px + (54 - 38) * (100vw - 300px) / (1000 - 300));
  font-weight: 600 !important;
  color:#fff;
  text-align: center;
  }
  
  h2.circle {
  font-size: calc(38px + (54 - 38) * (100vw - 300px) / (1000 - 300));
  font-weight: 600 !important;
  text-align: center;
  margin-bottom: 8px;
  }
  
  .circle-subtitle {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size:36px;
  letter-spacing: 2px;
  text-align:center;
  color:#fff;
	margin-top: 36px;
  }
  
  /*.circle-subtitle {
    position: absolute;
    margin-top: 200px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}*/
  
  
  .xmain {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
  
  .maincont {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }
  
  /* CURSOR */
.cont2element.aparece .contelement2, .cont2element2.aparece .contelement3 {
	cursor: url(/sites/default/files/landing/icons/next.svg), auto;
}
.elemento#myCircle.expanded .contelement {
	cursor: url(/sites/default/files/landing/icons/previous.svg), auto;
}
.elemento#myCircle2.expanded .contelement2 {
	cursor: url(/sites/default/files/landing/icons/previous.svg), auto;
} 
.clayer.aparece {
	cursor: url(/sites/default/files/landing/icons/follow.svg), auto;
}
  
  .elemento { 
	width: 80px;
	height: 80px;
	background: #000;
	margin: 30px auto;
	cursor: pointer;
    clip-path: circle(45%); 
	transition: clip-path 0.3s ease;
}  

.elemento:hover {  
    clip-path: circle(70%);  
}

.elemento#myCircle.expanded {
	clip-path: circle(1600%);
}
.elemento#myCircle2.expanded {
	clip-path: circle(1600%);
}
.elemento#myCircle3.expanded {
	clip-path: circle(1600%);
}

.contelement {
	position: fixed;
    background: #c4cbde;
    background-size: cover;
    -webkit-background-size: cover;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}

.contelement2 {
	position: fixed;
    background: #000;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}

.contelement3 {
	position: fixed;
    background: #003399;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}

.contelement, .contelement2, .contelement3 {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.cont2element, .cont2element2, .cont2element3 {
	display: none;
}
.cont2element.aparece, .cont2element2.aparece, .cont2element3.aparece {
	display: block;
}
.cont2element h2, .cont2element2 h2, .cont2element3 h2 {
	color: #fff;
}


/* CUBRE LINK */
.clayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display:none;
}
.clayer.aparece {
  display:block;
}

/* OVERFLOW */
.xmain.aparece {
  overflow: auto;
  }

.cirlayer {
  /*width: 70%;
  padding: 80px 0;*/
  margin: 0 auto;
  display:none;
}
.cirlayer.aparece {
  display:block;
}

/* REINICIO */
.envreinicio {
	position: absolute;
	z-index: 1000;
    top: 30px;
    left: 30px;
	display: none;
   }
.envreinicio.aparece {
	display: block;
   }
.reinicio-boton {
    width: 40px;
    height: 40px;
    border: none;
	border-radius: 50%;
    background: #008DD0;
}
.reinicio-boton:hover {
    background: #fff;
}
.reinicio-boton::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 48px;
    width: 80px;
    height: 74px;
    background-image: url(/sites/default/files/landing/icons/regresa.svg);
    background-size: cover;
}


.scrolldown {
    width: 100%;
    position: absolute;
    top: 85%;
		left: 50%;
		transform: translate(-1%, -50%);
}
.scrolldown img {
    width: 30px;
	margin: 0 auto;
}