/* Customize the Carousel and add some hacks */ .carousel { margin-bottom: 60px; } .carousel .container { position: relative; z-index: 9; } .carousel-control { height: 80px; margin-top: 0; font-size: 120px; text-shadow: 0 1px 1px rgba(0,0,0,.4); background-color: transparent; border: 0; z-index: 1000000; } .carousel .item { height: 500px; } .carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; } .carousel-caption { background-color: transparent; position: static; max-width: 550px; padding: 0 20px; margin-top: 200px; } .carousel-caption h1, .carousel-caption .lead { margin: 0; line-height: 1.25; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); } .carousel-caption .btn { margin-top: 10px; } @media (max-width: 979px) { .carousel .item { height: 500px; } .carousel img { width: auto; height: 500px; } } @media (max-width: 767px) { #carousel { margin-left: 20px; margin-right: 20px; } .carousel { margin-left: -20px; margin-right: -20px; } .carousel .container { } .carousel .item { height: 300px; } .carousel img { height: 300px; } .carousel-caption { width: 65%; padding: 0 70px; margin-top: 100px; } .carousel-caption h1 { font-size: 30px; } .carousel-caption .lead, .carousel-caption .btn { font-size: 18px; } }