/* Bootstrap items to overWrite */

#myCarouselGrid .carousel-control.left, #myCarouselGridCM .carousel-control.left {
	opacity: 1;
    background: transparent;
    margin-left: -10%;
}

#myCarouselGrid .carousel-control.right, #myCarouselGridCM .carousel-control.right {
	opacity: 1;
    background: transparent;
    margin-right: -10%;
}

#myCarouselGrid .carousel-control img, #myCarouselGridCM .carousel-control img {
	top: 40%;
	    position: relative;
}

#myCarouselGrid .carouselGrid-inner > .item > div > li, #myCarouselGridCM .carouselGrid-inner > .item > div > li {list-style: none}

#myCarouselGrid .carouselGrid-inner > .item > img,
#myCarouselGrid .carouselGrid-inner > .item > a > img,
#myCarouselGridCM .carouselGrid-inner > .item > img,
#myCarouselGridCM .carouselGrid-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

#myCarouselGrid .carouselGrid-inner, #myCarouselGridCM .carouselGrid-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#myCarouselGrid .carouselGrid-inner > .item, #myCarouselGridCM .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;
}

#myCarouselGrid .carouselGrid-inner > .item > img,
#myCarouselGrid .carouselGrid-inner > .item > a > img,
#myCarouselGridCM .carouselGrid-inner > .item > img,
#myCarouselGridCM .carouselGrid-inner > .item > a > img {
  line-height: 1;
}



