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




/* GENERAL TYPOGRAPHY
 * Styling for global typographical elements
 * ---------------------------------------------------------------------- */
/* Accessible overflow fix
 */ 

.acsb-actions {
	overflow: hidden !important;
}
h1 {
  font-size: 50px;
}

p.title {
  font-size: 50px;
  line-height: 1.2;
}

.button {
  font-size: 20px;
  padding: 6px 50px;
}




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

body {
  width: 100%;
  font-size: 15px;
}

.page-content {
}

.mobile {
  display: none;
}

.desktop {
  display: block;
}

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

.columns-2 .column:first-child {
  margin-left: 0;
}

.columns-4 .column {
  float: left;
  width: 22%;
  text-align: left;
  margin-left: 4%;
}

.columns-4 .column:first-child {
  margin-left: 0;
}




/* HEADER STYLING
 * Styling for the header area of the site
 * ---------------------------------------------------------------------- */

header[role='banner'] {
  margin-bottom: 10px;
}

  header[role='banner'] .logo {
    float: left;
    width: 50%;
    height: auto;
  }
  
  header[role='banner'] .logo img {
    width: auto;
    height: auto;
	max-width: 50% !important;
  }

  header[role='banner'] .column {
    float: right;
    margin-right: 250px;
  }

    header[role='banner'] .tagline {
      position: absolute;
      right: 20px;
      bottom: 0;
      font-size: 24px;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    header[role='banner'] .donate {
      position: absolute;
      top: -20px;
      right: 20px;
      padding-top: 10px;
      background-color: #f99d1c;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  



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

footer[role='contentinfo'] .desktop {
  display: inline;
}

footer[role='contentinfo'] .credit {
  display: inline;
}
  
.section-footer-banner .column {
  float: left;
  width: 31.33%;
  margin-left: 3%;
  margin-top: 0;
}

  .section-footer-banner .column:first-child {
    margin-left: 0;
  }




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

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

  .nav-primary {
    display: block;
    background-color: #008ab0;
    border-bottom: 1px solid #fff;
  }
  
    .nav-primary #menu-primary-nav {
      min-width: 440px;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
    }
  
    .nav-primary #menu-primary-nav > li {
      position: relative;
      float: left;
      border-bottom: none;
    }
    
    .nav-primary #menu-primary-nav > li a {
      border-left: 1px solid #008ab0;
      border-right: 1px solid #008ab0;
    }
    
    .nav-primary #menu-primary-nav > li:hover .sub-menu {
      display: block;
    }

    body.single .nav-primary #menu-primary-nav .news .sub-menu .current_page_parent a {
      background: url('images/bg_orange.png');
    }
    
    .nav-primary #menu-primary-nav > li:hover a,
    .nav-primary #menu-primary-nav > li.current-menu-ancestor a,
    .nav-primary #menu-primary-nav > li.current-menu-item a {
      background-color: #f99d1c;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
    }
    
    .nav-primary #menu-primary-nav .sub-menu {
      position: absolute;
      top: 45px;
      left: 0;
      width: 200px;
      z-index: 300;
      background-color: transparent;
    }

    .nav-primary #menu-primary-nav .sub-menu li a {
      font-size: 16px;
      color: #fff;
      border-top: 1px solid #fff;
      background: url('images/bg_blue.png');
    }
    
    .nav-primary #menu-primary-nav .sub-menu li:last-child a {
      border-bottom: 1px solid #fff;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    
    .nav-primary #menu-primary-nav .sub-menu li:hover a,
    .nav-primary #menu-primary-nav .sub-menu li.current-menu-item a {
      background: url('images/bg_orange.png');
    }
  

  /* NAV STYLING: NAV FOOTER
   * Styling for nav footer
   * ---------------------------------------------------------------------- */
  .nav-footer .column {
    float: left;
    width: 50%;
  }


  /* NAV STYLING: FEATURED LINKS
   * Styling for orange featured links
   * ---------------------------------------------------------------------- */

  .nav-featured-links .featured-link {
  }




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

  section .with-sidebar.aside-left aside {
    float: left;
    width: 20%;
  }
  
  section .with-sidebar.aside-left > .content {
    float: right;
    width: 75%;
  }
  
  section .with-sidebar.aside-right aside {
    float: right;
    width: 20%;
  }
  
  section .with-sidebar.aside-right > .content {
    float: left;
    width: 75%;
  }
  
  .section-panel .photo {
    float: left;
    width: 25%;
  }

  .section-panel .bio {
    float: right;
    width: 70%;
  }
  
  .featured-post {
    float: right;
    width: 40%;
    margin-top: 75px;
  }


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

  .section-sidebar {
    float: left;
    width: 25%;
    margin-bottom: 0;
  }
  
  .section-sidebar img {
    margin: 0;
  }
  
  .section-news-list {
    float: right;
    width: 65%;
  }




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

