/* ==== COMPILE =====
sass --watch wedding-3/long/_assets/scss/app.scss:wedding-3/long/_assets/css/app.min.css --style compressed
*/

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
$colors: (
    'primary'       : #5F4938,
    'secondary'     : #6D6157,
    'secondary-500' : #D3C3B1,
    'light'         : #EBE5E4,
    'danger'        : #b44d4d,
    'gray'          : #B7B6B4,
    'dark'          : #2C2321,
    'dark-500'      : #2c2321c7,
    'white'         : #FFFFFF,
    'black'         : #000000,
);
$breakpoints: (
    'sm'        : 576px,
    'md'        : 768px,
    'lg'        : 992px,
    'xl'        : 1200px,
    'xxl'        : 1400px,
);
$loop-breakpoints: map-remove($breakpoints, 'xxl');

$font-type-secondary: 'Dancing Script', cursive;
@function color($value) { @return map-get($colors, $value); }
@function breakpoint($value) { @return map-get($breakpoints, $value); }

// RESET
html,:root {
    font-size: 10px;
    scroll-behavior: smooth;
    @media screen and (max-width: breakpoint('sm')) {
        font-size: 9px;
    }
}
html,body {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden !important;
}
body {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: map-get($colors, 'dark');
}
h1,h2,h3,h4,h5,h6 { font-weight: normal; }
h1 { 
    font-size: 7.2rem; 
    // @media screen and (max-width: breakpoint('md')) { font-size: 4.8rem; }
}
h2 { 
    font-size: 5.2rem; 
    @media screen and (max-width: breakpoint('md')) { font-size: 4.2rem; }
}
h3 { font-size: 4.6rem; }
h4 { font-size: 2.8rem; }
h5 { 
    font-size: 2.2rem; 
    // @media screen and (max-width: breakpoint('md')) { font-size: 1.8rem; }
}
h6 { 
    font-size: 1.8rem; 
    // @media screen and (max-width: breakpoint('md')) { font-size: 1.6rem !important; }
}
p { font-size: 1.4rem; }
.text-lg { 
    font-size: 1.8rem; 
    @media screen and (max-width: breakpoint('md')) { font-size: 1.4rem !important; }
}
.text-md { font-size: 1.6rem; }
.text-sm { font-size: 1.2rem; }
.text-xs { font-size: 1rem; }

