/*
COLORS:

Light green: #7ed56f
Medium green: #55c57a
Dark green: #28b485

*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: "Lato", sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:1.7;
    color:#777;
    padding:30px;
}

.header {
    height: 95vh;
    background-image: linear-gradient(
        to right bottom,rgba(126, 213, 111, 0.80),
        rgba(40, 180, 133, 0.80)),
        url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    clip-path:polygon(0 0, 100% 0, 100% 75vh, 0 100%);
    position:relative;
}

.logo-box{
    position:absolute;
    top:40px;
    left:40px;
}

.logo{
        height:35px;

}

.text-box{
    position:absolute;
    top:40%;
    left:50%;
    transform:translate(-50%,-50%);
}

.heading-primary{
    color:#fff;
    text-transform:uppercase;
    backface-visibility:hidden; /*remove shakiness in animation*/
}

.heading-primary-main {
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function:ease-out;
    /*animation-delay:3s;
     animation-iteration-count:3;
    */
}

.heading-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 17.4px;
    animation: moveInRight 1s ease-out;
}

@keyframes moveInLeft{
    0%{
        opacity:0;
        transform:translateX(-100px);
    }

    80% {
        transform: translateX(10px);
    }
    100%{
        opacity:1;
        transform:translate(0);
    }
}

@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }


}

.btn:link,
.btn:visited{
    text-transform:uppercase;
    text-decoration:none;
    padding:15px 40px;


}

.btn-white{
    background-color:#fff;
    color:#777;
}