.horizontal-list {
    list-style: none;
}

    .horizontal-list li {
        display: inline;
        border: solid;
        border-width: 1px 1px 0 1px;
        margin: 0 5px 0 0;
        padding: 10px;
    }

        .horizontal-list li.selected {
            padding-bottom: 10px;
        }

        .horizontal-list li:hover {
            background-color: #ebebeb;
            -webkit-transition: background-color 800ms linear;
            -ms-transition: background-color 800ms linear;
            transition: background-color 800ms linear;
        }

        .horizontal-list li a {
            border-bottom: none;
            color: #555555;
        }

            .horizontal-list li a:visited {
                border-bottom: none;
                color: #555555;
            }

        .horizontal-list li:hover a {
            border-bottom: none;
            color: #000000;
        }


@media only screen and (min-width: 55em) {
    .horizontal-list li {
        display: inline;
        border: none !important;
        border-radius: 0.3em 0.3em 0em 0em;
        padding: 10px;
    }

        .horizontal-list li.selected {
            border-style: solid !important;
            border-width: 1px 1px 0px 1px !important;
            border-color: #dddddd !important;
            border-radius: 0.3em 0.3em 0em 0em;
            background-color: #f8f8f8;
        }

    ul.horizontal-list {
        border-bottom: 1px solid #dddddd;
        padding-bottom: 7px;
        padding-top: 85px;
    }

    .horizontal-list:first-child {
        padding-left: 2em;
    }


    .horizontal-list li:hover a {
        border-bottom: none;
        color: #000000;
        -webkit-transition: color 300ms linear;
        -ms-transition: color 300ms linear;
        transition: color 300ms linear;
    }

    section.row > .row {
        border-radius: 0.3em;
    }
}

@media only screen and (max-width: 55em) {

    .horizontal-list {
        margin: unset;
        display: flex;
        flex-direction: column;
    }

    .horizontal-list li.selected {
        display: block;
        text-align: center;
        border-style: solid !important;
        border-width: 5px 1px 1px 1px !important;
        border-color: #dddddd !important;
        background-color: #ebebeb;
    }

    .selected.display-item {
        order: 0 !important;
    }

    .horizontal-list li {
        display: none;
    }

    .horizontal-list li.display-item {
        display: block;
        text-align: center;
        border-width: 1px 1px 1px 1px !important;
        border-color: #dddddd !important;
        background-color: #ebebeb;
        order: 1;
    }

    .horizontal-list:before {
        content: '';
        position: relative;
        left: 90%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 16px 8px 0;
        border-color: #555 transparent transparent;
        top: 2.7em;
    }
}