/*
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

... 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);}

/*Font FontAwesome */
@font-face{font-family: FontAwesome; src: url(../fonts/FontAwesome.otf);}


body {
    /*background-image: url('../images/bg_home.gif');*/
    background: #ffffff;
    padding-left: 0vw;

    font-family: Khand;
    margin-bottom: 10vh;
}






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:active{color: #333;}

a:focus{
 letter-spacing: 3px;
 transition: .5s;
 color: #222;
}

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;
    left: 0;
}
.page-title{margin-left:  2.3em;}

.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;}
.author::before{
  font-family: FontAwesome;
  content: '\f007';
  margin-right: .3em;
}

.entry-date::before{
  font-family: FontAwesome;
  content: '\f073';
  margin-right: .3em;
}
.entry-content{padding-right: 1em;}

.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: 12px;
    background: #333;
    border-radius: 3px;
}
.current{padding:8px;
  color:#fff;
  border-radius: 3px;
}
textarea{width: 98%;}
.cat-links, .comments-link {font-size: 1em}
.comments-link::before {
  font-family: FontAwesome;
  content: '\f086';
}

.cat-links::before{
  font-family: FontAwesome;
  content: "\f07b";

}


ul, ol{margin: 0 0 1.5em 1em;}
.entry-footer{clear:left; padding: 0.5em 0 1em 1em;}

.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 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%;
}





.search_form_block{
    position: absolute;
    left: 3vw;
    top: 3vh;
}


.search_form_block::before{
    position: absolute;
margin-top: .7em;
border-radius: 4px;
display: block;
right: 4em;
font: 1.2em FontAwesome;
content: "\f002";


}


.search-field{
    height: 3em;
    width: 20em;
border: none;
border-radius: 4px;
    padding-left: 2em;
}


.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;
}


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


@media screen and (min-aspect-ratio: 13/9) {

  main{padding-left: 8vw;}

   .block-menu:hover{margin-left: 0;}
   .block-menu:focus-within {margin-left: 0;}

   .ico-menu{ position: absolute;
       right: -2.8vw;
       top: 50%;
       width: 2.8vw;
       height: 3.5vw;
   border: 0;
     background: rgba(0,0,0,0.9);

   z-index: 100;
       margin-top: -1.5vw;
   color: #fff;
   border-radius: 0 999px 999px 0;
   animation: shadow-pulse 2s infinite;
  }


  @keyframes shadow-pulse
  {
      0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.3);
      }
      100% {
          box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
      }
  }



   .ico-menu::before{
     position: absolute;
       font: .8vw FontAwesome;
       content: "\f0c9";
       margin-top: 1.3vw;
       margin-left: .8vw;

   }

   .ico-menu button{ visibility: hidden;}

   .block-menu a:focus{
       font-size: 300%;
       color: #ff4546;
   }

       /* sliding block «block-menu» left block menu + search */
   .block-menu{
       position: fixed;
       z-index: 100;
       width: 40vw; /* block width */
       height: 100%;
       top: 0;
       left: 0;
       background: rgba(0,0,0,0.9);
       margin-left: -39.7vw;
       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;
   }
    .custom-logo-link img{width:7em;}

    .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;}

        .hentry{margin-bottom: 3.5em;}
        .single .post .wp-post-image{width: 26vw;}
    }

    .main-navigation{
        clear: both;
        display: block;
        float: left;
        width: 25vw;
    }

}
/*-----------------------END ... orientation landscape */





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



@media screen and (max-aspect-ratio: 13/9) {

  main {padding: 2em;}

   .block-menu:hover{
     margin-bottom:0;
     background: rgba(0,0,0,0.9);
     border-radius: 2vh 2vh 0 0;
   }

   .block-menu:focus-within {margin-bottom: 0;}

   .ico-menu{ position: relative;
       top: -2em;
       left: 50%;
       width: 4em;
       height: 4em;

   background: #000;
   margin-left: -2em;
   color: #fff;
   border-radius:  999px;
   border: 2px solid #f5f5f5;
    animation: shadow-pulse 2s infinite;


   }


   @keyframes shadow-pulse
   {
       0% {
           box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.6);
       }
       100% {
           box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
       }
   }



   .ico-menu::before{
     position: absolute;

       font: 1em FontAwesome;
       content: "\f0c9";
       margin-top: 1.3em;
       margin-left: 1.4em;
   }

   .ico-menu button{ visibility: hidden;}

       /* sliding block «block-menu» left block menu + search */
   .block-menu{
       position: fixed;
       left: 5vw;
       width: 90vw; /* block width */
       height: 80vh;
       bottom: 0;
       background: rgba(0,0,0,0.3);
       margin-bottom: -76vh;
       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;
       z-index: 100;
       border-radius: 8vh 8vh 0 0;

   }

    .custom-logo-link img{width:5.5em; }



    .main-navigation ul a{font-size: 5vh;}
    .main-navigation ul a:hover{font-size: 6vh;}



    .search_form_block{margin-top: 5vh;}
    .search_form_block::before{right: 4em;}


    .search-field{
        margin-left: 5vw;

        width: 75vw;

        font-size: 1em;
    }


    .cat-item{width: 45vw;}




    .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: -9vw;
        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;}


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