Поддержка Проблемы и решения Меню меняет цвет при наведении — как сделать?

  • Здравствуйте! Помогите пожалуйста настроить меню, чтобы при наведении мышки на раздел оно подсвечивалось фоновым цветом или другим цветом текста.
    Ниже кидаю файл стилей… Если, кто может подправить меню, буду очень благодарен!

    
    /*  ----------------------------------------------------
    1.  Body Start
    -------------------------------------------------------- */
    
    body {
      font-family: "Lato", sans-serif;
      background: #f7f7f7;
    }
    
    #wrapper {
      overflow: hidden;
      width: 100%;
    }
    
    #header {
      background: #353535;
    }
    
    #main-content-sticky {
      display: block;
      overflow: hidden;
      position: relative;
    }
    
    .overlay {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      background: rgba(0, 0, 0, .2);
    }
    
    .preview.button {
      cursor: text;
      font-size: 18px;
      font-weight: bold;
      background-color: #00bcd4;
      margin-top: -40px;
    }
    
    /*
    ------------------------------------
    2. WORDPRESS CORE
    ------------------------------------
    */
    
    .alignnone {
      margin: 5px 20px 20px 0;
    }
    
    .aligncenter, div.aligncenter {
      display: block;
      margin: 5px auto 5px auto;
    }
    
    .alignright {
      float: right;
      margin: 5px 0 20px 20px;
    }
    
    .alignleft {
      float: left;
      margin: 5px 20px 20px 0;
    }
    
    .aligncenter {
      display: block;
      margin: 5px auto 5px auto;
    }
    
    a img.alignright {
      float: right;
      margin: 5px 0 20px 20px;
    }
    
    a img.alignnone {
      margin: 5px 20px 20px 0;
    }
    
    a img.alignleft {
      float: left;
      margin: 5px 20px 20px 0;
    }
    
    a img.aligncenter {
      display: block;
      margin-left: auto;
      margin-right: auto
    }
    
    .wp-caption {
      max-width: 96%;
      /* Image does not overflow the content area */
      padding: 10px 3px 10px;
      text-align: center;
    }
    
    .wp-caption img {
      max-width: 98%!important;
      height: auto;
    }
    
    .wp-caption.alignnone {
      margin: 5px 20px 20px 0;
    }
    
    .wp-caption.alignleft {
      margin: 5px 20px 20px 0;
    }
    
    .wp-caption.alignright {
      margin: 5px 0 20px 20px;
    }
    
    .wp-caption img {
      border: 0 none !important;
      margin: 0 !important;
      max-width: 570px;
      padding: 0 !important;
    }
    
    .wp-caption-text {
      font-size: 11px;
      line-height: 17px;
      margin: 0;
      padding: 0 4px 5px;
    }
    
    .sticky {}
    
    .gallery-caption {}
    
    .bypostauthor {}
    
    .screen-reader-text {
      clip: rect(1px, 1px, 1px, 1px);
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
    }
    
    .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus {
      background-color: #f1f1f1;
      border-radius: 3px;
      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
      clip: auto !important;
      color: #21759b;
      display: block;
      font-size: 14px;
      font-size: 0.875rem;
      font-weight: bold;
      height: auto;
      left: 5px;
      line-height: normal;
      padding: 15px 23px 14px;
      text-decoration: none;
      top: 5px;
      width: auto;
      z-index: 100000;
      /* Above WP toolbar. */
    }
    
    /*----------------------------------------------------
    2.  Header
    -------------------------------------------------------- */
    
    /*-------------------------
    2.1  LOGO
    ---------------------------*/
    
    .logo-center {
      margin: 0 auto;
      justify-content: center;
      display: flex;
      text-align: center;
    }
    
    .logo-right{
      justify-content: flex-end;
    display: flex;
    text-align: right;
    }
    
    .desc {
      text-align: left;
      color: #000;
      font-size: 14px;
      padding-bottom: 20px;
      padding-top: 10px;
    }
    
    #site-title {
      height: auto;
      background: no-repeat;
      line-height: 1.5;
    }
    
    #site-title .site-title {
      margin: 0;
    }
    
    #site-title a {
      color: #000;
      font-size: 40px;
      text-decoration: none;
      text-align: center;
    }
    
    #site-title a img {
      overflow: hidden;
    }
    
    /*-------------------------
    2.2  HEADER info
    ---------------------------*/
    
    .head-top-area {
      position: relative;
      padding: 10px;
      background-color: #ffffff;
    }
    
    .head-bottom-area {
      background: #f8cf27 none repeat scroll 0 0;
      transition: all 0.4s ease;
      position: relative;
      border-top: 1px solid rgba(0, 0, 0, 0.12);
    }
    
    .logo-sticky #site-title a {
      line-height: 0;
    }
    
    .logo-sticky #site-title {
      padding-top: 3px;
      padding-bottom: 2px;
    }
    
    /*-------------------------
    2.3  TOP BAR
    ---------------------------*/
    
    #topmenu {
      background-color: #fff;
      border-bottom: 1px solid #ecede7;
    }
    
    #topmenu .top-bar, #topmenu .top-bar ul {
      padding: 5px 5px 5px 5px;
      background-color: transparent;
    }
    
    #topmenu .dropdown li {
      padding: 0px;
    }
    
    #topmenu .dropdown.menu a {
      padding: 0 25px 0 0;
      font-size: 14px;
    }
    
    #topmenu .top-bar .top-bar-left .menu a {
      padding: 7.5px 9px;
      font-size: 0.75rem;
      font-weight: 800;
    }
    
    /*-------------------------
    2.4  DESKTOP  MENU
    ---------------------------*/
    
    .top-bar, .top-bar ul {
      background-color: transparent;
    }
    
    .hover-underline-menu {
      width: 100%;
    }
    
    .head-bottom-area.sticky {
      z-index: 20;
    }
    
    .head-bottom-area.is-stuck {
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    }
    
    .head-bottom-area.animated {
      animation-duration: 0.5s;
    }
    
    .hover-underline-menu .desktop-menu .underline-from-center {
      position: relative;
    }
    
    .hover-underline-menu .desktop-menu .underline-from-center::after {
      content: "";
      position: absolute;
      top: calc(100% - 0.125rem);
      border-bottom: 0.125rem solid #000000;
      border-top: 0.125rem solid #fefefe;
      left: 50%;
      right: 50%;
      transition: all 0.5s ease;
    }
    
    .hover-underline-menu .desktop-menu .underline-from-center:hover::after {
      left: 0;
      right: 0;
      transition: all 0.5s ease;
    }
    
    .no-js {
      display: none;
    }
    
    .head-bottom-area .top-bar {
      padding: 0;
      background: transparent;
    }
    
    .head-bottom-area .dropdown.menu a {
      padding: 18px 17px;
    }
    
    .is-dropdown-submenu {
      border: none;
      z-index: 20;
    }
    
    .dropdown.menu a, .dropdown .is-dropdown-submenu a {
      padding: 1rem 1rem
    }
    
    .dropdown.menu a {
      padding: 1.3rem 1rem
    }
    
    .dropdown li ul li {
      padding: 0px
    }
    
    .dropdown.menu>li.is-dropdown-submenu-parent>a::after {
      content: "\f107";
      font-family: FontAwesome;
      border: none;
      margin-top: -7px;
      right: 18px;
    }
    
    .head-bottom-area .desktop-menu .is-dropdown-submenu-parent .is-dropdown-submenu li a:hover {
      -webkit-transition: background-color 300ms linear;
      -ms-transition: background-color 300ms linear;
      transition: background-color 300ms linear;
    }
    
    .head-bottom-area .animated {
      animation-duration: .7s;
      animation-fill-mode: both;
    }
    
    /*-------------------------
    2.5  MOBILE MENU
    ---------------------------*/
    
    .mobile-menu .is-stuck {
      top: 0;
      transition: top 1s ease-in-out;
      width: 100%;
      z-index: 999;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    }
    
    .multilevel-offcanvas {
      padding: 60px 30px;
    }
    
    .off-canvas-content .title-bar {
      padding-left: 20px;
    }
    
    .nav-bar .offcanvas-trigger {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      padding: 1.6rem;
      color: #fff;
      font-family: "Titillium Web", sans-serif;
      text-transform: uppercase;
      background-color: #566d7c;
      -webkit-transition: background-color 0.2s ease-in;
      transition: background-color 0.2s ease-in;
      cursor: pointer;
    }
    
    .nav-bar .offcanvas-trigger .offcanvas-trigger-text {
      margin-right: 0.25rem;
      margin-top: 0.25rem;
    }
    
    .nav-bar .offcanvas-trigger:hover {
      background-color: #6b879a;
    }
    
    @media screen and (max-width: 39.9375em) {
      .nav-bar .offcanvas-trigger {
        padding: 0.9rem;
      }
    }
    
    .position-right {
      width: 270px;
      -ms-transform: translateX(270px);
      transform: translateX(270px);
    }
    
    .off-canvas {
      background-color: #232323;
    }
    
    .position-right.is-transition-push {
      box-shadow: none;
    }
    
    .js-off-canvas-overlay.is-overlay-fixed {
      position: fixed;
      background: rgba(95, 0, 255, 0.7);
    }
    
    .off-canvas>.menu {
      margin-bottom: 1rem;
    }
    
    .off-canvas .menu a {
      color: rgb(221, 51, 51);
      -webkit-transition: color .2s ease-in;
      transition: color .2s ease-in;
      font-weight: 600;
    }
    
    .off-canvas .menu a:hover {
      color: rgb(111, 49, 225);
    }
    
    .off-canvas .fa {
      color: #fff;
    }
    
    .off-canvas .is-accordion-submenu-parent>a::after {
      border-color: rgba(255, 255, 255, 0.6) transparent transparent;
    }
    
    .off-canvas .fa-window-close {
      font-size: xx-large;
      position: absolute;
      top: 10px;
      left: 10px;
      display: block;
      width: 40px;
      height: 40px;
      color: #f00;
      text-align: center;
      line-height: 40px;
      opacity: .5;
    }
    
    .nav-bar li {
      list-style: none;
    }
    
    .is-open+.off-canvas-content .hamburger .line:nth-child(1), .is-open+.off-canvas-content .hamburger .line:nth-child(3) {
      width: 12px;
    }
    
    .is-open+.off-canvas-content .hamburger .line:nth-child(1) {
      -webkit-transform: translateX(-5px) rotate(-45deg);
      transform: translateX(-5px) rotate(-45deg);
    }
    
    .is-open+.off-canvas-content .hamburger .line:nth-child(3) {
      -webkit-transform: translateX(-5px) rotate(45deg);
      transform: translateX(-5px) rotate(45deg);
    }
    
    .hamburger .line {
      width: 20px;
      height: 2px;
      background-color: #fff;
      display: block;
      margin: 3px auto;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    
    .hamburger .line:last-child {
      margin-bottom: 0;
    }
    
    .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle)>a::after {
      content: "\f107";
      font-family: FontAwesome;
      font-size: 18px;
      font-style: normal;
      font-weight: normal;
      text-decoration: inherit;
      width: auto;
      height: auto;
      border: none;
      margin-top: -7px;
    }
    
    .off-canvas .menu a {
      position: relative;
      display: block;
      width: 100%;
      border-top: 1px solid rgba(49, 49, 49, 0.06);
      line-height: 20px;
      -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;
    }
    
    .multilevel-offcanvas>ul>li:first-child>a {
      border-top: none;
    }
    .off-canvas.is-transition-overlap{z-index: 999999;}
    /*----------------------------------------------------
    3. Slider
    -------------------------------------------------------- */
    .slick-slide{
      line-height: 0;
    }
    #top-content {
      overflow: hidden;
      position: relative;
    }
    #top-content .slick-slider{
      overflow: hidden;
      position: relative;
      height:0px;
    }
    
    #top-content .slick-slider.slick-initialized{
      overflow: hidden;
      position: relative;
      height:auto;
    }
    .sliderlink{position: absolute;height: 100%;width: 100%;z-index: 2}
    #slider .projectitem {
      position: relative;
      cursor: pointer;
    }
    .slick-slider {
      opacity: 0;
    visibility: hidden;
    }
    .slick-slider.slick-initialized {
      opacity: 1;
      transition: opacity .3s ease-out;
      display: block;
      visibility:visible;}
    .slider-container {
      background-size: cover !important;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      min-height: 40vh;
    }
    
    @media screen and (min-width: 64em) {
      .slider-container {
        min-height: 600px;
      }
    }
    
    .slider-container .post-header-outer {
      padding: 20px 30px 30px 30px;
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 3;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    
    .slider-container .post-cat-info {
      font-family: Dosis;
      text-transform: uppercase;
      letter-spacing: 0;
      font-weight: 700;
      font-style: normal;
      font-size: 12px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    
    .slider-container .cat-info-el {
      color: #fff;
    }
    
    .slider-container .post-title {
      text-shadow: 1px 1px 2px rgba(28, 28, 28, .1);
      letter-spacing: 0;
      font-weight: 700;
      font-style: normal;
      color: #fff;
    }
    .slider-container .post-title a{text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);}
    
    .slider-container .post-meta-info {
      color: #eee;
      font-size: 14px;
    }
    
    .slider-container .post-meta-info .meta-info-author .author {
      font-size: 14px;
      font-weight: bolder;
    }
    
    .newspaperss-slider-nav {
      position: absolute;
      z-index: 2;
      padding: 0;
      width: 38px;
      height: 38px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      background-color: rgba(28, 28, 28, .5);
      color: #fff;
      text-align: center;
      font-size: 24px;
      line-height: 38px;
      opacity: .3;
      cursor: pointer;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
    }
    .newspaperss-slider-nav:hover{opacity: .8;background-color: rgba(28, 28, 28, .9);}
    
    .newspaperss-slider-next {
      top: 50%;
      right: 20px;
      left: auto;
      margin-top: -19px;
    }
    
    .newspaperss-slider-prev {
      top: 50%;
      left: 20px;
      margin-top: -19px;
    }
    /*----------------------------------------------------
    3.1 Slider right post
    -------------------------------------------------------- */
    
    .slider-right .post-wrap {
      position: relative;
      display: block;
      overflow: hidden;
      margin-right: auto;
      margin-left: auto;
      margin-bottom:0px;
    }
    
    .slider-right .thumbnail-post {
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
    }
    
    .slider-right .post-header-outer {
      top: 0;
      right: auto;
      bottom: auto;
      left: 0;
      display: -webkit-flex;
      display: flex;
      padding: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    .slider-right .post-header {
      margin: auto;
      max-width: 90%;
      pointer-events: auto;
    }
    .slider-right .post-title a{
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      color: #fff;}
    
    .slider-right .post-header .post-cat-info {
      margin-bottom: 10px;
      width: 100%;
      overflow: hidden;
      text-align: center;
    }
    
    .slider-right .post-header .post-cat-info a {
      color: #fff;
    }
    
    .slider-right .post-header .post-cat-info .cat-info-el {
      display: inline-block;
      float: none;
      margin: 0px;
      font-size: 12px;
      font-weight: 800;
    }
    
    .slider-right .post-thumb-overlay {
      top: 0;
      bottom: 0;
      background: inherit;
      background-color: rgba(0, 0, 0, .4);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      z-index: 2;
    }
    .slider-right .post-meta-info .meta-info-author .author{
      color: #fff;
    }
    /*----------------------------------------------------
    4. Latest Post section
    -------------------------------------------------------- */
    
    #news-latest-post {
      overflow: hidden;
      position: relative;
    }
    
    .card {
      margin: 0px;
      border: none;
      background: transparent;
    }
    
    .lates-post-warp {
      width: 50%;
      display: block;
      padding-right: .9375rem;
      padding-left: .9375rem;
      float: left;
      padding-bottom: 20px;
    }
    
    .no-homesidebar .lates-post-warp {
      width: 33%;
      display: block;
      padding-right: .9375rem;
      padding-left: .9375rem;
      float: left;
      padding-bottom: 20px;
    }
    
    .block-header-wrap {
      position: relative;
      display: block;
      border-bottom: 1px solid rgba(28, 28, 28, .07);
      text-transform: uppercase;
      letter-spacing: 0;
      font-weight: 400;
    }
    
    .block-title h3 {
      display: inline-block;
      border-bottom: 3px solid;
      margin-bottom: 0px;
      font-weight: 400;
      font-size: x-large;
    }
    
    .block-title {
      position: relative;
      display: inline-block;
      line-height: 0;
    }
    
    .block-header-inner {
      position: relative;
      display: block;
    }
    
    .block-content-wrap {
      position: relative;
      display: block;
      margin-bottom: 15px;
      background-color: #fff;
      webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
    }
    
    .post-wrap-big {
      margin-bottom: 25px;
      background: transparent;
      box-shadow: none;
      overflow: hidden;
      position: relative;
    }
    
    .post-wrap-big .post-header-outer {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 3;
      padding: 15px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    
    .post-wrap-big .post-cat-info {
      text-transform: uppercase;
      font-weight: 400;
      font-style: normal;
      display: inline-block;
    }
    
    .post-wrap-big .post-title a {
      letter-spacing: 1px;
    }
    
    .post-list {
      display: block;
      overflow: hidden;
      padding: 5px 15px 10px 15px;
    }
    
    .post-list .post-thumb-outer {
      float: left;
      margin-bottom: 0;
      max-width: 110px;
      width: 110px;
      height: 85px;
    }
    
    .post-list .post-body {
      margin-left: 125px;
      padding: 0;
    }
    
    .post-list .post-title a {
      color: #282828;
    }
    
    .post-list .post-meta-info .meta-info-el {
      color: #282828;
    }
    
    .lates-post-warp .button.secondary {
      background-color: #767676;
      color: #fefefe;
      margin-bottom: 0px;
      width: 100%;
      margin-top: 25px;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
      pointer-events: auto;
    }
    
    .lates-post-warp .button.secondary:hover {
      background-color: #2f2f2f;
    }
    
    .block-content-wrap .post-title.is-lite a:hover {
      color: #dd3333
    }
    .latest-post-news .block-content-inner .post-list img{
      width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        height: 85px;
    }
    .widget_recent-post-single .block-content-recent .post-list img{
      width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        height: 85px;
    }
    .post-wrap-big .post-thumb img {
        min-width: 370px;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        object-position: center center;
        height: 350px;
    }
    /*----------------------------------------------------
    4.1  latest post blog style
    -------------------------------------------------------- */
    .latest_post_blog_list{
      display: inline-block;
        width: 100%;
        overflow: hidden;
    }
    .lates-post-blog {
      margin-bottom:0px;
    }
    
    .no-homesidebar .lates-post-blog {
      display: block;
      width: 80%;
      overflow: hidden;
    }
    
    .lates-post-blog .block-content-wrap {
      margin-bottom: 30px;
      margin-right: 5px;
      margin-left: 5px;
    }
    
    .lates-post-blog .post-body {
      padding: 40px 30px 19px 10px;
    }
    .post-list-content h3{margin-bottom: 0.5rem;}
    .post-list-content .post-cat-info {
      display: inline-block;
      overflow: hidden;
    }
    
    .post-list-content .post-cat-info a {
      color: #fff;
    }
    
    .post-list-content .post-title {
      margin-top: 10px;
    }
    
    .post-list-content .post-title a {
      display: block;
      color: #282828;
    }
    
    .post-list-content .post-meta-info {
      margin-top: 10px;
      padding-left: 10px;
      border-left: 5px solid rgba(28, 28, 28, .07);
    }
    
    .post-list-content .post-meta-info a {
      color: #282828;
      font-weight: 700;
    }
    
    .no-left-padding .lates-post-blog {
      padding-left: 0;
    }
    
    .post-list-content .meta-info-date {
      color: #282828;
    }
    
    /*----------------------------------------------------
    4.2  latest post blog big style
    -------------------------------------------------------- */
    .lates-post-blogbig{
     /* display: inline-block;*/
    
    }
    .lates-post-blogbig .block-content-wrap {
      margin-bottom: 30px;
      box-shadow: none;
      background: none;
    }
    .lates-post-blogbig .thumbnail-resize img{
      width: 100%;
          height: 400px;
          object-fit: cover;
          object-position: center;
    }
    .lates-post-blogbig .post-excerpt p {
      color: #000;
    }
    
    .post-excerpt p {
      color: #000;
    }
    
    .post-thumb-outer {
      position: relative;
      display: block;
    }
    
    .lates-post-blogbig .post-body {
      position: relative;
      z-index: 2;
      display: block;
      margin-top: -90px;
      margin-right: 40px;
      margin-left: 40px;
      padding: 30px;
      background-color: #fff;
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
    }
    
    .lates-post-blogbig .post-body-noimg {
      margin-top: 0px;
    }
    
    /*----------------------------------------------------
    latest post layout 3
    -------------------------------------------------------- */
    .layout3-post{
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
        background-color: #3b3b3b;
        color: #333333;
        margin-bottom: 40px;
        position: relative;
        z-index: 1;
        border: 0 none;
        -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
        -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
        -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
        -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
        transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    }
    
    .layout3-post .card-title a {
        margin: 5px 0 0 0;
        color: #d2cac4;
    }
    
    .layout3-post .card-section p {
        color: #d2cac4;
        margin-bottom: 5px;
        margin-top: 8px;
    }
    .layout3-post .thumbnail-resize img{
      max-width: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        height: 250px;
        object-position: center center;
    }
    .post-cat-info.is-absolute {
        bottom: 15px;
        left: 15px;
        margin: 0;
        padding: 0;
    }
    .layout3-post .card-divider span {
        margin: 0 0 0 .75em;
        font-size: .75em;
    }
    .layout3-post .card-divider span a {
      color: #8f8f8f;
    }
    .layout3-post .card-divider .mate-info-date-icon:after {
        content: "\2044";
        margin-left: .75em;
        color: silver;
    }
    .layout3-post .card-divider {
        padding: 0;
        background: transparent;
        padding-bottom: .8em;
        padding-left: .5em;
    }
    /*----------------------------------------------------
    Recent post widget style 2
    -------------------------------------------------------- */
    .block-content-recent{
      position: relative;
    display: block;
    margin-bottom: 5px;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
    padding-top: 10px;
    }
    .block-content-recent .card-section .post-list {
        display: block;
        overflow: hidden;
        padding: 5px 0px 10px 0px;
    }
    
    .block-content-recent .card-section .post-list {
        display: block;
        overflow: hidden;
        padding: 5px 0px 10px 0px;
    }
    
    /*----------------------------------------------------
    sidebar common 5
    -------------------------------------------------------- */
    
    .widget-title {
      position: relative;
      display: block;
      overflow: hidden;
      margin-bottom: 25px;
      border-bottom: 1px solid rgba(28, 28, 28, .07);
      color: #444;
      font-weight: 600;
      font-size: 14px;
    }
    .top-footer-wrap .widget-title {
      margin-bottom: 10px;
    }
    .widget-title h3 {
      display: inline-block;
      border-bottom: 3px solid;
      line-height: 37px;
      font-size: 18px;
      margin-bottom: 0px;
    }
    
    .widget ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .widget ul li {
      list-style-type: none;
      margin: 10px 0;
    }
    
    .widget li a {
      color: #999999;
    }
    
    .sidebar-inner .widget_archive ul li, .sidebar-inner .widget_categories ul li, .sidebar-inner .widget_pages ul li, .sidebar-inner .widget_nav_menu ul li, .sidebar-inner .widget_portfolio_category ul li {
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      margin: 0px;
      display: block;
    }
    
    .sidebar-inner .widget_archive ul li:last-child, .sidebar-inner .widget_categories ul li:last-child, .sidebar-inner .widget_pages ul li:last-child, .sidebar-inner .widget_nav_menu ul li:last-child, .sidebar-inner .widget_portfolio_category ul li:last-child {
      border: none;
    }
    
    .sidebar-inner .widget_archive ul li a, .sidebar-inner .widget_categories ul li a, .sidebar-inner .widget_pages ul li a, .sidebar-inner .widget_nav_menu ul li a, .sidebar-inner .widget_portfolio_category ul li a {
      line-height: 20px;
      padding: 5px 0;
      font-size: 13px;
      color: #665665;
    }
    
    .widget_wrap .menu {
      display: block;
    }
    
    .sidebar-inner .widget_archive ul li a:before, .sidebar-inner .widget_categories ul li a:before, .sidebar-inner .widget_pages ul li a:before, .sidebar-inner .widget_nav_menu ul li a:before, .sidebar-inner .widget_portfolio_category ul li a:before {
      content: "\f061";
      font-family: 'FontAwesome';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 12px;
      margin-right: 15px;
      display: inline-block;
      vertical-align: baseline;
      color: #da1c36;
    }
    
    .tagcloud a {
      font-size: 12px !important;
      text-transform: uppercase;
      line-height: 20px;
      margin: 0 6px 6px 0;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 10px;
      padding-bottom: 10px;
      border-radius: 0;
      background: #fff;
      color: #665;
      display: inline-block;
    }
    
    .tagcloud a:hover {
      text-decoration: none;
      background: #da1c36;
      color: #fff;
      border-color: #da1c36;
    }
    
    .sidebar-inner {
      display: block;
      margin-bottom: 30px;
    }
    
    .sidebar-inner .widget_wrap {
      position: relative;
      display: block;
      margin-bottom: 20px;
    }
    
    .sidebar-inner .lates-post-blog {
      margin: 0px;
      padding: 0px;
    }
    
    .sidebar-inner .lates-post-warp {
      width: 100%;
      padding: 0;
    }
    
    .sidebar-inner .sidebar-homepagesidebar {
      width: 100% !important;
    }
    
    .sidebar-inner .lates-post-blog .block-content-wrap {
      margin: 0;
      margin-bottom: 20px;
    }
    
    .home-sidebar .block-content-wrap .post-body, .sidebar-inner .block-content-wrap .post-body {
      padding-left: 20px;
      padding-right: 10px;
      padding-top: 19px;
    }
    
    .sidebar-inner .lates-post-blogbig .post-body {
      margin-right: 10px;
      margin-left: 10px;
    }
    
    .sidebar-inner .lates-post-blogbig .post-list-content .post-title a {
      font-size: 24px;
    }
    
    .sidebar-inner .object-fit-postimg {
      height: auto;
    }
    .sidebar-inner .gallery-item,.top-footer-wrap .gallery-item{
      float: left;
      padding: 2px;
    }
    .sidebar-inner .gallery-columns-1 .gallery-item{width: 100%;}
    .sidebar-inner .gallery-columns-3 .gallery-item {width: 33%;}
    .sidebar-inner .gallery-columns-2 .gallery-item{width: 50%;}
    .sidebar-inner .gallery-columns-4 .gallery-item{width: 25%;}
    /*----------------------------------------------------
    sidebar Home 5.1
    -------------------------------------------------------- */
    
    .home-sidebar .lates-post-warp {
      width: 100%;
    }
    
    .home-sidebar .widget {
      position: relative;
      display: block;
      margin-bottom: 15px;
    }
    
    .home-sidebar {
      display: block;
      overflow: hidden;
      position: relative;
    }
    
    .home-sidebar .sidebar-homepagesidebar {
      width: 100% !important;
    }
    
    /*----------------------------------------------------
    blog,category,archive,tag
    -------------------------------------------------------- */
    
    #blog-content {
      display: block;
      position: relative;
      overflow: hidden;
      padding-top: 10px;
      padding-bottom: 0px;
    }
    
    #sub_banner {
      position: relative;
      height: auto;
    }
    
    #sub_banner .header-image-container {
      z-index: 1;
    }
    
    .blog .breadcrumb-wraps {
      display: none;
    }
    
    .header-image-container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;
      background-position: center center !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
    }
    
    .heade-content {
      position: relative;
      display: block;
      z-index: 3;
      padding-top: 50px;
      padding-bottom: 50px;
    }
    
    .heade-content h1 {
      margin: 0;
      color: #fff;
      font-size: 32px;
      text-transform: capitalize;
    }
    
    #blog-content .sidebar-inner {
      margin-top: 30px;
    }
    #blog-content .pagination {
        width: 80%;
        margin-right: auto;
        margin-left: auto;
    }
    #blog-content .navigation .nav-links {
      margin: 1em auto 1em;
      text-align: center;
      width: 100%;
      max-width: none;
      display: inline-block;
      border-radius: 0.25em;
      border: 1px solid #2fc2e3;
      background-color: #fff0;
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
      box-shadow: 0 2px 5px 0 rgba(96, 92, 92, 0.64);
    }
    
    #blog-content .navigation .nav-links a {
      /* hide numbers on small devices */
      display: none;
      margin: 0 .2em;
    }
    
    #blog-content .navigation .nav-links a.page-numbers {
      /* make sure prev next bblog-buttons are visible */
      display: inline-block;
    }
    
    #blog-content .navigation .nav-links a, #blog-content .navigation .nav-links span {
      display: inline-block;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      /* use padding and font-size to change bblog-buttons size */
      padding: .6em .8em;
      font-size: 14px;
      color: #ffffff;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
    }
    
    #blog-content .navigation .nav-links a.disabled {
      /* bblog-button disabled */
      color: rgba(46, 64, 87, 0.4);
      pointer-events: none;
    }
    
    #blog-content .navigation .nav-links a.disabled::before,#blog-content .navigation .nav-links a.disabled::after {
      opacity: .8;
    }
    
    #blog-content .navigation .nav-links .current {
      /* selected number */
      background-color: #fbb5be;
      color: #ffffff;
      pointer-events: none;
    }
    
    @media only screen and (min-width: 768px) {
    #blog-content  .navigation .nav-links a {
        display: inline-block;
      }
    }
    
    @media only screen and (min-width: 1170px) {
      #blog-content .navigation .nav-links {
        margin: 1em auto 1em;
      }
    }
    
    #blog-content .navigation .nav-links:after {
      content: "";
      display: table;
      clear: both;
    }
    
    #blog-content .navigation .nav-links a {
      margin: 0;
      border-right: 1px solid #e6e6e6;
    }
    
    #blog-content .navigation .nav-links a:last-of-type {
      border-right: none;
    }
    
    #blog-content .navigation .nav-links a,#blog-content .navigation .nav-links span {
      border-radius: 0;
      padding: .8em 1em;
      border: none;
    }
    
    #blog-content .navigation .nav-links .prev {
      border-radius: 0.25em 0 0 0.25em;
    }
    
    #blog-content .navigation .nav-links .next {
      border-radius: 0 0.25em 0.25em 0;
    }
    
    #blog-content .navigation .nav-links .next:after {
      content: "\f105";
      font-family: FontAwesome;
      display: table;
      clear: both;
      float: right;
      padding-left: 5px;
    }
    
    #blog-content .navigation .nav-links .prev:after {
      content: "\f104";
      font-family: FontAwesome;
      display: table;
      clear: both;
      float: left;
      padding-right: 5px;
    }
    
    #blog-content .navigation .nav-links .page-numbers.prev {
      float: left;
    }
    
    #blog-content .navigation .nav-links .page-numbers.next {
      float: right;
    }
    
    #blog-content .navigation .nav-links {
      display: block;
      overflow: hidden;
    }
    
    /*----------------------------------------------------
    search bar styling
    -------------------------------------------------------- */
    
    .widget_search {
      display: block;
      overflow: hidden;
    }
    
    .widget_search label {
      display: block;
      float: left;
      width: 75%;
    }
    
    .widget_search input[type=search] {
      padding: 8px 15px;
      height: 50px;
      border: none;
      -webkit-border-radius: 4px 0 0 4px;
      -moz-border-radius: 4px 0 0 4px;
      border-radius: 4px 0 0 4px;
      color: #282828;
      background-color: rgba(255, 255, 255, 0.98);
    }
    
    .widget_search input[type=search]:focus {
      box-shadow: inset 0 1px 2px rgba(10, 10, 10, .1);
    }
    
    .widget_search .screen-reader-text {
      display: none;
    }
    
    .widget_search .search-submit {
      position: relative;
      display: block;
      float: left;
      width: 25%;
      height: 50px;
      border: 0;
      -webkit-border-radius: 0 4px 4px 0;
      -moz-border-radius: 0 4px 4px 0;
      border-radius: 0 4px 4px 0;
      background-color: #55acee;
      color: #fff;
      font-weight: 700;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
      cursor: pointer;
    }
    
    .widget_search .search-submit:hover {
      background-color: #507a9a;
    }
    
    /****** search bar Header styling *******/
    
    .search-wrap .search-submit {
      position: absolute;
      top: 10px;
      right: 20px;
      opacity: 0;
      width: 30px;
      cursor: pointer;
      z-index: 10;
    }
    
    .search-wrap .fa-search {
      position: absolute;
      top: 26%;
      padding-right: 10px;
      right: 40px;
      font-size: 24px;
      border-right: 1px solid;
      height: auto;
      color: white;
      opacity: 0;
    }
    
    .search-wrap.open .fa-search {
      opacity: 1;
    }
    
    .search-wrap .search-field {
      border: none;
      box-shadow: none;
      max-width: 100%;
      margin: 0;
      border-radius: 20px;
      background-color: transparent;
      height: auto;
      height: 40px;
      padding-top: 0px;
      padding-bottom: 0px;
      font-size: 16px;
      font-weight: 700;
    }
    
    .search-wrap .screen-reader-text {
      display: none;
    }
    
    .search-wrap .search-form input[type=search]:focus {
      border: none;
      background: transparent;
    }
    
    .search-wrap {
      position: absolute;
      display: block;
      z-index: 1;
      width: 16px;
      height: 16px;
      margin-left: 0;
      padding: 0;
      border: 2px solid white;
      border-radius: 20px;
      -moz-transition: all 0.25s ease 0.3s;
      -o-transition: all 0.25s ease 0.3s;
      -webkit-transition: all 0.25s ease;
      -webkit-transition-delay: 0.3s;
      transition: all 0.25s ease 0.3s;
      right: 0px;
      margin-right: 30px;
      margin-top: -4px;
    }
    
    .search-wrap:before {
      top: 90%;
      left: 90%;
      width: 13px;
      height: 1.6px;
      background-color: white;
      border-radius: 1px;
      -moz-transition: width 0.15s ease 0.55s;
      -o-transition: width 0.15s ease 0.55s;
      -webkit-transition: width 0.15s ease;
      -webkit-transition-delay: 0.55s;
      transition: width 0.15s ease 0.55s;
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -moz-transform-origin: top left;
      -ms-transform-origin: top left;
      -webkit-transform-origin: top left;
      transform-origin: top left;
    }
    
    .search-wrap label {
      width: 100%;
      height: 100%;
      padding: 0 30px 0 0px;
      font-size: 14px;
      line-height: 38px;
      opacity: 0;
      background-color: transparent;
      -moz-transition: opacity 0.15s ease;
      -o-transition: opacity 0.15s ease;
      -webkit-transition: opacity 0.15s ease;
      transition: opacity 0.15s ease;
    }
    
    .eks {
      display: block;
      position: absolute;
      opacity: 0;
      top: 50%;
      right: 0;
      z-index: 10;
      width: 30px;
      height: 30px;
      cursor: pointer;
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    
    .eks:before, .eks:after {
      right: 5px;
      height: 2px;
      width: 2px;
      border-radius: 1px;
      -moz-transition: all 0.25s ease;
      -o-transition: all 0.25s ease;
      -webkit-transition: all 0.25s ease;
      transition: all 0.25s ease;
    }
    
    .eks:before {
      top: 0px;
      background-color: white;
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -moz-transform-origin: top right;
      -ms-transform-origin: top right;
      -webkit-transform-origin: top right;
      transform-origin: top right;
      -moz-transition-delay: 0.1s;
      -o-transition-delay: 0.1s;
      -webkit-transition-delay: 0.1s;
      transition-delay: 0.1s;
    }
    
    .eks:after {
      bottom: 0px;
      background-color: white;
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -moz-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right;
      -moz-transition-delay: 0s;
      -o-transition-delay: 0s;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
    }
    
    .search-wrap.open {
      width: 400px;
      -moz-transition-delay: 0.1s;
      -o-transition-delay: 0.1s;
      -webkit-transition-delay: 0.1s;
      transition-delay: 0.1s;
      height: 96%;
      background-color: #535656;
      border: 2px solid #a5a5a5;
      margin-top: 0px;
    }
    
    .search-wrap.open:before {
      width: 0px;
      -moz-transition-delay: 0s;
      -o-transition-delay: 0s;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
    }
    
    .search-wrap.open label {
      opacity: 1;
      -moz-transition-delay: 0.15s;
      -o-transition-delay: 0.15s;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
    }
    
    .open .eks {
      opacity: 1;
    }
    
    .search-wrap.open .eks:before, .search-wrap.open .eks:after {
      width: 15px;
      right: 12px;
    }
    
    .search-wrap.open .eks:before {
      top: 9px;
      -moz-transition-delay: 0.25s;
      -o-transition-delay: 0.25s;
      -webkit-transition-delay: 0.25s;
      transition-delay: 0.25s;
    }
    
    .search-wrap.open .eks:after {
      bottom: 9px;
      -moz-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      -webkit-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }
    
    .search-wrap:before, .eks:before, .eks:after {
      content: "";
      position: absolute;
      display: block;
    }
    
    .multilevel-offcanvas .search-wrap {
      width: 20px;
      height: 20px;
      margin-left: 0;
      padding: 0;
      border: 2px solid #171616;
      margin-right: 30px;
      margin-top: 0px;
      top: 20px;
    }
    
    .multilevel-offcanvas .search-wrap:before {
      border: 2px solid #171616;
    }
    
    .multilevel-offcanvas .search-wrap.open {
      width: 95%;
      height: 45px;
      background-color: #535656;
      border: 2px solid #a5a5a5;
      margin-top: -10px;
      right: -20px;
      border-radius: 8px;
    }
    
    .multilevel-offcanvas .search-wrap .search-submit {
      position: absolute;
      top: 10px;
      right: 50px;
      opacity: 0;
      width: 30px;
      cursor: pointer;
      z-index: 10;
    }
    
    /*----------------------------------------------------
    Footer
    -------------------------------------------------------- */
    
    #footer .sticky-container {
      z-index: -1;
    }
    
    .footer-wrap {
      position: relative;
      display: block;
    }
    
    .footer-copyright-wrap {
      position: relative;
      z-index: 1;
      display: block;
      padding: 15px;
    }
    .footer-copyright-text{
      font-size: 14px;
      line-height: 1.5;
      font-weight: bold;
    }
      .footer-copyright-wrap p {
        color: #ddd;
        font-size: 13px;
        line-height: 1.6;
    }
    .footer-copyright-wrap .theme-by{
      font-weight: bold;
    }
    .top-footer-wrap {
      display: block;
      overflow: hidden;
      background-color: #1b1a1a;
      padding-top: 30px;
      padding-bottom: 30px;
      color: #fff;
    }
    
    .top-footer-wrap .sidebar-footer {
      padding-right: 30px;
      padding-left: 30px;
      padding-bottom: 30px;
    }
    
    .top-footer-wrap .lates-post-blog {
      margin-top: 0;
    }
    
    .top-footer-wrap .sidebar-homepagesidebar {
      width: 100%;
    }
    
    .top-footer-wrap .lates-post-warp {
      width: 100%
    }
    
    .top-footer-wrap .lates-post-blogbig .post-body {
      margin-top: -20px;
      margin-right: 10px;
      margin-left: 10px;
      padding: 15px;
    }
    
    #footer .defult-text {
      padding: 0;
      margin: 0;
    }
    
    #footer .defult-text a {
      color: #fff;
    }
    
    .footer-copyright-text a, .footer-copyright-text p, .footer-copyright-text {
      margin-bottom: 0;
    }
    .top-footer-wrap .block-title h3 {
        font-size: 18px;
    }
    #footer .lates-post-blog .block-content-wrap{
      margin-top: 20px;
    }
    
    #footer .lates-post-blog .post-body {
        padding: 10px ;
    }
    .top-footer-wrap .block-content-recent {
      background-color: transparent;
    }
    
    .top-footer-wrap .block-content-recent .card-section {
        padding: 0px;
    }
    
    /*----------------------------------------------------
    Single Post
    -------------------------------------------------------- */
    
    .single-post-outer {
      display: block;
    }
    
    .single-post-feat-bg-outer {
      position: relative;
      margin: 0;
      padding: 0;
    }
    
    .single-post-thumb-outer {
      position: relative;
      display: block;
      text-align: center;
      margin-top: 0;
      margin-bottom: 0;
    }
    
    .single-post-feat-bg-outer .post-thumb {
      display: block;
      max-height: 500px;
      width: 100%;
    }
    
    .single-post-feat-bg-outer .post-thumb img {
      display: inline-block;
      max-height: 500px;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      max-width: 100%;
      width: 100%;
    }
    
    .single-wrap {
    padding-top: 20px;
    padding-bottom: 20px;
    }
    
    .single-post-content-wrap {
      position: relative;
    }
    
    .single-post-header {
      position: relative;
      display: block;
      padding-top: 0px;
      padding-bottom: 0px;
      padding-right: 10px;
      padding-left: 20px;
      border-bottom: 0.5px solid rgba(28, 28, 28, .05);
      background: #3b3b3b;
      padding-top: 20px;
    }
    
    .single-post-top {
      position: relative;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(28, 28, 28, .07);
      font-size: 12px;
      color: #999;
    }
    
    .breadcrumb-wrap {
      display: block;
      width: 100%;
      color: #777;
      font-size: 12px;
      line-height: 20px;
      overflow: hidden;
    }
    
    .single-post-top .breadcrumb-wrap .bread-current {
      color: #989898;
    }
    
    .post-cat-info {
      text-transform: uppercase;
      font-weight: 700;
      font-size: 11px;
      display: inline-block;
    }
    
    .single-post-content-wrap .single-title h1 {
      color: #d2cac4;
      font-size: 22px;
    }
    
    .single-post-header .post-meta-info {
      margin-top: 10px;
    }
    
    .post-meta-info .meta-info-el {
      margin-right: 10px;
    }
    .single-post-content-wrap .post-meta-info .meta-info-el a{
      color: #737272;
    }
    .meta-info-el.meta-info-author img {
      display: inline;
      margin-right: 7px;
      width: 20px;
      height: 20px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      vertical-align: middle;
    }
    
    .meta-info-el i {
      margin-right: 5px;
    }
    
    .single-content-wrap {
      position: relative;
      display: block;
      padding: 20px 20px 30px 20px;
      background: #3b3b3b;
      overflow: hidden;
    
    }
    .single-entry{
      display: block;
      overflow:hidden;
    }
    .single-post-tag{
      display: block;
      overflow:hidden;
    margin-top: 20px;
    }
    .single-post-tag .single-tag-text {
      margin-right: 10px;
      vertical-align: middle;
      line-height: 26px;
    }
    
    .single-post-tag a {
      display: inline-block;
      margin-right: 5px;
      padding: 0 15px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      background-color: #6f31e1;
      vertical-align: middle;
      text-align: center;
      font-style: normal;
      line-height: 26px;
      -webkit-transition: all .2s;
      -moz-transition: all .2s;
      -ms-transition: all .2s;
      -o-transition: all .2s;
      transition: all .2s;
      color: #ffffff;
    }
    
    /*----------------------------------------------------
    single post box related
    -------------------------------------------------------- */
    
    .single-post-box-related {
      margin-top: 30px;
    }
    .single-post-box-related .post-wrap{
      margin-right: 20px;
      margin-bottom: 20px;
       margin-left: 0px;
    }
    .single-post-box-related .block-content-wrap {
      position: relative;
      display: block;
      margin-bottom: 15px;
      background: transparent;
      box-shadow: none;
    }
    
    .single-post-box-related .post-wrap .post-header-outer {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 3;
      padding: 15px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    
    .post-image-warp {
      display: block;
      overflow: hidden;
      position: relative;
    }
    
    .thumbnail-post {
      position: relative;
      display: block;
    }
    .object-fit-postimg_250.noimage{
      background: #3a3a3a;
    }
    
    .single-box-author {
      position: relative;
        display: block;
        margin: 0;
        padding: 0;
        background-color: #fff;
        box-shadow: 0 1px 3px 0 rgba(28,28,28,.05);
        -wekit-box-shadow: 0 1px 3px 0 rgba(28,28,28,.05);
        margin-top: 30px;
        padding: 20px;
    }
    .author-thumb-wrap{
      text-align: center;
    }
    .single-box-author .author-thumb-wrap img {
      overflow: hidden;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
    }
    
    .author-content-wrap .author-title h3 {
        font-weight: inherit;
        font-size: 16px;
        line-height: 20px;
    }
    .author-description {
        font-size: .95em;
        line-height: 1.6;
    }
    .single-box-author .author-links .bubbly-button{
      padding: 5px 10px;
      margin-top: 20px;
    }
    /*----------------------------------------------------
    comment box
    -------------------------------------------------------- */
    
    .box-comment-content .comments-area {
      margin-top: 30px;
      padding-top: 30px;
      border-top: 1px solid rgba(28, 28, 28, .07);
    }
    
    .comment-respond {
      display: none;
      margin-top: 30px;
      opacity: 0;
    }
    
    .block-title-wrap {
      text-align: center;
      display: block;
    }
    
    .comment-title h2 {
      margin-bottom: 20px;
      color: #55acee;
      text-align: center;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 24px;
      line-height: 28px;
    }
    
    .comment-list {
      margin-top: 30px;
      margin-right: 0;
      margin-left: 0;
      list-style: none;
    }
    
    .comment-list li.comment {
      list-style: none;
    }
    
    .comment-list .comment-body {
      position: relative;
      display: block;
      overflow: hidden;
      margin-top: 35px;
    }
    
    .comment-list .comment-author img {
      display: block;
      float: left;
      margin-top: 0!important;
      margin-right: 10px;
      margin-bottom: 0;
      width: 45px!important;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
    }
    
    .comment-author.vcard .fn, .comment-author.vcard .fn a {
      color: #282828;
      text-transform: uppercase;
      font-size: 12px;
    }
    
    .comment-author.vcard .says {
      display: none;
    }
    
    .comment-metadata {
      display: block;
      float: left;
      padding-top: 2px;
      color: #999;
      font-style: italic;
      font-size: 12px;
      line-height: 1;
    }
    
    .comment-metadata a:not(.comment-edit-link) {
      color: #999!important;
    }
    
    .comment-list .comment-content {
      position: relative;
      display: block;
      float: left;
      clear: both;
      margin-top: 15px;
      padding: 20px 15px;
      width: 100%;
      background-color: #fafafa;
      box-shadow: 0 1px 3px 0 rgba(28, 28, 28, .05);
      color: #999;
      -wekit-box-shadow: 0 1px 3px 0 rgba(28, 28, 28, .05);
    }
    
    .comment-list .comment-reply-link {
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      padding: 3px 10px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      background-color: #55acee;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 10px;
      line-height: 9px;
    }
    
    .comment-list .comment-content:before {
      position: absolute;
      top: -6px;
      left: 15px;
      z-index: 10;
      border-right: 5px solid transparent;
      border-bottom: 6px solid #f3f3f3;
      border-left: 5px solid transparent;
      content: '';
      -webkit-transition: all .15s ease-in-out;
      -moz-transition: all .15s ease-in-out;
      -ms-transition: all .15s ease-in-out;
      -o-transition: all .15s ease-in-out;
      transition: all .15s ease-in-out;
    }
    
    .comment-list .comment-content p:last-child {
      margin-bottom: 0;
    }
    
    .comment-list .comment-content p {
      margin-bottom: 10px;
      color: #444;
      font-size: .9em;
      line-height: 1.6;
    }
    
    .box-comment-content .entry ol {
      margin: 0;
    }
    
    .comment-list .edit-link {
      display: inline-block;
      margin-left: 5px;
      color: #55acee
    }
    
    .comment-list .edit-link:before {
      content: '('
    }
    
    .comment-list .edit-link:after {
      content: ')'
    }
    
    #cancel-comment-reply-link {
      margin-left: 7px;
      color: #999;
      letter-spacing: 0;
      font-weight: 400;
      font-size: 12px
    }
    
    #cancel-comment-reply-link:hover {
      color: #282828;
      text-decoration: underline
    }
    
    .depth-2 .comment-body {
      margin-left: 20px
    }
    
    .depth-3 .comment-body {
      margin-left: 40px
    }
    
    .depth-4 .comment-body {
      margin-left: 60px
    }
    
    .depth-5 .comment-body {
      margin-left: 80px
    }
    
    h2.comment-reply-title {
      margin-bottom: 10px;
      color: #55acee;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 18px;
      line-height: 24px;
    }
    
    .comment-form textarea {
      display: block;
      margin-top: 30px;
      width: 100%;
      padding: 20px;
      outline: none!important;
      box-shadow: none;
      border: 1px solid rgba(28, 28, 28, .07);
      color: #282829;
      vertical-align: middle;
      text-align: left;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.5;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
    }
    
    .comment-form input {
      margin-top: 15px;
    }
    
    .comment-form input[type="text"], .comment-form input[type="tel"], .comment-form input[type="email"], .comment-form [type=url], .comment-form [type=password] {
      display: block;
      padding: 10px 20px;
      width: 50%;
      white-space: nowrap;
      outline: 0;
      outline: none!important;
      border: 1px solid #eee;
      box-shadow: none;
      vertical-align: middle;
      text-align: left;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.3;
      -webkit-transition: all .35s ease-in-out;
      -moz-transition: all .35s ease-in-out;
      -ms-transition: all .35s ease-in-out;
      -o-transition: all .35s ease-in-out;
      transition: all .35s ease-in-out;
    }
    
    .box-comment-btn-wrap {
      display:block;
        position: relative;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        padding-top: 30px;
        padding-bottom: 30px;
        border-top: 1px solid rgba(28, 28, 28, .07);
        border-bottom: 1px solid rgba(28, 28, 28, .07);
        margin-top: 20px;
    }
    .bubbly-button {
      display: inline-block;
      font-size: 0.9rem;
      padding: 12px 28px;
      -webkit-appearance: none;
      appearance: none;
      background-color: #ff0081;
      color: #fff;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      position: relative;
      transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
      box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
      z-index: 2;
      -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    }
    .latest-post-news .viewall-text .bubbly-button{
      width: 100%;
      border-radius: 0px;
      margin-top: 20px;
    }
    .bubbly-button:focus {
      outline: 0;
    }
    .bubbly-button:before, .bubbly-button:after {
      position: absolute;
      content: '';
      display: block;
      width: 140%;
      height: 100%;
      left: -20%;
      z-index: -1000;
      transition: all ease-in-out 0.5s;
      background-repeat: no-repeat;
    }
    .bubbly-button:before {
      display: none;
      top: -75%;
      background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
      background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
    }
    .bubbly-button:after {
      display: none;
      bottom: -75%;
      background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
      background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
    }
    .bubbly-button:active {
      transform: scale(0.9);
      background-color: #e60074;
      box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
    }
    .bubbly-button.animate:before {
      display: block;
      animation: topBubbles ease-in-out 0.75s forwards;
    }
    .bubbly-button.animate:after {
      display: block;
      animation: bottomBubbles ease-in-out 0.75s forwards;
    }
    
    @keyframes topBubbles {
      0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
      }
      50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
      }
      100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
      }
    }
    @keyframes bottomBubbles {
      0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
      }
      50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
      }
      100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
      }
    }
    
    /*----------------------------------------------------
    single page navigation
    -------------------------------------------------------- */
    
    .single-nav {
      display: block;
      overflow: hidden;
      margin-top: 30px;
      padding: 30px;
      position: relative;
      background-color: #fff;
      box-shadow: 0 1px 3px 0 rgba(28, 28, 28, .05);
      -wekit-box-shadow: 0 1px 3px 0 rgba(28, 28, 28, .05);
    }
    
    .single-nav .nav-left a {
      color: #282828;
      font-size: 13px;
      padding-right: 20px;
      border-right: 1px solid rgba(0, 0, 0, .02);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      text-align: right;
      transition: all 0.2s ease-in-out;
    }
    
    .single-nav .nav-left a:hover, .single-nav .nav-right a:hover {
      color: #4387d2
    }
    
    .single-nav a:hover>.newspaper-nav-icon {
      background-color: #4387d2;
      color: #fff;
    }
    
    .single-nav .nav-right a {
      color: #282828;
      font-size: 13px;
      margin-left: -1px;
      padding-left: 20px;
      border-collapse: collapse;
      border-left: 1px solid rgba(0, 0, 0, .04);
      text-align: right;
      float: right;
      -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;
    }
    
    .nav-left-icon {
      float: left;
      margin-right: 15px;
    }
    
    .nav-right-icon {
      float: right;
      margin-left: 15px;
      padding-left: 1px;
    }
    
    .nav-left-link {
      float: left;
      text-align: left;
      display: block;
      overflow: hidden;
      max-width: 75%;
    }
    
    .nav-right-link {
      float: right;
      text-align: right;
      display: block;
      overflow: hidden;
      max-width: 75%;
    }
    
    .single-nav a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
      margin: 0;
      padding: 0;
    }
    
    .pagination li a {
      margin-right: 4px;
      margin-left: 4px;
      padding: .3875rem .825rem;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      background-color: #1779ba;
      color: #fff;
      text-align: center;
      font-size: 14px;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
    }
    
    .pagination .current {
      padding: .3875rem .825rem;
      background: #1779ba;
      color: #fefefe;
      cursor: default;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      opacity: 0.8;
    }
    
    .page-navigation {
      display: block;
      clear: both;
      margin-top: 10px;
      margin-bottom: 20px;
      padding: 0 15px;
      width: 100%;
      height: 34px;
      text-align: center;
    }
    
    .single-post-thumb-outer .post-thumb:after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      /*background: rgba(28, 28, 28, .6);*/
      content: '';
      opacity: 1;
    }
    
    /*=============================================>>>>>
    = gallery style =
    ===============================================>>>>>*/
    
    .gallery {
      width: 100%;
      display: inline-block;
    }
    
    .gallery-item {
      float: left;
      padding: 10px;
    }
    
    /*----------------------------------------------------
    Single Page
    -------------------------------------------------------- */
    
    #content-page {
      display: block;
    }
    
    .content-page {
      margin-top: 40px;
      margin-bottom: 40px;
    }
    
    .page_content {
      padding-top: 0px;
      padding-bottom: 0px;
      padding-right: 20px;
      padding-left: 20px;
      display: block;
      overflow: hidden;
      background-color: #fff;
    }
    
    /*----------------------------------------------------
    Page 404
    -------------------------------------------------------- */
    
    .section-404 {
      display: block;
      position: relative;
      overflow: hidden;
      background: #fff;
      padding-top: 30px;
      padding-bottom: 0px;
    }
    
    .hs-line-13 {
      margin-top: 0;
      position: relative;
      font-size: 96px;
      font-weight: 400;
      line-height: 1;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    
    .hs-line-4 {
      margin-top: 0;
      position: relative;
      font-size: 14px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: rgba(49, 46, 46, 0.85);
    }
    
    .hs-wrap {
      max-width: 570px;
      margin: 0 auto;
      padding: 47px 30px 53px;
      position: relative;
      text-align: center;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid rgba(82, 82, 82, 0.5);
    }
    
    .local-scroll .search-submit {
      position: relative;
      display: block;
      float: none;
      width: 50%;
      height: 50px;
      border: 0;
      -webkit-border-radius: 0 4px 4px 0;
      -moz-border-radius: 0 4px 4px 0;
      border-radius: 0 4px 4px 0;
      background-color: #55acee;
      color: #fff;
      font-weight: 700;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
      cursor: pointer;
      margin-right: auto;
      margin-left: auto;
    }
    
    @media print, screen and (min-width: 40em) {
      .section-404 .grid-y.medium-grid-frame {
        width: auto;
        overflow: hidden;
        position: relative;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        height: 60vh;
      }
    }
    
    /*----------------------------------------------------
    Social style #1
    -------------------------------------------------------- */
    
    .social-btns .btn, .social-btns .btn:before, .social-btns .btn .fa {
      transition: all 0.35s;
      transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
    }
    
    .social-btns .btn:before {
      top: 90%;
      left: -110%;
    }
    
    .social-btns .btn .fa {
      transform: scale(0.8);
    }
    
    .social-btns .btn.facebook:before {
      background-color: #3b5998;
    }
    
    .social-btns .btn.facebook .fa {
      color: #3b5998;
    }
    
    .social-btns .btn.twitter:before {
      background-color: #3cf;
    }
    
    .social-btns .btn.twitter .fa {
      color: #3cf;
    }
    
    .social-btns .btn.google:before {
      background-color: #dc4a38;
    }
    
    .social-btns .btn.google .fa {
      color: #dc4a38;
    }
    
    .social-btns .btn.dribbble:before {
      background-color: #f26798;
    }
    
    .social-btns .btn.dribbble .fa {
      color: #f26798;
    }
    
    .social-btns .btn.skype .fa {
      color: #00aff0;
    }
    
    .social-btns .btn.skype:before {
      background-color: #00aff0;
    }
    
    .social-btns .btn.pinterest .fa {
      color: #cb2027;
    }
    
    .social-btns .btn.pinterest:before {
      background-color: #cb2027;
    }
    
    .social-btns .btn.linkedin .fa {
      color: #007bb6;
    }
    
    .social-btns .btn.linkedin:before {
      background-color: #007bb6;
    }
    
    .social-btns .btn.youtube .fa {
      color: #bb0000;
    }
    
    .social-btns .btn.youtube:before {
      background-color: #bb0000;
    }
    
    .social-btns .btn.vimeo .fa {
      color: #1ab7ea;
    }
    
    .social-btns .btn.vimeo:before {
      background-color: #1ab7ea;
    }
    
    .social-btns .btn.tumblr .fa {
      color: #32506d;
    }
    
    .social-btns .btn.tumblr:before {
      background-color: #32506d;
    }
    
    .social-btns .btn.instagram .fa {
      color: #bc2a8d;
    }
    
    .social-btns .btn.instagram:before {
      background-color: #bc2a8d;
    }
    
    .social-btns .btn.flickr .fa {
      color: #bc2a8d;
    }
    
    .social-btns .btn.flickr:before {
      background-color: #bc2a8d;
    }
    
    .social-btns .btn.vk .fa {
      color: #45668e;
    }
    
    .social-btns .btn.vk:before {
      background-color: #45668e;
    }
    
    .social-btns .btn.xing .fa {
      color: #026466;
    }
    
    .social-btns .btn.xing:before {
      background-color: #026466;
    }
    
    .social-btns .btn:focus:before, .social-btns .btn:hover:before {
      top: -10%;
      left: -10%;
    }
    
    .social-btns .btn:focus .fa, .social-btns .btn:hover .fa {
      color: #fff;
      transform: scale(1);
    }
    
    .social-btns {
      margin: auto;
      font-size: 0;
      text-align: center;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    
    .social-btns .btn {
      display: inline-block;
      background-color: #fff;
      width: 30px;
      height: 30px;
      line-height: 30px;
      margin: 0 5px;
      text-align: center;
      position: relative;
      overflow: hidden;
      border-radius: 28%;
      box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
      opacity: 0.99;
    }
    
    .social-btns .btn:before {
      content: '';
      width: 120%;
      height: 120%;
      position: absolute;
      transform: rotate(45deg);
    }
    
    .social-btns .btn .fa {
      font-size: 26px;
      vertical-align: middle;
    }
    
    /*=============================================>>>>>
    = featured =
    ===============================================>>>>>*/
    .featured-section{
      margin-bottom: 20px;
    }
    .slider-post-wrap {
      position: relative;
      display: none;
      overflow: hidden;
      background-color: transparent;
      opacity: 0
    }
    .slider-post-wrap.featured .slider-content2 {
      position: absolute;
        top: 50%;
        left: 0;
        text-align: center;
        width: 100%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    .slider-post-wrap.featured .entry-meta {
        display: inline-block;
        padding: 40px 10px;
        width: calc(100% - 50px);
        background: rgba(0, 0, 0, .5);
    }
    .slider-post-wrap.featured .entry-meta h3{
      font-size: 16px;
    }
    .slider-post-wrap.featured .entry-meta h3 a{
      color: #fff;
    }
    
    .wrap-slider {
      position: relative;
    overflow: hidden;
    }
    
    .featured .slider-thum {
      height: 300px;
    }
    .slider-thum .img-slider{
      width: 100%;
      -o-object-fit: cover;
       object-fit: cover;
       object-position: center center;
       height: 300px;
    }
    
    .featured .slider-title{
        color: #fff;
        padding: 10px;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        display: inline-block;
        background-color: transparent;
          width: 100%;
          font-weight:bold;
    }
    
    /*----------------------------------------------------
    common css
    -------------------------------------------------------- */
    
    .thumbnail-resize img {
      -webkit-filter: brightness(100%);
      -moz-filter: brightness(100%);
      -o-filter: brightness(100%);
      -ms-filter: brightness(100%);
      filter: brightness(100%);
      -webkit-transition: all 0.8s;
    }
    
    .thumbnail {
      margin: 0;
      border: none;
    }
    
    .block-content-wrap:hover .thumbnail-resize a img {
      -webkit-filter: brightness(50%);
      -moz-filter: brightness(50%);
      -o-filter: brightness(50%);
      -ms-filter: brightness(50%);
      filter: brightness(50%);
    }
    .layout3-post:hover .thumbnail-resize a img {
      -webkit-filter: brightness(20%);
      -moz-filter: brightness(20%);
      -o-filter: brightness(20%);
      -ms-filter: brightness(20%);
      filter: brightness(20%);
    }
    .post-wrap {
      position: relative;
      display: block;
      overflow: hidden;
      margin-right: 15px;
      margin-bottom: 30px;
      margin-left: 15px;
      background-color: #fff;
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
    }
    
    .cat-info-el {
      position: relative;
      display: block;
      float: left;
      margin-top: 1px;
      margin-bottom: 1px;
      margin-left: 5px;
      padding: 2px 12px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      background-color: #55acee;
      color: #fff;
      text-shadow: none;
      line-height: 20px;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
      pointer-events: auto
    }
    
    .post-cat-info a {
      color: #fff;
    }
    
    .post-title a {
      display: block;
      margin: 0;
      padding: 0;
      -webkit-transition: color .3s ease-in-out;
      -moz-transition: color .3s ease-in-out;
      -ms-transition: color .3s ease-in-out;
      -o-transition: color .3s ease-in-out;
      transition: color .3s ease-in-out
    }
    
    .post-title {
      margin-bottom: 0px;
    }
    
    .post-title.is-size-1 {
      font-weight: 700;
    }
    
    .post-title.is-size-2 {
      font-weight: 700;
    }
    
    .post-title.is-size-3 {
      font-size: 24px;
      font-weight: 600;
    }
    
    .post-title.is-size-4 {
      font-size: 18px;
      font-weight: 600;
    }
    
    .post-title.is-size-5 {
      font-size: 14px;
      font-weight: 600;
    }
    
    .post-title.is-size-6 {
      font-size: 13px;
      font-weight: 600;
    }
    
    .meta-info-el {
      display: inline;
      vertical-align: middle;
      line-height: inherit
    }
    
    .is-absolute {
      position: absolute!important;
      z-index: 4;
    }
    
    .post-meta-info {
      color: #999;
      font-size: 12px;
      padding-top: 10px;
    }
    
    .post-meta-info-left {
      display: inline-block;
    }
    
    .post-meta-info .meta-info-author .author.is-lite, .post-meta-info .meta-info-author .date.is-lite {
      color: #fff;
      font-weight: 600;
    }
    
    .is-lite a {
      color: #fff;
    }
    
    .post-meta-info .meta-info-author .author {
      color: #737272;
      font-weight: 600;
      font-size: 13px;
    }
    
    .cat-info-el:hover {
      background-color: #2f2f2f;
    }
    
    .meta-info-date {
      color: #fff;
      display: inline;
      overflow: hidden;
    }
    
    .post-meta-info-left .post-meta-info a {
      display: inline-block;
    }
    
    .post-thumb-overlay {
      position: absolute;
      top: 45%;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(30%, rgba(0, 0, 0, .2)), color-stop(100%, rgba(0, 0, 0, .75)));
      background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 100%);
      background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 100%);
      background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 100%);
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 100%);
      pointer-events: none;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden
    }
    
    .post-thumb.is-bg-thumb {
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%
    }
    
    .thumbnail-resize {
      position: relative;
      display: block;
      overflow: hidden;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 0
    }
    
    .object-fit-img {
      object-fit: cover;
      object-position: center;
      font-family: 'object-fit: cover; object-position: center ';
    }
    
    .object-fit-postimg {
      max-width: 100%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      height: 300px;
    }
    
    .object-fit-postimg_250 {
      max-width: 100%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      height: 250px;
    }
    
    .newspaper-nav-icon {
      display: inline-block;
      width: 30px;
      height: 30px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      background: #efefef;
      vertical-align: middle;
      text-align: center;
      font-size: 16px;
      line-height: 30px;
      -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;
    }
    
    .margin-horizontal {
      margin-right: 1rem;
      margin-left: 1rem;
    }
    
    .center-conetent {
      margin: 0 auto;
      justify-content: center;
      display: flex;
    }
    
    .woocommerce .woocommerce-breadcrumb a {
      opacity: 1;
    }
    
    .woocommerce .breadcrumbs li:last-child {
      font-weight: 800;
    }
    
    .breadcrumb-wraps {
      margin-top: 20px;
    }
    
    .single .breadcrumbs a, .single .breadcrumbs li:not(:last-child)::after {
      color: #989898;
    }
    
    .breadcrumb-wraps .breadcrumbs li {
      font-size: .7875rem;
      color: #f00;
    }
    
    .breadcrumb-wraps .breadcrumbs .current {
      color: #ffffff;
    }
    
    .z-depth-2 {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 3px 10px 0 rgba(0, 0, 0, .09)
    }
    
    .z-depth-3 {
      box-shadow: 0 6px 7px 0 rgba(0, 0, 0, .12), 0 17px 50px 0 rgba(0, 0, 0, .08)
    }
    
    .z-depth-4 {
      box-shadow: 0 8px 14px 0 rgba(0, 0, 0, .11), 0 12px 27px 0 rgba(0, 0, 0, .1)
    }
    
    .no-padding {
      padding-right: 0px;
      padding-left: 0px;
    }
    
    .floating-action.button {
      overflow: hidden;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      padding: .7rem;
      margin: 0;
      background-color: #00bcd4;
    }
    
    .floating-action.button .fa {
      font-size: 36px;
    }
    
    .cell.addwidgets-warp {
      display: inline-block;
      overflow: hidden;
      padding: 0;
      border: 4px dotted #d4d2d2;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .13), 0 1px 5px 0 rgba(0, 0, 0, .08);
      margin-right: 10px;
    }
    
    /*=============================================>>>>>
    = woocommerce =
    ===============================================>>>>>*/
    
    .woocommerce .woocommerce-breadcrumb {
      margin-bottom: 0px;
    }
    
    .related>h2:first-child, .upsells>h2:first-child {
      font-size: 1.618em;
      margin-bottom: 1em;
    }
    
    .woocommerce-tabs .panel h2:first-of-type {
      font-size: 1.618em;
      margin-bottom: 1em;
    }
    
    .single-product .woocommerce-product-gallery--with-images {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 3px 10px 0 rgba(0, 0, 0, .09)
    }
    
    .woocommerce div.product form.cart .button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      padding: 12px 17px 12px;
      background-color: #00bcd4;
      display: inline-block;
      border-radius: 3px;
    }
    
    .woocommerce ul.products li.product .button::before, button.single_add_to_cart_button::before {
      content: "\f217";
      display: inline;
      font-family: FontAwesome;
      margin-right: 10px;
    }
    
    .woocommerce .quantity .qty {
      border: 3px solid #dddddd;
      height: 38px;
      text-align: center;
      width: 70px;
      margin-right: 15px;
    }
    
    .woocommerce ul.products li.product .button, .easy-commerce-woocommerce ul.products li.product .button {
      line-height: 1.5;
      margin: 10px auto 20px;
      padding: .5em .7em;
      position: relative;
      border: 0;
      text-align: center;
      display: inline-block;
      background-color: #00bcd4;
      color: #fff;
    }
    
    .woocommerce div.product .product_title {
      clear: none;
      font-size: 28px;
      margin: 0 0 15px;
      padding: 0;
      border-bottom: 1px double #ebe9eb;
    }
    
    h1.entry-title::after {
      content: "";
      display: block;
      height: 2px;
      background: #00bcd4;
      width: 50px;
      bottom: -1px;
      margin-top: 0px;
    }
    
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .13), 0 1px 5px 0 rgba(0, 0, 0, .08);
      background-color: #fff;
    }
    
    .woocommerce ul.products li.product a, .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3, .woocommerce ul.products li.product .price, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
      color: #3C4858;
    }
    
    .woocommerce ul.products li.product .star-rating {
      font-size: .857em;
      margin-right: auto;
      margin-left: auto;
    }
    
    .woocommerce-cart .quantity .qty {
      margin: 0 auto;
    }
    
    .woocommerce table tbody tr:nth-child(2n) {
      background-color: #fff
    }
    
    .woocommerce-cart table.cart td {
      text-align: center;
      padding-top: 20px;
      padding-bottom: 20px;
      border-right: 1px solid #eee;
    }
    
    .woocommerce table.shop_table th {
      font-weight: normal;
      padding: 6px 12px;
      font-size: 16px;
      text-align: center;
    }
    
    .woocommerce .cart_totals h2 {
      margin-bottom: 30px;
      border-bottom: 1px solid #eee;
      font-size: 24px;
      padding-bottom: 15px;
      position: relative;
      text-transform: uppercase;
      text-align: left;
    }
    
    .woocommerce .cart_totals h2:after {
      content: "";
      width: 160px;
      border-bottom: 1px solid #00bcd4;
      left: 0;
      bottom: -1px;
      position: absolute;
    }
    
    .woocommerce table.shop_table tbody tr td.actions .coupon .input-text {
      height: 40px;
      width: 150px !important;
      margin: 0 20px 5px 0;
      background: none;
    }
    
    .woocommerce .button {
      -webkit-transition: -webkit-box-shadow .25s;
      transition: -webkit-box-shadow .25s;
      transition: box-shadow .25s;
      transition: box-shadow .25s, -webkit-box-shadow .25s;
      -webkit-transition: .3s ease-out;
      transition: .3s ease-out;
    }
    
    .woocommerce .button:hover {}
    
    .woocommerce div.product form.cart {
      margin: 36px 0px 0px 0px;
    }
    
    .woocommerce div.product form.cart .variations, .woocommerce #content div.product form.cart .variations {
      margin: 0;
      width: 100%;
      table-layout: fixed;
    }
    
    .woocommerce .variations_form.cart .variations tbody {
      border: none;
    }
    
    .woocommerce div.product form.cart .variations td.label, .woocommerce #content div.product form.cart .variations td.label {
      padding: 0px 18px 0px 0px;
      background-color: transparent;
      font-weight: 600;
      min-width: 80px;
      position: relative;
      overflow: hidden;
      margin-top: -20px;
    }
    
    .woocommerce div.product form.cart .variations select, .woocommerce #content div.product form.cart .variations select {
      width: 100%;
      margin: 0px 0px 0px 0px;
    }
    
    .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
      width: 100%;
    }
    
    .single-product .product_meta {
      padding-top: 20px;
      padding-bottom: 20px;
      border-top: 1px solid #eaeaea;
      padding-right: 5px;
      padding-left: 10px;
      margin-top: 20px;
    }
    
    .single-product .product_meta span {
      display: table;
      table-layout: fixed;
    }
    
    .single-product .product_meta span>* {
      padding-left: 5px;
    }
    
    .single-product .product_meta span span {
      display: inline-block;
      table-layout: auto;
    }
    
    .woocommerce nav.woocommerce-pagination {
      border-radius: 0;
      display: block;
      height: 50px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .shop-warp {
      margin-top: 40px;
      margin-bottom: 40px;
    }
    
    .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
      margin-right: 4px;
      margin-left: 4px;
      padding: .3875rem .825rem;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      line-height: inherit;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
    }
    
    .woocommerce nav.woocommerce-pagination ul li, .woocommerce nav.woocommerce-pagination ul {
      border: none;
      padding: inherit;
      margin: auto;
      overflow: inherit;
    }
    
    /*
    ------------------------------------
    Code For Mobile device CORE
    ------------------------------------
    */
    
    /*======== Media Queries for Standard Devices ========*/
    
    /* Portrait */
    
    @media print, screen and (min-width: 320px) and (max-width: 1024px) and (orientation: portrait) {
      #header-top .off-canvas-wrapper {
        display: block;
      }
      /*===General===*/
      body .fullWidth {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width: initial;
        padding: 0px;
      }
      /*===Header===*/
      #site-title .site-title, .site-title a {
        font-size: 90% !important;
      }
      .mobile-menu .logo a img {
        width: 70%;
      }
      #site-title .site-title, .site-title {
        margin: 0px !important;
      }
      #topmenu .top-bar .top-bar-left .menu {
        text-align: center;
        display: inline-block;
        width: 100%;
      }
      #topmenu .top-bar .top-bar-left .menu li {
        display: inline-block
      }
      #topmenu .top-bar .top-bar-left .menu a {
        padding-right: 5px;
        padding-left: 5px;
      }
      .top-bar .social-btns {
        text-align: center;
      }
      #topmenu .top-bar, #topmenu .top-bar ul {
        padding: 0px 5px 5px 5px;
        background-color: transparent;
      }
      #header-top .head-bottom-area, #header-top .head-top-area {
        display: none;
      }
      /*===Widgets===*/
      .lates-post-warp, .no-homesidebar .lates-post-warp {
        width: 100%;
        display: block;
        padding-right: .10rem;
        padding-left: .10rem;
      }
      .lates-post-blogbig .post-body {
        margin-right: 10px;
        margin-left: 10px;
      }
      .grid-container.small-full {
        padding-right: 0;
        padding-left: 0;
        max-width: 100%;
        margin: 0 auto;
      }
      .sidebar-inner {
        padding-right: 0px;
        padding-left: 0px;
      }
      .top-footer-wrap .sidebar-footer {
        padding-right: .625rem;
        padding-left: .625rem;
      }
    
      .single-post-header {
        padding-bottom: 20px;
      }
      .single-content-wrap {
        padding: 10px 20px 30px 20px;
      }
    
      .margin-horizontal {
        margin-right: auto;
        ;
        margin-left: auto;
      }
      .no-homesidebar .lates-post-blog {
        display: block;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
      }
      .flexslider .flex-control-thumbs .image {
        height: 50px;
      }
      #top-content {
        padding-top: 0px;
        padding-bottom: 10px;
      }
      #top-content .flexslider {
        margin-top: 15px;
        margin-bottom: 15px;
      }
      .top-bar .float-center-small {
        display: block;
        margin-right: auto;
        margin-left: auto;
        margin-top: 20px;
        max-width: fit-content;
      }
      .lates-post-blogbig .post-body {
        margin-top: -30px;
      }
      .heade-content {
        padding-top: 30px;
        padding-bottom: 0px;
      }
    
    }
    
    /* !!! Portrait !!! */
    
    /* Landscape */
    
    @media print, screen and (min-width: 568px) and (max-width: 1024px) and (orientation: landscape) {
      /*===General===*/
      body .fullWidth {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width: initial;
        padding: 0px;
      }
      /*===Header===*/
      .mobile-menu .logo a img {
        width: 70%;
      }
      #site-title .site-title, .site-title a {
        font-size: 90% !important;
      }
      #site-title .site-title, .site-title {
        margin: 0px !important;
      }
      #header-top .off-canvas-wrapper {
        display: block;
      }
      #header-top .head-bottom-area, #header-top .head-top-area {
        display: none;
      }
      /*===Widgets===*/
      .no-homesidebar .lates-post-warp {
        width: 50%;
      }
      .lates-post-blogbig .post-body {
        margin-right: 10px;
        margin-left: 10px;
      }
      .grid-container.small-full {
        padding-right: 0;
        padding-left: 0;
        max-width: 100%;
        margin: 0 auto;
      }
    
      .single-content-wrap {
        padding: 20px 20px 40px 20px;
      }
      .single-post-header {
        padding-bottom: 20px;
      }
      .margin-horizontal {
        margin-right: auto;
        ;
        margin-left: auto;
      }
      .no-homesidebar .lates-post-blog {
        display: block;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
      }
      .flexslider .flex-control-thumbs .image {
        height: 60px;
      }
      #top-content .flexslider {
        margin-top: 15px;
        margin-bottom: 15px;
      }
      #top-content {
        padding-top: 0px;
        padding-bottom: 10px;
      }
      .top-bar .float-center-small {
        display: block;
        margin-right: auto;
        margin-left: auto;
        margin-top: 20px;
        max-width: fit-content;
      }
      .lates-post-blogbig .post-body {
        margin-top: -30px;
      }
    }
    
    /*----------- Ipad portrait -----------*/
    
    @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
      .lates-post-warp, .no-homesidebar .lates-post-warp {
        width: 50%;
        display: block;
        padding-right: .10rem;
        padding-left: .10rem;
      }
      #header-top .off-canvas-wrapper {
        display: block;
      }
      .lates-post-blogbig .post-body {
        margin-top: -30px;
      }
      .mobile-menu .logo a img {
        width: 70%;
      }
    }
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : landscape) {
      #header-top .off-canvas-wrapper {
        display: block;
      }
    }
    /* !!!! Landscape !!! */
    
    /* ----------- Retina Screens ----------- */
    
    @media print, screen and (min-width: 40em) {
      .slider-right .post-wrap {
        height: 300px;
      }
    
    }
    
    @media print, screen and (min-width: 64em) {
      /*===Header===*/
      #header-top .off-canvas-wrapper {
        display: none;
      }
      /*===Content===*/
      #top-content {
        padding-top: 0px;
        padding-bottom: 16px;
      }
      .slider-right .post-wrap {
        height: 300px;
      }
    
      .nopadding-left {
        margin-left: 0px !important;
      }
      .lates-post-blog {
        margin-left: .9rem;
      }
      .margin-right-post {
        margin-right: .9rem;
      }
      .no-homesidebar .lates-post-blog {
        padding-left: 0;
      }
      .no-homesidebar .lates-post-blogbig .block-content-wrap, .no-homesidebar .lates-post-blogbig .block-header-wrap {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
      }
      .sidebar-inner {
        padding-left: 0px;
        padding-right: 15px;
        padding-left: 25px;
      }
      .home-sidebar.sidebar-inner {
        padding-left: 20px;
        padding-right: 20px;
      }
      .no-homesidebar .lates-post-warp {
        width: 33%;
      }
      /*===Text size===*/
      .post-title.is-size-1 {
        font-size: 36px;
        font-weight: inherit;
      }
      .post-title.is-size-2 {
        font-size: 30px;
        font-weight: inherit;
      }
      .is-size-2 {
        font-size: 30px;
        font-weight: inherit;
      }
      .post-title.is-size-3 {
        font-size: 24px;
        font-weight: 600;
      }
      .post-title.is-size-4 {
        font-size: 21px;
        font-weight: 600;
      }
      .post-title.is-size-5 {
        font-size: 14px;
        font-weight: 600;
      }
      .post-title.is-size-6 {
        font-size: 13px;
        font-weight: 600;
      }
      .shop-warp {
        margin-top: 60px;
        margin-bottom: 40px;
      }
      .columns-3 .woocommerce ul.products li.product, .woocommerce-page .columns-3 ul.products li.product {
        width: 30%;
      }
    }
    
    .single-post-tag a, .single-post-tag a:visited, .single-post-tag a:active { 
    background:#6f31e1;
    border:1px solid #ffffff;
    border-radius:5px;
    text-decoration:none;
    padding:3px;
    margin:3px;
    text-transform:uppercase;
    }
    
    .single-post-tag a:hover { 
    background:#dd3333;
    color:#FFF;
    }
    
    /*== END ===*/
    
    • Тема изменена 5 лет, 5 месяцев назад пользователем Yui. Причина: для оформления кода есть кнопочка code
  • Тема «Меню меняет цвет при наведении — как сделать?» закрыта для новых ответов.