header{
    padding-top:1em;
    padding-bottom:1em;
    background-color: $color-header-bg;
    margin-bottom:2em;
    color:white;

    a{
        color:white;
    }

    h1, h2{
        margin:0;
        color:white;
    }

    h1{
        padding:0.2em 0;

        &.icon:before{
            width:1em;
            display:none;
            margin-right:0.4em;
            font-size:1.5em;
        }
    }

    .col{
        float:left;
        margin-right:2em;
    }
    .left{
        float:left;

        .hasform &:first-child{
            padding-bottom:0.5em;
            float:none;
        }
    }
    .right{
        text-align:right;
        float:right;
    }

    /* For case where content below header should merge with it */
    &.merged{
        margin-bottom:0;
    }
    &.tab-merged, &.no-border{
        border:0;
    }
    &.merged.no-border{
        padding-bottom:0;
    }
    &.no-v-padding{
        padding-top:0;
        padding-bottom:0;
    }
    /*
    &.hasform h1{
        margin-top:0.2em;
    }
    */
    .button{
        background-color:$color-teal-darker;
        &:hover{
            background-color:$color-teal-dark;
        }
    }

    /* necessary on mobile only to make way for hamburger menu */
    &.nice-padding{
        padding-left:$desktop-nice-padding;
    }

    label{
        @include visuallyhidden();
    }

    input[type=text], select{
        border-width:0;

        &:focus{
            background-color:white;
        }
    }

    .fields{
        margin-top:-0.5em;
        li{
            padding-bottom:0;
        }
        .field{
            padding:0;
        }
    }

    .field-content{
        width:auto;
        padding:0;
    }
}

@media screen and (min-width: $breakpoint-mobile){
    header{
        padding-top:1.5em;
        padding-bottom:1.5em;

        .left{
            float:left;
            margin-right:0;

            &:first-child{
                padding-bottom:0;
                float:left;
            }
        }
        .second{
            clear:none;

            .right, .left{
                float:right;
            }
        }

        h1.icon:before{
            display:inline-block;
        }

        .col3{
            @include column(3);
        }
        .col3.addbutton{
            width:auto;
        }
        .col6{
            @include column(6);
        }
        .col9{
            @include column(9);
        }
        .breadcrumb{
            margin-left:-($desktop-nice-padding);
            margin-right:-($desktop-nice-padding);
        }
    }
}