@import 'variables', 'mixin';

/**
 * Table of Contents:

 * 1.0  - container
 * 2.0  - content
 * 3.0  - data-aos
 * 4.0  - reset css
 * 5.0  - img
 * 6.0  - full__width
	* 6.1 - full__left
	* 6.2 - full__right
 * 7.0  - form search
 * 8.0  - gallery
 * 9.0  - thumbnail hover
 * 10.0 - pagination
 * 11.0 - woocommerce-pagination
 * 12.0 - margins & paddings
 * 13.0 - modal
 * 14.0 - catapult-cookie-bar
 * 15.0 - keyframes
 * 16.0 - accordion
 */

::-webkit-scrollbar {
     width: 15px;
}

::-webkit-scrollbar-thumb {
     background: $primary-color;
}

::-webkit-scrollbar-thumb:hover {
     transition: $transition;
     background: darken($primary-color, 10);
}

b, strong{
	font-weight: 400 !important;
}

/* 1.0  - container */
.container {
     max-width: 100%;
     padding-left: 0;
     padding-right: 0;

     &-fluid {
          padding-left: 0;
          padding-right: 0;
     }

     &.large {
          max-width: 1920px;
     }
}


/* 2.0  - content */
.content {
     padding: $content-padding;

     &.front-content {
          padding: $content-padding-home;
     }
}


/* 3.0  - data-aos */
[data-aos] {
     @include media-max(md) {
          opacity: 1 !important;
          transform: none !important;
          transition-delay: 0s !important;
     }
}

.row {
     @each $item in (2 3 4 5) {

          &.nc-#{$item},
          &.columns-#{$item} {
               @for $i from 1 through $item {
                    >[data-aos]:not([data-aos-delay]) {
                         &:nth-child(#{$item}n + #{$i}) {
                              transition-delay: ($i * 0.1s);
                         }
                    }
               }
          }
     }
}


/* 4.0  - reset css */
.screen-reader-text {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     -webkit-clip-path: inset(50%);
     clip-path: inset(50%);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute !important;
     width: 1px;
     word-wrap: normal !important;

     &:focus {
          background-color: #f1f1f1;
          border-radius: 3px;
          clip: auto !important;
          -webkit-clip-path: none;
          clip-path: none;
          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;
          @include css3(box-shadow, 0 0 2px 2px rgba(0, 0, 0, 0.6));
     }
}

:focus,
*:focus {
     outline: none !important;
}

::-moz-selection {
     background: $primary-color;
     color: #fff;
}

::selection {
     background: $primary-color;
     color: #fff;
}

body {
     overflow-x: hidden;
     max-width: $body-max-width;
     margin: 0 auto;
}

html {
     max-width: $body-max-width;
     margin: 0 auto;

     @include media-max(xl) {
          overflow-x: hidden;
     }
}

p:empty {
     display: none;
}

.clear {
     clear: both;
}

.col-flex {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;

     &--center {
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
     }

     &--bottom {
          -webkit-box-pack: end;
          -ms-flex-pack: end;
          justify-content: flex-end;
     }
}


/* 5.0  - img */
img {
     max-width: 100%;
     height: auto;

     &.alignnone {
          margin: 30px 0;
     }

     &.alignleft {
          float: left;
          margin: 30px 30px 30px 0;

          @include media-max(md) {
               margin: 30px auto;
               float: none;
          }
     }

     &.alignright {
          float: right;

          margin: 30px 0 30px 30px;
     }

     &.aligncenter {
          display: block;

          margin: 30px auto;
     }

     &.alignnone,
     &.alignleft,
     &.alignright,
     &.aligncenter {
          &:first-child {
               margin-top: 0;
          }

          @include media-max(md) {
               margin: 30px auto;
               float: none;
          }
     }
}


