// SETTINGS
//---------------------------------------------------------

// Menu Collapse, change to something above viewport width to see responsive version
$toggle: 700px;

// Main Bar Background Color
$menu_bg: #B50A50;

// Link Color and Hover
$menu_color: white;
$item_hover_color: lighten($menu_bg, 75%);

// Drop Down Opener (Arrow Links)
$arrow_toggle_line: 1px solid rgba(white, .1);
$arrow_toggle_hover_bg: rgba(white, .1);
$arrow_toggle_color: white;

// Level Two Background and Background on hover
$level-two_bg: $menu_bg;
$level-two_hover_bg: rgba(white, .1);

// Level Three Background and Background on hover
$level-three_bg: $menu_bg;
$level-three_hover_bg: rgba(white, .1);

// Menu Text Alignment use[left, center, right]
$text_align: left; 

// Responsive Toggle Link
$responsive_width: 100%;
$responsive_toggle_text_align: left;
$navtoggle_bg: #291018;
$navtoggle_color: white;
$navtoggle_hover_color: lighten(#291018, 80%);


// STYLES
//-----------------------------------------------------------------
// general styles
/* do not copy this, scroll further */
body{
    line-height: 1.2;
    background: #34364F;
    font:{
        family: 'Droid Sans', 'Calibri', 'Arial', sans-serif;
        size: 16px;
    }    
}

.container{
    width: 80%;
    max-width: 1300px;
    background: #F5F7F6;
    margin: 80px auto;
    padding: 30px;
    box-sizing: border-box;
}

header{
    padding: 80px 0;
}

p{        
    margin: 10px 0px;    
}
    
h1{
    font:{
        size: 100px;
        family: 'Old Standard';
    }
    color: #A62030;
    text-transform: uppercase;
    letter-spacing: 30px;
    text-align: center;
}

a{    
    text-decoration: none;    
    transition: .3s all ease;
}

// Navigation
/* Copy Everything Below This Line */
.menu{
    background: $menu_bg;
    width: 100%;
    padding: 3px 7px;
    box-sizing: border-box;
    text-align: $text_align;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    ul,
    li{
        margin: 0;
        padding: 0;
    }
    
    // Basic Link styling
    a{
        color: $menu_color;
        
        &:hover,
        &:focus{
            color: $item_hover_color;
        }
    }
    
    // first level
    > ul{
        width: 100%;
        position: relative;
        display: inline-block;
        
        li{
            display: inline-block;
            padding: 10px 7px;
        }
    }
    
    // Drop Down Toggle Links
    .fa{
        border: $arrow_toggle_line;
        border-radius: 2px;
        padding: 3px 0px;
        color: $arrow_toggle_color;
        margin: 0 10px;
        
        a{
            font-size: 0;
            padding: 0 !important;
        }
        
        &:hover,
        &:focus{
            background: $arrow_toggle_hover_bg;
            cursor: pointer;
        }
    }
    
    // Second Level
    .level-two{
        display: none;
        position: absolute;
        background: $level-two_bg;
        top: 100%;
        left: auto;
        
        > li{
            display: block;
            background: transparent;
            padding: 0;
            transition: .3s all ease;
            position: relative;
            white-space: nowrap;
            
            &:hover,
            &:focus{
                background: $level-two_hover_bg;
            }
            
            a{
                width: 100%;
                display: block;
                padding: 10px 7px;
                box-sizing: border-box;
            }
        }
        
        // List Items with Sub Menus
        .sharewidth{            
            > a{
                display: inline-block;
                width: auto;
            }
        }
    }
    
    .level-three{
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        background: $level-three_bg;
        
        li{
            display: block;
            background: transparent;
            padding: 0;
            transition: .3s all ease;
            position: relative;
            white-space: nowrap;
            
            &:hover,
            &:focus{
                background: $level-three_hover_bg;
            }
        }
    }
}

// Toggle Link
@media screen and (min-width: $toggle + 1){
    .navtoggle{
        display: none;
    }
}

// Responsive Version
@media screen and (max-width: $toggle){
    .outside{
        position: fixed;
        top: 0px;
        left: 0px;
        width: $responsive_width;
        padding: 10px;
        box-sizind: border-box;
        text-align: $responsive_toggle_text_align;
        z-index: 10;
        background: $navtoggle_bg;
        color: $navtoggle_color;
        
        &:hover,
        &:focus{
            color: $navtoggle_hover_color;
            cursor: pointer;
        }        
    }
    
    .menu{
        position: fixed;
        height: 100%;
        top: 0;
        left: -320px;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translate(0 0);
        max-width: 320px;
        transition: .3s all ease;
        
        .navtoggle{
            position: relative;
            top: 0;
            right: 0;
            left: 0;
            display: block;
            text-align: right;
            font-size: 0;
            
            .fa{
                font-size: 20px;
                border: 0 solid transparent;
                
                &:hover,
                &:focus{
                    background: transparent;
                    opacity: .5;        
                }
            }
        }
        
        &.active{
            transform: translateX(320px);
            transition: .3s all ease;
        }
        > ul li{
            display: block;            
        }
        
        .level-two,
        .level-three{
            position: relative;
            left: 0;
            top: 0;
        }        
    }
}