/* Hover underline and stablio */

/*Text highlights*/
.highlight p, h1 {
  display: inline;
  background-repeat: no-repeat;
  transition: all 500ms ease-in-out;
}

.v2 p {
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(#00ff00, #00ff00);
}
.v2:hover p {
  background-size: 100% 100%;
  color: #000f9f;
}

.v1 h1 {
  background-position: bottom left;
  background-size: 0% 5px;
  background-image: linear-gradient(#00ff00, #00ff00);
  padding-bottom: 5px;
  font-size: 1.6em;
}

.v1:hover h1 {
  background-size: 100% 5px;
}

.v1 h3 {
  background-position: bottom left;
  background-size: 0% 5px;
  background-image: linear-gradient(#00ff00, #00ff00);
  padding-bottom: 5px;
}

.v1:hover h3 {
  background-size: 100% 5px;
}

/*STABILO ANIMATION IN*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root{
    --bg-color: white;
}



h1{
    font-size: 3em;
    font-weight: normal;
}

.home-title span{
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 1.2;
}

.home-title span::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #00ff00;
    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
}

.home-title span::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
}

.home-title span:nth-of-type(1)::before,
.home-title span:nth-of-type(1)::after{
    animation-delay: 1s;
}

.home-title span:nth-of-type(2)::before,
.home-title span:nth-of-type(2)::after{
    animation-delay: 1.5s;
}

@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}
/*Text sliding in*/

.openFull {
  color:#000f9f;
  font-weight:300;
  font-size:3em;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

.open {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

.open:first-of-type {
  animation: showup 7s 1;
}

.open:last-of-type {
  width:0px;
  animation: reveal 7s 1;
}

.open:last-of-type span {
  margin-left:-355px;
  animation: slidein 7s 1;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:1;width:355px;}
}

.movingtext {
 height: 50px;
 overflow: hidden;
 position: relative;
}
.movingtext h1 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);
 transform:translateX(100%);
 /* Apply animation to this element */
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   {
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);
 }
 100% {
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%);
 }
}