.c-header {
    height: 100vh;
    height: 1300px;
    background: {
        position: center top;
        repeat: no-repeat;
        size: 100% auto;
    }
    padding-top: 90px;
    
    .blue & {
        background-image: url(../img/header/header--blue.jpg);
        background-size: auto 100%;
    }
    
    .gray & {
        background-image: url(../img/header/header--gray.jpg);
        background-size: auto 100%;
    }
    
    @media ( max-width: $design + px ) {
    	@include responsive-height(design(1300), rem(1100));    	
    }
    
    @media ( max-width: $base + 80px ) {
    	@include responsive-padding-top(base(90), rem(40));
    }

    @media ( max-width: $base + 80px ) {
    	//background-size: base(2500) auto;
    	@include responsive-height(base(1100), 900);
    }
    
    @media ( max-width: $tablet + px ) {
    	background-size: auto 100%;
    	background-position: 60% 0;
    }
    
    @media ( max-width: $tablet_portrait + px ) {
    	height: 460px;
    }
    
    .violet & {
        background-image: url(../img/header/header--violet.jpg);
        
        @media ( max-width: $design + px ) {
            @include responsive-height(design(1300), rem(840));
        }
        
        @media ( max-width: $smartphone + px ) {
            height: 480px;
        }
    }
    
    header {
        width: grid(840, $base - 80);
        margin-bottom: 5em;
        
        .gray & {
            max-width: 760px;
        }
        
        @media ( max-width: 1100px ) {
        	margin-bottom: 5%;
        }
        
        @media ( max-width: $tablet + px ) {
        	width: grid(800);
        }

        h1 {
            @extend %lead--1;
            margin-bottom: .2em;
            font-family: $minion;
            font-weight: $regular;
            
            @media ( max-width: $tablet + px ) {
            	@include responsive-font(tablet(52), rem(34));
            }
        }
        
        h2 {
            @extend %lead--2;
            font-weight: $regular;
            
            @media ( max-width: $tablet + px ) {
            	@include responsive-font(tablet(26), rem(20));
            }
        }
    }
    
    .o-btn {
        margin-bottom: 40px;
    }
    
    .c-download {
        &__buttons {
            @extend %flex-x;
        }
        
        .o-btn {
            @media ( max-width: $smartphone_portrait + px ) {
                width: 240px; height: 60px;
                margin-bottom: 20px;
                font-size: rem(18);
            }
        }
    }

    .green & {
        background-image: url(../img/header/header--green.jpg);
        background-size: contain;
        height: 57rem;

        header {
            margin-bottom: 2.5em;
        }

        @media ( max-width: 1501 + px ) {
            background-size: cover;
        }
    }
}