.c-footer {
    @extend %rel;
    box-shadow: 0 -2px 131px rgba(0, 0, 0, 0.21);

    &__nav {
        height: 90px;
        
        .blue & {
            background-color: $c-blue-04;
        }
        
        .gray & {
            background-color: $c-gray-05;
        }
        
        .violet & {
            background-image: linear-gradient(-239deg, #5d69b1 0%, #5582d2 100%);
        }
        
        @media ( max-width: $design + px ) {
            @include responsive-height(design(90), rem(40));
        }
        
        @media ( max-width: $smartphone + px ) {
        	height: auto;
        	padding: 10px 0;
        }
        
        ul {
            @extend %wrap;
            @extend %flex;
            @extend %flex-y;
            @extend %flex-spacebetween;
            height: 100%;
            
            .gray & {
                justify-content: center;
            }
            
            @media ( max-width: $smartphone + px ) {
                flex-wrap: wrap;
            }
            
            li {
                .gray & {
                    padding: 0 30px;
                    
                    @media ( max-width: $smartphone_portrait + px ) {
                        padding: 0 5px;
                    }
                    
                    &:first-of-type {
                        @media ( min-width: $smartphone_portrait + px ) {
                        	border-right: 1px solid white;
                        }
                    }
                }
            }
        }
        
        a {

            font-size: rem(25);
            color: white;
            
            @media ( max-width: $design + px ) {
                @include responsive-font(design(25), rem(16));
            }

            &:hover {
                text-decoration: underline;
            }
        }
    }
    
    &__top {
        @extend %flex;
        @extend %flex-y;
        height: 45px;
        background-color: white;
        
        @media ( max-width: $design + px ) {
            @include responsive-height(design(45), rem(25));
        }
        
        @media ( max-width: $tablet + px ) {
        	height: auto;
        	padding: 10px 0;
        }
        
        p {
            text-align: right;
            text-transform: uppercase;
            font: {
                size: rem(19);
                style: normal;
            }

            color: $c-gray-02;
        }
    }
}
