.c-topbar {
    @include z-index(topbar);
    position: fixed;
    left: 0; top: 0;
    width: 100%;
    height: 180px;
    background-color: white;

    @media ( max-width: $design + px ) {
    	@include responsive-height(design(180), rem(100));
    }
    
    &:after {
        @extend %abs-pseudo;
        left: 0; top: 0; z-index: 11;
        width: 100%; height: 100%;
        background-color: white;
    }

    .o-hamburger {
        @extend %abs;
        @extend %abs-x; z-index: 12;
        top: 0;
        width: 120px;
        height: calc(100% + 10px);
        background: {
            image: url(../img/assets/hamburger.png);
            position: center;
            width: 59px; 
            height: 41px;
            color: #fff;
            repeat: no-repeat;
        }

        .green & {
            background: {
                image: url(../img/assets/hamburger--green.png);
            }
        }
        
        .gray & {
            background-image: url(../img/assets/hamburger--gray.png);
        }
        
        @media ( max-width: $design + px ) {
        	background-size: auto design(41);
        }
        
        @media ( max-width: $design + px ) {
        	@include responsive-width(design(120), rem(69));
        }
        
        @media ( max-width: $tablet + px ) {
        	background-size: 30px auto;
        }
        
        @media ( max-width: $tablet_portrait + px ) {
            left: auto;
            transform: none;
        	right: 30px;
        	width: 70px;
        }
    }
    
    .o-logo {
        display: block;
        height: 97px;
        
        @media ( max-width: $design + px ) {
            @include responsive-height(design(97), rem(50));
        }

        img {
            width: auto;
            height: 100%;
        }
    }
    
    .o-wrap {
        @extend %flex;
        @extend %flex-y;
        @extend %wrap;
        height: 100%;
/*
        padding: {
            top: 46px;
            bottom: 46px;
        }
*/
        
        
    }
}