// SECTION PAGE
body#index {
    background-color: color('light');
    z-index: 1;
    color: color('black');

    header#header {
        min-height: 100vh;
        background-image: 
            linear-gradient(90deg, #281A08 0%, rgba(41, 35, 27, 0.412) 100%),
            url('../img/bg/header.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: color('light');
        @media screen and (min-width: breakpoint('xxl')) { min-height: 768px; }

        .navbar { flex-grow: 0; }
        & > .container {
            flex-grow: 1;
            display: flex;
            align-items: center;
        }
    }

    section#section-1 {
        min-height: 100rem;
        position: relative;
        padding: 8rem 0;
        background-image: 
            url('../img/bg/backhottiegreen-1.png');
        background-repeat: no-repeat;
        background-size: cover;
        .container { 
            position: relative;
            z-index: 2;
        }

        .decoration { 
            position: absolute; 
            font-size: 5px;
            z-index: 1;
            @media screen and (min-width: breakpoint('md')) { display: block; font-size: 7px; }
            @media screen and (min-width: breakpoint('lg')) { font-size: 10px; }
            &#section-1-decoration-1 {
                width: 20em;
                top: 3em; left: 4em; 
                @media screen and (min-width: breakpoint('lg')) { top: 5em; left: 4em; }
            }
            &#section-1-decoration-2 {
                width: 20em;
                top: 3em; right: 4em; 
                @media screen and (min-width: breakpoint('lg')) { top: 5em; right: 4em;  }
            }
            &#section-1-decoration-3 {
                width: 24em;
                bottom: 0; left: -1em; 
                @media screen and (min-width: breakpoint('lg')) { bottom: -1em; left: -1em;  }
            }
            &#section-1-decoration-4 {
                width: 24em;
                bottom: 0; right: -1em; 
                @media screen and (min-width: breakpoint('lg')) { bottom: -1em; right: -1em;  }
            }
        }
    }

    section#section-2 {
        min-height: 70rem;
        padding: 8rem 0;
        background-color: #4F473E;
        background-image: url('../img/bg/section-2.jpg');
        mix-blend-mode: overlay;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;

        .img-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            width: 46em; height: 34em;
            font-size: 6px;
            @media screen and (min-width: breakpoint('md')) { font-size: 7px; }
            @media screen and (min-width: breakpoint('lg')) { font-size: 10px; }
            &::before {
                content: '';
                display: block;
                position: absolute;
                width: 46em; height: 22em;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                z-index: 1;
            }
            &::after {
                content: '';
                display: block;
                position: absolute;
                width: 31.5em; height: 31.5em;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                z-index: 4;
            }

            &.img-wrapper-left {
                &::before {
                    background-image: url('../img/decoration/flowers-left-spouse.png');
                    top: 0; left: -3em;
                }
                &::after {
                    background-image: url('../img/decoration/img-wrapper-spouse-left.png');
                    bottom: 0; right: 8em;
                }
            }

            &.img-wrapper-right {
                &::before {
                    background-image: url('../img/decoration/flowers-right-spouse.png');
                    top: 0; right: -3em;
                }
                &::after {
                    background-image: url('../img/decoration/img-wrapper-spouse-right.png');
                    bottom: 0; left: 8em;
                }
            }

            .img-wrapper-spouse {
                position: relative;
                overflow: hidden;
                border-radius: 50%;
                width: 24em; height: 24em;
                z-index: 3;
                img {
                    width: 100%; height: 100%;
                    object-fit: cover;
                }
            }
        }

        .decoration { 
            position: absolute; 
            font-size: 5px;
            z-index: 1;
            @media screen and (min-width: breakpoint('md')) { display: block; font-size: 7px; }
            @media screen and (min-width: breakpoint('lg')) { font-size: 10px; }
            &#section-2-decoration-1 {
                width: 20em;
                top: 3em; left: 4em; 
                @media screen and (min-width: breakpoint('lg')) { top: 5em; left: 4em; }
            }
            &#section-2-decoration-2 {
                width: 20em;
                top: 3em; right: 4em; 
                @media screen and (min-width: breakpoint('lg')) { top: 5em; right: 4em;  }
            }
        }
    }

    section#section-3 {
        min-height: 100rem;
        padding: 8rem 0;
        background-color: #D6CABE;
        background-image: url('../img/bg/section-3.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        overflow: hidden;

        .card {
            padding: .5rem;
            background-image: url('../img/decoration/card-story.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-color: transparent;
            position: relative;
            z-index: 1;
            &::before {
                content: '';
                display: block;
                width: 100%; height: 100%;
                position: absolute;
                z-index: -1;
                background-size: contain;
                background-repeat: no-repeat;
            }

            &#section-3-card-1 {
                &::before { 
                    left: -50%; top: -1rem;
                    background-image: url('../img/decoration/leaf-right-1.png');
                }
            }
            &#section-3-card-2 {
                margin-top: 25rem;
                &::before { 
                    right: -60%; top: 5rem;
                    background-image: url('../img/decoration/leaf-left-1.png');
                }
            }
            &#section-3-card-3 {
                margin-top: 20rem;
                &::before { 
                    left: -50%; top: -1rem;
                    background-image: url('../img/decoration/leaf-right-1.png');
                }
            }
            &#section-3-card-4 {
                margin-top: 25rem;
                &::before { 
                    right: -60%; top: 5rem;
                    background-image: url('../img/decoration/leaf-left-1.png');
                }
            }

            @media screen and (max-width: breakpoint('md')) {
                margin-top: unset !important; 
                margin-bottom: 5rem;
                &::before { 
                    z-index: 4;
                    width: 30%; height: 30%;
                }
                &:nth-child(odd) {
                    &::before { 
                        left: unset !important;
                        right: -2rem !important; top: -2rem !important;
                        background-image: url('../img/decoration/leaf-left-1.png') !important;
                    }
                }
                &:nth-child(even) {
                    &::before { 
                        right: unset;
                        left: -2rem !important; top: -2rem !important;
                        background-image: url('../img/decoration/leaf-right-1.png') !important;
                    }
                }
            }


            .card-body {
                padding: 5rem 3rem;
                background-color: #FDF8F0;
                text-align: left;
            }
        }

        .decoration { 
            position: absolute; 
            font-size: 5px;
            z-index: 1;
            @media screen and (min-width: breakpoint('md')) { display: block; font-size: 7px; }
            @media screen and (min-width: breakpoint('lg')) { font-size: 10px; }
            &#section-3-decoration-1 {
                width: 20em;
                top: 3em; left: 4em; 
                @media screen and (min-width: breakpoint('lg')) { top: 5em; left: 4em; }
            }
            &#section-3-decoration-2 {
                width: 20em;
                top: 3em; right: 4em; 
                @media screen and (min-width: breakpoint('lg')) { top: 5em; right: 4em;  }
            }
        }
    }

    section#section-4 {
        min-height: 100rem;
        padding: 8rem 0;
        background-color: #4F473E;
        background-image: url('../img/bg/section-4.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;

        .tinyslider-container-wrapper {
            .tinyslider-container {
                display: flex;
                align-items: center;
                padding: 5rem 0;
                .tinyslider-item {
                    font-size: 10px;
                    height: 32em;

                    &.tinyslider-item-gallery-1 {
                        height: 32em;
                    }
                    &.tinyslider-item-gallery-2 {
                        height: 18em;
                    }
    
                    &.active {
                        font-size: 12px;
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 1;
                        &::after {
                            content: '';
                            display: block;
                            height: calc(100% + 4rem); width: 101%;
                            position: absolute;
                            z-index: -1;
                            background-image: url('../img/decoration/img-wrapper-gallery.png');
                            background-repeat: no-repeat;
                            background-size: cover;
                        }
                    }
                    
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }

        .decoration { 
            position: absolute; 
            font-size: 5px;
            z-index: 1;
            @media screen and (min-width: breakpoint('md')) { display: block; font-size: 7px; }
            @media screen and (min-width: breakpoint('lg')) { font-size: 10px; }
            &#section-4-decoration-1 {
                width: 20em;
                top: 3em; left: 4em; 
                @media screen and (min-width: breakpoint('lg')) { top: 5em; left: 4em; }
            }
            &#section-4-decoration-2 {
                width: 20em;
                top: 3em; right: 4em; 
                @media screen and (min-width: breakpoint('lg')) { top: 5em; right: 4em;  }
            }
        }
    }
    
    section#section-5 {
        min-height: 100vh;
        padding: 8rem 0;
        background-color: #2C2321;
        background-image: url('../img/bg/section-5.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        overflow: hidden;

        #tinyslider-container-message {
            display: flex;
            align-items: center;
           .tinyslider-item.tinyslider-item-message {
               background-color: transparent;
               text-align: left;
           }
        }

        .decoration { 
            position: absolute; 
            font-size: 5px;
            z-index: 1;
            @media screen and (min-width: breakpoint('md')) { display: block; font-size: 7px; }
            @media screen and (min-width: breakpoint('lg')) { font-size: 10px; }
            &#section-5-decoration-1 {
                width: 20em;
                top: 3em; left: 4em; 
                @media screen and (min-width: breakpoint('lg')) { top: 5em; left: 4em; }
            }
            &#section-5-decoration-2 {
                width: 20em;
                top: 3em; right: 4em; 
                @media screen and (min-width: breakpoint('lg')) { top: 5em; right: 4em;  }
            }
        }
    }

    section#section-6 {
        background-color: #2C2321;
        padding: 10rem 0;
    }

    footer#footer {
        background-color: color('primary');
        color: color('white');
        font-weight: 300;
        font-size: 1.6rem;
        padding: 3rem 0;
    }

}

