

/*MAIN Carousel*/

.carousel {
  height: 100vh;
      width: 100%;
}
/* Declare heights because of positioning of img element */
.carousel .item {
  height: 100%;
    position: 50% 50%;
         -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: ;
    overflow: hidden;

}
.carousel-inner {
    height: 100%;
} 
.carousel-inner > .item > img {

min-width: 100%;
    height: auto;
    
    
/*
    position: 50% 50%;
         -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: ;
    overflow: hidden;
*/
}


/* MAIN Carousel resize */

  @media (max-width: 1200px) {
    
  .carousel {
  height: 100vh;
      width: 100%;
} 
}     
@media (max-width: 992px) {
    
  .carousel {
  height: 470px;
      width: 100%;
}  
}    
   
@media (max-width: 768px) {
    
  .carousel {
  height: 365px;
      width: 100%;
}  
}    
        
   @media (max-width: 576px) {
    
  .carousel {
  height: 275px;
      width: 100%;
}  
}  
    
   
/*SECTION Carousels*/

#myCarousel2, 
#myCarousel3, 
#myCarousel4, 
#myCarousel5, 
#myCarousel6, 
#myCarousel7      
      {
  height: 450px;
      width: 100%;
}
#myCarousel2 .carousel,
#myCarousel3 .carousel,
#myCarousel4 .carousel,
#myCarousel5 .carousel,
#myCarousel6 .carousel,
#myCarousel7 .carousel

{
  height: 450px;
      width: 100%;
}
/* Declare heights because of positioning of img element */

#myCarousel2 .carousel .item,
#myCarousel3 .carousel .item,
#myCarousel4 .carousel .item,
#myCarousel5 .carousel .item,
#myCarousel6 .carousel .item,
#myCarousel7 .carousel .item


{
  height: 450px;
    position: 50% 50%;
         -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: ;
    overflow: hidden;

}

#myCarousel2 .carousel-inner,
#myCarousel3 .carousel-inner,
#myCarousel4 .carousel-inner,
#myCarousel5 .carousel-inner,
#myCarousel6 .carousel-inner,
#myCarousel7 .carousel-inner

{
    height: 100%;
} 
#myCarousel2 .carousel-inner > .item > img,
#myCarousel3 .carousel-inner > .item > img,
#myCarousel4 .carousel-inner > .item > img,
#myCarousel5 .carousel-inner > .item > img,
#myCarousel6 .carousel-inner > .item > img,
#myCarousel7 .carousel-inner > .item > img
{

min-width: 100%;
    height: auto;
    
    
/*
    position: 50% 50%;
         -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: ;
    overflow: hidden;
*/
}


/* SECTION Carousels resize */


@media (max-width: 1200px) {
    
#myCarousel2 .carousel,  
#myCarousel3 .carousel,   
#myCarousel4 .carousel,    
#myCarousel5 .carousel,    
#myCarousel6 .carousel,    
#myCarousel7 .carousel    
    {
  height: 450px;
      width: 100%;
} 
}      
@media (max-width: 992px) {
    
#myCarousel2 .carousel,  
#myCarousel3 .carousel,   
#myCarousel4 .carousel,    
#myCarousel5 .carousel,    
#myCarousel6 .carousel,    
#myCarousel7 .carousel 
    {
  height: 450px;
      width: 100%;
}  
}    
   
@media (max-width: 768px) {
    
#myCarousel2 .carousel,  
#myCarousel3 .carousel,   
#myCarousel4 .carousel,    
#myCarousel5 .carousel,    
#myCarousel6 .carousel,    
#myCarousel7 .carousel  
    {
  height: 450px;
      width: 100%;
}  
}    
        
@media (max-width: 576px) {
    
#myCarousel2 .carousel,  
#myCarousel3 .carousel,   
#myCarousel4 .carousel,    
#myCarousel5 .carousel,    
#myCarousel6 .carousel,    
#myCarousel7 .carousel 
    {
  height: 300px;
      width: 100%;
}  
}  
