/* ------------------------------------------------- Showcase ----------------------------------------------------*/ .carousel.showcase { height: 579px; position: relative; } .carousel-image { border: 0; display: block; width: 100%; height: 100%; } .carousel-feature { position: absolute; top: -1000px; left: -1000px; cursor: pointer; } .carousel.showcase .carousel-shadow { position: absolute; bottom: -6px; left: -10%; z-index: -1; max-width: none; width: 120%; } .carousel.showcase a { overflow: visible !important; cursor: pointer; } .showcase-overlay-first { position: absolute; width: 100%; height: 101%; background: #fff; top: 0; left: 0; opacity: .2; } .showcase-overlay-second { position: absolute; width: 100%; height: 101%; background: #fff; top: 0; left: 0; opacity: .5; } .showcase a.smooth-rotation{ transition: transform 300ms; } .showcase a .overlay{ width: 100%; height: 100%; position: absolute; top: 0; background-color: rgba(0,0,0,0.5); text-align: center; opacity: 0; transition: opacity 300ms; } .showcase a.carousel-center:hover .overlay{ opacity: 1; } .showcase a .border{ border: 0 solid; margin: 14px; display: block; height: calc(100% - 28px); transition: border-width 300ms; } .showcase a.carousel-center:hover .border{ border-width: 12px; } .showcase a .text-container{ display: block; position: relative; top: 50%; transform: translateY(-50%); } .showcase a .title, .showcase a .subtitle{ color: #fff; margin: 0; } .showcase a .title{ font-size: 48px; line-height: 58px; font-weight: 600; } .showcase a .subtitle{ font-size: 14px; line-height: 22px; }