/* -------------DELETE LATER START -------------------*/
/* body {
  border: 3px dashed red;
  box-sizing: border-box;
} 
@media (min-width: 576px) {
  body {
    border: 3px dashed orange;
  }
}
@media (min-width: 768px) {
  body {
    border: 3px dashed green;
  }
}
@media (min-width: 992px) {
  body {
    border: 3px dashed blue;
  }
}
@media (min-width: 1200px) {
  body {
    border: 3px dashed violet;
  }
} */
.test {
  border: 1px dashed hotpink !important;
}
/* -------------DELETE LATER END -------------------*/

/* GENERAL START */
/* GENERAL COLOR */
:root {
  --color-primary: #32a0cc;
  --color-secondary: #766abc;
  --color-basic-gray: #45505d;
  --color-basic-dark-gray: #2d343e;
  --color-basic-2dark-gray: #181c21;
  --color-gradient-start: #32a0cc;
  --color-gradient-stop: #766abc;
}

.bg-gray-base {
  background-color: #45505d;
}

.bg-gray-base-dark {
  background-color: #2d343e;
}

.bg-gray-base-2dark {
  background-color: #181c21;
}

.text-color-grey {
  color: rgba(18, 21, 26, 0.5) !important;
}

.text-c-grey {
  color: #45505d !important;
}

/* GENERAL TEXT */
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 1rem;
  color: #45505d;
}

.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5,
.h6,
h6 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  color: #45505d;
}

.h1,
h1 {
  line-height: 1.111em;
  font-size: 2.625rem;
}

.h2,
h2 {
  line-height: 1.25em;
  font-size: 2.25rem;
}

.h3,
h3 {
  line-height: 1.25em;
  font-size: 1.875rem;
}

.h4,
h4 {
  line-height: 1.5em;
  font-size: 1.375rem;
}

.h5,
h5 {
  line-height: 1.5em;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.h6,
h6 {
  line-height: 1.5em;
  font-size: 1rem;
  text-transform: uppercase;
}

/* TITLE LINE */
.title-line-custom {
  padding-top: 1em;
}

.title-line-custom:after {
  /* left: auto; */
  /* right: 0;  */
  content: "";
  display: inline-block;
  width: 70px;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
  background-image: linear-gradient(
    to right,
    var(--color-gradient-start),
    var(--color-gradient-stop)
  ) !important;
  /* background-color: var(--color-primary); */
}

/* ICONS */
.icon-custom {
  fill: none !important;
  stroke: url(#grad-custom);
  /* stroke: linear-gradient( var(--color-gradient-start), var(--color-gradient-stop)) !important;  */
  stroke-width: 1.5px;
  stroke-miterlimit: 3px;
}

/* BUTTONS */
.btn-custom {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 50em !important;
  padding: 0.05rem 0.75rem !important;
}

.btn-form:hover {
  background-color: var(--color-secondary) !important;
}

/* GENERAL END */

/* HERO START */
#hero {
  background-image: url(graphics/images/codelocker-header01.png);
}

.no-shadow {
  box-shadow: none !important;
}

.header-custom {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .header-custom h2 {
    font-size: 32px !important;
    margin-bottom: 20px !important;
  }
  .header-custom p {
    line-height: 1.5 !important;
    margin-bottom: 30px !important;
    font-size: 18px !important;
  }
}

@media (min-width: 992px) {
  .lqd-parallax-images-2 .liquid-img-group-container:first-child {
    margin-top: 0px;
    margin-right: -20%;
    margin-left: -10%;
  }

  .lqd-parallax-images-2 .liquid-img-group-container:nth-child(2) {
    bottom: 80px;
    left: 30%;
  }
}
/* HERO END */

/* NAV START */
.navbar-brand-inner {
  max-width: 200px !important;
}

.menu-custom a {
  font-size: 16px !important;
  font-weight: 500 !important;
}

.header-logo-zeva svg {
  width: 80px;
  padding-top: 10px;
  opacity: 0.5;
  transition: 0.3s;
}

.header-logo-zeva svg:hover {
  opacity: 1;
  transition: 0.3s;
}

/* .is-stuck {
	background-color: rgba(255, 255, 255, 0.75) !important;
	box-shadow: 0 2px 8px rgba(#000, 0.7) !important;
}

.is-stuck .main-nav > li > a {
  color: var(--color-basic-dark-gray) !important;
} */
@media screen and (max-width: 1199px) {
  .main-header .navbar-header {
    background-color: #2b2e31 !important;
  }
  .nav-trigger .bar {
    background-color: #fff !important;
  }
}

@media (min-width: 1200px) {
  .pb-lg-35 {
    padding-bottom: 35px !important;
  }
}

/* NAV END */

/* SECTION 1 - CHALLENGE START */
.px-c {
  padding-left: 2.3rem !important;
  padding-right: 2.3rem !important;
}

#challenge svg {
  height: 52px;
  width: 52px;
}

