body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.reusable{padding:5%;}
ul{padding:0;}
.preload{
  background-image: 
  url('/imageserver/Reusable/trex/havana-gold-style.jpg'),
  url('/imageserver/Reusable/trex/island-mist-style.jpg'),
  url('/imageserver/Reusable/trex/lava-rock-style.jpg'),
  url('/imageserver/Reusable/trex/spiced-rum-style.jpg'),
  url('/imageserver/Reusable/trex/tiki-torch-style.jpg');
  height:0;
width:0;
}
.maincontent {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.maincontent_wrapper {
  padding-top: 0;
}
.row{
  margin:0! important;
  padding:0! important;
}
img{
width:100%;
}
.myButton {
     margin-top:20px;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color:#f9f9f9;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-size:18px;
font-weight:bold;
padding:10px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;

}

.myButton:hover {
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
background-color:#e9e9e9;
}
.myButton:active {
position:relative;
top:1px;
}

p {
color:#737373;
}

h1 {
color:#737373;
}

ul li{
  list-style-type:none;
}
.style-content{
  padding-inline:30px;
}
.flex-group{
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  text-align: center;
  flex-wrap:wrap;
  margin-block:10px;
}
.flex-item{
  max-width:250px;
  min-width:150px;
  cursor:pointer;
  display:flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-block:10px;
}
.flex-item p{
  margin-top:0;
}
.style-image{
  text-align: center;
}
.style-image img{
  max-width:700px;
  text-align: center;
  margin:0 auto;
}
.box{
  padding-top:2%;
}
.container .box .product__img {
opacity: 0;
animation: fadeImg 1s ease-in-out forwards;
animation-delay: 1s;
}

.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;
}


.container .box .product__disc {
display: flex;
padding:10px 20px;
color:black;
animation: showDisc 1s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
}
.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;
}

.container .box .product__disc .product__disc--content .disc__content--about h1 {
font-size: 32px;
}
.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;
}
.container .box .product__disc .product__disc--content .disc__content--about p {
font-size: 14px;
}
.container .box .product__disc .product__disc--content .product__view--more {
display: flex;
align-items: center;
cursor: pointer;
}

.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;
}
.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;
}
.container .box .product_buttons {
text-align:center;
display:flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width:100%;
white-space: nowrap;
}
.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;
}
.container .box .product_buttons .contact {
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;
}
.container .box .product_buttons .contact:hover {
background: #358546;
color: #FFF;
box-shadow: 0 0 10px #358546;
}

.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;
}
.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;
}
}