// *--------- MODULES ---------*
// *--------- SIDEBAR ---------*

        .hamburger-menu, 
        .search-menu, 
        .search-close {
            width: 26px;
            height: 26px;
            position: absolute;
            top: 40px;
            z-index: 2;

            font-size: 14px;
            line-height:0;
            color: #000;

            cursor: pointer;

            border: 0;
            background-color: transparent; 
        }

        .hamburger-menu {
            left: 0;
        }

        .search-menu {
            right: 0;
        }

        .search-close {
            color: #fff;

            right: 20%;
            top: 36%;
        }

.sidebar {
    visibility: hidden;

    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);

    font-weight: normal;

    position: fixed;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;

    opacity: 0;

    will-change: opacity;

    -webkit-transition: visibility 0s, opacity 0.3s ease-in-out;
    -moz-transition: visibility 0s, opacity 0.3s ease-in-out;
    -ms-transition: visibility 0s, opacity 0.3s ease-in-out;
    -o-transition: visibility 0s, opacity 0.3s ease-in-out;
    transition: visibility 0s, opacity 0.3s ease-in-out;

    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;

    .sidebar-content {
        padding: 10% 6%;
        margin: 0 auto;
        width: calc(100% + 15px);
        height: 100%;
        overflow: auto;

        text-align: center;

        .main-nav { 
            font-size: 5vw;
            font-weight: 700;
            line-height: 2em;

            a {
                color: #9d9d9d;                
                &:hover {
                    color: #fff;
                }                 
            }

        }

        .social-nav {
            margin-top: 20px;
            margin-bottom: 40px;
            font-size: 4vw;

            li {
               display: inline-block;
               margin-right: 10px;

                &:last-child {
                    margin-right: 0;
                }     
                                 
                a {
                    color: #9d9d9d;                
                    &:hover {
                        color: #fff;
                    }                 
                }                    
            }

        }

    }

    &.opened {
        visibility: visible;
        opacity: 1;     
    }

    .sidebar-close {
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;

        font-size: 32px;
        color: #fff;

        position: absolute;
        top: 80px;
        right: 60px;

        cursor: pointer;
    }    
}

   .search-box {
        visibility: hidden;

        width: 100%;
        height: 100%;

        font-weight: normal;

        position: fixed;
        overflow: hidden;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1001;

        opacity: 0;

        will-change: opacity;

        -webkit-transition: visibility 0s, opacity 0.3s ease-in-out;
        -moz-transition: visibility 0s, opacity 0.3s ease-in-out;
        -ms-transition: visibility 0s, opacity 0.3s ease-in-out;
        -o-transition: visibility 0s, opacity 0.3s ease-in-out;
        transition: visibility 0s, opacity 0.3s ease-in-out;

        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;

        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;

        background: rgba(0, 0, 0, 0.8);

        &.opened {
            visibility: visible;
            opacity: 1;     
        }

        .search-form {
            top: calc(50% - 20px);
            width: 50%;
            position: absolute;
            left: 25%;

            .fa {
                position: absolute;
                top: 21px;
                left: 30px;

                font-size: 24px;
                color: #000;
            }

            input {
                width: 100%;
                margin: 0 auto;
                padding: 20px 20px 20px 90px;

                background: #fff;
                border: 1px solid #000;

                font-size: 24px;   
                color: #000;

                border: none;
                border-radius: 4px;

                -webkit-box-shadow: 20px 20px 90px 0px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 20px 20px 90px 0px rgba(0, 0, 0, 0.5);
                box-shadow: 20px 20px 90px 0px rgba(0, 0, 0, 0.5)               
            }   
        }          
    }

@media only screen and (max-width: 926px) {
    .sidebar {
        .sidebar-content {
            width: 100vw;
            height: 100%;
            margin: 0 auto;
            padding: 10% 6%;

            .sidebar-col-1,
            .sidebar-col-2 {
                display: block;
                width: 100%;
                padding: 0;
            }           
        }

        .sidebar-close {
            right: 6%;
        }

        .wrapper {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}    

@media only screen and (max-width: 612px) {
    .sidebar {
        .sidebar-close {
            top: 5%;
        }   
    }
}