/*
Theme Name: experien
Description: Experien - WordPress theme, with minimal design convenient interface it is well suited for magazine, news, editorial, blog.
Experien is entirely responsive fast theme and it’s optimized for mobile devices.
Built on core WordPress features.

Contents
------------------

... General
... Main menu

Widgets
   ... right-block
   ... social

... orientation landscape
... orientation-portrait
*/

/*-------------------------------------------------------------------
... General */

/*Google Fonts */
@font-face{font-family: Teko;  src: url(../fonts/Teko-Light.ttf);}
@font-face{font-family: Khand; src: url(../fonts/Khand-Light.ttf);}

body {
    /*background-image: url('../images/bg_home.gif');*/
    background: #ffffff;
    padding-left: 8vw;
    padding-top: 2vh;
    font-family: Khand;
}
body, button, input, select, optgroup, textarea {color: #404040;line-height: 1.5; }

@media (-moz-touch-enabled: 1), (pointer:coarse) {
    body, button, input, select, optgroup, textarea {font-size:0.7em; line-height: 1.3;}
}


p {font-size: 1em;color: #666;}
a {text-decoration: none;color: #555;}
a:hover, a:focus, a:active{color: #333;}
a:focus {outline: thin dotted;}
a:hover, a:active {outline: 0;}
a, a:visited, a:focus, a:active, a:hover{outline:0 none !important;}

h1,h2,h3,h4,h5{
    font-family: Teko;
}
h1{font-size: 3em;  text-transform: uppercase;}
h2{font-size: 2.5em;  text-transform: uppercase;}
h3{font-size: 1.8em;}
h4{font-size: 1.6em;}
h5{font-size: 0.5em;}
h6{font-size: 0.5em;}


.type-page .entry-header h1{
    font: 5em Khand;
    text-transform: uppercase;
}

.page-header h1 {
    font: 2em Khand;
    text-transform: uppercase;
}

.single .post .entry-title{border: none;}
.post .entry-title{
    border-radius: 0.5em 0 0 0;
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
}
.wp-post-image{
    border: 1px solid #e1e1e1;
}

/* quote block*/
.wp-block-quote {
    padding-right: 3vw;
    font-size: 1em;
    background: #333;
    display: inline-flex;
}
.wp-block-quote p{color: #fff}
.wp-block-quote::before{
    font: 2em FontAwesome;
    content: '\f10e';
    padding: 1vw;
    color: #fff;
}
.custom-logo-link img{
    position: absolute;
    top: 0.2vh;
}


.site-info{
    border-top: 1px solid #ccc;
    padding: 8px;
    margin-top: 2vh;
}
.cat-item:hover{letter-spacing: 0.3vw;}
.more-link{
    font: 1em Teko;
    color: #555;
    display: block;
    border-top: 1px solid #e1e1e1;;
    margin: 0.1em 0 0 -2em;
    text-align: right;
    font-weight: 600;
    transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;
    width: 50%;
    letter-spacing: 0.05em;
}
.entry-date,.author{font-size: 0.9em;}
.more-link:hover{letter-spacing: 0.1em;}
.entry-meta{position: absolute;left: 4vw;}
.p-post-image{width: 12px}
.post-edit-link{margin-left: 12vw;}
.nav-links{
    border-top: 1px solid #f4f4f4;
    text-align: center;
    padding: 2vw;
}
.page-numbers{
    font-size: 0.8em;
    background: #333;
}
.nav-links a{
    color: #fff;
    padding: 10px;
    background: #333;
}
.current{padding:6px; color:#f5f5f5;}
textarea{width: 98%;}
.cat-links, .comments-link {font-size: 1em}
ul, ol{margin: 0 0 1.5em 1em;}

.entry-content{padding-right: 2.5em;}
.entry-footer{clear:left; padding: 0.5em 0 1em 1em;}

/*-------------------------------------------------------------------------------------------------------------
...Main menu*/

/* left block menu + search (menu pops up when you hover on the left panel)*/
.menu-go{
    position: fixed;
    z-index: 25;
    top: 0;
    left: 0;
    width: 3vw;
    height: 100vh;
    background: #fff;
    border-collapse: separate;
    -webkit-box-shadow: 10px 0px 17px -12px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 0px 17px -12px rgba(0,0,0,0.75);
    box-shadow: 10px 0px 17px -12px rgba(0,0,0,0.75);

}
.menu-go::before{
    font: 1.2vw FontAwesome;
    content: "\f0c9";
    position: absolute;
    margin: auto;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 2vw; height: 2vw;
    text-align: center;
}

/* when you hover on block «menu-go», run sliding block «block-menu» */
.menu-go:hover + .block-menu{margin-left: 0;}
.block-menu:hover{margin-left: 0;}

/* sliding block «block-menu» left block menu + search */
.block-menu{
    position: fixed;
    z-index: 15;
    width: 32vw; /* block width */
    height: 100%;
    top: 0;
    left: 3vw;
    background: rgba(0,0,0,0.9);
    margin-left: -35vw;
    box-shadow: -7px 0px 10px 10px rgba(0,0,0,0.45); -webkit-box-shadow: -7px 0px 10px 10px rgba(0,0,0,0.59);  -moz-box-shadow: -7px 0px 10px 10px rgba(0,0,0,0.59);
    transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;
}
._menu{
    overflow-y: Auto;
    overflow-x: hidden;
    height: 50vh;
}
.main-navigation ul a{
    color: #ffffff;
    font-size: 2vw;
    transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;
}
.main-navigation ul a:hover{
    color: #f5f5f5;
    font-size: 2.6vw;
}
.main-navigation ul ul a{
    color: #f95658;
    font-size: 1.2vw;
    margin-left: 2vw;
}
.main-navigation ul ul a:hover{
    font-size: 1.5vw;
}
.main-navigation{
    clear: both;
    display: block;
    float: left;
    width: 100%;
}
.main-navigation ul{
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.main-navigation ul ul{display: none;}
.main-navigation ul li:hover > ul,.main-navigation ul li.focus > ul{display: block;  }
.main-navigation a{
    display: block;
    text-decoration: none;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {display: block;}
.menu-toggle{display: none;}
.main-navigation ul{display: block;}
.main-navigation {padding: 15vh 0 0 6em;}

.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation{
    margin: 0 0 1.5em;
    overflow: hidden;
}
.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous{
    float: left;
    width: 50%;
}
.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next{
    float: right;
    text-align: center;
    width: 50%;
}


/*-----------------------END ... Main menu */
.ico-search{
    position: absolute;
    left: 0;
    right: 0;
    top: 65vh;
    bottom: 0;
    text-align: center;
    background: #333;
    color:#fff;
    width: 3.1vw;
    height: 4vw;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}

.ico-search::before{
    font: 1vw FontAwesome;
    content: "\f002";
    position: absolute;
    top: 2vw;
    left: 1vw;
    z-index: 1;
    line-height: 0;
}
.search_form_block{
    position: absolute;
    left: 0;
    top: 65vh;
}
.search-field{
    height: 4vw;
    width: 20vw;
}
.search-submit{visibility: hidden;}
.search-results .entry-summary{ width: 60vw;}
.cat-item{
    list-style-type: none;
    border-bottom: 1px solid #e1e1e1;
    width: 20vw;
    transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;
    padding: 12px;
    font: 1.5em  Teko;
}

/*-------------------------------------------------------------------------------------------------------------
...right-block */

/* button block-right */
.go-right-block{
    position: fixed;
    right: 0; top: 30vh;
    z-index: 10;
    width: 1.6em;
    height: 5em;
    background: #333;
    border-radius: 0.6em 0 0 0.6em;
}
.go-right-block::before{
    font: 1.4em FontAwesome;
    content: "\f142";
    position: relative;
    top: 1.4em;
    left: 0.5em;
    color: #fff;
    line-height: 0;
}

/* when you hover on block «.go-right-block», run sliding block «block-right» */
.go-right-block:hover + .block-right{margin-right: 0;}
.block-right:hover{margin-right: 0;}

/* right block */
.block-right{
    position: fixed;
    width: 40vw;
    height: 100vh;
    top: 0;
    right: 0;
    background: rgba(255,255,255,0);
    margin-right: -40vw;
    transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;
    z-index: 1111;
    padding: 2vw;
    background: #fff;
    box-shadow: 0 0px 12px 2px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,255,255,1);
    overflow-y: Auto;
    overflow-x: hidden;
}
/*-----------------------END ... right-block */

/*-------------------------------------------------------------------------------------------------------------
... social */
.social-block-left{
    position: absolute;
    margin-top: 6vw;
    width: 100%;
    text-align: center;
}

/*-----------------------END ... social */


/*-------------------------------------------------------------------------------------------------------------
 ... orientation landscape */
@media screen and (min-aspect-ratio: 13/9) {
    .post{
        background: #fff;
        margin-left: 18vw;
        margin-top: 5vh;
    }
    .wp-post-image{
        width: 28vw;
        margin: 0 1.4vw 0 -10vw;
        float: left;
        border-radius: 0.8em;
        /*box-shadow: 0 1px 4px rgba(0, 0, 0, .2), -16px 0 20px -23px rgba(0, 0, 0, .6), 16px 0 20px -23px rgba(0, 0, 0, .6), 0 0 40px rgba(0, 0, 0, .1) inset;*/
        transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out;  -o-transition: all 0.5s ease-in-out;
    }

    .single .post .wp-post-image{width: 18vw;}

    @media screen and (max-width: 1400px) {
        .wp-post-image{width: 28vw;}
        .more-link{width: 70%;}
    }
    .post:hover .wp-post-image{margin: 0 2.4vw 0 -11vw;}
    .post:hover .more-link{font-size: 1.1em;}
    .post:hover .entry-title{padding-left: 2em; }

    .post .entry-title{
        margin-bottom: 0;
        font-size: 2em;
        transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out;  -o-transition: all 0.4s ease-in-out;
        padding: 0.5em 0 0.5em 1.5em;
    }
    @media screen and (min-width: 1600px) {
        .post {width: 54vw; text-align: justify;}
        .single .post {width: 70vw;}
        .more-link{margin: 2vh 0 0 15vw; width: 34%;}
    }
    @media (-moz-touch-enabled: 1), (pointer:coarse) {
        .wp-post-image{width: 22em;}
        .more-link{width: 70%;}
        .main-navigation ul a{font-size: 2em;}
        .post{text-align: justify;}
        .block-right{width: 50vw; margin-right: -50vw;}
        .hentry{margin-bottom: 3.5em;}
        .single .post .wp-post-image{width: 26vw;}
    }
}
/*-----------------------END ... orientation landscape */

/*-------------------------------------------------------------------------------------------------------------
 ... orientation portrait */

@media screen and (max-aspect-ratio: 13/9) {
    .custom-logo-link img{width:7vh;}
    body{padding: 4vh 0 0 2vh; margin-top: 1vh}
    .block-right{width: 80vw; margin-right: -80vw;}
    .menu-go{ /* menu bar on portrait screen orientation */
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100vw;
        height: 7vh;

    }
    .menu-go::before{
        margin-top: 2vh;
        left: 60vw;
        font-size: 3vh;
    }
    .main-navigation ul a{font-size: 5vh;}
    .main-navigation ul a:hover{font-size: 6vh;}
    .search_form_block{top: 0;}
    .search-field{
        text-align: right;
        height: 7vh;
        width: 87vw;
    }
    .cat-item{width: 45vw;}
    .block-menu{
        width: 87vw;
        margin-left: -90vw;
    }
    .menu-go:hover + .block-menu{margin-top: 0;}
    .block-menu:hover{margin-top: 0;}
    .ico-search{
        position: absolute;
        left: 90%;
        right: 0;
        top: 0;
        bottom: 0;
        width: 10%;
        height: 100%;
    }
    .ico-search::before{
        position: absolute;
        font-size: 1.4em;
        top: 45%;
        left: 35%;
    }
    .post{
        background: #fff;
        padding-left: 3vw;
        margin-left: 0;
        margin-top: 6vh;
        border-radius: 1em 0 0 1em;
        text-align: justify;

    }
    .single .post{box-shadow: none;}

    .entry-meta{
        margin-top: 10vh;
        left: 75vw;
    }
    .post .entry-title{
        margin-bottom: -0.1vh;
        text-shadow: 2px 3px 3px rgba(0,0,0,0.1);
        padding: 0.8em 0 0.4em 1em;
    }
    .wp-post-image{
        width: 74vw;
        float: none;
        margin-left: -8vw;
        border-radius: 0 1em 1em 0;
        border: 1px solid #e1e1e1;
    }

    .posted-on, .byline {font-size: 1.2em;}

    /* quote block*/
    .single .wp-post-image{width: 66vw;}
    .post:hover .entry-title{box-shadow: none;}
    .nav-links a{background: #333;}
    .social-block-left{display: none;}

}
/*-----------------------END ... orientation portrait */