/*
Theme Name:           Flatsome
Theme URI:            http://flatsome.uxthemes.com
Author:               UX-Themes
Author URI:           https://uxthemes.com
Description:          Multi-Purpose Responsive WooCommerce Theme
Version:              3.19.8
Requires at least:    6.4
Requires PHP:         7.4
WC requires at least: 8.3
Text Domain:          flatsome
License:              https://themeforest.net/licenses
License URI:          https://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/
/** Custom Slide **/
.options {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    width: calc(100% - 100px);

    & .option{
        position: relative;
        overflow: hidden;
        min-width: 50px;
        margin: 0 10px;
        padding: 0;
        cursor: pointer;
        transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
        border: 1px solid rgba(246, 243, 229, 0.1);

        & .fill{
            height: 102%;
        }

        & .res-text {
            font-size: inherit !important;

            & .icon, .img-inner, img {
                width: 99px !important;
            }
        }
        
        .label {
            height: 150px !important;
        }
    }
}

.options .option:not(.active) {
    flex-grow: 1;
    border-radius: 30px;
}

.options .option.active {
    flex-grow: 10000;
    transform: scale(1);
    max-width: 800px;
    margin: 0px;
    border-radius: 40px;
}

.options .option.active .overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70%);
}

.option.active .info {
    opacity: 1;
    transition: all 0.5s ease;
    transition-delay: 0.4s;
}

.option:not(.active) .info {
    opacity: 0;
    transition: all 0s ease;
    transition-delay: 0s;
}

@media screen and (max-width: 600px) {
    .options {
        width: calc(100% - 10px);
    }

    .options .option {
        transition: max-height 0.5s ease;
    }

    .options .option.active {
        max-height: 900px;
        transition: max-height 0.5s ease;
    }

    .options .option:not(.active) {
        max-height: 150px;
        transition: max-height 0.5s ease;
    }

    .options .option:not(.active) .icon img {
        max-height: 100px;
        width: auto !important;
    }

    .options .option:not(.active) .icon::after {
        content: "\25bc";
        color: #fff;
    }
}