/**
 * EasyZoom core styles
 */
.easyzoom img {
    vertical-align: bottom;
}

.easyzoom.is-loading img {
    cursor: progress;
}

.easyzoom.is-ready img {
    cursor: crosshair;
    width: auto;
    background: #ffffff00;
}

.easyzoom.is-error  img {
    cursor: not-allowed;
}
.easyzoom--adjacent .easyzoom-flyout img {
    transform: scale(1);
}
.easyzoom-notice {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 150;
    width: 10em;
    margin: -1em 0 0 -5em;
    line-height: 2em;
    text-align: center;
    background: #FFF;
    box-shadow: 0 0 10px #888;
    display: none !important;
}
body#product.inZoom .left_column_product {
    position: initial !important;
}
/* DOUBLE ZOOM */
.doublezoom .zoo-item .zoo-img img {
    cursor: zoom-out !important;
}
.container_zoom .close-zoom {
    z-index: 99;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 30px;
    font-weight: 500;
    cursor: pointer;
    line-height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 65px;
    cursor: pointer;
    font-size: 0px;
}
.container_zoom .active .close-zoom{
    display: block;
}
/* END DOUBLE */
.easyzoom-flyout {
    position:absolute;
    z-index: 100;
    overflow: hidden;
    background: #FFF;
}

/**
 * EasyZoom layout variations
 */
.easyzoom--overlay .easyzoom-flyout {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.easyzoom--adjacent .easyzoom-flyout {
    top: 110px;
    left: 100%;
    width: 100%;
    height: 50vh;
    margin-left: 20px;
    z-index: 30;
    max-width: 525px;
    -webkit-box-shadow: 0px 0px 127px -41px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 127px -41px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 127px -41px rgba(0,0,0,0.75);
}
.container_zoom .close-zoom:before, .container_zoom .close-zoom:after {
    content: "";
    position: absolute;
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 25%;
}
.container_zoom .close-zoom:before {
    transform: rotate(45deg);
}
.container_zoom .close-zoom:after {
    transform: rotate(-45deg);
}
.doublezoom figure.zoo-item.active_img {
    max-width: 100%;
    width: 100%;
}
.doublezoom .content-thumb-img {
    display: none;
}
.doublezoom .container_zoom.active .close-zoom {
    background: #00000073;
    position: fixed;
    right: 8px;
}
body#product.doublezoom {
    overflow: hidden;
}
.doublezoom .container_zoom.active {
    overflow-y: scroll;
    align-items: center;
    background: white;
    padding: 0px!important;
    grid-template-columns: 1fr;
    max-width: 100%;
}
.zoo-item {
    position: initial;
    display: none;
}
.doublezoom .zoo-item .zoo-img img.zoomImage {
    width: 100%;
    height: initial;
}
.zoo-item .zoo-img img.zoomImage {
    cursor: zoom-in;
    /* height: 100%; */
    /* width: auto; */
    display: block;
    height: inherit;
    width: auto;
    margin: auto;
}
.doublezoom .zoo-item .zoo-img {
    height: auto;
    width: 100%;
}
.zoo-item .zoo-img {
    width: 100%;
    overflow: hidden;
    height: 100%;
}
.container_zoom svg {
    width: 35px;
    height: 50px;
    position: fixed;
    z-index: 99;
    top: 5px;
    cursor: pointer;
    right: -100vw;
    /*transition: all 1s ease 0s;*/
}

.content_zoom.active svg {
    right: 20px;
    /*transition: all 1s ease 0s;*/
}

.doublezoom .content_zoom {
    width: 100%;
    display: grid;
    align-items: center;
    height: 100%;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
.content_zoom {
    width: 100%;
    display: grid;
    height: 100vh;
    grid-template-rows: calc(100% - 105px) auto;
    grid-template-columns: 100%;
    max-height: 100%;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
.container_zoom.active {
    display: grid;
    align-items: start;
    justify-content: center;
    grid-template-rows: 1fr;
    grid-template-columns: 100%;
}
.container_zoom {
    z-index: 9999;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000000d4;
    display: none;
    right: 0px;
    max-width: 100vw;
}
figure.zoo-item.active_img {
    /* background: white; */
    /* width: 52%; */
    display: block;
    /* max-width: 1515px; */
    /* margin: auto; */
    height: 100%;
}
.content_zoom.active button#next-img, .content_zoom.active button#prev-img {
    display: block !important;
}
.content_zoom svg {
    display: none;
}
.content-thumb-img {
    display: grid;
    grid-template-columns: repeat(auto-fit, 70px);
    gap: 0px 1px;
    justify-content: center;
    margin-top: 14px;
    width: 100%;
}

.content-thumb-img img {
    width: 100%;
    height: initial;
    cursor: pointer;
}
.nav-images .nav-next, .nav-images .nav-last {
    position: fixed;
    top: calc(50% - 20px);
    right: 20px;
    width: 55px;
    height: 60px;
    padding-top: 15px;
    background: #00000029;
    cursor: pointer;
}
.nav-images .nav-next {
    padding-left: 5px;
}
.nav-images .nav-last {
    left: 20px;
    right: 0px;
    padding-left: 20px;
}

.nav-images .nav-next:before, .nav-images .nav-last:before {
    content: "";
    width: 30px;
    height: 30px;
    border-top: 2px solid #b3afa7;
    border-left: 2px solid #b3afa7;
    top: calc(50% - 15px);
    display: block;
}
.nav-images .nav-next:before {
    transform: rotate(136deg);
}
.nav-images .nav-last:before {
    transform: rotate(-46deg);
}
.index-slider {
    position: fixed;
    top: 5px;
    left: 5px;
    color: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-size: 13px;
    font-weight: 600;
    gap: 0px 2px;
}

.index-slider p.separador {
    color: white;
    font-size: 14px;
    width: 6px;
    display: block;
    text-align: center;
}
@media(max-width: 991px){
    .zoo-item .zoo-img {
        transform-origin: center 45%;
    }
}
@media(max-width: 767px){
    .nav-images {
        display: none;
    }
    figure.zoo-item.active_img {
        width: 100% !important;
    }
    .container_zoom.active {
        align-items: center;
        justify-content: start;
    }

    .doublezoom .container_zoom.active .close-zoom {
        right: 0px;
    }

    .container_zoom .close-zoom:before, .container_zoom .close-zoom:after {
        width: 50px;
        height: 5px;
    }
    .content-thumb-img {
        grid-template-columns: repeat(auto-fit, 70px);
        margin: 15px;
        gap: 2px 1px;
    }
    .doublezoom .zoo-item .zoo-img img.zoomImage {
        width: auto;
        height: 100vh;
        position: initial;
        margin: 0px;
    }
}