.article-excerpt.pet-of-the-week .sidebar {
  float: left;
  width: 30%;
}

  .article-excerpt.pet-of-the-week .sidebar img {
    max-width: 100%;
    height: auto;
  }

.article-excerpt.pet-of-the-week .content {
  float: right;
  width: 65%;
}




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

  .header-page {
    height: 400px;
    background-size: auto;
  }

    .header-page .slide-content {
      position: relative;
      width: 100%;
      top: 0;
      background-color: transparent;
      z-index: 200;
    }  
    
    .header-page .slide-content h1 {
      max-width: 400px;
      padding-top: 190px;
      margin-left: 75px;
      text-shadow: 2px 2px 2px #303030;
    }


  /* PAGE STYLING: ADOPT
   * Styling for adopt page
   * ---------------------------------------------------------------------- */

  #adopt .success-columns .column:first-child {
    float: left;
    width: 55%;
  }


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

  #home .section-carousel .slides {
    height: 400px;
  }
  
  #home .section-carousel .slides li {
    position: relative;
    height: 400px;
    margin-bottom: 0;
    background-size: auto;
  }

  #home .section-carousel .flex-prev,
  #home .section-carousel .flex-next {
    display: block;
    top: 50%;
  }
    
  #home .section-carousel .slide-content {
    position: absolute;
    top: 25%;
    left: 0;
    height: 50%;
    background-color: transparent;
  }

  #home .section-carousel p.title {
    max-width: 400px;
    margin-top: 0;
    margin-left: 75px;
  }
  
  #home .section-carousel .button {
    margin-left: 75px;
  }

  #home .news-story {
    position: relative;
    float: left;
    width: 30.33%;
    margin: 0 1.5% 35px;
  }
  
  #home .section-statistics .column.tagline p {
    font-size: 40px;
    line-height: 1.3;
  }

  #home .section-statistics .column.tagline p.slab.small {
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 600;
  }
  
  #home .section-statistics .column {
    float: left;
    width: 20.33%;
	min-width: min-content;
    margin: 0 1.5%;
    text-align: left;
  }  

  #home .section-statistics .number {
    font-size: 84px;
    line-height: 1;
  }

  #home .section-events .latest-events {
    float: left;
    width: 55%;
  }




/* FORM STYLING: DONATE PAGE
 * Styling for donation form
 * ---------------------------------------------------------------------- */

/*
  #donate #input_4_6,
  #donate #input_4_31,
  #donate #input_4_10,
  #donate #input_4_11,
  #donate #input_4_12,
  #donate #input_4_13,
  #donate #input_4_15,
  #donate #input_4_16,
  #donate #input_4_17,
  #donate #input_4_18,
  #donate #input_4_20,
  #donate #input_4_24,
  #donate #input_4_21,
  #donate #input_4_22,
  #donate #input_4_23,
  #donate #input_4_26,
  #donate #input_4_34,
  #donate #field_4_34 .gfield_description,
  #donate #field_4_37,
  #donate #input_4_38,
  #donate #input_4_39,
  #donate #input_4_28 {
    margin-left: 50px !important;
  }
  
  #donate #field_4_2 {
    padding-left: 50px;
  }
*/
  
  #donate #field_4_2,
  #donate #field_4_3,
  #donate #field_4_38,
  #donate #field_4_39 {
    display: inline-block;
    width: 49.5%;
  }
  
  @media screen and (min-width:1140px) {
    .column.contact-info {
      margin-left: 0;
    }
  }