/*
 * ----------
 *  5 Footer
 * ----------
 */

footer {
    width: 100%;
}

/*
 *  5.1 Widgetized Footer
 * -----------------------
 */
.foot1 {
    .content {
        border-top: $line;
    }
    .widgetized {
        width: 100%;
        @include flexbox(row, wrap, space-between, stretch);
        > div {
            padding: 20px;
            box-sizing: border-box;
        }
        .widget {
            border: $noborder;
        }
    }
    .one_widget {
        > div {
            width: 100%;
        }
    }
    .two_widget {
        > div {
            width: 50%;
            @media screen and (max-width: $widget_foot_collapse_3) {
                width: 100%;
            }
        }
    }
    .three_widget {
        > div {
            width: (100% / 3);
            @media screen and (max-width: $widget_foot_collapse_2) {
                width: 50%;
            }
            @media screen and (max-width: $widget_foot_collapse_3) {
                width: 100%;
            }
        }
    }
    .four_widget {
        > div {
            width: 25%;
            @media screen and (max-width: $widget_foot_collapse_1) {
                width: (100% / 3);
            }
            @media screen and (max-width: $widget_foot_collapse_2) {
                width: 50%;
            }
            @media screen and (max-width: $widget_foot_collapse_3) {
                width: 100%;
            }
        }
    }
}


/*
 *  5.2 Footer Menu Section
 * -------------------------
 */
$footer_menu_collapse: 1100px;

.foot2 {
    background: $foot_2_bg;
    padding: 10px 0px;
    font-family: $sfont;
    color: $foot_2_color;
    .content {
        @include flexbox(row, wrap, space-between, center);
        
        @media screen and (max-width: $footer_menu_collapse){
            flex-direction: column;
            text-align: center;
            align-items: center;
        }
    }
    
    a {
        font-weight: $ssnormal;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: $foot_2_a_color;
        &:hover {
            color: $foot_2_a_hover_color;
        }
    }
    .backtotop {
        @include linkline();
    }
    .navline {
        @include flexbox(row, wrap, space-between, center);        
        padding: 20px 0px;
        nav {
            a {
                padding: 10px;
                
                @media screen and (max-width: $footer_menu_collapse){
                    display: block;
                }
                
                @media screen and (min-width: $footer_menu_collapse + 1){
                    &:first-of-type {
                        padding-left: 0px;
                    }
                }
            }
        }
    }
}


/*
 *  5.3 Social Media and Credits
 * ------------------------------
 */
.foot3,
.notice {
    background: $foot_3_bg;
    color: $foot_3_color;
    padding: 10px 0px;
    a {
        color: $foot_3_a_color;
        &:hover {
            color: $foot_3_a_hover_color;
        }
    }
    .content {
        @include flexbox(row, wrap, space-between, center);
    }
    .smline {
        a {
            padding: 0px 10px;
            display: inline-block;
            margin: 10px 0;
        }
        .fa {
            font-size: 1.2em;
            background: $foot_3_color;
            padding: 10px 7px;
            border-radius: 50%;
            color: $foot_3_bg;
            transition: .3s all;
            &:hover {
                color: $foot_3_color;
                background: $foot_3_bg;
            }
        }
    }
}

.notice {
    text-align: center;
    font-size: .8em;
    border-top: 1px solid rgba(invert($foot_3_bg), .1);
}