.image-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
}

.color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: rgba(170, 1, 58, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container:hover .color-overlay {
    opacity: 1;
}

.mini-image {
    position: absolute;
    font-size: 92px;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.image-container:hover .mini-image {
    display: block;
}

.fed-up-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 100px 0px 80px 0px;
}

.information {
    max-width: 590px;
    color: #352d41;
    font-variation-settings: 'wght' 620;
}

.gallery-template {
    margin: 0px 0px 0px 33px;
    display: flex;
    flex-direction: row-reverse;
}

.gallery-template img {
    object-fit: cover;
}

.big-template {
    width: 416px;
    height: 416px;
    margin: 0px 0px 0px 35px;
}

.mirror .gallery-template {
    margin: 0px 64px 0px 0px;
    flex-direction: row;
}

.mirror .big-template {
    margin: 0px 35px 0px 0px;
}

.big-template img {
    width: 416px;
    height: 416px;
    object-fit: cover;
    border-radius: 10px;
}

.m-i-s-template img,
.m-i-t-template img {
    border-radius: 10px;
}

.m-i-f-template img {
    width: 125px;
}

.m-i-s-template img {
    height: 126px;
}

.m-i-t-template img {
    width: 100%;
    height: 125px;
}

.b-i-template {
    width: 416px;
    height: 416px;
}

.mini-template {
    width: 116px;
}

.m-i-f-template {
    margin: 0px 0px 25px 0px;
}

.m-i-s-template {
    margin: 0px 0px 25px 0px;
}

.tablet-rec {
    display: flex;
}

.tablet-img {
    display: none;
}

/* MODAL */
.flexslider {
    margin: 0px 0px 10px 0px !important;
    background-color: #f5f5f5 !important;
}

.flex-viewport {
    background-color: #f5f5f5;
}

.flex-control-nav {
    background-color: #f5f5f5;
}

.modal {
    background-color: #f5f5f5;
    z-index: 2;
    overflow: auto;
}

.modal-content {
    width: 700px;
    height: 449px;
    margin-top: 0;
    border: unset !important;
    align-items: center;
    background-color: #f5f5f5;
}

.modal-gallery {
    width: 700px;
    border: unset !important;
}

.flexslider .slides img {
    height: 449px !important;
}

.flex-caption {
    background: #f5f5f5;
    padding: 5px;
}

#carousel {
    display: flex;
    flex-direction: row;
}

.thumbnail-img {
    width: 160px;
    height: 117px;
    margin: 0px 10px 0px 10px !important;
}

.thumbnail-img img {
    width: 160px;
    height: 117px;
    object-fit: cover;
    filter: brightness(50%);
}

#thumbnail-spaces {
    justify-content: space-between;
}

.modal-carousel-gallery .flex-active-slide img {
    border: 3px solid #a80532;
    filter: brightness(100%);
}

.modal-carousel-gallery .flex-viewport {
    width: 500px;
}

.img-slide {
    background-color: #f5f5f5;
    display: flex !important;
    justify-content: center;
}

.flexslider .slides li img {
    width: auto;
}

/* MODAL PREV AND NEXT ARROW*/

.custom-arrow-prev,
.custom-arrow-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #86818d;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-arrow-prev:hover,
.custom-arrow-next:hover {
    background-color: #a80532 !important;
}

.arrow-prev {
    display: flex;
    position: absolute;
    left: 40%;
    border: 8px solid #ffffff;
    border-width: 3px 3px 0px 0px;
    transform: rotate(-135deg);
    width: 15px;
    height: 15px;
}

.flex-direction-nav .flex-nav-prev .flex-prev {
    left: -20%;
}

.flexslider:hover .flex-direction-nav .flex-prev {
    left: -20% !important;
}

.arrow-next {
    display: flex;
    position: absolute;
    right: 40%;
    border: 8px solid #ffffff;
    border-width: 3px 3px 0px 0px;
    transform: rotate(45deg);
    width: 15px;
    height: 15px;
}

.flex-direction-nav .flex-nav-next .flex-next {
    right: -20%;
}

.flexslider:hover .flex-direction-nav .flex-next {
    opacity: unset !important;
    right: -20% !important;
}

.close-modal-text {
    margin: 0px 0px 8px 0px;
}

.custom-counter {
    text-align: center;
    margin: 10px 0px 32px 0px;
    font-size: 16px;
    font-family: 'Montserrat';
}

.close:hover::before,
.close:hover::after {
    background: #a80532 !important;
}

.close {
    margin: 0px 0px 30px 0px;
}

.close::before,
.close::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 50%;
    width: 24px;
    height: 4px;
    border-radius: 18px;
    background-color: #5f6677;
    transform-origin: center center;
}

.close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.flex-direction-nav .flex-next,
.flex-direction-nav .flex-prev {
    opacity: 1 !important;
}

.flex-direction-nav .flex-disabled {
    display: none !important;
}

/* Mirrored setting style */

.mirror .fed-up-field {
    flex-direction: row-reverse;
}

