/* ZN Section */
.zn_section {
  padding-top: 35px;
  padding-bottom: 35px;
  position: relative;
}
.zn_section--masked {
  padding-bottom: 55px;
}
.zn_section__source + .zn_section_size {
  position: relative;
}
.kl-bg-source + .zn_section_size {
  position: relative;
}
// .zn_section.zn_parallax {overflow: hidden;}

@media screen and (max-width: 991px) {
  .section-sidemargins .zn_section_size.full_width {
    margin-left: 15px;
    margin-right: 15px;
  }
}
.ios-fixed-position-scr ~ .zn_section {
  position: relative;
}

/* Modal Windows = Custom section */
.zn_section--inlinemodal {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.mfp-close-btn-in .zn_section--inlinemodal .mfp-close {
  right: -5px;
  top: -45px;
}
@media (max-width: 767px) {
  .mfp-close-btn-in .zn_section--inlinemodal {
    padding-top: 30px !important;
  }
  .mfp-close-btn-in .zn_section--inlinemodal .mfp-close {
    top: -5px;
  }
}
.zn_pb_editor_enabled .zn_section--inlinemodal.mfp-hide {
  display: block !important;
}
.zn_section--stretch-container {
  padding-left: 20px;
  padding-right: 20px;
}
.zn_section--stretch-container > .container {
  width: 100%;
}
/* Modal Overlay */
.zn_section-modalOverlay {
  background: rgba(143, 43, 162, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.modal-overlay-hidden ~ .zn_section-modalOverlay {
  display: none;
}
/* Modal Info Tip */
.zn_section-modalInfo {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 3;
  width: 70px;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.zn_section-modalInfo-title {
  display: block;
  margin-bottom: 20px;
}
.zn_section-modalInfo-tip {
  display: block;
  margin-bottom: 20px;
  position: relative;
}
.zn_section-modalInfo a {
  color: #000;
}
.zn_section-modalInfo a:hover,
.zn_section-modalInfo a:focus {
  color: rgba(0, 0, 0, 0.65);
}
.zn_section-modalInfo-bubble {
  display: none;
  width: 230px;
  right: 100%;
  position: absolute;
  top: -10px;
  font-weight: normal;
  background: rgba(0, 0, 0, 0.15);
  padding: 10px 10px 10px 15px;
  line-height: 1.5;
  text-align: start;
  border-radius: 3px;
}
.zn_section-modalInfo-bubble:after {
  content: "";
  position: absolute;
  right: -10px;
  top: 15px;
  border: 5px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.15);
}
.zn_section-modalInfo-tip:hover .zn_section-modalInfo-bubble {
  display: block;
}
.zn_section-modalInfo-toggleVisible {
  display: block;
  cursor: pointer;
}
.modal-overlay-hidden + .zn_section-modalInfo .dashicons-visibility:before {
  content: "\f530";
}

@media (min-width: 768px) {
  .zn-section-content_algn--middle,
  .zn-section-content_algn--bottom {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .zn-section-content_algn--middle > .row,
  .zn-section-content_algn--bottom > .row {
    width: 100%;
  }
  .zn-section-content_algn--middle > .row {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
  }
  .zn-section-content_algn--bottom > .row {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
}

/* Skewed Background Image (or color) */
.zn_section.section--skewed,
.zn_section.section--skewed-flipped {
  z-index: 1;
  background-color: transparent !important;
}
.zn_section.section--skewed .kl-bg-source:not(:empty) {
  -webkit-transform: skewY(3deg);
  -ms-transform: skewY(3deg);
  transform: skewY(3deg);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}
.zn_section.section--skewed .kl-bg-source__bgimage {
  -webkit-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  transform: skewY(-3deg);
  margin: -100px 0;
  -webkit-backface-visibility: hidden;
}
.zn_section.section--skewed .zn-bgSource-overlay {
  -webkit-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  transform: skewY(-3deg);
  margin: -100px 0;
  -webkit-backface-visibility: hidden;
}
/* Skewed Flipped */
.zn_section.section--skewed-flipped .kl-bg-source:not(:empty) {
  -webkit-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  transform: skewY(-3deg);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}
.zn_section.section--skewed-flipped .kl-bg-source__bgimage {
  -webkit-transform: skewY(3deg);
  -ms-transform: skewY(3deg);
  transform: skewY(3deg);
  margin: -100px 0;
  -webkit-backface-visibility: hidden;
}
.zn_section.section--skewed-flipped .zn-bgSource-overlay {
  -webkit-transform: skewY(3deg);
  -ms-transform: skewY(3deg);
  transform: skewY(3deg);
  margin: -100px 0;
  -webkit-backface-visibility: hidden;
}

/**
 * Parallax Layers
 */
.zn-prLayer {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  &.zn-prLayer--align-top-left {
    top: 0;
    left: 0;
  }
  &.zn-prLayer--align-top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  &.zn-prLayer--align-top-right {
    top: 0;
    right: 0;
  }
  &.zn-prLayer--align-center-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  &.zn-prLayer--align-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &.zn-prLayer--align-center-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  &.zn-prLayer--align-bottom-left {
    bottom: 0;
    left: 0;
  }
  &.zn-prLayer--align-bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  &.zn-prLayer--align-bottom-right {
    bottom: 0;
    right: 0;
  }
  // If layers are over container
  &.zn-prLayer--over {
    z-index: 1;
  }
  // Blur
  &.zn-prLayer--blur-simple {
    filter: blur(3px);
  }
  &.zn-prLayer--blur-deep {
    filter: blur(7px);
  }
  &.zn-prLayer--blur-deeper {
    filter: blur(12px);
  }
}