/*!
 * THIS FILE COMPILED FROM SCSS !!! 
 * IF Your want change this file, use SCSS and 'gulp watch'
 */
/** PRODUCT **/
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
#carousel {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #fff; }

#carousel.material__slider {
  background-color: transparent;
  padding: 0px; }

.carousel .item.product {
  -webkit-transition: opacity 0.1s;
  -moz-transition: opacity 0.1s;
  transition: opacity 0.1s; }

.carousel {
  min-height: 300px;
  /*margin-bottom: 60px; */ }

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  position: relative;
  right: auto;
  left: auto;
  /*top: 0;*/
  bottom: auto;
  margin-right: 120px;
  margin-left: 120px;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top: 50px !important;
  z-index: 10;
  height: auto;
  text-align: left;
  text-shadow: none;
  margin-bottom: 40px; }

.carousel-caption .text_block {
  max-width: 540px; }

.carousel-caption .text_block p {
  font-size: 18pt;
  margin-bottom: 30px; }

.carousel-caption h1 {
  margin-bottom: 40px; }

.carousel-caption .centered_img {
  height: 340px; }

.carousel-caption .centered_img img {
  max-height: 340px; }

.carousel-caption .small_img {
  z-index: -10; }

.carousel-caption .text_block + .small_img {
  position: absolute;
  right: -30px;
  bottom: -40px;
  max-width: 500px; }

.carousel-caption .text_block + .centered_img .wrap:after,
.carousel-caption .centered_img .wrap {
  vertical-align: bottom; }

.carousel-caption .more {
  margin-bottom: 30px;
  background: #ff834c;
  background: -moz-linear-gradient(top, #ff834c 0%, #ff4e01 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#ff834c), to(#ff4e01));
  background: linear-gradient(to bottom, #ff834c 0%, #ff4e01 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff834c', endColorstr='#ff4e01', GradientType=0);
  border: 1px solid #ff6927;
  border-top: 1px solid #ffa883;
  font: bold 18px 'tornadoc', Arial, sans-serif;
  text-shadow: 1px 1px 1px #aa3400;
  padding: 15px 20px; }

.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #3c3c3c;
  -moz-border-radius: 0px;
       border-radius: 0px;
  cursor: pointer;
  background-color: #3c3c3c; }

.carousel-indicators {
  bottom: 10px;
  padding-top: 10px;
  left: 50%;
  z-index: 2;
  width: 60%;
  margin-left: -30%;
  padding-left: 0px;
  list-style: outside none none;
  text-align: center; }
  @media only screen and (max-width: 991px) {
    .carousel-indicators {
      left: 0px;
      right: 0px;
      width: 100%;
      margin: auto; } }

.carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  border: 1px solid #009ab4;
  background-color: #009ab4; }

@media (max-width: 1200px) {
  .carousel-caption {
    margin-left: 60px;
    margin-right: 60px; } }

@media (max-width: 1000px) {
  .carousel-caption {
    margin-bottom: 10px;
    padding-top: 0;
    padding-bottom: 10px; }
  .carousel-caption .text_block + .small_img {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: -10;
    margin-bottom: 0px;
    margin-top: 20px; }
  .carousel-caption .more {
    margin-bottom: 10px; }
  .carousel-caption .carousel-control.right,
  .carousel-caption .carousel-control.left {
    background: none !important;
    width: 15%; }
  .centered_img {
    height: auto;
    margin-bottom: 50px; }
  .centered_img img {
    max-height: auto; } }

.carousel-control.right,
.carousel-control.left {
  background: none !important;
  color: #fff;
  width: 8%; }

.carousel_left,
.carousel_right {
  position: absolute;
  top: 50%;
  background: url("../images/carousel/carousel_arrows.png") 0 center no-repeat;
  width: 38px;
  height: 48px;
  display: block;
  margin-top: -24px;
  z-index: 100; }

.carousel_left {
  right: 0; }

.carousel_right {
  background-position: right center;
  left: 0; }

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 380px;
  background-color: #fff; }

.material__slider .carousel .item {
  background-color: transparent; }

.carousel-inner > .item > img {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0px;
  margin: auto;
  min-width: 100%;
  height: auto; }

#header + .carousel {
  margin-top: -20px; }

.slider_next {
  right: 0;
  left: auto;
  background-position: right 0; }

.slider_image {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: 1400px;
  min-width: 320px;
  background-position: center top;
  background-repeat: no-repeat; }

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 30px;
  height: 30px;
  font-size: 30px;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; }

@media (max-width: 360px) {
  .carousel-control {
    left: 15px; }
  .carousel-control.right {
    right: 15px; }
  .carousel-caption {
    margin-left: 40px;
    margin-right: 40px; } }

@media (max-width: 767px) {
  .slider_image {
    display: none; } }

/*
inspired from http://codepen.io/Rowno/pen/Afykb
*/
.carousel-fade .carousel-inner .item {
  opacity: 1;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity; }

.carousel-fade .carousel-inner .active {
  opacity: 1; }

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1; }

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1; }

.carousel-fade .carousel-control {
  z-index: 2; }

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next.product,
  .carousel-fade .carousel-inner > .item.active.right.product {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0); }
  .carousel-fade .carousel-inner > .item.prev.product,
  .carousel-fade .carousel-inner > .item.active.left.product {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0); }
  .carousel-fade .carousel-inner > .item.next.left.product,
  .carousel-fade .carousel-inner > .item.prev.right.product,
  .carousel-fade .carousel-inner > .item.active.product {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0); } }

.col-no-padding, .mainPage .thumbnail.col- {
  padding: 0px; }

#carousellya .glyphicon.glyphicon-chevron-right {
  right: 0px; }

body.mainPage
#carousellya
.carousel-inner >
.item >
img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  min-width: inherit;
  min-height: inherit;
  height: inherit;
  max-height: inherit;
  margin: auto; }

body.mainPage
.thumbnail {
  /*border: 2px solid black;*/
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none; }