/*---------------------Roots-----------------*/

:root {
    ---red: #e9413a;
    ---white: #ffffff;
    ---grey: #4a4a4a;
    ---black: #134ba1;
    --lightgrey: #858585;
    ---border:#eeeeee;
    ---yellow:#ffe127;
}

/*---------------------Roots-----------------*/
.hero{
    padding: 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 300px;
    background-image: url(img/herobackground.jpg);
}
.hero .container h1{
    color: var(---white);
    font-size: 70px;
}
.hero .container h1 span{
    color: var(---yellow);
}




@media (max-width:690px) {
    .hero .container h1{
        font-size: 50px;
    }
    .hero{
        height: 150px;
    }
}

@media (max-width:550px) {
    .hero .container h1{
        font-size: 40px;
    }
    .hero{
        height: 150px;
    }
}

@media (max-width:430px) {
    .hero .container h1{
        font-size: 30px;
    }
    .hero{
        height: 100px;
    }
}