/*============================================
 font_animation
============================================*/

@import url("https://fonts.googleapis.com/css?family=Heebo:900");

p {
  margin: 0;
  padding: 0;
  font-size: 7rem;
  line-height: 100%;
  letter-spacing: .3rem;
  color: #253057;
}
p.desc {
  padding: 1rem;
  font-size: 1.8rem;
  letter-spacing: .2rem;
  opacity: 0;
  transition: 2s 1.5s;
}

@media screen and (max-width: 1500px){
  p {
    font-size: 6rem;
  }
  p.desc {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 1024px){
  p {
    font-size: 5.2rem;
  }
  p.desc {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 768px){
p {
  margin: 0;
  padding: 0;
  font-size: 7rem;
  line-height: 104%;
  letter-spacing: .3rem;
  color: #253057;
}
  p {
    font-size: 3.7rem;
  }
  p.desc {
    font-size: 1.2rem;
  }	
}

@media screen and (max-width: 624px) {
p {
  margin: 0;
  padding: 0;
  font-size: 7rem;
  line-height: 110%;
  letter-spacing: .2rem;
  color: #253057;
}
  p {
    font-size: 2.3rem;
  }
  p.desc {
    font-size: 1.0rem;
  }
}

/*code sample from here*/
/*
[required code]
parent {
  opacity: 0;
  perspective: xxx; //3d effective dose
}
parent span {
  //flip effect
  transform : rotateY(xxxdeg);  //you can also use 'rotateX' together.  
	(transform-origin : xxx;) //If you want.  
  //fade effect
  opacity: 0;
}
*/

.ex1 {
  opacity: 0;
  perspective: 200px;
}
.ex1 span {
  transform: rotateY(-90deg);
  opacity: 0;
}

.ex2 {
  opacity: 0;
  perspective: 200px;
}
.ex2 span {
  transform: rotateY(-90deg) rotateX(45deg);
  transform-origin: -50% 75%;
  opacity: 0;
}

/*============================================
 text_blurring_animation
============================================*/

.ex1 span {
  color: transparent;
  animation: blur 10s ease-out infinite;
  -webkit-animation: blur 10s ease-out infinite;
}

.ex1 span:nth-child(1) {
  animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
}
.ex1 span:nth-child(2) {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.ex1 span:nth-child(3) {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.ex1 span:nth-child(4) {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.ex1 span:nth-child(5) {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.ex1 span:nth-child(6) {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
.ex1 span:nth-child(7) {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}

.ex2 span {
  color: transparent;
  animation: blur 10s ease-out infinite;
  -webkit-animation: blur 10s ease-out infinite;
}

.ex2 span:nth-child(1) {
  animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
}
.ex2 span:nth-child(2) {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.ex2 span:nth-child(3) {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.ex2 span:nth-child(4) {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.ex2 span:nth-child(5) {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.ex2 span:nth-child(6) {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
.ex2 span:nth-child(7) {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}

@keyframes blur {
  0%    {text-shadow:  0 0 100px #253057; opacity:0;}
  5%    {text-shadow:  0 0 90px #253057;}
  15%   {opacity: 1;}
  20%   {text-shadow:  0 0 0px #253057;}
  80%   {text-shadow:  0 0 0px #253057;}
  85%   {opacity: 1;}
  95%   {text-shadow:  0 0 90px #fff;}
  100%  {text-shadow:  0 0 100px #fff; opacity:0;}
}

@-webkit-keyframes blur {
  0%    {text-shadow:  0 0 100px #253057; opacity:0;}
  5%    {text-shadow:  0 0 90px #253057;}
  15%   {opacity: 1;}
  20%   {text-shadow:  0 0 0px #253057;}
  80%   {text-shadow:  0 0 0px #253057;}
  85%   {opacity: 1;}
  95%   {text-shadow:  0 0 90px #fff;}
  100%  {text-shadow:  0 0 100px #fff; opacity:0;}
}