/* #Reset default styles - start
   ========================================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  outline: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block;
}

blockquote {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}

del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: medium none;
  vertical-align: middle;
}

table th {
  border: 0;
  padding: 5px 7px;
  text-align: center;
}

table td {
  padding: 5px 10px;
  text-align: center;
}

a img {
  border: none;
}

img, .wp-caption {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

select::-ms-expand {
  display: none;
}

/* #Reset default styles - end
   ========================================================================== */

/* #General styles that are used in our theme - start
 * Here are defined global styles on body element, on container elements that hold every page,
 * headings and links, inputs, core wp styles and default pagination styles
   ========================================================================== */

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.clear:after {
  clear: both;
  content: "";
  display: block;
}

html {
  height: 100%;
  margin: 0 !important;
  @include mkdTransition(all 0.33s ease-out);
  overflow-y: scroll !important; /* to prevent page jumping on ajax and when there is not enough content */
}

body {
  font-family: $default-font-family;
  font-size: $default-text-size;
  letter-spacing: -0.22px;
  line-height: $default-text-line-height;
  color: $default-text-color;
  font-weight: 300;

  background-color: $default-background-color;
  overflow-x: hidden !important;
}

h1, h2, h3, h4, h5, h6 {
  color: $headings-text-color;
  font-family: $headings-font-family;
  line-height: 1.3em;
}

h1 {
  font-size: 66px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
  letter-spacing: -3px;
}

h2 {
  font-size: 35px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
  letter-spacing: -1.6px;
}

h3 {
  font-size: 25px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
  letter-spacing: -1.2px;
}

h4 {
  font-size: 21px;
  font-weight: 300;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: $default-font-family;
  letter-spacing: -0.15px;
}

h5 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
  letter-spacing: -0.1px;
}

h6 {
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  @include mkdTypographyLayout();
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: $first-main-color;
}

a,
p a {
  color: $headings-text-color;
  text-decoration: none;
  cursor: pointer;
  font-weight: 400;

  @include mkdTransition(color 0.25s ease-in-out);

  &:hover {
    color: $first-main-color;
  }
}

input[type='submit'],
.woocommerce input[type='button'],
.woocommerce-page input[type='button'] {
  -webkit-appearance: none;
}

ul, ol {
  list-style-position: inside;
}

pre {
  background-color: $default-background-color;
  padding: 15px;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 15px 0;
}

