:root {
	--bg: #3C465C;
	--primary: #fb42f0;
	--solid: #fff;
	--btn-w: 10em;
	--dot-w: calc(var(--btn-w)*.2);
	--tr-X: calc(var(--btn-w) - var(--dot-w));
}
.cy-metaverse{
  width:180px;
  margin-left: 20px;
}
.cy-abtn {
	position: relative;
	margin: 0 auto;
	width: var(--btn-w);
	color: var(--primary);
	border: .15em solid var(--primary);
	border-radius: 5em;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.3em;
	line-height: 2em;
	cursor: pointer;
}
.cy-adot {
	content: '';
	position: absolute;
	top: 0;
	width: var(--dot-w);
	height: 100%;
	border-radius: 100%;
	transition: all 300ms ease;
	display: none;
}
.cy-adot:after {
	content: '';
	position: absolute;
	top: -.4em;
	height: .8em;
	width: .8em;
	background: var(--primary);
	border-radius: 1em;
	border: .25em solid var(--solid);
	box-shadow: 0 0 .7em var(--solid),
				0 0 2em var(--primary);
}
.cy-abtn:hover .cy-adot,
.cy-abtn:focus .cy-adot {
	-webkit-animation: atom 2s infinite linear;
	        animation: atom 2s infinite linear;
	display: block;
}
@-webkit-keyframes atom {
	0% {transform: translateX(0) rotate(0);}
	30%{transform: translateX(var(--tr-X)) rotate(0);}
	50% {transform: translateX(var(--tr-X)) rotate(180deg);}
	80% {transform: translateX(0) rotate(180deg);}
	100% {transform: translateX(0) rotate(360deg);}
}
@keyframes atom {
	0% {transform: translateX(0) rotate(0);}
	30%{transform: translateX(var(--tr-X)) rotate(0);}
	50% {transform: translateX(var(--tr-X)) rotate(180deg);}
	80% {transform: translateX(0) rotate(180deg);}
	100% {transform: translateX(0) rotate(360deg);}
}



/*** CARDS ---------------------------------------------------------------- ***/
.card {
  width: 71.5vw;
  height: 100vw;
  position: relative;
  overflow: hidden;
  margin: 20px;
  overflow: hidden;
  z-index: 10;
  touch-action: none;
  border-radius: 5%/3.5%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  will-change: transform, filter;
  background-color: #040712;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform-origin: center;
  background-image: var(--front);
  -webkit-box-shadow: 0px 12px 37px 2px rgba(0, 0, 0, 0.87);
  box-shadow: 0px 12px 27px 2px rgba(0, 0, 0, 0.87);
}

@media screen and (min-width: 600px) {
  .card {
    width: clamp(12.9vw, 61vh, 18vw);
    height: clamp(18vw, 85vh, 25.2vw);
  }
}

.card:before,
.card:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-repeat: no-repeat;
  opacity: 0.5;
  mix-blend-mode: color-dodge;
  transition: all 0.33s ease;
}

.card:before {
  background-position: 50% 50%;
  background-size: 300% 300%;
  opacity: 0.5;
  filter: brightness(0.5) contrast(1);
  z-index: 1;
}

.card:after {
  background-position: 50% 50%;
  background-size: 160%;
  background-blend-mode: overlay;
  z-index: 2;
  filter: brightness(1) contrast(1);
  transition: all 0.33s ease;
  mix-blend-mode: color-dodge;
  opacity: 0.75;
}

.card:hover:after {
  filter: brightness(1) contrast(1);
  opacity: 1;
}

.card:hover {
  -webkit-animation: none;
  animation: none;
  transition: box-shadow 0.1s ease-out;
  box-shadow: 0px 12px 22px 2px rgba(0, 0, 0, 0.87);
}

.card:hover:before {
  -webkit-animation: none;
  animation: none;
  background-image: linear-gradient(110deg, transparent 25%, var(--color1) 48%, var(--color2) 52%, transparent 75%);
  background-position: 50% 50%;
  background-size: 250% 250%;
  opacity: 0.88;
  filter: brightness(0.66) contrast(1.33);
  transition: none;
}

.card:hover:before,
.card:hover:after {
  -webkit-animation: none;
  animation: none;
  transition: none;
}

