/***** Global Style *****/
/**{
  font-family: Play;
}*/


/***** Global Slide *****/
.slide-right, .slide-left {
  width: 100%;
}

/***** Slide Right *****/
.slide-right {
  animation: 3s slide-right;
}
@keyframes slide-right {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}

/***** Slide Left *****/
.slide-left {
  animation: 3s slide-left;
}
@keyframes slide-left {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}


/***** FadeIn Underline *****/
/*.line {
  border-bottom: 3px solid red;
  width: 200px;
  margin: auto;
}*/
.fade-in {
  animation: fadeIn ease 3s;
}
@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/***** Marque *****/

/* marquee div container */
.marquee {
    font-size: 2vw;
    color: #ff0000;
    /*font-family: 'Courier New', Courier, monospace;*/
    height: 5.5vh;
    overflow: hidden;
    /*background-color: #000;*/
    position: relative;
}
/* nested div inside the container */
.marquee div {
    display: block;
    width: 200%;
    position: absolute; 
    overflow: hidden;
    animation: marquee 15s linear infinite;
}
/* span with text */
.marquee span {
    float: left;
    width: 50%;
}
/* keyframe */
@keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}