/** Shopify CDN: Minification failed

Line 531:0 Expected "}" to go with "{"

**/
.main-element {
  position: relative;
  text-align: center;
  padding: 18% 20% 2% 20%;
  margin-top: 40px;
}
.main-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
img.main-img {
  width: 50%;
}
img.main-img-mobile {
  display: none;
  width: 10em;
}
h2.head-black,
h2.head-white {
  font-size: 32px;
  font-weight: 700;
}
h2.head-black{
  line-height: 32px;
}
.icon-img {
  display: flex;
  width: 15%;
  height: 20%;
  position: absolute;
  inset: auto 0px 0px;
  margin: auto;
  bottom: 32%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
img.icon {
    width: 33%;
}
h5.icon-head {
    color: #fff;
    font-size: 19px;
    font-weight: 500;
    margin-top: 5%;
}
.main-img {
  object-fit: cover;
  animation: img_opacity forwards;
  animation-timeline: view(block);
}
.main-img-mobile {
  object-fit: cover;
  animation: img_opacity-slide forwards;
  animation-timeline: view(block);
}

h2.head-black,
h2.head-white {
  object-fit: cover;
  animation: heading_opacity forwards;
  animation-timeline: view(block);
}
.cstm-icon-1 {
  object-fit: cover;
  animation: img_key forwards;
  animation-timeline: view(block);
}
.cstm-icon-2 {
  object-fit: cover;
  animation: img_key_2 forwards;
  animation-timeline: view(block);
}
.cstm-icon-3 {
  object-fit: cover;
  animation: img_key_3 forwards;
  animation-timeline: view(block);
}
.cstm-icon-4 {
  object-fit: cover;
  animation: img_key_4 forwards;
  animation-timeline: view(block);
}
.cstm-icon-5 {
  object-fit: cover;
  animation: img_key_5 forwards;
  animation-timeline: view(block);
}
@media(min-width: 1550px){
img.icon{
  width: 25%;
}
  
   @keyframes img_opacity {
    0% {
      opacity: 0.4;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes heading_opacity {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100%{
      opacity: 1;
    }
  }
  @keyframes img_key {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(-31rem, 0px);
      opacity: 1;
    }
     100% {
      transform: translate(-31rem, 0px);
      opacity: 1;
    }
  }
  @keyframes img_key_2 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(-22rem, -12rem);
      opacity: 1;
    }
    100% {
      transform: translate(-22rem, -12rem);
      opacity: 1;
    }
  }
  @keyframes img_key_3 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(0px, -18rem);
      opacity: 1;
    }
    100% {
      transform: translate(0px, -18rem);
      opacity: 1;
    }
  }
  @keyframes img_key_4 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(22rem, -12rem);
      opacity: 1;
    }
    100% {
      transform: translate(22rem, -12rem);
      opacity: 1;
    }
  }
  @keyframes img_key_5 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(31rem, 0px);
      opacity: 1;
    }
    100% {
      transform: translate(31rem, 0px);
      opacity: 1;
    }
  }
}
@media (min-width: 1281px) and (max-width: 1549px) {
  @keyframes img_opacity {
    0% {
      opacity: 0.4;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes heading_opacity {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100%{
      opacity: 1;
    }
  }
  @keyframes img_key {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(-21rem, 0px);
      opacity: 1;
    }
     100% {
      transform: translate(-21rem, 0px);
      opacity: 1;
    }
  }
  @keyframes img_key_2 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(-14rem, -10rem);
      opacity: 1;
    }
    100% {
      transform: translate(-14rem, -10rem);
      opacity: 1;
    }
  }
  @keyframes img_key_3 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(0px, -14rem);
      opacity: 1;
    }
    100% {
      transform: translate(0px, -14rem);
      opacity: 1;
    }
  }
  @keyframes img_key_4 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(14rem, -10rem);
      opacity: 1;
    }
    100% {
      transform: translate(14rem, -10rem);
      opacity: 1;
    }
  }
  @keyframes img_key_5 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(21rem, 0px);
      opacity: 1;
    }
    100% {
      transform: translate(21rem, 0px);
      opacity: 1;
    }
  }
}
@media (max-width: 699px) {
  .icon-img.cstm-icon-1, .icon-img.cstm-icon-2, .icon-img.cstm-icon-3, .icon-img.cstm-icon-4, .icon-img.cstm-icon-5 {
    transition: .5s;
    opacity: 0;
  }
  .icon-img.cstm-icon-3 {
    top: -35%;
    right: -30%;
}
  .icon-img.cstm-icon-2 {
    top: -10%;
    right: -45%;
}
  .icon-img.cstm-icon-4 {
    top: 20%;
    right: -50%;
}
   .icon-img.cstm-icon-1 {
    top: 50%;
    right: -45%;
}
   .icon-img.cstm-icon-5 {
     margin-top: -40px;
    top: 78%;
    right: -30%;
}
  h5.icon-head{
    margin-top: unset;
    margin-left: 5%;
    font-size: 14px;
  }
  .main-image{
    padding-top: 360px;
  }
  
  h2.head-white {
    font-size: 16px;
    transition: .5s;
    /* transform: translateY(-10rem);
    opacity: 0; */
  }
  h2.head-black{
    transition: .5s;
     /* transform: translateY(-12rem);
    opacity: 0; */
    font-size: 25px;
  }
  img.icon {
    width: 16%;
    margin: 0 4px;
  }
  img.main-img-mobile {
    display: block;
    position: absolute;
    bottom: 6em;
    left: 0;
    transition: .7s;
    opacity: 0;
  }
  img.main-img {
    display: none;
  }
  .main-element {
    padding: 10% 0;
    height: 30em;
  }
  .icon-img {
    width: 50%;
    height: 8%;
    flex-direction: row;
    /* bottom: 21%; */
  }
  /* @keyframes heading_opacity {
    0% {
      transform: translate(0, 4rem);
      opacity: 0;
    }
    40% {
      transform: translate(0, 4rem);
      opacity: 0;
    }
    50% {
      transform: translate(0, 2rem);
      opacity: 1;
    }
    100% {
      transform: translate(0, 2rem);
      opacity: 1;
    }
  }
  @keyframes img_opacity-slide {
    0% {
      transform: translate(-17rem, 0);
      opacity: 0.5;
    }
    70% {
      transform: translate(-74%, 0);
      opacity: 1;
    }
    100% {
      transform: translate(-74%, 0);
      opacity: 1;
    }
  }

  @keyframes img_key {
    0% {
      transform: translate(10rem, -4.5rem);
    }
    50% {
      transform: translate(3rem, -4.5rem);
    }
    100% {
      transform: translate(3rem, -4.5rem);
    }
  }
  @keyframes img_key_2 {
    0% {
      transform: translate(7rem, -11.5rem);
    }
    50% {
      transform: translate(2rem, -11.5rem);
    }
    100% {
      transform: translate(2rem, -11.5rem);
    }
  }
  @keyframes img_key_3 {
    0% {
      transform: translate(5rem, -15rem);
    }
    50% {
      transform: translate(-1rem, -15rem);
    }
     100% {
      transform: translate(-1rem, -15rem);
    }
  }
  @keyframes img_key_4 {
    0% {
      transform: translate(9rem, -8rem);
    }
    50% {
      transform: translate(4rem, -8rem);
    }
    100% {
      transform: translate(4rem, -8rem);
    }
  }
  @keyframes img_key_5 {
    0% {
      transform: translate(10rem, -1rem);
    }
    50% {
      transform: translate(0rem, -1rem);
    }
    100% {
      transform: translate(0rem, -1rem);
    }
  }
} */
}

@media(min-width: 700px) and (max-width: 1280px){
  .main-element{
    padding: 22% 20% 2% 20%;
  }
  .icon-img{
    bottom: 22%;
  }
  h2.head-black, h2.head-white{
    font-size: 18px;
  }
  @keyframes img_key {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(-18rem, 0px);
      opacity: 1;
    }
     100% {
      transform: translate(-18rem, 0px);
      opacity: 1;
    }
  }
  @keyframes img_key_2 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(-12rem, -6rem);
      opacity: 1;
    }
    100% {
      transform: translate(-12rem, -6rem);
      opacity: 1;
    }
  }
  @keyframes img_key_3 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(0px, -10rem);
      opacity: 1;
    }
    100% {
      transform: translate(0px, -10rem);
      opacity: 1;
    }
  }
  @keyframes img_key_4 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(12rem, -6rem);
      opacity: 1;
    }
    100% {
      transform: translate(12rem, -6rem);
      opacity: 1;
    }
  }
  @keyframes img_key_5 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      transform: translate(18rem, 0px);
      opacity: 1;
    }
    100% {
      transform: translate(18rem, 0px);
      opacity: 1;
    }
}