/*
The styles in this stylesheet only apply to resolutions 768px and up

CALCULATING DIMENSIONS:
----------------------
The layout is fluid. The sote wrapper (.col-full) has a fixed pixel max-width.
All subsequent dimensions are calculated based on that fixed pixel width, using the formula: target / context = result
Credit - http://www.alistapart.com/articles/fluidgrids/

-----
INDEX
-----

1. Global dropdown styles
2. Top Navigation
3. Main navigation dropdown menus
 -3.1 General dropdown menus
4. Containers & Columns
5. Footer widgets
6. IE Fixes

/*----------------------*/
/* Variables */
/**
 * Functions
 */
/**
 * Mixins
 */
/**
 * Animations
 */
@-webkit-keyframes spin-360 {
  from {
    -webkit-transform: rotate(0);
    /* Saf3.1+, Chrome */
  
    -moz-transform: rotate(0);
    /* FF3.5+ */
  
    -ms-transform: rotate(0);
    /* IE9 */
  
    -o-transform: rotate(0);
    /* Opera 10.5 */
    transform: rotate(0);
    zoom: 1;
  }
  50% {
    -webkit-transform: rotate(180deg);
    /* Saf3.1+, Chrome */
  
    -moz-transform: rotate(180deg);
    /* FF3.5+ */
  
    -ms-transform: rotate(180deg);
    /* IE9 */
  
    -o-transform: rotate(180deg);
    /* Opera 10.5 */
    transform: rotate(180deg);
    zoom: 1;
  }
  to {
    -webkit-transform: rotate(0);
    /* Saf3.1+, Chrome */
  
    -moz-transform: rotate(0);
    /* FF3.5+ */
  
    -ms-transform: rotate(0);
    /* IE9 */
  
    -o-transform: rotate(0);
    /* Opera 10.5 */
    transform: rotate(0);
    zoom: 1;
  }
}
/*----------------------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #header {
    margin: 0 -2.244em 3.631em !important;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1500px) {
  #header #logo {
    margin-bottom: 2.618em;
  }
  #header #connect .social a:before {
    padding: .51em;
    font-size: .857em;
  }
  #navigation ul.nav li a {
    font-size: .857em;
  }
}
@media only screen and (min-width: 1024px) {
  #header {
    position: fixed;
    left: 0;
    top: 0;
    width: 25%;
    max-width: 500px;
    height: 100%;
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    -ms-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
  }
  #header #logo {
    margin-bottom: 1.618em;
  }
  #header .about p {
    font-size: 1em;
  }
  #header #connect {
    margin-bottom: 2.244em!important;
  }
  #content,
  .footer-inner {
    margin: 3em 10% 0 30%;
    width: 70%;
    max-width: 900px;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
  
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
  
    box-sizing: border-box;
    /* Opera/IE 8+ */
  
  }
  .layout-left-content #header {
    left: auto;
    right: 0;
  }
  .layout-left-content #content,
  .layout-left-content .footer-inner {
    margin: 3em 0 0 2%;
  }
  #header.keep-open ul.nav ul {
    display: block;
    visibility: visible;
    height: auto;
  }
  #navigation ul.nav li a {
    font-size: .857em;
  }
  #navigation ul.nav ul li a {
    font-size: .8em!important;
  }
  .page article .entry .alignleft,
  .single-post article .entry .alignleft {
    float: left;
    margin: 1.618em 3.631em 3em -6.854em;
  }
  .page article .entry .alignright,
  .single-post article .entry .alignright {
    float: right;
    margin: 1.618em -6.854em 3em 3.631em;
  }
  .page article .entry .wp-caption-text,
  .single-post article .entry .wp-caption-text {
    padding: 1em 4.236em 1em 2.618em;
    position: absolute;
    z-index: 3;
    bottom: 6%;
    right: 17%;
    margin: 0;
    width: 50%;
    text-align: center;
    font-size: .857em;
    font-style: italic;
    background: #eaeaea;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  .page article .entry .alignright .wp-caption-text,
  .single-post article .entry .alignright .wp-caption-text {
    right: auto;
    left: 83%;
    padding: 1em 2.618em 1em 4.236em;
  }
}
@media only screen and (max-width: 768px) {
  #navigation ul.nav ul {
    margin-left: 1em!important;
  }
}
@media only screen and (min-width: 768px) {
  #inner-wrapper {
    left: 0 !important;
  }
  /* 1. GLOBAL DROPDOWN STYLES (these are purely for the dropdown layout and you should only edit the width of the dropdowns) */
  ul.nav {
    margin-bottom: 0;
    /* LEVEL 2 */
  
    /* LEVEL 3 */
  
  }
  ul.nav li {
    list-style: none;
  }
  ul.nav li a {
    display: block;
    padding: 0!important;
  }
  ul.nav ul {
    visibility: hidden;
    display: none;
    height: 0;
  }
  ul.nav li:hover > ul {
    visibility: visible;
    display: block;
    height: auto;
  }
  /* 3. MAIN NAVIGATION DROPDOWN MENUS (Add main navigation presentational styles here) */
  /**
  	 * Resets
  	 * As the mobile nav features extensive styling, much of it needs to be reset for desktop orientation
  	 */
  .show-nav #inner-wrapper {
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  .show-nav #navigation .top-navigation {
    display: none;
  }
  /**
  	 * The main naivgation styling
  	 */
  #navigation {
    position: static;
    left: auto;
    width: 100%;
    height: auto;
    padding-top: 0;
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  #navigation .menus:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
  }
  #navigation .menus h3 {
    display: none;
  }
  #navigation ul.nav {
    /* LEVEL 2 */
  
    /* LEVEL 3 */
  
  }
  #navigation ul.nav li a {
    border: 1px solid red!important;
    border-width: 0 1px 1px!important;
    border-color: transparent!important;
    color: #fff;
    text-shadow: none;
    margin: 0 0 1em;
    padding: .382em 1.387em!important;
  }
  #navigation ul.nav li.current-menu-item > a {
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
  }
  #navigation ul.nav li.current-menu-item > a:after {
    display: none;
  }
  #navigation ul.nav > li > a {
    background: rgba(255, 255, 255, 0.1);
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  #navigation ul.nav > li > a:hover {
    background: #fff;
    color: #2f2a2e;
  }
  #navigation ul.nav > li.current-menu-item > a {
    color: #2f2a2e;
    background: #fff;
  }
  #navigation ul.nav ul {
    margin: 0 0 1em 1em;
  }
  #navigation ul.nav ul li a {
    margin: 0;
    font-size: .857em;
    padding: .53em 1.387em!important;
  }
  #navigation ul.nav ul li a:hover {
    color: #ff7377 !important;
  }
  #navigation ul.nav ul li a:before {
    content: '';
    display: inline-block;
    position: relative;
    top: -2px;
    margin: 0 .5em 0 0;
    width: 0;
    height: 0;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
  }
  #navigation ul.nav ul ul {
    margin-bottom: 0;
    top: -1px;
    left: 100%;
  }
  #navigation .nav-close,
  #navigation .nav-home {
    display: none;
  }
  .nav-toggle {
    display: none;
  }
  .csstransforms3d.csstransitions #navigation,
  .csstransforms3d.csstransitions .show-nav #navigation,
  .csstransforms3d.csstransitions .show-nav #inner-wrapper {
    left: 0;
    -webkit-transform: translate3d(0%, 0, 0);
    -moz-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
  }
  /* 4. CONTAINERS & COLUMNS */
  #header {
    margin: 0 0 3.631em;
  }
  #header hgroup {
    float: left;
    margin: 0 0 1em;
  }
  #header hgroup h1,
  #header hgroup h2,
  #header hgroup h3 {
    float: none;
  }
  #header .site-title,
  #header .site-description {
    text-align: left;
  }
  #header #connect {
    margin: 0 0 3.631em;
  }
  #main.fullwidth,
  .layout-full #main,
  .col-full {
    max-width: 75.998em;
    margin: 0 auto;
    width: 100%;
  }
  .post,
  .type-page {
    margin: 9.505em 0;
    padding: 0 0 9.505em;
  }
  .post header h1,
  .type-page header h1 {
    font-size: 3.631em;
  }
  .home-tabber li a {
    font-size: 1.387em;
  }
  #topics {
    margin: -1.6em 0 9.505em 0;
  }
  #topics ul li {
    float: left;
    clear: left;
    width: 49.5%;
    padding: 5%;
    border: 1px solid #eaeaea;
    border-width: 0 1px 1px 0;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
  
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
  
    box-sizing: border-box;
    /* Opera/IE 8+ */
  
  }
  #topics ul li:nth-child(2n+2) {
    border-width: 0 0 1px 1px;
    margin-left: -1px;
    clear: right;
  }
  #topics ul li:last-child {
    border-bottom: 1px solid #eaeaea;
  }
  /* SINGLE POST & PAGE & PRODUCT LAYOUTS */
  body.single-product #content {
    margin: 9.505em auto;
    max-width: 900px;
  }
  .page,
  .single-post,
  .single-product {
    /* 1. DROPDOWN STYLES (For single post and page templates.) */
  
  }
  .page #navigation ul.nav,
  .single-post #navigation ul.nav,
  .single-product #navigation ul.nav {
    position: relative;
    /* LEVEL 2 */
  
    /* LEVEL 3 */
  
  }
  .page #navigation ul.nav li,
  .single-post #navigation ul.nav li,
  .single-product #navigation ul.nav li {
    position: relative;
    float: left;
    margin: 0 1em 0 0;
    zoom: 1;
  }
  .page #navigation ul.nav li a,
  .single-post #navigation ul.nav li a,
  .single-product #navigation ul.nav li a {
    margin: 0;
    padding: .382em 1.618em!important;
    font-size: .75em;
    text-transform: uppercase;
  }
  .page #navigation ul.nav ul,
  .single-post #navigation ul.nav ul,
  .single-product #navigation ul.nav ul {
    width: 11.089em;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    margin: 0;
    text-align: center;
    background: #fcfbf7;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
  }
  .page #navigation ul.nav ul li,
  .single-post #navigation ul.nav ul li,
  .single-product #navigation ul.nav ul li {
    float: none;
    margin: 0 1em;
    border-bottom: 1px solid #eaeaea;
  }
  .page #navigation ul.nav ul li a,
  .single-post #navigation ul.nav ul li a,
  .single-product #navigation ul.nav ul li a {
    width: 100%;
    padding: 1em!important;
    display: inline-block;
    color: #9c9c9c;
    background: none;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
  
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
  
    box-sizing: border-box;
    /* Opera/IE 8+ */
  
  }
  .page #navigation ul.nav ul li a:before,
  .single-post #navigation ul.nav ul li a:before,
  .single-product #navigation ul.nav ul li a:before {
    display: none;
  }
  .page #navigation ul.nav ul:before,
  .single-post #navigation ul.nav ul:before,
  .single-product #navigation ul.nav ul:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -5px;
    display: block;
    width: 0;
    height: 0;
    border: 5px solid #fcfbf7;
    border-color: transparent transparent #fcfbf7 transparent;
  }
  .page #navigation ul.nav ul ul,
  .single-post #navigation ul.nav ul ul,
  .single-product #navigation ul.nav ul ul {
    left: 100%;
    top: 0;
  }
  .page #navigation ul.nav ul ul:before,
  .single-post #navigation ul.nav ul ul:before,
  .single-product #navigation ul.nav ul ul:before {
    display: none;
  }
  .page #navigation ul.cart,
  .single-post #navigation ul.cart,
  .single-product #navigation ul.cart,
  .page #navigation ul.rss,
  .single-post #navigation ul.rss,
  .single-product #navigation ul.rss {
    float: left;
  }
  .page #navigation .cart-contents .count,
  .single-post #navigation .cart-contents .count,
  .single-product #navigation .cart-contents .count {
    margin-right: 5px;
  }
  .page #navigation .cart-contents:after,
  .single-post #navigation .cart-contents:after,
  .single-product #navigation .cart-contents:after {
    line-height: 1.8;
    float: none;
  }
  .page #navigation ul.rss li a:after,
  .single-post #navigation ul.rss li a:after,
  .single-product #navigation ul.rss li a:after {
    float: none;
  }
  .page #header,
  .single-post #header,
  .single-product #header {
    position: relative;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 -2.244em 0;
    padding: 0 2.618em;
    -webkit-box-sizing: content-box;
    /* Safari/Chrome, other WebKit */
  
    -moz-box-sizing: content-box;
    /* Firefox, other Gecko */
  
    box-sizing: content-box;
    background-image: none;
  }
  .page #header:after,
  .single-post #header:after,
  .single-product #header:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
  }
  .page #header #logo,
  .single-post #header #logo,
  .single-product #header #logo {
    float: left;
    margin: 1.618em 4.236em 1.618em 0;
    max-width: 200px;
  }
  .page #header hgroup,
  .single-post #header hgroup,
  .single-product #header hgroup {
    margin: 1em 4.236em 1em 0;
    font-size: .857em!important;
  }
  .page #header .about,
  .single-post #header .about,
  .single-product #header .about {
    display: none;
  }
  .page #header #connect,
  .single-post #header #connect,
  .single-product #header #connect {
    float: right;
    clear: none;
    margin: 1.618em 0!important;
  }
  .page #header #connect a:before,
  .single-post #header #connect a:before,
  .single-product #header #connect a:before {
    padding: .45em;
    font-size: .857em;
  }
  .page #header #navigation,
  .single-post #header #navigation,
  .single-product #header #navigation {
    float: left;
    width: auto;
    margin: 1.618em 0;
    clear: none;
  }
  .page #header #navigation .nav,
  .single-post #header #navigation .nav,
  .single-product #header #navigation .nav {
    float: left;
  }
  .page #content,
  .single-post #content,
  .single-product #content {
    width: 100%;
    max-width: none;
  }
  .page #content,
  .single-post #content,
  .single-product #content,
  .page .footer-inner,
  .single-post .footer-inner,
  .single-product .footer-inner {
    margin: 0 auto;
  }
  .page article .entry,
  .single-post article .entry,
  .single-product article .entry {
    margin: 0 auto;
    max-width: 900px;
  }
  .page #post-entries,
  .single-post #post-entries,
  .single-product #post-entries {
    display: block!important;
    position: absolute;
    top: 40%;
    width: 100%;
  }
  .page #post-entries a,
  .single-post #post-entries a,
  .single-product #post-entries a {
    position: relative;
    padding: .857em 0 .857em 2em;
    color: #fcfbf7;
    background: #2f2a2e;
    font-size: .857em;
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    -ms-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
  }
  .page #post-entries a:hover,
  .single-post #post-entries a:hover,
  .single-product #post-entries a:hover {
    text-decoration: none;
  }
  .page #post-entries .nav-prev a:after,
  .single-post #post-entries .nav-prev a:after,
  .single-product #post-entries .nav-prev a:after,
  .page #post-entries .nav-next a:before,
  .single-post #post-entries .nav-next a:before,
  .single-product #post-entries .nav-next a:before {
    margin: 0;
    padding: .857em;
    font-size: 16px!important;
    color: #fff;
    text-align: center!important;
  }
  .page #post-entries .nav-prev a,
  .single-post #post-entries .nav-prev a,
  .single-product #post-entries .nav-prev a {
    float: left;
    text-align: left;
    -webkit-border-top-right-radius: 300px;
    -webkit-border-bottom-right-radius: 300px;
    border-top-right-radius: 300px;
    border-bottom-right-radius: 300px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  .page #post-entries .nav-prev a:hover,
  .single-post #post-entries .nav-prev a:hover,
  .single-product #post-entries .nav-prev a:hover {
    left: 0!important;
  }
  .page #post-entries .nav-prev a:after,
  .single-post #post-entries .nav-prev a:after,
  .single-product #post-entries .nav-prev a:after {
    font-family: 'FontAwesome';
    display: inline-block;
    font-size: 100%;
    margin-right: .618em;
    font-weight: normal;
    line-height: 1em;
    width: 1em;
    content: '\f053';
  }
  .page #post-entries .nav-next a,
  .single-post #post-entries .nav-next a,
  .single-product #post-entries .nav-next a {
    float: right;
    text-align: right;
    padding: .857em 2em .857em 0;
    -webkit-border-top-left-radius: 300px;
    -webkit-border-bottom-left-radius: 300px;
    border-top-left-radius: 300px;
    border-bottom-left-radius: 300px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  .page #post-entries .nav-next a:hover,
  .single-post #post-entries .nav-next a:hover,
  .single-product #post-entries .nav-next a:hover {
    right: 0!important;
  }
  .page #post-entries .nav-next a:before,
  .single-post #post-entries .nav-next a:before,
  .single-product #post-entries .nav-next a:before {
    font-family: 'FontAwesome';
    display: inline-block;
    font-size: 100%;
    margin-left: .618em;
    font-weight: normal;
    line-height: 1em;
    width: 1em;
    text-align: right;
    content: '\f054';
  }
  .page #connect,
  .single-post #connect,
  .single-product #connect,
  .page #post-author,
  .single-post #post-author,
  .single-product #post-author,
  .page #related-posts,
  .single-post #related-posts,
  .single-product #related-posts,
  .page #comments,
  .single-post #comments,
  .single-product #comments,
  .page #respond,
  .single-post #respond,
  .single-product #respond {
    margin-left: auto!important;
    margin-right: auto!important;
    max-width: 900px;
  }
  #sidebar {
    margin-top: 0;
    width: 34%;
  }
  .entry img {
    max-width: 100%;
  }
  .layout-full .entry img {
    max-width: 100%;
  }
  .layout-right-content #sidebar {
    float: left;
  }
  .col-left {
    float: left;
  }
  .col-right {
    float: right;
  }
  .page-template-template-sitemap-php #sitemap-pages {
    float: left;
    width: 48%;
  }
  .page-template-template-sitemap-php #sitemap-categories {
    float: right;
    width: 48%;
  }
  .page-template-template-sitemap-php #sitemap-posts {
    clear: both;
  }
  .page-template-template-contact-php .location-twitter .col-left {
    float: left;
  }
  .page-template-template-contact-php .location-twitter #office-location {
    width: 48%;
    margin: 0 1em 0 0;
  }
  .page-template-template-contact-php .location-twitter .contact-social {
    float: left;
    width: 48%;
  }
  .page-template-template-contact-php .location-twitter .contact-social #twitter {
    margin: 0;
  }
  /* 5. FOOTER WIDGETS */
  #footer-widgets .block {
    margin-right: 3.8%;
    float: left;
  }
  #footer-widgets.col-1 .block {
    width: 100%;
    float: none;
  }
  #footer-widgets.col-1 .footer-widget-1 {
    margin-right: 0;
  }
  #footer-widgets.col-2 .block {
    width: 48%;
  }
  #footer-widgets.col-2 .footer-widget-2 {
    margin-right: 0;
  }
  #footer-widgets.col-3 .block {
    width: 30.75%;
  }
  #footer-widgets.col-3 .footer-widget-3 {
    margin-right: 0;
  }
  /* 6. IE FIXES */
  .ie7 #top-nav {
    position: relative;
    z-index: 9999999;
  }
  .ie7 #header {
    position: relative;
    z-index: 9999999;
  }
}