@media screen {
    .info_modal {
        background-color: white;
        display: none;
    }

    .info_modal__header,
    .info_modal__body {
        background-color: #fefefe;
    }

    .info_modal__header {
        border-bottom: 1px solid lightgray;
        display: flex;
        padding: 1vh 1vw 1vh 1.5vw;

    }

    .info_modal__header__content {
        display: flex;
        flex-direction: column;
    }

    .info_modal__header__content__nav {
        font-size: 0.75em;
        color: darkslategray;
        cursor: pointer;
        text-transform: uppercase;
    }

    #info_modal__header__content__nav__hebrew {
        font-size: 1.1em;
        color: #446161;
    }

    .info_modal__header__content__logos {
        display: flex;
    }

    .info_modal__header__logo {
        align-self: flex-end;
        flex: 1;
        margin: 0px;
        padding: 0 1.5vw 0 0;
    }

    .info_modal__header__logo:first-of-type {
        flex: 1.2;
    }

    .info_modal__header__logo__img {
        height: 50%;
        width: 100%;
    }

    .info_modal__header__title {
        font-size: 22px;
        font-weight: bold;
    }

    .info_modal__header__close {
        color: #aaaaaa;
        font-size: 50px;
        line-height: 25px;
        right: 4px;
        top: 0px;
    }

    .info_modal__header__close:after {
        /* content: '✖'; */
        content: '×';
    }

    .info_modal__header__close:hover,
    .info_modal__header__close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .info_modal__body {
        height: 99vh;
        padding: 2vh 6vw 29vh 6vw;

        /* Smooth scrolling; has to be scroll, not auto */
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        /* overscroll-behavior-y: none; */
    }

    .info_modal__body__p {
        line-height: 1.7em;
        margin: 0 0 1em 0;
    }

    .info_modal__body__p,
    .info_modal__body__ul {
        font-size: 14px;
    }

    .info_modal__body__ul {
        text-indent: 0.5em;
    }

    .info_modal__body__li {
        line-height: 1.65em;
        list-style-position: inside;
    }
}

@media only screen and (min-device-width : 812px) {
    .info_modal {
        left: 0;
        position: absolute;
        top: 0;
    }
}

/* 
 * https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
 */
@media only screen and (max-device-width : 812px) {
    .info_modal__header__title {
        font-size: 20px;
    }
}