﻿/*.skuview-carousel-item.active img {
    position: relative;
    min-width: 100%;
    margin: auto;
    -webkit-transition: transform 4s cubic-bezier(.42,.32,.45,.9);
    -khtml-transition: transform 4s cubic-bezier(.74,.32,.45,.9);
    -moz-transition: transform 4s cubic-bezier(.74,.32,.45,.9);
    -ms-transition: transform 4s cubic-bezier(.74,.32,.45,.9);
    -o-transition: transform 4s cubic-bezier(.74,.32,.45,.9);
    transition: transform 20s cubic-bezier(.24,.32,.45,.9);*/
/*   transform:translate(50%,100%) scale(1.6);*/
/*transition: 0.5s ease;*/
/*animation: zoom-in-zoom-out .5s ease;
}

@keyframes zoom-in-zoom-out {
    from {
        opacity: 0;
        -webkit-transform: scale3d(2, 2, 2);
        transform: scale3d(.1, .1, .1);
    }

    50% {
        opacity: 1;
    }
}
@-moz-keyframes zoom-in-zoom-out {
    from {
        opacity: 0;
        -moz-transform: scale3d(2, 2, 2);
        transform: scale3d(.1, .1, .1);
    }

    50% {
        opacity: 1;
    }
}
@-moz-keyframes zoom-in-zoom-out {
    from {
        opacity: 0;
        -moz-transform: scale3d(2, 2, 2);
        transform: scale3d(.1, .1, .1);
    }

    50% {
        opacity: 1;
    }
}


.frameinfo-content {
    animation: fadeInUp 1s ease-in-out;
    -webkit-animation: fadeInUp 1s ease-in-out;
    -moz-animation: fadeInUp 1s ease-in-out;
    -o-animation: fadeInUp 1s ease-in-out;
    -ms-animation: fadeInUp 1s ease-in-out;
}*/

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 15%, 0);
        transform: translate3d(0, 15%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 15%, 0);
        transform: translate3d(0, 15%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-moz-keyframes fadeInUp {
    from {
        opacity: 0;
        -moz-transform: translate3d(0, 15%, 0);
        transform: translate3d(0, 15%, 0);
    }

    to {
        opacity: 1;
        -moz-transform: none;
        transform: none;
    }
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 15%, 0);
        transform: translate3d(0, 15%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-o-keyframes fadeInUp {
    from {
        opacity: 0;
        -o-transform: translate3d(0, 15%, 0);
        transform: translate3d(0, 15%, 0);
    }

    to {
        opacity: 1;
        -o-transform: none;
        transform: none;
    }
}

@-ms-keyframes fadeInUp {
    from {
        opacity: 0;
        -ms-transform: translate3d(0, 15%, 0);
        transform: translate3d(0, 15%, 0);
    }

    to {
        opacity: 1;
        -ms-transform: none;
        transform: none;
    }
}

.wtd-frame-bottom-wrap {
    min-height: 20% !important;
}

.wtd-frame-bottom-wrap {
    position: absolute;
    width: 100%;
    bottom: 5px;
    left: 0;
    padding: 0px;
    text-align: center;
    z-index: 1020;
}


.skuzoom-close {
    top: 2%;
    width: 36px;
    height: 36px;
    right: 40px;
    position: absolute;
    z-index: 1040;
    bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    opacity: .5;
    transition: opacity .15s ease;
    border: unset;
}

.fa-skuzoom-close:hover {
    transform: rotate(180deg);
}

.fa-skuzoom-close {
    transition: transform 0.5s ease 0s;
}

.skuzoom-carousel-ctrl-prev {
    left: 0px;
}

.skuzoom-carousel-ctrl-next {
    right: 0px;
}

.skuzoom-carousel-ctrl-prev, .skuzoom-carousel-ctrl-next {
    width: 36px;
    height: 36px;
    bottom: 3%;
    top: unset;
}

.collection-top-row {
    margin-top: 1rem;
    margin-bottom: 0rem;
}

.not-clicakble {
    cursor: not-allowed !important;
}

.wtd-grey {
    background-color: #ffffff;
}

.menu-btn {
    min-width: 100px;
}

.font-weight-medium {
    font-weight: 500 !important;
}

.banner-centered {
    position: unset;
    top: auto;
    left: unset;
    transform: unset;
    padding-top: 15px !important;
}
/*.framecard-container {
    min-height: 350px;
}*/
.frame-bottom-wrap {
    min-height: 120px !important;
}

.frame-bottom-wrap {
    position: absolute;
    width: 100%;
    bottom: 30px;
    left: 0;
    padding: 0px;
    text-align: center;
    z-index: 999;
}

.coloursetchooser, .colourset_ball {
    cursor: pointer;
    display: inline-block;
    padding-bottom: 4px;
    padding-left: 3px;
    padding-right: 4px;
    padding-top: 3px;
}

.chosen-colour {
    background-image: url('https://d1u3tbowg43alx.cloudfront.net/_static/.v-202508070111/img/brackets.png');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.colourset_ball:hover {
    background-image: url('https://d1u3tbowg43alx.cloudfront.net/_static/.v-202508070111/img/brackets.png');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.coloursetchooser img,
.colourset_ball img {
    max-width: 28px;
}

.banner-text-white {
    color: #000000 !important;
}

.banner-text-black {
    color: #000000 !important;
}

.viewmore_down_btn {
    position: absolute;
    left: 50px;
    bottom: 50px;
    z-index: 99;
    display: block;
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    border-radius: 100px;
    opacity: 1;
}

    .viewmore_down_btn img {
        width: 20px;
        -webkit-animation: arrow-jump 2s infinite; /* Safari 4+ */
        -moz-animation: arrow-jump 2s infinite; /* Fx 5+ */
        -o-animation: arrow-jump 2s infinite; /* Opera 12+ */
        animation: arrow-jump 2s infinite; /* IE 10+, Fx 29+ */
    }

.frame-front-lg-first {
    overflow: hidden;
}

.wtd-overlay {
    position: absolute;
    left: 15%;
    top: 36%;
    width: 70%;
    height: 25%;
    border-radius: 60%;
    box-shadow: 0px 0px 50px 40px rgba(0,0,0,0.5) inset, 0px 0px 0px 1000px rgba(0,0,0,0.5);
}

.frame-img-container, .frame-alt-imgcontainer {
    background: rgb(219,219,219);
    background: linear-gradient(135deg, rgba(219,219,219,1) 25%, rgba(231,231,231,1) 96%);
}

img.gallery-framefront, img.frameimg-alt-blendmode {
    mix-blend-mode: multiply;
}

.wtd-dark {
    background: #000 !important;
}

.rtw-lg-md-text-w, .rtw-lg-md-text-b {
    color: #000 !important;
}

.wtd-fa-previous {
    position: fixed;
    margin-top: 1.5rem !important;
    z-index: 999;
}

.frame-info-wrap .wtd-grey.card {
    background: #fff !important;
}

.luxury-optical-tc, .luxury-sunglass-tc {
    color: #fff !important;
}
/*.frame-info-wrap.wtd-black .card {
    background: #000 !important;
}*/

/*
    It's for new layout 2024
*/

.modal-xxl {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

.viewer-container {
    z-index: 1060 !important;
}

.modal-xxl-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.products-zoom {
    right: 0;
    position: absolute;
    z-index: 1040;
    margin-top: 1.5rem !important;
    opacity: .6;
}

.product-item-image-wrapper {
    position: relative;
    display: block;
    /* margin-bottom: 16px;*/
    overflow: hidden;
    mix-blend-mode: multiply;
}

    .product-item-image-wrapper .product-item-primary-image, .product-item-image-wrapper .product-item-secondary-image {
        /*transition: opacity .3s ease-in-out,visibility .3s ease-in-out;*/
    }

.skuview-carousel-ctrl-next, .skuview-carousel-ctrl-prev {
    width: 45%;
}

.carousel-control-next:hover {
    cursor: url('https://d1u3tbowg43alx.cloudfront.net/_static/.v-202508070111/img/arrow-right.svg') 17 14, e-resize;
}

.carousel-control-prev:hover {
    cursor: url('https://d1u3tbowg43alx.cloudfront.net/_static/.v-202508070111/img/arrow-left.svg') 17 14, e-resize;
}

.sku-img-container img:nth-of-type(1) {
    z-index: 99;
}

.sku-img-container img:nth-of-type(2) {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out,visibility .3s ease-in-out;
    margin: auto;
    z-index: 9999;
}

.framefront-md, .frameangle-v3-lg {
    margin-top: -40% !important;
    margin-bottom: -12% !important;
}

.sku-img-container img:nth-of-type(2):hover {
    opacity: 1;
}

.sku-img-container img:nth-of-type(1):hover {
    opacity: 0;
}

.sku-img-innerbox.active img:nth-of-type(2) {
    mix-blend-mode: multiply;
}

.sku-img-innerbox.active img:nth-of-type(1) {
    opacity: 0;
}


.sku-nav-link.active::after {
    opacity: 1;
    transform: scale(1);
}

.sku-nav-link {
    border-bottom: 1px solid #777;
}

    .sku-nav-link::after {
        content: "";
        top: -10px;
        width: 100%;
        border-radius: inherit;
        opacity: 0;
        transform: scale(.9);
        transition: opacity .6s ease,transform .6s ease;
        border-bottom: 4px solid #777;
        left: 0;
        opacity: 0;
        transform: scale(1);
        position: relative;
        display: inline-block;
    }

.sku-img-container {
    height: 300px;
    overflow: hidden;
    /* background: url('https://d1u3tbowg43alx.cloudfront.net/_static/.v-202508070111/img/files/gradient_transparent_td.png')/cover no-repeat;*/
    position: relative;
    display: flex;
    /*background-image: url('img/gradient_transparent_td.png');*/
    flex-direction: column;
    padding: 1em;
    /*background: url("img/gradient_transparent_td.png") 100% 0/cover no-repeat;*/
}
.nongallery-container .sku-img-container {
    height: 160px;
}

.product-colour-indicator {
    opacity: 0.8;
    text-indent: 0px;
    background-color: unset;
    max-width: 122px;
    position: relative;
}

.skuzoom-carousel-indicators li,
.skuzoom-carousel-indicators .li,
.skuview-carousel-indicators .li,
.skuview-carousel-indicators li {
    max-width: 50px;
}

.skuzoom-carousel-indicators li,
.skuzoom-carousel-indicators .li,
.skuview-carousel-indicators .li,
.skuview-carousel-indicators li,
.product-colour-indicator {
    width: 100% !important;
    height: 100%;
    opacity: 0.8;
    text-indent: 0px;
    background-color: unset;
}

.skuview-carousel-item .frame-alt-v2-lg,
.skuview-carousel-item .frame-alt-v3-lg,
.skuzoom-carousel-item .frame-alt-v2-lg,
.skuzoom-carousel-item .frame-alt-v3-lg {
    margin-top: -40% !important;
    margin-bottom: -30% !important;
}

.skuzoom-carousel-item .frame-model-wearing-lg {
    margin-top: 5% !important;
    margin-bottom: 9% !important;
}

.skuview-carousel-item .frame-model-wearing-lg {
    margin-top: 3% !important;
    margin-bottom: 15% !important;
    left: 0;
    position: relative;
    right: 0;
    text-align: center;
    vertical-align: middle;
    float: none;
}

.carousel-item {
    background: linear-gradient(135deg, rgba(219,219,219,1) 25%, rgba(231,231,231,1) 96%);
}

.skuzoom-carousel-indicators li,
.skuzoom-carousel-indicators .li,
.skuview-carousel-indicators .li,
.skuview-carousel-indicators li {
    bottom: -20px;
}

.product-thumbnail-colour {
    width: 60px !important; /*50px*/
    overflow: hidden;
    border: none;
    display: inline-block;
    background: linear-gradient(135deg, rgba(219,219,219,1) 25%, rgba(231,231,231,1) 96%);
}

.skuview-carousel-indicator,
.skuzoom-carousel-indicator {
    width: 120px !important; /*50px*/
    overflow: hidden;
    border: none;
    display: inline-block;
}

.skuview-carousel-indicator_li.active .skuview-carousel-indicator::after,
.skuzoom-carousel-indicator_li.active .skuzoom-carousel-indicator::after,
.product-colour-indicator.active .product-thumbnail-colour::after {
    opacity: 1;
    transform: scale(1);
}

.skuview-carousel-indicator::after,
.skuzoom-carousel-indicator::after,
.product-thumbnail-colour::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    opacity: 0;
    transform: scale(.9);
    transition: opacity .6s ease,transform .6s ease;
    border-bottom: 6px solid #777;
    left: 0
}

.product-thumbnail-colour::after {
    border-bottom: 3px solid #777;
}

.skuview-carousel-indicator::after,
.skuzoom-carousel-indicator::after {
    opacity: .4;
}

.skuview-carousel-indicator-item,
.skuzoom-carousel-indicator-item {
    position: relative;
    cursor: pointer;
}

.coll-frame-info-outer {
    padding: 2rem;
}

.skuview-carousel-indicator .frame-alt-v2-lg,
.skuview-carousel-indicator .frame-alt-v3-lg,
.skuzoom-carousel-indicator .frame-alt-v2-lg,
.skuzoom-carousel-indicator .frame-alt-v3-lg {
    margin-top: -40% !important;
    margin-bottom: -45% !important;
    overflow: hidden !important;
    mix-blend-mode: multiply;
}

.product-thumbnail-colour img {
    margin-top: -45% !important;
    margin-bottom: -45% !important;
    overflow: hidden !important;
    mix-blend-mode: multiply;
}

@media (min-width: 375px) {
    .framefront-md, .frameangle-v3-lg {
        margin-top: -30% !important;
        margin-bottom: -12% !important;
    }
}


@media (min-width: 450px) {
    .framefront-md, .frameangle-v3-lg {
        margin-top: -40% !important;
        margin-bottom: -12% !important;
    }
}

@media (min-width: 576px) {
}
@media (min-width: 660px) {
    .nongallery-container .sku-img-container {
        height: 200px;
    }
}

@media (min-width: 768px) {
    .framefront-md, frameangle-v3-lg {
        margin-top: -38% !important;
        margin-bottom: -30% !important;
        overflow: hidden !important;
    }

    .sku-img-container {
        height: 350px;
    }
    .nongallery-container .sku-img-container {
        height: 260px;
    }

    .wtd-frame-bottom-wrap {
        bottom: 15px;
    }

    .skuzoom-carousel-indicators li,
    .skuzoom-carousel-indicators .li,
    .skuview-carousel-indicators .li,
    .skuview-carousel-indicators li {
        max-width: 60px;
    }

    .product-thumbnail-colour {
        width: 90px !important;
    }
}

@media (min-width: 992px) {
    .product-thumbnail-colour {
        width: 120px !important;
    }

    .sku-img-container {
        height: 370px;
    }
    .nongallery-container .sku-img-container {
        height: 200px;
    }
    .wtd-pl-6 {
        padding-left: 2.5rem !important;
    }

    .wtd-pr-6 {
        padding-right: 2.5rem !important;
    }


    .skuview-carousel-indicator-item,
    .skuzoom-carousel-indicator-item {
        background-color: #f2f2f2;
        position: relative;
        cursor: pointer;
        background: linear-gradient(135deg, rgba(219,219,219,1) 25%, rgba(231,231,231,1) 96%);
    }


    .skuzoom-carousel-indicators li,
    .skuzoom-carousel-indicators .li,
    .skuview-carousel-indicators .li,
    .skuview-carousel-indicators li {
        max-width: 122px;
    }

    .carousel-indicators.bs5 .skuview-carousel-indicators .li {
        width: 122px !important;
        height: auto !important;
        text-indent: unset !important;
    }

    .skuzoom-carousel-ctrl-prev {
        left: 30px;
    }

    .skuzoom-carousel-ctrl-next {
        right: 30px;
    }

    .skuzoom-carousel-ctrl-prev, .skuzoom-carousel-ctrl-next {
        width: 56px;
        height: 56px;
        border: 1px solid grey;
        top: 50%;
    }

    .skuzoom-close {
        width: 56px;
        height: 56px;
        border: 1px solid grey;
        right: 45px;
    }


    .frame-info-wrap .wtd-grey.card {
        background: #e7e7e7 !important;
    }

    .wtd-grey {
        background-color: #e7e7e7 !important;
    }

    .banner-centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: transparent;
        padding-top: 0px !important;
        color: #fff;
    }

    .banner-text-white {
        color: #fff !important;
    }

    .collection-desc-wrap {
        font-size: 16px;
    }

    .collection-header-wrap {
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translate(-50%, -5%);
    }

    .rtw-lg-md-text-w {
        color: #fff !important;
    }

    .rtw-lg-md-text-b {
        color: #000 !important;
    }

    .frame-img-first {
        margin-top: -100px !important;
        margin-bottom: -50px !important;
    }

    .btn-collection-dark {
        background: rgba(0,0,0,0.3) !important;
        border: 1.5px solid #fff !important;
    }

    .btn-light.btn-collection-dark {
        color: #212529 !important;
        background-color: #f8f9fa !important;
        border-color: #f8f9fa !important;
    }
}

@media (min-width: 1200px) {
    .frame-info-wrap {
        padding: 2rem !important;
    }

    .frame-bottom-wrap {
        bottom: 90px;
    }

    .frame-img-first {
        margin-top: -200px !important;
        margin-bottom: -50px !important;
    }

    .sku-img-container {
        height: 260px;
    }

    .wtd-pl-6 {
        padding-left: 3.5rem !important;
    }

    .wtd-pr-6 {
        padding-right: 3.5rem !important;
    }

    .skuview-carousel-indicator::after {
        opacity: 0;
    }

    .skuzoom-carousel-item .frame-model-wearing-lg {
        margin-top: 5% !important;
        margin-bottom: 9% !important;
    }

    .skuview-carousel-item .frame-alt-v2-lg,
    .skuview-carousel-item .frame-alt-v3-lg,
    .skuzoom-carousel-item .frame-alt-v2-lg,
    .skuzoom-carousel-item .frame-alt-v3-lg {
        margin-top: -50% !important;
        margin-bottom: -35% !important;
    }

    .skuzoom-carousel-item .frame-model-wearing-lg {
        margin-top: 5% !important;
        margin-bottom: 9% !important;
    }
}
@media (min-width: 1400px) {
    .frame-img-first {
        margin-top: -200px !important;
        margin-bottom: -70px !important;
    }
    .nongallery-container .sku-img-container {
        height: 240px;
    }
}

@media (min-width: 1600px) {
    .frame-img-first {
        margin-top: -300px !important;
        margin-bottom: -150px !important;
    }

    .sku-img-container {
        height: 300px;
    }
}

@media (min-width: 1800px) {
    .frame-info-wrap {
        padding: 6rem !important;
    }

    .frame-img-first {
        margin-top: -300px !important;
        margin-bottom: -300px !important;
    }

    .frame-text-wrap {
        padding-left: 3em;
        padding-right: 5em;
    }

    .sku-img-container {
        height: 360px;
    }
    .nongallery-container .sku-img-container {
        height: 300px;
    }

    .skuview-carousel-item .frame-alt-v2-lg,
    .skuview-carousel-item .frame-alt-v3-lg,
    .skuzoom-carousel-item .frame-alt-v2-lg,
    .skuzoom-carousel-item .frame-alt-v3-lg {
        margin-top: -40% !important;
        margin-bottom: -30% !important;
    }

    .skuzoom-carousel-item .frame-model-wearing-lg {
        margin-top: 5% !important;
        margin-bottom: 9% !important;
    }
}

@media (min-width: 2000px) {


    .frame-img-first {
        margin-top: -300px !important;
        margin-bottom: -350px !important;
    }
}
