/*
Theme Name:   Seattle Made
Description:  Custom WordPress theme built exclusively for use on the Seattle Made website
Version:      1.0
Author:       Christine Estrada via TRAY Creative
Author URI:   http://www.traycreative.com
*/



/* SITE STRUCTURE
 * Structural elements
 * ---------------------------------------------------------------------- */

body {
  width: 100%;
  font-size: 16px;
  line-height: 1.4;
}

.mobile-wide {
  padding-left: 30px;
  padding-right: 30px;
}

.mobile,
a.button.mobile-button {
  display: none;
}

.desktop {
  display: block;
}

.page-content {
  margin-top: 202px;
}

header[role='banner'].tall + .page-content {
  margin-top: 259px;
}

.columns-2 .column {
  float: left;
  width: 48%;
}

.columns-2 .column:last-child {
  float: right;
}

.cms-copy .columns-3 .column {
  float: left;
  width: 33.33%;
}

.columns-panel .image-left {
  float: left;
  width: 48%;
  margin-right: 2%;
}

.columns-panel .image-left + .column {
  float: right;
  width: 48%;
}

.columns-panel .image-right {
  float: right;
  width: 48%;
  margin-left: 2%;
}

.columns-panel .image-right + .column {
  float: left;
  width: 48%;
}

.blocked-image {
  width: 100%;
  height: 243px;
}

.panel-image {
  max-height: 250px;
  overflow: hidden;
}

  .panel-image img {
    width: auto;
    height: 100%;
    margin-left: -18%;
  }




/* GENERAL TYPOGRAPHY
 * Styling for global typographical elements
 * ---------------------------------------------------------------------- */

h1 {
  font-size: 42px;
}

h2 {
  font-size: 34px;
  font-weight: 700;
}

h3 {
  font-size: 24px;
}

  h3 a {
    font-size: 28px;
  }

h4 {
  font-size: 22px;
}

  h4 a {
    font-size: 22px;
  }

h5 {
  font-size: 22px;
}




/* HEADER STYLING
 * Styling for the header area of the site
 * ---------------------------------------------------------------------- */
 
header[role='banner'] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 103px;
  z-index: 100;
  text-align: left;
  padding-top: 15px;
  padding-bottom: 18px;
}

  header[role='banner'] .logo {
    position: relative;
    z-index: 20;
  }
  
  header[role='banner'].tall {
    min-height: 225px;
  }
  
  


/* FOOTER STYLING
 * Styling for the footer area of the site
 * ---------------------------------------------------------------------- */

footer[role='contentinfo'] {
  padding: 65px 0;
}

footer[role='contentinfo'] .column.nav {
  float: left;
  width: 40%;
}

footer[role='contentinfo'] .column.credits {
  float: right;
  width: 50%;
  text-align: right;
  margin-top: 38px;
}

footer[role='contentinfo'] .site-design {
  display: inline-block;
  margin-top: 0;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #fff;
}




/* NAVIGATION STYLING
 * Styling for navigation
 * ---------------------------------------------------------------------- */

  /* STYLING: BANNER NAV
   * Styling for banner nav
   * ---------------------------------------------------------------------- */

  .nav-banner {
    position: absolute;
    top: 0;
    right: 30px;
    text-align: right;
  }
  
    .nav-banner ul {
      display: inline-block;
      vertical-align: middle;
    }

    .nav-banner a {
      font-size: 18px;
      display: inline-block;
      padding: 8px 0;
      color: #23a267;
    }
    
    .nav-banner li {
      display: inline-block;
      line-height: 39px;
      margin: 0 2px;
    }
    
    .nav-banner li.with-border:after {
      display: inline-block;
      content: "|";
      padding: 0 10px;
      color: #666;
    }
    
    .nav-banner li.logout:before {
      content: "|";
      padding: 0 10px;
      color: #666;
    }
    
    .nav-banner li.facebook { 
      width: 37px;
      height: 39px;
      margin-left: 18px;
      background: url('images/logo_fb.png') center center no-repeat;
    }
    
    .nav-banner li.facebook a {
      display: block;
      font-size: 0;
    }
    
    .nav-banner li.twitter { 
      width: 37px;
      height: 39px;
      background: url('images/logo_twitter.png') center center no-repeat;
    }
	
	.nav-banner li.instagram { 
      width: 37px;
      height: 39px;
      background: url('images/logo_instagram.png') center center no-repeat;
    }
    
    .nav-banner li.twitter a {
      display: block;
      font-size: 0;
    }
	.nav-banner li.instagram a {
      display: block;
      font-size: 0;
    }


  /* STYLING: PRIMARY NAV
   * Styling for primary nav
   * ---------------------------------------------------------------------- */

  .nav-primary {
    position: absolute;
    top: 86px;
    left: 0;
    width: 100%;
    min-height: 0;
    z-index: 10;
  }
  
  .nav-primary .nav-open {
    display: none;
  }
  
  .nav-primary ul#menu-primary-nav {
    float: right;
    display: block !important;
    padding-top: 0;
  }
  
  .nav-primary ul#menu-primary-nav > li > a {
    padding-left: 0;
    padding-right: 0;
  }
  
  .nav-primary li {
    display: inline-block;
    padding-left: 20px;
  }
  
  .nav-primary a {
    display: inline-block;
    letter-spacing: 1px;
    line-height: 1;
    padding: 16px 0 2px 0;
    border-bottom: 2px solid #23a267;
    margin-bottom: 8px;
  }

  body.sm_manufacturers .nav-primary .current_page_item > a,
  body.sm_events .nav-primary li#menu-item-4588 > a,
  .nav-primary .current-menu-parent > a,
  .nav-primary .current-menu-item > a,
  .nav-primary .sub-menu .current_page_item > a {
    border-bottom: 2px solid #fff;
  }
  
  .nav-primary .sub-menu {
    position: absolute;
    bottom: -58px;
    right: 30px;
    padding-left: 0;
    padding-right: 0;
  }
  
  .nav-primary .sub-menu a {
    font-size: 18px;
    border-bottom: 2px solid #000;
  }
  

  /* NAV STYLING: MANUFACTURER NAV
   * Styling for manufacturer nav
   * ---------------------------------------------------------------------- */

  .nav-manufacturers {
    float: right;
    width: 70%;
    margin: -30px 0 0 0;
  }
  
  .nav-manufacturers .group {
    margin-top: 10px;
  }
  
  .nav-manufacturers #browse-by-industry {
    float: left;
    width: 40%;
	height: 35px;
  }
  
  .nav-manufacturers #searchform {
    float: right;
    width: 45%;
    text-align: right;
    margin-right: 30px;
    margin-top: 8px;
  }
  
  .nav-manufacturers .filters {
    margin-top: 0;
  }

  .nav-manufacturers .filters li {
    float: left;
    margin-right: 0;
  }
  



