@import url('https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&family=Tiny5&family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Oxanium:wght@200..800&display=swap');

:root {

	--primary-1: #4E2716;

	--primary-2: #6A3821;

	--primary-3: #E1A568;

}

html, body {

	margin: 0;

	height:100%;

}

html {

	scroll-behavior: smooth;

}

*, ::before, ::after {

	box-sizing: border-box;

}

body {

	font-family: "Albert Sans", sans-serif;

	font-size: 14px;

	display: flex;

	background: var(--primary-2);

	height:100%;

	color: #FFFFFF;

	text-align: center;

	position:relative;

}



.container {

	display: flex;

	flex-direction: column;

	flex-grow: 1;

}

header {

	display: flex;

	justify-content: space-between;

	align-items: center;

	background-color: var(--primary-1);

	padding: 8px 16px;

	min-height: 70px;

}

header svg.logo {

	width: 230px;

}

header ul {

	list-style-type: none !important;

	margin: 0;

	padding: 0;

	overflow: hidden;

}



header li {

	float: left;

}



header li a {

	display: block;

	color: white;

	text-align: center;

	padding: 14px 16px;

	text-decoration: none;

	font-size: 16px;

}

header .mobile-nav {

	display: none;

}





.sidenav {

	height: 100%;

	width: 0;

	position: fixed;

	z-index: 99;

	top: 0;

	right: 0;

	background-color: var(--primary-1);

	overflow-x: hidden;

	transition: 0.5s;

	padding-top: 60px;

	display:flex;

	flex-direction: column;

	align-items:center;

	gap: 20px;

}



.sidenav a {

	padding: 8px 8px 8px 32px;

	text-decoration: none;

	font-size: 18px;

	color: #FFFFFF;

	display: block;

	transition: 0.3s;

}

.sidenav a:not(.closebtn) {

	width: 100%;

	text-align: left;

}



.sidenav a:hover {

	color: #f1f1f1;

}



.sidenav .closebtn {

	position: absolute;

	top: 0;

	right: 25px;

	font-size: 36px;

	margin-left: 50px;

}





@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}

.sidenav a {font-size: 18px;}

}





