/*
Theme Name: Jenny Proudfoot
Theme URI: http://www.phenomenoodle.com
Author: Phenomenoodle | Taryn Wallis
Description: Custom theme created for Jenny Proudfoot
*/


/* =FONTS
--------------------------------------------------------------------------------------------------*/

@import url("//hello.myfonts.net/count/2a07dd");
@import url("//hello.myfonts.net/count/2b0067");
@import url("//hello.myfonts.net/count/2b09f6");

@font-face {
  font-family: 'AndesMedium';
  src: url('webfonts/2A07DD_0_0.eot');
  src: url('webfonts/2A07DD_0_0.eot?#iefix') format('embedded-opentype'),
        url('webfonts/2A07DD_0_0.woff') format('woff'),
        url('webfonts/2A07DD_0_0.ttf') format('truetype');
}

@font-face {
  font-family: 'AndesBold';
  src: url('webfonts/2A07DD_1_0.eot');
  src: url('webfonts/2A07DD_1_0.eot?#iefix') format('embedded-opentype'),
        url('webfonts/2A07DD_1_0.woff') format('woff'),
        url('webfonts/2A07DD_1_0.ttf') format('truetype');
}

@font-face {
  font-family: 'AndesBook';
  src: url('webfonts/2A07DD_2_0.eot');
  src: url('webfonts/2A07DD_2_0.eot?#iefix') format('embedded-opentype'),
        url('webfonts/2A07DD_2_0.woff') format('woff'),
        url('webfonts/2A07DD_2_0.ttf') format('truetype');
}

@font-face {
  font-family: 'AndesBook-Italic';
  src: url('webfonts/2A07DD_3_0.eot');
  src: url('webfonts/2A07DD_3_0.eot?#iefix') format('embedded-opentype'),
        url('webfonts/2A07DD_3_0.woff') format('woff'),
        url('webfonts/2A07DD_3_0.ttf') format('truetype');
}

@font-face {
  font-family: 'AndesMedium-Italic';
  src: url('webfonts/2B09F6_0_0.eot');
  src: url('webfonts/2B09F6_0_0.eot?#iefix') format('embedded-opentype'),
        url('webfonts/2B09F6_0_0.woff') format('woff'),
        url('webfonts/2B09F6_0_0.ttf') format('truetype');
}

@font-face {
  font-family: 'AndesBold-Italic';
  src: url('webfonts/2B0067_0_0.eot');
  src: url('webfonts/2B0067_0_0.eot?#iefix') format('embedded-opentype'),
        url('webfonts/2B0067_0_0.woff') format('woff'),
        url('webfonts/2B0067_0_0.ttf') format('truetype');
}


/* =BODY
--------------------------------------------------------------------------------------------------*/

body {
  background: url('images/jp-body-bg.png') repeat top left;
  color: #000000;
  font-family: AndesBook, sans-serif;
  font-size: 14px;
}


/* =SITE CONTAINER
--------------------------------------------------------------------------------------------------*/

#site-container {
  background: #FFFFFF;
  padding: 0 40px 0 200px;
}


/* =HEADER
--------------------------------------------------------------------------------------------------*/

#site-masthead {
  margin: 25px 0 0 0;
}

#site-logo {
  margin: 0 0 0 -158px;
  width: 412px;
}


/* =NAVBAR
--------------------------------------------------------------------------------------------------*/

#site-nav {
  border-top: 2px dotted #000000;
  margin: -10px 0 0 0;
  padding: 5px 0 0 0;
  width: 100%;
}

.navbar {
  border-radius: 0;
  min-height: 0;
}

.navbar-default {
  background: transparent;
  border-bottom: 1px solid #B0BD7C;
  border-left: none;
  border-right: none;
  border-top: 1px solid #B0BD7C;
}

#nav-pages {
  float: left;
  padding: 10px 0;
}

#nav-ul-pages > li > a {
  border-left: 1px solid #000000;
  color: #B0BD7C;
  font-family: AndesBold, sans-serif;
  line-height: 14px;
  padding: 0 15px;
  text-transform: uppercase;
}

#nav-ul-pages > li:first-child > a {
  border-left: none;
  padding: 0 15px 0 0;
}

#nav-ul-pages > li > a:hover {
  color: #000000;
}

#nav-ul-pages > li.current-menu-item > a,
#nav-ul-pages > li.active > a,
#nav-ul-pages > li.current-page-ancestor > a {
  background: transparent;
  color: #000000;
}

#nav-social-media {
  float: right;
  padding: 0;
}

#nav-social-media li a {
  background: url('images/jp-social-media-icons.png');
  height: 28px;
  margin: 0 0 0 7px;
  padding: 2px 0 0 0;
  text-indent: -99999px;
  width: 23px;
}

#nav-social-media li a:hover {
  margin-top: 6px;
}

#nav-social-media li a[href*="twitter.com"] {
  background-position: 0 28px;
}

#nav-social-media li a[href*="twitter.com"]:hover {
  background-position: 0 55px;
}

#nav-social-media li a[href*="facebook.com"] {
  background-position: -32px 28px;
}

#nav-social-media li a[href*="facebook.com"]:hover {
  background-position: -32px 110px;
}

#nav-social-media li a[href*="behance.net"] {
   background-position: -64px 28px;
}

#nav-social-media li a[href*="behance.net"]:hover {
  background-position: -64px 165px;
}

#nav-social-media li a[href*="pinterest.com"] {
  background-position: -96px 28px;
}

#nav-social-media li a[href*="pinterest.com"]:hover {
  background-position: -96px 220px;
}