/* SECTION STYLING
 * Styling for section content
 * ---------------------------------------------------------------------- */

  /* SECTION STYLING: MEMBER GRID
   * Styling for member grid
   * ---------------------------------------------------------------------- */

  .section-members h1 {
    text-align: left;
  }

  .section-member-grid {
    text-align: left;
    margin-left: -1.5%;
    margin-right: -1.5%;
  }
  
  .section-member-grid .member {
    display: inline-block;
    max-width: 333px;
    width: 30.5%;
  }

  .section-member-grid .member.sm-event {
    width: 47%;
  }
  
  @media screen and (max-width: 860px) {
    .section-member-grid .member,
    .section-member-grid .member.sm-event {
      width: 50%;
    }
  }


  /* SECTION STYLING: SIDEBAR
   * Styling for sidebar content
   * ---------------------------------------------------------------------- */

  .section-sidebar {
    float: right;
    width: 28%;
    margin-top: 70px;
  }




/* ARTICLE STYLING
 * Styling for articles
 * ---------------------------------------------------------------------- */

article.with-sidebar {
  float: left;
  width: 60%;
}

.article-excerpt {
}




/* PAGE STYLING
 * Styling for specific pages
 * ---------------------------------------------------------------------- */

  /* PAGE STYLING: HOME
   * Styling for home page
   * ---------------------------------------------------------------------- */

  #home header[role='banner'] .logo {
    position: absolute;
    top: -15px;
    left: 30px;
  }
  
  #home .page-content {
    margin-top: 268px;
  }
  
  #home .nav-primary {
    top: 86px;
  }
  
  #home .section-hero {
    margin-top: -122px;
  }
  
  #home .section-hero .hero-image {
	width: 100%;
    height: 450px;
  }
  
  #home .section-hero .content {
    float: left;
    margin-right: 250px;
  }
  
  #home .section-hero .button {
    position: absolute;
    top: 0;
    right: 30px;
    margin-top: 15px;
  }
  
  #home .section-members .button {
    position: absolute;
    top: 0;
    right: 30px;
  }
  .content-container #searchform2 {
    display: inline-block;
    margin-bottom: 20px;
	position: absolute;
	top: 0;
	right: 300px;
  }
  #home .section-events .upcoming-events {
    float: left;
    width: 35%;
  }
  
  #home .section-events .get-involved {
    float: right;
    width: 62%;
    margin-top: 0;
  }
  
  #home .section-events .get-involved .block {
    float: left;
    width: 50%;
    margin-top: 0;
  }
  
  #home .section-events .get-involved .block:nth-child(4),
  #home .section-events .get-involved .block:nth-child(5) {
    margin-top: 20px;
  }

  #home .section-events .get-involved .content {
    width: 95%;
  }
  
  
  /* PAGE STYLING: ABOUT
   * Styling for about page
   * ---------------------------------------------------------------------- */

  .section-bios .bio {
    float: left;
    min-width: 350px;
  }
  
  .section-bios .bio-detail {
    position: absolute;
    top: 60px;
    right: 30px;
    margin-left: 400px;
  }
  
  section#donate .column.copy {
    float: left;
    width: 55%;
  }
  
  section#donate .column.donate {
    float: right;
    width: 40%;
    text-align: right;
  }
  

  /* PAGE STYLING: LOGOS
   * Styling for logos page
   * ---------------------------------------------------------------------- */

  #logos .image-row img {
    float: left;
    max-width: 25%;
    height: auto;
  }


  /* PAGE STYLING: EDIT ACCOUNT
   * Styling for logos page
   * ---------------------------------------------------------------------- */

  #edit-account .page-content article {
    padding-bottom: 50px;
  }