.connect-btn {

	font-family: "Oxanium", sans-serif;

	font-weight: 600;

	background: #E1A568;

	color: var(--primary-1);

	background: linear-gradient(to bottom, #f5d49c 0%, var(--primary-3) 30%, var(--primary-3) 70%, #f5d49c 100%);

	border:none;

	border-radius: 25px;

	padding: 8px 16px;

	display:flex;

	justify-content: center;

	align-items: center;

	gap: 10px;

	cursor: pointer;

	font-size: 16px;

}



.position-relative {

	position: relative;

}



.section1 {

	width:100%;

	position: relative;

}

.section1 img {

	width: 100%;



}

.section1-intro {

	position: absolute;

	top: 20%;

	left: 0%;

	transform: translate(60%, 0%);

}

.section1-intro svg {

	width: 400px;

}

.section1-intro-txt {

	font-family: "Oxanium", sans-serif;

	font-size: 60px;

	font-weight: bold;

	text-shadow: 0px 8px 5px rgba( 78, 39, 22, .5);

}



.section1-5 {

	display: block;

	z-index: 2;

	margin-top: -12rem;

	padding: 16px 0;

}

.section1-5 {

	background: linear-gradient(to top, #6A3821 20%, rgba(158, 83, 49, .7) 57%, rgba(208, 110, 65, 0) 100%);

}

.section1-5 .title {

	font-family: "Oxanium", sans-serif;

	font-size : 40px;

	font-weight: bold;

	text-shadow: 0px 8px 5px #000000;

}



.section1-5 .desc {

	margin-top: 10px;

	font-size : 20px;

}

.section1-5-div .btn {

margin: 2rem 0;

	width: 250px;

}







.section3 {

	padding: 2rem 0;

}

.section3 .title {

	font-family: "Oxanium", sans-serif;

	font-size : 40px;

	font-weight: bold;

	text-shadow: 0px 8px 5px #000000;

}

.section3 .service {

	display: flex;

	justify-content: center;

	padding: 16px 4rem;

	margin: 0 42px;

	margin-top: 40px;

	gap: 5rem;

}

.service-detail {

	display: flex;

	flex-direction: column;

	gap: 10px;

	max-width: 380px;

}

.service-detail img {

	border-radius: 20px;

}

.service-detail .title {

	margin-top: 20px;

	font-family: "Oxanium", sans-serif;

	font-size : 22px;

	font-weight: semibold;

	text-shadow: none;

	text-align: left;

}

.service-detail .desc {

	font-size : 18px;

	text-align: left;

	line-height: 38px;

}

.section4 {

	position:relative;

}

.section4:before{

	content: "";

	background: rgba(0,0,0, .8);

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

}





.section4:after{

	content: "";

	background: linear-gradient(to bottom,  var(--primary-2) 0%, rgba(158, 83, 49, .7) 17%, rgba(158, 83, 49, 0) 38%, rgba(158, 83, 49, 0) 80%, rgba(208, 110, 65, 0) 87%, var(--primary-2) 100%);

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

}





.section4 .intro {

	font-family: "Oxanium", sans-serif;

	position: absolute;

	top: 10%;

	left: 50%;

	transform: translate(-50%, 0%);

	z-index: 2;

	display:flex;

	flex-direction: column;

	gap: 1rem;

}



.section4 .intro .title {

	font-size : 48px;

	font-weight: bold;

	text-shadow: 0px 8px 5px #000000;

}



.section4 .intro .tokenomic {

	font-size : 40px;

	font-weight: bold;

	position:relative;



}

.tokenomic div{

	position: absolute;

	background: linear-gradient(180deg, #EFCD99 -6%, #B37441 76%, #E5AE6E 220%);

	top: 50%;

	left: 50%;

	font-size : 40px;

	transform: translate(-50%, -50%);

	background-clip: text;

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

	text-wrap: nowrap;

}

.tokenomic:after {

	font-size : 40px;

  text-shadow: 0px 6px 5px #000;

  color: transparent;

}



.tokenomic:after {

	font-size : 40px;

    content: 'NUTX TOKENOMICS';

  }



.section4 .intro .token {

	font-size : 50px;

	font-weight: bold;

	position:relative;

}

.token div {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	font-size : 50px;



	background: linear-gradient(171.93deg, #FFFFFF 33.59%, #DBA366 100.63%);

	background-clip: text;

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

}

.token:after {

	font-size : 50px;

  text-shadow: 0px 6px 5px #000;

  color: transparent;

}



.token:after {

	font-size : 50px;

    content: '1,000,000,000,000,000';

  }



.section4 .chart {

	z-index: 3;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -30%);

	width: 100%;

}

.section4 .chart-content {

	position:relative;

	display: flex;

	justify-content: center;

	width: 100%;

}

.chart-content .title {

	font-size: 50px;

	font-weight: 500;

}

.chart-content .desc {

	font-size: 24px;

}

.chart-content .chart-left, .chart-content .chart-right {

	position:absolute;

	text-align: left;

	max-width: 250px;

}

.chart-content .chart-left .position-relative:before {

	content: "";

	width: 150px;

	height: 50px;

	background: url('img/pt-2.png');

	background-repeat: no-repeat;

	background-size: 150px;

	position: absolute;

	top: 15px;

	right: -40%;

	z-index: 6;

}

.chart-content .chart-left {

	left: 13%;

  	top: 20%;

}

.chart-content .chart-right {

	bottom: 0;

	right: 10%;

	text-align:left;

}

.chart-content .chart-right .position-relative:before {

	content: "";

	width: 150px;

	height: 50px;

	background: url('img/pt-1.png');

	background-size: 150px;

	background-repeat: no-repeat;

	position: absolute;

	top: -10%;

	left: -70%;

	z-index: 6;

}

.chart-content .chart-right .position-relative:after {

	content: "";

	width: 350px;

	height: 350px;

	background: url('img/ct-4.png');

	background-size: 350px;

	background-repeat: no-repeat;

	position: absolute;

	top: -220%;

	left: -30%;

	z-index: 6;

}

.section4-div .mobile-ct4 {

	display: none;

}



.section5 {

	padding: 0 5rem;

	padding-bottom: 6rem;

}

.section5-div{

	display: flex;

	flex-direction: column;

	align-items:center;

	gap: 3rem;

}

.section5 .experience {

	display: flex;

	flex-direction: column;

	align-items:center;

	gap: 1rem;

}

.section5 .experience .title {

	font-family: "Oxanium", sans-serif;

	font-size : 40px;

	font-weight: bold;

	text-shadow: 0px 8px 5px #000000;



}

.section5 .experience .desc {

	font-size : 20px;

	text-align: left;

	width: 70%;



}

.section5 .security .title {

	font-family: "Oxanium", sans-serif;

	font-size : 32px;

	font-weight: bold;



}





.section5 .security .content {

	display: flex;

	flex-direction: column;

	justify-content: center;

	gap: 2rem;

	max-width: 50%;

}



.section5 .security .sub-title {

	font-size: 26px;

	font-weight: 600;

}

.section5 .security .sub-desc {

margin-top: 10px;

	font-size: 18px;

	line-height: 32px;

}





.section5 .security {

	display: flex;

	text-align: left;

	justify-content:center;

	gap: 4rem;



}

.security-img {

	max-width: 400px;

}



.section7 {

	background: var(--primary-1);

	padding: 62px 0;

}

.section7-div {



	display: flex;

	flex-direction: column;

	gap: 20px;

}

.section7 .title {

	font-family: "Oxanium", sans-serif;

	font-size : 40px;

	font-weight: bold;

	text-shadow: 0px 8px 5px #000000;

}

.section7 .content-1 {

	font-weight: bold;

	font-size: 34px;

}

.section7 .content-2 {

	font-size: 28px;

}



.footer-content {

	padding: 50px 0;

	display: flex;

	justify-content:space-between;

}

.footer-content > div{

	flex: 1;

}

.footer-logo .logo {

	width: 280px;

}

.footer-title {

	font-family: "Oxanium", sans-serif;

	font-size: 20px;

	font-weight: bold;

	text-shadow: 0px 2px 5px #000000;

	text-align: left;

}

.footer-content ul {

	list-style-type: none !important;

	text-align: left;

	max-width: 200px;

	padding: 0;

	font-size: 18px;

	line-height: 30px;

}

.footer-feature, .footer-document {

	display:flex;

	flex-direction: column;

}

.footer-social .footer-title {

	text-align: center;

}

.footer-social-icon {

	margin-top: 30px;

	display:flex;

	gap:2rem;

	justify-content:center;

	align-items:center;

}









#preloader {

	position: fixed !important;

	width: 100% !important;

	height: 100vh !important;

	background-color: rgba(106, 56, 33, 0.9) !important;

	z-index: 999;

}



#preloader .cus-loading {

	position: fixed !important;

	width: 100% !important;

	height: 100vh !important;

	background: url('favicon.png') no-repeat center center !important;

	background-size: 200px !important;

	top: 50%;

	left: 50%;

	transform: scale(1) translate(-50%, -50%);

	transform: -webkit-translate(-50%, -50%);

	transform: -moz-translate(-50%, -50%);

	transform: -ms-translate(-50%, -50%);

	transform-origin: center;

	animation: flash 800ms ease infinite alternate;

}



.preloader-hide {

	display:none;

}

@media only screen and (max-width: 767px) {

	header .mobile-nav {

		display: inline-block;

	}

	header svg.logo {

		width: 130px;

	}

	header .web-nav {

		display: none;

	}

	.section1-intro {

		top: -10%;

		left: -24%;

		transform: scale(.4) translate(0, 0);

	}

	.section1-5 {

	background: linear-gradient(to top, #6A3821 40%, rgba(158, 83, 49, .8) 90%, rgba(208, 110, 65, 0) 100%);  margin-top: -4rem;

}

	.section1-5 .title {

		font-size : 20px;

		margin: 0 2rem;

	}

	.section1-5 .desc {

		padding: 0 16px;

	font-size : 14px;

	line-height: 18px;

	}

	.section1-5 .btn {

		width: 160px;

		margin: 1rem 0;

	}



	.section3 .title {

		font-size : 28px;

	}

	.section3 .service {

		flex-direction: column;

		gap: 4rem;

		padding: 16px 1rem;

		padding-bottom: 2rem;

	}

	.service-detail {

		width: 100%;

	}

	.service-detail img {

		width: 100%;

	}

	.service-detail .title {

		font-size : 20px;

	}

	.service-detail .desc {

		font-size : 16px;

		line-height: 28px;

	}



	.section7 .title {

		font-size : 20px;

	}

	.section7 .content-1 {

		font-weight: bold;

		font-size: 24px;

	}

	.section7 .content-2 {

		font-size: 18px;

	}



	.connect-btn {

		font-size: 14px;

		padding: 4px 12px;

	}



	.footer-content {

		flex-direction:column;

		gap: 3rem;

	}

	.footer-title {

	font-size: 20px;

}

.section4 {

	padding: 4rem 0;

}

.section4:after{

background: linear-gradient(to bottom, var(--primary-2) 0%, rgba(158, 83, 49, .7) 17%, rgba(158, 83, 49, 0) 38%, rgba(158, 83, 49, 0) 30%, rgba(208, 110, 65, 0) 65%, var(--primary-2) 80%);

}

.section4 .intro {

	gap: .5rem;

  top: 5%;

}

.section4 .intro .title {

	font-size : 20px;

}



.section4 .intro .tokenomic {

	font-size : 20px;



}

.tokenomic div{

	font-size : 20px;

}

.tokenomic:after {

	font-size : 20px;

}



.tokenomic:after {

	font-size : 20px;

  }



.section4 .intro .token {

	font-size : 20px;

}

.token div {

	font-size : 20px;

}

.token:after {

	font-size : 20px;

}



.token:after {

	font-size : 20px;

  }





  .section4 .chart {

	transform: translate(-50%, -40%);

}

.chart-img {

	width: 100px;

}

.chart-content .title {

	font-size: 16px;

}

.chart-content .desc {

	font-size: 10px;

}

.chart-content .chart-left, .chart-content .chart-right {

	position:absolute;

	text-align: left;

	max-width: 100px;

}

.chart-content .chart-left .position-relative:before {

	content: "";

	width: 70px;

	height: 70px;

	background: url('img/pt-2.png');

	background-repeat: no-repeat;

	background-size: 70px;

	position: absolute;

	top: -30%;

	right: -15%;

	z-index: 6;

}

.chart-content .chart-left {

	left: 50%;

  	top: 50%;

	transform: translate(-155%, -50%);

	text-align: center;

}

.chart-content .chart-right {

	left: 50%;

  	top: 50%;

	transform: translate(63%, 98%);

	text-align:center;

}

.chart-content .chart-right .position-relative:before {

	content: "";

	width: 70px;

	height: 70px;

	background: url('img/pt-1.png');

	background-size: 70px;

	background-repeat: no-repeat;

	position: absolute;

	top: -68%;

	left: -20%;

	z-index: 6;

}

.chart-content .chart-right .position-relative:after {

  width: 100px;

  height: 100px;

  background-size: 100px;

  top: -220%;

  left: -7%;

}

.section4-div .mobile-ct4 {

	display: block;

	position:absolute;

	bottom: 0%;

	left:50%;

	transform: translate(-50%, 0);

	z-index: 6;

}



.section4-div .mobile-ct4 img{

	width: 180px;



}



.section5 {

	padding: 1rem 2rem;

	padding-bottom: 4rem;

}



.section5 .experience .title {

	font-size : 26px;



}

.section5 .experience .desc {

	font-size : 18px;

	line-height: 28px;

	width: 100%;



}

.section5 .security .title {

	font-size : 22px;

}





.section5 .security .content {

	display: flex;

	flex-direction: column;

	justify-content: center;

	gap: 2rem;

	max-width: 100%;

}



.section5 .security .sub-title {

	font-size: 20px;

	font-weight: 600;

}

.section5 .security .sub-desc {

	font-size: 16px;

}





.section5 .security {

	flex-direction: column;

  gap: 2rem;

}

.security-img {

	max-width: 100%;

}







.footer-feature, .footer-document {

	display:flex;

	flex-direction: column;

	padding: 0 2rem;

}



#preloader .cus-loading {

	background-size: 100px !important;

}

}

















.gelatine {

	animation: gelatine 0.5s infinite;

}

@keyframes gelatine {

from, to { transform: scale(1, 1); }

	25% { transform: scale(0.9, 1.1); }

	50% { transform: scale(1.1, 0.9); }

75% { transform: scale(0.95, 1.05); }

}



.spin {

	animation: spin 1s infinite linear;

}

@keyframes spin {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}



.elastic-spin {

	animation: elastic-spin 1s infinite ease;

}

@keyframes elastic-spin {

from { transform: rotate(0deg); }

to { transform: rotate(720deg); }

}



.pulse {

	animation: pulse 1s infinite ease-in-out alternate;

}

@keyframes pulse {

from { transform: scale(0.8); }

to { transform: scale(1.2); }

}



.flash {

	animation: flash 500ms ease infinite alternate;

}

@keyframes flash {

from { opacity: 1; }

to { opacity: 0; }

}



.hithere {

	animation: hithere 1s ease infinite;

}

@keyframes hithere {

  30% { transform: scale(1.2); }

  40%, 60% { transform: rotate(-20deg) scale(1.2); }

  50% { transform: rotate(20deg) scale(1.2); }

  70% { transform: rotate(0deg) scale(1.2); }

  100% { transform: scale(1); }

}



.grow {

  animation: grow 2s ease infinite;

}

@keyframes grow {

  from { transform: scale(0); }

  to { transform: scale(1); }

}



.fade-in {

  animation: fade-in 2s linear;

}

@keyframes fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}