#nav-social-media li a[href*="linkedin.com"] {
   background-position: -128px 28px;
}

#nav-social-media li a[href*="linkedin.com"]:hover {
  background-position: -128px 275px;
}

.navbar-toggle {
  float: left;
}

.navbar-collapse {
  overflow-x: hidden;
}


/* =PORTFOLIO OVERVIEW PAGES
--------------------------------------------------------------------------------------------------*/

.col-md-3 {
  margin-right: -2px;
  padding-left: 15px;
  padding-right: 12px;
}

.portfolio-item-thumbnail {
  height: 176px;
  overflow: hidden;
  position: relative;
  width: 178px;
}

.portfolio-item-thumbnail img {
  left: 0;
  position: absolute;
  top: 0;
}

a.portfolio-item-link:hover .portfolio-item-thumbnail img {
  top: -176px;
}

.portfolio-item-title {
  background: #B0BD7C;
  height: 48px;
  margin: 5px 0 20px 0;
  width: 178px;
}

.post-content .portfolio-item-title p {
  color: #FFFFFF;
  font-family: AndesBold, sans-serif;
  line-height: 14px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
}

a.portfolio-item-link:hover {
  text-decoration: none;
}

/* =INDIVIDUAL PROJECT PAGES
--------------------------------------------------------------------------------------------------*/

.page-header-project {
  background: #B0BD7C;
  margin: 0 0 10px 0;
  padding: 10px;
}

.page-header-project h2 {
  color: #FFFFFF;
  font-family: AndesBold, sans-serif;
  font-size: 14px;
  margin: 0;
  text-transform: uppercase;
}


/* =CAROUSEL
--------------------------------------------------------------------------------------------------*/

.carousel-inner > .item {
  -moz-transition: .3s ease-in-out left;
  -o-transition: .3s ease-in-out left;
  -webkit-transition: .3s ease-in-out left;
  transition: .3s ease-in-out left;
}

.carousel-nav {
  background: #B0BD7C;
  margin: 15px 0;
  padding: 10px;
  position: relative;
}

.carousel-nav-illustration {
  margin: -35px 0 15px 0;
}

a.carousel-arrow {
  height: 20px;
  overflow: hidden;
  position: absolute;
  width: 20px;
}

a.carousel-arrow-left img {
  left: -25px;
  position: relative;
  top: -30px;
}

a.carousel-arrow-left:hover img {
  left: 0;
}

a.carousel-arrow-right img {
  left: -25px;
  position: relative;
  top: 0px;
}

a.carousel-arrow-right:hover img {
  left: 0;
}

.carousel-index {
  color: #FFFFFF;
  display: inline;
  font-family: AndesBold, sans-serif;
  line-height: 14px;
  margin: 0 10px 0 30px;
}


/* =PINTEREST BUTTONS
--------------------------------------------------------------------------------------------------*/

.illustration-pinterest-button {
  /*bottom: 0;*/
  float: right;
  margin: 20px 10px 0 0;
  position: relative;
  /*right: 0;*/
  z-index: 1000;
}


/* =TEXT
--------------------------------------------------------------------------------------------------*/

.post-content p {
  line-height: 20px;
}

.page-about .post-content p {
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 14px 0;
}


/* =TESTIMONIALS
--------------------------------------------------------------------------------------------------*/

#testimonials-list {
  margin: 56px 0;
}

.testimonials-item {
  border-top: 1px solid #B0BD7C;
}

.testimonials-item-text {
  color: #B0BD7C;
  font-family: AndesBold-Italic, sans-serif;
  margin: 28px 0 0 0 !important;
}

.testimonials-item-author {
  font-family: AndesBook-Italic, sans-serif;
}


/* =IMAGES
--------------------------------------------------------------------------------------------------*/

.alignleft {
  float: left;
  margin: 5px 20px 0 0;
}


/* =FOOTER
--------------------------------------------------------------------------------------------------*/

#footer {
  font-family: AndesMedium, sans-serif;
}

#footer {
  background: transparent;
  border-bottom: 2px dotted #000000;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  box-shadow: none;
  padding: 5px 0;
}

#footer .sidebar-widget {
  border-bottom: 1px solid #B0BD7C;
  border-top: 1px solid #B0BD7C;
  padding: 10px 0;
}

.footer-contact-label {
  color: #B0BD7C;
}

#footer a {
  color: #000000;
  text-decoration: none;
}

#footer a:hover {
  color: #B0BD7C;
}


/* =MEDIA QUERIES
--------------------------------------------------------------------------------------------------*/

@media (max-width: 320px) {
  .col-md-3 {
    float: left;
    width: 50%;
  }

  .portfolio-item-thumbnail {
    width: auto;
  }

  .portfolio-item-title {
    height: 60px;
    width: auto;
  }
}

@media (min-width: 321px) and (max-width: 768px) {
  .col-md-3 {
    float: left;
    width: 33%;
  }

  .portfolio-item-thumbnail {
    width: auto;
  }

  .portfolio-item-title {
    height: 60px;
    width: auto;
  }
}

@media (max-width: 767px) {
  #site-container {
    background: #FFFFFF;
    padding: 0 15px;
  }

  #site-logo {
    margin: 0;
    width: 100%;
  }

  #site-nav {
    margin: 10px 0 0 0;
  }

  #nav-pages {
    float: none;
  }

  #nav-ul-pages > li > a,
  #nav-ul-pages > li:first-child > a {
    padding: 5px 15px;
  }

  #nav-social-media {
    float: none;
  }

  #nav-ul-social-media {
    padding-left: 10px;
  }

  #nav-ul-social-media li {
    float: left;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1022px;
  }
}