@media only screen and (max-width: 1575px) {
    .attraction-page .attraction-item-wraper {
        margin: auto 40px;
    }
}
@media only screen and (max-width: 1500px) {
    .attraction-page .card-group {
        margin: 0px auto;
        max-width: 1000px;
    }
    .attraction-page .card-group a > div,
    .attraction-card-group a > div {
        padding: 0;
        margin: 10px;
        width: 300px;
        height: 500px;

    }
    .attraction-card-group > div {
        justify-content: center;
    }
    .attraction-page .description {
        margin: 10px auto;
        padding: 0 40px;
    }
    .featured-item .col-overlay {
        position: absolute;
        width: 300px;
        height: 500px;
    }
    .attraction-page .col-overlay button {
        left: 75px;
        top: 250px;
    }

}
@media only screen and (max-width: 1459px) and (min-width: 1200px) {
    .page-inner,
    .accessibility .page-content > p,
    .accessibility .page-content .first-accessible {
        max-width: 1140px;
        margin: 0 auto;
    }
    .related-page-bg {
        height: 200px;
    }
    #header-menu > li > a {
        font-size: 12px;
        padding: 10px 12px;
    }
    #header-nav-inner {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 0 0 25px;
    }
    #trip-planner .trip-planner-title {
        font-size: 20px;
        line-height: 28px;
    }
    #trip-planner-type label {
        font-size: 12px;
        padding: 20px 0;
        width: 115px;
    }
    select#ReservationDepartPort {
        font-size: 12px;
        padding: 0 0 0 20px;
    }
    #ferry-form #searchButton {
        width: 16%;
    }
    #media .inner,
    #media .container .timeline > .flex,
    #careerPage,
    #faqs {
        max-width: 1000px;
        margin: 0 auto;
    }
    .charter.flex .description {
        max-height: 900px;
        margin-left: calc(50vw - 570px);
        padding-right: 50px;
    }
    .charter.flex > div,
    .charter.flex .img-wrapper {
        height: 900px;
    }
    .charter.flex img {
        height: 900px;
    }
    #travelingWithPets .pet-bullet-points li {
        max-width: 500px;
    }
    #articles-page .article-item .description h3 {
        font-size: 20px;
    }
    #articles-page .article-item .description h4 {
        font-size: 14px;
    }
    #schedules .accordion-section .departures {
        max-width: 1080px;
    }
    .imageGallery a.image-gallery-item {
        width: 300px;
    }
    .image-gallery .flex img {
        width: 300px;
    }
    #seattleToVictoria.page-inner {
        max-width: 1300px;
    }
}
@media (max-width: 1399px) {
    #searchResults #results-packages.results-container,
    .package-rotator-wrapper {
        max-width: 998px;
    }
    .coffee-shop,
    .duty-free,
    .break-point-width,
    .carRentals {
        max-width: 1100px;
    }
    #media .container .timeline {
    max-width: 1200px;
    }
    #seattleToVictoria .red {
        font-size: 12px;
    }
}
@media only screen and (max-width: 1199px) and (min-width: 1024px) {
    #page-header h1 {
        font-size: 42px;
    }
    #media-video {
        max-width: 989px;
    }
    .page-inner,
    .accessibility .page-content > p,
