.background-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.background-wrapper .background-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.background-container .container {
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 0 !important;
}

.element-center, 
.element-left {
  background-image: url("/assets/img/line.svg");
  position: absolute;
  height: 6px;
  z-index: 99;
}

.hero .element-center {
  --hero-line-width: calc(100vw / 14);
  width: var(--hero-line-width);
  top: calc(var(--hero-h1-font-size) / 2);
  left: calc(calc(var(--col-padding-left) + calc(var(--hero-line-width) / 2)) * -1);
}

.ready .element-left {
  --ready-line-width: calc(100vw / 14);
  width: var(--ready-line-width);
  top: calc(var(--ready-h1-font-size) / 2);
  left: calc(calc(calc(var(--base-size) * 7.5) + calc(var(--ready-line-width) / 3)) * -1);
}

.about .element-center {
  --about-line-width: calc(100vw / 14);
  width: var(--about-line-width);
  top: calc(var(--h1-font-size) / 2);
  left: calc(calc(var(--col-padding-left) + calc(var(--about-line-width) / 2)) * -1);
}

/*
.hero .hero-background, 
.all-in-one .features-dots:first-of-type, 
.all-in-one .features-dots:last-of-type, 
.details .img-col .details-dots, 
.details .order-2.img-col .details-dots, 
.try-for-free .try-dots, 
.contact .contact-dots-left, 
.testimony .testimony-dots:first-of-type, 
.testimony .testimony-dots:last-of-type, 
.plan .features-dots:first-of-type  {
  background-image: url("/assets/img/dots6x4.svg");
  position: absolute;
  width: 167px;
  height: 104px;
}
*/
.hero .background-left, 
.hero .background-right, 
.about .background-left, 
.about .background-right, 
.ready .background-left, 
.ready .background-right {
  /*background-image: url("/assets/img/dots6x8.svg");*/
  -webkit-mask-image:url("../img/dots6x8.svg");
  mask-image:url("../img/dots6x8.svg");
  display:inline-block;
  -webkit-mask-size:167px 232px;
  mask-size:167px 232px;
  position: absolute;
  width: 167px;
  height: 232px;
  z-index: -1;
}

.hero .background-left {
  background-color:var(--blue-1);
  bottom: 0;
  left: -14%;
}

.hero .background-right {
  background-color:var(--blue-0);
  top: calc(100vh / 4);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: -20%;
}

.about .background-left {
  background-color:var(--blue-1);
  top: 40%;
  left: -20%;
}

.about .background-right {
  background-color:var(--blue-0);
  top: calc(100vh / 4);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: -20%;
}

.ready .background-left {
  background-color:var(--blue-1);
  bottom: -90px;
  left: calc(var(--base-size) * 7.5);
}

.ready .background-right {
  background-color:var(--blue-1);
  top: -90px;
  right: 6%;
}

.about-page .hero .background-right, 
.about-page .hero .background-left, 
.contact-page .hero .background-right, 
.contact-page .hero .background-left, 
.services-page .hero .background-right, 
.services-page .hero .background-left, 
.solutions-page .hero .background-right, 
.solutions-page .hero .background-left {
  top: calc(100vh / 4);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.about-page .hero .background-right, 
.contact-page .hero .background-right, 
.services-page .hero .background-right,  
.solutions-page .hero .background-right {
  background-color:var(--blue-0);
  right: -20%;
}

.about-page .hero .background-left, 
.contact-page .hero .background-left, 
.services-page .hero .background-left,  
.solutions-page .hero .background-left {
  background-color:var(--blue-1);
  left: -20%;
}

.accordion .card-icon .background {
  -webkit-mask-image:url("../img/dots8x8.svg");
  mask-image:url("../img/dots8x8.svg");
  display:inline-block;
  -webkit-mask-size:180px 180px;
  mask-size:180px 180px;
  position: absolute;
  width: 180px;
  height: 180px;
  z-index: 0;
  background-color: var(--blue-1);
}


@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) { 
  
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {

}

@media (min-width: 768px) {

}

@media (min-width: 992px) {
  .hero .background-left {
    left: -14%;
}

@media (min-width: 1024px) {
  .hero .background-left {
  left: -16%;
  }
}

@media (min-width: 1440px) {
  .hero .background-left {
    /*top: 23%;*/
    /*top: calc(100vh / 3);*/
    left: -23%;
    bottom: 16%;
  }
}

@media (min-width: 1800px) {
.hero .background-left {
    left: -14%;
  }

}