:root{
    --main-color:#e0cfc2;
    --dark-color:#4b5668;
    --grey-color:#88807e;
    --brown-color:#806f5d;
}

body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
}

.maincontent {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.maincontent_wrapper {
    padding-top: 0;
}

.my-video{
    text-align:center;
    background-image: url('/imageserver/Reusable/vicwest-truenature/prod-forest-min.jpg');
    background-position: center;
    padding-block:3%;
}

h1{
    font-size:2.5rem;
}

h3{
    margin:0;
    padding:0;
}

img{
    width:100%;
}
video{
    width:600px;
    height:auto;
    margin:0 auto;
}

.flex-group{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap:wrap;
}

.gallery-item img{
    max-width:400px;
}

.my-container{
    max-width:1400px;
    margin:1em auto ;
    padding-inline:1em;
}

.my-header{
    margin:2em auto;
    max-width:1200px;
    text-align: center;
}

.my-header h1{
    text-transform: uppercase;
}

  .my-container .box .product__img {
    opacity: 0;
    animation: fadeImg 1s ease-in-out forwards;
    animation-delay: 1s;
  }
  
  .my-container .box .product__video .video {
    opacity:0;
    display: flex;
    animation: upVideo 1s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 1.2s;
  }
  
  
  .my-container .box .product__disc {
  background-image:linear-gradient(to bottom, var(--main-color), #fff);
    display: flex;
    padding:10px 20px;
    color:black;
    animation: showDisc 1s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
  }
  .my-container .box .product__disc .product__disc--content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    animation: fadeContent 1s ease-in-out forwards;
    animation-delay: 1s;
    opacity: 0;
  }
 
  .my-container .box .product__disc .product__disc--content .disc__content--about h1 {
    font-size: 32px;
  }
  .my-container .box .product__disc .product__disc--content .disc__content--about span {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    opacity: 0.5;
  }
  .my-container .box .product__disc .product__disc--content .disc__content--about p {
    font-size: 14px;
  }
  .my-container .box .product__disc .product__disc--content .product__view--more {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .my-container .box .product__disc .product__disc--content .product__view--more .view__more--block {
    background: #f6f6f6;
    z-index: 1;
    transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms;
  }
  .my-container .box .product__disc .product__disc--content .product__view--more p {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    z-index: 2;
    margin-left: 15px;
  }
  .my-container .box .product_buttons {
    text-align:center;
    
  }
  .my-container .box .product_buttons .btn {
    width: 150px;
    padding:10px 0px;
    font-size: 16px;
    font-weight: bold;
    -webkit-transition: ease-in-out 220ms;
    -moz-transition: ease-in-out 220ms;
    -ms-transition: ease-in-out 220ms;
    -o-transition: ease-in-out 220ms;
    transition: ease-in-out 220ms;
    cursor: pointer;
  }
  .my-container .box .product_buttons .contact {
    border: 2px solid var(--dark-color);
    background: transparent;
    color: var(--brown-color);
    opacity: 0;
    animation: fadeWish 1s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 1s;
  }
  .my-container .box .product_buttons .contact:hover {
    background: var(--main-color);
    color: #FFF;
    box-shadow: 0 0 10px var(--main-color);
  }
  
  .my-container .box .product_buttons .warranty {
    border: 2px solid #316D4F;
    background: transparent;
    color: #316D4F;
    opacity: 0;
    animation: fadeWish 1s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 1s;
  }
  .my-container .box .product_buttons .warranty:hover {
    background: #358546;
    color: #FFF;
    box-shadow: 0 0 10px #358546;
  }
  
  
  /*
    keyframes
   */
  @keyframes openBox {
    0% {
      width: 0px;
      left: 15%;
    }
    100% {
      left: 15%;
    }
  }
  @keyframes fadeImg {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes upVideo {
    0% {
      opacity: 0;
      bottom: -20px;
    }
    100% {
      opacity: 1;
      bottom: 0px;
    }
  }
  @keyframes showDisc {
    0% {
      width: 0px;
      left: 450px;
    }
    100% {
      width:100%; 
      left: 450px;
    }
  }
  @keyframes fadeContent {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fadeWish {
    0% {
      opacity: 0;
      bottom: -25px;
    }
    100% {
      opacity: 1;
      bottom: 0;
    }
  }
  @keyframes fadeBuy {
    0% {
      opacity: 0;
      bottom: -25px;
    }
    100% {
      opacity: 1;
      bottom: 0;
    }
  }
  
  #lightgallery {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 5px;
  }
   
  #lightgallery img {
  transition: all .2s ease-in-out;
  height: 300px;
  width: 300px;
  margin: 15px;
  border-radius: 5px;
  border: solid 1px #000;
  }
   
  #lightgallery img:hover {
    transform: scale(1.1);
  }