.fade-out {

  animation: fade-out 2s linear;

}

@keyframes fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}



.bounce {

  animation: bounce 2s ease;

}

@keyframes bounce {

    70% { transform:translateY(0%); }

    80% { transform:translateY(-15%); }

    90% { transform:translateY(0%); }

    95% { transform:translateY(-7%); }

    97% { transform:translateY(0%); }

    99% { transform:translateY(-3%); }

    100% { transform:translateY(0); }

}



.bounce2 {

  animation: bounce2 2s ease;

}

@keyframes bounce2 {

	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}

	40% {transform: translateY(-30px);}

	60% {transform: translateY(-15px);}

}



.shake {

  animation: shake 2s ease infinite;

}

@keyframes shake {

	0%, 100% {transform: translateX(0);}

	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}

	20%, 40%, 60%, 80% {transform: translateX(10px);}

}



.flip {

	backface-visibility: visible !important;

	animation: flip 2s ease infinite;

}

@keyframes flip {

	0% {

		transform: perspective(400px) rotateY(0);

		animation-timing-function: ease-out;

	}

	40% {

		transform: perspective(400px) translateZ(150px) rotateY(170deg);

		animation-timing-function: ease-out;

	}

	50% {

		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);

		animation-timing-function: ease-in;

	}

	80% {

		transform: perspective(400px) rotateY(360deg) scale(.95);

		animation-timing-function: ease-in;

	}

	100% {

		transform: perspective(400px) scale(1);

		animation-timing-function: ease-in;

	}

}



