.item, .active, .carousel-inner { height: 100%; }
.fill { width: 100%; height: 100%; background-position: center; background-size: cover; }
.carousel-indicators li { width:42px; height:42px; border-radius: 50px; background-color:#ffffff; margin:4px; border:0px;}
.carousel-indicators .active { width:42px; height:42px; background-color:#212121; margin:4px; border:0px; }
.quadrato-grigio { position:absolute; z-index:9; background-color:#c4c4c4; }
.carousel-caption h3 { font-family: 'Josefin Sans', sans-serif; color:#000000; }
.carousel-caption h4 { font-family: 'Josefin Sans', sans-serif; color:#ffffff; }
.carousel-caption { z-index:0; }

@media (max-width:767px) {
.carousel { height:300px; }
.carousel-indicators li { width:16px; height:16px; }
.carousel-indicators .active { width:16px; height:16px; }
.carousel-indicators { bottom:-10px; }
.carousel-caption h3 { font-size:45px; margin-top:-110px; }
.carousel-caption h4 { font-size:18px; margin-top:-51px; margin-left:5px;padding:9px; background:rgba(0,0,0,0.5); }
}

@media(min-width:768px) and (max-width:991px) {
.carousel { height:400px; }
.carousel-indicators li { width:26px; height:26px; }
.carousel-indicators .active { width:26px; height:26px; }
.carousel-indicators { bottom: 40px; }
.carousel-caption h3 { font-size:60px; margin-top:-200px; }
.carousel-caption h4 { font-size:25px; margin-top:-129px; margin-left:-78px;padding:30px; background:rgba(0,0,0,0.5); }
 }

@media(min-width:992px) {
.carousel { height:540px; }
.carousel-indicators { bottom:75px; }
.carousel-indicators li { width:28px; height:28px; }
.carousel-indicators .active { width:28px; height:28px; }
.carousel-caption h3 { font-size:70px; margin-top:-300px; }
.carousel-caption h4 { font-size:30px; margin-top:-214px; margin-left:-34px;padding:30px; background:rgba(0,0,0,0.5); }
 }

@media(min-width:1200px) {
.carousel { height:622px; }
.carousel-indicators { bottom:90px; }
.carousel-indicators li {  width:20px; height:20px; }
.carousel-indicators .active { width:20px; height:20px; }
.carousel-control .icon-next { width: 30px; height: 60px; margin-top:-90px; margin-left:0px; font-size: 150px; color:#212121; }
.carousel-control .icon-prev { width: 30px; height: 60px; margin-top:-90px; margin-left:0px; font-size: 150px; color:#212121; }
.quadrato-grigio { width:532px; height:176px; top:260px; left:405px; }
.carousel-caption h3 { font-size:70px; margin-top:-350px; }
.carousel-caption h4 { font-size:30px; margin-top:-261px; margin-left:62px;padding:30px; background:rgba(0,0,0,0.5);}
}