/* Bootstrap items to overWrite */

#myCarouselGrid .carousel-control {width: 50px;}

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

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

#myCarouselGrid .carousel-control img {
	top: 40px;
	position: relative;
}

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

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

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

#myCarouselGrid .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 {
  line-height: 1;
}



@media all and (transform-3d), (-webkit-transform-3d) {
 #myCarouselGrid .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: 1200px ) { /* lg */

    #myCarouselGrid .carouselGrid-inner > .item.next,
    #myCarouselGrid .carouselGrid-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(33.333%, 0, 0);
              transform: translate3d(33.333%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.prev,
    #myCarouselGrid .carouselGrid-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-33.333%, 0, 0);
              transform: translate3d(-33.333%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.next.left,
    #myCarouselGrid .carouselGrid-inner > .item.prev.right,
    #myCarouselGrid .carouselGrid-inner > .item.active {
      left: 0;
      -webkit-transform: translate3d(0%, 0, 0);
              transform: translate3d(0%, 0, 0);
    }
  }  
  
  @media (max-width: 960px) { /* sm */
      #myCarouselGrid .carouselGrid-inner > .item.next,
    #myCarouselGrid .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 {
      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 {
      left: 0;
      -webkit-transform: translate3d(0%, 0, 0);
              transform: translate3d(0%, 0, 0);
    }
  }
  
  @media (max-width: 767px) { /* xs */
      #myCarouselGrid .carouselGrid-inner > .item.next,
    #myCarouselGrid .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 {
      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 {
      left: 0;
      -webkit-transform: translate3d(0%, 0, 0);
              transform: translate3d(0%, 0, 0);
    }
  }  
  
  @media (min-width: 1201px ) { /* lg */

    #myCarouselGrid .carouselGrid-inner > .item.next,
    #myCarouselGrid .carouselGrid-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(25%, 0, 0);
              transform: translate3d(25%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.prev,
    #myCarouselGrid .carouselGrid-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-25%, 0, 0);
              transform: translate3d(-25%, 0, 0);
    }
    #myCarouselGrid .carouselGrid-inner > .item.next.left,
    #myCarouselGrid .carouselGrid-inner > .item.prev.right,
    #myCarouselGrid .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 {
    display: block;
  }
  #myCarouselGrid .carouselGrid-inner > .active {
    left: 0;
  }
  #myCarouselGrid .carouselGrid-inner > .next,
  #myCarouselGrid .carouselGrid-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%;
  }
  #myCarouselGrid .carouselGrid-inner > .next {
    left: 100%;
  }
  #myCarouselGrid .carouselGrid-inner > .prev {
    left: -100%;
  }
  #myCarouselGrid .carouselGrid-inner > .next.left,
  #myCarouselGrid .carouselGrid-inner > .prev.right {
    left: 0;
  }


  @media (max-width: 1200px ) { /* lg */
    #myCarouselGrid .carouselGrid-inner > .active.left {
      left: -33.3333%;
    }
    #myCarouselGrid .carouselGrid-inner > .active.right {
      left: 33.3333%;
    }
  } 
  
  @media (max-width: 960px) { /* sm */ 
        #myCarouselGrid .carouselGrid-inner > .active.left {
      left: -50%;
    }
    #myCarouselGrid .carouselGrid-inner > .active.right {
      left: 50%;
    }
  }
  
  @media (max-width: 767px) { /* xs */
    #myCarouselGrid .carouselGrid-inner > .active.left {
      left: -100%;
    }
    #myCarouselGrid .carouselGrid-inner > .active.right {
      left: 100%; 
    }
  }  
  
  @media (min-width: 1201px ) { /* lg */
    #myCarouselGrid .carouselGrid-inner > .active.left {
      left: -25%;
    }
    #myCarouselGrid .carouselGrid-inner > .active.right {
      left: 25%;
    }
  }


@media (min-width: 1201px ) { /* lg */
  #myCarouselGrid .carouselGrid-inner .active.left { left: -25%; }
  #myCarouselGrid .carouselGrid-inner .next        { left:  25%;}
  #myCarouselGrid .carouselGrid-inner .prev   {left: -25%; }
  #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:block; }  
} 

@media (max-width: 1200px ) { 
  #myCarouselGrid .carouselGrid-inner .active.left { left: -33.3333%; }
  #myCarouselGrid .carouselGrid-inner .next        { left:  33.3333%;}
  #myCarouselGrid .carouselGrid-inner .prev   {left: -33.3333%; }
  #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; }
}

@media (max-width: 1023px) { 
  #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:none; } 
}

@media (max-width: 767px) { 
  #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 { display:none; } 
  #myCarouselGrid .carouselGrid-inner .active > div:first-child + div + div { display:none; }
  #myCarouselGrid .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 {
    position: relative; 
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
#myCarouselGrid .carouselGrid-inner .col-xs-15 {
    width: 25%;
    float: left;
}

@media (max-width: 1200px) {
    #myCarouselGrid .carouselGrid-inner .col-md-15 {
        width: 33.333%;
        float: left;
    }
}

@media (max-width: 768px) {
#myCarouselGrid .carouselGrid-inner .col-sm-15 {
        width: 50%;
        float: left;
    }
}

@media (max-width: 767px) {
#myCarouselGrid .carouselGrid-inner .col-sm-15 {
        width: 100%;
        float: left;
    }
}

@media (min-width: 1201px) {
    #myCarouselGrid .carouselGrid-inner .col-lg-15 {
        width: 25%;
        float: left;
    }
}