.swing {

	transform-origin: top center;

	animation: swing 2s ease infinite;

}

@keyframes swing {

	20% { transform: rotate(15deg); }

	40% { transform: rotate(-10deg); }

	60% { transform: rotate(5deg); }

	80% { transform: rotate(-5deg); }

	100% { transform: rotate(0deg); }

}



.wobble {

  animation: wobble 2s ease infinite;

}

@keyframes wobble {

  0% { transform: translateX(0%); }

  15% { transform: translateX(-25%) rotate(-5deg); }

  30% { transform: translateX(20%) rotate(3deg); }

  45% { transform: translateX(-15%) rotate(-3deg); }

  60% { transform: translateX(10%) rotate(2deg); }

  75% { transform: translateX(-5%) rotate(-1deg); }

  100% { transform: translateX(0%); }

}



.fade-in-down {

  animation: fade-in-down 2s ease ;

}

@keyframes fade-in-down {

  0% {

    opacity: 0;

    transform: translateY(-20px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



.fade-in-left {

  animation: fade-in-left 2s ease ;

}

@keyframes fade-in-left {

  0% {

    opacity: 0;

    transform: translateX(-20px);

  }

  100% {

    opacity: 1;

    transform: translateX(0);

  }

}



.fade-out-down {

  animation: fade-out-down 2s ease ;

}

@keyframes fade-out-down {

  0% {

    opacity: 1;

    transform: translateY(0);

  }

  100% {

    opacity: 0;

    transform: translateY(20px);

  }

}



.fade-out-right {

  animation: fade-out-right 2s ease ;

}

@keyframes fade-out-right {

  0% {

    opacity: 1;

    transform: translateX(0);

  }

  100% {

    opacity: 0;

    transform: translateX(20px);

  }

}



.bounce-in {

  animation: bounce-in 2s ease ;

}

@keyframes bounce-in {

  0% {

    opacity: 0;

    transform: scale(.3);

  }

  50% {

    opacity: 1;

    transform: scale(1.05);

  }

  70% { transform: scale(.9); }

  100% { transform: scale(1); }

}



.bounce-in-right {

  animation: bounce-in-right 2s ease ;

}

@keyframes bounce-in-right {

  0% {

    opacity: 0;

    transform: translateX(2000px);

  }

  60% {

    opacity: 1;

    transform: translateX(-30px);

  }

  80% { transform: translateX(10px); }

  100% { transform: translateX(0); }

}



.bounce-out {

  animation: bounce-out 2s ease ;

}

@keyframes bounce-out {

  0% { transform: scale(1); }

  25% { transform: scale(.95); }

  50% {

    opacity: 1;

    transform: scale(1.1);

  }

  100% {

    opacity: 0;

    transform: scale(.3);

  }

}



.bounce-out-down {

  animation: bounce-out-down 2s ease ;

}

@keyframes bounce-out-down {

  0% { transform: translateY(0); }

  20% {

    opacity: 1;

    transform: translateY(-20px);

  }

  100% {

    opacity: 0;

    transform: translateY(20px);

  }

}



.rotate-in-down-left {

  animation: rotate-in-down-left 2s ease ;

}

@keyframes rotate-in-down-left {

  0% {

    transform-origin: left bottom;

    transform: rotate(-90deg);

    opacity: 0;

  }

  100% {

    transform-origin: left bottom;

    transform: rotate(0);

    opacity: 1;

  }

}



.rotate-in-up-left {

  animation: rotate-in-up-left 2s ease ;

}

@keyframes rotate-in-up-left {

  0% {

    transform-origin: left bottom;

    transform: rotate(90deg);

    opacity: 0;

  }

  100% {

    transform-origin: left bottom;

    transform: rotate(0);

    opacity: 1;

  }

}



.hinge {

  animation: hinge 2s ease ;

}

@keyframes hinge {

  0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }

  20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }

  40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }

  80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }

  100% { transform: translateY(700px); opacity: 0; }

}



.roll-in {

  animation: roll-in 2s ease ;

}

@keyframes roll-in {

  0% {

    opacity: 0;

    transform: translateX(-100%) rotate(-120deg);

  }

  100% {

    opacity: 1;

    transform: translateX(0px) rotate(0deg);

  }

}



.roll-out {

  animation: roll-out 2s ease ;

}

@keyframes roll-out {

    0% {

    opacity: 1;

    transform: translateX(0px) rotate(0deg);

  }

  100% {

    opacity: 0;

    transform: translateX(100%) rotate(120deg);

  }

}