/**************************************************************************
		        Main style TM Mosaic Products
**************************************************************************/

@media (max-width: 767px) {
  .mosaic-block .title_block:after {
    display: none;
  }
}

.mosaic-block .block-container-row {
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 50px;
  margin-bottom: 30px;
}

.mosaic-block .block-container-row .tmmp-frontend-banner h3,
.mosaic-block .block-container-row .wrapper-slider h3,
.mosaic-block .block-container-row .tmmp-frontend-html h3,
.mosaic-block .block-container-row .tmmp-frontend-video h3 {
  font: 700 24px/27px "Open Sans", sans-serif;
  color: #333;
  margin: 0 0 25px;
}

.mosaic-block .block-container-row .wrapper-slider > h3 {
  font-size: 30px;
  text-align: center;
}

/* tmmp_row_2 */

@media (max-width: 767px) {
  .tmmp_row_2 > li:first-child > div {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}

/* tmmp_row_3 */

@media (max-width: 767px) {
  .tmmp_row_3 li:nth-child(-n+2) > div {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}

/* tmmp_row_4 */

@media (max-width: 767px) {
  .tmmp_row_4 li:nth-child(-n+3) > div {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .tmmp_row_4 li:nth-child(3) {
    clear: left;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .tmmp_row_4 li:nth-child(-n+2) > div {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}

/* tmmp_row_6 */

@media (min-width: 992px) and (max-width: 1199px) {
  .tmmp_row_6 li:nth-child(4) {
    clear: left;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .tmmp_row_6 li:nth-child(-n+4) > div {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .tmmp_row_6 li:nth-child(-n+5) > div {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}

/* tmmp_row_1_4 */

.tmmp_row_1_4 > li:last-child > ul > li:nth-child(3) {
  clear: left;
}

.tmmp_row_1_4 > li > ul > li:nth-child(n+3):nth-child(-n+4) > div {
  margin-top: 30px;
  padding-top: 50px;
}

@media (max-width: 767px) {
  .tmmp_row_1_4 > li > ul > li > div {
    margin-top: 20px;
    padding-top: 20px;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .tmmp_row_1_4 > li:first-child > div {
    margin-bottom: 30px;
    padding-bottom: 30px;
  }
}

/* tmmp_row_4_1 */

.tmmp_row_4_1 ul > li:nth-child(3) {
  clear: left;
}

.tmmp_row_4_1 li ul li:nth-child(n+3):nth-child(-n+4) > div {
  margin-top: 20px;
  padding-top: 20px;
}

@media (min-width: 768px) and (max-width: 992px) {
  .tmmp_row_4_1 > li:last-child > div {
    margin-top: 30px;
    padding-top: 30px;
  }
}

/* tmmp_row_2_1_2 */

.tmmp_row_2_1_2 li:first-child ul li:first-child > div,
.tmmp_row_2_1_2 li:nth-child(3) ul li:first-child > div {
  margin-bottom: 30px;
  padding-bottom: 30px;
}

@media (max-width: 767px) {
  .tmmp_row_2_1_2 li ul li > div,
  .tmmp_row_2_1_2 > li:nth-child(2) > div {
    margin-bottom: 30px;
    padding-bottom: 30px;
  }
}

/**************************************************************************
		        Style for banner and html content
**************************************************************************/

.tmmp-banner-description img,
.tmmp-frontend-html img {
  max-width: 100%;
  height: auto;
}

/**************************************************************************
		        Style for Video
**************************************************************************/

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tmmp-frontend-video .vjs-default-skin .vjs-big-play-button {
  height: 1.6em;
  width: 3em;
  font-size: 1.5em;
  border-radius: 0.5em;
}

.tmmp-frontend-video .vjs-default-skin .vjs-big-play-button:before {
  line-height: 1.5em;
}

/**************************************************************************
		        Style for Slider
**************************************************************************/

.mosaic-block .bx-wrapper li img {
  max-width: 100%;
  height: auto;
}

.mosaic-block .bx-wrapper .bx-controls-direction a {
  top: -40px;
  height: 40px;
  width: 40px;
  text-align: center;
}

@media (max-width: 767px) {
  .mosaic-block .bx-wrapper .bx-controls-direction a {
    display: none;
  }
}

.mosaic-block .bx-wrapper .bx-controls-direction a:before {
  color: #333;
  font-size: 40px;
}

.mosaic-block .bx-wrapper .bx-controls-direction a:hover:before {
  color: #777;
}

.mosaic-block .bx-wrapper .bx-controls-direction a.bx-next {
  right: -12px;
}

.mosaic-block .bx-wrapper .bx-controls-direction a.bx-next:before {
  content: "\f105";
}

.mosaic-block .bx-wrapper .bx-controls-direction a.bx-prev {
  left: inherit;
  right: 20px;
}

.mosaic-block .bx-wrapper .bx-controls-direction a.bx-prev:before {
  content: "\f104";
}

.mosaic-block .bx-wrapper .bx-pager {
  bottom: -45px;
}

.mosaic-block .bx-wrapper .bx-pager a {
  background: #f5f5f5;
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

.mosaic-block .bx-wrapper .bx-pager a.active,
.mosaic-block .bx-wrapper .bx-pager a:hover {
  background: #333;
}

/**************************************************************************
		        Style for Product
**************************************************************************/

.block-container-row .product-container {
  position: relative;
}

.block-container-row .product-container .product-image-container {
  border: 1px solid #d6d4d4;
  margin-bottom: 13px;
  padding: 9px;
  position: relative;
}

.block-container-row .product-container .product-image-container .mosaic-sale-label {
  right: 0;
  background: #ef5350;
}

.block-container-row .product-container .product-name {
  font: 400 16px/21px "Open Sans", sans-serif;
  color: #333;
}

.block-container-row .product-container .product-name:hover {
  color: #777;
}

.block-container-row .product-container .content_price {
  margin-bottom: 20px;
}

.block-container-row .product-container .content_price .price {
  font: 700 16px/21px  "Open Sans", sans-serif;
  color: #333;
}

.block-container-row .product-container .content_price .old-price {
  color: #b2b2b2;
  font: 700 16px/21px  "Open Sans", sans-serif;
}