.coverageCardInner { display: flex; flex-direction: column; height: 100%; justify-content: space-between; align-items: center; } .coverageCardImg { display: flex; justify-content: center; align-items: center; width: 33px; margin-top: 1.1rem; position: relative; } .coverageCardImg:before { content: ""; width: 67px; height: 67px; transform: scale(0); background-color: rgba(20, 182, 187, 0.2); border-radius: 100rem; position: absolute; z-index: 1; transition-duration: 120ms; } .coverageCardImg img { width: 85%; z-index: 2; } .covCardDesc { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 0.9rem 0; } .covLink { display: none; padding: 11px 14px 12px 14px; background-color: rgba(0, 0, 0, 0.06); border-radius: 0.375rem; cursor: pointer; margin-bottom: 1.2rem; color: black; font-weight: 600; } .startingAtPrice { font-size: 0.875rem; color: rgba(0, 0, 0, 0.5); margin: 0.25rem 0; } @media only screen and (min-width: 600px) { .coverageCardImg img { width: 90%; } } @media only screen and (min-width: 768px) { .coverageCards a:hover .coverageCardImg:before { transform: scale(1); transition-duration: 120ms; } .coverageCards a:hover .covLink { background-color: rgba(0, 0, 0, 1); color: white; transition-duration: 120ms; } .coverageCardImg { margin-top: 1.9rem; } .coverageCardImg img { width: 100%; } .covCardDesc { margin: 0.75rem 0 0 0; } .covLink { display: flex; } } html, body { font-family: "Open Sans", sans-serif; position: relative; overflow-x: hidden; } body { margin: 0; padding: 0; } button { cursor: pointer; } .varHead1, .varHead2, .varHead3 { color: #373737; } .varHead1 { font-size: 1.5rem; line-height: 1.2; padding: 0; margin: 0; } .varHead2 { font-size: 0.9375rem; line-height: 1.25; font-weight: 700; } .varHead3 { font-size: 0.875rem; line-height: 1; font-weight: 600; margin: 0; padding: 0; } #daggerSuper { position: absolute; font-size: 0.7rem; transform: translateY(-3px); transform: translateX(1px); } .cardLink { position: relative; font-size: 0.875rem; } .heroSectionVariant { max-width: 480px; margin: 0 auto; padding: 0 1.2rem; /*background-color: bisque;*/ } @media only screen and (min-width: 600px) { .heroSectionVariant { max-width: 680px; } } @media only screen and (min-width: 768px) { .heroSectionVariant { max-width: 800px; } } @media only screen and (min-width: 992px) { .varHead1 { font-size: 2rem; } .varHead2 { font-size: 1.0625rem; } .varHead3 { font-size: 1rem; } .heroSectionVariant { margin: 0 auto; max-width: 1000px; } } @media only screen and (min-width: 1280px) { .heroSectionVariant { max-width: 1200px; } .varHead1 { font-size: 2.625rem; line-height: 1.25; margin-bottom: 0.5rem; } } .planCardRow { margin: 0.125rem 0 8rem 0; } .planCardRowLabel { display: flex; margin-bottom: 0; } .planCard { border-radius: 1.2rem; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; border: 1px solid rgba(20, 182, 187, 0.1); overflow: hidden; transition-duration: 120ms; text-decoration: none; color: black; cursor: pointer; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08); } .covPrevContainer { display: flex; flex: 1; align-items: flex-end; background-size: cover; background-repeat: no-repeat; background-image: radial-gradient( farthest-corner at 0px 260px, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100% ); background-position: center; } .international .covPrevContainer { background-image: url("img/international.jpg"); } .vacation-rental .covPrevContainer { background-image: url("img/vaca.jpg"); } .domestic .covPrevContainer { background-image: url("img/domestic.jpg"); } .covid .covPrevContainer { background-image: url("img/covid.jpg"); } .covPrevWrapper { display: flex; flex-shrink: 0; height: 38px; margin: 0.875rem 0.8125rem; } .covPrevImg { display: flex; flex-shrink: 0; position: absolute; background-repeat: no-repeat; height: 38px; width: 38px; transition-duration: 120ms; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 10000px; background-position: center; background-size: 19px 19px; background-color: white; } #clip001, #clip002, #clip003, #clip004, #clip005, #clip006, #clip007, #clip008 { position: absolute; transform: translateX(15px); transition-duration: 120ms; } .planCard:active { transform: translateY(-1%); transition-duration: 120ms; } /*---------------------------------INTERNATIONAL-----------------------------------------------------------------------------------*/ .covPrevInt2Slide { transform: translateX(16px); clip-path: url(#clip001); } .covPrevInt3Slide { transform: translateX(32px); clip-path: url(#clip001); } .covPrevInt1 { background-image: url("img/baggage.svg"); } .covPrevInt2 { background-image: url("img/tmed.svg"); } .covPrevInt3 { background-image: url("img/+3.svg"); background-size: 32px 32px; } /*---------------------------------VACATION RENTAL-----------------------------------------------------------------------------------*/ .covPrevVaca2Slide { transform: translateX(16px); clip-path: url(#clip002); } .covPrevVaca3Slide { transform: translateX(32px); clip-path: url(#clip002); } .covPrevVaca1 { background-image: url("img/vrd.svg"); } .covPrevVaca2 { background-image: url("img/tcan.svg"); } .covPrevVaca3 { background-image: url("img/+3.svg"); background-size: 32px 32px; } /*---------------------------------DOMESTIC-----------------------------------------------------------------------------------*/ .covPrevDom2Slide { transform: translateX(16px); clip-path: url(#clip003); } .covPrevDom3Slide { transform: translateX(32px); clip-path: url(#clip003); } .covPrevDom1 { background-image: url("img/tcan.svg"); } .covPrevDom2 { background-image: url("img/rental.svg"); } .covPrevDom3 { background-image: url("img/+4.svg"); background-size: 32px 32px; } /*---------------------------------COVID-----------------------------------------------------------------------------------*/ .covPrevCov2Slide { transform: translateX(16px); clip-path: url(#clip004); } .covPrevCov3Slide { transform: translateX(32px); clip-path: url(#clip004); } .covPrevCov1 { background-image: url("img/tmed.svg"); } .covPrevCov2 { background-image: url("img/cfar.svg"); } .covPrevCov3 { background-image: url("img/+2.svg"); background-size: 32px 32px; } /*---------------------------------END-----------------------------------------------------------------------------------*/ .planCardLower { background-color: white; padding: 12px 1rem 13px 1rem; } .planLink { color: #373737; margin: 0; padding: 0; } .planLink:after { content: url("img/r_caret.svg"); position: absolute; top: 1.5px; margin-left: 0.25rem; transition-duration: 120ms; } @media only screen and (min-width: 600px) { .planCardRow { margin: 1rem 0 8rem 0; } .planCardRowLabel { margin-bottom: 0.4rem; } } @media only screen and (min-width: 768px) { .planCard:hover { transform: translateY(-2%); transition-duration: 120ms; } .international:hover #clip001 { transform: translateX(-1px); transition-duration: 120ms; } .international:hover .covPrevInt2Slide { transform: translateX(32px); transition-duration: 180ms; } .international:hover .covPrevInt3Slide { transform: translateX(64px); transition-duration: 180ms; } .vacation-rental:hover #clip002 { transform: translateX(-1px); transition-duration: 120ms; } .vacation-rental:hover .covPrevVaca2Slide { transform: translateX(32px); transition-duration: 180ms; } .vacation-rental:hover .covPrevVaca3Slide { transform: translateX(64px); transition-duration: 180ms; } .domestic:hover #clip003 { transform: translateX(-1px); transition-duration: 120ms; } .domestic:hover .covPrevDom2Slide { transform: translateX(32px); transition-duration: 180ms; } .domestic:hover .covPrevDom3Slide { transform: translateX(64px); transition-duration: 180ms; } .covid:hover #clip004 { transform: translateX(-1px); transition-duration: 120ms; } .covid:hover .covPrevCov2Slide { transform: translateX(32px); transition-duration: 180ms; } .covid:hover .covPrevCov3Slide { transform: translateX(64px); transition-duration: 180ms; } .planCard:hover .planLink { color: black; transition-duration: 120ms; } .planCard:hover .planLink:after { margin-left: 0.4rem; transition-duration: 120ms; } } .swiper-container { height: 288px; } .swiper-container .swiper-slide:last-child { margin-right: 1rem !important; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .swiper-button-next, .swiper-button-prev { display: none !important; width: 64px !important; height: 64px !important; } .swiper-button-next { background-image: url(img/next.svg); background-repeat: no-repeat; background-size: 100% auto; background-position: center; } .swiper-button-next:hover { background-image: url(img/next-hov.svg); } .swiper-button-next::after { display: none; } .swiper-button-prev { background-image: url(img/prev.svg); background-repeat: no-repeat; background-size: 100% auto; background-position: center; } .swiper-button-prev:hover { background-image: url(img/prev-hov.svg); } .swiper-button-prev::after { display: none; } .swiper-button-disabled { opacity: 0 !important; } @media only screen and (min-width: 640px) { .swiper-button-next, .swiper-button-prev { display: flex !important; bottom: 260px !important; top: auto !important; color: black !important; } .swiper-container { height: 290px; } } @media only screen and (min-width: 768px) { .swiper-container { width: 100% !important; margin-left: auto !important; left: auto !important; height: 310px; } .swiper-container .swiper-slide:first-child { margin-left: 0 !important; } .swiper-container .swiper-slide:last-child { margin-right: 0 !important; } .swiper-slide:hover { transform: translateY(-2%) !important; transition: 180ms !important; } .swiper-slide:active { transform: translateY(-1%) !important; } } @media only screen and (min-width: 992px) { .swiper-container { height: 320px; } .swiper-slide { flex: 1; } .swiper-button-next, .swiper-button-prev { display: none !important; } } .coverageCardRow { display: flex; flex-direction: column; margin: 1.2rem auto 0 auto; } .coverageCardRowLabel { display: flex; justify-content: space-between; align-items: center; } .seeMoreBtn { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-family: Open Sans; font-weight: 500; width: 100px; padding: 0.5rem 0.5625rem; border: none; border-radius: 0.25rem; opacity: 0.65; background-color: rgba(0, 0, 0, 0); } .seeMoreBtn:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.03); } #seeMoreBtnIcn { display: flex; position: relative; width: 0.65rem; height: 0.65rem; margin: 0.1rem 0 0 0.5rem; } #seeMoreBtnIcn span { position: absolute; transition: 300ms; background: black; border-radius: 1px; } #seeMoreBtnIcn span:first-child { top: 0%; bottom: 0%; width: 14%; left: 42%; } #seeMoreBtnIcn span:last-child { height: 14%; top: 42%; } .anim-span1-in { transform: rotate(0deg); } .anim-span1-out { transform: rotate(90deg); } .anim-span2-in { transform: rotate(0deg); left: 0%; right: 0%; } .anim-span2-out { transform: rotate(90deg); left: 50%; right: 50%; } .coverageCards { width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; color: #444; max-height: 240px; overflow-y: hidden; padding: 0 0 0.5rem 0; transition: max-height; } .coverageCards.rowExpanded { max-height: 612px; transition: max-height; transition-duration: 400ms; transition-timing-function: ease-in-out; } .coverageCards a { display: flex; flex-direction: column; align-items: center; text-align: center; height: 114px; border-radius: 1.2rem; background-color: #fff; border: 1px solid rgba(7, 114, 117, 0.15); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08); } .coverageCards a:active { transform: translateY(-1%); } .coverageCards a:nth-child(n + 5) { display: none; } .fade-in { -webkit-animation-name: fade-in; -webkit-animation-duration: 300ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards; animation-name: fade-in; animation-duration: 300ms; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } @-webkit-keyframes fade-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } @keyframes fade-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } #expanded { display: block; } @media only screen and (min-width: 600px) { .coverageCards { max-height: 124px; grid-template-columns: 1fr 1fr 1fr; grid-gap: 14px; padding: 0.5rem 0; } .coverageCards a { height: 122px; } .coverageCards.rowExpanded { max-height: 538px; } .coverageCards a:nth-child(n + 4) { display: none; } .coverageCards a:hover { transform: translateY(-2%); transition: 180ms; } .coverageCards a:active { transform: translateY(-1%); } } @media only screen and (min-width: 768px) { .coverageCardRow { margin: 1rem auto 0 auto; } .seeMoreBtn { font-size: 0.875rem; } .coverageCards { max-height: 222px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 8px; } .coverageCards a { height: 220px; } .coverageCards a:nth-child(4) { display: block; } .coverageCards a:nth-child(n + 5) { display: none; } .coverageCards.rowExpanded { max-height: 682px; } } @media only screen and (min-width: 992px) { .coverageCardRow { margin: 0 auto; } .coverageCards { grid-gap: 16px; } .coverageCards.rowExpanded { max-height: 692px; } } @media only screen and (min-width: 1280px) { .coverageCards { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .coverageCards.rowExpanded { max-height: 454px; } .coverageCards a:nth-child(5) { display: block; } .coverageCards a:nth-child(n + 6) { display: none; } } .introRow { display: grid; grid-template-columns: 1fr; } .introCopy { display: flex; flex-direction: column; margin: 2rem 0 0 0; /*background-color: aquamarine;*/ } .introCopy ul { margin: 1rem 0 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .introCopy ul li { font-size: 0.875rem; display: flex; align-items: center; line-height: 1; margin: 0 0 0.4rem 0; } .introCopy ul li:first-child:before { content: url("img/thermometer.svg"); margin: 0 0.4rem 0 0; } .introCopy ul li:last-child:before { content: url("img/x-octagon.svg"); margin: 0 0.4rem 0 0; } .hpHeroVarBtnPrim { display: flex; justify-content: center; padding: 1.125rem 1.25rem; color: #ffffff; background-color: #ffa02f; border: 1px solid rgba(141, 70, 6, 0.2); box-shadow: 0px 2px 3px rgba(16, 2, 90, 0.09); border-radius: 0.5rem; box-sizing: border-box; text-decoration: none; font-weight: 700; text-align: center; font-size: 0.9375rem; cursor: pointer; margin-top: 1rem; } .hpHeroVarBtnPrim:active { background-color: #dd7b06; border: 1px solid rgba(108, 52, 2, 0.26); box-shadow: 0px 2px 3px rgba(16, 2, 90, 0.09); transform: translateY(2%); } .mapImg { display: none; } .mapImg img { width: 100%; } @media only screen and (min-width: 600px) { .introCopy { max-width: 480px; } } @media only screen and (min-width: 768px) { .introRow { grid-template-columns: 1fr 1fr; grid-gap: 0px; } .introCopy { margin: auto 0; max-width: unset; } .hpHeroVarBtnPrim { align-self: flex-start; min-width: 200px; } .hpHeroVarBtnPrim:hover { background-color: #f58c0e; box-shadow: 0px 2px 8px rgba(16, 2, 90, 0.09); transform: translateY(-2%); transition-duration: 200ms; } .hpHeroVarBtnPrim:active { background-color: #dd7b06; border: 1px solid rgba(108, 52, 2, 0.26); box-shadow: 0px 2px 3px rgba(16, 2, 90, 0.09); transform: translateY(2%); } .mapImg { display: flex; } } @media only screen and (min-width: 992px) { .introRow { margin: 2.25rem 0 0 0; } .introCopy ul li { font-size: 0.9rem; } .introCopy ul li:first-child:before { margin: 0 0.65rem 0 0; } .introCopy ul li:last-child:before { margin: 0 0.65rem 0 0; } }