/* Header CSS */

.header-small {
    background-color: #A2C04E;
    background-image: url('../../images/hero.svg');
    background-position: 0 -350px;
    background-size: cover;
    height: 400px;
}

@media only screen and (max-width: 2100px) {
    
    .header-small,
    .admin__header {
        background-position: 0 -300px;
    }
}

@media only screen and (max-width: 1850px) {
    
    .header-small,
    .admin__header  {
        background-position: 0 -260px;
    }
}

@media only screen and (max-width: 1750px) {
    
    .header-small,
    .admin__header  {
        background-position: 0 -220px;
    }
}

@media only screen and (max-width: 1400px) {
    
    .header-small,
    .admin__header  {
        background-position: 0 -160px;
    }
}

@media only screen and (max-width: 1150px) {
    
    .header-small,
    .admin__header  {
        background-position: 0 -100px;
    }
}

@media only screen and (max-width: 900px) {
    
    .header-small,
    .admin__header  {
        background-position: 0 -50px;
        height: 350px;
    }
}

@media only screen and (max-width: 730px) {
    
    .header-small,
    .admin__header  {
        background-position: 0 0px;
        height: 300px;
    }
}

@media only screen and (max-width: 450px) {
    
    .header-small,
    .admin__header  {
        height: 250px;
    }
}

@media only screen and (max-width: 360px) {
    
    .header-small,
    .admin__header  {
        height: 220px;
    }
}

@media only screen and (max-width: 320px) {
    
    .header-small,
    .admin__header  {
        background-position: -60px 0px;
        height: 220px;
    }
}