/*--------------------------------------------------------------
   Menus
--------------------------------------------------------------*/

.pinhole-header{

.pinhole-nav{
	list-style: none;
	margin:0;
	padding: 0;
}
.pinhole-nav > li{
	display: inline-block;
	vertical-align: top;
    position: relative;
}
.pinhole-nav > li{
    margin:0 16px;
}

.pinhole-nav > li > a {
    padding: 0;
}

.pinhole-nav > li > a{
    line-height: 40px;
    height: 37px;
    display: inline-block;  
}

.pinhole-nav li a{
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;     
}

.pinhole-nav > li > a:after{
    content: "";
    height: 1px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
    -webkit-transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
    width: 100%;    
}
.pinhole-nav > li:hover > a:after,
.pinhole-nav>li.current_page_item >a:after,
.pinhole-nav>li.current-menu-item >a:after{
    opacity: .25;
    -webkit-transform: translateY(-3px) translateZ(0);
    transform: translateY(-3px) translateZ(0);
    transition-delay: .1s;
}


.pinhole-nav .sub-menu{
    list-style: none;
    text-align: left;
    width: 200px;
    position: absolute;
    z-index: 8999;
    top: 92%;
    left: -9999px;
    opacity: 0;
    visibility: hidden;
    margin:0;
    padding:0;
    font-size: 1.4rem;
        pointer-events: none;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -ms-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}
.pinhole-nav .sub-menu .sub-menu{
    top: 0;
    left: 199px;
}
.pinhole-nav .sub-menu a{
    display: block;
}

.pinhole-nav li:hover > .sub-menu{
    opacity: 1;
    left: 0;
    pointer-events: auto;
    visibility: visible;
}
.pinhole-nav .sub-menu li:hover .sub-menu{
    left: 199px;
    top: -1px;
}
.pinhole-nav .sub-menu li:hover .sub-menu{
    top: -10px;
}
.pinhole-nav .sub-menu li:first-child:hover .sub-menu{
    top: -1px;
}
.pinhole-nav .sub-menu li:first-child:hover .sub-menu{
    top: 0px;
}
.pinhole-nav .sub-menu li{
    display: block;
    position: relative;
}
.pinhole-nav .sub-menu a{
    display: block;
    width: 100%;
    padding: 8px 20px 0 22px;
    line-height: 22px;
    height: auto;
}
.pinhole-nav .sub-menu > li:first-child > a{
    padding: 20px 20px 0 22px;
}

.pinhole-nav .sub-menu > li:last-child > a{
   padding: 10px 20px 20px 22px; 
}
.pinhole-nav .sub-menu > li:only-child > a  {
   padding: 20px; 
}


.pinhole-nav .sub-menu > li:hover > a{
    padding-left: 29px;
    padding-right: 20px;
}
.pinhole-nav .sub-menu>li.menu-item-has-children>a:after {
    font-family: "FontAwesome";
    content: "\f0da";
    margin-left: 7px;
    font-size: 10px;
    float: right;
}

}
.pinhole-header li{
    list-style: none;
}

/* Social Menu */
.pinhole-soc-menu{
	list-style: none;
	margin:0;
	padding: 0;
	li{
		display: inline-block;
	}
}
.pinhole-social-name {
    opacity: 0;
    display: none;
    font-size: 0;
}
.pinhole-soc-menu li a::before{
	font-family: "FontAwesome";
}
.pinhole-soc-menu li a[href*="/feed"]::before,
.pinhole-soc-menu li a[href*="/rss"]::before,
.pinhole-soc-menu li a[href*="feedburner"]::before {
    content: "\f09e";
}

.pinhole-soc-menu li a[href*="@"]::before {
    content: "\f0e0";
}

.pinhole-soc-menu li a[href*="codepen."]::before {
    content: "\f1cb";
}

.pinhole-soc-menu li a[href*="digg."]::before {
    content: "\f1a6";
}

.pinhole-soc-menu li a[href*="dribbble."]::before {
    content: "\f17d";
}

