@charset "UTF-8";

.image-swap .twentytwenty-right-arrow:before, .image-swap .twentytwenty-left-arrow:before {
    font-family: 'pag-iconfont';
    font-style: normal;
    font-weight: normal;
    font-variant: normal
}

.image-swap .twentytwenty-right-arrow:before, .image-swap .twentytwenty-left-arrow:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    speak: none;
    text-transform: none;
    line-height: 1
}

html[dir="ltr"] .image-swap .twentytwenty-right-arrow:before, .image-swap html[dir="ltr"] .twentytwenty-right-arrow:before {
    content: ""
}

html[dir="ltr"] .image-swap .twentytwenty-left-arrow:before, .image-swap html[dir="ltr"] .twentytwenty-left-arrow:before {
    content: ""
}

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
    content: " ";
    display: block;
    background: #ccad6b;
    position: absolute;
    z-index: 30;
    box-shadow: 0 0 12px rgba(51,51,51,.5)
}

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
    width: 4px;
    height: 9999px;
    left: 50%;
    margin-left: -2px
}

.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
    width: 9999px;
    height: 4px;
    top: 50%;
    margin-top: -2px
}

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
    transition: .5s
}

.twentytwenty-before-label, .twentytwenty-after-label {
    transition: opacity
}

    .twentytwenty-before-label:before, .twentytwenty-after-label:before {
        color: #fff;
        font-size: 13px;
        letter-spacing: .1em
    }

    .twentytwenty-before-label:before, .twentytwenty-after-label:before {
        position: absolute;
        background: rgba(255,255,255,.2);
        line-height: 38px;
        padding: 0 20px;
        border-radius: 2px
    }

.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
    top: 50%;
    margin-top: -19px
}

.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
    left: 50%;
    margin-left: -45px;
    text-align: center;
    width: 90px
}

.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute
}

.twentytwenty-left-arrow, .twentytwenty-right-arrow {
    top: 50%;
    margin-top: -6px
}

.twentytwenty-up-arrow, .twentytwenty-down-arrow {
    left: 50%;
    margin-left: -6px
}

.twentytwenty-container {
    box-sizing: content-box;
    z-index: 0;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none
}

    .twentytwenty-container img {
        max-width: 100%;
        position: absolute;
        top: 0;
        display: block
    }

    .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
        background: rgba(0,0,0,0)
    }

        .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
            opacity: 0
        }

    .twentytwenty-container * {
        box-sizing: content-box
    }

.twentytwenty-before-label {
    opacity: 0
}

    .twentytwenty-before-label:before {
        content: "Before"
    }

.twentytwenty-after-label {
    opacity: 0
}

    .twentytwenty-after-label:before {
        content: "After"
    }

.twentytwenty-horizontal .twentytwenty-before-label:before {
    left: 10px
}

.twentytwenty-horizontal .twentytwenty-after-label:before {
    right: 10px
}

.twentytwenty-vertical .twentytwenty-before-label:before {
    top: 10px
}

.twentytwenty-vertical .twentytwenty-after-label:before {
    bottom: 10px
}

.twentytwenty-overlay {
    transition: background;
    background: rgba(0,0,0,0);
    z-index: 25
}

    .twentytwenty-overlay:hover {
        background: rgba(0,0,0,.5)
    }

        .twentytwenty-overlay:hover .twentytwenty-after-label {
            opacity: 1
        }

        .twentytwenty-overlay:hover .twentytwenty-before-label {
            opacity: 1
        }

.twentytwenty-before {
    z-index: 20
}

.twentytwenty-after {
    z-index: 10
}

.twentytwenty-handle {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -19px;
    margin-top: -19px;
    border: 4px solid #ccad6b;
    border-radius: 1000px;
    box-shadow: 0 0 12px rgba(51,51,51,.5);
    z-index: 40;
    cursor: pointer
}