/* 6.0  - full__width */
.full {
     &__width {
          margin-left: calc(-50vw + 50%);
          margin-right: calc(-50vw + 50%);
          max-width: $body-max-width;

          @media (min-width: $body-max-width) {
               margin-left: calc((#{$body-max-width} * (-0.5)) + 50%);
               margin-right: calc((#{$body-max-width} * (-0.5)) + 50%);
          }
     }


     /* 6.1 - full__left */
     &__left {
          [class^="col-"] {
               &:first-child {
                    width: calc(#{$body-max-width} / 2);
                    flex: 0 0 calc(#{$body-max-width} / 2);
                    max-width: calc(#{$body-max-width} / 2);
                    margin-left: calc((#{$body-max-width} * (-0.5)) + 50%);
                    padding-left: 0;
                    text-align: right;

                    @include media-max(md) {
                         padding-left: 15px;
                         width: 100%;
                         flex: 0 0 100%;
                         max-width: 100%;
                    }
               }
          }
     }


     /* 6.2 - full__right */
     &__right {
          [class^="col-"] {
               &:last-child {
                    width: calc(#{$body-max-width} / 2);
                    flex: 0 0 calc(#{$body-max-width} / 2);
                    max-width: calc(#{$body-max-width} / 2);
                    margin-right: calc((#{$body-max-width} * (-0.5)) + 50%);
                    padding-right: 0;

                    @include media-max(md) {
                         padding-right: 15px;
                         width: 100%;
                         flex: 0 0 100%;
                         max-width: 100%;
                    }
               }
          }
     }
}


/* 7.0  - form search */
form[role=search] {
     position: relative;

     input[type=search] {
          padding-right: 44px;
     }

     button,
     input[type=submit] {
          border: 0;
          background: transparent;
          color: #aaa;
          padding: 0 14px;
          font-size: 13px;
          line-height: 1;
          border-radius: 0;
          letter-spacing: 0;
          @include absolute(0, 0, 0, auto);

          &:hover {
               color: #333;
          }
     }

     .svg-icon {
          &__path {
               stroke: #aaa;
          }

          &:hover {
               .svg-icon__path {
                    stroke: #333;
               }
          }
     }
}


/* 8.0  - gallery */
.gallery {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin: 30px -15px 20px;

     @include media-max(sm) {
          margin: -7.5px;
     }

     &-item {
          margin: 0;
          padding: 15px;

          @include media-max(sm) {
               padding: 7.5px;
          }

          a,
          img,
          picture {
               width: 100%;
               display: block;
          }
     }

     &.gallery-columns-6>.gallery-item {
          @include flex(16.6666666%);

          @include media-max(xl) {
               @include flex(20%);
          }

          @include media-max(lg) {
               @include flex(25%);
          }

          @include media-max(md) {
               @include flex(33.3333333%);
          }

          @include media-max(sm) {
               @include flex(50%);
          }
     }

     &.gallery-columns-5>.gallery-item {
          @include flex(20%);

          @include media-max(lg) {
               @include flex(25%);
          }

          @include media-max(md) {
               @include flex(33.3333333%);
          }

          @include media-max(sm) {
               @include flex(50%);
          }
     }

     &.gallery-columns-4>.gallery-item {
          @include flex(25%);

          @include media-max(lg) {
               @include flex(33.3333333%);
          }

          @include media-max(md) {
               @include flex(50%);
          }
     }

     &.gallery-columns-3>.gallery-item {
          @include flex(33.3333333%);

          @include media-max(md) {
               @include flex(50%);
          }
     }

     &.gallery-columns-2>.gallery-item {
          @include flex(50%);
     }

     &.gallery-columns-1>.gallery-item {
          @include flex(100%);
     }
}


/* 9.0  - thumbnail hover */
.gallery .gallery-item .gallery-icon>a,
.product-col .product-box-img,
.product-box>a:not(.product-box__link),
.woocommerce-product-gallery__image>a,
.blog-post__img__link {
     position: relative;
     display: block;
     overflow: hidden;
     z-index: 9;

     &:before {
          content: '';
          background: $gallery-overlay-background;
          opacity: $gallery-overlay-opacity;
          z-index: 2;
          @include absolute(0, 0, 0, 0);
          @include css3(transition, $transition);
     }

     &:after {
          z-index: 3;
          width: $gallery-icon-width;
          height: $gallery-icon-height;
          background-color: $gallery-icon-background;
          text-align: center;
          line-height: $gallery-icon-height - (2 * $gallery-icon-border-width);
          border: $gallery-icon-border-width solid $gallery-icon-border-color;
          border-radius: $gallery-icon-border-radius;
          opacity: $gallery-icon-opacity;
          margin-top: $gallery-icon-margin-top;
          background-repeat: no-repeat;
          background-position: center;
          content: '';
          @include absolute(50%, auto, auto, 50%);
          @include css3(transition, $transition);
          @include css3(transform, translate(-50%, -50%));
     }

     &:hover {
          &:before {
               opacity: $gallery-overlay-opacity-hover;
          }

          &:after {
               margin-top: 0;
               opacity: $gallery-icon-opacity-hover;
          }
     }
}

.slb_details {
     display: none;
}


/* 10.0 - pagination */
.pagination {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     margin-top: 25px;

     a,
     span {
          width: 40px;
          height: 40px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          color: rgb(0, 0, 0);
          margin-left: -1px;
          border-width: 1px;
          border-style: solid;
          border-color: rgb(204, 204, 204);
          -o-border-image: initial;
          border-image: initial;
          @include css3(transition, all 0.2s linear 0s);

          &:hover,
          &.current {
               color: rgb(255, 255, 255);
               background: rgb(0, 0, 0);
               border-color: rgb(0, 0, 0);
               text-decoration: none;
          }
     }
}


/* 11.0 - woocommerce-pagination */
nav.woocommerce-pagination {
     margin-top: 25px;

     ul.page-numbers {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-direction: row;
          flex-direction: row;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          list-style: none;
          padding: 0;

          a,
          span {
               width: 40px;
               height: 40px;
               display: -webkit-box;
               display: -ms-flexbox;
               display: flex;
               -webkit-box-orient: vertical;
               -webkit-box-direction: normal;
               -ms-flex-direction: column;
               flex-direction: column;
               -webkit-box-pack: center;
               -ms-flex-pack: center;
               justify-content: center;
               -webkit-box-align: center;
               -ms-flex-align: center;
               align-items: center;
               color: rgb(0, 0, 0);
               margin-left: -1px;
               border-width: 1px;
               border-style: solid;
               border-color: rgb(204, 204, 204);
               -o-border-image: initial;
               border-image: initial;
               @include css3(transition, all 0.2s linear 0s);

               &:hover,
               &.current {
                    color: rgb(255, 255, 255);
                    background: rgb(0, 0, 0);
                    border-color: rgb(0, 0, 0);
                    text-decoration: none;
               }
          }
     }
}

a.prev.page-numbers,
a.next.page-numbers {
     padding-bottom: 2px;
}


/* 12.0 - margins & paddings */
$px-array: 100 95 90 85 80 75 70 65 60 55 50 45 40 35 30 25 20 15 10 5 0;

@each $current-px in $px-array {
     .mb-#{$current-px} {
          margin-bottom: #{$current-px}px !important;
     }

     .mb-n#{$current-px} {
          margin-bottom: -#{$current-px}px !important;
     }

     .mt-#{$current-px} {
          margin-top: #{$current-px}px !important;
     }

     .mt-n#{$current-px} {
          margin-top: -#{$current-px}px !important;
     }

     .pb-#{$current-px} {
          padding-bottom: #{$current-px}px !important;
     }

     .pb-n#{$current-px} {
          padding-bottom: -#{$current-px}px !important;
     }

     .pt-#{$current-px} {
          padding-top: #{$current-px}px !important;
     }

     .pt-n#{$current-px} {
          padding-top: -#{$current-px}px !important;
     }
}

.margin-0 {
     margin: 0 !important;
}

.padding-0 {
     padding: 0 !important;
}


/* 13.0 - modal */
.modal {
     &-header {
          padding: 15px 20px;

          h1,
          h2,
          h3,
          h4,
          .h {
               margin-top: 0;
          }

          .close {
               padding: 10px 20px;
               margin-top: 0;

               &:hover {
                    color: $primary-color;
                    background: transparent;
               }
          }
     }

     &-body {
          padding: 20px;
     }
}


/* 14.0 - catapult-cookie-bar */
#catapult-cookie-bar {
     color: #ddd;
     background-color: #464646;
     box-sizing: border-box;
     padding: 15px;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 99999;
     overflow: hidden;
     transform: translateY(100%);
     @include css3(transition, $transition);

     .ctcc-inner {
          display: flex;
          align-items: center;
          justify-content: center;

          @include media-max(md) {
               text-align: center;
               flex-wrap: wrap;
          }

          .ctcc-left-side {
               @include media-min(md) {
                    margin-right: 15px;
               }

               a {
                    color: inherit;
                    @include css3(transition, $transition);

                    &:hover {
                         opacity: .65;
                    }
               }
          }

          button#catapultCookie {
               @extend .button;
               padding: 7px 10px !important;

               @include media-max(md) {
                    margin: 15px 0 0;
               }
          }
     }
}

.has-cookie-bar #catapult-cookie-bar {
     transform: translateY(0);
}


/* 15.0 - keyframes */
@include keyframes('loading') {
     from {
          transform: rotate(0deg);
     }

     to {
          transform: rotate(360deg);
     }
}

/* 16.0 - accordion */
.accordion {
     &-collapse {
          transition: $transition;
     }

     &-header {
          margin-top: 0;
     }
}