/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

@-webkit-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@-moz-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/* slide up */

@-webkit-keyframes slideUp {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-moz-keyframes slideUp {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/*
|--------------------------------------------------------------------------
| HEADER 
|--------------------------------------------------------------------------
*/

@keyframes slide-up-fade-in{
    0% {
        opacity:0;
        transform:  translate(0px,40px)  ;
    }
    100% {
        opacity:1;
        transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes slide-up-fade-in {
    0% {
        opacity:0;
        -webkit-transform:  translate(0px,40px)  ;
    }
    100% {
        opacity:1;
        -webkit-transform:  translate(0px,0px)  ;
    }
}


@keyframes main-strips{
    0% {
	background-image: linear-gradient(to right, #29363B 0%, #29363B 100%);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: -2000px 0px;
    }
    50%{

    }
    100% {
 	background-image: linear-gradient(to right, #29363B 0%, #29363B 100%);
	background-position: 0px 0px;

    }
}



.happy-link {
	background: linear-gradient(to right, #29363B 0%, #29363B 100%);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: -2000px 0px;
	overflow: hidden;
	padding: 10px;
    }

 .happy-link-a {
 	-webkit-transition: background 1.2s ease-in-out 0s;
	transition: background 0.5s ease-in-out 0s;
	background: linear-gradient(to right, #29363B 0%, #29363B 100%);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	overflow: hidden;
	width: 70%;
	padding: 10px 15px;
	margin-left: -10px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
    }

.mainFeature__highlight--color{
    color:rgba(255,255,255,1);
    transition:0.5s ease-in 0.8s;
     -webkit-transition:0.5s ease-in 0.8s;

}

.happy-link2 {
	box-shadow: 15px 0 0 #29363B, -15px 0 0 #29363B;
	color: rgba(255,255,255,1);
	transition: background-position 0.8s linear 0s, box-shadow 0.2s linear 1s;
	padding: 10px;
	animation: main-strips ease-in 5s;
	animation-iteration-count: 1;
	animation-fill-mode:forwards; 

	-webkit-animation: main-strips ease-in 5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode:forwards;

    }