.pinhole-soc-menu li a[href*="dropbox."]::before {
    content: "\f16b";
}

.pinhole-soc-menu li a[href*="facebook."]::before {
    content: "\f09a";
}

.pinhole-soc-menu li a[href*="flickr."]::before {
    content: "\f16e";
}

.pinhole-soc-menu li a[href*="foursquare."]::before {
    content: "\f180";
}

.pinhole-soc-menu li a[href*="google."]::before {
    content: "\f0d5";
}

.pinhole-soc-menu li a[href*="github."]::before {
    content: "\f09b";
}

.pinhole-soc-menu li a[href*="instagram."]::before {
    content: "\f16d";
}

.pinhole-soc-menu li a[href*="linkedin."]::before {
    content: "\f0e1";
}

.pinhole-soc-menu li a[href*="last.fm"]::before {
    content: "\f202";
}

.pinhole-soc-menu li a[href*="pinterest."]::before {
    content: "\f0d2";
}

.pinhole-soc-menu li a[href*="reddit."]::before {
    content: "\f1a1";
}

.pinhole-soc-menu li a[href*="soundcloud."]::before {
    content: "\f1be";
}

.pinhole-soc-menu li a[href*="spotify."]::before {
    content: "\f1bc";
}

.pinhole-soc-menu li a[href*="stumbleupon."]::before {
    content: "\f1a4";
}

.pinhole-soc-menu li a[href*="tumblr."]::before {
    content: "\f173";
}

.pinhole-soc-menu li a[href*="twitter."]::before {
    content: "\f099";
}

.pinhole-soc-menu li a[href*="vimeo."]::before {
    content: "\f194";
}

.pinhole-soc-menu li a[href*="vine."]::before {
    content: "\f1ca";
}

.pinhole-soc-menu li a[href*="vk."]::before {
    content: "\f189";
}

.pinhole-soc-menu li a[href*="wordpress."]::before {
    content: "\f19a";
}

.pinhole-soc-menu li a[href*="xing."]::before {
    content: "\f168";
}

.pinhole-soc-menu li a[href*="youtube."]::before {
    content: "\f16a";
}

.pinhole-soc-menu li a[href*="medium."]::before {
    content: "\f23a";
}

.pinhole-soc-menu li a[href*="buysellads."]::before {
    content: "\f20d";
}

.pinhole-soc-menu li a[href*="behance."]::before {
    content: "\f1b4";
}

.pinhole-soc-menu li a[href*="slack."]::before {
    content: "\f198";
}

.pinhole-soc-menu li a[href*="weibo."]::before {
    content: "\f18a";
}

.pinhole-soc-menu li a[href*="snapchat."]::before {
    content: "\f2ac ";
}
.pinhole-soc-menu li a[href*="500px."]::before {
    content: "\f26e";
}
.pinhole-soc-menu li a[href*="amazon."]::before {
    content: "\f270";
}
.pinhole-soc-menu li a[href*="mixcloud."]::before {
    content: "\f289";
}
.pinhole-soc-menu li a[href*="ok.ru"]::before {
    content: "\f263";
}

.pinhole-soc-menu a,
.pinhole-action-sidebar{
    padding: 8px;
    opacity: 0.5;
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}
.pinhole-soc-menu a:hover,
.pinhole-action-sidebar:hover{
    opacity: 1;
}

/*--------------------------------------------------------------
   Sidebar Menu
--------------------------------------------------------------*/

.pinhole-lock {
    overflow: hidden!important;
    padding-right: 17px;
}
.pinhole-sidebar-overlay{
    width: 100%;
    height: 100%;
    height: calc(100% + 60px);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    content: '';
    display: block;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
        -ms-transition: opacity .25s ease-in-out;
         -o-transition: opacity .25s ease-in-out;
            transition: opacity .25s ease-in-out;
}

