#wrapper {
    @include transform(none);
    @include transition(transform 500ms ease);
}

//== [ White theme ]
#main, .page-title-wrapper, footer {
    @include transition(all 0.4s ease 0s);
    @include transform(none);
}

.bg-open-canvas-menu {
    @extend %text-opacity-hiden;
    cursor: pointer;
    background: rgba(#000, .2);
    @include position(fixed, 0, 0, 0, 0, 9997);
    @include transition(all 0.4s ease 0s);
}

.canvas-menu-open {
    .wolfo-canvas-menu {
        &.normal-menu {
            left: 0;
        }
    }

    &.canvas-mainmenu {
        .wolfo-canvas-menu {
            &.main-menu {
                left: 0;
            }
        }
    }
}

.wolfo-canvas-menu {
    width: 100%;
    max-height: 100vh;
    @include position(fixed, 0, 0, null, 0, 9999);
    //== [ Mega Menu ]
    .st .wolfo-label {
        display: none;
    }

    .layout-1 .wolfo-depth-1 > a > img {
        display: none !important;
    }

    .layout-3 > .sub-menu {
        background: none !important;
    }

    .header-nav {
        display: none;
    }

    .content-cv {
        max-height: 100vh;
        flex-flow: row wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        @include transition(all 0.25s ease);

        .container-content-cv {
            @include flex(100%);
            @media (min-width: 75em) {
                @include flex(83.33333%);
                margin-left: 8.33333%;
                padding: rem(0 42px);
            }
        }

        ul {
            padding: 0;
            margin-top: 0;
            margin-bottom: 0;
            list-style-type: none;
            @include transition(all .5s);
        }
    }

    .mobile-nav {
        li {
            @include flex(100%);
            line-height: 1.2;

            a {
                color: #000000;
                font-weight: $fw_600;
                position: relative;
            }
        }

        .menu-item-has-children {
            &:hover {
                > .sub-menu {
                    @extend %text-opacity-show;
                    top: 0;
                }
            }
        }
    }
}

@media (min-width: 62em) {
    .wolfo-canvas-menu {
        display: none;
        @include transition(all 0.25s ease);

        .content-cv {
            min-height: 40vh;
            @include position(absolute, 0, 0, null, 0);

            &:before {
                content: '';
                width: 120%;
                height: 130%;
                background-color: $light_scheme;
                @include position(absolute, -20%, null, null, 50%);
                @include transform(translateX(-50%));
            }

            > .container-fluid {
                padding: rem(180px 15px 50px);
                @media (max-width: $screen-xl) {
                    padding-top: 13.344454vw;
                }
            }
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            position: relative;
        }

        .container-content-cv {
            position: relative;
            @include animation(fadeOut .01s);
        }

        .mobile-nav {
            @include flex(33.33333%);

            > li {
                padding-left: 2.604vw;
                @include resize-font(18, 32, 768, 1440);

                &:not(:last-child) {
                    margin-bottom: rem(34px);
                }

                > a {
                    span {
                        display: inline-flex;
                        padding-left: rem(20px);
                        padding-right: rem(45px);
                    }
                }
            }

            li {
                a {
                    display: block;
                    width: 100%;

                    span {
                        position: relative;
                        background: $light_scheme;
                    }

                    &:before {
                        content: '';
                        width: 0;
                        height: 1px;
                        background: #e73950;
                        @include position(absolute, 50%, 0, null, null);
                        @include transition(all .4s ease-in-out);
                    }

                    &:hover {
                        color: #e73950;

                        &:before {
                            width: calc(100% + 2.604vw);
                            left: -2.604vw;
                            right: auto;
                        }
                    }
                }
            }
        }

        .sub-menu {
            display: flex;
            flex-wrap: wrap;
            opacity: 0;
            visibility: hidden;
            width: 100%;
            @include flex(100%);
            @include position(absolute, 20px, null, null, 100%);
            @include transition(all .4s);

            li {
                padding-left: 2.864vw;
                font-size: rem(18px);
                text-transform: uppercase;
                @media (max-width: $screen-md) {
                    font-size: rem(16px);
                }

                a:before {
                    height: 2px;
                    margin-top: -1px;
                }

                span {
                    padding-left: rem(25px);
                    padding-right: rem(25px);
                }

                &:not(:last-child) {
                    margin-bottom: rem(20px);
                }
            }

            .sub-menu {
                ul {
                    display: none;
                }

                li {
                    a:before {
                        display: none;
                    }

                    span {
                        padding-left: 0;
                        padding-right: 0;
                    }
                }
            }
        }
    }

    .canvas-menu-open {
        #wrapper-start {
            > .bg-open-canvas-menu {
                opacity: 1;
                visibility: visible;
            }

            .main-menu {
                display: block;

                .header-nav {
                    @include animation(fadeIn 5s ease);
                }

                .container-content-cv {
                    @include animation(BinFadeIn 3s ease);
                }

                .content-cv {

                    &:before {
                        @include animation(MenuSlideCV .8s forwards);
                    }
                }
            }
        }
    }

    .canvas-menu-open {
        &.admin-bar {
            .header-nav {
                top: 32px !important;
                @media only screen and (min-width: 601px) and (max-width: 782px) {
                    top: 46px !important;
                }
                @media only screen and (max-width: 600px) {
                    top: 0 !important;
                }
            }
        }

        .header-nav {
            background: none !important;
            @include animation(ease 1.5s BinPosition forwards);
            @include position(null, 0, 0, null, 0);
            z-index: 9999 !important;

            &.header-4 {
                .bottom-menu {
                    display: none;
                }
            }

            &.header-6 {
                right: auto;
                bottom: 0;
                top: 0 !important;
            }

            .logo {
                &:before, &:after {
                    opacity: 0;
                    visibility: hidden;
                }
            }

            .main-header {
                @include animation(ease 2s BinFadeIn forwards);
            }

            .bottom-header {
                opacity: 0;
                visibility: hidden;
            }
        }
    }
}

@media (max-width: $screen-lg) {
    .canvas-menu-open {
        .bg-open-canvas-menu {
            opacity: 1;
            visibility: visible;
        }

        #wrapper {
            @include transform(translateX(300px));

            &.has-side {
                @include transform(translateX(285px));
            }
        }
    }
    .canvas-menu-open {
        .main-menu {
            @include transform(translateX(0px));
        }
    }

    .wolfo-canvas-menu {
        width: 300px;
        height: 100%;
        bottom: 0;
        padding: rem(50px 30px 30px);
        overflow-y: auto;
        z-index: 9999;
        background-color: $light_scheme;
        @include transform(translateX(-300px));
        @include transition(transform 500ms ease);

        .container-fluid {
            padding: 0;
        }

        .mobile-nav {
            li {
                position: relative;
                font-size: rem(16px);
                line-height: 1.7;

                &:not(:last-child) {
                    border-bottom: 1px solid $border_color;
                }

                &.active {
                    border-bottom: none;
                }

                &.menu-item-has-children {

                }

                a {
                    display: inline-block;
                    padding: rem(11px 0 11px);
                }
            }

            .sub-menu {
                display: none;
                width: 100% !important;
                padding-left: rem(10px);
                @include transition(none);
            }
        }
    }
}

.dropdown-toggle {
    display: block;
    position: absolute;
    top: 16px;
    right: 0;
    background: none;

    &:after {
        content: '\ea48';
        font-family: "boxicons";
        color: #000;
        font-size: 1.8rem;
        line-height: 1;
        cursor: pointer;
        position: absolute;
        right: 0;
        transition: all 0.4s;
    }

    &:focus {
        &:after {
            color: #08c;
            outline: thin dotted;
        }
    }
}