dt {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

dd {
  margin-bottom: 15px;
}

p {
  margin: 10px 0px;
}

sub, sup {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  top: 0.5ex;
}

sup {
  bottom: 0.5ex;
}

.wp-caption-text {
  margin: 0;
  font-style: italic;
}

table {
  width: 100%;
}

table thead tr, table tbody tr {
  border: 1px solid #e6e6e6;
}

table tbody th {
  border-right: 1px solid #e6e6e6;
}

blockquote:not(.mkd-blockquote-shortcode) {
  padding: 0;
  border: none;
  font-style: italic;
  font-size: 17px;
  line-height: 1.6em;
  margin: 20px 0;
}

blockquote cite {
  font-style: normal;
  font-weight: 500;
}

/* Webkit */
::selection {
  background: $first-main-color;
  color: $default-background-color;
}

/* Gecko/Mozilla */
::-moz-selection {
  background: $first-main-color;
  color: $default-background-color;
}

.wp-caption,
.wp-caption-text,
.sticky,
.gallery-caption,
.bypostauthor {
  opacity: 1;
}

.alignleft {
  float: left;
  margin: 0 20px 20px 0;
}

.alignright {
  float: right;
  margin: 0 0 20px 20px;
}

.aligncenter {
  display: block;
  margin: 10px auto;
}
.alignwide {
  margin-left: auto;
  margin-right: auto;
  clear: both;
}

@include ipad-landscape() {
  .alignwide {
    width: 100%;
    max-width: 100%;
  }
}

.alignfull {
  position: relative;
  left: -1rem;
  width: calc(100% + (2 * 1rem));
  max-width: calc(100% + (2 * 1rem));
  clear: both;
}

@include ipad-landscape() {
  .alignfull {
    left: calc(-12.5% - 75px);
    width: calc(125% + 150px);
    max-width: calc(125% + 150px);
    margin-top: calc(2 * 1rem);
    margin-bottom: calc(2 * 1rem);
  }
}

.text-align-right {
  text-align: right;
}

.text-align-left {
  text-align: left;
}

.text-align-center {
  text-align: center;
}

.meta {
  display: none;
}

.mkd-wrapper {
  background-color: $default-background-color;
  position: relative;
  z-index: 1000;
  @include mkdTransition(left 0.33s cubic-bezier(0.694, 0.0482, 0.335, 1));
  left: 0px;

  .mkd-wrapper-inner {
    width: 100%;
    overflow: hidden;
  }
}

body.mkd-paspartu-enabled .mkd-wrapper-paspartu {
  position: relative;
  left: 0;
  background-color: $first-main-color;
  padding: 15px;
  @include mkdBoxSizing(border-box);
  @include mkdTransition(transform 0.33s cubic-bezier(0.694, 0.0482, 0.335, 1));
  z-index: 1000;
}

.mkd-meta {
  display: none;
}

.mkd-content {
  margin-top: 0;
  position: relative;
  z-index: 100;
  background-color: $default-background-color; /*this is needed because of the uncovering footer*/

  ul ul,
  ol ol {
    padding: 0 0 0 15px;
  }

  ol ul,
  ul ol,
  ul ul,
  ol ol {
    margin: 0;
  }

  ul,
  ol {
    margin: 15px 0;
  }
}

/*gradient styles start*/
.mkd-type1-gradient-left-to-right {
  @include mkdType1LeftToRightGradient();
}

.mkd-type1-gradient-left-to-right-after {
  &:after {
    @include mkdType1LeftToRightGradient();
  }
}

.mkd-type1-gradient-bottom-to-top {
  @include mkdType1BotomToTopGradient('false');
}

.mkd-type1-gradient-bottom-to-top-after {
  &:after {
    @include mkdType1BotomToTopGradient('false');
  }
}

.mkd-type1-gradient-left-bottom-to-right-top {
  @include mkdType1LeftBottomToRightTopGradient('false');
}

.mkd-type1-gradient-left-to-right-2x {
  @include mkdType1LeftToRightGradient2x();
  background-position: 0%;
  background-size: 200% 200%;
}

.mkd-type1-gradient-left-to-right-text {
  i, i:before, span {
    @include mkdType1LeftBottomToRightTopGradient('true');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: $type1-gradient-first-color;
  }
}

.mkd-type1-gradient-bottom-to-top-text {
  i, i:before, span {
    @include mkdType1BotomToTopGradient('true');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: $type1-gradient-first-color;
  }
}

.mkd-type2-gradient-left-to-right {
  @include mkdType2LeftToRightGradient();
}

.mkd-type2-gradient-left-to-right-after {
  &:after {
    @include mkdType2LeftToRightGradient();
  }
}

.mkd-type2-gradient-bottom-to-top {
  @include mkdType2BotomToTopGradient('false');
}

.mkd-type2-gradient-bottom-to-top-after {
  &:after {
    @include mkdType2BotomToTopGradient('false');
  }
}

.mkd-type2-gradient-left-bottom-to-right-top {
  @include mkdType2LeftBottomToRightTopGradient('false');
}

.mkd-type2-gradient-left-to-right-2x {
  @include mkdType2LeftToRightGradient2x();
  background-position: 0%;
  background-size: 200% 200%;
}

.mkd-type2-gradient-left-to-right-text {
  i, i:before, span {
    @include mkdType2LeftBottomToRightTopGradient('true');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: $type2-gradient-first-color;
  }
}

.mkd-type2-gradient-bottom-to-top-text {
  i, i:before, span {
    @include mkdType2BotomToTopGradient('true');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: $type2-gradient-first-color;
  }
}

.mkd-type3-gradient-left-to-right {
  @include mkdType3LeftToRightGradient();
}

.mkd-type3-gradient-left-to-right-after {
  &:after {
    @include mkdType3LeftToRightGradient();
  }
}

.mkd-type3-gradient-bottom-to-top {
  @include mkdType3BotomToTopGradient('false');
}

.mkd-type3-gradient-bottom-to-top-after {
  &:after {
    @include mkdType3BotomToTopGradient('false');
  }
}

.mkd-type3-gradient-left-bottom-to-right-top {
  @include mkdType3LeftBottomToRightTopGradient('false');
}

.mkd-type3-gradient-left-to-right-2x {
  @include mkdType3LeftToRightGradient2x();
  background-position: 0%;
  background-size: 200% 200%;
}

.mkd-type3-gradient-left-to-right-text {
  i, i:before, span {
    @include mkdType3LeftBottomToRightTopGradient('true');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: $type3-gradient-first-color;
  }
}

.mkd-type3-gradient-bottom-to-top-text {
  i, i:before, span {
    @include mkdType3BotomToTopGradient('true');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: $type3-gradient-first-color;
  }
}

.mkd-type4-gradient-left-to-right {
  @include mkdType4LeftToRightGradient();
}

.mkd-type4-gradient-left-to-right-after {
  &:after {
    @include mkdType4LeftToRightGradient();
  }
}

.mkd-type4-gradient-bottom-to-top {
  @include mkdType4BotomToTopGradient('false');
}

.mkd-type4-gradient-bottom-to-top-after {
  &:after {
    @include mkdType4BotomToTopGradient('false');
  }
}

.mkd-type4-gradient-left-bottom-to-right-top {
  @include mkdType4LeftBottomToRightTopGradient('false');
}

.mkd-type4-gradient-left-to-right-2x {
  @include mkdType4LeftToRightGradient2x();
  background-position: 0%;
  background-size: 200% 200%;
}

.mkd-type4-gradient-left-to-right-text {
  i, i:before, span {
    @include mkdType4LeftBottomToRightTopGradient('true');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: $type4-gradient-first-color;
  }
}

.mkd-type4-gradient-bottom-to-top-text {
  i, i:before, span {
    @include mkdType4BotomToTopGradient('true');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: $type4-gradient-first-color;
  }
}

.mkd-type1-separator-gradient-left-to-right {
  @include mkdType1LeftToRightSeparatorGradient();
}

.mkd-type2-separator-gradient-left-to-right {
  @include mkdType2LeftToRightSeparatorGradient();
}

.mkd-type3-separator-gradient-left-to-right {
  @include mkdType3LeftToRightSeparatorGradient();
}

.mkd-type4-separator-gradient-left-to-right {
  @include mkdType4LeftToRightSeparatorGradient();
}

/*gradient styles end*/

/*visual composer override styles*/
.wpb_row, .wpb_content_element,
ul.wpb_thumbnails-fluid > li,
.last_toggle_el_margin, .wpb_button {
  margin-bottom: 0 !important; // important is in order to prevent visual composer styles in all cases
}

.mkd-content {
  .mkd-content-inner > .mkd-container > .mkd-container-inner,
  .mkd-content-inner > .mkd-full-width > .mkd-full-width-inner {
    padding: 64px 0;
  }
}

.mkd-boxed {

  overflow: hidden !important; /* this is because content jumping while using accordion and display:inline-block on 'body.mkd-boxed .mkd-wrapper'   */

  .mkd-wrapper {
    display: inline-block;
    vertical-align: middle;
    width: 100%;

    .mkd-wrapper-inner {
      width: $grid-width-boxed;
      overflow: visible;
      margin: auto;
    }
  }

  .mkd-content {
    overflow: hidden;
  }

  .mkd-footer-inner {
    width: $grid-width-boxed;
    margin: auto;
  }

  .mkd-page-header .mkd-sticky-header,
  .mkd-page-header .mkd-fixed-wrapper.fixed {
    width: $grid-width-boxed;
    left: auto;
  }
}

.mkd-boxed-content {

  overflow: hidden !important; /* this is because content jumping while using accordion and display:inline-block on 'body.mkd-boxed .mkd-wrapper'   */

  .mkd-wrapper {
    display: inline-block;
    vertical-align: middle;
    width: 100%;

    .mkd-wrapper-inner {

      > .mkd-content {
        width: $grid-width-boxed;
        overflow: visible;
        margin: auto;
      }
    }
  }

  .mkd-content {
    overflow: hidden;
  }

  .mkd-footer-inner {
    width: 100%;
  }

  .mkd-page-header .mkd-sticky-header,
  .mkd-page-header .mkd-fixed-wrapper.fixed {
    width: 100%;
  }
}

.mkd-smooth-transition-loader {
  background-color: $first-main-color;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;

  &.mkd-hide-spinner {

    .mkd-st-loader {
      display: none;
    }

  }

}

.mkd-container {
  background-color: $default-background-color; //beacuse of the Mikado Slider, since content have to go over it
  position: relative;
  padding: 0;
  width: 100%;
  z-index: 100;

  &:before {
    content: " ";
    display: table;
  }

  &:after {
    content: " ";
    display: table;
    clear: both;
  }
}

.mkd-container-inner {
  //not in parent selector since this class is used for positioning other elements in grid
  width: $grid-width;
  margin: 0px auto;
}

.mkd-full-width {
  position: relative;
  z-index: 100;
}

@media only screen and (min-width: 1400px) {
  .mkd-grid-1300 {

    .mkd-grid,
    .mkd-container-inner,
    .mkd-grid-section .mkd-section-inner,
    .mkd-footer-top-border-holder.mkd-in-grid,
    .mkd-footer-bottom-border-holder.mkd-in-grid {
      width: $grid-width-1300;
    }

  }

  .mkd-grid-1300.mkd-boxed {

    .mkd-footer-inner,
    .mkd-wrapper-inner {
      width: $grid-width-1300 + 50px;
    }

    .mkd-page-header .mkd-sticky-header,
    .mkd-page-header .mkd-fixed-wrapper.fixed {
      width: $grid-width-1300 + 50px;
      left: auto;
    }
  }

  .mkd-grid-1300.mkd-boxed-content {
    .mkd-wrapper {
      .mkd-wrapper-inner {
        > .mkd-content {
          width: $grid-width-1300 + 50px;
        }
      }
    }
  }
}

@media only screen and (min-width: 1300px) {
  .mkd-grid-1200 {

    .mkd-grid,
    .mkd-container-inner,
    .mkd-grid-section .mkd-section-inner,
    .mkd-footer-top-border-holder.mkd-in-grid,
    .mkd-footer-bottom-border-holder.mkd-in-grid {
      width: $grid-width-1200;
    }
  }

  .mkd-grid-1200.mkd-boxed {

    .mkd-footer-inner,
    .mkd-wrapper-inner {
      width: $grid-width-1200 + 50px;
    }

    .mkd-page-header .mkd-sticky-header,
    .mkd-page-header .mkd-fixed-wrapper.fixed {
      width: $grid-width-1200 + 50px;
      left: auto;
    }
  }

  .mkd-grid-1200.mkd-boxed-content {
    .mkd-wrapper {
      .mkd-wrapper-inner {
        > .mkd-content {
          width: $grid-width-1200 + 50px;
        }
      }
    }
  }
}

@media only screen and (min-width: 1200px) {
  .mkd-grid-1000 {

    .mkd-grid,
    .mkd-container-inner,
    .mkd-grid-section .mkd-section-inner,
    .mkd-footer-top-border-holder.mkd-in-grid,
    .mkd-footer-bottom-border-holder.mkd-in-grid {
      width: $grid-width-1000;
    }
  }

  .mkd-grid-1000.mkd-boxed {

    .mkd-footer-inner,
    .mkd-wrapper-inner {
      width: $grid-width-1000 + 50px;
    }

    .mkd-page-header .mkd-sticky-header,
    .mkd-page-header .mkd-fixed-wrapper.fixed {
      width: $grid-width-1000 + 50px;
      left: auto;
    }
  }

  .mkd-grid-1000.mkd-boxed-content {
    .mkd-wrapper {
      .mkd-wrapper-inner {
        > .mkd-content {
          width: $grid-width-1000 + 50px;
        }
      }
    }
  }
}

@media only screen and (min-width: 1000px) {
  .mkd-grid-800 {

    .mkd-grid,
    .mkd-container-inner,
    .mkd-grid-section .mkd-section-inner,
    .mkd-footer-top-border-holder.mkd-in-grid,
    .mkd-footer-bottom-border-holder.mkd-in-grid {
      width: $grid-width-800;
    }
  }

  .mkd-grid-800.mkd-boxed {

    .mkd-footer-inner,
    .mkd-wrapper-inner {
      width: $grid-width-800 + 50px;
    }

    .mkd-page-header .mkd-sticky-header,
    .mkd-page-header .mkd-fixed-wrapper.fixed {
      width: $grid-width-800 + 50px;
      left: auto;
    }
  }

  .mkd-grid-800.mkd-boxed-content {
    .mkd-wrapper {
      .mkd-wrapper-inner {
        > .mkd-content {
          width: $grid-width-800 + 50px;
        }
      }
    }
  }
}

/* #General styles that are used in our theme - end
   ========================================================================== */

/* #Grid system styles - start
 * Here are defined styles for grid system that is used outside Visual Composer
   ========================================================================== */

.mkd-two-columns-66-33 {
  width: 100%;

  .mkd-column1 {
    width: 66.66%;
    float: left;

    .mkd-column-inner {
      padding: 0 20px 0 0;
    }
  }

  .mkd-column2 {
    width: 33.33%;
    float: left;

    .mkd-column-inner {
      padding: 0 0 0 20px;

    }
  }
}

.mkd-two-columns-33-66 {
  width: 100%;

  .mkd-column1 {
    width: 33.33%;
    float: left;

    .mkd-column-inner {
      padding: 0 20px 0 0;
    }
  }

  .mkd-column2 {
    width: 66.66%;
    float: left;

    .mkd-column-inner {
      padding: 0 0 0 20px;
    }
  }
}

.mkd-two-columns-75-25 {
  width: 100%;

  .mkd-column1 {
    width: 75%;
    float: left;

    .mkd-column-inner {
      padding: 0 20px 0 0;
    }
  }

  .mkd-column2 {
    width: 25%;
    float: left;

    .mkd-column-inner {
      padding: 0 0 0 20px;
    }
  }
}

.mkd-two-columns-25-75 {
  width: 100%;

  .mkd-column1 {
    width: 25%;
    float: left;

    .mkd-column-inner {
      padding: 0 20px 0 0;
    }
  }

  .mkd-column2 {
    width: 75%;
    float: left;

    .mkd-column-inner {
      padding: 0 0 0 20px;
    }
  }
}

.mkd-two-columns-50-50 {
  width: 100%;

  > .mkd-two-columns-50-50-inner {
    margin: 0 -15px;
  }

  .mkd-column {
    width: 50%;
    float: left;

    .mkd-column-inner {
      padding: 0 15px;
    }
  }
}

.mkd-three-columns {
  width: 100%;

  > .mkd-three-columns-inner {
    margin: 0 -15px;
  }

  .mkd-column {
    width: 33.33%;
    float: left;

    .mkd-column-inner {
      padding: 0 15px;
    }
  }
}

.mkd-four-columns {
  width: 100%;

  > .mkd-four-columns-inner {
    margin: 0 -15px;
  }

  .mkd-column {
    width: 25%;
    float: left;

    .mkd-column-inner {
      padding: 0 15px;
    }
  }
}

.mkd-five-columns {
  width: 100%;

  > .mkd-five-columns-inner {
    margin: 0 -15px;
  }

  .mkd-column {
    width: 20%;
    float: left;

    .mkd-column-inner {
      padding: 0 15px;
    }
  }
}

body.woocommerce.woocommerce-page {
  .mkd-two-columns-66-33.woocommerce_with_sidebar .mkd-column1 .mkd-column-inner,
  .mkd-two-columns-75-25.woocommerce_with_sidebar .mkd-column1 .mkd-column-inner {
    padding-left: 40px;
  }

  .mkd-two-columns-33-66.woocommerce_with_sidebar .mkd-column2 .mkd-column-inner,
  .mkd-two-columns-25-75.woocommerce_with_sidebar .mkd-column2 .mkd-column-inner {
    padding-right: 40px;
  }

  .full_width {
    .mkd-two-columns-66-33.woocommerce_with_sidebar .mkd-column1 .mkd-column-inner,
    .mkd-two-columns-75-25.woocommerce_with_sidebar .mkd-column1 .mkd-column-inner {
      padding-left: 0;
    }

    .mkd-two-columns-33-66.woocommerce_with_sidebar .mkd-column2 .mkd-column-inner,
    .mkd-two-columns-25-75.woocommerce_with_sidebar .mkd-column2 .mkd-column-inner {
      padding-right: 0;
    }
  }
}

/* #Grid system styles - end
   ========================================================================== */

@include keyframes(preload-background) {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

.mkd-preload-background {
  background-repeat: repeat !important;
  background-color: transparent !important;
  background-attachment: scroll !important;
  background-size: inherit !important;
  @include animation(preload-background, 40s, infinite, linear, 0s);
}

@-webkit-keyframes outer {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes outer {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes inner {
  0% {
    transform: rotate(-100.8deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes inner {
  0% {
    transform: rotate(-100.8deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes arc {
  0% {
    stroke-dasharray: 1 210.48671px;
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dasharray: 151.55043px, 210.48671px;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 1 210.48671px;
    stroke-dashoffset: -151.55043px;
  }
}

@keyframes arc {
  0% {
    stroke-dasharray: 1 210.48671px;
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dasharray: 151.55043px, 210.48671px;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 1 210.48671px;
    stroke-dashoffset: -151.55043px;
  }
}

.mkd-preloader {
  font-size: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -37.5px 0 0 -37.5px;
  display: inline-block;
  line-height: normal;
  z-index: 10;
  animation: outer 6600ms linear infinite;

  svg {
    animation: inner 1320ms linear infinite;

    circle {
      fill: none;
      stroke: $first-main-color;
      stroke-linecap: round;
      animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
    }
  }
}

img[data-lazy="true"] {
  opacity: 0;
}

.mkd-grid {
  width: $grid-width;
  margin: 0 auto;
}

.mkd-vertical-align-containers {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0 20px;

  @include mkdBoxSizing(border-box);

  &.mkd-25-50-25 {

    .mkd-position-left,
    .mkd-position-right {
      width: 25%;
    }

    .mkd-position-center {
      width: 50%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }

  }

  &.mkd-33-33-33 {

    .mkd-position-left,
    .mkd-position-center,
    .mkd-position-right {
      width: 33.33%;
    }

    .mkd-position-center {
      width: 50%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }

  }

  &.mkd-50-50 {

    .mkd-position-left,
    .mkd-position-right {
      width: 50%;
    }

  }

  &.mkd-33-66 {
    .mkd-position-left {
      width: 33.33%;
    }

    .mkd-position-right {
      width: 66.66%;
    }
  }

  &.mkd-66-33 {
    .mkd-position-left {
      width: 66.66%;
    }

    .mkd-position-right {
      width: 33.33%;
    }
  }

  .mkd-position-left {
    position: relative;
    float: left;
    z-index: 112;
    height: 100%;
  }
  .mkd-position-center {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    text-align: center;
    z-index: 111;
  }

  .mkd-position-right {
    position: relative;
    float: right;
    z-index: 112;
    height: 100%;
    text-align: right;
  }

  .mkd-position-left-inner,
  .mkd-position-center-inner,
  .mkd-position-right-inner {
    vertical-align: middle;
    display: inline-block;
  }

  .mkd-position-center-inner {
    height: 100%;
  }

  .mkd-position-right.mkd-has-widget .mkd-position-right-inner {
    height: 100%;
  }

  .mkd-position-left:before,
  .mkd-position-center:before,
  .mkd-position-right:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-right: -3px; /* adjusts for spacing */
  }

}

/* ==========================================================================
   #Row styles - start
   ========================================================================== */

.mkd-section {
  position: relative;

}

.mkd-grid-section .mkd-section-inner {
  width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 20;
}

.mkd-section-inner-margin {
  margin-left: -15px;
  margin-right: -15px;
}

.mkd-content-aligment-left {
  text-align: left;
}

.mkd-content-aligment-center {
  text-align: center;
}

.mkd-content-aligment-right {
  text-align: right;
}

/* #Parallax section styles - start
   ========================================================================== */

.mkd-parallax-section-holder {
  position: static;
  padding: 0px;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: 50% 0;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;

  &.mkd-vertical-middle-align {
    display: table;
    width: 100%;
  }

  &.mkd-vertical-middle-align .mkd-parallax-content-outer {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    padding: 100% 0;
  }

  .touch &.mkd-parallax-section-holder-touch-disabled:not(.mkd-full-screen-height-parallax) {
    height: auto !important;
    min-height: 300px;

    @include mkdBoxSizing(border-box);
  }

  .touch &.mkd-parallax-section-holder-touch-disabled {
    background-position: center top !important;
    background-attachment: scroll;
    background-size: cover;
  }

}

section.parallax_section_holder.vertical_middle_align .parallax_content_outer {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  padding: 100% 0;
}

/* #Video section styles - start
   ========================================================================== */

.mkd-section {

  .mkd-mobile-video-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
  }

  .mkd-video-overlay {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 11;

    &.mkd-video-overlay-active {
      background-image: url("img/pixel-video.png");
      background-position: 0px 0px;
      background-repeat: repeat;
      opacity: 1;
    }
  }

  .mkd-video-wrap {

    top: 0px;
    left: 0px;
    overflow: hidden;
    position: absolute;
    width: 100%;

    .mejs-container .mejs-controls {
      display: none !important;
    }

    .mejs-poster {
      background-size: cover !important;
      -moz-background-size: cover !important;
      -webkit-background-size: cover !important;
      -o-background-size: cover !important;
    }

    .mejs-container {
      background-color: transparent !important;
      background-image: none !important;
      height: auto !important;
    }

    .mejs-mediaelement {
      background: none !important;
      border: 0px !important;
    }

    .mejs-container .mejs-poster img {
      max-width: none !important;
      width: 100% !important;
    }

  }

}

/* ==========================================================================
   #Row styles - end
   ========================================================================== */

/* ==========================================================================
   #Search Results Styles - start
   ========================================================================== */
.mkd-search-holder {
  article {
    border-bottom: 1px solid #f0f1f4;
    padding-bottom: 23px;
    margin-bottom: 30px;

    .mkd-date {
      font-family: $headings-font-family;
      color: #c3c3c3;
      font-size: 12px;
      letter-spacing: 1px;
      font-weight: 600;
    }

    h4 {
      margin-top: 5px;
      margin-bottom: 12px;
    }
  }
}

/* ==========================================================================
   #Search Results Styles - end
   ========================================================================== */