@media all and (transform-3d), (-webkit-transform-3d) {
 #myCarouselGrid .carouselGrid-inner > .item, #myCarouselGridCM .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 */
    #myCarouselGrid .carouselGrid-inner > .item.next,
    #myCarouselGrid .carouselGrid-inner > .item.active.right,
	#myCarouselGridCM .carouselGrid-inner > .item.next,
    #myCarouselGridCM .carouselGrid-inner > .item.active.right	{
      left: 0;
      -webkit-transform: translate3d(100%, 0, 0);
              transform: translate3d(100%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.prev,
    #myCarouselGrid .carouselGrid-inner > .item.active.left,
	#myCarouselGridCM .carouselGrid-inner > .item.prev,
    #myCarouselGridCM .carouselGrid-inner > .item.active.left	{
      left: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
              transform: translate3d(-100%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.next.left,
    #myCarouselGrid .carouselGrid-inner > .item.prev.right,
    #myCarouselGrid .carouselGrid-inner > .item.active,
    #myCarouselGridCM .carouselGrid-inner > .item.next.left,
    #myCarouselGridCM .carouselGrid-inner > .item.prev.right,
    #myCarouselGridCM .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 */
    #myCarouselGrid .carouselGrid-inner > .item.next,
    #myCarouselGrid .carouselGrid-inner > .item.active.right,
    #myCarouselGridCM .carouselGrid-inner > .item.next,
    #myCarouselGridCM .carouselGrid-inner > .item.active.right	{
      left: 0;
      -webkit-transform: translate3d(50%, 0, 0);
              transform: translate3d(50%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.prev,
    #myCarouselGrid .carouselGrid-inner > .item.active.left,
    #myCarouselGridCM .carouselGrid-inner > .item.prev,
    #myCarouselGridCM .carouselGrid-inner > .item.active.left	{
      left: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
              transform: translate3d(-50%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.next.left,
    #myCarouselGrid .carouselGrid-inner > .item.prev.right,
    #myCarouselGrid .carouselGrid-inner > .item.active,
    #myCarouselGridCM .carouselGrid-inner > .item.next.left,
    #myCarouselGridCM .carouselGrid-inner > .item.prev.right,
    #myCarouselGridCM .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 */
    #myCarouselGrid .carouselGrid-inner > .item.next,
    #myCarouselGrid .carouselGrid-inner > .item.active.right,
    #myCarouselGridCM .carouselGrid-inner > .item.next,
    #myCarouselGridCM .carouselGrid-inner > .item.active.right	{
      left: 0;
      -webkit-transform: translate3d(50%, 0, 0);
              transform: translate3d(50%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.prev,
    #myCarouselGrid .carouselGrid-inner > .item.active.left,
    #myCarouselGridCM .carouselGrid-inner > .item.prev,
    #myCarouselGridCM .carouselGrid-inner > .item.active.left	{
      left: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
              transform: translate3d(-50%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.next.left,
    #myCarouselGrid .carouselGrid-inner > .item.prev.right,
    #myCarouselGrid .carouselGrid-inner > .item.active,
    #myCarouselGridCM .carouselGrid-inner > .item.next.left,
    #myCarouselGridCM .carouselGrid-inner > .item.prev.right,
    #myCarouselGridCM .carouselGrid-inner > .item.active	{
      left: 0;
      -webkit-transform: translate3d(0%, 0, 0);
              transform: translate3d(0%, 0, 0);
    }
  }
  @media (min-width: 1024px ) { /* lg */

    #myCarouselGrid .carouselGrid-inner > .item.next,
    #myCarouselGrid .carouselGrid-inner > .item.active.right,
    #myCarouselGridCM .carouselGrid-inner > .item.next,
    #myCarouselGridCM .carouselGrid-inner > .item.active.right	{
      left: 0;
      -webkit-transform: translate3d(33%, 0, 0);
              transform: translate3d(33%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.prev,
    #myCarouselGrid .carouselGrid-inner > .item.active.left,
    #myCarouselGridCM .carouselGrid-inner > .item.prev,
    #myCarouselGridCM .carouselGrid-inner > .item.active.left	{
      left: 0;
      -webkit-transform: translate3d(-33%, 0, 0);
              transform: translate3d(-33%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.next.left,
    #myCarouselGrid .carouselGrid-inner > .item.prev.right,
    #myCarouselGrid .carouselGrid-inner > .item.active,
    #myCarouselGridCM .carouselGrid-inner > .item.next.left,
    #myCarouselGridCM .carouselGrid-inner > .item.prev.right,
    #myCarouselGridCM .carouselGrid-inner > .item.active	{
      left: 0;
      -webkit-transform: translate3d(0%, 0, 0);
              transform: translate3d(0%, 0, 0);
    }
  }

}

  #myCarouselGrid .carouselGrid-inner > .active,
  #myCarouselGrid .carouselGrid-inner > .next,
  #myCarouselGrid .carouselGrid-inner > .prev,
  #myCarouselGridCM .carouselGrid-inner > .active,
  #myCarouselGridCM .carouselGrid-inner > .next,
  #myCarouselGridCM .carouselGrid-inner > .prev  {
    display: block;
  }
  #myCarouselGrid .carouselGrid-inner > .active,
  #myCarouselGridCM .carouselGrid-inner > .active  {
    left: 0;
  }
  #myCarouselGrid .carouselGrid-inner > .next,
  #myCarouselGrid .carouselGrid-inner > .prev,
  #myCarouselGridCM .carouselGrid-inner > .next,
  #myCarouselGridCM .carouselGrid-inner > .prev  {
    position: absolute;
    top: 0;
    width: 100%;
  }
  #myCarouselGrid .carouselGrid-inner > .next,
  #myCarouselGridCM .carouselGrid-inner > .next {
    left: 100%;
  }
  #myCarouselGrid .carouselGrid-inner > .prev,
  #myCarouselGridCM .carouselGrid-inner > .prev  {
    left: -100%;
  }
  #myCarouselGrid .carouselGrid-inner > .next.left,
  #myCarouselGrid .carouselGrid-inner > .prev.right.
  #myCarouselGridCM .carouselGrid-inner > .next.left,
  #myCarouselGridCM .carouselGrid-inner > .prev.right  {
    left: 0;
  }


  @media (max-width: 767px) { /* xs */
    #myCarouselGrid .carouselGrid-inner > .active.left, #myCarouselGridCM .carouselGrid-inner > .active.left {
      left: -100%;
    }
    #myCarouselGrid .carouselGrid-inner > .active.right, #myCarouselGridCM .carouselGrid-inner > .active.right {
      left: 100%;
    }
  }
  @media (min-width: 768px) and (max-width: 990px ) { /* sm */
    #myCarouselGrid .carouselGrid-inner > .active.left, #myCarouselGridCM .carouselGrid-inner > .active.left {
      left: -50%;
    }
    #myCarouselGrid .carouselGrid-inner > .active.right, #myCarouselGridCM .carouselGrid-inner > .active.right {
      left: 50%;
    }
  }
  @media (min-width: 991px ) and (max-width: 1023px) { /* md */
    #myCarouselGrid .carouselGrid-inner > .active.left, #myCarouselGridCM .carouselGrid-inner > .active.left {
      left: -50%;
    }
    #myCarouselGrid .carouselGrid-inner > .active.right, #myCarouselGridCM .carouselGrid-inner > .active.right {
      left: 50%;
    }
  }
  @media (min-width: 1024px ) { /* lg */
    #myCarouselGrid .carouselGrid-inner > .active.left, #myCarouselGridCM .carouselGrid-inner > .active.left {
      left: -33%;
    }
    #myCarouselGrid .carouselGrid-inner > .active.right, #myCarouselGridCM .carouselGrid-inner > .active.right {
      left: 33%;
    }
  }