.card:hover:before {
  background-image: linear-gradient(115deg, transparent 20%, #ec9bb6 36%, #ccac6f 43%, #69e4a5 50%, #8ec5d6 57%, #b98cce 64%, transparent 80%);
}

.card:after {
  opacity: 1;
  background-image: url("../img/one.gif"), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
}

/*SECTIONS*/
/*###############################################################################################*/
.section-roadmap {
  background: rgba(24, 25, 29, 0.99);
  background-image: url('../img/grid.svg');
  box-shadow: 0 0 10px 10px rgba(33, 33, 33, 0.1);
  z-index: 100;
}

.section-attributes {
  box-shadow: 0 0 10px 10px rgba(33, 33, 33, 0.1);
  z-index: 100;
}

.section-who {
  background-image: url('../img/back-who.svg');
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 0 10px 10px rgba(33, 33, 33, 0.1);
  z-index: 100;
}

.section-project {
  background-image: url('../img/back-project-01.svg');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
}

.no-webp .section-cards {
  background-image: url('../img/stage.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.webp .section-cards {
  background-image: url('../img/stage.webp');
  background-size: cover;
  background-repeat: no-repeat;
}



/*CARDS*/
/*###############################################################################################*/





.no-webp .card.ada-lovelace {
  background-image: url("../img/cards/ada-lovelace.png");
}

.webp .card.ada-lovelace {
  background-image: url("../img/cards/ada-lovelace.webp");
}

.no-webp .card.blaise-pascal {
  background-image: url("../img/cards/blaise-pascal.png");
}

.webp .card.blaise-pascal {
  background-image: url("../img/cards/blaise-pascal.webp");
}


.no-webp .card.charles-babbage {
  background-image: url("../img/cards/charles-babbage.png");
}

.webp .card.charles-babbage {
  background-image: url("../img/cards/charles-babbage.webp");
}


.no-webp .card.dmitri-mendeleev {
  background-image: url("../img/cards/dmitri-mendeleev.png");
}

.webp .card.dmitri-mendeleev {
  background-image: url("../img/cards/dmitri-mendeleev.webp");
}

.no-webp .card.galileo-galilei {
  background-image: url("../img/cards/galileo-galilei.png");
}

.webp .card.galileo-galilei {
  background-image: url("../img/cards/galileo-galilei.webp");
}

.no-webp .card.mikhail-lomonosov {
  background-image: url("../img/cards/mikhail-lomonosov.png");
}

.webp .card.mikhail-lomonosov {
  background-image: url("../img/cards/mikhail-lomonosov.webp");
}


.no-webp .card.nicolaus-copernicus {
  background-image: url("../img/cards/nicolaus-copernicus.png");
}

.webp .card.nicolaus-copernicus {
  background-image: url("../img/cards/nicolaus-copernicus.webp");
}

.no-webp .card.alan-turing {
  background-image: url("../img/cards/alan-turing.png");
}

.webp .card.alan-turing {
  background-image: url("../img/cards/alan-turing.webp");
}


.no-webp .card.benjamin-franklin {
  background-image: url("../img/cards/benjamin-franklin.png");
}

.webp .card.benjamin-franklin {
  background-image: url("../img/cards/benjamin-franklin.webp");
}


.no-webp .card.nikola-tesla {
  background-image: url("../img/cards/nikola-tesla.png");
}

.webp .card.nikola-tesla {
  background-image: url("../img/cards/nikola-tesla.webp");
}


.no-webp .card.michael-faraday {
  background-image: url("../img/cards/michael-faraday.png");
}

.webp .card.michael-faraday {
  background-image: url("../img/cards/michael-faraday.webp");
}


.no-webp .card.leonardo-davinci {
  background-image: url("../img/cards/leonardo-davinci.png");
}

.webp .card.leonardo-davinci {
  background-image: url("../img/cards/leonardo-davinci.webp");
}


.no-webp .card.gottfried-leibniz {
  background-image: url("../img/cards/gottfried-leibniz.png");
}

.webp .card.gottfried-leibniz {
  background-image: url("../img/cards/gottfried-leibniz.webp");
}

.no-webp .card.isaac-newton {
  background-image: url("../img/cards/isaac-newton.png");
}

.webp .card.isaac-newton {
  background-image: url("../img/cards/isaac-newton.webp");
}
.no-webp .card.satoshi-nakamoto {
  background-image: url("../img/cards/satoshi-nakamoto.png");
}

.webp .card.satoshi-nakamoto {
  background-image: url("../img/cards/satoshi-nakamoto.webp");
}