#header{
    margin-top: 7%;
    text-align: center;
    background: url("../images/kitchen2.jpg") center center no-repeat;
    background-size: cover;
    height: 40vh;
    width: 100%;
}

/*#header #h1-background{
    margin-top: 10%;
}*/

#overlay{
    background-color: rgba(0, 0, 0, 0.5);
    height: 40vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header h1{
    color: white;
    font-size: 50px;
    margin-top: auto;
    margin-bottom: auto;
}

#info{
    margin-top: 2em;
}


.image-one{
    height: 300px;
    width: 400px;
    border-radius: 2em;
    box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.7);
    z-index: 2;
}

.image-two{
    height: 300px;
    width: 400px;
    border-radius: 2em;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
    margin-top: -90px;
    float: right;
    z-index: 99;

}
#quote-form{
    padding: 2em 0;
    position: relative;
    
}


@media(min-width: 1100px){
    #header{
        margin-top: 5%;
    }
}

@media(max-width: 1100px){
  /*  #header #h1-background{
        margin-top: 7%;
        height: 115px;
    }*/
}


@media(max-width: 768px){
  /*  #header{
        margin-top: 100px;
    }
    #header #h1-background{
        margin-top: 70px;
        width: 100%;
        height: 60px;
    }*/
    
    #quote-form{
        padding: 10px;
    }
    .image-two{
        margin-top: 30px;
        margin-bottom: 30px;
    }
    #info .list{
        /*this does work but wont move the margin*/
    }
}