.twentytwenty-horizontal .twentytwenty-handle:before {
    bottom: 50%;
    margin-bottom: 19px;
    box-shadow: 0 4px 0 #ccad6b,0 0 12px rgba(51,51,51,.5)
}

.twentytwenty-horizontal .twentytwenty-handle:after {
    top: 50%;
    margin-top: 19px;
    box-shadow: 0 -4px 0 #ccad6b,0 0 12px rgba(51,51,51,.5)
}

.twentytwenty-vertical .twentytwenty-handle:before {
    left: 50%;
    margin-left: 19px;
    box-shadow: 4px 0 0 #ccad6b,0 0 12px rgba(51,51,51,.5)
}

.twentytwenty-vertical .twentytwenty-handle:after {
    right: 50%;
    margin-right: 19px;
    box-shadow: -4px 0 0 #ccad6b,0 0 12px rgba(51,51,51,.5)
}

.twentytwenty-left-arrow {
    border-right: 6px solid #fff;
    left: 50%;
    margin-left: -17px
}

.twentytwenty-right-arrow {
    border-left: 6px solid #fff;
    right: 50%;
    margin-right: -17px
}

.twentytwenty-up-arrow {
    border-bottom: 6px solid #fff;
    top: 50%;
    margin-top: -17px
}

.twentytwenty-down-arrow {
    border-top: 6px solid #fff;
    bottom: 50%;
    margin-bottom: -17px
}

.image-swap .match-media-query {
    font-family: 'small'
}

@media only screen and (min-width:35.5em) and (max-width:63.875em) {
    .image-swap .match-media-query {
        font-family: 'medium'
    }
}

@media only screen and (min-width:63.9375em) {
    .image-swap .match-media-query {
        font-family: 'large'
    }
}

.image-swap .twentytwenty-handle {
    background-color: #ccad6b;
    top: auto;
    bottom: 10px
}

@media only screen and (min-width:35.5em) and (max-width:63.875em) {
    .image-swap .twentytwenty-handle {
        top: 89%
    }
}

@media only screen and (min-width:63.9375em) {
    .image-swap .twentytwenty-handle {
        top: 90%
    }
}

@media only screen and (min-width:35.5em) and (max-width:63.875em) {
    .image-swap .twentytwenty-handle {
        bottom: auto
    }
}

@media only screen and (min-width:63.9375em) {
    .image-swap .twentytwenty-handle {
        bottom: auto
    }
}

.image-swap .twentytwenty-handle:before {
    z-index: 1;
    box-shadow: none;
    margin-bottom: 31px
}

@media only screen and (min-width:35.5em) and (max-width:63.875em) {
    .image-swap .twentytwenty-handle:before {
        margin-bottom: 19px
    }
}

@media only screen and (min-width:63.9375em) {
    .image-swap .twentytwenty-handle:before {
        margin-bottom: 19px
    }
}

.image-swap .twentytwenty-handle:after {
    display: none;
    box-shadow: none
}

@media only screen and (min-width:35.5em) and (max-width:63.875em) {
    .image-swap .twentytwenty-handle:after {
        display: block
    }
}

@media only screen and (min-width:63.9375em) {
    .image-swap .twentytwenty-handle:after {
        display: block
    }
}

.image-swap .twentytwenty-before-label:before, .image-swap .twentytwenty-after-label:before {
    content: ""
}

.image-swap .twentytwenty-left-arrow, .image-swap .twentytwenty-right-arrow {
    border: none;
    color: #fff;
    margin-top: -11px
}

    .image-swap .twentytwenty-left-arrow:before, .image-swap .twentytwenty-right-arrow:before {
        font-size: .8em
    }

.image-swap .twentytwenty-left-arrow {
    margin-left: -13px
}

.image-swap .twentytwenty-right-arrow {
    margin-right: 0
}

.image-swap .twentytwenty-handler-image {
    position: absolute;
    z-index: 10
}

.image-swap .mobile-handler-line {
    position: absolute;
    bottom: 25px;
    height: 4px;
    width: 94%;
    margin: 0 3% 0 3%;
    background-color: #ccad6b;
    opacity: .4
}

