/*
* Prefixed by:
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

.jumping-marks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-top: 7rem;
    margin-bottom: 7rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center;
}

p + .jumping-marks {
    margin-top: 3rem;
}

.jumping-marks > div {
    max-height: 7.5rem;
}

.jumping-marks.button_view {
    display: -ms-grid;
    display: grid;
    row-gap: 3rem;
    -webkit-column-gap: 3rem;
    -moz-column-gap: 3rem;
    column-gap: 3rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fit, 16em);
    margin-left: auto;
    margin-right: auto;
}

.jumping-marks.button_view .jumping-mark {
    max-width: none !important;
}

.button_view .jumping-mark .button {
    margin: 0;
    max-width: none;
}

.jumping-marks.button_view.columns_1 {
    -ms-grid-columns: (minmax(10em, 20em)) [1];
    grid-template-columns: repeat(1, minmax(10em, 20em));
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.jumping-marks.button_view.columns_2 {
    -ms-grid-columns: (minmax(10em, 20em)) [2];
    grid-template-columns: repeat(2, minmax(10em, 20em));
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.jumping-marks.button_view.columns_3 {
    -ms-grid-columns: (minmax(10em, 16em)) [3];
    grid-template-columns: repeat(3, minmax(10em, 16em));
}

.jumping-marks.button_view.columns_4 {
    -ms-grid-columns: (minmax(10em, 16em)) [4];
    grid-template-columns: repeat(4, minmax(10em, 16em));
}

.jumping-marks.button_view.columns_5 {
    -ms-grid-columns: (minmax(10em, 16em)) [5];
    grid-template-columns: repeat(5, minmax(10em, 16em));
}

.jumping-marks.button_view .jumping-mark,
.jumping-marks.button_view .jumping-mark a {
    height: 100%;
}

.jumping_marker {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    color: #003a65;
    margin: 1rem 3rem;
    font-size: 1.5em;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 550;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.jumping-marks:hover {
    color: rgba(240, 129, 0, 1);
}

.jumping-mark .button {
    background-color: #003a65;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0;
    max-width: 16em;
    position: relative;
    -webkit-box-shadow: 0 0 1rem rgb(0 0 0 / 25%);
    box-shadow: 0 0 1rem rgb(0 0 0 / 25%);
    font-size: 2rem;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.jumping-mark .button:hover {
    -webkit-box-shadow: 0 0 0rem rgb(0 0 0 / 0%);
    box-shadow: 0 0 0rem rgb(0 0 0 / 0%);
}

.jumping-mark .button .icon {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}

.jumping-mark .button:hover .icon {
    -webkit-box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.25);
}

.jumping-marks .jumping-mark a {
    width: 100%;
}

.jumping-mark .button .icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(2em + 4rem);
    min-height: calc(2em + 2rem);
    /* margin-left: 2rem; */
    padding: 1rem 2rem;
}

.jumping-mark .button .icon img {
    height: auto;
    width: auto;
    max-height: 1.2em;
    max-width: 1.2em;
}

.jumping-mark .text-icon {
    position: relative;
    padding: 3rem 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.jumping-mark .button span {
    position: relative;
    width: 100%;
    text-align: left;
    z-index: 1;
}

.jumping-mark .button .bg-icon {
    max-width: 100%;
    width: 10rem;
    max-height: 120%;
    position: absolute;
    z-index: 0;
    opacity: 0.4;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    mix-blend-mode: lighten;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.jumping-mark .button .bg-icon img {
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.jumping-mark .button .icon {
    background-color: #fff;
}

.jumping_marker img {
    width: 100px;
    height: auto;
    margin: 0 auto 2rem;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.jumping_marker:hover img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.jumping_marker .text {
    margin: auto;
}

div.jumping-marks .jumping-mark {
    max-width: 16em !important;
    width: 100%;
}

@media screen and (max-width: 1560px) {
    div.jumping-marks.columns_5 > a {
        width: calc(100% / 4 - 6rem) !important;
    }

    .jumping-marks.button_view.columns_5 {
        grid-template-columns: repeat(auto-fit, 16em);
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media screen and (max-width: 1280px) {
    div.jumping-marks.columns_5 > a,
    div.jumping-marks.columns_4 > a {
        width: calc(100% / 3 - 6rem) !important;
    }

    .jumping-marks.button_view.columns_4 {
        grid-template-columns: repeat(auto-fit, 16em);
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    div.jumping-marks.columns_5 > a,
    div.jumping-marks.columns_4 > a,
    div.jumping-marks.columns_3 > a {
        width: calc(100% / 2 - 6rem) !important;
    }

    .jumping-marks.button_view.columns_3 {
        grid-template-columns: repeat(auto-fit, 16em);
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media only screen and (max-width: 480px) {
    .jumping_marker {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        margin: 0.5rem 0;
        width: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    div.jumping-marks.columns_5 > a,
    div.jumping-marks.columns_4 > a,
    div.jumping-marks.columns_3 > a,
    div.jumping-marks.columns_2 > a,
    div.jumping-marks.columns_1 > a {
        width: calc(100% / 1 - 6rem) !important;
    }

    .jumping-marks.button_view.columns_2,
    .jumping-marks.button_view.columns_1 {
        grid-template-columns: repeat(auto-fit, 16em);
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .jumping-marks {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .jumping_marker img {
        width: 50px;
        margin: 0 2rem 0 0;
    }

    .jumping_marker .text {
        margin: 0;
    }
}
