/*section */
.section{ float: left; width: 100%; margin-bottom: 20px; position: relative;}
.cat-box-title{float: left; width: 100%;position: relative;}
.cat-box-content{ float: left; width: 100%; position: relative;}
.post-title {}
.post-sapo{ line-height: 22px;}
/*End */
/* categories */
.page-head{ float: left; width: 100%;}
.post-listing{float: left; width: 100%;}
/*End */
/* rows item */
.item-list{float: left; width: 100%;}
.first-news{float: left; width: 100%;}
.other-news{float: left; width: 100%; }
.description {  display: grid;}
/*End */
/*post-thumbnail */
.post-thumbnail {    float: left;    margin-right: 15px; position: relative;}
.thumb {  margin-bottom: 10px;    float: left;    width: 100%; position: relative;}
.thumb-full{ width: 100%; float: left; object-fit: cover;}
.thumb270 { width:270px; float: left;}
.thumb260 { width:260px; float: left;}
.thumb250 { width:250px; float: left;}
.thumb240 { width:240px; float: left;}
.thumb230 { width:230px; float: left;}
.thumb220 { width:220px; float: left;}
.thumb210 { width:210px; float: left;}
.thumb200 { width:200px; float: left;}
.thumb190 { width:190px; float: left;}
.thumb180 { width:180px; float: left;}
.thumb170 { width:170px; float: left;}
.thumb160 { width:160px; float: left;}
.thumb150 { width:150px; float: left;}
.thumb140 { width:140px; float: left;}
.thumb130 { width:130px; float: left;}
.thumb120 { width:120px; float: left;}
.thumb110 { width:110px; float: left;}
.thumb100 { width:100px; float: left;}
.thumb90 { width:90px; float: left; }
.thumb80 { width:80px; float: left; }
.thumb70 { width:70px; float: left; }
.thumb60 { width:60px; float: left; }
/*End */
/*post-meta */
.post-meta{  color: #757575; font-size: 12px; padding-top: 5px;}
.post-tag{padding-top: 5px; }
.post-related {    float: left; padding-bottom: 15px;    width: 100%;}
.post-social{float: left; padding-bottom: 15px;    width: 100%;}
/*End */
/*more */
.more-link{float: left; width: 100%; }
.more-link-left{ float: left;}
.more-link-right{ float: right;}
/*End */

.backround_black {
background: rgba(19,19,19,0);
background: -moz-linear-gradient(top, rgba(19,19,19,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 48%, rgba(0,0,0,0.6) 66%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,0)), color-stop(0%, rgba(0,0,0,0)), color-stop(48%, rgba(0,0,0,0.44)), color-stop(66%, rgba(0,0,0,0.6)));
background: -webkit-linear-gradient(top, rgba(19,19,19,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 48%, rgba(0,0,0,0.6) 66%);
background: -o-linear-gradient(top, rgba(19,19,19,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 48%, rgba(0,0,0,0.6) 66%);
background: -ms-linear-gradient(top, rgba(19,19,19,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 48%, rgba(0,0,0,0.6) 66%);
background: linear-gradient(to bottom, rgba(19,19,19,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 48%, rgba(0,0,0,0.6) 66%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#000000', GradientType=0 );
float: left; width: 100%; z-index:1; position:absolute; bottom:0; padding:10px; overflow:hidden; }
.title_fix_text {  white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block; float: left; width: 100%;}
.title_fix_text_full { text-overflow:ellipsis; overflow:hidden; display:block; float: left; width: 100%;}
.color_white { color:#ffffff; }


.first-news.item_1 { padding-bottom:15px; }
.first-news.item_1:last-child { padding-bottom:0; }

.other-news.item_1 { padding-bottom:15px; }
.other-news.item_1:last-child { padding-bottom:0; }

.item-list.item_1 { padding:10px 0; border-bottom:solid 1px #e0e0e0; }
.item-list.item_1:last-child { border-bottom:0; padding-bottom:0 !important; }
.item-list.item_1:first-child { padding-top:0 !important; }

.item-list.item_2 {
    padding-bottom: 25px;
}
.article.item_1 { padding:20px 0; border-bottom:solid 1px #e0e0e0; }
.article.item_1:last-child { border-bottom:0; padding-bottom:0 !important; }
.article.item_1:first-child { padding-top:0 !important; }

.post-tag-item { border:solid 1px #e0e0e0; border-radius:3px; color:#757575; font-size:12px; padding:5px 10px; float:left; margin-right:5px; font-weight:300; }
.item-ms2.item_1 { margin-bottom:15px; }
.description.padleft15 {padding-left: 15px;}

.col2.item_2 {    margin-bottom: 20px;}
.title-cat {    float: left;}
.statusColor{color: #D52528}
.middle-text.videos {
    border: 0;
    padding: 0;
}
.product_item1 {    margin-bottom: 30px;}
.post-product{padding-top: 10px; float: left; width: 100%;}
.giavnd{font-size: 16px;font-weight: 500; color:#B10058; }
.muahang {    border: solid 1px #e0e0e0;    padding: 5px;    border-radius: 2px;    font-size: 12px;    float: left;}
.muahang:hover{ background-image: linear-gradient(90deg,#94103e 0,#db004d);    border: solid 1px #b60845; color: #fff;}
.mright{float: right;}
.rows.item_1{padding-bottom: 10px;}
.title-product.item_1 {    padding-bottom: 10px;}
.item-list.bottom20 {    margin-bottom: 20px;}
.boder {    border: solid 1px #e0e0e0;}

.middle-item {position: relative;width: 100%; background-color: #000;}
.middle-image {opacity: 1;display: block;width: 100%;  height: auto;transition: .5s ease;backface-visibility: hidden; margin-bottom: 10px;}
.middle-hover {transition: .5s ease;opacity: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);text-align: center;}
.middle-item:hover .middle-image {opacity: 0.3;}
.middle-item:hover .middle-hover {opacity: 1;}
.middle-text {color: #fff;border: solid 1px #e0e0e0;border-radius: 3px;padding: 8px 15px;}

.grayfilter {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);}
.grayfilter:hover {
	-webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
	filter: grayscale(0);}

/* Bengin hover-effect css*/
.figure_1 {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #000000;
  text-align: center;
}
.figure_1 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 35px 15px;
  width: 100%;
  height: 100%;
}
.figure_1 figcaption::before {
  position: absolute;
  top: 50%;
  right: 30px;
  bottom: 50%;
  left: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: #ffffff;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.figure_1 h3,
.figure_1 p {
  margin: 0 0 10px;
  opacity: 0; color: #fff;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s,-webkit-transform 0.35s,
  -moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}

.figure_1 h3 {
  word-spacing: -0.15em;
  -webkit-transform: translate3d(0%, 50%, 0);
  transform: translate3d(0%, 50%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.figure_1 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
.figure_1 p {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.figure_1 figcaption {
  position: absolute;
  color: #ffffff;
}
.figure_1:hover img {
  opacity: 0.35;
}
.figure_1:hover h3 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.figure_1:hover p {
  opacity: 0.9;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.figure_1:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}


.figure_2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #000000;
  text-align: left;
}
.figure_2 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 30px 40px;
  width: 100%;
  height: 100%;
}
.figure_2 figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 100%;
  border-left: 4px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.figure_2 h3,
.figure_2 p {
  margin: 0 0 5px;
  opacity: 0; color: #fff;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}
.figure_2 h3 {
  word-spacing: -0.15em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(30%, 0%, 0);
  transform: translate3d(30%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.figure_2 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
.figure_2 p {
  font-weight: 200;
  -webkit-transform: translate3d(0%, 30%, 0);
  transform: translate3d(0%, 30%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.figure_2:hover img {
  opacity: 0.3;
}
.figure_2:hover figcaption h3 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.figure_2:hover figcaption p {
  opacity: 0.9;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.figure_2:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  left: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.figure_3 {
  color: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #000000;
  text-align: center;
}

.figure_3 img {
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
.figure_3 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
}
.figure_3 figcaption > div {
  float: left;
  height: 100%;
  overflow: hidden;
  width: 50%;
  position: relative;
}
.figure_3 figcaption::before {
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  width: 2px;
  content: '';
  opacity: 0;
  background-color: rgba(255, 255, 255, 0);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.figure_3 h3,
.figure_3 p {
  margin: 0;
  padding: 20px;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  -webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
  transition: opacity 0.45s,-webkit-transform 0.45s,-moz-transform 0.45s,-o-transform 0.45s,transform 0.45s;
}
.figure_3 h3 {
  text-align: right;
  display: inline-block;
  word-spacing: -0.1em;
  font-weight: 300;
  text-transform: uppercase;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transform: translate3d(50%, 0%, 0);
  transform: translate3d(50%, 0%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.figure_3 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
.figure_3 p {
  display: block;
  bottom: 0;
  text-align: left;
  font-weight: 300;
  top: 0%;
  color: #000;
  background: #ffffff;
  -webkit-transform: translate3d(-50%, 0%, 0);
  transform: translate3d(-50%, 0%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.figure_3:hover img {
  opacity: 0.7;
}
.figure_3:hover figcaption h3,
.figure_3:hover figcaption p {
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.figure_3:hover figcaption h3 {
  opacity: 1;
}
.figure_3:hover figcaption p {
  opacity: 1;
}
.figure_3:hover figcaption::before {
  background: #ffffff;
  top: 0px;
  bottom: 0px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.figure_4 {
  color: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #000000;
  text-align: center;
}

.figure_4 img {
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
.figure_4 > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.figure_4 > div::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  background-image: linear-gradient(45deg, #000000 0%, transparent 40%, rgba(255, 255, 255, 0.15));
}
.figure_4 i {
  display: inline-block;
  color: #ffffff;
  position: absolute;
  bottom: 5px;
  left: 5px;
  opacity: 0;
  z-index: 1;
  -webkit-transition: 0.05s linear;
  transition: 0.05s linear;
  -webkit-transition-delay: 0.01s;
  transition-delay: 0.01s;
}
.figure_4 .curl {
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(225deg, #ffffff, #f3f3f3 20%, #bbbbbb 38%, #aaaaaa 44%, #888888 50%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.3));
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: all .4s ease;
}
.figure_4 .curl:before,
.figure_4 .curl:after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 12%;
  bottom: 6%;
  width: 70%;
  max-width: 300px;
  max-height: 100px;
  height: 55%;
  box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3);
  transform: skew(-10deg) rotate(-6deg);
}
.figure_4 .curl:after {
  left: auto;
  right: 6%;
  bottom: auto;
  top: 14%;
  transform: skew(-15deg) rotate(-84deg);
}
.figure_4 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
.figure_4:hover > div::before,
.figure_4.hover > div::before {
  opacity: 1;
}
.figure_4:hover i,
.figure_4.hover i {
  opacity: 0.7;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.figure_4:hover .curl,
.figure_4.hover .curl {
  width: 90px;
  height: 90px;
}


.figure_5 {
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  background: #000000;
  text-align: center;
}
.figure_5 * {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.figure_5 img {
  opacity: 0.8;
}
.figure_5 figcaption {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.figure_5 h2 {
  left: 0;
  right: 0;
  letter-spacing: -1px;
  margin: 0 auto;
  position: absolute;
  bottom: 50%;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}

.figure_5 p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  opacity: 0;
  font-size: 14px;
  -webkit-transform: translateY(-20%) scale(0.7);
  transform: translateY(-20%) scale(0.7);
}
.figure_5 .square {
  height: 78px;
  width: 78px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
  transform: rotate(45deg) translate(-50%, -50%);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.figure_5 .square:before,
.figure_5 .square:after,
.figure_5 .square div:before,
.figure_5 .square div:after {
  background-color: #ffffff;
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.figure_5 .square:before,
.figure_5 .square:after {
  width: 65%;
  height: 2px;
}
.figure_5 .square div:before,
.figure_5 .square div:after {
  width: 2px;
  height: 65%;
}
.figure_5 .square:before,
.figure_5 .square div:before {
  left: 0;
  top: 0;
}
.figure_5 .square:after,
.figure_5 .square div:after {
  bottom: 0;
  right: 0;
}
.figure_5 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
.figure_5:hover img,
.figure_5.hover img {
  opacity: 0.25;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.figure_5:hover h2,
.figure_5.hover h2 {
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.figure_5:hover p,
.figure_5.hover p {
  opacity: 1;
  -webkit-transform: translateY(0px) scale(1);
  transform: translateY(0px) scale(1);
}
.figure_5:hover .square:before,
.figure_5.hover .square:before {
  width: 38%;
}
.figure_5:hover .square div:before,
.figure_5.hover .square div:before {
  height: 38%;
}
.figure_5:hover .square:after,
.figure_5.hover .square:after {
  width: 55%;
}
.figure_5:hover .square div:after,
.figure_5.hover .square div:after {
  height: 55%;
}

.figure_6 {
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  color: #000000;
  text-align: center;
}
.figure_6 * {
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.figure_6 img {
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
.figure_6:after {
  background: #ffffff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  opacity: 0.75;
  -webkit-transform: skew(-45deg) scaleX(0);
  transform: skew(-45deg) scaleX(0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.figure_6 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}
.figure_6 h2,
.figure_6 p {
  margin: 0;
  width: 100%;
  opacity: 0;
}
.figure_6 h2 {
  padding: 0 30px;
  display: inline-block;
}
.figure_6 p {
  padding: 0 50px;
}
.figure_6 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
.figure_6:hover:after,
.figure_6.hover:after {
  -webkit-transform: skew(-45deg) scaleX(1);
  transform: skew(-45deg) scaleX(1);
  transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.figure_6:hover figcaption h2,
.figure_6.hover figcaption h2,
.figure_6:hover figcaption p,
.figure_6.hover figcaption p {
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.figure_6:hover figcaption h2,
.figure_6.hover figcaption h2 {
  opacity: 1;
}
.figure_6:hover figcaption p,
.figure_6.hover figcaption p {
  opacity: 0.7;
}


.figure_7 {
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  color: #ffffff;
  text-align: left;
  background-color: #07090c;
  -webkit-perspective: 50em;
  perspective: 50em;
}
.figure_7 * {
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.figure_7 img {
  opacity: 1;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.figure_7 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% -50%;
  -ms-transform-origin: 50% -50%;
  transform-origin: 50% -50%;
  z-index: 1;
  opacity: 0;
  padding: 20px 30px;
}

.figure_7 p {
  margin: 0 0 15px;
}
.figure_7 .read-more {
  border: 1px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
.figure_7 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
.figure_7:hover img,
.figure_7.hover img {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  opacity: 0;
}
.figure_7:hover figcaption,
.figure_7.hover figcaption {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.figure_8 {
  position: relative;
  float: left;
  width: 100%;
  color: #ffffff;
  text-align: left;
  background-color: #000000;
}
.figure_8 * {
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
.figure_8 img {
  position: relative;
  vertical-align: top;
}
.figure_8 figcaption {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  padding: 20px 30px;
}
.figure_8 figcaption:before,
.figure_8 figcaption:after {
  width: 1px;
  height: 0;
}
.figure_8 figcaption:before {
  right: 0;
  top: 0;
}
.figure_8 figcaption:after {
  left: 0;
  bottom: 0;
}

.figure_8 h3 {
  margin: 0 0 5px;
}
.figure_8 p {
  margin: 0 0 15px;
}
.figure_8 a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

.figure_8:before, .figure_8:after, .figure_8 figcaption:before, .figure_8 figcaption:after {
  position: absolute;
  content: '';
  background-color: #ffffff;
  z-index: 99;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity: 0.8;
}
.figure_8:before,
.figure_8:after {
  height: 1px;
  width: 0%;
}
.figure_8:before {
  top: 0;
  left: 0;
}
.figure_8:after {
  bottom: 0;
  right: 0;
}
.figure_8:hover img,
.figure_8.hover img {
  opacity: 0.4;
}
.figure_8:hover figcaption,
.figure_8.hover figcaption {
  opacity: 1;
}
.figure_8:hover figcaption:before,
.figure_8.hover figcaption:before,
.figure_8:hover figcaption:after,
.figure_8.hover figcaption:after {
  height: 100%;
}
.figure_8:hover:before,
.figure_8.hover:before,
.figure_8:hover:after,
.figure_8.hover:after {
  width: 100%;
}
.figure_8:hover:before,
.figure_8.hover:before,
.figure_8:hover:after,
.figure_8.hover:after,
.figure_8:hover figcaption:before,
.figure_8.hover figcaption:before,
.figure_8:hover figcaption:after,
.figure_8.hover figcaption:after {
  opacity: 0.1;
}

.figure_9 {
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  color: #141414;
  text-align: left;
}
.figure_9 * {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.figure_9 img {
  vertical-align: top;
}
.figure_9 figcaption {
  position: absolute;
  top: calc(77%);
  width: 100%;
  background-color: #ffffff;
  padding: 15px 25px 65px;
}
.figure_9 figcaption:before {
  position: absolute;
  content: '';
  z-index: 2;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
  background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
}
.figure_9 h3,
.figure_9 p {
  margin: 0 0 10px;
}

.figure_9 p {
  letter-spacing: 1px;
  opacity: 0.9;
}
.figure_9 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.figure_9:hover figcaption,
.figure_9.hover figcaption {
  top: 80px;
}
.figure_10 {
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  color: #000000;
  text-align: right;
  background-color: #000000;
}
.figure_10 * {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.figure_10 img {
  backface-visibility: hidden;
}
.figure_10 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  opacity: 1;
  padding: 30px 0 30px 10px;
  background-color: #ffffff;
  width: 40%;
  -webkit-transform: translateX(150%);
  transform: translateX(150%);
}
.figure_10 figcaption:before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 100%;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 120px 120px 120px 0;
  border-color: transparent #ffffff transparent transparent;
}
.figure_10:after {
  position: absolute;
  bottom: 50%;
  right: 40%;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 120px 120px 0 120px;
  border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.figure_10 h3,
.figure_10 p {
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
}
.figure_10 h3 {
  margin: 0 0 5px;
  opacity: 0.75;
}

.figure_10 i {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  color: #ffffff;
  opacity: 0;
}
.figure_10 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.figure_10:hover img,
.figure_10.hover img {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  opacity: 0.5;
}
.figure_10:hover:after,
.figure_10.hover:after,
.figure_10:hover figcaption,
.figure_10.hover figcaption,
.figure_10:hover i,
.figure_10.hover i {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}


.figure_11 {
  position: relative;
  display: inline-block;
    width: 190px;
  box-shadow: none !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.figure_11 *,
.figure_11:before,
.figure_11:after {
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.figure_11:before,
.figure_11:after {
  border-radius: 50%;
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
  border: 2px solid #bbb;
  border-color: transparent #bbb;
}

.figure_11 img {
   width: 100%; height: 190px;
  backface-visibility: hidden;
  vertical-align: top;
  border-radius: 50%;
  padding: 10px;
}

.figure_11 figcaption {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 50%;
}

.figure_11 i {
  position: absolute;
  top: 50%; color: #fff; font-size: 40px !important;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.figure_11 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.figure_11:hover figcaption,
.figure_11.hover figcaption {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.figure_11:hover:before,
.figure_11.hover:before,
.figure_11:hover:after,
.figure_11.hover:after {
  border-width: 10px;
}

.figure_11:hover:before,
.figure_11.hover:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.figure_11:hover:after,
.figure_11.hover:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


.figure_12 {
  position: relative;
  z-index: 1;
  display: block;
  background: #FFFFFF;
  height: 277px;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.figure_12:hover,
.hover {
  -webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
}
.figure_12:hover .thumbnail_figure_12 img,
.hover .thumbnail_figure_12 img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
  opacity: 0.6;
}
.figure_12 .thumbnail_figure_12 {
  background: #000000;
  overflow: hidden;
}
.figure_12 .thumbnail_figure_12 .date_figure_12 {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  background: #e74c3c;
  width: 55px;
  height: 55px;
  padding: 12.5px 0;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  color: #FFFFFF;
  font-weight: 700;
  text-align: center;
}
.figure_12 .thumbnail_figure_12 img {
  display: block;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.figure_12 .figure_12_content {
  position: absolute;
  bottom: 0;
  background: #FFFFFF;
  width: 100%;
  padding: 20px;
  -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
}
.figure_12 .figure_12_content .catbg {
  position: absolute;
  top: -37px;
  left: 0;
  background: #e74c3c;
  padding: 10px 15px;
  color: #FFFFFF;
}
.figure_12 .figure_12_content .title_figure_12 {
  margin: 0;
  padding: 0 0 10px;
}
.figure_12 .figure_12_content .sub_title_figure_12 {
  margin: 0;
  padding-bottom: 10px ;
}
.figure_12 .figure_12_content .description_figure_12 {
  display: none; padding-bottom: 10px;
}



#make-3D-space {
    float: left;
    width: 100%;
    position: relative;
    height: 305px;
}
#product-card {
    width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: 0px 8px 8px -5px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform-style: preserve-3d;
    -webkit-transition: 100ms ease-out;
    -moz-transition: 100ms ease-out;
    -o-transition: 100ms ease-out;
    transition: 100ms ease-out;
}
#product-card.animate2{
    width: 100%;
    box-shadow:0px 13px 21px -5px rgba(0, 0, 0, 0.3);
    -webkit-transition:  100ms ease-out; 
       -moz-transition:  100ms ease-out; 
         -o-transition:  100ms ease-out; 
            transition:  100ms ease-out; 
}
.stats-container{
    background:#fff;    
    position:absolute;
    top:220px;
    left:0;
    width:100%;
    height:170px;
    padding:20px; 
    -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out;
}
#product-card.animate2 .stats-container{
    top:135px;
    -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}

.product-options {
    padding-top: 20px;
}
.stats-container .product_price{
    float:right;
    color:#48cfad;
}
.image_overlay{
    position:absolute;
    top:0;
    left:0; 
    width:100%;
    height:100%;
    background:#48daa1;
    opacity:0;  
}
#product-card.animate2 .image_overlay{
    opacity:0.7;    
    -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
.product_name {
    font-size: 24px;
}
#view_details{  
    position:absolute;
    top:112px;
    left:50%;
    margin-left:-85px;  
    border:2px solid #fff;
    color:#fff;
    text-align:center;
    padding:10px 0;
    width:172px;    
    opacity:0;
    -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
#view_details:hover{    
    background:#fff;
    color:#48cfad;
    cursor:pointer;

}
#product-card.animate2 #view_details{
    opacity:1;
    width:152px;
    margin-left:-75px;
    top:50px;
    -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out;         
}




.boxs_example_1 .img_wrapper {
  background: url(../images/product.jpg) center/cover no-repeat;
}
.boxs_example_1 .data_css {
  -webkit-transform: translateY(calc(25px + 4em));
  transform: translateY(calc(25px + 4em));
}
.data_css .content_css {
  padding: 15px;
  position: relative;
  z-index: 1;
}

.boxs_example_1 .content_css {
  background-color: #fff;
  box-shadow: 0 3px 10px 10px rgba(0, 0, 0, 0.3);
}

.boxs_example_2 .img_wrapper {
  background: url(../images/product.jpg) center/cover no-repeat;
}
.boxs_example_2 .data_css {
  color: #fff;
  -webkit-transform: translateY(calc(70px + 4em));
  transform: translateY(calc(70px + 4em));
}
.img_wrapper {
  background-color: #fff;
  min-height: 300px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.img_wrapper:hover .data_css {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.data_css {
  position: absolute;
  bottom: 0;
  width: 100%;
  -webkit-transform: translateY(calc(70px + 1em));
          transform: translateY(calc(70px + 1em));
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
/* End hover-effect css*/

/* Bengin grid_colum*/
.grid_colum {  display: flex;  flex-wrap: wrap;}
.grid_colum_item {
    display: flex;
    width: 31.3%;
    margin-right: 3%; margin-bottom: 20px;
}
.grid_colum_item:nth-child(3n+3) {
    margin-right: 0;
}
.grid_colum_boxs {  display: flex; border: solid 1px #e0e0e0;
  flex-direction: column;  overflow: hidden;}
.grid_boxs_content {  display: flex;  flex: 1 1 auto;  flex-direction: column;
  padding: 15px;}
.grid_images {height: 180px;
  background-size: cover;
  overflow: hidden;
  position: relative;
}
.grid_images img {
    width: 100%;
    height: 100%;
}

@media (max-width: 640px) {
.grid_colum_item { 
  display: inline;
  width: 100%;
  padding: 10px 0;
  float: left;margin-right: 0;margin-bottom: 0;
}
.grid_colum {
    display: inherit;
    flex-wrap: inherit;
}
.grid_colum_boxs {
    display: inline;
    border: 0;
    flex-direction: row;
    overflow: inherit;
}
.grid_images {
    width: 140px; height: auto;
    float: left;
    margin-right: 15px;
}
.grid_boxs_content {
    display: grid;
    flex: inherit;
    flex-direction: inherit;
    padding: 0;
}
}
/* End grid_colum*/
@media (max-width: 800px) {
}
@media (max-width: 768px) {
}
@media only screen and (max-width: 640px) { 
}
@media (max-width: 480px) {
}
@media (max-width: 360px) {	
}
@media (max-width: 320px) {
}