@media only screen and (min-width:35.5em) and (max-width:63.875em) {
    .image-swap .mobile-handler-line {
        display: none
    }
}

@media only screen and (min-width:63.9375em) {
    .image-swap .mobile-handler-line {
        display: none
    }
}

.image-swap .twentytwenty-overlay {
    display: none !important
}

@charset "UTF-8";

.m-137-swap-container {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    position: relative;
    min-height: 1px
}

.m-137-hotspot:after, .m-137-ruler__handler:after {
    font-family: 'pag-iconfont';
    font-style: normal;
    font-weight: normal;
    font-variant: normal
}

.m-137-hotspot:after, .m-137-ruler__handler:after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    speak: none;
    text-transform: none;
    line-height: 1
}

.m-137-hotspot:after {
    content: ""
}

html[dir="ltr"] .m-137-ruler__handler:after {
    content: ""
}

.m-137-image-swap--desktop {
    display: none
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-image-swap--desktop {
        display: block
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-image-swap--desktop {
        display: block
    }
}

@media only screen and (min-width:1200px) {
    .m-137-image-swap--desktop {
        display: block
    }
}

.m-137-image-swap--mobile {
    display: block
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-image-swap--mobile {
        display: none
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-image-swap--mobile {
        display: none
    }
}

@media only screen and (min-width:1200px) {
    .m-137-image-swap--mobile {
        display: none
    }
}

.m-137-module-container {
    padding-bottom: 0 !important
}

.m-137-swap-container {
    width: 97%;
    color: #fff;
    position: relative;
    overflow: hidden;
    -ms-touch-action: manipulation;
    touch-action: manipulation
}

html[dir="ltr"] .m-137-swap-container {
    float: left
}

html[dir="ltr"] .m-137-swap-container {
    margin-left: 3%
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-swap-container {
        width: 98%
    }

    html[dir="ltr"] .m-137-swap-container {
        margin-left: 2%
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-swap-container {
        width: 98%
    }

    html[dir="ltr"] .m-137-swap-container {
        margin-left: 2%
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-swap-container {
        width: 99%
    }

    html[dir="ltr"] .m-137-swap-container {
        margin-left: 1%
    }
}

@media only screen and (min-width:1200px) {
    .m-137-swap-container {
        width: 99%
    }

    html[dir="ltr"] .m-137-swap-container {
        margin-left: 1%
    }
}

.m-137-image {
    top: 0
}

html[dir="ltr"] .m-137-image {
    left: 0
}

.m-137-image--before {
    z-index: 5
}

.m-137-image--after {
    clip: rect(0,-100px,9999px,0);
    position: absolute;
    z-index: 10
}

.m-137-ruler {
    cursor: ew-resize;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    padding: 0 15px;
    position: absolute;
    top: 0;
    transform: translate(-100px,0);
    z-index: 15
}

html[dir="ltr"] .m-137-ruler {
    left: -15px
}

.m-137-ruler:after {
    background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.7));
    content: '';
    display: inline-block;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 300px
}

html[dir="ltr"] .m-137-ruler:after {
    right: 15px
}

.m-137-ruler__handler {
    z-index: 1
}

    .m-137-ruler__handler:before, .m-137-ruler__handler:after {
        display: inline-block;
        position: absolute;
        transform: translate(0,-50%);
        top: 50%
    }

    .m-137-ruler__handler:before {
        border-color: transparent transparent transparent rgba(0,0,0,.7);
        border-style: solid;
        content: '';
        height: 0;
        width: 0
    }

html[dir="ltr"] .m-137-ruler__handler:before {
    left: 50%
}

@media only screen and (max-width:479px) {
    .m-137-ruler__handler:before {
        border-width: 42px 0 42px 34px
    }
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-ruler__handler:before {
        border-width: 42px 0 42px 34px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-ruler__handler:before {
        border-width: 42px 0 42px 34px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-ruler__handler:before {
        border-width: 37px 0 37px 30px
    }
}

@media only screen and (min-width:1200px) {
    .m-137-ruler__handler:before {
        border-width: 48px 0 48px 38px
    }
}

@media only screen and (min-width:1760px) {
    .m-137-ruler__handler:before {
        border-width: 52px 0 52px 42px
    }
}

.m-137-ruler__handler:after {
    color: #d5001c;
    margin-top: 1px;
    font-size: 66px
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-ruler__handler:after {
        font-size: 66px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-ruler__handler:after {
        font-size: 60px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-ruler__handler:after {
        font-size: 66px
    }
}

@media only screen and (min-width:1200px) {
    .m-137-ruler__handler:after {
        font-size: 74px
    }
}

html[dir="ltr"] .m-137-ruler__handler:after {
    left: -14px
}

@media only screen and (min-width:480px) and (max-width:767px) {
    html[dir="ltr"] .m-137-ruler__handler:after {
        left: -14px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    html[dir="ltr"] .m-137-ruler__handler:after {
        left: -11px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    html[dir="ltr"] .m-137-ruler__handler:after {
        left: -14px
    }
}

@media only screen and (min-width:1200px) {
    html[dir="ltr"] .m-137-ruler__handler:after {
        left: -17px
    }
}

@media only screen and (min-width:1760px) {
    .m-137-ruler__handler:after {
        font-size: 82px
    }

    html[dir="ltr"] .m-137-ruler__handler:after {
        left: -20px
    }
}

.m-137-ruler__handler--animated:after {
    animation: m-137-ruler__handler-after-moving--desktop 6s infinite 4s
}

@keyframes m-137-ruler__handler-after-moving--desktop {
    0%,40%,60%,80%,100% {
        transform: translate(0,-50%)
    }

    55% {
        transform: translate(2px,-50%)
    }

    50% {
        transform: translate(-4px,-50%)
    }
}

.m-137-hotspot {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%,-50%);
    z-index: 17;
    font-size: 22px
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-hotspot {
        font-size: 25px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-hotspot {
        font-size: 33px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-hotspot {
        font-size: 33px
    }
}

@media only screen and (min-width:1200px) {
    .m-137-hotspot {
        font-size: 43px
    }
}

.m-137-hotspot-information {
    background: linear-gradient(to top,rgba(25,31,34,.7),rgba(25,31,34,0));
    bottom: 0;
    color: inherit;
    padding-bottom: 24px;
    padding-left: 7.14286%;
    padding-right: 7.14286%;
    padding-top: 40px;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 16
}

html[dir="ltr"] .m-137-hotspot-information {
    left: 0
}

@media only screen and (min-width:1760px) {
    .m-137-hotspot-information {
        padding-left: 10%;
        padding-right: 10%
    }
}

.m-137-hotspot-information__count {
    display: none;
    font-size: 28px;
    line-height: 36px;
    font-weight: normal
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-hotspot-information__count {
        font-size: 40px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-hotspot-information__count {
        font-size: 40px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-hotspot-information__count {
        font-size: 40px
    }
}

@media only screen and (min-width:1200px) {
    .m-137-hotspot-information__count {
        font-size: 60px
    }
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-hotspot-information__count {
        line-height: 52px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-hotspot-information__count {
        line-height: 52px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-hotspot-information__count {
        line-height: 52px
    }
}

@media only screen and (min-width:1200px) {
    .m-137-hotspot-information__count {
        line-height: 72px
    }
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-hotspot-information__count {
        font-weight: normal
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-hotspot-information__count {
        font-weight: normal
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-hotspot-information__count {
        font-weight: normal
    }
}

@media only screen and (min-width:1200px) {
    .m-137-hotspot-information__count {
        font-weight: normal
    }
}

.m-137-hotspot-information--show-count .m-137-hotspot-information__count {
    display: block
}

.m-137-hotspot-information__index {
    color: #d5001c
}

.m-137-hotspot-information__text {
    font-size: 16px;
    line-height: 24px;
    font-weight: normal
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-hotspot-information__text {
        font-size: 16px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-hotspot-information__text {
        font-size: 16px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-hotspot-information__text {
        font-size: 26px
    }
}

@media only screen and (min-width:1200px) {
    .m-137-hotspot-information__text {
        font-size: 28px
    }
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-hotspot-information__text {
        line-height: 24px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-hotspot-information__text {
        line-height: 24px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-hotspot-information__text {
        line-height: 32px
    }
}

@media only screen and (min-width:1200px) {
    .m-137-hotspot-information__text {
        line-height: 36px
    }
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-hotspot-information__text {
        font-weight: normal
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-hotspot-information__text {
        font-weight: normal
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-hotspot-information__text {
        font-weight: normal
    }
}

@media only screen and (min-width:1200px) {
    .m-137-hotspot-information__text {
        font-weight: normal
    }
}

.m-137-image-swap--mobile .m-137-image--after {
    clip: rect(0,9999px,-100px,0)
}

.m-137-image-swap--mobile .m-137-ruler {
    cursor: ns-resize;
    height: auto;
    padding: 25px 0;
    position: absolute;
    top: -25px;
    transform: translate(0,-100px);
    width: 100%
}

html[dir="ltr"] .m-137-image-swap--mobile .m-137-ruler {
    left: 0
}

.m-137-image-swap--mobile .m-137-ruler:after {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.7));
    bottom: 25px;
    height: 300px;
    top: auto;
    width: 100%
}

html[dir="ltr"] .m-137-image-swap--mobile .m-137-ruler:after {
    right: auto
}

.m-137-image-swap--mobile .m-137-ruler__handler:before, .m-137-image-swap--mobile .m-137-ruler__handler:after {
    transform: translate(-50%,0)
}

html[dir="ltr"] .m-137-image-swap--mobile .m-137-ruler__handler:before {
    left: 50%
}

html[dir="ltr"] .m-137-image-swap--mobile .m-137-ruler__handler:after {
    left: 50%
}

.m-137-image-swap--mobile .m-137-ruler__handler:before {
    border-color: rgba(0,0,0,.7) transparent transparent transparent;
    top: 50%
}

@media only screen and (max-width:479px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:before {
        border-width: 34px 42px 0 42px
    }
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:before {
        border-width: 34px 42px 0 42px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:before {
        border-width: 34px 42px 0 42px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:before {
        border-width: 30px 37px 0 37px
    }
}

@media only screen and (min-width:1200px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:before {
        border-width: 38px 48px 0 48px
    }
}

@media only screen and (min-width:1760px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:before {
        border-width: 42px 52px 0 52px
    }
}

.m-137-image-swap--mobile .m-137-ruler__handler:after {
    content: "" !important;
    top: -2px
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:after {
        top: -2px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:after {
        top: 0
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:after {
        top: -2px
    }
}

@media only screen and (min-width:1200px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:after {
        top: -5px
    }
}

@media only screen and (min-width:1760px) {
    .m-137-image-swap--mobile .m-137-ruler__handler:after {
        top: -9px
    }
}

.m-137-image-swap--mobile .m-137-ruler__handler--animated:after {
    animation: m-137-ruler__handler-after-moving--mobile 6s infinite 4s
}

@keyframes m-137-ruler__handler-after-moving--mobile {
    0%,40%,60%,80%,100% {
        transform: translate(-50%,0)
    }

    55% {
        transform: translate(-50%,2px)
    }

    50% {
        transform: translate(-50%,-4px)
    }
}

.m-137-image-swap--mobile .m-137-hotspot-information {
    background: linear-gradient(to bottom,rgba(25,31,34,.7),rgba(25,31,34,0));
    bottom: auto;
    padding-bottom: 40px;
    padding-top: 24px;
    top: 0
}