:focus { outline: none; } .homepage-refresh--carousel { background: #00263c; color: #fff; height: 100vh; width: 100vw; min-height: 528px; } .homepage-refresh--carousel .slick-slide { width: 100vw; overflow: hidden; } .homepage-refresh--carousel .carousel-item--image { padding-bottom: 18px; position: relative; } .homepage-refresh--carousel .carousel-item--image picture { display: block; height: 100%; width: 100%; } .homepage-refresh--carousel .carousel-item--image picture img { object-fit: cover; width: 84vw; height: 64vw; margin: 22vw 8vw 8vw; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } .homepage-refresh--carousel .carousel-btn { width: 100%; border: 1px solid white; height: 48px; text-decoration: none; color: white; text-align: center; line-height: 48px; font-size: 14px; display: block; margin-top: 40px; } .homepage-refresh--carousel .carousel-item--image .pagination-wrapper { bottom: -0px; display: none; left: 8vw; position: absolute; width: 40%; } .homepage-refresh--carousel .carousel-item--image .pagination-wrapper .pagination-item { background-color: #004b64; box-sizing: border-box; border-radius: 1px; display: none; flex: 1 1; height: 1px; margin-left: 4px; width: 33.333333333333336%; } .homepage-refresh--carousel .carousel-item--image .pagination-wrapper .pagination-item:first-child { margin-left: 0; } .homepage-refresh--carousel .carousel-item--image .pagination-wrapper .pagination-item.is-active { background-color: #fff; flex: 3 1; } .carousel-items .slick-slider { touch-action: auto; -ms-touch-action: auto; } .homepage-refresh--carousel .carousel-item { cursor: pointer; width: 100vw; display: inline-block; padding: 0; overflow: hidden; } .homepage-refresh--carousel .carousel-item .carousel-item--content { padding: 0 8vw 8vw; position: relative; opacity: 0; } .homepage-refresh--carousel .carousel-item .pagination-wrapper { opacity: 0; } .homepage-refresh--carousel .slick-active .carousel-item .carousel-item--content, .homepage-refresh--carousel .slick-active .carousel-item .pagination-wrapper { opacity: 1; -webkit-transition: opacity 0.8s ease-in; -moz-transition: opacity 0.8s ease-in; -ms-transition: opacity 0.8s ease-in; -o-transition: opacity 0.8s ease-in; transition: opacity 0.8s ease-in; position: relative; } .homepage-refresh--carousel .carousel-item .carousel-item--content .item-number { color: #004b64; font-size: 28px; line-height: 50px; } .homepage-refresh--carousel .carousel-item .carousel-item--content h3 { color: #fff; font-size: 24px; font-weight: 300; line-height: 32px; text-align: center; /*margin-bottom: 10px;*/ /*margin-top: 1em;*/ } .homepage-refresh--carousel .carousel-item .carousel-item--content p { color: #FFFFFF; font-size: 14px; line-height: 24px; text-align: center; } .homepage-refresh--carousel .carousel-item .carousel-item--content:after { background-size: cover; bottom: 30px; content: ""; height: 15px; left: 0; position: absolute; right: auto; top: auto; width: 15px; } .homepage-refresh--carousel .swiper-button-prev, .homepage-refresh--carousel .swiper-button-next { align-items: center; background-color: transparent; background-repeat: no-repeat; background-size: contain; cursor: pointer; display: none; height: 2.0833333333vw; justify-content: center; margin-top: 2vh; position: absolute; top: 50%; width: 2.0833333333vw; z-index: 1; } .homepage-refresh--carousel .swiper-button-prev { left: 10px; margin-left: 5.4166666667vw; right: auto; transform: rotate(180deg); } .homepage-refresh--carousel .swiper-button-next { left: auto; margin-right: 5.4166666667vw; right: 10px; } .homepage-refresh--carousel .slick-dots { position: absolute; bottom: 253px; /*bottom: 188px;*/ width: 90%; /*left: 10%;*/ text-align: left; margin: 0 2em; z-index: 1; } .homepage-refresh--carousel .slick-dots li { display: inline-block; width: 27px; background: #004b64; overflow: hidden; text-indent: -1000px; height: 1px; } .homepage-refresh--carousel .slick-dots li:not(:last-child) { margin-right: 5px; } .homepage-refresh--carousel .slick-dots li.slick-active { background: #ffffff; width: 82px; } .swiper_arrows img{ width: 100%; } @media screen and (min-width: 1024px) { .homepage-refresh--carousel { position: relative; } .homepage-refresh--carousel .slick-slide { width: auto; text-align: center; margin: 10vh 10px 0; } .homepage-refresh--carousel .slick-active .carousel-item .carousel-item--content { margin: 0; width: 50vw; /*max-width: 960px;*/ /*margin-top: 77px;*/ } .homepage-refresh--carousel .carousel-item { opacity: 0.15; padding: 0 0; text-align: center; height: 80vh; margin-top: 10vh; /*margin-top: 20vh;*/ } .homepage-refresh--carousel .carousel-btn { /*display: none;*/ width: 1px; height: 1px; opacity: 0; margin: 0; } .homepage-refresh--carousel .carousel-item--image picture img { width: 50vw; max-width: 960px; height: 25.8333333333vw; max-height: 496px; margin: 0; } .homepage-refresh--carousel .carousel-item .carousel-item--content { padding: 0 2em 3em; } .homepage-refresh--carousel .carousel-item .carousel-item--content h3 { /*margin-top: 4em;*/ margin-top: 1em; } .homepage-refresh--carousel .carousel-item .carousel-item--content:after { display: none; right: 45px; top: 80px; } .homepage-refresh--carousel .swiper-button-prev, .homepage-refresh--carousel .swiper-button-next { display: block; height: 25.8333333333vw; max-height: 496px; position: absolute; top: 23vh; } .homepage-refresh--carousel .swiper-button-prev img, .homepage-refresh--carousel .swiper-button-next img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .homepage-refresh--carousel .is-active .carousel-item, .homepage-refresh--carousel .slick-current .carousel-item { opacity: 1; } .homepage-refresh--locations .locations--inner-wrapper .locations--images .locations--image { height: 31.25vw; margin-right: 10px; width: 16.6666666667vw; } .homepage-refresh--carousel .carousel-item--image .pagination-wrapper { bottom: -25px; left: 50%; transform: translate(-50%, 0); width: 30%; display: none; } .homepage-refresh--carousel .slick-current .carousel-item .pagination-wrapper { display: flex; } .homepage-refresh--carousel .slick-dots { position: absolute; bottom: 22vh; left: 0; text-align: center; margin: 0 auto; } } @media screen and (min-width: 1280px) { .homepage-refresh--carousel .carousel-item{ margin-top: 10vh; height: 80vh; } .homepage-refresh--carousel .slick-dots { bottom: 13vh; } } @media screen and (min-width: 1440px) { .homepage-refresh--carousel .carousel-item{ margin-top: 10vh; } .homepage-refresh--carousel .slick-dots { bottom:12vh; } } @media screen and (min-width: 1660px) { .homepage-refresh--carousel .carousel-item{ margin-top: 10vh; } .homepage-refresh--carousel{ min-height: 658px; } .homepage-refresh--carousel .slick-dots { bottom: 16vh; } } @media screen and (min-width: 1920px) { .homepage-refresh--carousel{ min-height: 658px; } .vehicle-item--ep9 .vehicle-item--static { max-width: 850px; margin: 0 auto; } .homepage-refresh--carousel .slick-dots { bottom: 15vh; } .homepage-refresh--carousel .carousel-item--image picture img{ max-width: none !important; object-fit: cover; } .homepage-refresh--carousel .carousel-item{ margin-top: 10vh; } } @media screen and (max-width: 760px) { .swiper_arrows img{ display: none; } .homepage-refresh--carousel .carousel-item--image{ height: 100vh; position: relative; } .homepage-refresh--carousel .carousel-item--image .carousel-item--content{ position: absolute !important; bottom: 98px; } .homepage-refresh--carousel .slick-dots{ width: 84vw; } .slick-dotted.slick-slider{ position: relative; height: 100vh; } .homepage-refresh--carousel .slick-dots li{ width: calc(33% - 11px); } .homepage-refresh--carousel .slick-dots li.slick-active{ width: calc(33% - 11px); } .homepage-refresh--carousel .slick-dots{ bottom:calc(54vh - 30vw); } .homepage-refresh--carousel .carousel-item .carousel-item--content { width: 100%; } .homepage-refresh--carousel .carousel-item--image picture img{ height: 46vh; /*height: 77vw;*/ } .homepage-refresh--carousel .slick-active .carousel-item .carousel-item--content, .homepage-refresh--carousel .slick-active .carousel-item .pagination-wrapper{ height: calc(54vh - 30vw); } .homepage-refresh--carousel .carousel-item .carousel-item--content h3{ margin-top: 36px; text-align: center; } .homepage-refresh--carousel .carousel-item .carousel-item--content p{ text-align: center; line-height: 20px; } .homepage-refresh--carousel .carousel-btn{ position: absolute; width: 84vw; bottom: 30px; left: 8vw; } @media (max-height: 640px) { .homepage-refresh--carousel .slick-dots{ bottom:calc(60vh - 30vw); } .homepage-refresh--carousel .carousel-item .carousel-item--content { width: 100%; } .homepage-refresh--carousel .carousel-item--image picture img{ height: 45vh; /*height: 77vw;*/ } .homepage-refresh--carousel .slick-active .carousel-item .carousel-item--content, .homepage-refresh--carousel .slick-active .carousel-item .pagination-wrapper{ height: calc(54vh - 30vw); } .homepage-refresh--carousel .carousel-btn{ bottom: 20px; } } @media (max-height: 800px) { .homepage-refresh--carousel .carousel-item .carousel-item--content h3 { font-size: 22px; line-height: 22px; } .homepage-refresh--carousel .carousel-item .carousel-item--content p { font-size: 12px; margin-bottom: 10px; } .homepage-refresh--carousel .carousel-btn { margin-top: 25px; } } @media screen and (min-height: 1024px){ .homepage-refresh--carousel .carousel-item--image picture { height: 100%; } .homepage-refresh--carousel .slick-dots { margin: 0 4em; bottom: 252px; } .slick-arrow { display: none !important; } } } @media screen and (max-width: 360px) and (max-height: 640px) { .homepage-refresh--carousel { padding-top: 10vh; } .homepage-refresh--carousel .carousel-item--image picture { height: 100%; } .homepage-refresh--carousel .carousel-item--image picture img { margin-top: 12vw; } } @media screen and (max-width: 428px) and (min-height: 641px) and (max-height: 667px) { .homepage-refresh--carousel { padding-top: 0; } .homepage-refresh--carousel .carousel-item--image picture { height: 100%; } }