
/* Bootstrap items to overWrite */

#postCarouselGrid .carousel-control.left {
	opacity: 1;
    background: transparent;
    margin-left: 0;
}

#postCarouselGrid .carousel-control.right {
	opacity: 1;
    background: transparent;
    margin-right: 0;
}

#postCarouselGrid .carousel-control img {
	top: 75%;
	position: relative;
	background: #942104;
	border: 1px solid #000;
	padding: 15px 40px;
}

#postCarouselGrid .carouselGrid-inner > .item > div > li {list-style: none}

#postCarouselGrid .carouselGrid-inner > .item > img,
#postCarouselGrid .carouselGrid-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

#postCarouselGrid .carouselGrid-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#postCarouselGrid .carouselGrid-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: 1s ease-in-out left;
       -o-transition: 1s ease-in-out left;
          transition: 1s ease-in-out left;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

#postCarouselGrid .carouselGrid-inner > .item > img,
#postCarouselGrid .carouselGrid-inner > .item > a > img {
  line-height: 1;
}



@media all and (transform-3d), (-webkit-transform-3d) {
 #postCarouselGrid .carouselGrid-inner > .item {
    -webkit-transition: -webkit-transform 1s ease-in-out;
         -o-transition:      -o-transform 1s ease-in-out;
            transition:         transform 1s ease-in-out;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }


  @media (max-width: 767px) { /* xs */
      #postCarouselGrid .carouselGrid-inner > .item.next,
    #postCarouselGrid .carouselGrid-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(100%, 0, 0);
              transform: translate3d(100%, 0, 0);
    }
    #postCarouselGrid .carouselGrid-inner > .item.prev,
    #postCarouselGrid .carouselGrid-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
              transform: translate3d(-100%, 0, 0);
    }
    #postCarouselGrid .carouselGrid-inner > .item.next.left,
    #postCarouselGrid .carouselGrid-inner > .item.prev.right,
    #postCarouselGrid .carouselGrid-inner > .item.active {
      left: 0;
      -webkit-transform: translate3d(0%, 0, 0);
              transform: translate3d(0%, 0, 0);
    }
  }
  @media (min-width: 768px) and (max-width: 990px ) { /* sm */
      #postCarouselGrid .carouselGrid-inner > .item.next,
    #postCarouselGrid .carouselGrid-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(50%, 0, 0);
              transform: translate3d(50%, 0, 0);
    }
    #postCarouselGrid .carouselGrid-inner > .item.prev,
    #postCarouselGrid .carouselGrid-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
              transform: translate3d(-50%, 0, 0);
    }
    #postCarouselGrid .carouselGrid-inner > .item.next.left,
    #postCarouselGrid .carouselGrid-inner > .item.prev.right,
    #postCarouselGrid .carouselGrid-inner > .item.active {
      left: 0;
      -webkit-transform: translate3d(0%, 0, 0);
              transform: translate3d(0%, 0, 0);
    }
  }
  @media (min-width: 991px ) and (max-width: 1199px) { /* md */
      #postCarouselGrid .carouselGrid-inner > .item.next,
    #postCarouselGrid .carouselGrid-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(50%, 0, 0);
              transform: translate3d(50%, 0, 0);
    }
    #postCarouselGrid .carouselGrid-inner > .item.prev,
    #postCarouselGrid .carouselGrid-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
              transform: translate3d(-50%, 0, 0);
    }
    #postCarouselGrid .carouselGrid-inner > .item.next.left,
    #postCarouselGrid .carouselGrid-inner > .item.prev.right,
    #postCarouselGrid .carouselGrid-inner > .item.active {
      left: 0;
      -webkit-transform: translate3d(0%, 0, 0);
              transform: translate3d(0%, 0, 0);
    }
  }
  @media (min-width: 1024px ) { /* lg */

    #postCarouselGrid .carouselGrid-inner > .item.next,
    #postCarouselGrid .carouselGrid-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(20%, 0, 0);
              transform: translate3d(20%, 0, 0);
    }
    #postCarouselGrid .carouselGrid-inner > .item.prev,
    #postCarouselGrid .carouselGrid-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-20%, 0, 0);
              transform: translate3d(-20%, 0, 0);
    }
    #postCarouselGrid .carouselGrid-inner > .item.next.left,
    #postCarouselGrid .carouselGrid-inner > .item.prev.right,
    #postCarouselGrid .carouselGrid-inner > .item.active {
      left: 0;
      -webkit-transform: translate3d(0%, 0, 0);
              transform: translate3d(0%, 0, 0);
    }
  }

}

  #postCarouselGrid .carouselGrid-inner > .active,
  #postCarouselGrid .carouselGrid-inner > .next,
  #postCarouselGrid .carouselGrid-inner > .prev {
    display: block;
  }
  #postCarouselGrid .carouselGrid-inner > .active {
    left: 0;
  }
  #postCarouselGrid .carouselGrid-inner > .next,
  #postCarouselGrid .carouselGrid-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%;
  }
  #postCarouselGrid .carouselGrid-inner > .next {
    left: 100%;
  }
  #postCarouselGrid .carouselGrid-inner > .prev {
    left: -100%;
  }
  #postCarouselGrid .carouselGrid-inner > .next.left,
  #postCarouselGrid .carouselGrid-inner > .prev.right {
    left: 0;
  }


  @media (max-width: 767px) { /* xs */
    #postCarouselGrid .carouselGrid-inner > .active.left {
      left: -100%;
    }
    #postCarouselGrid .carouselGrid-inner > .active.right {
      left: 100%;
    }
  }
  @media (min-width: 768px) and (max-width: 990px ) { /* sm */
        #postCarouselGrid .carouselGrid-inner > .active.left {
      left: -50%;
    }
    #postCarouselGrid .carouselGrid-inner > .active.right {
      left: 50%;
    }
  }
  @media (min-width: 991px ) and (max-width: 1023px) { /* md */
        #postCarouselGrid .carouselGrid-inner > .active.left {
      left: -50%;
    }
    #postCarouselGrid .carouselGrid-inner > .active.right {
      left: 50%;
    }
  }
  @media (min-width: 1024px ) { /* lg */
    #postCarouselGrid .carouselGrid-inner > .active.left {
      left: -20%;
    }
    #postCarouselGrid .carouselGrid-inner > .active.right {
      left: 20%;
    }
  }



