/* ToC - Table of Contents
  - variables & colors
  - basics
  - fonts
  - navbar
  - sections
  - items
  - footer
  - others
  - article
  - sidebar
*/


// variables & colors
  @import 'scss/bootstrap';
  $dist: $grid-gutter-width;

  $c-border: rgba(#000, 0.05);

  $c-white: #fff;
  .c-white, .l-white a, .lh-white a:hover{ color: $c-white }

  $c-black: #000;
  .c-black, body, .l-black a, .lh-black a:hover{ color: $c-black }
  .bg-black, .bgh-black:hover{ background-color: $c-black }

  $c-1: #FF4849; //#d6605e;
  .c-1, .l-1 a, .lh-1 a:hover{ color: $c-1 }
  .bg-1, .bgh-1:hover{ background-color: $c-1 }

  $c-2: #3D3F53;
  .c-2, .l-2 a, .lh-2 a:hover{ color: $c-2 }
  .bg-2, .bgh-2:hover{ background-color: $c-2 }

  $c-meta: #bbb;
  .c-meta, .l-meta a, .lh-meta a:hover{ color: $c-meta }
  .bg-meta, .bgh-meta:hover{ background-color: $c-meta }

  $c-text: #555;
  .c-text, .l-text a, .lh-text a:hover{ color: $c-text }

  .bg-light{ background: #f2f2f2 !important }

  ::selection { background: #000  !important; color: #fff; }
// end

// basics

  // transition
    @mixin transition(){
      -o-transition: all 0.15s ease-in-out;
      -webkit-transition: all 0.15s ease-in-out;
      -moz-transition: all 0.15s ease-in-out;
      transition: all 0.15s ease-in-out;
    }
    .transition{ @include transition() }
  // end

  // background-mixin
    @mixin bg($padding){
      padding-top: $padding;
      background-size: cover;
      background-position: center;
      position: relative;

    }
  // end

  // zoom
    .zoom{
      max-width: 100%;
      overflow: hidden;
      position: relative;
      .img{
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        -moz-transform: scale(1.025);
        -webkit-transform: scale(1.025);
        transform: scale(1.025);
        &:after{
          content: '';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 1;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          opacity: .5;
          @include transition();
          background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, #000 100%);
          background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, #000 100%);
          background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, #000 100%);
        }
      }
      &:hover .img{
        -moz-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        &:after {
          opacity: .75;
        }
      }
    }
  // end

  a,a:hover{ text-decoration: none; @include transition(); }
  .w-minus{ margin-bottom: -100px; }
  .section{ margin: 100px 0; }
  html,body{
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    overflow-x:hidden; }
// end

// fonts
  $f-title: 'Heebo', sans-serif;
  $f-meta: 'Oswald', sans-serif;
  $f-text: 'Open Sans', sans-serif;

  // title
    h1,h2,h3,h4,h5,h6,.f-title,
    .h1,.h2,.h3,.h4,.h5,.h6,
    .t-sm{
      font-family: $f-title;
      font-weight: normal
    }

    .t-lg,.t-xl,.t-md,.t-sm{ -ms-word-wrap: break-word; word-wrap: break-word; }

    .t-xl  { font-size: 48px; letter-spacing: -.015em }
    .t-lg  { font-size: 40px; letter-spacing: -.015em }
    .t-md { font-size: 28px; letter-spacing: -.015em }
    .t-sm  { font-size: 18px; letter-spacing: -.015em }

    // smaller than large
      @include media-breakpoint-down(lg) {
        h1,.h1{font-size: 40px;}
        h2,.h2{font-size: 20px;}

        .t-xl { font-size: 40px; }
        .t-md { font-size: 20px; }
        .lead { font-size: 20px; }
      }

    // smaller than medium
      @include media-breakpoint-down(md){
        .t-xl,
        .t-lg  { font-size: 20px; }
        .lead{ font-size: 16px; }
      }

  // end

  html,body,p,.f-text{
    font-family: $f-text
  }

  .f-meta{
    font-family: $f-meta
  }
// end

// navbar
  .admin-bar{
    .fixed-top{ top: 32px; }
    @media screen and (max-width: 782px) { .fixed-top{ top: 46px; } }
    @media screen and (max-width: 601px) { .fixed-top{ top: 46px; position: absolute; } }
  }
  nav.w-header-nav{
    max-height: 53px;
    height: 53px;
    text-transform: uppercase;
    .dropdown-item.active, .dropdown-item:active{
      background: transparent !important;
    }

    // gradient
      &.gradient{
        background-color: transparent !important;
        background: linear-gradient(
          to bottom,
          rgba($c-black,.75) 0,
          transparent 100%);
        @include transition();
      }
    // end

    // logo
      .navbar-brand{
        height: 53px;
        position: relative;
        text-transform: uppercase;
        line-height: 50px;
        &:after{
          content:"";
          position: absolute;
          left: 100%;
          top: 0;
          border-style: solid;
          border-width: 53px 15px 0 0;
          border-color: $c-1 transparent transparent transparent;
        }
        &.biglogo{ display: none }
      }
    // end

    // form
      form{
        width: 280px;
        max-width: 100%;
      }
    // end

    // megamenu
      li.weart-megamenu:hover{
        &>.weart-megamenu{ display: block; }
      }
      div.weart-megamenu{
        position: absolute;
        left: 0;
        width: 100%;
        top: calc(100% - .5rem);
        top: 100%;
        display: none;
        .img{
          @include bg(50%);
        }
      }
    // end

    // dropdown
      ul{
        .dropdown > a{ @extend .dropdown-toggle }
        .dropdown-menu{ margin-top: 0; }
        li:hover ul{ display: block; text-transform: none; font-size: 14px }
        & > li{
          & > a{
            padding-top: 0;
            padding-bottom: 0;
            max-height: 53px;
            height: 53px;
            align-items: center;
            display: flex;
          }
        }
      }
      li li{
        position: relative;
        ul{ display: none !important; }
        a{
          height: auto;
          padding: 7.5px 10px;
        }
        &:hover > ul{
          position: absolute !important;
          left: 100%;
          top: calc( -.5rem - 1px );
          display: block !important;
        }
      }
    // end

  }
  .divider{ height: 53px; width: 100% }
  #mobile-menu{
    position: fixed;
    text-transform: uppercase;
    display: none;
    font-size: 14px;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    width: 100%; height:100%;
    background: rgba($c-black, .66);
    .inner{
      width: 100%;
      max-width: 350px;
      height: 100%;
    }
    .w-menu{
      max-height: calc(100% - 1.5rem * 2 - 40px);
      overflow: auto;
      ul{
        margin: 0; padding: 0;
        list-style: none;
        li{
          margin: 0;
          @extend .border-top;
          a{
            padding: 0 10px;
            display: block;
            @extend .py-2;
          }
          position: relative;
          a.expand{
            position: absolute;
            right: 0; top: 0;
            line-height: 22px;
            max-width: 50px;
            display: block;
          }
        }
        ul{ display: none; background: rgba(#000,0.025); }
      }
    }
    .social-channels{
      list-style: none;
      margin: 0; padding: 0;
      text-align: center;
      display: flex !important;
      justify-content: center;
      li{
        padding: 0; margin: 0 10px 0 0; display: block;
        &:last-of-type{ margin-right: 0; }
        a{
          @extend .bg-black;
          display: block;
          border-radius: 50%;
          line-height: 40px;
          width: 40px;
          text-align: center;
        }
      }
    }
  }
// end

// sections

  // main slider2
    .featured2{
      .img{
        @include bg(60%);
      }


    }
  // end

  // featured
    .featured1{
      position: relative;
      .border-top, .border-right{
        border-color: rgba(#fff, .25) !important;
      }
      // inner
        .carousel-inner{
          .img{
            @include bg(600px);
            width: 100%;
            &:after{
              content: '';
              display: block;
              width: 100%;
              height: 100%;
              position: absolute; z-index: 1;
              top: 0; right: 0; bottom: 0; left: 0;
              background: rgba($c-black,.25);
            }
          }//img
          .innertext{
            text-align: center;
            position: absolute;
            z-index: 1;
            bottom: 0; left: 0; right: 0; top: 0;
            width: 100%; height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-shadow: 0 0 10px rgba($c-black,.75);
          }//innertext
        }
      // end

      // indicator
        .indicators{
          position: absolute;
          bottom: 0; left: 0; right: 0;
          width: 100%; z-index: 2;
            background: linear-gradient(
              to top,
              rgba($c-black,.75) 25%,
              rgba($c-black,.5) 50%,
              rgba($c-black,.25) 75%,
              rgba($c-black,.0));
          .carousel-indicators{
            position: relative;
            bottom: 0;
            margin: 0 -15px; padding: 0;
            .col-3{
              display: block !important;
              background: transparent;
              opacity: 0.5;
              margin: 0; padding: 0;
              .progress{ opacity: 0; .progress-bar{
                -webkit-transition: width 5s linear;
                -moz-transition: width 5s linear;
                -o-transition: width 5s linear;
                transition: width 5s linear;
                width: 0%;
              }}
              &:hover{ cursor: pointer; cursor: hand; }
              &.active{
                opacity: 1;
                .progress{ opacity: 1; }
                .progress-bar{ width: 100% }
              }//.active
            }//.col-3
          }//.carousel indicator
        }//.indicators
      // end

    }
  // end

  // video
    .video{
      // inner
        .carousel-inner{
          margin-top: -$dist/2;
          margin-bottom: -$dist/2;
        }
      // end

      // indicator
        .w_section_title{ margin-bottom: 0 !important; .title:after{ display: none; } }
        .carousel-indicators{
          position: static;
          margin: 0; padding: 0;
          .ind{
            width: 100%;
            opacity: .5;
            background: transparent;
            .progress{ opacity: 0; .progress-bar{
              -webkit-transition: width 5s linear;
              -moz-transition: width 5s linear;
              -o-transition: width 5s linear;
              transition: width 5s linear;
              width: 0%;
            }}
            &:hover{
              cursor: pointer; cursor: hand;
              border-color: rgba($c-white, .5) !important;
              opacity: 1; @include transition() }
            &.active{
              opacity: 1;
              .progress{ opacity: 1; }
              .progress-bar{ width: 100% }
              border-color: rgba($c-white, .5) !important;
            }//.active
          }/* ind */
        }/* carousel-indicators */
      // end
    }
  // end

  // w-list
    .w-list{
      .w-list-item{
        border-bottom: 1px solid $c-border;
        position: relative;
        .num{
          position: absolute;
          font-size: 50px;
          font-style: italic;
          font-weight: bold;
          z-index: -1;
          top: 15px;
          left: -15px;
        }
        &:last-of-type{
          padding-bottom: 0 !important;
          margin-bottom: 0 !important;
          border-bottom: 0; }
      }
    }
  // end

  // w-latest
    .w-latest{

      .w-latest-title{
        border-bottom: 2px solid $c-1;
        margin-bottom: 2px;
        text-transform: uppercase;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        &>*{
          padding: 3px 10px;
          display: block;
          display: inline-flex;
          height: 28px;
          padding: 0 10px;
          align-items: center;
        }
      }

      .w-latest-item{
        display: block;
        margin-bottom: 2px;
        padding: 10px;
        .title{
          font-size: 1rem !important;
          margin: 0; padding: 0;
        }/* title */
        .bdg{
          display: inline-flex;
          height: 25px;
          padding: 0 10px;
          margin-bottom: 10px;
          align-items: center;
          position: relative;
          &:after{
            content: '';
            display: block;
            position: absolute;
            z-index: 1;
            top: 0;
            right: -10px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 25px 10px 0 0;
            border-color: $c-2 transparent transparent transparent;
          }
        }/* bdg */
      }/* w-latest-item */
    }
  // end

  // w-latest2
    .latest2{
      .img{
        @include bg(75%);
      }
    }
  // end

// end

// items
  // normal
    .w_article_normal{
      .featured-img{
        @include bg(56.5%);
        display: block;
      }
      // format icons
        &.format-video,
        &.format-gallery,
        &.format-audio{
          .featured-img{
            position: relative;
            &:before{
              font-family: 'Font Awesome 5 Free';
              position: absolute;
              z-index: 1;
              line-height: 1;
              top: $dist/2;
              left: $dist/2;
              font-size: 30px;
              color: $c-white;
            }
          }
        }
        &.format-video .img:before{ content: '\f144';  }
        &.format-gallery .img:before{ content: '\f302';  }
        &.format-audio .img:before{ content: '\f025';  }
      // end
      .margin-top{
        margin-top: -80px;
        position: relative;
        z-index: 4;
      }
      .title{
        max-width: 90%;
        span{
          display: inline;
          padding: 1px 10px 1px 0;
          display: inline;
          -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
        }
      }
      .w-meta,p{ margin: 0; }
      &.sticky{ .title span{ background: $c-2 !important; color: $c-white !important; padding-left: 10px; } }
    }
  // end

  // inner
    .w_article_inner{
      position: relative;
      // format icons
        &.format-video,
        &.format-gallery,
        &.format-audio{
          .img{
            position: relative;
            &:before{
              font-family: 'Font Awesome 5 Free';
              position: absolute;
              z-index: 1;
              line-height: 1;
              top: $dist;
              left:$dist;
              font-size: 100px;
              color: $c-white;
            }
          }
        }
        &.format-video .img:before{ content: '\f144';  }
        &.format-gallery .img:before{ content: '\f302';  }
        &.format-audio .img:before{ content: '\f025';  }
      // end
      .img{
        width: 100%;
        @include bg(500px);
      }/* img */
      .innertext{
        position: absolute;
        z-index: 3;
        bottom: 0; left: 0; right: 0;
        background: linear-gradient(to top, rgba(#000, .75) 0%,transparent 100%);
        .title{ max-width: 90%; }
        padding: 0 0 $dist $dist;
      }/* innertext */
    }
  // end

  // w_article_listIMG
    .w_article_listIMG{

      // format icons
        &.format-video,
        &.format-gallery,
        &.format-audio{
          .img{
            position: relative;
            &:before{
              font-family: 'Font Awesome 5 Free';
              position: absolute;
              z-index: 1;
              line-height: 0px;
              top: 50%;
              left: calc(50% - 15px);
              font-size: 30px;
            }
          }
        }
        &.format-video .img:before{ content: '\f144';  }
        &.format-gallery .img:before{ content: '\f302';  }
        &.format-audio .img:before{ content: '\f025';  }
      // end

      &.row{
        padding: $dist/2-5 0 $dist/2;
        .img{
          @include bg(100%);
          width: 100%;
        }
      }
    }
  // end
// end

// footer
  footer{
    .top{
      .newsletter,.social{
        display: flex;
        align-items: center;
        .text{
          margin-right: $dist/2;
          .title{ font-size: 20px; margin: 0; line-height: 1; }
          p{ font-size: 12px; margin: 0; font-style: italic; }
        }
        .w-form{
          position: relative;
          width: 300px;
          input[type="email"]{
            display: block;
            background: rgba($c-white, .1);
            border-radius: 20px;
            padding: 10px 20px;
            border: 0;
            margin: 0;
            width: 100%;
            &:hover,&:focus, &:active{ background: rgba(#fff, .75); @include transition(); }
          }
          button{
            position: absolute;
            top: 4px;
            right: 4px;
            width: 36px;
            text-align: center;
            line-height: 36px;
            border: 0;
            border-radius: 50%;
            background: rgba(#fff, .15);
          }
        }
        ul{
          display: block !important;
          margin: 0; padding: 0;
          li{
            display: inline-flex;
            list-style: none;
            border-radius: 50%;
            margin: 0 0 0 5px;
            background: rgba(#fff, .15);
            a{
              display: block;
              width: 40px;
              text-align: center;
              line-height: 40px;
              border: 0;
            }
            &:hover{ background: rgba(#fff, .75); @include transition(); }
          }
        }
      }
    }/* TOP */
    .border-top, .border-bottom,hr{
      border-color: rgba($c-white,.25) !important
    }
    .bottom{
      .copyright{
        justify-content: space-between;
        align-content: center;
        ul{
          display: flex;
          text-transform: uppercase;
          margin: 0; padding: 0;
          ul{ display:  none; }
          li{ list-style: none;
            padding: $dist/5 0;
            &:after{content:'|'; margin: 0 5px;}
            &:last-child:after{display: none}
          }
        }
        p{ font-style: italic; }
        .logo{
          text-transform: uppercase;
        }
      }/* copyright */
    }/* bottom */
  }/* footer */
// end

// others
  // progressbar
    .progress{
      background: transparent;
      border-radius: 0;
      height: 5px;
    }
  // end

  // w-cat-badge
    .w-cat-badge{
      font-size: 12px;
      text-transform: uppercase;
      .bg-1{
        display: inline-block;
        max-width: 100%;
        padding: 4px 10px;
        position: relative;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        &:after{
          content: '';
          display: block;
          position: absolute;
          z-index: 1;
          top: 0; right: -10px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 25px 10px 0 0;
          border-color: $c-1 transparent transparent transparent;
        }
      }
    }
  // end

  // meta
    .w-meta{
      font-size: 12px;
      font-style: italic;
      span:after{ content: '-'; margin: 0 5px }
      span:last-of-type:after{ content: '' }
    }
  // end

  // section-title
    .w_section_title{
      .title{ position: relative; display: inline-block; }
      .title:before{
        content: '';
        display: block;
        position: absolute;
        right: -15px;
        bottom: 3px;
        width: 0; height: 0;
        border-style: solid;
        border-width: 8px 0 0 8px;
        border-color: transparent transparent transparent $c-1;
      }
      .title:after{
        content: '';
        display: block;
        position: absolute;
        bottom: -9px;
        left: 0;
        right: -16px;
        height: 2px;
        background: $c-2;
      }
    }
  // end

  // advertise
    .ads{
      &>*{
        max-width: 100%;
        width: auto;
        height: auto;
        display: block;
        border: 0;
        margin: 0 auto;
        padding: 0;
      }
    }
  // end

  // w-logo
    .w-logo{
      text-transform: uppercase;
      height: 73px;
      position: relative;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      font-size: 1.9rem;
      &:after{
        content: "";
        position: absolute;
        left: 100%;
        top: 0;
        border-style: solid;
        border-width: 73px 15px 0 0;
        border-color: $c-1 transparent transparent transparent;
      }
    }
  // end

  // toTop
    #toTop{
      position: fixed;
      bottom: 0;
      right: 0;
      border-radius: 0;
    }
  // end
// end

// article
  .single, .page{

    &.post-template-single-longform, &.page-template-default{
      // header
        .featured-image{
          height: 100vh;
          width: 100%;
        }
        .w-article-wide .w-article-header .text h1 span{
          padding: 0 10px;
        }
      // end

      // content
        .content{

          @include media-breakpoint-up(lg){
            .alignfull {
              margin-left  : calc( -100vw / 2 + 100% / 2 );
              margin-right : calc( -100vw / 2 + 100% / 2 );
              max-width    : 100vw;
              width: auto;
              img{width: 100vw;}
            }
            .alignwide {
              margin-left  : -190px;
              margin-right : -190px;
              width: calc( 190px * 2 + 100% );
              max-width: calc( 190px * 2 + 100% );
              img{width: 100%;}
              margin-top: 1.5rem;
              margin-bottom: 1.5rem;
            }
          }

        }//.content
      // end

    }/* &.post-template-single-longform */

    .w-article-wide{

      .w-article-header{
        position: relative;
        .text{
          bottom: 0; left: 0; right: 0;
          h1{
            span{
              display: inline;
              padding: 1px 10px 1px 0;
              display: inline;
              -webkit-box-decoration-break: clone;
              box-decoration-break: clone;
            }
            margin: 0;
            padding: 0;
          }
        }
      }

    }/* w-article-wide */

    .content, .comment-content{

      // basic
        p,h1,h2,h3,h4,h5,h6{
          margin: 0 0 1.5rem;
        }
        hr{ margin: 2rem 0;
          clear: both;}
        blockquote{
          padding: 1rem 1.5rem;
          @extend .bg-2, .c-white;
          border-left: 3px solid $c-1;
          margin: 1.5rem 0;
          p{
            font-size: 120%;
          }
          &>*{ margin: 0; padding: 0; }
          cite{
            font-size: 12px;
            font-style: italic;
            margin-top: 1rem;
            display: block;
            color: $c-meta;
          }
        }
        ul,ol{
          padding: 0;
          margin: 1rem 0;
          list-style: square;
          padding: 0 1rem;
          ul,ol{ margin: 0; margin-left: .5rem; }
          li{ margin: .5rem 0 0; padding: 0 .25rem; }
        }
        ol{ list-style: decimal; }
        pre{
          @extend .bg-light;
          margin: 1.5rem 0;
          padding: 1rem;
        }
        table{
          width: 100%;
          margin: 1.5rem 0;
          td,th{
            @extend .p-3, .border;
          }
        }
        figcaption{
          font-size: 12px;
          font-style: italic;
          margin-top: 1rem;
          display: block;
          color: $c-meta;
        }
        .alignleft{ float: left; @extend .mr-3; }
        .alignright{ float: right; @extend .ml-3; }
        img{
          max-width: 100%;
          width: auto;
          height: auto;
        }
        figure{ max-width: 100%; }
      // end

      // blocks
        .wp-block-cover-text{
          font-family: $f-title;
        }
        .wp-block-cover{
          margin: 1.5rem 0;
        }
        .wp-block-subhead{
          font-size: 120%;
          color: $c-meta;
          font-style: italic;
        }
        .wp-block-latest-posts{
          @extend .bg-light;
          padding: 1rem 1rem;
          list-style: none;
          li{
            font-family: $f-title;
            @extend .t-sm;
          }
        }
        .wp-block-button__link{
          border-radius: 0;
          @extend .btn, .btn-outline-dark;
          font-family: $f-meta;
          text-transform: uppercase;
        }
        .wp-block-gallery{
          padding: 0;
          margin: 1.5rem -0.5rem;
          .blocks-gallery-item{
            padding-top: .5rem;
            padding-bottom: .5rem;
            padding: .5rem;
            margin: 0;
          }
          figure{
            position: relative;
            figcaption{
              position: absolute;
              bottom: 0; left: 0; right: 0;
            }
          }
        }
        .wp-block-image{
          margin-top: 1.5rem;
          margin-bottom: 1.5rem;
        }
      // ends

      //link-pages,
        .link-pages{
          text-align: center;
          text-transform: uppercase;
          @extend .mt-4;
          p{ @extend .pt-3, .border-top }
          a,span{
            font-weight: bold;
            text-align: center;
            display: inline-block;
          }
          a,&>span{
            margin: 0 5px;
          }
          span{
            padding: 7px 12px;
            @extend .border;
          }
          a span{
            background: transparent !important;
          }
        }
      //end

      //post pass
        .post-password-form{
          @extend .py-lg-5, .my-lg-5, .mx-auto;
          max-width: 650px; width: 100%;
          display: block;
          input,label{ display: block; width: 100%; }
          input{ @extend .border, .p-2; }
          input[type=submit]{ @extend .bg-black , .c-white, .f-meta, .text-uppercase; }
        }
      //end

      // img
        img, .wp-caption{
          max-width: 100%;
          width: auto ;
          height: auto ;
          display: block;
          margin: 1rem 0;
          img{margin: 0;}
          .wp-caption-text{ font-size: 12px; color: rgba(0,0,0,.5); text-align: right; margin-top: 3px }
        }

        .alignleft{ float: left; margin-right: 1rem; }
        .alignright{ float: right; margin-left: 1rem; }
        .aligncenter{ float: none; margin-left: auto; margin-right: auto; }

        .gallery { margin-bottom: 2rem;  }
        figure{margin: 0}
        .gallery-item {
          display: inline-block;
          text-align: center;
          vertical-align: top;
          width: 100%;
          margin-bottom: 2rem;
          img{margin: 0 auto; width: auto;}
        }
        .gallery-columns-2 .gallery-item {  max-width: 50%; }
        .gallery-columns-3 .gallery-item { max-width: 33.33%; }
        .gallery-columns-4 .gallery-item { max-width: 25%; }
        .gallery-columns-5 .gallery-item { max-width: 20%; }
        .gallery-columns-6 .gallery-item { max-width: 16.66%; }
        .gallery-columns-7 .gallery-item { max-width: 14.28%; }
        .gallery-columns-8 .gallery-item { max-width: 12.5%; }
        .gallery-columns-9 .gallery-item { max-width: 11.11%; }
        .gallery-caption {
          display: block;
          font-size: 12px; color: rgba(0,0,0,.5); text-align: center; margin-top: 3px
        }
      // end
    }//content

    .w-article-meta{
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 12px;
      text-transform: uppercase;
      border-style: dotted none !important;
      .ssba {
        br,.ssba-share-text{ display: none; }
        ul,li{ margin-top : 0; margin-bottom: 0; }
        ul{ margin: 0; }
      }
    }/* w-article-meta */

    .featured-img{
      img{ max-width: 100%; width: auto; height: auto; }
    }//featured

    .pagination{
      .img{
        @include bg(75%);
        position: relative;
        &:before{
          content: '';
          position: absolute; z-index: 1;
          background: rgba(#000, .15);
          width: 100%; height: 100%; top: 0; left: 0;
        }
        &:after{
          font-family: "Font Awesome 5 Free";
          display: block; z-index: 2;
          position: absolute; top: calc(50% - 10px); left: calc(50% - 10px);
          font-weight: bold;
          line-height: 25px;
          font-size: 25px;
          width: 20px; text-align: center;
        }
      }
      .first{ .img:after{content: "\f053"} }
      .second{ .img:after{content: "\f054"} }
    }/* pagination */

    .w-tags{
      text-transform: uppercase;
      a{
        padding: 2px 10px 4px;
        line-height: 24px;
        border-radius: 2px;
        display: inline-block;
        margin: 5px;
        text-transform: uppercase;
        background-color: #eee;
        letter-spacing: .5px;
        font-size: 12px;
        &:before{ content:"#" }
      }
    }/* .w-tags */

  }//single

  // comments
    #weart-comments{
      .comment-list{
        margin: 0; padding: 0;
        &,ul{ list-style: none;}
        ul{ margin-left: 30px; padding: 0; }
        .bypostauthor > .comment-body{ @extend .bg-light }
        .comment,.pingback{

          font-family: $f-text;
          box-shadow: inset 5px 0 $c-border;
          .comment-body{ @extend .p-4, .border-top; }
          .comment-meta{
            @include clearfix();
            @extend .mb-2;
            font-family: $f-meta;
            font-size: 12px;
            text-transform: uppercase;
            .avatar{ float: left; margin-right: 15px; border-radius: 50%; }
            .fn{ font-weight: bold}
            .says{color: $c-meta;}
            .comment-metadata{
              a,&{color: $c-meta;}
            }
          }
          .comment-content,.reply{
            margin-left: 55px;
            ul{ list-style-type: square !important }
          }
        }
        .pingback{
          .comment-content,.reply{
            margin-left: 0px;
          }
        }
      }
    }
  // end
// end

// sidebar
  .box{
    font-size: 14px;

    // basic
      .w_section_title{
        img{
          margin-right: 5px;
        }
        .title{ display: inline-flex; align-items: center;}
        a{ font-weight: normal !important; }
      }
      select{ @extend .form-control, .rounded-0; }
      table{
        border-collapse: collapse;
        width: 100%; text-align: center;
        td,th{padding: 5px 0; border: 1px solid $border-color}
        caption{text-align: center; font-weight: bold;}
      }
      img{
        max-width: 100%;
        width: auto;
        height: auto;
      }
    // end

    .tagcloud{
      a{
        @extend .btn, .btn-outline-dark;
        display: inline-block;
        margin: 0 7.5px 10px 0;
        font-size: 12px !important;
        font-family: $f-meta;
        text-transform: uppercase;
        border-radius: 0 !important;
      }
    }
    &.null-instagram-feed{
      .instagram-pics{
        @extend .row;
        list-style: none;
        margin: 0 -5px;
        padding: 0;
        li{
          @extend .col-4;
          padding: 5px;
          margin: 0;
          img{ width: 100%; height: auto; display: block; }
        }
      }
      p.clear{ display: none }
    }

    &.widget_nav_menu,&.widget_categories,&.widget_archive,&.widget_pages,&.widget_meta,
    &.widget_product_categories{
      ul,.w-menu{
        color: $c-meta;
        margin: 0; padding: 0;
        display: block;
        width: 100%; list-style: none;
        li{
          margin: 0; padding: 0 !important;
          width: 100%; display: block;
          line-height: 1;
          font-family: $f-meta;
          text-transform: uppercase;
          @extend .border-top;

          ul{ display: none; background: rgba(0, 0, 0, 0.1) }
          &:first-child{ border: 0; }
          a{ padding: 10px; padding-right: 4px; display: inline-block; }
          position: relative;
          a.expand{ position: absolute; top: 0; right: 0; }
        }
      }
    }/* menus */

    &.widget_rss{
      ul{list-style: none; padding: 0;}
      li{padding: 0 15px 15px 0; margin-bottom: 15px;
        @extend .border-bottom;}
      li:last-child{border: 0 !important}
      .rsswidget{ font-weight: bold; display: block; }
      .rss-date{ display: block; @extend .c-meta; font-size: 90%; font-style: italic;margin: 5px 0; }
    }/*  widget-rss */

    &.widget_recent_comments,&.widget_recent_entries{
      li{
        .comment-author-link{font-weight: bold; a{display: inline}}
        a{ display: block; font-style: italic;}
        @extend .border-bottom;
        padding: 5px 0;
        list-style: none;
      }
      ul{padding: 0;}
    }/* recent-comments, widget-recent-entries */

  }
// end

// woocommerce
  .woocommerce,.woocommerce-page{
    .page-title{
      @extend .border-bottom, .mb-4, .pb-3;
    }
    .woocommerce-result-count{ @extend .f-meta; text-transform: uppercase; margin-top: 5px;}
    .orderby{
      @extend .border, .f-meta;
      text-transform: uppercase;
      padding: 5px;
      margin-bottom: 1rem;
    }
    .woocommerce-pagination{
      .page-numbers{
        border: none;
        @extend .f-meta;
        font-weight: normal;
        li{
          border: none;
          &>*{
            padding: 10px;
          }
          .current{ background: transparent; color: $c-black; }
        }
      }
    }

    ul.products li.product{
      overflow: hidden;
      text-align: center;
      span.onsale{
        background-color: $c-1;
        border-radius: 0;
        top: -5px; left: -32px; right: auto; z-index: 2;
        transform: rotate(-45deg);
        padding: 30px 35px 8px;
        line-height: 100%;
        font-family: $f-meta;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 12px
      }
      .button{ display: none }
      .price{
        @extend .f-meta;
        font-weight: normal !important;
        color: $c-black;
        ins{ font-weight: normal; text-decoration: none; }
      }
      .star-rating{ display: none; }
      .woocommerce-loop-product__title{ margin: 0rem !important; @extend .h6; border: 0 !important; padding: .5em 0 !important; }
    }

    div.product{
      overflow: hidden;
      span.onsale{
        background-color: $c-1;
        border-radius: 0;
        top: -10px; left: -30px; right: auto; z-index: 2;
        transform: rotate(-45deg);
        padding: 30px 35px 8px;
        line-height: 100%;
        font-family: $f-meta;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 12px
      }
      p.price{
        font-family: $f-meta;
        font-size: 14px;
        font-weight: normal !important;
        color: $c-black;
        ins{ font-weight: normal; text-decoration: none; }
      }
      div.product_meta{ display: none; }
      form.cart{
        input.qty{
          padding: 5px;
          margin: 0;
          line-height: 100%;
          border: 1px solid $c-border;
          @extend .f-meta;
          height: 31px;
        }
        button.button{
          padding: 10px 14px;
          line-height: 100%;
          margin: 0;
          border-radius: 0;
          background: $c-1;
          @extend .f-meta;
          text-transform: uppercase;
          font-weight: normal;
        }
      }
      .woocommerce-product-rating{ display: none; }
      .woocommerce-tabs,.related{
        ul.tabs{
          padding: 0;
          text-align: center;
          li{
            border-radius: 0;
            border: 0;
            background: transparent;
            @extend .f-meta;
            a{ font-weight: normal; padding: 10px; }
            &.active{
              border: 1px solid $c-border;
              border-bottom: 0;
            }
            text-transform: uppercase;
            &:before, &:after{ display: none; }
          }
        }
        h2{@extend .h5, .border-bottom, .pb-3,.mb-4;}
      }
    }

    .sidebar{
      .button{
        @extend .btn,.btn-outline-dark, .btn-sm;
        border-radius: 0;
        font-family: $f-meta;
        font-size: 11px !important;
        text-transform: uppercase;
      }
      .mini_cart_item,
      ul.product-categories{
        padding-left: 0;
        list-style: none;
        overflow: hidden;
        @extend .f-meta;
        text-transform: uppercase;
        ul,li{ padding-left: 0 !important; list-style: none; }
        .count{ opacity: .5; float: right; }
        li{
          padding-top: 10px;
        }
      }
      // pricerange
      .widget_price_filter .price_slider_wrapper{
        .ui-slider-range{ background: $c-1; }
        .ui-slider-handle{ background: $c-black; }
        .ui-widget-content{ background: $c-2; }
      }
      .woocommerce ul.cart_list, .woocommerce ul.product_list_widget{
        li{
          &:last-of-type{ border-bottom: 0; margin-bottom: 0; }
          padding-bottom: 10px;
          margin-bottom: 10px;
          border-bottom: 1px solid $c-border;
          a{ font-family: $f-title; }
          img{ width: 50px; }
          .amount,.quantity{ @extend .f-meta; }
          ins{ text-decoration: none; }
        }
      }
      .woocommerce-mini-cart__total{ @extend .f-meta; text-transform: uppercase; text-align: center; }
      .woocommerce-mini-cart__buttons{ text-align: center; }
    }

    .wc-proceed-to-checkout a.checkout-button,
    .wc-proceed-to-checkout a.checkout-button:hover{
      font-family: $f-meta;
      text-transform: uppercase;
      font-weight: normal;
      background: $c-1; }

    .col2-set{
      @extend .row;
      .col-1,.col-2{
        .woocommerce-additional-fields,.woocommerce-input-wrapper,.select2{ width: 100% }
        @extend .col-lg-6;
        input,select,span.select{ width: 100%; @extend .form-control }

      }
    }

    .woocommerce-info,.woocommerce-notice{
      border-color: $c-1 !important;
      font-family: $f-text;
      padding: 1rem !important;
      line-height: 1.4 !important;
    }
    .article-content ul li:after,.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before{ display:  none; }
    // order-buttons
      .place-order,.wc-proceed-to-checkout{
        .button.alt,
        .button.alt:hover{
          @extend .f-meta;
          text-transform: uppercase;
          font-weight: normal;
          background-color: $c-1;
          color: $c-white !important;
          border-radius: 0;
          width: 100%;
          max-width: 300px;
          padding: 20px 0;
        }
      }
    // end
  }
// end