#challenge h3 {
  margin-bottom: 10px !important;
}
/* SECTION 1 - CHALLENGE END */

/* SECTION 2 - SOLUTION START */
.solution-numbers h6 {
  font-size: 17px !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* #solution h4 {
  margin-bottom: 15px !important;
  font-size: 22px !important;
  line-height: 1.3em !important;
} */

#solution .p-l {
  padding-right: 30px;
}

#solution .p-c {
  padding-right: 15px;
  padding-left: 15px;
}

#solution .p-r {
  padding-left: 30px;
}

@media (max-width: 767px) {
  #solution .p-l,
  #solution .p-c,
  #solution .p-r {
    padding-left: 15px;
    padding-right: 15px;
  }
}
/* SECTION 2 - SOLUTION END */

/* SECTION 3- HOW IT WORKS START */
#howitworks svg {
  height: 20px;
  width: 20px;
}

.icon-custom-2 {
  fill: var(--color-primary);
  stroke: none;
}

.accordion-custom {
  line-height: 1.1em !important;
  padding-top: 1.15em !important;
  padding-bottom: 1.15em !important;
}
/* SECTION 3 - HOW IT WORKS END */

/* SECTION 4 - STEPS START */
#steps svg {
  height: 45px !important;
  width: 45px !important;
}

#steps .icon-custom {
  stroke: var(--color-basic-gray) !important;
  stroke-width: 1px !important;
}

#steps .iconbox:hover .icon-custom {
  stroke: #fff !important;
}
/* SECTION 4 - STEPS END */

/* SECTION 5 - MARKETS START */
.fancy-box-markets-custom {
  padding-bottom: 65%;
}

@media (min-width: 576px) {
  .fancy-box-markets-custom {
    padding-bottom: 35%;
  }
}

@media (min-width: 992px) {
  .fancy-box-markets-custom {
    padding-bottom: 100%;
  }
}

.fancy-box-overlay.scheme-light .cb-overlay {
  /* background-color: rgba(85, 85, 85, 0.5) !important; */
}

.bg-gradient-black-transparent-bt {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgba(0, 0, 0, 0.99)),
    to (rgba(0, 0, 0, 0.15))
  ) !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.99) 0%,
    rgba(0, 0, 0, 0.15) 100%
  ) !important;
}

#markets .fancy-box p {
  color: white !important;
}

/* NEW SECTION */
.markets-custom-overlay {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.markets-custom-overlay {
  background-color: rgba(0, 0, 0, 0.4);
}

.markets-custom-shadowed {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

/* SECTION 5 - MARKETS END */

/* SECTION 6 - WHY ZEVA START */
#whyzeva .iconbox:hover .icon-custom {
  stroke: #fff !important;
}

#whyzeva svg {
  margin-bottom: 15px !important;
  height: 52px !important;
  width: 52px !important;
}

@media (max-width: 767px) {
  #whyzeva .lqd-column-inner {
    transform: none !important;
  }
  #whyzeva .iconbox {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}
/* SECTION 6 - WHY ZEVA END */

/* FOOTER START */
#footer h3 {
  color: white !important;
  margin-bottom: 0.75rem !important;
}

.footer-nav,
.footer-nav > li,
.footer-nav > li > a {
  display: block;
}

.footer-nav > li > a {
  padding: 0;
}
/* FOOTER END */

/* BACK TO TOP START */
#back-to-top {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: -20px;
  right: 30px;
  z-index: 9;
  transition: 0.3s;
}

#back-to-top .iconbox-icon-container {
  transition: 0.3s;
  box-shadow: 0 11px 22px rgba(18, 21, 26, 0.25);
}

#back-to-top .iconbox-icon-container:hover {
  background-color: var(--color-secondary);
  box-shadow: 0 5px 10px rgba(18, 21, 26, 0.35);
  transition: 0.3s;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}
/* BACK TO TOP END */