@media (max-width: 767px) { /* xs */
  #postCarouselGrid .carouselGrid-inner > .item .col-sm-4 {width: 100%; padding: 0 15px;}
  #postCarouselGrid .carouselGrid-inner .active.left { left: -100%; }
  #postCarouselGrid .carouselGrid-inner .next        { left:  100%;}
  #postCarouselGrid .carouselGrid-inner .prev    { left: -100%; }
  #postCarouselGrid .carouselGrid-inner .active > div { display:none; }
  #postCarouselGrid .carouselGrid-inner .active > div:first-child { display:block; }
  #postCarouselGrid .carouselGrid-inner .active > div:first-child + div + div + div { display:none; }


}
@media (min-width: 768px) and (max-width: 1023px ) { /* sm */
  #postCarouselGrid .carouselGrid-inner > .item .col-sm-4 {width: 50%; padding: 0 15px;}
  #postCarouselGrid .carouselGrid-inner .active.left { left: -50%; }
  #postCarouselGrid .carouselGrid-inner .next        { left:  50%; }
  #postCarouselGrid .carouselGrid-inner .prev    { left: -50%; }
  #postCarouselGrid .carouselGrid-inner .active > div { display:none; }
  #postCarouselGrid .carouselGrid-inner .active > div:first-child { display:block; }
  #postCarouselGrid .carouselGrid-inner .active > div:first-child + div { display:block; }
  #postCarouselGrid .carouselGrid-inner .active > div:first-child + div + div + div { display:none; }
}


@media (min-width: 1024px ) { /* lg */
  #postCarouselGrid .carouselGrid-inner .active.left { left: -20%; }
  #postCarouselGrid .carouselGrid-inner .next        { left:  20%;}
  #postCarouselGrid .carouselGrid-inner .prev   {left: -20%; }
  #postCarouselGrid .carouselGrid-inner .active > div { display:none; }
  #postCarouselGrid .carouselGrid-inner .active > div:first-child { display:block; }
  #postCarouselGrid .carouselGrid-inner .active > div:first-child + div { display:block; }
  #postCarouselGrid .carouselGrid-inner .active > div:first-child + div + div { display:block; }
  #postCarouselGrid .carouselGrid-inner .active > div:first-child + div + div + div { display:block; }
  #postCarouselGrid .carouselGrid-inner .active > div:first-child + div + div + div + div{ display:block; }  
  #postCarouselGrid .carouselGrid-inner .active > div:first-child + div + div + div + div + div{ display:block; }    
} 


/* NECESSARY FOR FIVE ITEMS (Extends Bootstrap to 5 columns) */
/*http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/ */
#postCarouselGrid .carouselGrid-inner .col-xs-15,
#postCarouselGrid .carouselGrid-inner .col-sm-15,
#postCarouselGrid .carouselGrid-inner .col-md-15,
#postCarouselGrid .carouselGrid-inner .col-lg-15 {
    position: relative;
    min-height: 1px;
}
#postCarouselGrid .carouselGrid-inner .small-grid {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
#postCarouselGrid .carouselGrid-inner .small-grid {
        width: 33.333%;
        float: left;
    }
}
@media (min-width: 992px) {
    #postCarouselGrid .carouselGrid-inner .small-grid {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    #postCarouselGrid .carouselGrid-inner .small-grid {
        width: 20%;
        float: left;
		padding: 0;
    }
}



