.definition, .effect {
    text-align:center;
    color:#0f331e;
    background-color: #ecede8;
    font-family:'Montserrat', sans-serif;
    font-weight:300;
    font-size:46px;
    /* padding-top:2vh; */
    height: -30vh;
    overflow:hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
  } 

  .eutroph_def{
    text-align: center;
    
  }
  
  .definition, .effect{
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
  }
  
  .definition:first-of-type, .effect:first-of-type {    
    animation: showup 7s infinite;
  }
  
  .definition:last-of-type, .effect:last-of-type {
    width:0px;
    animation: reveal 7s infinite;
  }
  
  .definition:last-of-type span, .effect:last-of-type span {
    margin-left:-1555px;
    animation: slidein 7s infinite;
  }
  
  @keyframes showup {
      0% {opacity:0;}
      20% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  
  @keyframes slidein {
      0% { margin-left:-600px; }
      20% { margin-left:-600px; }
      35% { margin-left:0px; }
      100% { margin-left:0px; }
  }
  
  @keyframes reveal {
      0% {opacity:0;width:0px;}
      20% {opacity:1;width:0px;}
      30% {width:800px;}
      80% {opacity:1;}
      100% {opacity:0;width:800px;}
  }
  
  
  p.definition, p.effect {
    font-size:12px;
    color:#999;
    margin-top:10px;
  }

  @media(max-width: 988px) {

    .definition, .effect {
      text-align:center;
      color:#0f331e;
      background-color: #ecede8;
      font-family:'Montserrat', sans-serif;
      font-weight:300;
      font-size:26px;
      /* padding-top:2vh; */
      height: -30vh;
      overflow:hidden;
      -webkit-backface-visibility: hidden;
      -webkit-perspective: 1000;
      -webkit-transform: translate3d(0,0,0);
    } 
  
    .eutroph_def{
      text-align: center;
      
    }
    
    .definition, .effect{
      display:inline-block;
      overflow:hidden;
      white-space:nowrap;
    }
    
    .definition:first-of-type, .effect:first-of-type {    
      animation: showup 7s infinite;
    }
    
    .definition:last-of-type, .effect:last-of-type {
      width:0px;
      animation: reveal 7s infinite;
    }
    
    .definition:last-of-type span, .effect:last-of-type span {
      margin-left:-555px;
      animation: slidein 7s infinite;
    }
    
    @keyframes showup {
        0% {opacity:0;}
        20% {opacity:1;}
        80% {opacity:1;}
        100% {opacity:0;}
    }
    
    @keyframes slidein {
        0% { margin-left:-100px; }
        20% { margin-left:-100px; }
        35% { margin-left:0px; }
        100% { margin-left:0px; }
    }
    
    @keyframes reveal {
        0% {opacity:0;width:0px;}
        20% {opacity:1;width:0px;}
        30% {width:450px;}
        80% {opacity:1;}
        100% {opacity:0;width:450px;}
    }
    
    
    p.definition, p.effect {
      font-size:12px;
      color:#999;
      margin-top:10px;
    }
    
  }

  @media(max-width: 412px) {

    .definition, .effect {
      text-align:center;
      color:#0f331e;
      background-color: #ecede8;
      font-family:'Montserrat', sans-serif;
      font-weight:300;
      font-size:20px;
      /* padding-top:2vh; */
      height: -30vh;
      overflow:hidden;
      -webkit-backface-visibility: hidden;
      -webkit-perspective: 1000;
      -webkit-transform: translate3d(0,0,0);
    } 
  
    .eutroph_def{
      text-align: center;
      
    }
    
    .definition, .effect{
      display:inline-block;
      overflow:hidden;
      white-space:nowrap;
    }
    
    .definition:first-of-type, .effect:first-of-type {    
      animation: showup 7s infinite;
    }
    
    .definition:last-of-type, .effect:last-of-type {
      width:0px;
      animation: reveal 7s infinite;
    }
    
    .definition:last-of-type span, .effect:last-of-type span {
      margin-left:-55px;
      animation: slidein 7s infinite;
    }
    
    @keyframes showup {
        0% {opacity:0;}
        20% {opacity:1;}
        80% {opacity:1;}
        100% {opacity:0;}
    }
    
    @keyframes slidein {
        0% { margin-left:-50px; }
        20% { margin-left:-50px; }
        35% { margin-left:0px; }
        100% { margin-left:0px; }
    }
    
    @keyframes reveal {
        0% {opacity:0;width:0px;}
        20% {opacity:1;width:0px;}
        30% {width:350px;}
        80% {opacity:1;}
        100% {opacity:0;width:350px;}
    }
    
    
    p.definition, p.effect {
      font-size:12px;
      color:#999;
      margin-top:10px;
    }
    
  }