// COMPONENTS
// override
.navbar {
    padding: 1.4rem 0;
    transition: all .3s ease-in-out;
    position: relative;
    z-index: 9999;

    &.navbar-scrolled {
        position: fixed !important;
        top: 0;
        left: 0; right: 0;
        width: 100vw;
        background-color: color('primary');
        box-shadow: 0 3px 20px rgba(color('black'), .1);
        z-index: 999;
        .navbar-brand { color: color('white'); }
        .navbar-toggler { color: color('white'); }
        .nav-item {
            .nav-link, .nav-link.active { 
                color: color('white') !important; 
                &::after {background-color: color('white') !important;}
            }
        }
    }

    .navbar-brand {
        font-family: $font-type-secondary;
        font-weight: 600;
        color: color('light');
        text-decoration: none;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
    }
    .navbar-toggler {
        transition: box-shadow .15s ease-in-out !important;
    }
    .navbar-collapse {
        transition: all .3s ease-in !important;
    }
    .navbar-nav {
        .nav-item {
            padding: 0 2rem;
            @media screen and (max-width: breakpoint('md')) { padding: 0; }
            .nav-link {
                color: color('light');
                position: relative;
                display: inline-flex;
                align-items: center; justify-content: center;
                letter-spacing: .2rem;
                transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out !important;
                &::after {
                    content: '';
                    position: absolute;
                    display: block;
                    height: 1px;
                    bottom: -.4rem;
                    transition: all .8s ease-in;
                }
                &:hover {
                    &::after {
                        width: calc(70% + 1px);
                        opacity: .7;
                        background-color: color('light');
                    }
                }
                @media screen and (max-width: breakpoint('md')) {
                   font-size: 1.6rem;
                   margin-top: 1.2rem;
                }
                &.active {
                    color: color('light');
                    &::after {
                        width: calc(70% + 1px);
                        opacity: 1;
                        background-color: color('light');
                    }
                }
            }
        }
    }
}
.container {
    @media screen and (max-width: breakpoint('md')) {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
.btn {
    border-radius: 1rem;
    outline: unset !important;
    font-size: 1.8rem;
    padding: 2rem 3rem;
    transition: all .3s ease-in;
    &.btn-primary {
        background-color: color('primary') !important;
        border: unset !important;
        &:hover {
            box-shadow: 0 10px 30px rgba(color('primary'), .3);
        }
    }
    &.btn-secondary {
        background-color: color('secondary') !important;
        border: unset !important;
        &:hover {
            box-shadow: 0 10px 30px rgba(color('secondary'), .3);
        }
    }
}
.nav {
    &.nav-tabs {
        border-bottom: unset;
        .nav-item {
            &:not(:last-child) {
                padding-right: 2rem;
            }
            .nav-link {
                background-color: unset;
                font-size: 2rem;
                border: 0;
                color: rgba(color('black'), .3);
                padding: 0;
                padding-bottom: 1rem;
                &.active {
                    color: color('black');
                    border-bottom: 1px solid color('black');
                }
            }
        }
    }
}
.card {
    border: 0;
    .card-body {
        padding: 2.6rem 3rem;
    }
}
.tab-content {
    .tab-pane {
        transition: opacity .15s linear !important;
        padding: 4rem 0;
    }
}
.form-label {
    font-size: 1.6rem;
    color: color('light');
    font-weight: 100;
}
.form-check {
    display: flex;
    align-items: center;
    .form-check-input {
        width: 3rem; height: 3rem;
        border: 0;
        background-color: #EFEFEF;
        margin-right: 1.6rem;
        cursor: pointer;
        &:checked {
            background-color: color('primary');
            border-color: color('primary');
            box-shadow: 0 0 1px rgba(color('primary'), .4);
        }
    }
    .form-check-label {
        font-size: 1.6rem;
        color: color('dark');
        font-weight: 300;
        cursor: pointer;
    }
}
.form-control {
    padding: 1.6rem 2.4rem;
    font-size: 1.4rem;
    border: 0;
    border-radius: .5rem;
    transition: all .3s ease-in;
    color: color('black');
    border-bottom: 1px solid #949494;
    background-color: #FDFDFD;
    &.is-invalid, &.is-valid {
        background-image: unset;
    }
    &.is-valid { border-color: color('primary');}
    &.is-invalid { border-color: color('danger');}
    &:focus, &:active {
        outline: unset !important;
        box-shadow: unset !important;
        border-bottom: 1px solid color('black');
        background-color: #FDFDFD;
        &::placeholder {color: color('black');}
    }
    &::placeholder {
        font-weight: 300;
        color: #949494;
        transition: all .3s ease-in;
    }
}
.form-select {
    padding: 1.6rem 2.4rem;
    font-size: 1.4rem;
    cursor: pointer;
    &.is-invalid, &.is-valid {
        background-image: unset;
    }
    &.is-valid { border-color: color('primary');}
    &.is-invalid { border-color: color('danger');}
    &:focus, &:active {
        outline: unset !important;
        box-shadow: unset !important;
        border: 1px solid color('dark');
    }
}
.valid-feedback {color: color('primary');}
.invalid-feedback {color: color('danger');}

// custom
.btn {
    &#btn-play {
        position: fixed;
        bottom: 2rem; right: 2rem;
    }
    &#btn-to-top {
        position: fixed;
        bottom: 8rem; right: 2rem;
        display: none;
        animation: pop-out .3s linear forwards;
    }
    &.btn-icon {
        padding: 1rem !important;
        width: 4rem !important; height: 4rem !important;
        padding: unset;
        display: flex; 
        align-items: center; justify-content: center;
        border-radius: 50%;
        font-size: 1.2rem;

        &.btn-icon-page {
            border: unset;
            z-index: 999;
            box-shadow: unset !important;
            background-color: rgba(color('black'), .8);
            &.active {
                i { color: color('primary');}
            }
            &:focus {
                box-shadow: unset;
            }
            i { color: color('white') }
        }
    }
}
.text-shadow {
    display: flex;
    align-items: center; justify-content: center;
    padding: 2rem 0;
    .text-shadow-content {
        font-size: 2.4rem;
        @media screen and (min-width: breakpoint('lg')) { font-size: 4.6rem !important; }
    }
    .text-shadow-item {
        position: absolute;
        font-size: 3.4em;
        font-weight: 500;
        transform: translate(20px, 20px);
        letter-spacing: 1.4rem;
        color: rgba(color('black'), .05);
        @media screen and (min-width: breakpoint('lg')) { 
            transform: unset;
            font-size: 9.6rem; 
            letter-spacing: 4rem; 
        }
    }
}
.list-wrapper {
    &.list-wrapper-message {
        padding-right: 1.5rem;
        max-height: 85vh;
        overflow-x: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 12px;
        }
        
        &::-webkit-scrollbar-track {
            -webkit-box-shadow: unset; 
            background-color: rgba(color('primary'), .3);
            border-radius: 10px;
        }
        
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: unset; 
            background-color: color('primary');
        }
    }
}
.card.card-countdown {
    background-color: rgba(#EBE5E4, .2);
    border: 0;
    padding: 0;
    width: 4.2rem;
    margin-bottom: .8rem;
    border-radius: 1rem;
    .card-body {
        padding: 1.2rem 0;
        color: color('white');
        text-align: center;
        font-size: 1.4rem;
    }
}
.divider {
    background-color: color('black');
    &.divider-horizontal { width: 100%; height: 1px; }
    &.divider-vertical { width: 1px; height: 100%; }
    @each $breakpoint-name, $breakpoint-value in $loop-breakpoints {
        @media screen and (min-width: $breakpoint-value) {
            &.divider-#{$breakpoint-name}-vertical { width: 1px !important; height: 100%; }
            &.divider-#{$breakpoint-name}-horizontal { width: 100%; height: 1px !important; }
        }
    }
}

// UTILITY
.font-type-secondary { font-family: $font-type-secondary; }

.text-white { color: color('white') !important; }
.text-primary { color: color('primary') !important; }
.text-dark { color: color('dark') !important; }
.text-dark-500 { color: color('dark-500') !important; }
.text-gray { color: color('gray') !important; }
.text-gray-800 { color: color('gray-800') !important; }

.text-spacing-default { 
    letter-spacing: 0.6rem; 
    @media screen and (max-width: breakpoint('md')) {
        letter-spacing: 0.4rem; 
    }
}

.text-height-2 { line-height: 1.6; }


// background
.bg-primary {background-color: color('primary') !important;}
.bg-secondary {background-color: color('secondary') !important;}
.bg-gray {background-color: color('gray') !important;}
.bg-gray-800 {background-color: color('gray-800') !important;}

// border
.rounded-3 {
    border-radius: 1.5rem !important;
}

// misc
.csr-pointer {cursor: pointer;}

$spacing-props: (
    margin: m, 
    margin-left: ms, 
    margin-right: me, 
    margin-top: mt, 
    margin-bottom: mb, 
    (margin-left, margin-right): mx,
    (margin-top, margin-bottom): my,
    padding: p, 
    padding-left: ps, 
    padding-right: pe, 
    padding-top: pt, 
    padding-bottom: pb, 
    (padding-left, padding-right): px,
    (padding-top, padding-bottom): py,
);
@for $i from 0 to 11 {
    @each $prop-name, $prop-abb in $spacing-props {
        .#{$prop-abb}-#{$i} {
            @each $pn in $prop-name {
                #{$pn}: ($i * 1) * .5rem !important;
            }
        }
    }
}
@for $i from 0 to 11 {
    @each $prop-name, $prop-abb in $spacing-props {
        @each $breakpoint-name, $breakpoint-value in $loop-breakpoints {
            .#{$prop-abb}-#{$breakpoint-name}-#{$i} {
                @media screen and (min-width: $breakpoint-value) {
                    @each $pn in $prop-name {
                        #{$pn}: ($i * 1) * .5rem !important;
                    }
                }
            }
        }
    }
}
.pt-lg-16 {
    @media screen and (min-width: breakpoint('lg')) {
        padding-top: 8rem !important;
    }
}
.mb-12 { margin-bottom: 6rem; }
.mb-16 { margin-bottom: 8rem; }
.my-lg-16 {
    @media screen and (min-width: breakpoint('lg')) {
        margin-top: 8rem !important;
        margin-bottom: 8rem !important;
    }
}
.mb-sm-16 {
    @media screen and (min-width: breakpoint('sm')) {
        margin-bottom: 8rem !important;
    }
}
.mb-lg-16 {
    @media screen and (min-width: breakpoint('lg')) {
        margin-bottom: 8rem !important;
    }
}
.mb-lg-50 {
    @media screen and (min-width: breakpoint('lg')) {
        margin-bottom: 25rem !important;
    }
}
// SIZING
// loop to max size in base.scss
$sizing-props: (
    width: w, 
    height: h,
);
// UNIT SIZE (0, REM)
@for $i from 0 to (101) {
    @each $prop-name, $prop-abb in $sizing-props {
        // IF 0 : w-0 (no w-0rem)
        @if ($i == 0) {
            .#{$prop-abb}-#{$i} { #{$prop-name}: $i !important; }
        } @else {
            .#{$prop-abb}-#{$i}rem { #{$prop-name}: $i * 1rem !important; }
        }
    }
}
// UNIT SIZE (0, REM) RESPONSIVE
@for $i from 0 to (101) {
    @each $prop-name, $prop-abb in $sizing-props {
        @each $breakpoint-name, $breakpoint-value in $loop-breakpoints {
            // IF 0 : w-lg-0 (not w-lg-0rem)
            @if ($i == 0) {
                .#{$prop-abb}-#{$breakpoint-name}-#{$i} { 
                    @media screen and (min-width: $breakpoint-value) {
                        #{$prop-name}: $i !important; 
                    }
                }
            } @else {
                .#{$prop-abb}-#{$breakpoint-name}-#{$i}rem { 
                    @media screen and (min-width: $breakpoint-value) {
                        #{$prop-name}: $i * 1rem !important; 
                    }
                }
            }
        }
    }
}
// PERCENTAGE SIZE
@for $i from 25 to 101 {
    @if ($i % 25 == 0) {
        @each $prop-name, $prop-abb in $sizing-props {
            .#{$prop-abb}-#{$i} { #{$prop-name}: $i * 1%; }
            @each $breakpoint-name, $breakpoint-value in $loop-breakpoints {
                @media screen and (min-width: $breakpoint-value) {
                    .#{$prop-abb}-#{$breakpoint-name}-#{$i} { #{$prop-name}: $i * 1% !important; }
                }
            }
        }
    }
}

// OBJECT
.obj-fit {
    overflow: hidden;
    &.obj-fit-cover {
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }
    &.obj-fit-contain {
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    &.obj-fit-fill {
        img, video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    &.obj-pos-top { img { object-position: top !important; } }
}


// vendors custom
// lightgallery
#row-lightgallery {
    [data-src] {
        img {
            transition: all .4s ease-in;
        }
        &:hover {
            cursor: pointer;
            img {
                transform: scale(1.02);
            }
        }
    }
    .img-wrapper {
        &.img-wrapper-gallery {
            width: 100%;
            overflow: hidden;
            font-size: 3px;
            @media screen and (min-width: breakpoint('sm')) { font-size: 7px; }
            @media screen and (min-width: breakpoint('lg')) { font-size: 10px; }
            &.img-wrapper-gallery-1 {
                height: 30em;
            }
            &.img-wrapper-gallery-2 {
                height: 56em;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}


@keyframes opening-hide {
    0% {
        opacity: 1;
    } 100% {
        opacity: 0;
    }
}
@keyframes pop-out {
    0% {
        transform: scale(1);
    } 50% {
        transform: scale(1.1);
    } 100% {
        transform: scale(1);
    }
}

