/*
 Theme Name:   Pixel
 Theme URI:    http://graphpaperpress.com/themes/pixel
 Description:  A classic header with two side menus on top of header image
 Author:       Graph Paper Press
 Author URI:   http://graphpaperpress.com
 Template:     _vs
 Version:      101
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  pixel
*/

.colorlight-container {
    max-width: 960px;   /* adjust this number for your taste (e.g., 800px, 1200px) */
    margin: 0 auto;     /* centers the box */
    padding: 0 20px;    /* adds breathing space on mobile */
}
.site-header {
    padding: 3em;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    height: 100%;
    z-index: 2;
    overflow-y: auto;
}

.colors-dark .site-header {
    background-color: #111;
}

.colors-dark .main-navigation ul {
    background-color: transparent !important;
}

._vs-front-page.has-header-image .custom-header-media,
._vs-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
    height: auto;
}

.admin-bar._vs-front-page.has-header-image .custom-header-media,
.admin-bar._vs-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
    height: auto;
}

.has-header-image._vs-front-page .custom-header,
.has-header-video._vs-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
    width: calc( 100% - 300px );
}

.has-header-image .custom-header-media img {
    position: static;
}

.has-header-image._vs-front-page .site-branding,
.has-header-video._vs-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding {
    position: relative;
    width: auto;
    height: auto;
}

.custom-header-media:before {
    background: transparent;
}

.site-header .menu-scroll-down {
    display: none;
}

.site-nav-container {
    margin-top: 6em;   
}

.left-menu-item {
    margin-right: auto;
}

.site-branding {
    width: auto;
    padding: 0;
    margin-bottom: 2em !important;
    margin-top: 3em;
}

.custom-logo-link {
    margin-bottom: 1em;
}

.site-branding .wrap {
    padding: 0;
}

.site-title {
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0;
    text-align: left
}

.search-form {
    position: relative;
}

.search-form .search-field {
    width: 100%;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.4);
    cursor: text;
    outline: 0;
}

.colors-dark input.search-field {
    border: 1px solid #333 !important;
}

.search-form .search-field ~ svg {
    z-index: 11;
    top: 10px;
}

.search-form .search-field:focus {
    width: 100%;
}

.navigation-primary,
.site-navigation-fixed.navigation-primary {
    width: auto;
    margin-top: 3em;
}

.navigation-primary .wrap {
    margin: 0;
    padding: 0;
}

.main-navigation li {
    display: block;
    margin: 0;
}

.main-navigation li a {
    padding: 0.6em 0;
    display: inline-block;
}

.navigation-primary {
    position: static;
    background: transparent;
    border: none;
}

body:not(.home) .site-navigation-fixed.navigation-primary {
    position: static;
}

.site-content-contain,
.custom-header {
    width: calc( 100% - 300px );
    margin-left: 300px;
}

body.has-header-image .site-title,
body.has-header-video .site-title,
body.has-header-image .site-title a,
body.has-header-video .site-title a,
body.has-header-image .site-description, 
body.has-header-video .site-description {
    color: #333;
}

body.has-header-image.colors-dark .site-title,
body.has-header-video.colors-dark .site-title,
body.has-header-image.colors-dark .site-title a,
body.has-header-video.colors-dark .site-title a,
body.has-header-image.colors-dark .site-description, 
body.has-header-video.colors-dark .site-description {
    color: #fff;
}

.navigation-primary nav {
    margin: 0;
}

.main-navigation .sub-menu {
    border: none;
    border-top: 1px solid;
    padding: 10px 0;
    margin: 10px 0;
    display: none; 
}

.main-navigation .sub-menu.open {
    left: auto;
    display: block;
    width: 100%;
    position: relative;
}

.main-navigation ul ul a {
    width: 100%;
}

.main-navigation li li.focus > a, .main-navigation li li:focus > a, .main-navigation li li:hover > a, .main-navigation li li a:hover, .main-navigation li li a:focus, .main-navigation li li.current_page_item a:hover, .main-navigation li li.current-menu-item a:hover, .main-navigation li li.current_page_item a:focus, .main-navigation li li.current-menu-item a:focus {
    color: #666;
}

.sub-menu a:hover,
.main-navigation li li:hover, .main-navigation li li.focus {
    background-color: transparent;
    color: #111;
}

.caret {
    position: absolute;
    right: 0;
    top: 5px;
    padding: 10px 0;
    cursor: pointer;
    opacity: 0.5; 
    width: 20px;
    height: 20px;
}

.caret:hover {
    opacity: 0.8; 
}

.caret.focus {
    opacity: 1;
}

.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
    display: none;
}

.main-navigation ul li.menu-item-has-children.focus:before,
.main-navigation ul li.menu-item-has-children:hover:before,
.main-navigation ul li.menu-item-has-children.focus:after,
.main-navigation ul li.menu-item-has-children:hover:after,
.main-navigation ul li.page_item_has_children.focus:before,
.main-navigation ul li.page_item_has_children:hover:before,
.main-navigation ul li.page_item_has_children.focus:after,
.main-navigation ul li.page_item_has_children:hover:after {
    display: none;
}

.main-navigation .menu-item-has-children > a > .icon,
.main-navigation .page_item_has_children > a > .icon,
.main-navigation ul ul .menu-item-has-children > a > .icon, 
.main-navigation ul ul .page_item_has_children > a > .icon
 {
    right: 4px;
    position: absolute;
    top: 12px;
    left: auto;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    margin: auto;
}

.sell-media-search {
    height: 40px !important;
}

/* responsive */
@media screen and (max-width: 48em) {
    .site-search {
        float: none;
        display: block;
        max-width: 100%;
        margin: auto;
        margin-bottom: 2em;
        padding: 0 2em;
    }

    .site-branding {
        margin-top: 0;
    }

    .site-header {
        position: relative;
        width: 100%;
        overflow-y: visible;
     }

    .site-content-contain, .custom-header {
        margin-left: 0;
        width: 100%;
    }

    .has-header-image .custom-header-media img, 
    .has-header-video .custom-header-media video, 
    .has-header-video .custom-header-media iframe, 
    .has-header-image:not(._vs-front-page):not(.home) .custom-header-media img {
        display: block;
    }

    .has-header-image._vs-front-page .custom-header, 
    .has-header-video._vs-front-page .custom-header, 
    .has-header-image.home.blog .custom-header, 
    .has-header-video.home.blog .custom-header {
        height: 300px;
        width: 100%;
    }

    .site-title {
        margin-top: 0;
        text-align: center;
    }

    body.has-header-image .site-title,
    body.has-header-video .site-title,
    body.has-header-image .site-title a,
    body.has-header-video .site-title a,
    body.has-header-image .site-description, 
    body.has-header-video .site-description {
        text-align: center;
    }

    body:not(.title-tagline-hidden) .site-branding-text,
    .has-header-image._vs-front-page .site-branding, 
    .has-header-video._vs-front-page .site-branding, 
    .has-header-image.home.blog .site-branding, 
    .has-header-video.home.blog .site-branding {
        display: block;
        width: 100%;
    }
}

@media screen and (min-width: 48em) {
    body:not(.has-sidebar):not(.page-one-column) .page-header, 
    body.has-sidebar.error404 #primary .page-header, 
    body.page-two-column:not(.archive) #primary .entry-header, 
    body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
        float: none;
        width: 100%;
    }
    .has-sidebar:not(.error404) #primary {
        width: 100%;
    }

}