$('#HeroSlidesContainer').html("            <li data-rulelist-title=\"about-us-hero\" data-rule-name=\"About Us Brand Banner Desktop\" title=\"guests in snorkeling gear and life jackets walking from the ocean onto a sandy beach with a carnival cruise ship in the background.\" tab-activate=\"true\" tabindex=\"0\" style=\"background-image: url('/-/media/cclus/images/banners/about-us/about-us-desktop-banner-brand-campaign.jpg'); width: 100%;\">\r\n\r\n                        <img class=\"hero-img\" src=\"/-/media/cclus/images/banners/about-us/about-us-desktop-banner-brand-campaign.jpg\" alt=\"guests in snorkeling gear and life jackets walking from the ocean onto a sandy beach with a carnival cruise ship in the background.\" />\r\n                            <div class=\"overlay\"><style>\n    @import \"/~/media/CssAndJsFiles/hero-banner-css/html-hero-banners.css\"; \n\n        /*IMPORTING FONT STYLING GOES HERE*/\n        @import url('~/media/Fonts/Obviously_ttf.ttf');\n        @import url('~/media/Fonts/Obviously_otf.otf');\n    \n    @font-face {\n      font-family: Obviously_ttf;\n      src: url(~/media/Fonts/Obviously_ttf.ttf);\n    }\n\n    @font-face {\n        font-family: Obviously_otf;\n        src: url(~/media/Fonts/Obviously_otf.otf);\n    }\n\n   /* -------------------- mobile first responsive ---------------------- */\n .about-us-brand-hero-banner-responsive {\n    width: 100%;\n    text-align: center;\n    display: block;\n    position: absolute;\n    justify-content: center;\n    padding: 5% 27% 0;\n}\n\n.about-us-brand-subCopyAndCTAContainer {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n.overlay {\n    /* flex box */\n    display: flex !important;\n    /* justifying content to left on x axis */\n    justify-content: flex-start;\n    /* aligning content to top on y axis */\n    align-items: flex-start;\n}\n\n/*MOBILE HEADLINE IS NORMALLY 26PX*/\n.about-us-brand-sub-head-white-md-dkshadow {\n\tfont-size: 20px;\n    line-height: 24px;\n    font-family: Obviously_ttf, Obviously_otf, \"tempo\", sans-serif !important;\n    color: #052049  !important;\n    padding-top: 0;\n    letter-spacing: 0px;\n    text-shadow: none;\n    margin-bottom: 0px;\n}\n\n/*Correcting Padding when zoom level is 400% on desktop*/\n    @media only screen and (width: 320px) {\n    .about-us-brand-hero-banner-responsive {\n        padding: 0% 22% 0;\n    }\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 1% 24% 1%;\n    }\n}\n\n/*Correcting Padding when zoom level is 300% on desktop*/\n    @media only screen and (min-width: 426px) and (min-resolution: 4.5dppx) {\n    .about-us-brand-hero-banner-responsive {\n        padding: 5% 20% 0;\n    }\n\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 1% 33% 1%;\n    }\n}\n\n/*Correcting Padding when zoom level is 400% on XL desktop*/\n    @media only screen and (min-width: 480px) and (min-resolution: 4dppx) {\n    .about-us-brand-hero-banner-responsive {\n        padding: 7% 20% 0;\n    }\n\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 1% 33% 1%;\n    }\n}\n\n/*Correcting Padding when zoom level is 250% on desktop*/\n    @media only screen and (width: 512px) {\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 3% 35% 1%;\n    }\n}\n\n/*Correcting Padding when zoom level is 200% on desktop*/\n    @media only screen and (width: 640px) {\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 2% 39% 1%;\n    }\n}\n\n/*Correcting Padding when zoom level is 300% on XL desktop*/\n    @media only screen and (width: 640px) and (min-resolution: 3dppx) {\n    .about-us-brand-hero-banner-responsive {\n        padding: 8% 21% 0;\n    }\n}\n\n/*Correcting Padding when zoom level is 175% on desktop*/\n    @media only screen and (min-width: 731px) {\n    .about-us-brand-hero-banner-responsive {\n        padding: 4% 21% 0;\n    }\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 3% 41% 1%;\n    }\n}\n   \n/* Tablet Styling*/\t\n@media only screen and (min-width: 768px) {\t\n    .about-us-brand-hero-banner-responsive {\n        display: flex;\n        text-align: center;\n        padding: 0px;\n        margin-top: 3%;\n        margin-left: 21.5%;\n    }\n\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 3% 28% 1%;\n    }\n\n    .about-us-brand-newExclusiveSubHeadline, .about-us-brand-sub-head-white-md-dkshadow {\n        font-size: 48px !important;\n        line-height: 52px !important;\n    }\n}\n\n/*Correcting Padding when zoom level is 250% on XL desktop*/\n    @media only screen and (width: 768px) and (min-resolution: 2.5dppx) {\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 0% 28% 1% !important;\n    }\n}\n\n/*Correcting Padding when zoom level is 150% on desktop*/\n    @media only screen and (min-width: 853px) {\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 1% 28% 1%;\n    }\n}\n\n/*Correcting Padding when zoom level is 125% on desktop*/\n    @media only screen and (width: 1024px) and (min-resolution: 1.875dppx) {\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 3% 31% 1% !important;\n    }\n}\n\n/* Desktop Styling */\n@media only screen and (min-width: 1024px) {\n    .about-us-brand-hero-banner-responsive {\n        text-align: center;\n        padding: 0% 0 0 0%;\n        margin-top: 0%;\n    }\n\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 3% 36% 1%;\n    }\n\n    .about-us-brand-newExclusiveSubHeadline, .about-us-brand-sub-head-white-md-dkshadow {\n        font-size: 56px !important;\n        line-height: 56px !important;\n    }\n}\n\n/*Correcting Padding when zoom level is 175% on XL desktop*/\n    @media only screen and (min-width: 1097px) {\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 3% 32% 1%;\n    }\n}\n\n/*Correcting Padding when zoom level is 110% on desktop*/\n    @media only screen and (min-width: 1163px) {\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 3% 34% 1%;\n    }\n}\n\n/* XL Desktop Styling */\n@media only screen and (min-width: 1200px) {\n    .about-us-brand-hero-banner-responsive {\n        margin-left: 20%;\n    }\n\n    .about-us-brand-subCopyAndCTAContainer {\n        padding: 5% 36% 1%;\n    }\n}\n</style>\n\n<div class=\"about-us-brand-hero-banner-responsive\">\n    <div class=\"about-us-brand-subCopyAndCTAContainer\">\n        <span class=\"about-us-brand-sub-head-white-md-dkshadow\">\n            If the only cruise you've been on is cruise control\n        </span>\n    </div>\n</div></div>\r\n            </li>\r\n            <li data-rulelist-title=\"about-us-hero\" data-rule-name=\"About Us Polaroid Desktop\" title=\"polaroid images shows historical snap shots of carnival cruise line\" tab-activate=\"true\" tabindex=\"0\" style=\"background-image: url('/-/media/cclus/images/banners/about-us/about-us-banner-polaroids-desktop.jpg'); width: 100%;\">\r\n\r\n                        <img class=\"hero-img\" src=\"/-/media/cclus/images/banners/about-us/about-us-banner-polaroids-desktop.jpg\" alt=\"polaroid images shows historical snap shots of carnival cruise line\" />\r\n            </li>\r\n");function personalizer_carouselInit(){if(window.ccl_carousel&&window.ccl_carousel.Carousel){var $car=new window.ccl_carousel.Carousel($("#hero-section .carousel-widget"));}else{console.log("ccl_carousel.Carousel not ready");setTimeout(function(){personalizer_carouselInit();},500);}};personalizer_carouselInit();