.pinhole-sidebar{
    width: 415px;
    height: 100%;
    height: 100%;
    position: fixed;
    padding: 60px 0 0;
    top: 0;
    right: 0;
    display: block;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
    -webkit-transform: translate3D(437px,0,0);
    -ms-transform: translate3D(437px,0,0);
    transform: translate3D(437px,0,0);
    -webkit-transition: visibility 1ms linear .2s,-webkit-transform .2s ease;
    transition: visibility 1ms linear .2s,-webkit-transform .2s ease;
    transition: transform .2s ease,visibility 1ms linear .2s;
    transition: transform .2s ease,visibility 1ms linear .2s,-webkit-transform .2s ease;
}
.pinhole-sidebar-open .pinhole-sidebar{
    -webkit-transform: translate3D(0,0,0);
    -ms-transform: translate3D(0,0,0);
    transform: translate3D(0,0,0);  
    box-shadow: 0 0 100px rgba(0,0,0,0.5);
}
.pinhole-sidebar-open .pinhole-sidebar-overlay{
    opacity: 1;
    visibility: visible;
}
.pinhole-sidebar-header-wrapper{
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}
.pinhole-sidebar-header{
    position: fixed;
    width: 100%;
    left: 0;
    height: 110px;
    top: 0;
    padding: 0;
}
.pinhole-sidebar-header .site-title img{
    max-height: 110px;
}
.pinhole-header.pinhole-header-sticky  .site-title img{
    max-height: 70px;
}
.pinhole-sidebar-header a{
    text-decoration: none;
}
.pinhole-sidebar-close{
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 10px;
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
    &:hover{
        opacity: 1;
    }
}

.pinhole-responsive-menu{
    display: none;
}

.pinhole-soc-menu + .pinhole-action-sidebar{
    margin-left: 3px;

}
.pinhole-responsive-social-menu {
    display: none;
}
@media (max-width: 449px) {
.pinhole-responsive-social-menu {
    margin-bottom: 3rem;    
    ul {
        margin-left: -8px;
    }
}
}

/* Search button */
.pinhole-header .pinhole-search {
    position: relative;
    display: inline-block;
    z-index: 2000;
    margin: 0;
    
    .pinhole-action-search {
        position: relative;
        margin: 0;
        padding: 0 8px;

        span {
            cursor: pointer;
            i {
                opacity: .5;
                &:hover {
                    opacity: 1;
                }
            }
        }
        
        &>.sub-menu {
            position: absolute;
            left: auto;
            right:0;
            opacity: 0;
            z-index: 2001;
            visibility: hidden;
            display:none;
            margin: 0;
            padding: 0;
        }

        form {
            padding: 14px;
            min-width: 200px;
            label, input {
                display: block;
                width: 100%;
            }
            input[type="search"] {
                background: transparent;
                border: 1px solid rgba(255,255,255,.3);
                color: #fff;
                height: 36px;
                &::placeholder {
                    color: #fff;
                }
            }
            input[type="submit"] {
                background: #FFF;
                color: #000;
                border-radius: 0;
                height: 36px;
                line-height: 36px;
                margin-top: 10px;
                &:hover {
                    opacity: 0.7;
                }
            }
        }
    }
}
.pinhole-header .pinhole-search .pinhole-action-search.active .sub-menu {
    opacity: 1;
    visibility: visible;   
    display: block;
}
.pinhole-header-sticky .slot-r .pinhole-search {
    display: table-cell;
    vertical-align: middle;
}
.pinhole-search-close {
    display:none;
    width: 19px;
    height: 13px;
    position: absolute;
    top: 0;
    left: -9px;
    padding: 0 4px;
    opacity: 0.5;
    &:hover {
        opacity: 1;
    }
}
.active .pinhole-search-close {
    display: block;
 }
.pinhole-search .pinhole-action-search form input[type=search]::placeholder { 
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    opacity: .5;
}
.pinhole-search .pinhole-action-search form input[type=search]:-ms-input-placeholder { 
    /* Internet Explorer 10-11 */
    opacity: .5;
}
.pinhole-search .pinhole-action-search form input[type=search]::-ms-input-placeholder { 
    /* Microsoft Edge */
    opacity: .5;
}