body{
    font-family: 'Poppins',  'Montserrat', sans-serif;
}
html {
    scroll-behavior: smooth;
  }
.maincontent{max-width:100%;}
p{
 color:black;
}

h1{
    color:black;
}

h2{ color:black;}

.my-container{
    max-width:1600px;
    margin:0 auto;
    padding:50px 3%;
}

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

.flex-item{
  width:200px;
}

.my-container .box .product__img {
 opacity: 0;
 animation: fadeImg 1s ease-in-out forwards;
 animation-delay: 1s;
}
.my-container .box .product__video {
 
}
.my-container .box .product__video .video {
 display: flex;
 opacity: 0;
 animation: upVideo 1s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
 animation-delay: 1.2s;
}


.my-container .box .product__disc {
 background-color:#FFEEDB;
 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;
}
.my-container .box .product_buttons {
 text-align:center;
 
}
.my-container .box .product_buttons .btn {
 color:black;
 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 black;
 background: transparent;
 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: #000;
 color: #FFF;
}

.my-container .box .product_buttons .warranty {
 border: 2px solid black;
 background: transparent;
 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: #000;
 color: #FFF;
}


/*
 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;
 }
}