* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  cursor: default;
}

img {
  width: 100%;
}

@font-face {
  font-family: AvenirNext-light;
  src: url(../fonts/AvenirNextLTPro-It.html);
}

@font-face {
  font-family: avenir;
  src: url(../fonts/AvenirNextLTPro-Regular.html);
}

@font-face {
  font-family: AvenirNext-Bold;
  src: url(../fonts/AvenirNextLTPro-Bold.html);
}

a {
  text-decoration: none;
  cursor: pointer;
}

li {
  list-style: none;
  font-size: 1vw;
  line-height: 1.3vw;
  color: #ffffff;
  font-family: "Georama";
  font-style: normal;
  font-weight: 400;
  font-size: 1vw;
}

h2 {
  font-family: AvenirNext-Bold;
  font-style: normal;
  font-weight: 900;
  font-size: 4vw;
  line-height: 4vw;
  color: #ffffff;
}

h3 {
  color: #fff;
  font-size: 2.5vw;
  font-family: AvenirNext-Bold;
  font-weight: 900;
  text-transform: capitalize;
}

h4 {
  font-family: AvenirNext-Bold;
  color: #fff;
  font-size: 2vw;
  font-weight: 900;
}

h5 {
  font-family: "Georama", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.2vw;
  letter-spacing: 0.01em;
  color: #ffffff;
}

p {
  font-family: avenir;
  color: #fff;
  font-size: 1vw;
  line-height: 1.8vw;
}

.button {
  background: linear-gradient(180deg, #f5bd00 0%, #ffdc1c 100%);
  border: 6px solid #ffe638;
  box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.15);
  border-radius: 13px;
  font-family: "Press Start 2P";
  font-weight: 400;
  font-size: 1vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #040303;
  padding: 1.5vw 2vw;
  transition: all 1s;
}

