#screen_services section {
}

#screen_services section article {
    margin: 20px;
}

#screen_services header {
    background-image: url("../../data/heroimages/header_services.jpg");
    background-position: 50% 50%;
}

#screen_services h2 {
    display: flex;
    align-items:  center;
}

#screen_services ul {
    margin-left: 2.5em;
    list-style: none;
}

#screen_services li {
    line-height: 2em;
}

#screen_services li:before {
    content: "/";
    margin-left: -1.4em;
    margin-right: 1em;
    font-weight: bold;
}


@media(max-width: 720px) {

    #screen_services h2 {
        text-align: center;
    }

    #screen_services h2 img {
        margin-bottom: 1em;
    }
}

@media(min-width: 721px) {

    #screen_services h2 {
        align-items: center;
    }
}

@media(max-width: 1099px) {

    #screen_services h2 {
        flex-direction: column;
        border-bottom: 1px solid gray;
        padding-bottom: 1em;
    }
    #screen_services h2 img {
        margin-bottom: 10px;
    }

    #screen_services section {
        display: flex;
        flex-direction: column;
    }    
}

@media(min-width: 1100px) {

    #screen_services section {
        display: flex;
        flex-wrap: wrap;
    }

    #screen_services section article {
        flex: 1 0 calc(50% - 40px);
    }

    #screen_services ul {
        margin-left: 3.5em;
    }

    #screen_services h2 img {
        margin-right: 1em;
    }
    
}