/* ====MAIN============================*/
.product-bg {
  
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
  background-image: url(/Images/MCI-site/Backgrounds/MCI-Background_3.jpg);
  /*animation: animate-pos-main, animate-sca-main 30s ease-in-out infinite alternate-reverse;*/
  }
  
  @keyframes animate-sca-main {
  0% { transform: scale(1.0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
  }
  @keyframes animate-pos-main {
    0% {background-position: 0% 100%;}
    100% {background-position: 100% 70%;}
  }
  @media (max-width: 500px) {
    .product-bg {
        padding-top: 10rem;
    padding-bottom: 50rem;
  }
} 
  @media (min-width: 500px) {
    .product-bg {
   padding-top: 10rem;
    padding-bottom: 30rem;
  }
} 
@media (min-width: 1000px) {
    .product-bg {
        padding-top: 10rem;
    padding-bottom: 40rem;
  }
}
@media (min-width: 1050px) {
  .product-bg {
  padding-bottom: 20rem;
}
}
@media (min-width: 1300px) {
  .product-bg {
  padding-bottom: 28rem;
}
}
@media (min-width: 1400px) {
  .product-bg {
  padding-bottom: 36rem;
}
}
@media (min-width: 1800px) {
  .product-bg {
  padding-bottom: 66rem;
}
}
 
  
/* ====HEADLINES============================*/
.caption-product {
    position: absolute;
    left: 0;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    color: var(--white);
    text-shadow: black 1px 1px 2px;
  }

  @media (max-width: 500px) {
    .caption-product {
      margin-top: -2rem;
    }
  }
  @media (min-width: 500px) {
    .caption-product {
      margin-top: 0rem;
    }
  }
  @media (min-width: 1000px) {
    .caption-product {
      margin-top: -2rem;
    }
  }
  @media (min-width: 1050px) {
    .caption-product {
        margin-top: -2rem;
      }
  }
  @media (min-width: 1300px) {
    .caption-product {
        margin-top: -2rem;
      }
  }
  @media (min-width: 1400px) {
    .caption-product {
        margin-top: -2rem;
      }
  }
  @media (min-width: 1800px) {
    .caption-product {
        margin-top: -2rem;
      }
    .caption-product h1{
      font-size: 4rem;
      line-height: 3.5rem;    
      }
  }


/*==PRODUCT==================================*/
@media (max-width: 500px) {
  .product-card {
    width: 25rem;
    margin-top: 4rem; 
  }

  }
  @media (min-width: 500px) {
    .product-card {
      width: 40rem;
      margin-top: 4rem; 
    }
  
    }
  @media (min-width: 900px) {
  .product-card {
  width: 40rem;
    margin-top: 4rem; 
  }

  }
  @media (min-width: 1300px) {
    .product-card {
      width: 60rem;
    margin-top: 4rem; 
    }
  }
  @media (min-width: 1300px) {
    .product-card {
      width: 40rem;
    margin-top: 4rem; 
    }
  }
    @media (min-width: 1800px) {
      .product-card {
        width: 60rem;
        margin-top: 4rem; 
       
       
      }
    }