$header-width:100%;
$header-min-height:250px;
$header-background-color:white;
$site-title-size:7rem;
$site-title-size-mobile:3.6rem;
$site-title-opacity:1;
$site-title-color:#000;
$site-title-hover-color:#daa520;
$site-description-color:#000;
$site-description-size:2rem;
$site-description-size-mobile:1.8rem;
$site-description-font-style:italic;

header#masthead{
    background:$header-background-color;
    width:100%;
    display:flex;
    .site-branding{
        min-height:$header-min-height;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction: column;
        margin:0 auto;
        height:150px;
        flex-grow:2
    }
    .search,
    .social{
        flex-grow:1
    }
    .header-image{
        img{max-width:$header-width;
            display:block;
            margin:0 auto;
            min-height:$header-min-height
        }
    }
    .site-title{
        font-family: $font-headings;
        margin:0 auto;
        a{
            font-size:$site-title-size;
            color:$site-title-color;
            opacity:$site-title-opacity;
            line-height: 1.2;
        }
        a:hover{
            color:$site-title-hover-color
        }
    }
    p.site-description{
        font-family: $font-subheadings;
        font-size:$site-description-size;
        color:$site-description-color;
        font-style:$site-description-font-style;
        margin: 0;
    }
       
    @include susy-breakpoint($phones) {
        .site-title-holder,
        h1.site-title,
        h2,
        h2.section-title,
        h3.services-title,
        p{
            text-align:center;
        }
        h1.site-title a{
            font-size:$site-title-size-mobile;
        }
        .site-title-holder p.site-description{
            font-size:$site-description-size-mobile;
        }
    }
    
//    Search form
    #header-search {
        flex-grow:1;
        .search-form {
              float: right;
              margin: 20px 20px 0 0;
        }
	 
        .search-field {
            background-color: transparent;
            background-image: url(images/search.png);
            background-position: 5px center;
            background-repeat: no-repeat;
            background-size: 24px 24px;
            border: none;
            cursor: pointer;
            height: 37px;
            margin: 3px 0;
            padding: 0 0 0 34px;
            position: relative;
            -webkit-transition: width 400ms ease, background 400ms ease;
            transition:         width 400ms ease, background 400ms ease;
            width: 0;
        }    

        .search-field:focus {
            background-color: #fff;
            border: 2px solid #000;
            cursor: text;
            outline: 0;
            width: 230px;
        }
        .search-form .search-submit {
            display:none;
        }

    } // end of header-search

} // end of header#masthead


