/* CSS Document */ @keyframes sprite { from { background-position: 0% 0%; } to { background-position: 100% 0%; } } i[class^="dvci-"] { position: relative; display: inline-block; width: 80px; height: 115px; background-color: #FAF6EA; border-radius: 8px; text-align: center; bottom: 10%; margin-bottom: 5px; } i[class^="dvci-"] > span.icon { display: inline-block; margin: 12px auto 0; width: 60px; height: 60px; background-size: cover; background-repeat: no-repeat; background-position: top left; } i[class^="dvci-"]:hover > span.icon { animation: sprite 2000ms steps(5, jump-none) infinite; animation-play-state: running; } i[class^="dvci-"] > span.text { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); font-size: 12px; line-height: 1.2; font-style: normal; height: 30px; display: grid; place-items: center; } /* Purple Background for Resort Icons */ i.dvci-animal-kingdom, i.dvci-disney-springs, i.dvci-disneyland, i.dvci-epcot, i.dvci-hollywood-studio, i.dvci-magic-kingdom { background-color: #8e4199; color: #fff; } i.dvci-sm { width: 40px; height: 40px; } /* Home Page Icons */ i.dvci-cost-calculator > span.icon { background-image: url('/img/redesign/icons/cost_calculator.png'); width: 81px; height: 80px; margin-top: 0; } i.dvci-hot-deals > span.icon { background-image: url('/img/redesign/icons/hot_deals.png'); width: 80px; height: 80px; margin-top: 0; } i.dvci-how-to-book > span.icon { background-image: url('/img/redesign/icons/how_to_book.png'); width: 80px; height: 80px; margin-top: 0; } i.dvci-rent-points > span.icon { background-image: url('/img/redesign/icons/rent_points.png'); width: 80px; height: 80px; margin-top: 0; } /* Amenities Icons */ i.dvci-all-inclusive > span.icon { background-image: url('/img/redesign/icons/all_inclusive.png'); width: 65.4px; } i.dvci-animal-kingdom-alt > span.icon { background-image: url('/img/redesign/icons/animal_kingdom_alt.png'); width: 52px; } i.dvci-animal-kingdom > span.icon { background-image: url('/img/redesign/icons/animal_kingdom.png'); width: 52px; } i.dvci-arcade > span.icon { background-image: url('/img/redesign/icons/arcade.png'); width: 50px; } i.dvci-bar > span.icon { background-image: url('/img/redesign/icons/bar.png'); width: 63.5px; } i.dvci-beach > span.icon { background-image: url('/img/redesign/icons/beach.png'); width: 65.66px; } i.dvci-boat > span.icon { background-image: url('/img/redesign/icons/boat.png'); width: 78px; } i.dvci-broadway-shows > span.icon { background-image: url('/img/redesign/icons/broadway_shows.png'); width: 80.4px; } i.dvci-bus > span.icon { background-image: url('/img/redesign/icons/bus.png'); } i.dvci-characters > span.icon { background-image: url('/img/redesign/icons/characters.png'); width: 62.25px; } i.dvci-community-hall > span.icon { background-image: url('/img/redesign/icons/community_hall.png'); width: 64.4px; } i.dvci-conference > span.icon { background-image: url('/img/redesign/icons/conference.png'); width: 63.25px; } i.dvci-dining > span.icon { background-image: url('/img/redesign/icons/dining.png'); width: 58px; } i.dvci-disney-springs-alt > span.icon { background-image: url('/img/redesign/icons/disney_springs_alt.png'); width: 55.4px; } i.dvci-disney-springs > span.icon { background-image: url('/img/redesign/icons/disney_springs.png'); width: 55.4px; } i.dvci-disney-world > span.icon { background-image: url('/img/redesign/icons/disney_world.png'); width: 56.75px; } i.dvci-disneyland-alt > span.icon { background-image: url('/img/redesign/icons/disneyland_alt.png'); width: 52px; } i.dvci-disneyland > span.icon { background-image: url('/img/redesign/icons/disneyland.png'); width: 52px; } i.dvci-epcot-alt > span.icon { background-image: url('/img/redesign/icons/epcot_alt.png'); width: 53.2px; } i.dvci-epcot > span.icon { background-image: url('/img/redesign/icons/epcot.png'); width: 53.2px; } i.dvci-exotic-animal > span.icon { background-image: url('/img/redesign/icons/exotic_animal.png'); width: 63px; } i.dvci-fireworks > span.icon { background-image: url('/img/redesign/icons/fireworks.png'); width: 65px; } i.dvci-go-karts > span.icon { background-image: url('/img/redesign/icons/go_karts.png'); width: 72px; } i.dvci-golf > span.icon { background-image: url('/img/redesign/icons/golf.png'); width: 58.83px; } i.dvci-gondola > span.icon { background-image: url('/img/redesign/icons/gondola.png'); width: 77.4px; } i.dvci-gym > span.icon { background-image: url('/img/redesign/icons/gym.png'); } i.dvci-hollywood-studio-alt > span.icon { background-image: url('/img/redesign/icons/hollywood_studio_alt.png'); width: 62.6px; } i.dvci-hollywood-studio > span.icon { background-image: url('/img/redesign/icons/hollywood_studio.png'); width: 62.6px; } i.dvci-ice-skating > span.icon { background-image: url('/img/redesign/icons/ice_skating.png'); width: 69.6px; } i.dvci-included-shore-excursions > span.icon { background-image: url('/img/redesign/icons/included_shore_excursions.png'); width: 52px; } i.dvci-infinite-verandas > span.icon { background-image: url('/img/redesign/icons/infinite_verandas.png'); width: 53.2px; } i.dvci-kids-club > span.icon { background-image: url('/img/redesign/icons/kids_club.png'); width: 65px; } i.dvci-magic-kingdom-alt > span.icon { background-image: url('/img/redesign/icons/magic_kingdom_alt.png'); width: 56.75px; } i.dvci-magic-kingdom > span.icon { background-image: url('/img/redesign/icons/magic_kingdom.png'); width: 56.75px; } i.dvci-mega-ships > span.icon { background-image: url('/img/redesign/icons/mega_ships.png'); width: 69.2px; } i.dvci-monorail > span.icon { background-image: url('/img/redesign/icons/monorail.png'); width: 75.5px; } i.dvci-nature > span.icon { background-image: url('/img/redesign/icons/nature.png'); } i.dvci-parking > span.icon { background-image: url('/img/redesign/icons/parking.png'); width: 64.2px; } i.dvci-pet-friendly > span.icon { background-image: url('/img/redesign/icons/pet_friendly.png'); } i.dvci-playground > span.icon { background-image: url('/img/redesign/icons/playground.png'); width: 66px; } i.dvci-pool > span.icon { background-image: url('/img/redesign/icons/pool.png'); width: 63px; } i.dvci-private-islands > span.icon { background-image: url('/img/redesign/icons/private_islands.png'); width: 61px; } i.dvci-river-cruising > span.icon { background-image: url('/img/redesign/icons/river_cruising.png'); } i.dvci-rotational-dining > span.icon { background-image: url('/img/redesign/icons/rotational_dining.png'); width: 69.75px; } i.dvci-rock-climbing > span.icon { background-image: url('/img/redesign/icons/rock_climbing.png'); width: 56.75px; } i.dvci-shopping > span.icon { background-image: url('/img/redesign/icons/shopping.png'); width: 57.57px; } i.dvci-skyliner > span.icon { background-image: url('/img/redesign/icons/gondola.png'); width: 77.4px; } i.dvci-spa > span.icon { background-image: url('/img/redesign/icons/spa.png'); width: 57.75px; } i.dvci-specialty-dining > span.icon { background-image: url('/img/redesign/icons/specialty_dining.png'); width: 63.75px; } i.dvci-splash-pad > span.icon { background-image: url('/img/redesign/icons/splash_pad.png'); width: 60.83px; } i.dvci-sustainable-practices > span.icon { background-image: url('/img/redesign/icons/sustainable_practices.png'); width: 50.75px; } i.dvci-walk > span.icon { background-image: url('/img/redesign/icons/walk.png'); width: 73.5px; } i.dvci-waterslides > span.icon { background-image: url('/img/redesign/icons/waterslides.png'); width: 59px; } i.dvci-wine-themed-cruises > span.icon { background-image: url('/img/redesign/icons/wine_themed_cruises.png'); width: 52.5px; } /* 4-step animations */ i.dvci-cost-calculator:hover > span.icon, i.dvci-hot-deals:hover > span.icon, i.dvci-how-to-book:hover > span.icon, i.dvci-rent-points:hover > span.icon, i.dvci-bar:hover > span.icon, i.dvci-characters:hover > span.icon, i.dvci-conference:hover > span.icon, i.dvci-disney-world:hover > span.icon, i.dvci-fireworks:hover > span.icon, i.dvci-gym:hover > span.icon, i.dvci-magic-kingdom-alt:hover > span.icon, i.dvci-magic-kingdom:hover > span.icon, i.dvci-pool:hover > span.icon, i.dvci-private-islands:hover > span.icon, i.dvci-rotational-dining:hover > span.icon, i.dvci-rock-climbing:hover > span.icon, i.dvci-spa:hover > span.icon, i.dvci-specialty-dining:hover > span.icon, i.dvci-sustainable-practices:hover > span.icon, i.dvci-walk:hover > span.icon { animation-timing-function: steps(4, jump-none); } /* 6-step animations */ i.dvci-animal-kingdom-alt:hover > span.icon, i.dvci-animal-kingdom:hover > span.icon, i.dvci-beach:hover > span.icon, i.dvci-boat:hover > span.icon, i.dvci-go-karts:hover > span.icon, i.dvci-golf:hover > span.icon, i.dvci-mega-ships:hover > span.icon, i.dvci-monorail:hover > span.icon, i.dvci-nature:hover > span.icon, i.dvci-playground:hover > span.icon, i.dvci-splash-pad:hover > span.icon, i.dvci-wine-themed-cruises:hover > span.icon { animation-timing-function: steps(6, jump-none); } /* 7-step animations */ i.dvci-bus:hover > span.icon, i.dvci-shopping:hover > span.icon { animation-timing-function: steps(7, jump-none); } /* 3-line text */ i.dvci-included-shore-excursions > span.text, i.dvci-wine-themed-cruises > span.text { line-height: 0.9; }