.mirror .fed-up-gallery {
    grid-template-columns: 419px 115px;
    margin: 10px 0px 0px 0px;
    margin: 100px 0px 0px 0px;
}

.mirror .information {
    max-width: 568px;
    margin: 0px 0px 0px 0px;
}

.mirror .information p {
    font-variation-settings: 'wght' 400;
}

@media screen and (max-width: 1366px) {
    .mirror .information {
        margin: 0px 0px 0px 0px;
        height: 487px;
        display: grid;
        align-items: center;
    }

    .fed-up-gallery {
        margin: 10px 0px 0px 0px;
    }

    .mirror .fed-up-gallery {
        margin: 0px 20px 0px 0px;
    }
}

@media screen and (max-width: 1050px) {
    .mirror .fed-up-field,
    .fed-up-field {
        flex-direction: column;
    }

    .information {
        max-width: none;
        margin-bottom: 32px;
    }

    .mirror .information {
        max-width: none;
        margin-bottom: 64px;
    }

    .gallery-template {
        flex-direction: column;
        width: 100%;
        margin: 0px auto;
    }

    .mirror .gallery-template {
        flex-direction: column;
        margin: 0px auto 0px auto;
    }

    .mirror .big-template a,
    .big-template a {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mirror .big-template img,
    .big-template img {
        width: 100%;
        /*    height: unset; */
        height: 564px;
        object-fit: cover;
        border-radius: 10px;
    }

    .mini-template {
        display: flex;
        justify-content: center;
        flex-direction: row;
        width: unset;
        margin: 9px 0px 0px 0px;
    }

    .mirror .big-template,
    .big-template {
        width: unset;
        height: unset;
        margin: 0px 0px 0px 0px;
    }

    .mobile-mini-template {
        margin: 0px 10px 0px 10px;
    }

    .mobile-mini-template img {
        width: 115px;
        height: 126px;
    }

    .tablet-rec {
        display: none;
    }

    .tablet-img {
        display: flex;
    }

    .tablet-img img {
        border-radius: 10px;
    }
}

@media screen and (max-width: 1024px) {
    /* MODAL PREV AND NEXT ARROW*/
    .flex-direction-nav .flex-nav-prev .flex-prev {
        left: -10%;
    }

    .flex-direction-nav .flex-nav-next .flex-next {
        right: -10%;
    }
}

@media screen and (max-width: 870px) {
    /* MODAL PREV AND NEXT ARROW*/
    .flex-direction-nav .flex-nav-prev .flex-prev {
        left: -3%;
    }

    .flex-direction-nav .flex-nav-next .flex-next {
        right: -3%;
    }
}

/* TABLET VERSION */
@media screen and (max-width: 768px) {
    .mirror .fed-up-field {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .mirror .information {
        max-width: 704px;
    }

    .fed-up-field {
        margin: 0px 0px 30px 0px;
    }

    .information {
        width: auto;
    }

    /* MODAL */
    .modal-gallery {
        width: 600px !important;
    }

    .img-slide {
        height: 410px !important;
    }

    /* MODAL PREV AND NEXT ARROW*/
    .flex-direction-nav .flex-nav-prev .flex-prev,
    .flex-direction-nav .flex-nav-next .flex-next {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .modal-gallery {
        width: 500px !important;
    }

    .img-slide {
        height: 310px !important;
    }
}

@media screen and (max-width: 550px) {
    /* MODAL */
    .modal-gallery {
        width: 540px !important;
    }

    .modal-content {
        height: 289px;
    }

    .thumbnail-img {
        width: 115px !important;
        height: 125px;
        margin: 0px 10px 0px 10px !important;
    }

    .flex-viewport {
        display: grid;
        justify-content: center;
    }
}

/* MOBILE VERSION */
@media screen and (max-width: 490px) {
    .mirror .big-template img,
    .big-template img {
        width: 1000px;
        height: 350px;
        object-fit: cover;
        border-radius: 10px;
    }

    .m-i-f-template {
        margin: 0px 10px 0px 0px;
    }

    .m-i-t-template {
        margin: 0px 0px 0px 10px;
    }
}

@media screen and (max-width: 390px) {
    .information {
        width: auto;
        margin: 0px 0px 20px 0px;
    }

    .mobile-mini-template img {
        width: 115px;
        height: 105px;
    }

    .fed-up-field {
        flex-direction: column;
        margin: 10px 0px 45px 0px;
    }

    .mirror .fed-up-field {
        flex-direction: column !important;
        align-items: baseline;
        margin: 30px 0px 0px 0px;
    }

    .mirror .information {
        margin-bottom: 110px;
    }

    .gallery-template {
        margin: 15px 0px 0px 0px;
    }

    /* MODAL */

    .modal-gallery {
        width: 412px !important;
    }

    .modal-carousel-gallery {
        margin: 0px auto 0px auto;
    }

    .flexslider .slides li img {
        height: 350px !important;
        width: 350px;
    }

    .thumbnail-img {
        max-width: 100px !important;
        margin: 0px 0px 0px 9px !important;
    }

    .flex-viewport {
        display: unset;
    }
}