/*
*   1 - Custom Menu : l.12
*   2 - Custom Slider : l.230
*   3 - Custom Modal : l.309
*
*/



/*                    MENU
*************************************************/

.custom-menu{
    background-color: var(--black);
    color: var(--white);
}

.custom-menu img{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
}

.custom-menu a{
    transition: all 300ms ease-out;
    text-transform: uppercase;
    margin: .5em;
    width: fit-content;
    color: var(--white);
}

.custom-menu a:hover{
    -webkit-text-stroke: 0.05em;
}

.custom-menu .row{
    position: relative;
}

.custom-menu .col-sm,
.custom-menu .col-md{
    padding: 4em;
    position: relative;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.7);
}

.custom-menu  .col-sm:first-of-type{
    border-right: 1px solid #d8d8d84f;
}

.custom-menu  .col-md:last-of-type{
    border-left: 1px solid #d8d8d84f;
}

.custom-menu .submenu,
.custom-menu .sub-submenu{
    display: flex;
    position: absolute;
    flex-direction: column;
    height: calc(100% - 8em);
    width: 0;
    opacity: 0;
    left: -10%;
    white-space: nowrap;
    transition: all 300ms ease-out;
    pointer-events: none;
    z-index: 1;
    transition-delay: 0s;
}

.submenu.active,
.sub-submenu.active{
    width: calc(100% - 8em);
    opacity: 1;
    left:4em;
    transition-delay: 0.15s;
    pointer-events: all;
    z-index: 2;
}

.custom-menu .submenu a,
.custom-menu .sub-submenu a{
    text-transform: unset;

}

.custom-menu  .col-sm:first-of-type a{
    margin-left: 6em;
}

.custom-menu  .col-md a,
.custom-menu  .col-sm a{
    position: relative;
}

.custom-menu .col-sm a:before,
.custom-menu .col-md a:before{
    content: '';
    width: 0px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    display: block;
    position: absolute;
    left: 0px;
    top: calc(50% - 1px);
    transform: translate(calc(-100% - 15px), 0px);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.custom-menu .col-sm a:hover:before,
.custom-menu .col-md a:hover:before{
    width: 25px;
}

@media (max-width: 576px) {
    .custom-menu .col-md{
        padding: 0;
    }



    .custom-menu .col-sm:first-of-type a {
        margin-left: 2em;
    }

    .custom-menu .row{
        flex-wrap: nowrap;
    }

    .reduce a{
        opacity: 0;
    }

    .custom-menu .col-md{
        width: 0;
        transform: none;
        transition: .3s ease-out;
        transition-delay: 0s;
    }

    .custom-menu .col-sm{
        transition: .3s ease-out;
        transition-delay: 0s;
    }

    .custom-menu a{
        transition: .3s ease-out;
        transition-delay: .3s;
    }

    .custom-menu .reduce a {
        transition-delay: .0s !important;
    }

    .custom-menu .col-sm.reduce,
    .custom-menu .col-md.reduce,
    .custom-menu .col-md.open{
        transition-delay: .3s !important;
    }

    .open{
        width: 100%;
    }

    .reduce{
        padding-left: 0!important;
        padding-right: 0!important;
        width: 15%;
    }

    .reduce:nth-of-type(2){
        background-color: var(--tan);
    }

    .custom-menu .col-md .back-arrow{
        filter: invert(1);
    }

    .reduce a{
        visibility: hidden;
    }

    .back-arrow{
        display: block;
        width: 15px;
        height: 15px;
        background-image: url('../img/arrow-down.svg');
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 4.5em;
        left: calc(50% - 7.5px);
        transform: rotate(90deg);
        z-index: 3;
    }

    .submenu.active, .sub-submenu.active {
        left: 1em!important;
        top: 4em;
        width: calc(100% - 2em);
        white-space: normal;
    }

    .custom-menu .col-sm a:before,
    .custom-menu .col-md a:before{
        width: 0!important;
        height: 0!important;
    }

    .custom-menu .submenu,
    .custom-menu .sub-submenu{
        left: 0;
    }


}



/*                    CUSTOM SLIDER
*************************************************/

.custom-slider{
    text-align: center;
    padding: 2em;
}

.my-slick-slider{
    width: 80%;
    margin: 0 auto;
    padding: 2em;
}

.my-slick-slider .slick-prev, .my-slick-slider .slick-next {
    width: 35px;
    height: 35px;
    margin: 1em;
    transition: .3s ease;
}

.my-slick-slider .slick-prev:hover, .my-slick-slider .slick-next:hover {
    opacity: .6;
}

.my-slick-slider .slick-prev:before,.my-slick-slider .slick-next:before {
    content: "";
    background-image: url('../img/arrow-down.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    filter: invert(1);
    color: black;
    opacity: 1;
}

.my-slick-slider .slick-prev{
    transform: rotate(90deg);
}

.my-slick-slider .slick-next{
    transform: rotate(-90deg);
}

.single-slide{
    margin: 1em;
    text-align: left;
}

.single-slide h3{
    color: var(--black);
    font-weight: 300;
}

.slide-image{
    height: 250px;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;

}

.single-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s ease;
}

.single-slide a:hover img{
    transform: scale(1.1);
}

button:hover:before{
    transform: scaleX(1)!important;
}

/*                    CUSTOM MODAL
*************************************************/


.modal-header h3{
    color: #000;
}

.fade{
    transition: opacity .25s ease;
}

.modal-dialog{
    z-index: 2;
}

.show .greyshade{
    opacity: .6;
}

.greyshade{
    background-color: black;
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    transition: .45s ease;
}

.modal-dialog-scrollable{
    display: -ms-flexbox;
    display: flex;
    max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-body {
    overflow-y: scroll;
}

.modal-dialog-scrollable .modal-footer, .modal-dialog-scrollable .modal-header {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden;
}

.modal-open {
    overflow: hidden;
}

@media (min-width: 576px){
    .modal-dialog-scrollable {
        max-height: calc(100% - 3.5rem);
    }

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 3.5rem);
    }
}