a.button:hover {
  background: linear-gradient(180deg, #f500d4 0%, #ffdc1c 100%);
}

.text-center {
  text-align: center;
}


.left,
.right {
  width: 50%;
}

.navbar-toggle {
  display: none;
  cursor: pointer;
}

.navbar-toggle span {
  display: block;
  width: 7vw;
  height: 1.5vw;
  margin: 0.7vw;
  background: linear-gradient(271.36deg, #fe3939 50.01%, #ffff14 72.39%);
  border-radius: 50px;
  transition: all 0.5s;
}

.navbar-toggle span:nth-child(2) {
  width: 5vw;
}

/* -------------------------------------------Navbar Management------------------
-------------------- */

.header {
  width: 100%;
  position: fixed;
  z-index: 10000;
}

.header .navbar {
  padding: 0vw 5vw;
  width: 100%;
  height: auto;
  background: transparent;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.header .navbar .left-side-menu {
  width: 20%;
}

.header .navbar .left-side-menu a img {
  padding: 0.5vw 0;
  width: 100%;
  cursor: pointer;
}

.center-menu {
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 1vw;
}

.center-menu a {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.center-menu a .effect {
  width: 1vw;
  height: 1vw;
}

.header .center-menu a li {
  padding: 0.5vw 1.5vw;
  font-family: AvenirNext-Bold;
  font-style: normal;
  font-size: 1.1vw;
  line-height: 2vw;
  color: #fff;
  transition: all 0.5s;
  background: #081914;
  border-radius: 1vw;
}

.header .center-menu a li:hover {
  background: #081914;
  transform: translateY(-0.5vw);
}

.header .center-menu .nav-links a .links:hover {
  background: #081914;
  position: relative;
  top: -0.2vw;
}

.center-menu .social-icons {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  margin-left: 2vw;
}

.center-menu .social-icons a img {
  width: 3vw;
  transition: all 0.7s;
}

.center-menu .social-icons a img:hover {
  transform: translateY(-10px);
}

/* --------------------parent--------------------------
--------------------- */

.parent-sec {
  padding-top: 2vw;
}

/* --------------------welcome--------------------------
--------------------- */

.welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3vw 10vw;
}

.welcome .right img {
  /* animation: fadeOut 3s ease-in-out 0s infinite alternate; */
}

.welcome .left {
  width: 45%;
}

.welcome .right {
  width: 55%;
}

.welcome .left h1 {
  color: #fff;
  font-size: 4.5vw;
  font-family: AvenirNext-Bold;
  font-weight: 900;
  line-height: 5vw;
  text-transform: capitalize;
}

.welcome .left p {
  padding-right: 20%;
  margin: 1.5vw 0;
}

.welcome .left img {
  width: 12vw;
}

/* -------------------------about-------------
-------------------------------------------------------------- */

.about {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5vw 10vw;
}

.about .left,
.about .right {
  width: 48%;
}

.about .right p {
  margin-top: 1.5vw;
}

/* -------------------------ravenomics-------------
-------------------------------------------------------------- */

.ravenomics {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5vw 0;
  gap: 2vw;
}

.ravenomics .total-supply {
  color: #f59706;
}

.ravenomics .tax {
  display: inline-block;
  border-radius: 37px;
  padding: 1.2vw 3vw;
  background: rgba(255, 255, 255, 0.01);
  box-shadow: 0px 1px 40px 0px rgba(255, 185, 121, 0.2) inset,
    0px 4px 18px 0px rgba(255, 232, 20, 0.3) inset,
    0px 98px 100px -48px rgba(229, 53, 44, 0.3) inset,
    0px -82px 68px -64px rgba(255, 3, 0, 0.3) inset,
    0px 7px 11px -4px #fff inset,
    0px 39px 56px -36px rgba(255, 255, 255, 0.5) inset;
  backdrop-filter: blur(50px);
}

.ravenomics .symbol {
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ravenomics .symbol .left {
  width: 40%;
  background: linear-gradient(90deg, rgba(22, 8, 25, 0) 4%, #63398b 47.62%);
  padding: 1.5vw;
}

.ravenomics .symbol .left h3,
.ravenomics .symbol .left h4 {
  text-align: right;
}

.ravenomics .symbol .left h3 {
  font-family: avenir;
}

.ravenomics .symbol .right {
  width: 40%;
  background: linear-gradient(-90deg, rgba(22, 8, 25, 0) 4%, #63398b 41.9%);
  padding: 1.5vw;
  border-left: 1px solid rgba(255, 255, 255, 0.664);
}

.ravenomics .symbol .right h3 {
  font-family: avenir;
}

/* --------------------utilization--------------------------
--------------------- */

.utilization {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3vw 10vw;
  background: rgb(227, 51, 42);
  background: linear-gradient(
    0deg,
    rgba(227, 51, 42, 1) 0%,
    rgba(255, 193, 139, 1) 45%
  );
}

.utilization .left {
  width: 45%;
}

.utilization .right {
  width: 35%;
}

.utilization .right img {
  margin-bottom: -5vw;
}

.utilization .left h2 {
  color: #fff;
  font-size: 4.5vw;
  font-family: AvenirNext-Bold;
  font-weight: 900;
  line-height: 5vw;
  text-transform: capitalize;
}

.utilization .left p {
  padding-right: 20%;
  margin: 1.5vw 0;
}

.utilization .left img {
  width: 12vw;
}

/* -------------------------marketing-------------
-------------------------------------------------------------- */

.marketing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5vw 10vw;
  background: url("../images/marketing-bg.html") no-repeat;
  background-position: center;
  background-size: cover;
}

.marketing .left,
.about .marketing {
  width: 48%;
}

.marketing .right p {
  margin-top: 1.5vw;
  margin-bottom: 1.5vw;
}

.marketing .right a img {
  width: 12vw;
}

/* -----------------------------------rmap--------------
----------------- */

.roadmap {
  width: 100%;
  height: auto;
  padding: 5vw 15vw;
  text-align: center;
}

.roadmap .img2 {
  display: none;
}

.roadmap img {
  width: 100%;
}

/* -------------------------footer-------------
-------------------------------------------------------------- */

.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: url("../images/bg.html") no-repeat;
  background-size: cover;
  background-position: center;
  padding: 10vw 9vw 0vw 9vw;
}

.footer.logo {
  flex: 40%;
}

.footer .logo .para1 {
  margin-bottom: 2vw;
}

.footer.logo p:nth-child(0) {
  margin-bottom: 2vw;
}

.footer .wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  /* width: 80%; */
}

.footer .wrap a {
  color: #fff;
}

.footer .menues,
.footer .resources,
.footer .social {
  width: 30%;
}

.footer .logo img {
  width: 35%;
  margin-bottom: 1.5vw;
}

.footer h5 {
  font-size: 1.7vw;
  font-weight: 700;
  margin-bottom: 2vw;
}

.footer ul li {
  margin-bottom: 1.3vw;
}

.footer .socials .social-links {
  display: flex;
  align-items: center;
  gap: 0.5vw 1vw;
  padding: 1vw;
}

.footer .socials .social-links img {
  width: 3vw;
  padding: 0.5vw;
  transition: all 0.5s;
}

.footer .socials .social-links img:hover {
  transform: translateY(-0.5vw);
  background: #af0f9a;
  border-radius: 0.5vw;
}

/* --------------------------------website Responsive--------------
-------------------- */

/* ----------------------------@ 1280px--------
------- */

@media (max-width: 1280px) {
  /* -------------------------navbar 1280px--------------------------
    ----------------------- */
  .header .navbar .left-side-menu a img {
    width: 70%;
  }
  .center-menu {
    gap: 1.5vw;
  }
  .center-menu a {
    gap: 1vw;
  }
  .header .center-menu .nav-links {
    gap: 1.5vw;
  }
  .header .center-menu .nav-links a .links {
    width: 3vw;
    padding: 0.1vw;
  }
  .header .center-menu a li {
    font-size: 1.2vw;
  }
  .header .navbar .left-side-menu {
    width: 20%;
  }
  .center-menu {
    width: 80%;
  }
}

/* ----------------------------@ 980px--------
------- */

@media (max-width: 980px) {
  .roadmap {
    width: 100%;
    height: auto;
    padding: 5vw 10vw;
    text-align: center;
  }
  .roadmap h2 {
    margin-bottom: 3vw;
  }
  .roadmap .img1 {
    display: none;
  }
  .roadmap .img2 {
    display: flex;
  }
  .roadmap img {
    width: 100%;
  }
  .header .navbar {
    padding-top: 1vw;
    padding-bottom: 0.3vw;
  }
  .header .navbar .left-side-menu {
    width: 30%;
  }
  .header .navbar .left-side-menu a img {
    width: 70%;
    height: auto;
    position: relative;
  }
  .header .navbar .left-side-menu a {
    font-size: 3.5vw;
    font-weight: 800;
    gap: 1vw;
  }
  .header .center-menu a li {
    font-size: 4vw;
    line-height: 5vw;
    padding: 2vw;
    font-weight: 600;
    background-color: transparent;
  }
  .header .center-menu a li:hover {
    border-radius: 0vw;
    background: transparent;
    top: 0;
    transform: scale(1.1);
  }
  .header .center-menu .tg:hover li {
    color: #000000;
  }
  .header .center-menu .btn {
    font-size: 4vw;
    line-height: 5vw;
    padding: 2vw;
  }
  .center-menu {
    display: flex;
    width: 100%;
    height: 70vw;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
    padding-top: 5vw;
    margin-top: -900px;
    transition: all 0.5s ease-in-out;
    position: absolute;
    top: 9.3vw;
    right: 0;
    background-color: #081914;
    z-index: -1;
    /* border-left: 2px solid rgba(255, 255, 20, 0.5);
    border-top: 2px solid rgba(255, 255, 20, 0.5); */
    border-bottom-left-radius: 5vw;
    border-bottom-right-radius: 5vw;
  }
  .center-menu.active {
    margin-top: 0;
    background-color: #081914;
  }
  .center-menu .tg {
    background-color: #081914;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: all 0s;
  }
  .center-menu .tg:hover {
    background: #fdef19;
  }
  .header .center-menu .nav-links {
    display: flex;
    gap: 2vw;
  }
  .header .center-menu .nav-links a .links {
    width: 7vw;
    padding: 0.2vw;
    background: linear-gradient(180deg, #fdef19 0%, #e60012 100%);
    border-radius: 0.5vw;
    transition: all 0s;
  }
  .navbar-toggle span {
    display: block;
    width: 5vw;
    height: 1vw;
    margin: 0.7vw;
    background: linear-gradient(271.36deg, #ffff14 50.01%, #ffff14 72.39%);
    border-radius: 50px;
    transition: all 0.5s;
  }
  .navbar-toggle span:nth-child(2) {
    width: 3.5vw;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-toggle.active span:nth-child(1) {
    transition-delay: 0.1s;
    transform: rotate(45deg) translate(1.3vw, 1.3vw);
  }
  .navbar-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .navbar-toggle.active span:nth-child(3) {
    transition-delay: 0.1s;
    transform: rotate(-45deg) translate(0vw, 0vw);
    position: relative;
    top: -1.6vw;
  }
  .how-to-buy .left .box {
    height: 16vw;
  }
  .how-to-buy .left h5 {
    top: -14.5vw;
  }
  .how-to-buy .left a {
    top: -13.5vw;
  }
}

/* --------------------------------whitepaper--------------
-------------------- */

/* ----------------------------@ 600px--------
------- */

@media (max-width: 600px) {
  h2 {
    font-family: AvenirNext-Bold;
    font-style: normal;
    font-weight: 900;
    font-size: 10vw;
    line-height: 10vw;
    color: #ffffff;
    text-align: center;
  }
  h1 {
    font-size: 11.5vw;
    line-height: 13vw;
  }
  h3 {
    text-align: center;
  }
  h4 {
    font-family: AvenirNext-Bold;
    font-style: normal;
    font-weight: 700;
    font-size: 5vw;
    line-height: 6vw;
    color: #ffffff;
    text-align: center;
  }
  h5 {
    font-family: "Avenir Next";
    font-style: normal;
    font-weight: 700;
    font-size: 3vw;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-align: center;
  }
  p {
    font-style: normal;
    font-weight: 400;
    font-size: 2.5vw;
    line-height: 3vw;
    font-family: avenirNext-regular;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-align: center;
  }
  .button {
    background: linear-gradient(180deg, #f5bd00 0%, #ffdc1c 100%);
    border: 6px solid #ffe638;
    box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.15);
    border-radius: 13px;
    font-family: "Press Start 2P";
    font-weight: 400;
    font-size: 2.5vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #040303;
    padding: 1.5vw 3vw;
  }
  .text-center {
    text-align: center;
  }
  .left,
  .right {
    width: 100%;
  }
  .header .navbar {
    padding-top: 3vw;
  }
  .header .navbar .left-side-menu {
    width: 30%;
  }
  .header .navbar .left-side-menu a img {
    width: 100%;
    height: auto;
    position: relative;
  }
  .header .center-menu a li {
    font-size: 3.5vw;
    padding: 3.5vw;
  }
  .center-menu {
    gap: 5vw;
    height: auto;
    padding-top: 5vw;
    padding-bottom: 3vw;
    z-index: -1;
    top: 12vw;
  }
  .center-menu .social-icons {
    gap: 5vw;
  }
  .center-menu .social-icons a img {
    width: 8vw;
  }
  .header .center-menu .nav-links {
    display: flex;
    gap: 3vw;
  }
  .header .center-menu .nav-links a .links {
    width: 10vw;
    padding: 0.2vw;
    background: linear-gradient(180deg, #fdef19 0%, #e60012 100%);
    border-radius: 0.5vw;
    transition: all 0s;
  }
  .navbar-toggle span {
    display: block;
    width: 7vw;
    height: 1.5vw;
    margin: 0.7vw;
    background: linear-gradient(271.36deg, #ffff14 50.01%, #ffff14 72.39%);
    border-radius: 50px;
    transition: all 0.5s;
  }
  .navbar-toggle span:nth-child(2) {
    width: 5vw;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(1.3vw, 1.3vw);
  }
  .navbar-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .navbar-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(0vw, 0vw);
    position: relative;
    top: -2.5vw;
  }
  .parent-sec {
    padding-top: 2vw;
  }
  /* --------------------welcome--------------------------
    --------------------- */
  .welcome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3vw 10vw;
  }
  .welcome .left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 2;
  }
  .welcome .right {
    width: 100%;
    margin-right: 13vw;
  }
  .welcome .left h1 {
    color: #fff;
    font-size: 11.5vw;
    font-family: AvenirNext-Bold;
    font-weight: 900;
    line-height: 12.5vw;
    text-transform: capitalize;
    align-items: center;
  }
  .welcome .left p {
    padding-right: 0%;
    margin: 1.5vw 0;
    align-items: center;
  }
  .welcome .left img {
    width: 26vw;
    margin-top: 4vw;
  }
  /* -------------------------about-------------
    -------------------------------------------------------------- */
  .about {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 5vw 10vw;
  }
  .about .left,
  .about .right {
    width: 100%;
  }
  .about .right p {
    margin-top: 1.5vw;
  }
  /* -------------------------ravenomics-------------
    -------------------------------------------------------------- */
  .ravenomics {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5vw 0;
    gap: 4vw;
  }
  .ravenomics .total-supply {
    color: #f59706;
  }
  .ravenomics .tax {
    display: inline-block;
    border-radius: 37px;
    padding: 3vw 5vw;
    background: rgba(255, 255, 255, 0.01);
    box-shadow: 0px 1px 40px 0px rgba(255, 185, 121, 0.2) inset,
      0px 4px 18px 0px rgba(255, 232, 20, 0.3) inset,
      0px 98px 100px -48px rgba(229, 53, 44, 0.3) inset,
      0px -82px 68px -64px rgba(255, 3, 0, 0.3) inset,
      0px 7px 11px -4px #fff inset,
      0px 39px 56px -36px rgba(255, 255, 255, 0.5) inset;
    backdrop-filter: blur(50px);
  }
  .ravenomics .symbol {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ravenomics .symbol .left {
    width: 40%;
    background: linear-gradient(90deg, rgba(22, 8, 25, 0) 4%, #63398b 47.62%);
    padding: 3vw;
  }
  .ravenomics .symbol .left h3,
  .ravenomics .symbol .left h4 {
    text-align: right;
  }
  .ravenomics .symbol .left h3 {
    font-family: avenir;
  }
  .ravenomics .symbol .right {
    width: 40%;
    background: linear-gradient(-90deg, rgba(22, 8, 25, 0) 4%, #63398b 41.9%);
    padding: 3vw;
    border-left: 1px solid rgba(255, 255, 255, 0.664);
  }
  .ravenomics .symbol .right h3 {
    font-family: avenir;
    text-align: left;
  }
  .ravenomics .symbol .right h4 {
    text-align: left;
  }
  /* --------------------utilization--------------------------
    --------------------- */
  .utilization {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3vw 10vw;
    background: rgb(227, 51, 42);
    background: linear-gradient(
      90deg,
      rgba(255, 193, 139, 1) 0%,
      rgba(227, 51, 42, 1) 45%
    );
  }
  .utilization .left {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    order: 2;
  }
  .utilization .right {
    width: 100%;
    margin-bottom: 4vw;
  }
  .utilization .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .utilization .left h2 {
    color: #fff;
    font-size: 10vw;
    font-family: AvenirNext-Bold;
    font-weight: 900;
    line-height: 10vw;
    text-transform: capitalize;
  }
  .utilization .left p {
    padding-right: 0%;
    margin: 1.5vw 0;
  }
  .utilization .left img {
    width: 26vw;
    text-align: center;
    margin-top: 4vw;
  }
  /* -------------------------marketing-------------
    -------------------------------------------------------------- */
  .marketing {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 5vw 10vw;
  }
  .marketing .left,
  .marketing .right {
    width: 100%;
  }
  .marketing .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .marketing .right p {
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
  }
  .marketing .right a img {
    width: 26vw;
    margin-top: 4vw;
  }
  .footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    background: url("../images/bg.html") no-repeat;
    background-size: cover;
    background-position: center;
    padding: 20vw 5vw 0vw 5vw;
  }
  .footer .logo {
    flex: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    order: 2;
    padding-bottom: 2vw;
  }
  .footer .logo .para1 {
    margin-bottom: 2vw;
  }
  .footer.logo p:nth-child(0) {
    margin-bottom: 2vw;
  }
  .footer .wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    order: 1;
  }
  .footer .wrap .menues {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer .wrap .resources {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer .wrap .social {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer .logo img {
    width: 35%;
  }
  .footer h5 {
    font-size: 4vw;
    line-height: 4.5vw;
    font-weight: 700;
    margin-bottom: 2vw;
  }
  .footer ul li {
    font-size: 3vw;
    line-height: 4vw;
    margin-bottom: 1.3vw;
    text-align: center;
  }
  .footer .socials .social-links {
    display: flex;
    align-items: center;
    gap: 3vw;
    padding: 1vw;
  }
  .footer .socials .social-links img {
    width: 8vw;
  }
}

/* --------------------------------whitepaper--------------
-------------------- */

.tracking-in-expand {
  -webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.61, 0.355, 1)
    both;
  animation: tracking-in-expand 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-6-26 2:55:14
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */

@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}