@media (max-width: 767px) { /* xs */
  #myCarouselGrid .carouselGrid-inner > .item .col-sm-4 {width: 100%; padding: 0 15px;}
  #myCarouselGrid .carouselGrid-inner .active.left { left: -100%; }
  #myCarouselGrid .carouselGrid-inner .next        { left:  100%;}
  #myCarouselGrid .carouselGrid-inner .prev    { left: -100%; }
  #myCarouselGrid .carouselGrid-inner .active > div { display:none; }
  #myCarouselGrid .carouselGrid-inner .active > div:first-child { display:block; }
  #myCarouselGrid .carouselGrid-inner .active > div:first-child + div + div + div { display:none; }
  
  #myCarouselGridCM .carouselGrid-inner > .item .col-sm-4 {width: 100%; padding: 0 15px;}
  #myCarouselGridCM .carouselGrid-inner .active.left { left: -100%; }
  #myCarouselGridCM .carouselGrid-inner .next        { left:  100%;}
  #myCarouselGridCM .carouselGrid-inner .prev    { left: -100%; }
  #myCarouselGridCM .carouselGrid-inner .active > div { display:none; }
  #myCarouselGridCM .carouselGrid-inner .active > div:first-child { display:block; }
  #myCarouselGridCM .carouselGrid-inner .active > div:first-child + div + div + div { display:none; }  


}
@media (min-width: 768px) and (max-width: 1023px ) { /* sm */
  #myCarouselGrid .carouselGrid-inner > .item .col-sm-4 {width: 50%; padding: 0 15px;}
  #myCarouselGrid .carouselGrid-inner .active.left { left: -50%; }
  #myCarouselGrid .carouselGrid-inner .next        { left:  50%; }
  #myCarouselGrid .carouselGrid-inner .prev    { left: -50%; }
  #myCarouselGrid .carouselGrid-inner .active > div { display:none; }
  #myCarouselGrid .carouselGrid-inner .active > div:first-child { display:block; }
  #myCarouselGrid .carouselGrid-inner .active > div:first-child + div { display:block; }
  #myCarouselGrid .carouselGrid-inner .active > div:first-child + div + div + div { display:none; }
  
  #myCarouselGridCM .carouselGrid-inner > .item .col-sm-4 {width: 50%; padding: 0 15px;}
  #myCarouselGridCM .carouselGrid-inner .active.left { left: -50%; }
  #myCarouselGridCM .carouselGrid-inner .next        { left:  50%; }
  #myCarouselGridCM .carouselGrid-inner .prev    { left: -50%; }
  #myCarouselGridCM .carouselGrid-inner .active > div { display:none; }
  #myCarouselGridCM .carouselGrid-inner .active > div:first-child { display:block; }
  #myCarouselGridCM .carouselGrid-inner .active > div:first-child + div { display:block; }
  #myCarouselGridCM .carouselGrid-inner .active > div:first-child + div + div + div { display:none; }  
}



@media (min-width: 1024px ) { /* lg */
  #myCarouselGrid .carouselGrid-inner .active.left { left: -33%; }
  #myCarouselGrid .carouselGrid-inner .next        { left:  33%;}
  #myCarouselGrid .carouselGrid-inner .prev   {left: -33%; }
  #myCarouselGrid .carouselGrid-inner .active > div { display:none; }
  #myCarouselGrid .carouselGrid-inner .active > div:first-child { display:block; }
  #myCarouselGrid .carouselGrid-inner .active > div:first-child + div { display:block; }
  #myCarouselGrid .carouselGrid-inner .active > div:first-child + div + div { display:block; }
  #myCarouselGrid .carouselGrid-inner .active > div:first-child + div + div + div { display:none; }
  
  #myCarouselGridCM .carouselGrid-inner .active.left { left: -33%; }
  #myCarouselGridCM .carouselGrid-inner .next        { left:  33%;}
  #myCarouselGridCM .carouselGrid-inner .prev   {left: -33%; }
  #myCarouselGridCM .carouselGrid-inner .active > div { display:none; }
  #myCarouselGridCM .carouselGrid-inner .active > div:first-child { display:block; }
  #myCarouselGridCM .carouselGrid-inner .active > div:first-child + div { display:block; }
  #myCarouselGridCM .carouselGrid-inner .active > div:first-child + div + div { display:block; }
  #myCarouselGridCM .carouselGrid-inner .active > div:first-child + div + div + div { display:none; }  
} 


/* NECESSARY FOR FIVE ITEMS (Extends Bootstrap to 5 columns) */
/*http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/ */
#myCarouselGrid .carouselGrid-inner .col-xs-15,
#myCarouselGrid .carouselGrid-inner .col-sm-15,
#myCarouselGrid .carouselGrid-inner .col-md-15,
#myCarouselGrid .carouselGrid-inner .col-lg-15,
#myCarouselGridCM .carouselGrid-inner .col-xs-15,
#myCarouselGridCM .carouselGrid-inner .col-sm-15,
#myCarouselGridCM .carouselGrid-inner .col-md-15,
#myCarouselGridCM .carouselGrid-inner .col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
#myCarouselGrid .carouselGrid-inner .col-xs-15, #myCarouselGridCM .carouselGrid-inner .col-xs-15 {
    width: 33%;
    float: left;
}
@media (min-width: 768px) {
#myCarouselGrid .carouselGrid-inner .col-sm-15, #myCarouselGridCM .carouselGrid-inner .col-sm-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    #myCarouselGrid .carouselGrid-inner .col-md-15, #myCarouselGridCM .carouselGrid-inner .col-md-15 {
        width: 33%;
        float: left;
    }
}
@media (min-width: 1200px) {
    #myCarouselGrid .carouselGrid-inner .col-lg-15, #myCarouselGridCM .carouselGrid-inner .col-lg-15 {
        width: 33%;
        float: left;
    }
}