.accessibility .page-content .first-accessible {
        max-width: 960px;
        margin: 0 auto;
    }
    #header-menu > li > a {
        letter-spacing: 0.1em;
        font-size: 10px;
        padding: 8px 15px;
    }
    #header-menu > li.nav-book-now a {
        font-size: 12px;
        padding: 8px 18px;
    }
    #header-nav-inner {
        max-width: 960px;
        margin: 0 auto;
        padding: 0;
    }
    .flex.related-pages {
        flex-wrap: wrap;
        justify-content: center;
    }
    #careerPage,
    #faqs {
        max-width: 889px;
        margin: 0 auto;
    }
    .charter.flex .description {
        max-height: 1000px;
        margin-left: calc(50vw - 480px);
        padding-right: 50px;
    }
    .charter.flex > div,
    .charter.flex .img-wrapper {
        height: 1000px;
    }
    .charter.flex img {
        height: 1000px;
    }
    #travelingWithPets .pet-bullet-points li {
        max-width: 400px;
    }
    #schedules .accordion-section .departures {
        max-width: 900px;
    }
}
@media only screen and (max-width: 1199px) {
    .coffee-shop,
    .duty-free,
    .break-point-width,
    .carRentals {
        max-width: 889px;
    }
    .flex.footer-nav {
        flex-wrap: wrap;
    }

    .flex.footer-nav li,
    .flex.footer-nav li button {
        font-size: 14px !important;
    }
    #trip-planner {
        display: none;
    }
    #media .container > .flex,
    #media .song > .flex {
        flex-wrap: wrap;
        justify-content: center;
    }
    #media .downloads,
    #media .song > .flex .description {
        width: unset;
        text-align: center;
    }
    .package .featured,
    .package .package-header {
        max-width: 950px;
    }
    .package .featured .featured-item {
        height: 440px;
    }
    .package .featured .description h3 {
        font-size: 20px;
        margin-top: 20px;
    }
    .package .featured .description p {
        font-size: 16px;
    }
    .package .description .more-info {
        flex-direction: column;
    }
    #packages-image-map-container .map-gallery,
    #package-rotator.swiper {
        width: 50%;
        max-width: unset;
        height: 400px;
    }
    #packages-image-map-container .contact-map #map {
        min-width: unset;
    }
    #packages-image-map-container .swiper-wrapper img {
        width: 100%;
    }
    #contactUs .ferry-terminals .port-angeles-table,
    #contactUs .ferry-terminals .canada-table,
    #contactUs .hotel-ferry-package-inner,
    #contactUs .contact-us-form {
        width: 450px;
    }
    #contactUs td:first-of-type {
        width: 40%;
    }
    #contactUs .hearing-disclaimer-inner {
        width: 920px;
    }
    .accessibility .page-content .column.three:not(.accessibility-phone-one, .accessibility-phone-two, .accessibility-phone-three) {
        width: unset;
    }
    .accessibility #accessible-services p {
        text-align: center;
    }
    #history-rotator h3 {
        font-size: 30px;
    }
    #contactUs .hearing-impaired-disclaimer {
        width: 920px;
    }
    .policy-inner {
        width: 90%;
    }
    #articles-page .article-item {
        width: 100%;
    }
    .container.combination-page,
    #packages-image-map-container {
        max-width: 800px;
    }
    #packages-image-map-container img:last-child {
        width: 400px;
    }
    .whats-nearby {
        margin-top: 50px;
    }
    .whats-nearby > .flex {
        flex-wrap: wrap;
    }
    .whats-nearby .nearby-card {
        width: 49%;
    }
    .coffee-shop .item-size,
    .coffee-shop .item-title,
    .coffee-shop .item {
        width: 85%;
    }
    #articles-page .location-accordion {
        top: unset;
        justify-content: center;
    }
    #accordion .filter {
        width: 350px;
        right: unset;
    }
    #articles-page .accordion-section,
    #articles-page .location-accordion #accordion label + input[type="checkbox"]:checked + .content {
        width: 350px;
    }
    #black-ball-shop .content-left {
        padding-left: unset;
    }
    #media-video {
        flex-direction: column;
    }
    #media-video .column.three-two {
        width: unset;
    }
    #media-video iframe {
        width: 70vw;
        height: 50vh;
    }
    .imageGallery a.image-gallery-item {
        width: 300px;
    }
    .image-gallery .flex img {
        width: 300px;
    }
    #seattleToVictoria.page-inner {
        max-width: 1080px;
    }
    #seattleToVictoria .red {
        font-size: 12px;
        text-wrap: balance;
        line-height: 20px;
        padding: 10px 20px;
        height: 60px;
    }
}
@media only screen and (min-width: 1024px) {
    #header-left #mobile-nav-toggle {
        display: none;
    }
}
@media (max-width: 1080px) {
    #searchResults #results-packages.results-container,
    .package-rotator-wrapper {
        max-width: 700px;
    }
}
@media only screen and (max-width: 1023px) {
    #header-nav {
        position: absolute;
    }
    #header-nav-inner {
        max-width: 300px;
        margin: 0;
        background: var(--main-blue);
    }
    #header-nav {
        display: none;
    }
    #header-menu {
        display: flex;
        flex-direction: column;
    }
    #header-menu > li > .submenu {
        position: unset;
        opacity: unset;
    }
    .home-articles .flex {
        flex-wrap: wrap;
    }
    .spec-descriptions ul {
        font-size: 15px;
    }
    #schedules .page-inner .flex {
        flex-wrap: wrap;
    }
    #schedules .left-section,
    #schedules .right-section {
        width: 100%;
    }
    #schedules .accordion-section .departures {
        max-width: 700px;
    }
    #schedules .accordion-section .departures h4 {
        max-width: unset;
    }
    #schedules .terms-conditions .left-side,
    #schedules .terms-conditions .right-side {
        width: unset;
    }
    #commercial .reservation .flex {
        gap: 10px;
        flex-wrap: wrap;
    }
    #commercial .faq #accordion li label {
        flex-wrap: wrap;
    }
    #commercial .menu-section {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
    #commercial .left-section,
    #commercial .right-section {
        width: 90%;
        margin-bottom: 20px;
    }
    #travelTradeGroup > .flex {
        flex-wrap: wrap;
        margin: 0 auto;
    }
    .travelTradeGroups .articles .flex {
        flex-direction: column;
    }
    #travelTradeGroup .left-section,
    #travelTradeGroup .right-section,
    .accessibility .left-section,
    .accessibility .right-section,
    #gettingHere .left-section,
    #gettingHere .right-section,
    .nonReservedTravel .left-section,
    .nonReservedTravel .right-section {
        width: 100%;
    }
    #travelTradeGroup .image-library {
        padding: 0 0 10px 0;
    }
    #travelTradeGroup > .flex {
        gap: 30px;
    }
    #travelTradeGroup .right-section .flex {
        gap: 20px;
    }
    .charter.flex {
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .charter.flex .description {
        width: 90%;
        margin: 0 auto;
        padding: 20px;
    }
    .charter.flex > div,
    .charter.flex .img-wrapper,
    #travelTradeGroup .article-content {
        width: unset;
        height: unset;
    }
    .charter.flex .img-wrapper {
        height: 500px;
        overflow: hidden;
    }
    #travelTradeGroup .articles .flex {
        gap: unset;
        flex-direction: column;
    }
    #gettingHere > .page-content > .flex,
    .idRequirements .page-inner > .flex.requirements,
    .parking .flex {
        flex-direction: column;
    }
    .accessibility .page-content .column.three {
        width: unset;
        padding: 0 50px;
    }
    .nonReservedTravel .columns {
        flex-direction: column;
        gap: unset;
    }
    .nonReservedTravel .columns > .column .columns {
        flex-direction: row;
        gap: unset;
    }
    #seattleToVictoria .page-content {
        width: 90%;
        margin: 0 auto;
        padding: 0 25px;
    }
    #seattleToVictoria .route-options {
        flex-direction: column;
    }
    #seattleToVictoria .route-options .route {
        width: 90%;
        margin: 0 auto;
    }
    #seattleToVictoria .red {
        font-size: 14px;
        text-wrap: nowrap;
        line-height: 3.8rem;
        padding: 0 3rem;
        height: 3.8rem;
    }
    #contactUs .ferry-terminals > .flex,
    #contactUs .hotel-ferry-package-table > .flex {
        flex-direction: column;
    }
    #contactUs .ferry-terminals .port-angeles-table,
    #contactUs .ferry-terminals .canada-table,
    #contactUs .hotel-ferry-package-inner,
    #contactUs .contact-us-form,
    #contactUs .hearing-disclaimer-inner {
        width: 500px;
        margin: 0 auto;
    }
    #travelingWithPets .pets-columns .column.two {
        width: unset;
        margin-left: 25px;
    }
    #travelingWithPets .pets-columns {
        margin-left: unset;
    }
    #media .beginning {
        flex-direction: column;
    }
    #media .beginning br {
        display: none;
    }
    #media .beginning .column {
        width: 90%;
        margin: 0 auto;
    }
    #media .beginning .column.three {
        display: flex;
        flex-direction: column;
    }
    .beginning {
        flex-direction: column;
    }


    #contactUs .hearing-impaired-disclaimer {
        width: 500px;
    }

    .coffee-shop .column-1,
    .coffee-shop .column-2,
    .duty-free .column-1,
    .duty-free .column-2 {
        margin: 10px  auto;
    }
    .duty-free .knots-vodka .column-1 {
        width: 90%;
    }
    .article-page p span,
    .policy-inner li {
        font-size: 16px !important;
    }
    #hero-rotator {
        height: calc(65vw / 1);
    }
    #hero-rotator .swiper-slide img {
        min-height: unset;
    }
    #black-ball-shop .block-inner {
        flex-direction: column-reverse;
        padding: 0;
    }
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .row {
        flex-direction: column;
    }

    h2 {
        font-size: 24px;
        line-height: 26px;
        font-weight: 700;
    }
    p {
        font-size: 16px;
    }
    .page-inner,
    .accessibility .page-content > p,
    .accessibility .page-content .first-accessible {
        max-width: 750px;
    }
    #page-header h1 {
        font-size: 36px;
        line-height: 44px;
    }

    .flex.related-pages {
        flex-wrap: wrap;
        justify-content: center;
    }
    .related-page {
        width: 35%;
        margin: 5px;
    }
    .related-page-bg {
        height: 200px;
    }
    #media .inner,
    #media .container > .flex,
    #media .container .timeline > .flex,
    #careerPage,
    #faqs {
        max-width: 700px;
        margin: 0 auto;
    }
    #schedules .accordion-section .departures h4 {
        font-size: 14px;
        max-width: 175px;
    }
    #hero-rotator {
        height: calc(82vw / 1.25);
    }
}
@media only screen and (max-width: 998px) and (min-width: 646px) {
    .package .featured .description h3 {
        font-size: 26px;
    }
}
@media only screen and (max-width: 998px) {
    .coffee-shop,
    .duty-free,
    .break-point-width,
    .carRentals {
        max-width: 750px;
    }
    .travel-options {
        flex-direction: column;
    }
    #seattleToVictoria .option-car,
    #seattleToVictoria .option-bus {
        width: 75%;
        margin: 0 auto;
    }
    #seattleToVictoria .columns {
        flex-direction: column;
        margin: 0 auto;
        width: 90%;
    }
    #seattleToVictoria .columns .column.three {
        width: unset;
    }
    .package > .description {
        max-width: 600px;
        padding: 0 20px;
    }
    .package .package-header {
        width: 85%;
    }
    .package .featured .featured-item {
        flex-direction: column;
        display: flex;
        height: fit-content;
        width: 80%;
        margin: 20px auto;
    }
    .package .featured .featured-item img {
        width: 90%;
        object-fit: cover;
        height: 470px;
        object-position: 0 75%;
        margin: 35px auto 0;
    }
    .package .more-info button {
        margin-bottom: 40px;
    }
    .package .article-container {
        flex-direction: column;
        width: 80%;
        margin: 0 auto;
    }
    #packages-image-map-container .map-gallery,
    #package-rotator.swiper {
        width: 100%;
    }
    #packages-image-map-container .contact-map {
        width: 100%;
    }
    dialog .room-dialog {
        flex-direction: column;
    }
    dialog .room-dialog img {
        width: 100% !important;
        object-fit: cover;
    }
    dialog .room-dialog li {
        font-size: 16px;
    }
    .recent-articles .article-content {
        margin: unset;
    }
    .carRentals .columns .column.three {
        font-size: 14px;
    }
    .carRentals .columns .column.three img {
        width: 150px;
        height: 150px;;
    }
    .recent-articles-block .recent-articles > .flex {
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }
    .container.combination-page,
    #packages-image-map-container {
        max-width: 700px;
    }
    #packages-image-map-container {
        flex-direction: column;
    }
    #packages-image-map-container img:last-child {
        width: unset;
    }
     .attraction-page .card-group {
        margin: 0px auto;
        max-width: 650px;
    }
    .attraction-page .attraction-item-wraper {
        align-items: center;
        flex-direction: column;
    }
    .attraction-page .attraction-item-wraper .attraction-right {
        margin: 0 40px;
    }
}
@media only screen and (max-width: 768px) {
    p {
        font-size: 16px;
    }
    .aboutUs .embed-container img {
        width: 100%;
    }
    .coffee-shop,
    .duty-free,
    .break-point-width,
    .carRentals {
        max-width: 500px;
    }
    .flex.related-pages {
        flex-direction: column;
    }
    .flex.related-pages .related-page {
        width: 100%;
        margin-bottom: 10px;
    }
    #featured-banner-mobile {
        display: block;
    }
    #featured-banner-desktop {
        display: none;
    }
    .departures-columns .flex {
        flex-direction: column;
    }
    .departures-inner {
        padding-left: 0 !important;
    }
    .vehicles-accommodate-inner .flex {
        flex-direction: column;
    }
    #site-logo {
        width: 130px;
    }
    .specifications .flex {
        flex-wrap: wrap;
        justify-content: center;
    }
    .specifications .flex .spec-img {
        display: flex;
        justify-content: center;
        width: 50%;
        height: fit-content;
    }
    #media .inner {
        width: 90%;
    }
    #media > .flex {
        flex-wrap: wrap;
        justify-content: center;
    }
    #media > .flex .beginning {
        width: 100%;
    }
    #media .beginning h2 {
        text-align: center;
    }
    #media .beginning p {
        font-size: 14px;
    }
    #careerPage {
        width: 90%;
    }
    #careerPage ul li {
        font-size: 16px;
    }
    #faqs {
        margin: 0 20px;
    }
    #giftShop .page-inner {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        padding: unset;
        max-width: 350px;
    }
    #schedules .terms-conditions {
        columns: 1;
    }
    #schedules .accordion-section .departures::before,
    #schedules .accordion-section .departures p:not(:first-child),
    #schedules .accordion-section .departures h4:not(:first-child) {
        display: none;
    }
    #schedules .accordion-section .title {
        display: flex;
        justify-content: center;
        padding: 0;
        width: 100%;
    }
    #schedules .accordion-section .title h3 {
        font-size: 18px;
        text-align: center;
    }
    #schedules .accordion-section .departures h4,
    #schedules .accordion-section label {
        font-size: 14px;
    }
    #schedules .item-name {
        font-size: 18px;
    }
    #schedules .accordion-section .departures > .flex > p {
        font-size: 20px;
    }
    #schedules .title-content {
        font-size: 18px;
    }

    #commercial .menu-section,
    #walkOn .drop-off .terminals,
    #walkOn .route-links {
        flex-wrap: wrap;
        gap: 0;
    }
    .tourDesk .column.two {
        width: unset;
        padding-top: unset;
    }
    #walkOn .drop-off button {
        font-size: 12px;
    }
    #travelingWithPets .traveling {
        flex-direction: column;
    }
    #UserLogin form {
        max-width: 80%;
    }
    #UserLogin.login {
        max-width: 500px;
        margin: 0 auto;
    }
    .register-user .flex-input input[type="email"], .register-user .flex-input input[type="password"] {
        width: 230px;
    }
    .register-user .flex-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
    }
    .register-user .submit {
        display: flex;
        justify-content: center;
    }
    .register-user .submit input {
        padding: 0 80px;
    }
    #drive-on-page .columns {
        display: block;
        columns: 1;
    }
    #walkOn .column.two {
        width: unset;
    }
    #walkOn .cycle-route-links {
        flex-direction: column;
    }
    #walkOn .drop-off h2,
    #walkOn .cycling-routes h2 {
        font-size: 20px;
    }
    #walkOn .drop-off h3,
    #walkOn .cycle-route-links a {
        font-size: 18px;
    }
    .accessibility .page-content .column.three {
        width: 100%;
        padding: 0;
    }
    .accessibility .page-content .column.three p {
        text-align: center;
    }
    #travelingWithPets .dog-images .pet-image-hide {
        display: none;
    }
    #travelingWithPets .dog-images img {
        width: unset;
    }
    #travelingWithPets .traveling {
        gap: unset;
    }
    .article-page .columns {
        margin-bottom: unset;
        flex-direction: column;
        gap: unset;
    }
    .article-page .column.two {
        width: unset;
    }
    #searchResults #results-packages.results-container,
    .package-rotator-wrapper {
        max-width: 360px;
    }
    .package-rotator-inner .swiper-button-prev,
    .package-rotator-inner .swiper-button-next {
        display: none;
    }
    #packages-rotator .swiper-wrapper .swiper-slide {
        height: 620px;
    }
    .package-rotator-wrapper .swiper-pagination {
        display: block;
    }
    .container.combination-page h1 {
        font-size: 30px;
        line-height: 46px;
        padding: 40px 0 0 0;
    }
    .container.combination-page,
    #packages-image-map-container {
        max-width: 600px;
    }
    .combination-page .room-container {
        flex-direction: column;
    }
    .combination-page .room-container img {
        width: unset;
        height: 300px;
    }
    .room-container .room-description {
        min-height: 300px;
        padding-bottom: 20px;
    }
    .tour-desk .two.column {
        display: unset;
        width: unset;
        vertical-align: unset;
    }
    .parking .columns {
        flex-direction: column;
    }
    .accessibility .columns.first-accessible {
        flex-direction: column;
    }
    .aboutUs .embed-container p:nth-child(-n+5) {
        display: none;
    }
    #boat-red {
        margin: 0 auto 20px;
        float: none;
        height: auto;
        max-width: 160px;
        display: block;
    }
    .coffee-shop-wrapper {
        columns: 1;
    }
    .imageGallery a.image-gallery-item {
        margin: 0;
    }
    #seattleToVictoria .page-content {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
    h2 {
        font-size: 21px;
        line-height: 22px;
        font-weight: 700;
    }
    #page-header h1 {
        font-size: 32px;
        line-height: 36px;
        margin: 0 auto;
        max-width: 400px;
    }
    .page-inner:not(#commercial),
    .accessibility .page-content > p,
    .accessibility .page-content .first-accessible {
        margin: 0 auto;
        max-width: 500px;
    }
    .page-inner.accessibility {
        max-width: none;
    }
    #seattleToVictoria .red {
        font-size: 12px;
        text-wrap: balance;
        line-height: 20px;
        padding: 7px 14px;
    }
}
@media only screen and (min-width: 646px) {
    .menu-item-back {
        display: none;
    }
}
@media only screen and (max-width: 646px) {
    #mobile-header-nav-inner {
        width: 100%;
    }
    #mobile-header-menu {
        width: 100%;
    }
    .slide-left {
        width: 100%;
    }
    #mobile-header-menu {
        transition: all 0.5s ease-in-out;
    }
    .slide-out {
        margin-left: -103%;
    }
    .submenu {
        margin-top: 10px;
    }
    .submenu:not(.slide-left) {
        margin-left: 102%;
    }
    #mobile-header-nav-submenus li {
        background: transparent;
    }
    #homeRoute {
        position: relative;
        top: 0px;
        background-image: url("/webroot/img/pages/route-map-mobile.jpg");
    }
    .related-page-bg {
        height: 195px;
    }
    .package .featured .featured-item {
        width: 60%;
        min-width: 335px;
    }
    .package .featured .featured-item img {
        width: unset;
        object-fit: unset;
        height: unset;
        object-position: unset;
        margin: 0 auto;
    }
    #contactUs .ferry-terminals .port-angeles-table,
    #contactUs .ferry-terminals .canada-table,
    #contactUs .hotel-ferry-package-inner,
    #contactUs .contact-us-form,
    #contactUs .hearing-disclaimer-inner {
        width: 350px;
        display: flex;
        flex-direction: column;
    }
    #contactUs .ferry-terminals h3, #contactUs .hotel-ferry-package-table h3 {
        font-size: 14px;
    }
    #contactUs tbody {
        flex-direction: column;
    }
    #contactUs .contact-form-inner button {
        font-size: 14px;
    }
    #contactUs td:first-of-type {
        padding-bottom: 0px;
    }
    #contactUs th, #contactUs h3 {
        font-size: 16px;
        width: 350px;
    }
    #contactUs h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    #contactUs .hotel-ferry-package-inner {
        height: unset;
    }
    #contactUs .hearing-disclaimer-inner {
        margin: 20px auto;
    }
    #contactUs .hearing-disclaimer-inner p {
        margin-top: 0px;
    }
    .contact-map h2 {
        font-size: 24px;
        line-height: 26px;
    }
    .accessibility #accessible-services {
        padding: 0 20px;
    }
    #contactUs .hearing-impaired-disclaimer {
        width: 350px;
    }
    .whats-nearby .nearby-card {
        width: unset;
        min-height: 425px;
    }
    .whats-nearby > .flex {
        gap: 20px;
    }
    #newsletter {
        flex-direction: column;
        gap: 10px;
    }
    .newsletter-icon {
        display: none;
    }
    #newsletter h3 {
        font-size: 24px;
    }
     .attraction-page .card-group {
        margin: 0px auto;
        max-width: 325px;
    }

}
@media (max-width: 1024px) and (min-width: 640px) {
    .row {
        flex-direction: column;
    }
}
@media only screen and (max-width: 646px) and (min-width: 480px) {
    #homeRoute {
        margin-top: 375px;
    }
    #homeRoute .content-left {
        position: relative;
        bottom: 425px;
        text-align: center;
        padding: 0 25px;
        margin: 0 auto;
    }
    #homeRoute .content-left h2 {
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 575px) {
    h1.center {
        font-size: 34px;
        padding: 10px 0;
        line-height: 40px;
        margin-top: 20px;
    }
    #homePage a.red {
        font-size: 14px;
    }

    .coffee-shop,
    .duty-free,
    .break-point-width,
    .carRentals {
        max-width: 350px;
    }
    #header-mag {
        right: 0;
    }
    #header-right label,
    #header-right span.contact-label {
        display: none;
    }
    #header-search input[type="text"] {
        transition: none;
    }
    #header-right #header-search.active input[type="text"] {
        display: inline-block;

    }
    #header-search {
        width: unset;
    }
    #header-search.active {
        padding-right: 25px;
        overflow: hidden;
    }
    #header-search.active #header-mag {
        right: -28px;
        top: -1px;
    }
    #header-search.active label {
        right: -60px;
    }
    #header-search.active input[type="text"] {
        width: 100px;
        text-indent: unset;
    }
    #homeRoute {
        background-size: cover;
        height: 250px;
        background-repeat: no-repeat;
    }
    #homeRoute h2,
    .recent-articles-block h2,
    .block-inner h2 {
        font-size: 36px;
        margin: 0;
    }
    .welcome-aboard-grid img {
        width: 170px;
    }
    .content-block {
        padding: 20px 0 50px;
    }
    .block-inner {
        padding: 100px 50px;
    }
    #commercial .left-section,
    #commercial .right-section {
        width: 90%;
    }
    #travelTradeGroup .right-section .flex {
        flex-wrap: wrap;
    }
    #UserLogin.login {
        max-width: 350px;
        margin: 0 auto;
    }
    #seattleToVictoria .option-car,
    #seattleToVictoria .option-bus {
        width: 100%;
    }
    #seattleToVictoria #travelOptions h2 {
        font-size: 18px;
    }
    #seattleToVictoria #travelOptions button {
        font-size: 16px;
        font-weight: 500;
        margin: 0;
        white-space: pre-wrap;
        height: fit-content;
        line-height: 10px;
        padding: 10px;
    }
    #seattleToVictoria .travel-options h3 {
        font-size: 16px;
    }
    #seattleToVictoria #travelOptions p {
        font-size: 14px;
    }
    #seattleToVictoria .travel-options {
        width: 90%;
        max-width: 100%;
    }
    #seattleVictoriaRoutes h3 {
        font-size: 14px;
        line-height: 18px;
        font-weight: 500;
    }
    #locations-list {
        flex-direction: column;
        display: flex;
        gap: 15px;
        margin: 20px;
    }
    .package .featured-item .description {
        padding: 0 30px;
    }
    .package .more-packages,
    .package .recent-articles {
        padding: 0 10px;
    }
    .package .static-banner img {
        height: 200px;
        object-fit: cover;
        margin-bottom: 20px;
    }
    .package .article-content p.subtext {
        text-align: center;
    }
    .article-content .article-inner p {
        max-height: 315px;
    }
    .package .article-container {
        width: 100%;
    }
    .nonReservedTravel .columns .column.two {
        text-align: center;
    }
    .nonReservedTravel .columns .column.two > .columns {
        flex-direction: column;
        gap: 0;
    }
    .accessibility .first-accessible h2,
    .accessibility .first-accessible h3 {
        font-size: 20px;
        text-align: center !important;
    }
    .accessibility .page-content .accessibility-note {
        padding: 20px;
    }
    #travelingWithPets .pet-bullet-points li {
        font-size: 16px;
    }
    #travelingWithPets h2 img {
        float: unset !important;
    }
    .carRentals .columns {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .carRentals .columns br {
        display: none;
    }
    .carRentals h2 {
        text-align: center !important;
    }
    .carRentals h3:not(.col) {
        text-align: center;
    }
    .carRentals .columns .column.three {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .carRentals .table-row {
        flex-direction: column;
    }
    .carRentals .table-row .col:first-child,
    .carRentals .table-row .col:last-child {
        width: unset;
    }
    .charter p,
    .article-content .article-inner p {
        font-size: 16px;
    }
    #flags-through-the-years {
        flex-direction: column;
    }
    .terms-conditions h3,
    .policy-inner h3 {
        font-size: 20px;
    }
    .terms-conditions ul,
    .policy-inner ul {
        font-size: 16px;
    }
    .location-accordion #accordion {
        margin: 25px auto;
    }
    .location-accordion #accordion li label {
        font-size: 14px;
        padding: 5px 10px;
    }
    #accordion .filter {
        top: -3px;
    }
    #articles-page .location-accordion {
        width: unset;
    }
    #searchResults .results-title {
        font-size: 32px;
        line-height: 38px;
    }
    .coffee-shop .item-size,
    .coffee-shop .item-title,
    .coffee-shop .item {
        width: 80%;
    }
    .duty-free .item {
        width: 57%;
        font-size: 14px;
    }
    .duty-free .size {
        width: 25%;
    }
    #schedules .accordion-section .departures h4,
    #schedules .accordion-section label,
    #schedules .title-content {
        font-size: 12px;
    }
    .title-content {
        font-size: 14px;
    }
    #black-ball-shop .block-inner .content-left {
        width: 90%;
        margin: 0 auto;
    }
    .imageGallery .disclaimer {
        font-size: 15px;
    }
}
@media only screen and (max-width: 450px) {
    #header-search.active {
        width: 100%;
    }
    #header-right #header-search.active ~ #headerPhone,
    #header-right #header-search.active ~ #login {
        display: none;
    }
    #exclusive-deals .content-block-inner {
        padding: 10px 0 0 0;
    }
    #exclusive-deals.content-block h2 {
        font-size: 30px;
    }
    #UserLogin form {
        max-width: unset;
        margin: 50px 10px;
    }
    #searchResults .search-results p {
        max-width: 350px;
        margin: 0 auto;
    }
    .combination-page h5 {
        font-size: 20px;
    }

}
@media only screen and (max-width: 479px) {
    h2 {
        font-size: 16px;
        line-height: 20px;
        font-weight: 700;
        text-align: center;
    }
    .footer-lower .social-links a img:not(.logo) {
        width: 12%;
    }
    #footer a.footer-logo {
        width: 40%;
        bottom: 8px;
        left: 0;
    }
    #footer .footer-lower-2 {
        max-width: 100%;
        font-size: 12px;
        margin: 0 10px;
    }
    #footer .footer-lower-2 a,
    #footer .footer-lower-2 span {
        padding: 0 0 0 5px;
    }
    #page-header h1 {
        font-size: 30px;
        line-height: 34px;
        padding: 15px 20px;
    }

    .page-inner,
    .accessibility .page-content > p,
    .accessibility .page-content .first-accessible {
        max-width: none;
        padding: 0 20px;
    }
    .page-inner.accessibility {
        padding: 0;
    }
    .accessibility .column.two {
        width: unset;
    }.accessibility .columns.first-accessible {
        gap: 0px;
    }
    .departures-columns {
        padding: 0 20px;
    }
    #homeRoute {
        margin-top: 450px;
    }
    #homeRoute .content-left {
        position: relative;
        bottom: 525px;
        text-align: center;
        padding: 0 25px;
        margin: 0 auto;
    }
    #headerPhone,
    #login {
        margin-right: 10px;
    }
    #login .login-label {
        display: none;
    }
    #newsletter h3 {
        margin: 10px 0 20px 0;
    }
    #media .beginning {
        width: 90%;
    }
    #media-downloads a span {
        font-size: 14px;
        width: 300px;
    }
    #media-downloads > .columns {
        flex-direction: column;
    }
    #media-video iframe {
        width: 90vw;
    }
    #faqs #accordion li label {
        font-size: 14px;
    }
    #schedules .price {
        font-size: 16px;
    }
    #schedules .fare {
        font-size: 16px;
        gap: 20px;
    }
    #seattleToVictoria .red {
        font-size: 12px;
        word-wrap: break-word;
    }
    #commercial .reservation .columns {
        flex-direction: column;
        gap: 0;
    }
    #commercial .price {
        width: 20%;
    }
    .article-page h3 {
        font-size: 18px;
    }
    .article-page span.breadcrumbs a {
        font-size: 18px;
        padding-bottom: 0px;
    }
    .article-page span.breadcrumbs {
        flex-wrap: wrap;
    }
    .article-page h2 {
        font-size: 20px;
        text-align: left;
    }
}

@media only screen and (max-width: 425px) {
    #seattleToVictoria .red {
        font-size: 12px;
        text-wrap: balance;
        line-height: 20px;
        padding: 10px 20px;
        height: 60px;
    }
}