/**
 * **********************************
 * CUSTOM TEMPLATE LAYOUTS BEGIN HERE
 * **********************************
 */

/**
 * Top Bar
 */
#site-header{
  display: none!important;
}
section.top-bar{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: #fff;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  /* flexslider is set to z-index: 10 */
  z-index: 11;
}
section.top-bar .container{
  position: relative;
}

/* Styles applied when the viewport is at the top */
.top section.top-bar{
  background: transparent;
}

/* Styles applied when headroom is active */
section.top-bar.headroom--unpinned{
  position: fixed;
  -webkit-transform: translateY( -100% );
  -ms-transform: translateY( -100% );
  -o-transform: translateY( -100% );
  transform: translateY( -100% );
}
section.top-bar.headroom--pinned{
  position: fixed;
  top: 0;
  z-index: 99;
}

/**
 * Navigation
 */

/* Menu Toggle Button */
*[toggle-nav]{
  background-color: #000;
  width: 55px;
  height: 55px;
  right: 0;
  top: 0;
}
.mobile-menu *[toggle-nav] {
  background-color: #fff;
}

/* Hamburger Icon */
.hamburger-icon span {
  top: 25px;
  left: 9px;
  right: 9px;
  height: 4px;
  background: #fff;
}
.hamburger-icon span::before,
.hamburger-icon span::after {
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
}
.hamburger-icon span::before {
  top: -10px;
}
.hamburger-icon span::after {
  bottom: -10px;
}
/* active state, i.e. menu open */
.mobile-menu .hamburger-icon span {
  background: none;
}
.mobile-menu .hamburger-icon span::before {
  top: 0;
}
.mobile-menu .hamburger-icon span::after {
  bottom: 0;
}
/* Mobile Menu X */
.mobile-menu .hamburger-icon span::before,
.mobile-menu .hamburger-icon span::after {
  background: #444;
}

/* Navigation Structure */
nav.main{
  position: absolute;
  top: 0;
  right: 2%;
  text-align: right;
}
nav.main,
nav.main > ul {
  line-height: 50px;
}
nav.main ul > li{
}
nav.main > ul > li > a{
  padding: 0 .5em;
  text-decoration: none;
  color: auto;
}
nav.main ul li:hover > a,
nav.main ul li.current-menu-item > a{
  color: auto;
}


nav.main ul > li.menu-item-has-children > a{
/*  padding-right: 1em;*/
}
/**
 * Arrow to signal dropdown
 * set display: block; to enable
 */
nav.main ul > li.menu-item-has-children > a:after{
  display: none;

  font-family: 'FontAwesome';
  content:" \f0dd";
  position: absolute;
  font-size: 12px;
  top: -2px;
  right: 5px;
}
/**
 * Uncomment padding for arrow if enabled
 */
nav.main ul > li.menu-item-has-children > a{
/*  padding-right: 1em;*/
}

/* Dropdown Menu */
nav.main ul > li ul{
  position: absolute;
  left: 0;
  width: 250px;
  background: #fff;
}
nav.main ul > li ul li{
}
nav.main ul > li ul li a{
  padding: 0 1em;
  text-decoration: none;
}
nav.main ul > li ul li a:hover{
  background: #efefef;
}


/**
 * Set the following media query to the viewport width where
 * you want the mobile navigation to be visible.
 */
@media only screen and ( max-width: 750px ) {
  /**
   * Navigation Toggle
   */
  *[toggle-nav]{
    display: block;
  }
  [full-menu]{
    width: 450px;
    max-width: 100%;
    padding: 1em;
    background: #fff;

    /* Set to 100% to slide out right */
    -webkit-transform: translateX( -100% );
    -ms-transform: translateX( -100% );
    -o-transform: translateX( -100% );
    transform: translateX( -100% );

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    overflow: auto;
    -webkit-transition: all 400ms;
    -o-transition: all 400ms;
    transition: all 400ms;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  nav.main{
    padding: 1em;
    height: auto;
  }
  nav.main > ul{
    min-width: 300px;

    display: block;
  }
  nav.main ul ul{
    display: none;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
  }
  nav.main ul > li ul{
    position: relative;
    max-height: 999em;
  }
  nav.main ul .active > a{
    color: auto;
  }
  nav.main ul .active > ul{
    margin: 0 0 1em;
    padding-left: 1em;

    display: block;
    max-height: 999em;
  }

  /* Sub menu toggle */
  nav.main li i{
    padding: .25em;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: .75em;
    background: #000;
    color: #fff;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
  }
  nav.main li i:hover{
    color: auto;
  }
  nav.main ul .active > i{
    -webkit-transform: rotate( 180deg );
    -ms-transform: rotate( 180deg );
    -o-transform: rotate( 180deg );
    transform: rotate( 180deg );
  }

  nav.main ul > li{
    display: block;
    position: relative;
    padding-right: 2em;
    float: none;
  }
  nav.main ul > li ul{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
  }
  nav.main ul ul li{
    list-style: circle;
    border-bottom: none;
  }
  nav.main li a{
    display: inline-block;
    text-decoration: none;
    color: auto;
    padding: .25em 0;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
  }
}
@media only screen and ( max-width: 600px ) {
  nav.main > ul{
    min-width: 100%;
  }
}


/**
 * Homepage
 * (static page)
 */
body.home header.main{}


/**
 * Basic Page
 * (not homepage)
 */
body.subpage header.main{}



/**
 * Listing Pages
 * (archives, categories, tags, etc)
 */
body.archive header.main{}

main.archive-listing{}

main.category-listing{}



/**
 * Single Post
 * for post types: .single.single-post_type_slug #body{}
 */
body.single header.main{}

main.single-post{}



/**
 * 404 Page
 */
body.error404 header.main{}


/**
 * FOOTER
 */
footer.main{
  display: block;
  position: relative;
  padding: 4em 0;
}