body {margin:0;padding:0} :root { --col1:#041515; --col2:#002c36; --col3:#005773; --col4:#008094; --col5:#3fadc8; --yellow:#fba621; /* --yellowDark:#e78e04; --contentBox1:rgba(24, 63, 102, 0.9); --contentBox2:rgba(24, 63, 102, 0.5); --contentBoxBaseColour:#000; */ --contentBoxBG:linear-gradient(to bottom right, rgba(24, 63, 102, 0.9), rgba(24, 63, 102, 9.5)); --contentBoxBGRev:linear-gradient(to bottom left, rgba(24, 63, 102, 0.9), rgba(24, 63, 102, 9.5)); --blogBoxTitleA:#ccc; --blogBoxTitleB:#22598f; --blogBoxLinkA:#D9E8F6; --blogBoxLinkB:#22598f; --blogBoxContentA:#ccc; --blogBoxContentB:#183f66; --blogBoxBaseColourA:#fff; --blogBoxBaseColourB:#fff; --blogBoxBGA:linear-gradient(to bottom right, rgba(24, 63, 102, 0.9), rgba(24, 63, 102, 9.5)); --blogBoxBGB:linear-gradient(to bottom right, rgba(34, 89, 143, 0.4), rgba(34, 89, 143, 0.5)); --boxedContentBG: #ffecaa; --colLit:#FFF; --colMid:#333; --colDrk:#000; --fntLit:rgba(24, 63, 102, .7); --fntLit:rgba(255, 255, 255, .7); --fntLitH:rgba(255, 255, 255, .9); --fntDrk:rgba(0, 0, 0, .6); --fntDrkH:rgba(0, 102, 102, .9); --font-color:#ccc; --h2-color:#ccc; --h2Shadow:#333; --whiteHighlight:#fff; --page-bg:conic-gradient(from 225deg at 110px 190px, #183F66, #22598F, #183F66, #22598F, #183F66, #42607f, #183F66, #183F66); --page-bg:background-color:pink; --pageContentListContainerBG:rgba(51, 51, 51, .4); --boxShadeTop:transparent; --boxShade0:rgba(5, 35, 62, 0.6); --boxShade1:rgba(6, 51, 90, 0.9); --boxShade2:rgba(41, 63, 83, 0.9); --boxShade3:rgba(54, 78, 100, 1); --boxShade4:rgba(76, 97, 116, 1); --boxShade5:rgba(93, 105, 115, 1); --contentShadeTop:#ccc; --contentShade0:#ddd; --contentShade1:#ddd; --contentShade2:#ddd; --contentShade3:#ddd; --contentShade4:#eee; --contentShade5:#eee; --contentBoxBorders:#183f66; --faqOverlayBG:#ccc; --faqOverlayBorder:#eee; --linkHover:#fff; --navHover:#e9bd27; --navHover:#f96f1c; --navHover:#ffbc00; --buttonBorderWhite:#eee; --buttonLightBlue:#5d6973; --buttonLightBlueText:#eee; --buttonLightBlueHov:#05233E; --buttonDarkBlue:#06335a; --buttonDarkBlueText:#eee; --buttonDarkBlueHov:#4c6174; --buttonDarkGrey:RED; --buttonDarkGreyText:RED; --buttonDarkGreyHov:RED; --personaWho:#88C5FF; --personaWhat:#55abbf; --personaWhy:#AACDED; --content-box-color:#05233e; --content-box-border:solid rgba(255, 255, 255, .2); --contentBlockBGColour:#333; --contentBlockBGGradient:linear-gradient(to bottom right, rgba(0, 85, 85, .9), rgba(0, 85, 85, .1)); --contentBoxBorder:#22598f; --contentBoxGradientWebkit:-webkit-linear-gradient(to bottom right, #666 60%, #444 100%); --contentBoxGradientMoz:-moz-linear-gradient(to bottom right, #666 60%, #444 100%); --contentBoxGradient:linear-gradient(to bottom right, #ddd 30%, #ccc 90%); --faqBoxGradient:linear-gradient(to bottom right, #555 50%, #666 70%); --faqBoxGradient:var(--boxShade2); --LBCaptionColour:#999; --captionBulletColour:#ccc; --collapsableSectionBG:#0c2135; --mainContentBoxBG:#000; --collapsableSectionGradient:linear-gradient(to bottom right, rgba(102, 102, 102, 0.4), rgba(102, 102, 102, .1)); --questionsIntroBox:rgba(24, 63, 102, 0.9); --pageContentlinks:#ccc; --pageContentlinksHover:#fff; --hpBullet:#eee; --hpBulletHover:#099; --infoBox:rgba(150, 153, 153, .1); --infoBoxHover:rgba(0, 102, 102, .3); --infoBoxBorder:#ccc; --infoBoxBorderHover:#fff; --stdBtnGreyBG:#555; --stdBtnGreyText:#ccc; --stdBtnGreyBGHover:#555; --stdBtnGreenBG:RED; --stdBtnGreenBGHover:RED; --stdBtnGreenText:YELLOW; --bulletTitle:#ccc; --bulletTitleGen2:#22598f; --BronzePanelLev1:#faf2eb; --BronzePanelLev2:#f5e5d6; --BronzePanelLev3:#f0d9c2; --BronzeBannerLev1:pink; --BronzeBannerLev2:pink; --BronzeBannerLev3:#cf7f32; --SilverPanelLev1:#eeefee; --SilverPanelLev2:#dedfdd; --SilverPanelLev3:#cdcecb; --SilverBannerLev1:pink; --SilverBannerLev2:pink; --SilverBannerLev3:#b4b6b2; --GoldPanelLev1:#fffbe6; --GoldPanelLev2:#fff4b8; --GoldPanelLev3:#ffe02e; --GoldBannerLev1:pink; --GoldBannerLev2:pink; --GoldBannerLev3:#e6c200; --fontFam: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; --fontFam2: font-family: "Roboto Condensed", Roboto, "Segoe UI", -apple-system, sans-serif; transition:.5s all ease } @media (max-width:575px) { :root { --col1:rgba(24, 63, 102, .8); --page-bg:conic-gradient(from 225deg at 70px 100px, #183F66, #22598F, #183F66, #22598F, #183F66, #42607f, #183F66, #183F66); } } * {box-sizing:border-box} html {scroll-padding-top:125px;scroll-behavior:smooth;font-size:100%;-webkit-text-size-adjust:100%} body {font-family:var(--fontFam);color:var(--fntDrk);font-weight:400;line-height:1.8em;vertical-align:top;padding:0;background-color:#183f66;background-attachment:fixed} #main {width:220px;height:300px;border:1px solid #000;display:flex;align-items:center} #main div {flex:1;border:1px solid #000;display:flex;align-items:center} .containerNavLogo {position:fixed;width:100%;top:0;left:0;z-index:500;background-color:var(--col3);background-image:linear-gradient(to top right, rgba(0, 44, 54, .8), rgba(0, 44, 54, .3));border-bottom:solid 1px #fff;padding:12px 20px;display:flex;align-items:center} .contactBar {display:flex;align-items:center;justify-content:center} .contactEmail,.contactPhone {color:#eee;font-size:1.25em;letter-spacing: 0.5px;text-align:center;padding:0 55px 0 0;text-decoration:none;align-items:center} .contactEmail {padding:0} .contactEmail:hover, .contactPhone:hover {color:#3fadc8} .emailSymbol,.phoneSymbol,.calSymbol {display:inline;color:#3fadc8;text-decoration:none;align-items:center;margin:0;padding:0;font-size:2.0em;transition:.5s} .phoneSymbol {padding:0 3px 0 0;font-size:2.0em;font-family:Segoe UI Symbol} .calSymbol {padding:0 3px 0 0;font-size:1.6666em;font-family:Segoe UI Symbol} .emailSymbol:hover,.phoneSymbol:hover,.calSymbol:hover {transition:.5s;color:#fff} @media (max-width:800px) {.containerNavLogo {border-bottom:solid 0 transparent}} @media (max-width:575px) {.containerNavLogo {background-color:transparent;background-image:linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent);padding:35px 20px}} .LogoM {display:none} .LogoSize {position:absolute;top:15px;left:30px;max-width:40%;border: 0;height:auto;z-index:100} @media (max-width:575px) {.LogoSize {left:15px}} .genericPageHeader,.postPanel {display:flex;border-top:solid 2px #fff;border-bottom:solid 2px #fff;border-image:linear-gradient(270deg, #bbb, #777) 1} .genericPageHeader>div,.postPanel>div {width:60%;margin:0;padding:0} .inPageContactForm,.articleFeedbackForm {display:flex;background:transparent} .inPageContactForm>div {width:40%;margin:0;padding:10px 15px} .articleFeedbackForm>div,.articleFeedbackForm>div {width:100%;margin:0;padding:10px 0} div.blogBoxA, div.blogBoxB, div.genericIntroContent {background-image:var(--contentBoxBG);margin:0;padding:5px 25px 5px 15px;text-align:left} div.blogBoxA, div.blogBoxB {background:var(--blogBoxBaseColourA);background-image:var(--blogBoxBGA);margin:0;padding:5px 25px 5px 15px;text-align:left;color:var(--blogBoxContentA)} div.blogBoxB {background:var(--blogBoxBaseColourB);background-image:var(--blogBoxBGB);color:var(--blogBoxContentB)} @media (max-width:575px) { div.blogBoxA, div.blogBoxB {background:var(--blogBoxBaseColourA);background-image:var(--blogBoxBGA);width:100%;margin:0;padding:5px 25px 5px 15px;text-align:left;color:var(--blogBoxContentA)} div.blogBoxB {background:var(--blogBoxBaseColourB);background-image:var(--blogBoxBGB);color:var(--blogBoxContentB)} } @media (min-width:576px) AND (max-width:1099px) { div.blogBoxA {background:var(--blogBoxBaseColourA);background-image:var(--blogBoxBGA)} div.blogBoxB {background:var(--blogBoxBaseColourB);background-image:var(--blogBoxBGB)} } .inPageFormContainer {background:0 0;width:60%;margin:0;padding:0} div.headerIntroImage {background:var(--contentBoxBG);width:45%;margin:0;padding:0;background-image:var(--contentBoxBGRev)} @media (max-width:575px) { section.blogSection {padding-top:30px} .genericPageHeader {display:flex;flex-direction:column;background:#000;margin:0;border-top:unset;border-bottom:unset;border-image:unset} .postPanel {display:flex;flex-direction:column;background:0 0;margin: 25px 0 50px 0;border-image:unset;border-top:solid 1px #333;border-bottom:solid 1px #333;box-shadow:0 5px 8px rgba(47, 54, 64, .9)} .inPageContactForm, .articleFeedbackForm {display:flex;flex-direction:column;background:transparent;margin:0 0 20px 0;border-top:unset;border-bottom:unset;border-image:unset} .inPageContactForm>div {width:100%;margin:0;padding:0 10x 10px 15px} div.headerIntroImage {background:#000;width:100%;margin:0;padding:0} div.genericIntroContent {background:#000;width:100%;margin:0;padding:5px 5px 5px 15px} .inPageFormContainer {background:0 0;width:100%;margin:0;padding:0} div.genericIntroContent {background:var(--content-box-color)} } @media (max-width:575px) {summary {margin-left:20px}} img.headerImg {display:block;width:100%;margin:0;max-width:500px;height:auto} @media (max-width:1100px) {img.headerImg {margin:10px auto 8px auto;width:90%;max-width:260px;height:auto}} @media (max-width:575px) {img.headerImg {margin:0;width:100%;max-width:500px;height:auto}} @media (min-width:576px) AND (max-width:1099px) { .genericPageHeader {padding:0} .postPanel {padding:0} .headerIntroImage {align-items:right;padding:0} img.headerImg {margin:0;float:right;width:100%;max-width:260px;height:auto} } .aboutAuthorContainer {width:99%;height:140px;margin:20px 0;padding:0 15px} .aboutAuthorImg {float:left;background:var(--col1);height:130px;overflow:hidden;border-radius:.5em;margin:2px 15px 0 0;border:2px solid rgba(255, 255, 255, .05);box-shadow:2px 2px 5px rgba(47, 54, 64, .39)} @media (max-width:575px) {.aboutAuthorImg {height:90px}} .socialIconM {width:24px;height:auto;margin:5px;padding:0} .socialIconL {width:30px;height:auto;margin:10px 20px 0 0} .socialIconContactPage {width:36px;height:auto;margin:0 8px 0 0} .cookie-container {position:fixed;bottom:-100%;left:0;right:0;border-top:solid #0ff;border-color:#fff;background-color:rgba(0, 0, 0, .9);text-align:center;color:#000;padding:0 32px;box-shadow:0 -2px 16px rgba(47, 54, 64, .39);transition:.4s} .cookie-container.active {bottom:0} .cookie-container a {color:var(--col1)} hr {margin:10px 0;padding:2px;border-top:1px solid var(--col3);border-bottom:1px solid var(--col3);border-left:none;border-right:none;margin:20px 0} hr.faint {width:95%;margin:10px auto;border-top:1px dotted #666;border-bottom:0 dotted #999} hr.sectionDivider {width:100%;margin:10px auto 25px auto;border-bottom:1px solid #777;border-top:1px solid var(--col3)} hr.contentDivider {width:95%;margin:10px auto 25px auto;border-bottom:1px solid #999;border-top:1px solid #ccc} @media (max-width:575px) {hr {margin:8px 0 5px 0;padding:2px}} hr.white {border-top:solid 1px #eee;border-bottom:solid 1px #eee} hr.attentionTop {width:94%;margin:25px auto 10px auto;border-top:1px solid var(--col3);border-bottom:1px solid #777} hr.attentionBot {width:94%;margin:10px auto 25px auto;border-top:1px solid #777;border-bottom:1px solid var(--col3)} hr.attentionTop2 {width:95%;margin:25px auto 10px auto;border-top:1px solid var(--col3);border-bottom:1px solid #777} hr.attentionBot2 {width:95%;margin:10px auto 25px auto;border-top:1px solid #777;border-bottom:1px solid var(--col3)} @media (max-width:575px) {hr.attentionTop2,hr.attentionBot2 {width:94%}} /* FOOTER */ .footerLowerG {background-color:#000;text-align:left;width:100%;padding:0;margin:0;background-image:url(https://www.targaweb.com/images/footer/footer-rain.jpg)} .footerUpper {background-color:#000;text-align:center;margin:0;padding:3px 0 0 0;border-bottom: solid 1px var(--yellow);border-top: solid 1px var(--yellow)} @media (max-width:575px) {.footerLowerG {background-color:#000;background-image:url(https://www.targaweb.com/images/footer/footer-rain-mob.jpg)}} .footerColumns {margin:0 auto;max-width:1200px;display:grid;padding:10px 0;grid-gap:60px;grid-template-columns:1fr 1fr 1fr} .footerList {padding:0 0 0 25px} @media (max-width:575px) { .footerColumns, .footerList {display:none} .footerMobile {padding:15px 15px 15px 30px;border-top:solid 1px #fff} } /* FOOTER END */ .youTubeContainer {position:relative;overflow:hidden;margin:20px auto;width:50%;padding-top:28%} .youTubeIframe {position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%} @media (max-width:620px) {.youTubeContainer {width:90%;padding-top:61%}} /* SCREEN WIDTH CONTROL */ .onlyTabPortrait {display:none} @media (max-width:575px) { .noMob {display:none} .HideForMob {display:none} .contactButtons {text-align:center;padding:10px 10px 20px 10px} } @media (min-width:576px) {.onlyMob {display:none}} .onlyMobLandscape{display:none} @media (min-width:576px) AND (max-width:768px){ .onlyMobLandscape{display:block} .noMobLandscape{display:none} } @media (min-width:576px) AND (max-width:768px) { .onlyMobLandscape {display:block} .noMobLandscape {display:none} } @media (min-width:780px) AND (max-width:1099px) { .noTabPortrait {display:none} .onlyTabPortrait {display:block} } div.lastUpdatedLeftContainer{width: 90%;max-width: 1200px;padding: 0 6px 0 8px;margin: 0 auto} @media (max-width:575px) {div.lastUpdatedLeftContainer{width: 100%;padding: 0 6px 0 4px;margin: 0 auto}} .center {text-align: center;margin: 20px auto 10px auto} .centerMob {text-align: left;margin: 20px auto 10px auto} @media (max-width:575px) {.centerMob {text-align: center;margin: 20px auto 10px auto}} section.blogSection {padding-top:20px} /* FONT CONTROLS */ h1, h2, h3, h4 {font-family: var(--fontFam2);color: #999;font-size: 1.4em;text-align: left;padding: 0} h1, h2, h3 {color: #777;font-style: italic} h2 {color: var(--h2-color)} h3 {padding-bottom: 0;margin-bottom: 4px;color: var(--font-color)} h3, h4 {font-size: 1.2em} h5 {font-size: 1em;letter-spacing: .4px} h1.hpH1 {color: #fff;font-size: 3em;text-align: center;line-height: 100%;text-shadow: 2px 2px #333;margin: 0} h1.mainHeading {font-family: var(--fontFam);padding: 4vh 0 0 0;font-size: 3.8em;letter-spacing: 2px;line-height: 130%;font-weight: 400;color: rgba(255, 255, 255, .8);text-shadow: 3px 3px 2px #3339;margin: 0} h1.mainHeadingShade {font-family: var(--fontFam);background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));padding: 3vh 60px 0 0;font-size: 4em;letter-spacing: 2px;line-height: 130%;font-weight: 400;color: rgba(255, 255, 255, .5);margin: 0} h1.FAQHeading {font-family: var(--fontFam);padding: 3vh 60px 0 0;font-size: 3em;letter-spacing: 2px;line-height: 130%;font-weight: 400;color: rgba(255, 255, 255, .5);margin: 0} h2.blogH2 {font-size: 1.4em;line-height: 120%;letter-spacing: 1px;font-family: var(--fontFam2);font-style: italic;margin: 1px 20px 15px 15px;transition: .5s all ease} h2.boxHeading,h2.contactSectionHeading {padding: 5px;font-size: 1.1666em;text-decoration: none;letter-spacing: 1px;line-height: 150%;font-weight: 700;color: var(--col3);margin: 0;text-align: left} h2.contactSectionHeading {margin-left: 20px} h2.faqsH2 {color: var(--font-color);font-family: var(--fontFam);font-style: unset;font-weight: 400;font-size: 1.2em;cursor: help} h2.mainIntro,h2.mainIntroLine2 {font-family: var(--fontFam);padding: 3vh 60px 25px 40px;font-size: 1.9em;line-height: 160%;letter-spacing: 2px;font-weight: 400;color: rgba(255, 255, 255, .8);margin: 0;text-align: left} h2.mainIntroLine2 {padding: 5px 60px 30px 40px} h2.mainIntroShade,h2.mainIntroLine2Shade {font-family: var(--fontFam);background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));padding: 3vh 60px 25px 40px;font-size: 1.9em;line-height: 160%;letter-spacing: 2px;font-weight: 400;color: rgba(255, 255, 255, .7);margin: 0;text-align: left} h2.sectionHeadingH2 {font-family: var(--fontFam2);padding: 3px 2px 3px 12px;font-size: 1.2em;text-decoration: none;line-height: 150%;margin: 0;text-align: left;font-weight: 700;letter-spacing: 1.3px;color: #fff} h3.attention,h3.attention2 {font-size: 1.2em;margin: 5px 0;font-style: italic;text-align: center} h3.attention {color: var(--font-color)} h3.attention2 {color: var(--col3)} h3.blogTitleH3 {font-size: 1.4em;line-height: 120%;letter-spacing: 1px;font-family: var(--fontFam2);font-style: italic;margin: 10px 20px 15px 0;transition: .5s all ease;font-weight: 700;color: var(--blogBoxTitleA)} h3.boxHeading,h3.boxHeadingWhite {padding: 12px 5px 10px 30px;font-size: 1.1666em;text-decoration: none;letter-spacing: 1px;line-height: 150%;font-weight: 700;margin: 0;text-align: left} h3.boxHeading {color: var(--col3)} h3.boxHeadingWhite {color: #fff} h3.faqsH3 {font-family: var(--fontFam);padding: 8px 30px 10px 40px;font-size: 1.0833em;letter-spacing: 1px;line-height: 160%;color: #22598f;margin: 0;text-align: left} h3.FAQSubHeading {padding: 22px 5px 15px 5px;font-size: 1.2em;text-decoration: none;letter-spacing: 1px;line-height: 150%;font-weight: 700;color: var(--col3);margin: 0;text-align: left} h3.footerH3 {color: #999;font-size: 1em;margin: 0} h3.packageHeading {padding: 8px 5px 5px 15px;font-family: var(--fontFam);font-size: 1.0833em;text-decoration: none;letter-spacing: 1px;line-height: 150%;font-weight: 700;color: var(--col3);margin: 0;text-align: left} h3.slideCaption {color: #fff;font-size: 1.0833em;top: 0;left: 0;position: absolute;font-weight: 700;text-shadow: 3px 3px 3px #000;margin: 0;border: solid 2px #000;background-color: rgba(0, 0, 0, .7);padding: 5 20 5 20} h4.subSectionHeading {font-style: italic;padding: 10px 5px 6px 30px;font-size: 1.1666em;text-decoration: none;letter-spacing: 1px;line-height: 150%;font-weight: 700;color: var(--col3);margin: 0;margin-top: 15px;text-align: left} h4.faqQuestion {font-family: var(--fontFam);font-size: 1.0833em;line-height: 170%;margin: 0;padding-left: 20px;padding-bottom: 16px;color: #22598f} h4.faqQuestion:hover {color: #fba621} @media (max-width:575px) { h1.FAQHeading { padding: 3vh 15px 0 18px; color: rgba(255,255,255,.8); font-size: 1.7em} h1.hpH1 { font-size: 2em; line-height: 2.2em} h1.mainHeading { padding: 25px 15px 0 18px; color: rgba(255,255,255,.8); font-size: 1.8em} h2.contactSectionHeading { margin-left: 5px} h2.mainIntro, h2.mainIntroLine2 { padding: 10px 15px 30px 40px; font-size: 1.5em} h3.blogTitleH3 { color: #fff; margin: 0 20px 15px 0} h3.boxHeading, h3.boxHeadingWhite { font-size: 1.1em; padding: 12px 5px 0 5px} h3.packageHeading { padding: 8px 5px 0 7px} h3.slideCaption { padding: 10px 20px 12px 20px} h4.subSectionHeading { padding: 12px 5px 0 5px} h4.faqQuestion { padding-left: 10px; font-size: 1.0833em} } @media (min-width:780px) and (max-width:1099px) {h2.mainIntro { padding: 3vh 10px 20px 25px; font-size: 2em; line-height: 130%}} p {font-size:1em;letter-spacing:.4px;color:var(--font-color)} p.cookieText {color:#fff;font-size:1em} p.blogBoxA {color:var(--blogBoxContentA)} p.blogBoxB {color:var(--blogBoxContentB)} p.lastUpdatedLeft, p.lastUpdatedRight {font-size:.875em;color:#999;text-align:left;padding-bottom:0;margin: 0} p.lastUpdatedRight {text-align:right} p.panelButtonLine {margin:20px 0 20px 30px;font-size:1.0em} p.promoGrabber {color:#fff;font-size: 45px;line-height: 130%;margin: 25px} p.promoLine1 {color:#fff;font-size: 30px;line-height: 150%;margin: 25px} p.promoLine2 {color:#fff;font-size: 18px;margin: 25px} p.promoLine3 {color:#fff;font-size: 18px;margin: 25px} p.promoDesc {color:#fff;font-size: 18px;margin: 25px} p.promoPrice {color:#fff;font-size: 80px;margin: 50px} p.topColumnSummaryContainer {color: #000;line-height:155%;font-style: italic} p.voiceflowPanelDesc,p.voiceflowPanelDescLine1,p.voiceflowPanelDescWhite,p.voiceflowPanelDescLine1White {color:#42607f;font-size: 18px;margin: 25px 15px} p.voiceflowPanelDescWhite{color:white} p.voiceflowPanelDescLine1 {margin: 35px 15px 20px 15px} p.voiceflowPanelDescLine1White {margin: 35px 15px 20px 15px;color:white} .aboutAuthorContent {padding:3px 0;color:var(--font-color);font-size:.95em;line-height:1.25em} .aboutAuthorContentGen2 {padding:3px 0;color:#22598f;font-size:.95em;line-height:1.25em} .attentionSource {font-size:14px;color:#666;text-align:center;padding:0;margin:0 0 30px 0} .breadcrumbs {font-size:.875em;color:var(--fntLit);text-align:right;margin: 0} .columnTitle {font-weight:700; color: #eee; font-size: 1em; margin: 3px 0} .columnTitleBlack {font-weight:700; color: #111; font-size: 1em; margin: 3px 0} .codeDisplay, .codeDisplayInline, .codeDisplayInlineH2 {font-family:courier;margin:5px 10px;color:#333;font-weight:400} .faqContent, .pageContentBox, .panelContent, .panelContentIndent, .panelContentIndentPlus, .directionsContent, .packagePanelContent, .boxedContent, .introPara,.introParaL, .summaryPara,.summaryParaL, .summaryDetailsGen2, .summaryFAQDetails {padding:8px 30px 10px 30px;font-size:1.0833em;letter-spacing:1px;line-height:160%;color:var(--col3);margin:0;text-align:left} .boxedContent,.boxedContentIndent {color:var(--col1);font-weight:400} .boxedContent > mark {color:#222;font-weight:600} .boxedContentIndent {padding-left:50px} .bundleContent{color: #22598f;color: var(--col3);font-weight:700} .bundle2Selector {cursor: pointer;height: 40px;width: 50%;margin: 0;padding: 6px 0 0 0;background-color: #ccc;color:#42607f;font-size:20px;font-weight:700;display: inline-block;border:solid 1px #000;transition: background-color 0.9s ease} .bundle2Selector:hover {background-color: #42607f;color:#fff} .contentGen2 {color:#22598f} .directionsContent {padding:6px 20px 6px 12px} .faqContent {padding:8px 30px 10px 15px} .featureQuestions {color:#22598f;color:var(--fntDrk);padding: 2px 5px 0 15px;line-height:100%;font-weight:700} .featureDescription,ul.featureDescription > li {color:#333;padding: 0 5px 0 30px;line-height:160%} .footerText {color:#ccc;font-size:0.9166em;line-height:1.5em;text-decoration:none;padding:0;margin:0} .formConsent {font-size:1em} .hpBullets {display:inline;font-family:var(--fontFam);color:#22598f;padding:0 10px;font-weight:400;font-size:1.0833em} .hpBullets:hover {color:#0a1a29} .hpReviewText {font-size:1.0em;color:white} .introPara,.introParaL,.summaryPara,.summaryParaL {font-weight:700;font-style:italic;line-height:175%;padding:5px 30px 15px 30px} .introParaL,.summaryParaL {font-size:1.0833em} .packagePanelContent {color:#333} .panelBoxCaptions {font-family:var(--fontFam2);color:#22598f;line-height:160%;font-size:1.3em;font-style:italic;font-weight: 600} .panelContentIndent {padding-left:42px} .panelContentIndentPlus {padding-left:50px} .packagePanelContent {padding-left:10px;font-size: 16px} .personaWhat {color:var(--personaWhat)} .personaWho {color:var(--personaWho)} .personaWhy {color:var(--personaWhy)} .summaryFAQDetails {padding:8px 30px 10px 10px;margin: 0 0 10px 15px} .summaryDetailsGen2, .summaryFAQDetails {padding:5px 5px 5px 35px} .summaryPara,.summaryParaL,.summaryPanelContent {color:#ccd5dd} mark {background-color: transparent;color: #dd5f17} mark.mark2 {background-color: transparent;color: #489ced} mark.mark2Shadow {background-color: transparent;color: #489ced; text-shadow: 1px 1px 3px #fff} mark.mark3 {background-color: transparent;color: #715e1f} mark.modal {font-size:1.1666em} @media (max-width:575px) { p.promoPrice {font-size: 80px;margin: 40px} p.promoGrabber {color:#fff;font-size: 40px;line-height: 130%;margin: 25px} p.promoLine1 {line-height:150%;font-size: 30px;margin: 15px} p.promoLine2 {font-size: 19px;margin: 25px} p.voiceflowPanelDesc {color:#42607f;font-size: 18px;margin: 20px 10px 10px 10px} p.voiceflowPanelDescLine1 {margin: 15px 15px 20px 15px} p.voiceflowPanelDescLine1White {margin: 15px 15px 20px 15px;color:white} .boxedContent,.boxedContentIndent {color:var(--col1);font-weight:400;padding-left:15px} .boxedContentIndent {padding-left:30px} .columnTitle,.columnTitleBlack {font-size: 1.1em; margin: 3px 0} .introPara,.introParaL,.summaryPara,.summaryParaL {font-size:1.0833em;padding:5px 30px 15px 10px} .featureQuestions {padding: 2px 5px 0 5px} .featureDescription {padding: 0 3px 0 3px} .formConsent {font-size:0.95em} .faqContent, .summaryPanelContent, .panelContent, .panelContentIndent, .panelContentIndentPlus {padding:1px 8px 5px 10px;font-size:1.0833em;line-height:170%} .pageContentBox {padding-left:10px;max-width:280px} .summaryDetailsGen2 {padding:5px 5px 5px 0} .summaryFAQDetails {padding:5px 5px 15px 5px;margin: 5px} } /* LINK CONTROL */ a {color:var(--font-color);text-decoration:underline;transition:.5s} a:hover {color:var(--col3)} a.breadcrumbs, a.breadcrumbsL {font-size:1em;color:var(--fntLit);text-decoration:none} a:hover.breadcrumbs {color:var(--col5)} @media (max-width:575px) { .breadcrumbs {color:var(--fntLit);text-align:left;margin:0} a.breadcrumbs {color:#999;text-decoration:none} a:hover.breadcrumbs {color:var(--col2)} } a.normalFooter {color:#ccc;text-decoration:underline} a:hover.normalFooter {color:var(--col1)} .smallFooter,a.smallFooter {font-size:0.9166em;line-height:1.5em;color:#ccc;text-align:center;text-decoration:none;padding:0;margin:0} a:hover.smallFooter {color:#999} a.topOfPage {font-size:.875em;color:#999;text-decoration:none} a:hover.topOfPage {color:var(--col1)} a:link.blogTitle, a:visited.blogTitle {color:var(--col1);text-decoration:none;font-weight:700} a:hover.blogTitle {color:#ccc} a:link.blogTitleLink,a:visited.blogTitleLink {color:var(--blogBoxTitleA);text-decoration:none;font-weight:700} a:hover.blogTitleLink {color:var(--blogBoxTitleB)} a:link.blogBoxA,a:visited.blogBoxA {color:var(--blogBoxLinkA);text-decoration:none;font-weight:400} a:hover.blogBoxA {color:var(--navHover)} a:link.blogBoxB, a:visited.blogBoxB {color:var(--blogBoxLinkB);text-decoration:none;font-weight:400} a:hover.blogBoxB {color:#333} @media (min-width:576px) AND (max-width:1099px) { a:link.blogBoxA, a:visited.blogBoxA {color:var(--blogBoxLinkA)} a:link.blogBoxB, a:visited.blogBoxB {color:var(--blogBoxLinkB)} } .cookie-btn {font-size:1.125em;margin:3px 0 18px 0;border:solid 1px var(--colLit)} /* MORE TEXT CONTROLS FOR MOBILE */ @media (max-width:575px) { summary {margin-left:20px} .smallFooter,a.smallFooter {font-size:.9em;line-height:1.4em;color:#ccc;text-align:center;text-decoration:none;padding:6px 0;margin:0;text-decoration:none} a:hover.smallFooter {color:#066} a.callButton,a.mailButton {background-color:var(--col2);border:solid 1px #fff;border-radius:4px;text-decoration:none;padding:8px 25px;margin:5px 14px 35px 10px;color:#fff;font-weight:700;-webkit-box-shadow:5px 5px 5px rgba(0, 0, 0, .5);box-shadow:5px 5px 5px rgba(0, 0, 0, .5)} a.callButton {background-color:var(--col3);margin:5px 10px 35px 14px} a.callButton:hover,a.mailButton:hover {background-color:var(--col3);color:#fff;-webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, .5);box-shadow:3px 3px 3px rgba(0, 0, 0, .5)} .mobileNav {line-height:.9em} } details {margin:0 0 10px 0;transition:0.5s all ease-in-out} summary {margin-left:20px;padding: 6px 0 0 0;cursor:pointer;font-weight:700;color:#22598f;letter-spacing: 1px;transition:.5s all ease-in-out} .ContentPanel {border:solid 1px #333;width:94%;margin: 5px auto;padding: 10px 5px;background-color: var(--boxedContentBG);box-shadow: 5px 6px 3px #ccc} .textCentre {text-align:center} .italicise {font-style:italic} .bold,.bolded {font-weight:700} .noWrap {white-space:nowrap} .white {color:var(--whiteHighlight)} .light {color:var(--font-color)} .black {color:#000} .yellow {color:var(--yellow)} .disclaimer {font-size:0.9166em;color:var(--color2)} .markBold {color:#4b94db;font-weight:600} .italic,.italicise {font-style:italic} .superScript {font-size:0.9166em} .bold,.bolded{font-weight:700} .noUnderline {text-decoration:none} .min1400 {width:100%} @media (max-width:1399px) {.min1400 {display:none}} .min820 {width:100%} @media (max-width:819px) {.min820 {display:none}} .min520 {width:100%} @media (max-width:519px) {.min520 {display:none}} @media (max-width:575px) {.revealH2 {position:relative;transform:translateX(200px);opacity:1;transition:1s all ease}} .faqTitles,.faqTitlesGen2 {display:inline;font-family:var(--fontFam);color:var(--font-color);padding:0 10px;font-weight:400;font-size:1.1em} .faqTitlesGen2 {color:#22598f;font-size:1.1666em;padding:0 10px 50px 0} @media (max-width:575px) {.faqTitlesGen2 {font-size:1em;padding:0 10px 50px 0}} .answerBox, .faqBox, .faqBoxGen2, .moreQuestionsBox, .questionsIntroBox, .faqBoxGradient {border:solid 1px var(--contentBoxBorder);border-radius:8px;margin:20px 25px 35px 25px;padding:2px 6px 5px 6px;background:var(--contentBoxGradientWebkit);background:var(--contentBoxGradientMoz);background:var(--contentBoxGradient);background:#ccc;color:#bbb} .faqBoxGen2 {margin:18px 20px 35px 22px;padding:12px 10px 5px 5px;background:#eee} .moreQuestionsBoxGen2 {margin:8px auto;padding:2px 10px 5px 10px} .faqBoxGradient {background:var(--faqBoxGradient)} .hpReviewPanel {border:solid 1px var(--col2);border-radius:8px;padding: 3px 12px;margin: 5px 20px;background-color: var(--col3)} @media (max-width:575px) {.hpBullets {color:#22598f;padding:0 10px 0 0}} .bulletTitleGen2 {display:inline;font-family:var(--fontFam);color:var(--bulletTitleGen2);padding:10px 6px 0 0;font-weight:600;font-size:1.0833em;font-style:unset} .serviceType {color:var(--col5);padding:0 30px} .serviceTypeHP {color:var(--col2);padding:0 30px} @media (max-width:575px) { .serviceTitle {display:inline;font-family:var(--fontFam);color:var(--whiteHighlight);padding:0 10px 0 0;font-weight:400;font-size:1.0833em} .bulletTitleGen2 {display:inline;font-family:var(--fontFam);color:var(--bulletTitleGen2);padding:0 6px 0 0;font-weight:500;font-size:1.0833em} .serviceType {color:#999;padding:0 15px 0 5px} .serviceTypeHP {color:var(--col2);padding:0 15px 0 15px} } .serviceTitle:hover {color:var(--linkHover)} .summaryArrowGen2 {color:var(--bulletTitleGen2);padding:0 15px 0 5px} .directionsBox, .whatsNewBox {padding:0;margin:8px 20px 30px 68px;color:#bbb} .directionsBox {padding:0 0 0 30px;margin:8px 20px 30px 40px} .directionsBoxGen2 {padding:0 0 0 30px;margin:8px 20px 30px 40px} @media (max-width:575px) {.directionsBoxGen2 {padding:0 0 0 0px;margin:8px 10px 30px 10px}} .directionsContentPanel, .directionsContentPanelColour1, .directionsContentPanelColour2 {border-radius: 8px;background-color:#ddd;padding: 10px 10px 10px 6px;margin: 18px 20px} .directionsContentPanelColour1 {background-color:transparent} .directionsContentPanelColour2 {background-color:transparent} @media (max-width:575px) { .directionsContentPanel, .directionsContentPanelColour1, .directionsContentPanelColour2 {padding: 0;margin: 0 0 15px 0} } .whatsNewtext {width:100%;margin:0;height:260px;padding:0} /* change to P tag */ .whatsNewPanel {display:flex;flex-direction:column} .whatsNewImage {width:100%;margin:0;padding:0} .whatsNewThumbnail {width:100%;border-radius:5px} @media (max-width:575px) { .whatsNewPanel {border: solid 2px var(--col3);border-radius: 8px} .whatsNewtext,.whatsNewImage {width:100%;margin:0;height:unset;padding:0 10px} .whatsNewImage {margin:0;padding:0} .directionsContentPanelColour1 {background-color:#ffecaa99} .directionsContentPanelColour2 {background-color:#ffecaa44} .whatsNewThumbnail {width:100%;border-radius:0 0 6px 6px} } .whatsNewOuter {display: flex;width:100%;padding:0} .whatsNewOuterCards {width:33%} @media (max-width:575px) { .whatsNewOuter {display:flex;flex-direction:column;width:100%;padding:0} .whatsNewOuterCards {padding: 0;margin-bottom:20px;width:100%} } @media (min-width:576px) AND (max-width:1099px) { .whatsNewOuter {display:flex;flex-direction:column;width:100%;padding:0} .whatsNewOuterCards {border: solid 2px var(--col3);border-radius: 8px;padding: 0;width:80%;margin: 0 auto 20px auto} .whatsNewImage {width:100%;margin:0;padding:0} .whatsNewThumbnail {display: block;width:80%;margin: 0 auto;border-radius:0 0 6px 6px} } .summaryBoxGen2 {padding:10px;margin:20px 0 30px 32px;border-right:solid 1px #555;border-bottom:solid 1px #555;background-image:linear-gradient(to bottom right, rgba(102, 102, 102, 0), rgba(102, 102, 102, 0.1));box-shadow:5px 6px 3px #ccc} .questionsIntroBox {background:var(--questionsIntroBox);color:#bbb} .moreQuestionsBox {color:#333;background:#ccc;background:var(--contentBoxGradientWebkit);background:var(--contentBoxGradientMoz);background:var(--contentBoxGradient);color:#bbb} @media (max-width:575px) {.moreQuestionsBox {margin:8px 1px 35px 1px}} /* Text transitions */ .revealH2 {position:relative;transform:translateX(150px);opacity:0;transition:.4s all ease} .revealH2.active {transform:translateX(0);opacity:1} .revealText {position:relative;transform:translateY(150px);opacity:0;transition:.9s all ease} .revealText.active {transform:translateY(0);opacity:1} .revealText2 {position:relative;transform:translateY(175px);opacity:0;transition:.9s all ease} .revealText2.active {transform:translateY(0);opacity:1} .revealText3 {position:relative;transform:translateY(200px);opacity:0;transition:.9s all ease} .revealText3.active {transform:translateY(0);opacity:1} .revealText4 {position:relative;transform:translateY(225px);opacity:0;transition:.9s all ease} .revealText4.active {transform:translateY(0);opacity:1} @media screen AND (max-width:991px) { .revealH2 {position:relative;transform:unset;opacity:1;transition:1s all ease} .revealH2.active {transform:unset;opacity:1} } /* FAQ box overlay */ .faqBoxInOverlay {border:solid 3px #183f66;border-radius:8px;margin:0;padding:2px 20px 5px 20px;background:var(--faqOverlayBG);background:var(--contentBoxGradient);background:#eee;color:var(--font-color)} .faqBoxInOverlay>p>a.faqContentLink {color:#066} .faqBoxInOverlay>p>a.faqContentLink:hover {color:#099} .faqBoxInOverlay>ul>li>a.faqContentLink {color:#066} .faqBoxInOverlay>ul>li>a.faqContentLink:hover {color:#099} details>summary>h3.faqTitles {color:var(--font-color);transition:.6s} details>summary>h3.faqTitles:hover {color:#999} details[open]>summary>h3.faqTitles {color:var(--font-color)} details[open] summary~* {animation:fadeOpen 1s ease-in} @keyframes fadeOpen { 0% {opacity:0} 100% {opacity:1} } .summaryDetailsBottomMargin{margin: 10px 10px 20px 30px;background-color: #eee;background-image:linear-gradient(to bottom right, rgba(24, 63, 102, 0), rgba(49, 107, 164, .1));padding: 5px 10px 5px 5px;border: solid 1px #183f66} .websiteDetailsBox, .packageDetailsBox{margin: 10px 10px 20px 10px;background-color: #eee;background-image:linear-gradient(to bottom right, rgba(24, 63, 102, 0), rgba(49, 107, 164, .1));padding: 5px 10px 5px 5px;border: solid 1px #183f66} .packageDetailsBox {padding: 10px 10px 5px 5px;margin: 10px 18px 20px 18px;background-image:unset} .faqsBox,.faqsBoxInPage{margin: 10px 10px 20px 25px;background-color: #eee;background-image:linear-gradient(to bottom right, rgba(24, 63, 102, 0), rgba(49, 107, 164, .1));padding: 5px 10px 5px 0;border: solid 1px #183f66} .faqsBoxInPage{background-color: #fff} @media (max-width:640px){.summaryDetailsBottomMargin{margin: 5px 5px 30px 5px;padding: 5px 5px 5px 0;background-color: #fff;background-image:linear-gradient(to bottom right, rgba(24, 63, 102, 0), rgba(49, 107, 164, .2));border-right: solid 1px #333;border-bottom: solid 1px #333}} @media (max-width:640px){ .websiteDetailsBox, .packageDetailsBox{margin: 5px 5px 30px 5px;padding: 5px 5px 5px 0;background-color: #fff;background-image:linear-gradient(to bottom right, rgba(24, 63, 102, 0), rgba(49, 107, 164, .2));border-right: solid 1px #333;border-bottom: solid 1px #333;height:auto} .packageDetailsBox {background-image:unset} .faqsBox,.faqsBoxInPage{margin: 5px 5px 30px 5px;padding: 5px 5px 5px 0;background-color: #fff;background-image:linear-gradient(to bottom right, rgba(24, 63, 102, 0), rgba(49, 107, 164, .2));border-right: solid 1px #333;border-bottom: solid 1px #333;height:auto} .faqsBoxInPage{background-color: #fff;background-image:unset;padding: 0 5px 5px 2px} } @media (max-width:575px) { details>summary>h3.faqTitles {color:#ccc;transition:0s} details>summary>h3.faqTitles:hover {color:#ccc} details[open]>summary>h3.faqTitles {color:#ccc} summary {list-style:none;font-size:1.0833em;padding-left:0;margin-left:0} .faqBox,.faqBoxGen2 {border:solid 1px #ccc;border-radius:8px;margin:8px 1px 25px 10px;padding:2px 10px 5px 10px} .faqTitles {padding:0;font-weight:400} } /* MODE SCHEME SLIDER */ .modeSwitchWrapper {display:flex;align-items:center} .modeSwitch {display:inline-block;height:22px;position:relative;width:50px} .modeSwitch input {display:none} .slider {background-color:#333;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.9s all ease;border:solid 2px #999} .slider:before {background-color:#fff;bottom:2px;content:"";height:14px;width:14px;left:2px;position:absolute;transition:.9s all ease} input:checked+.slider {background-color:#fff;border:solid 2px #999} input:checked+.slider:before {transform:translateX(27px);background-color:#000} @media (max-width:575px) {input:checked+.slider:before {transform:translateX(18px);background-color:#000}} .slider.round {border-radius:28px} .slider.round:before {border-radius:50%} /* BUTTONS - OLD */ .globalButton {background:var(--col2);margin:10px 0;padding:5px 18px;border:solid 1px var(--col1);border-radius:8px;cursor:pointer;text-decoration:none;transition:.5s} .globalButton:hover {background:var(--col3);color:#fff;text-shadow:0 0 30px #fff} .stdBtnLight {margin:auto 0;background:var(--col2);border:solid 1px var(--colLit)} .stdBtnLight:hover {background:var(--col1)} /* ONLY USED ON costCalcResults.php & costCalcResultsWithPricesBreakdown.php */ .stdBtnGrey {background:var(--stdBtnGreyBG);border:solid 1px var(--colLit);box-shadow:5px 5px 8px rgba(102, 102, 102, .5)} .stdBtnGrey:hover {background:var(--stdBtnGreyBGHover);box-shadow:1px 1px 4px rgba(102, 102, 102, .7)} /* BUTTONS - NEW */ .buttonInPanel {background:var(--col3);border:solid 1px var(--col2);border-radius:8px;font-size:1.0833em;cursor:pointer;text-decoration:none;color:#fff;margin:200px 0;padding:8px 16px;transition:.5s} .buttonInPanel:hover {background:var(--col2);color:#fff;text-shadow:0 0 30px #fff} .buttonBannerLP {display: inline-block;padding: 4px 16px;background-color: var(--col3);margin: 3px 10px;color: #fba621;text-align: center;text-decoration: none;border: solid 1px var(--colLit);border-radius: 8px;position: relative;overflow: hidden} .buttonBannerLP:hover {color: #fba621;border: solid 1px #fba621} @media (max-width:575px) { .buttonBannerLP {margin: 0px 10px;background-color: var(--col1);float:right;color: #fff;padding: 1px 9px} } .buttonMaster {display: inline-block;padding: 5px 16px;background-color: var(--col3);margin: 3px 10px;color: #eee;text-align: center;text-decoration: none;border: solid 1px var(--colLit);border-radius: 8px;position: relative;overflow: hidden;box-shadow:5px 5px 8px rgba(102, 102, 102, .5);transition: transform 0.1s, box-shadow 0.3s} .buttonMaster::before {content: '';position: absolute;top: 0;right: -10px;bottom: 0;left: 0;background: rgba(255, 255, 255, 0.1);transform: skewX(-20deg) translateX(-100%);transition: transform 0.6s;color: #ffd60d} .buttonMaster:hover {color: #ffd60d;border: solid 1px #fff;box-shadow:2px 2px 3px rgba(102, 102, 102, .5)} .buttonMaster:hover::before {transform: skewX(-20deg) translateX(0);box-shadow:5px 5px 8px rgba(102, 102, 102, .5)} .buttonMaster:active::before {transform: skewX(-20deg) translateX(-100%)} .buttonMaster:active {box-shadow:5px 5px 8px rgba(102, 102, 102, .5);transform: translateY(0)} .buttonLightBlue {background:var(--col3);color:var(--buttonLightBlueText)} .buttonLightBlue:hover {background:var(--col4);color:#fff;text-shadow:0 0 2px #fff} .buttonDarkBlue {background:var(--buttonDarkBlue);color:var(--buttonDarkBlueText)} .buttonDarkBlue:hover {background:var(--buttonDarkBlueHov);color:#fff;text-shadow:0 0 2px #fff} .flex-img-container2 {display:flex} .flex-img-container2>div {width:48%;margin:5px auto;padding:0px} @media (max-width:575px) { .flex-img-container2 {flex-direction:column} .flex-img-container2>div {width:100%;margin:5px auto;padding:0px} } img.flexImageDisplay {width:100%;height:auto;border:solid 2px #ccc;border-radius:8px;margin:0;padding:0} img.imageInContent100pc {display: block;width:99%;margin:25px auto;height:auto;border:solid 2px #ccc;border-radius:8px} img.inContentImage90pc {display: block;width:90%;margin:25px auto;height:auto;border:solid 2px #ccc;border-radius:8px} img.inContentImage80pc {display: block;width:80%;margin:25px auto;height:auto;border:solid 2px #ccc;border-radius:8px} @media (max-width:575px) {img.inContentImage90pc,img.inContentImage80pc {width:95%}} .breadCrumbsContainer {height:100%;width:100%;margin:0;padding:130px 0 50px 0} .mainContentPanelOuter {height:100%;width:100%;margin:0;padding:70px 0 50px 0} .mainContentPanelOuterGen2 {height:100%;width:100%;padding:70px 0 0 0;border-bottom:solid 5px #22598f;border-bottom:solid 2px #000;margin-top:50px} .mainContentPanelOuterAdPage {height:100%;width:100%;margin:0;padding:200px 0 50px 0} @media (max-width:575px) { .mainContentPanelOuter,.mainContentPanelOuterAdPage {padding:20px 0 30px 0} .mainContentPanelOuterGen2 {height:100%;width:100%;padding: 0px;margin:0px} } @media (min-width:780px) AND (max-width:1099px) { .mainContentPanelOuter, .mainContentPanelOuterAdPage {padding:150px 0 50px 0} } .introPanel,.introPanelGen2 {height:100%;width:100%;max-width:1200px;margin:0 auto;padding:30px 30px 40px 0px;background:transparent} .introPanelGen2 {height:100%;min-height:300px;width:100%;max-width:1280px;margin:0 auto;padding:25px 15px 20px 20px;background:transparent} @media (max-width:575px) { .introPanel {margin:50px auto;padding:60px 30px 10px 0px} .introPanelGen2 {margin:0;min-height:300px;padding:60px 30px 10px 0px} } @media (min-width:780px) AND (max-width:1099px) { .introPanel {margin:50px auto;padding:60px 20px 10px 30px} } .mainContentPanel, .topPanelBG {height:100%;width:100%;margin:0 auto;padding:30px 30px 30px 30px;background:#fff} .topPanelBG {padding:10px 30px 5px 30px;background:#fff} @media (max-width:575px) { .mainContentPanel {padding: 0;margin:0} .topPanelBG {margin:0;padding:0;background:#fff} } .mainContentPanelText {width:90%;max-width:1200px;margin:15px auto 25px auto} @media (max-width:575px) {.mainContentPanelText {width:100%;margin:15px auto 15px auto;padding:5px 0 0 5px}} .panelBoxContainerR, .panelBoxContainerReviews, .panelBoxContainerTop {display:flex;max-width:1200px;margin: 15px auto 25px auto} .panelBoxContainerL {display:flex;flex-direction:row-reverse;max-width:1200px;margin: 15px auto 25px auto} .panelBoxContainerTop {padding:0; margin: 10px auto 25px auto} .panelBoxContainerR>div, .panelBoxContainerL>div, .panelBoxContainerReviews>div, .panelBoxContainerTop>div {DGHfont-size:30px;width:50vw} @media (max-width:575px) { .panelBoxContainerR, .panelBoxContainerL, .panelBoxContainerReviews, .panelBoxContainerTop {flex-direction:column;margin: 15px auto 10px auto;width:100%} .panelBoxContainerTop {margin:0;padding:0} } .panelBoxContentR, .panelBoxContentL, .panelBoxContentTop {padding:10px;margin:20px 30px 20px 0px;border:solid 1px var(--contentBoxBorders);background-color:#eee;box-shadow:5px 6px 3px #ccc} .panelBoxContentL {margin:20px 0px 20px 30px} .panelBoxContentReviews {margin:20px 0px 20px 30px} @media (max-width:575px) { .panelBoxContentR, .panelBoxContentL, .panelBoxContentReviews {margin:20px 0px 0px 0px;box-shadow:unset} .panelBoxContentTop {margin:0;box-shadow:unset} .panelBoxContainerR>div, .panelBoxContainerL>div, .panelBoxContainerReviews>div, .panelBoxContainerTop>div {width:100%} } .panelBoxImg {width:100vw;min-width:300px;padding:0px;margin:20px 0px 20px 0px} @media (max-width:575px) {.panelBoxImg {width:100%;margin:0px 0px 0px 0px}} img.panelImage, img.panelImageTop {display:block;width:100%;height:auto;max-width:900px;margin:0;box-shadow:5px 6px 3px #ccc} @media (max-width:575px) { img.panelImage,img.panelImageTop {width:100%;margin:0 0 30px 0;box-shadow:unset} img.panelImageTop {margin:0} } img.frameImage {display:block;width:100%;height:auto;max-width:900px;margin:0} @media (max-width:575px) {img.frameImage {width:100%;margin:0 0 30px 0;box-shadow:unset}} .ulInContent, .ulGen2, .ulGen2DarkBG, .ulGen2Bold, .ulPackageList, .olInContent, .olGen2, .olGen2Bold {margin:10px 0 20px 30px;color:#22598f} .ulInContent>li, .ulGen2>li, .ulGen2DarkBG>li, .ulGen2Bold>li, .ulPackageList>li, .olInContent>li, .olGen2>li, .olGen2Bold>li {font-size:1.0833em;letter-spacing:1px;line-height:150%;font-weight:400;color:#22598f} .ulGen2DarkBG {color:#fff;text-decoration:none;margin:10px 0 20px 10px} .ulGen2Bold>li, .olGen2Bold>li {font-size:1.0833em;font-weight:700} .ulPackageList {margin:10px 0 20px 5px} .ulPackageList>li {font-size:1.0em;color:#333} li { list-style-image:linear-gradient(to left top, #000, #aaa); padding:2px 10px 5px 5px; transition:.5s all ease; color:var(--font-color) } ol>li { list-style-image:unset; padding:2px 10px 5px 5px; transition:.5s all ease; color:var(--font-color) } li:hover {list-style-image:linear-gradient(to left top, #000, #22598F)} ul.noBullet > li {list-style-type: none;list-style-image:unset} @media (max-width:575px) { .ulInContent, .ulGen2, .ulGen2Bold, .olInContent, .olGen2, .olGen2Bold {margin:10px 0 20px 5px} } div.formContainer {border:solid 1px var(--col2);border-radius:10px;background-color:#e0f0f4;padding:15px} .contentLinkGen2,.linkStd {color:var(--col2)} .contentLinkGen2:hover,.linkStd:hover {color:#555} .imagePanelLinkUL {color:#083378;text-decoration:none} .imagePanelLinkUL:hover {color:#555} .pageContentLink {color:#083378;text-decoration:none} .pageContentLink:hover {color:#999} .contentBox1 { padding:10px; margin:20px 0 30px 32px; border-right:solid 1px var(--contentBoxBorders); border-bottom:solid 1px var(--contentBoxBorders); background-image:linear-gradient(to bottom right, rgba(102, 102, 102, 0), rgba(102, 102, 102, 0.1)); box-shadow:5px 6px 3px #ccc; } .contentBox1 { padding:10px 5px; margin:5px 0 30px 0; } .paymentSummaryBox, .pageSummaryBox, .contentBoxBR, .contentBoxTL, .contentBoxTRBL, .contentBoxALL, .contentBoxFAQs, .contentBoxNone, .contentBoxNoBG, .embededHeading, .imageInContent100container {width:90%;max-width:1200px;padding:12px 6px 18px 8px;margin:5px auto 20px auto} .contentBoxNone {padding:12px 0 18px 0} .promoBox {width:90%;max-width:1200px;padding:0 15px;margin:5px auto 20px auto;border:solid 1px var(--contentBoxBorders);background-image:linear-gradient(to bottom right, rgba(102, 102, 102, 0), rgba(102, 102, 102, 0.1));box-shadow:5px 6px 3px #ccc} @media (max-width:575px) { .promoBox {width:100%;padding:10px 5px 6px 10px;margin:20px 0 20px 0;border-top:solid 1px var(--contentBoxBorders);border-bottom:solid 1px var(--contentBoxBorders);border-left:solid 0 transparent;border-right:solid 0 transparent;background-image:linear-gradient(to bottom right, rgba(102, 102, 102, 0), rgba(102, 102, 102, 0.1));box-shadow: 0 0 30px 15px rgba(47, 54, 64, .9)} } @media (max-width:575px) {.pageSummaryBox {width:94%;padding:12px 6px 18px 8px;margin:5px auto 20px auto}} section.pageContentListContainer { background-image:url("../images/web-images/compass-L.jpg");background-repeat: no-repeat;background-position: right top;background-position-x: 125%;background-position-y: 15%} section.otherContentListContainer {background-image:url("../images/web-images/sign-more-stuff-perspective.png");background-repeat: no-repeat;background-position: right top;background-position-x: 5px;background-position-y: 140%} @media (max-width:575px) { section.pageContentListContainer {background-image:url("../images/web-images/compass-S.jpg");background-repeat: no-repeat;background-position: right top;background-position-x: 250px;background-position-y: -50px} section.otherContentListContainer {background-image:url("../images/web-images/sign-more-stuff-perspective.png");background-image:unset;background-repeat: no-repeat;background-position: right top;background-position-x: 125%;background-position-y: 15%} } div.pageContentHeading, div.sectionHeading, div.sectionHeadingEmbeded, div.sectionHeadingFAQs, div.sectionDivider, div.sectionDividerEmbeded {width:90%;max-width:1200px;padding:3px 6px;margin:25px auto 12px auto;background-image:linear-gradient(to right, rgba(8, 78, 101, 0.9), rgba(8, 78, 101, 0.3));border-left:solid 6px #22598f;border-top:solid 0 transparent;border-right:solid 0 transparent;border-bottom:solid 0 transparent;border-style:double} div.pageContentHeading {background-image:linear-gradient(to right, rgba(0, 21, 42, 1), rgba(102, 102, 102, 0.15));border-bottom:solid 1px #22598f;border-bottom:solid 1px var(--yellow)} div.sectionHeadingEmbeded,div.pageContentHeading, div.sectionHeadingFAQs {width:100%;padding:3px 4px;margin:0 0 25px 0} div.sectionHeadingFAQs {background-image:linear-gradient(to right, rgba(205, 126, 0, 0.8), rgba(255, 255, 255, 0.15))} div.sectionDivider {padding:3px 16px;margin:6px auto 25px auto} div.sectionDividerEmbeded {width:100%;padding:3px 16px;margin:20px 0 25px 0} @media (max-width:575px) { div.pageContentHeading, div.sectionHeading, div.sectionHeadingEmbeded, div.sectionHeadingFAQs, div.sectionDivider, div.sectionDividerEmbeded {width:100%;padding:6px 6px 6px 0;margin:0 0 14px 0;background-image:linear-gradient(to right, rgba(8, 78, 101, 0.9), rgba(8, 78, 101, 0.3))} div.sectionDividerEmbeded,div.pageContentHeading, div.sectionHeadingFAQs {padding:3px 16px;margin:6px 5px 20px 5px;background-image:linear-gradient(to right, rgba(102, 102, 102, 0.7), rgba(102, 102, 102, 0.0))} div.pageContentHeading {background-image:linear-gradient(to right, rgba(0, 21, 42, 1), rgba(102, 102, 102, 0.05))} div.sectionHeadingFAQs {background-image:linear-gradient(to right, rgba(205, 126, 0, 0.8), rgba(255, 255, 255, 0.15));margin:0 0 14px 0} } .contentBoxBR, .contentBoxBRNoBG {border-right:solid 1px var(--contentBoxBorders);border-bottom:solid 1px var(--contentBoxBorders);border-top:solid 2 transparent;border-left:solid 0 transparent;background-image:linear-gradient(to bottom right, rgba(102, 102, 102, 0), rgba(102, 102, 102, 0.1));box-shadow:5px 6px 3px #ccc} .contentBoxBRNoBG {background-image:unset} .contentBoxTL {border-top:solid 1px var(--contentBoxBorders);border-left:solid 1px var(--contentBoxBorders);background-image:linear-gradient(to bottom right, rgba(102, 102, 102, 0), rgba(102, 102, 102, 0.1));box-shadow:5px 6px 3px #ccc} .contentBoxTRBL,.contentBoxALL {border:solid 1px var(--contentBoxBorders);background-image:linear-gradient(to bottom right, rgba(102, 102, 102, 0), rgba(102, 102, 102, 0.1));box-shadow:5px 6px 3px #ccc} .contentBoxFAQs {border:solid 1px var(--contentBoxBorders);background-color: var(--GoldPanelLev1);padding-top:40px;box-shadow:5px 6px 3px #ccc} .pageSummaryBox {border:solid 1px var(--contentBoxBorders);background-color:#000000;background-image: linear-gradient(to bottom right, #000, #183f66);box-shadow:5px 6px 3px #ccc} .paymentSummaryBox {border:solid 1px var(--contentBoxBorders);background-color:#000000;background-image: linear-gradient(to bottom right, #293257, #2674c3);box-shadow:5px 6px 3px #ccc} .contentBoxNoBG {border-right:solid 1px var(--contentBoxBorders);border-bottom:solid 1px var(--contentBoxBorders);border-top:solid 0 transparent;border-left:solid 0 transparent;box-shadow:5px 6px 3px #ccc;padding:0 0 18px 8px;margin:0 auto 20px auto} .contentBoxColour0 {background-image:linear-gradient(to bottom right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.3))} .contentBoxColour1 {background-image:linear-gradient(to bottom right, rgba(230, 185, 184, 0), rgba(230, 185, 184, 0.9))} .contentBoxColour2 {background-image:linear-gradient(to bottom right, rgba(242, 221, 220, 0), rgba(242, 221, 220, 0.9))} .contentBoxColour3 {background-image:linear-gradient(to bottom right, rgba(182, 221, 232, 0), rgba(182, 221, 232, 0.9))} .contentBoxColour4 {background-image:linear-gradient(to bottom right, rgba(219, 238, 243, 0), rgba(219, 238, 243, 0.9))} .contentBoxColour5 {background-image:linear-gradient(to bottom right, rgba(182, 221, 232, 0), rgba(182, 221, 232, 0.9))} .contentBoxColour6 {background-image:linear-gradient(to bottom right, rgba(219, 238, 243, 0), rgba(219, 238, 243, 0.9))} .contentBoxColour7 {background-image:linear-gradient(to bottom right, rgba(252, 213, 180, 0), rgba(252, 213, 180, 0.9))} .contentBoxColour8 {background-image:linear-gradient(to bottom right, rgba(253, 233, 217, 0), rgba(253, 233, 217, 0.9))} .contentBoxColour9 {background-image:linear-gradient(to bottom right, rgba(204, 192, 218, 0), rgba(204, 192, 218, 0.9))} .contentBoxColour10 {background-image:linear-gradient(to bottom right, rgba(229, 224, 236, 0), rgba(229, 224, 236, 0.9))} .embededHeading {padding:0 6px 15px 0} .contactAndCalendarContainer {border-left:solid 1px #22598f} @media (max-width:575px) { .directionsBox {padding:0;margin:8px 20px 30px 20px} .summaryBoxGen2 {padding:10px 5px 6px 10px;margin:5px 10px 25px 10px;background-image:linear-gradient(to bottom right, rgba(102, 102, 102, 0), rgba(102, 102, 102, 0.1));box-shadow:5px 6px 3px #ccc} } @media (max-width:575px) { .contentBox1, .contentBoxTL, .contentBoxTRBL, .contentBoxALL, .contentBoxFAQs, .contentBoxBRNoBG, .contentBoxBR {width:100%;padding:10px 5px 6px 10px;margin:5px 0 10px 0;border-top:solid 0 transparent;border-bottom:solid 1px var(--contentBoxBorders);border-left:solid 0 transparent;border-right:solid 0 transparent;background-image:linear-gradient(to bottom right, rgba(102, 102, 102, 0), rgba(102, 102, 102, 0.1));box-shadow:unset} .contentBoxNone, .contentBoxNoBG {margin:5px 0 0 0;padding:0 0 0 0;width:100%;border-right:solid 0 transparent;border-bottom:solid 0 transparent;border-top:solid 0 transparent;border-left:solid 0 transparent;box-shadow:unset} .contentBoxFAQs {background-color: var(--GoldPanelLev1);border-top:solid 1px var(--contentBoxBorders);padding-top:40px} .embededHeading {padding:0 0 6px 0} } .podcastContainer { height:180px; width:100%; padding:10px; margin:0 auto } @media (max-width:1094px) {.podcastContainer {height:130px;width:100%;padding:0;margin:0}} @media (max-width:575px) {.podcastContainer {height:120px;width:100%;padding:0;margin:0}} .introPanelSpacing{margin-top: 30px;margin-bottom: 50px} @media (max-width:575px) {.introPanelSpacing{width:100%;padding-top: 20px;margin-top: 0px;margin-bottom: 25px;margin-left: 0px;margin-right: 0px}} img.helpIcon {margin-left:10px;width:16px;height:16px} @media (max-width:575px) {img.helpIcon {width:16px;height:16px}} div.mapContainer {width:80%;max-width:1000px;padding:0;margin:25px auto;border:solid 1px var(--contentBoxBorders);background-image:linear-gradient(to bottom right, rgba(102, 102, 102, 0), rgba(102, 102, 102, 0.1));box-shadow:5px 6px 3px #ccc} .flex-packageSummary {display: flex;gap: 5px;padding: 0;margin-top: 25px} .flex-packageSummary > div {width: 33%;margin: 0 auto;padding: 0} .flex-packageSummaryCols {display: flex;padding:50px;margin: 20px 0 0 0} .flex-packageSummaryCols > div {width: 100%;margin: 0;padding: 3px 3px 3px 10px;color: black;font-size: 0.916667em} div.packageSummaryDisplay {padding: 10px 15px 15px 15px;height: 380px} .flex-comparePanel,.flex-comparePanelLower {display: flex;gap: 5px;padding: 0;margin-top: 25px} .flex-comparePanel > div, .flex-comparePanelLower > div{width: 33%;margin: 0 auto;padding: 0} .flex-comparePanelLower {margin-top:0} .flex-compareColumns {display: flex;flex-direction: column;margin: 20px 0 0 0} .flex-compareColumns > div {width: 100%;margin: 0;padding: 3px 5px 3px 10px;color: black;font-size: 0.916667em} .chatbotAddOn {border: solid 1px #333;margin-top: 15px;margin-bottom: 15px;padding: 10px 15px} div.bronzeLevel1{background-color: var(--BronzePanelLev1)} div.bronzeLevel2{background-color: var(--BronzePanelLev2)} div.bronzeLevel3{background-color: var(--BronzePanelLev3)} div.bronzeLevel4{background-color: var(--BronzeBannerLev3)} div.bronzeBanner1{background-color: var(--BronzeBannerLev1)} div.bronzeBanner2{background-color: var(--BronzeBannerLev2)} div.bronzeBanner3{background-color: var(--BronzeBannerLev3)} div.silverLevel1{background-color: var(--SilverPanelLev1)} div.silverLevel2{background-color: var(--SilverPanelLev2)} div.silverLevel3{background-color: var(--SilverPanelLev3)} div.silverLevel4{background-color: var(--SilverBannerLev3)} div.silverBanner1{background-color: var(--SilverBannerLev1)} div.silverBanner2{background-color: var(--SilverBannerLev2)} div.silverBanner3{background-color: var(--SilverBannerLev3)} div.goldLevel1{background-color: var(--GoldPanelLev1)} div.goldLevel2{background-color: var(--GoldPanelLev2)} div.goldLevel3{background-color: var(--GoldPanelLev3)} div.goldLevel4{background-color: var(--GoldBannerLev3)} div.goldBanner1{background-color: var(--GoldBannerLev1)} div.goldBanner2{background-color: var(--GoldBannerLev2)} div.goldBanner3{background-color: var(--GoldBannerLev3)} .bronzeShading {background-image: linear-gradient(205deg, #efc79e 10%, rgb(191 149 59 / 4%) 20%, #e9c097 30%, #d5ac84 70%, rgb(211 168 74 / 33%) 80%, #f1c496 90%)} .silverShading {background-image: linear-gradient(205deg, #afafaf 10%, rgb(167 167 166 / 40%) 20%, #dfdfdf 30%, #a3a3a3bf 70%, rgb(223 223 223 / 40%) 80%, #a7a7a7 90%)} .goldShading {background-image: linear-gradient(205deg, #ff8e1eb3 10%, rgb(255 222 150 / 77%) 20%, #ff9b38a6 30%, #f7c797 70%, rgba(237, 192, 94, 0.4) 80%, #ef953cad 90%)} a.bronzeLevel1{background-color: rgba(205,127,50,0.7);color:#111} a.silverLevel1{background-color: rgba(192,192,192,0.9);color:#111} a.goldLevel1{background-color: rgba(255,198,3,0.9);color:#111} a.bronzeLevel1:hover{background-color: rgba(205,127,50,0.5);color:#666} a.silverLevel1:hover{background-color: rgba(192,192,192,0.5);color:#666} a.goldLevel1:hover{background-color: rgba(255,214,13,0.5);color:#666} .checkSymbolsY {font-weight:400; color: #099; font-size: 0.916667em; margin: 1px 3px 1px 1px} .checkSymbolsX {font-weight:400; color: #f00; font-size: 0.916667em; margin: 1px 3px 1px 1px} div.topColumnSummaryContainer {height:265px;padding-top:2px;border-bottom:solid 2px #6663} @media (max-width:575px) { div.topColumnSummaryContainer {height:auto;padding:15px 8px} } @media (max-width:801px){ .flex-packageSummary {display: flex;flex-direction: column;gap: 20px;margin-top:20px} .flex-packageSummary > div {width: 100%;margin: 0} .flex-packageSummaryCols {display: flex;flex-direction: column;padding:50px;margin: 20px 0 0 0} .flex-packageSummaryCols > div {margin: 0;padding: 5px 2px 5px 6px} div.packageSummaryDisplay {padding: 10px; height:auto} .flex-comparePanel {display: flex;flex-direction: column;gap: 20px;margin-top: 15px} .flex-comparePanel > div {width: 100%;margin: 0} .flex-comparePanelLower {display:none} .flex-compareColumns > div {margin: 0;padding: 5px 3px 5px 7px;font-size: 1em} } .checkSymbolsY,.checkSymbolsX {font-size: 1.0em; margin: 1px 3px 1px 1px} .fixedPriceFeatures {padding-left:30px} @media (max-width:575px) {.fixedPriceFeatures {padding-left:10px}} .promoPanelx2 {display: flex;margin: 10px 0;padding: 0;background-color:var(--col4);background-image: linear-gradient(205deg, #005773 10%, rgb(255 255 255 / 3%) 20%, #005773 30%, #005773 70%, rgb(255 255 255 / 5%) 80%, #005773 90%);border-radius: 12px} .promoPanelx2 > .div1,.promoPanelx2 > .div2 {width:50%;margin: 15px;padding: 10px} .promoPanelx2 > .div2 {padding: 15px 20px;align-content: left;background-color: rgb(255 255 255 / 20%);border-radius: 8px} .promoButton {background: var(--col3);border: solid 1px var(--buttonBorderWhite);border-radius: 8px;cursor: pointer;text-decoration: none;color: #eee;transition: .5s;margin: 5px 0 5px 10px;padding: 5px 16px} .promoButton:hover {background: var(--col4);color: #eee} @media (max-width:575px) { .promoPanelx2 {display: flex;flex-direction: column;margin: 10px 5px;background-color:var(--col4);background-image: linear-gradient(205deg,#005773 10%,rgb(255 255 255 / 3%) 20%,#005773 30%,#005773 70%,rgb(255 255 255 / 5%) 80%,#005773 90%);border-radius: 12px} .promoPanelx2 > .div1,.promoPanelx2 > .div2 {width:96%;margin: 0px auto 7px auto;padding: 10px} .promoPanelx2 > .div2 {padding: 8px 8px;align-content: left;background-color: rgb(255 255 255 / 20%);border-radius: 8px} .promoButton {margin: 8px 0 8px 22px;padding: 5px 16px} } .voiceFlowCreatorPanelv1 {display: flex;margin: 10px} .voiceFlowCreatorPanelv1 > .div1 {width:25%;margin: 15px;padding: 10px} .voiceFlowCreatorPanelv1 > .div2 {width:75%;padding: 15px 20px;align-content: left} .voiceFlowCreatorPanelv2 {display: flex;margin: 10px;background-color:var(--col3);background-image: linear-gradient(205deg,#005773 10%,rgb(255 255 255 / 3%) 20%,#005773 30%,#005773 70%,rgb(255 255 255 / 5%) 80%,#005773 90%);border-radius: 12px} .voiceFlowCreatorPanelv2 > .div1 {width:30%;margin: 15px;padding: 10px} .voiceFlowCreatorPanelv2 > .div2 {width:70%;padding: 15px 20px;align-content: left;background-color: rgb(255 255 255 / 20%);border-radius: 8px} .VFimage {width: 16vw;margin: 0 auto} .VFbuttonLogo {width: 25px;margin: 16px 5px 20px 10px} @media (max-width:575px) { .voiceFlowCreatorPanelv1 {display: flex;flex-direction: column;margin: 10px} .voiceFlowCreatorPanelv1 > .div1,.voiceFlowCreatorPanelv1 > .div2 {width:96%;align-content:center;margin: 0px auto 7px auto;padding: 10px} .voiceFlowCreatorPanelv1 > .div2 {padding: 5px 3px;padding: 5px 3px;align-content: left} .voiceFlowCreatorPanelv2 {display: flex;flex-direction: column;margin: 10px;background-color:var(--col3);background-image: linear-gradient(205deg,#005773 10%,rgb(255 255 255 / 3%) 20%,#005773 30%,#005773 70%,rgb(255 255 255 / 5%) 80%,#005773 90%);border-radius: 12px} .voiceFlowCreatorPanelv2 > .div1,.voiceFlowCreatorPanelv2 > .div2 {width:96%;align-content:center;margin: 0px auto 7px auto;padding: 10px} .voiceFlowCreatorPanelv2 > .div2 {padding: 5px 3px;align-content: left;background-color: rgb(255 255 255 / 20%);border-radius: 8px} .VFimage {width: 75vw;align-items:center} } .articlePanelHeight {height:6400px} @media (max-width:575px) {.articlePanelHeight {height:9800px}} .listBreak::after {content: "\A";white-space: pre;display: block;line-height:70%} @media (max-width:575px) { .mobBreak::after {content: "\A";white-space: pre;display: block;line-height:120%} .mobBreak2::after {content: "\A";white-space: pre;display: block;line-height:180%} } ul.featureDescription > li{padding: 0 5px 10px 15px} .featureSubHeading {color:var(--fntDrk);font-weight:700} .paymentPlanBreakdown {color:#333;padding:2px 2px 2px 10px;line-height:150%} .paymentPlansContentPanel {padding: 1px 5px 5px 10px} .paymentPlanContent {color: #ddd} .paymentPlanContentBreakdown {color: #ddd;padding-left:40px; padding-bottom: 15px} @media (max-width:575px) { .paymentPlanBreakdown {padding:2px 2px 2px 2px} .paymentPlansContentPanel {padding: 5px 5px 5px 5px} .paymentPlanContentBreakdown {padding-left:10px} } .info-section {max-height: 0;overflow: hidden;opacity: 0;transition: max-height 0.8s ease, opacity 0.8s ease} .info-section.open {max-height: 1500px;opacity: 1} @media (max-width:575px) {.info-section.open {height:auto;max-height: 2000px;opacity: 1}} .heading {cursor: pointer;margin: 1px 0;line-height:180%;font-weight: bold;color: #22598f} .heading:hover {color: #fba621} .headingRow {display: flex;width:100%;padding:0} .headingRow>div.linkDiv { width:75%;margin:0 auto 5px 15px;padding:0px;float:left} @media (max-width:575px) {.headingRow>div.linkDiv {width:70%;margin:0 auto 5px 5px}} .headingRowSingle {display: flex;width:100%;padding:0} .headingRowSingle>div {width:99%;margin:5px auto;padding:0px} @media (max-width:575px) {.headingRowSingle>div {width:100%}} div.packageFlag {display:flex;float:right;padding:0} div.packageFlag>div {width:30px;color:black;padding:0;font-size:0.8333em} .bronzeY {background-color: var(--BronzeBannerLev3)} .bronzeN {background-color: rgba(205, 127, 50, 0.2)} .silverY {background-color: var(--SilverBannerLev3)} .silverN {background-color: rgba(192, 192, 192, 0.2)} .goldY {background-color: var(--GoldBannerLev3)} .goldN {background-color: rgba(251,166,33, 0.2)} div.paymentPlansContentPanel > h3 {color:#333} div.paymentPlansContentPanel > p {color:#333} div.paymentPlansContentPanel > h3 {color:#333} div.paymentPlansContentPanel > ul > li {color:#333} div.otherStuff {padding-top:0px;padding-left:300px;margin-top:30px} @media (max-width:575px) {div.otherStuff {padding-left:0px;margin-top:10px}} /* PADDING & MARGIN CONTROL */ .noPaddingTop {padding-top:0} .noMarginTop {margin-top:0} .noPaddingBot {padding-bottom:0} .noMarginBot {margin-bottom:0} .busy {opacity: 0.4;pointer-events: none;transition: 0.5} .bulletStyle {color:#ffd60d;padding-left:3px;padding-right:4px} .bundle3Container {width: 100%;max-width: 1200px;padding: 0 0 12px 0;margin: 5px auto 5px auto} .packageContainer {width: 100%;max-width: 1200px;padding: 0 0 12px 0;margin: 5px auto 5px auto} .bundle3Cells {display:flex} .bundle3Cells > div {background-color: #fff;width:50%;margin: 0px;padding: 0px} .packageCells {display:flex} .packageCells > div {background-color: #fff;width:100%;margin: 0px;padding: 20px 0px 0px 0px} @media (max-width:575px) { .bundle3Cells {flex-direction: column-reverse} .bundle3Cells > div {background-color: #fff;width:100%; margin: 0px;padding: 20px} .packageCells {flex-direction: column-reverse} .packageCells > div {background-color: #fff;width:100%;margin: 0px;padding: 100px} } .bundle3Display, .packageDisplay {display:none; padding-top:15px} @media (max-width:575px) {.packageDisplay {display:none; padding-top:0px; margin-top:0px; padding-bottom:0px; margin-bottom:0px}} .slideshow3container {position: relative;margin: auto} .selector3Container {text-align:center;margin:0;padding:0;white-space: nowrap} .bundle3Selector,.packageSelector {cursor: pointer;height: 40px;width: 34%;margin: 0;padding: 6px 0 0 0;background-color: #ccc;color:#fff;font-size:20px;font-weight:700;display: inline-block;border:solid 1px #000;transition: background-color 0.9s ease} .bundle3SelectorBronze {border-right:none;background-color: var(--BronzeBannerLev3);width: 33%} .packageSelectorBronze {border-right:none;background-color: var(--BronzeBannerLev3);width: 32.5%} .bundle3SelectorSilver {border-right:none;background-color: var(--SilverBannerLev3);width: 33%} .packageSelectorSilver {border-right:none;background-color: var(--SilverBannerLev3);width: 32.5%} .bundle3SelectorGold {background-color: var(--GoldBannerLev3);width: 33%} .packageSelectorGold {background-color: var(--GoldBannerLev3);width: 32.5%} @media (max-width:575px) { .bundle3Selector, .packageSelector {width: 32%;margin: 0;padding: 3px 0 0 0} .bundle3SelectorBronze {border-right:none;width: 32%} .packageSelectorBronze {border-right:none;width: 32%} .bundle3SelectorSilver {border-right:solid 1px #000;width: 32%} .packageSelectorSilver {border-right:solid 1px #000;width: 32%} .bundle3SelectorGold {border-left:none;width: 32%} .packageSelectorGold {border-left:none;width: 32%} } .packageExclusions {color:#666} .active3Bundle, .activePackage {background-color: transparent;color:#000} .bundle3Selector:hover, .packageSelector:hover {background-color: #42607f;color:#fff} .bundle3Heading{display:inline;color: #22598f;margin:0} .questionnaireContent,.questionnaireOptions{color: #22598f;font-weight:700;font-size:1.0833em;padding-left:15px} .questionnaireOptions{padding-left:25px} @media (max-width:575px) { .questionnaireContent{padding-left:12px} .questionnaireOptions{padding-left:12px;white-space:nowrap;padding-left:15px} } div.bundle3ContentContainer, div.packageContentContainer {width:99.7%;height: 26vw;min-height: 660px;max-width: 1200px;margin: 1px 1px;padding: 0;background:#fff} div.packageContentContainer {height: 26vw;margin-top:0px;min-height: 820px} @media (max-width:575px) { div.bundle3ContentContainer, div.packageContentContainer {width:100%;margin: 15px auto 0 auto;padding: 5px 2px 0 2px;background:white;max-height: unset;height: auto;border:unset;border-radius:unset;box-shadow:unset} .prevImage,.nextImage,.text {background:#ccc;font-size: 14px;padding:4px 6px} .prevImage:hover, .nextImage:hover {color: #333;background:#eee} } .CTA {color: #ffd60d} .contactRepeater {margin: 35px 0 25px 0} .symbolSize1 {font-size:1.1666em;margin: 0 5px 0 0} @media (max-width:575px) {.symbolSize1 {font-size:1.5em;margin: 0 5px 0 0}} h3.featureTitle {font-size:20px} .feature-modal {display:none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.6)} .feature-modal-content {background: #fff;margin: 5% auto;padding: 20px;border-radius: 8px;width: 90%;max-width: 800px;max-height: 85vh;overflow-y: auto;box-shadow: 0 4px 12px rgba(0,0,0,0.3)} @media (max-width:575px) {.feature-modal-content {padding: 5px;width: 94%}} .feature-modal-close {color: #eee;float: right;font-size: 22px;padding:1px 2px 0 0;font-weight: bold;cursor: pointer} .feature-modal-close:hover {color: #fba621} @media (max-width:575px) {.feature-modal-close {font-size: 18px;padding:0 3px 0 0}} .feature-modal-body p {margin-bottom: 1em} .featureLink {cursor: pointer;color: #0077cc;font-weight: bold} .featureLink:hover {color: #e78e04} .faqModalQuestion {padding:25px 10px 10px 6px;color:#fff} @media (max-width:575px) {padding:25px 3px 5px 3px} .faq-modal {display:none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.6)} .faq-modal-content {background: #fff;margin: 5% auto;padding: 20px;border-radius: 8px;width: 90%;max-width: 740px;max-height: 70vh;overflow-y: auto;box-shadow: 0 4px 12px rgba(0,0,0,0.3)} @media (max-width:575px) {.faq-modal-content {background: #fff;margin: 5% auto;padding: 6px;border-radius: 8px;width: 94%;max-width: 740px;max-height: 70vh;overflow-y: auto;box-shadow: 0 4px 12px rgba(0,0,0,0.3)}} .faq-modal-close {color: #ccc;float: right;font-size: 18px;font-weight: bold;cursor: pointer} .faq-modal-close:hover {color: #fba621} @media (max-width:575px) {.faq-modal-close {font-size: 13px;padding-right:10px}} .faq-modal-body p {margin-bottom: 10px} @media (max-width:575px) {.faq-modal-body p {margin-bottom: 8px}} .modalTopBanner {background-color:var(--col3);padding:5px 10px 5px 15px;margin-bottom:10px} @media (max-width:575px) {.modalTopBanner {padding:6px 3px 4px 7px;margin-bottom:6px}} /* targaCssForms.css */ input[type=text],textarea{width:100%;padding:10px 10px;margin:1px 0 15px 0;display:inline-block;border:2px solid var(--col2);border-radius:4px;box-sizing:border-box;background-color:#eee;color:#666} input[type=message],textarea{width:100%;height:150px;padding:10px 10px;margin:1px 0 15px 0;display:inline-block;border:2px solid var(--col2);border-radius:4px;box-sizing:border-box;background-color:#eee;color:#666} input[type=number]{width:100%;padding:10px 10px;margin:1px 0 15px 0;display:inline-block;border:1px solid var(--col2);border-radius:4px;box-sizing:border-box;background-color:#eee} input[type=email]{width:100%;padding:10px 10px;margin:1px 0 15px 0;display:inline-block;border:1px solid var(--col2);border-radius:4px;box-sizing:border-box;background-color:#eee} input[type=text]:focus{border:1px solid var(--col2);background-color:#eee} input[type=button], input[type=reset], input[type=submit]{background:var(--col3);margin:1px 0 15px 0;padding:5px 18px;border:solid 1px var(--col1);border-radius:8px;cursor:pointer;text-decoration:none;font-size:1.0em;font-weight: 500;letter-spacing: 1px;color:#fff;transition: 0.7s} input[type=submit]:hover{background:var(--col3);transition: 0.5;color:#fff} a:link.blockedForm,a:visited.blockedForm{background:var(--col2);margin:1px 0 15px 0;padding:5px 18px;border:solid 1px var(--colLit);border-radius:8px;cursor:pointer;text-decoration:none;font-size:1.0em;color:#fff} a:hover.blockedForm{background:red;color:#fff} .formLabel{font-weight:700;margin:0} .securityCode{color:#fff;letter-spacing:3px;padding-left:5px} @media (max-width:575px){.recaptchaSize{transform:scale(.8);-webkit-transform:scale(.8);transform-origin:0 0;-webkit-transform-origin:0 0}} .selectDD {width:300px;height:40px;font-size:14px;padding: 10px 10px;margin: 1px 0 15px 0;display: inline-block;border: 2px solid var(--col2);border-radius: 4px;box-sizing: border-box;background-color: #eee;color: #666} .calc-container {display:flex;width:100%} .calc-container > div {margin: 2px;padding: 6px 20px} .calcCol1{width:65%} .calcCol2{width: 35%} .quote-container {display: flex;background-color:transparent;width:99%;padding:0 0 1px 30px} .quote-container > div {background-color:#eee;margin: 2px;padding: 2px 20px;color: #333} .quoteCol1{width:60%} .quoteCol2{width:40%} .quoteCol3{width: 20%;text-align:right} @media (max-width:575px){ .selectDD {width:280px;height:40px;border: 2px solid var(--col2);font-size:1.0em;color: #666;background-color:#eee;border-radius:4px;margin: 1px 0 15px 0} .calc-container {display:flex;flex-direction:column;width:100%} .calc-container > div {margin: 0px;padding: 5px 10px} .calcCol1{width:100%} .calcCol2{width:100%;align-items:right;padding:0 0 50px 100px; right:0} .quote-container {display: flex;flex-direction:column;background-color:#ccc;width: 100%; border: solid 1px #099; margin:0 0 15px 0} .quote-container > div {background-color:#ccc;margin:2px;padding:0 10px;color: #333} .quoteCol1{width:95%;font-size:1.1666em;font-weight:700} .quoteCol2{width: 95%;padding:0 50px} .quoteCol3{width: 95%; font-weight: 700; font-size: 1.3333em} } .formError{color:#cc0000} /* targaNavDesk.css */ .contactBar>div{margin:2px;padding:2px} .topContactInfoDesk{position:fixed;width:100%;margin:6px auto 4px auto;top:0;left:0;z-index:400;background-color:#000;background-image: linear-gradient(to bottom right, rgb(0, 87, 115, 0.9), rgb(1, 77, 102, 9.5));border-bottom: solid 1px #fff;text-align:center;align-items:center;padding:65px 20px 5px 20px} .subMenuItems{position:fixed;width:100%;margin:6px auto 4px auto;top:0;left:0;z-index:400;background-color:var(--col2);background-image: linear-gradient(to bottom right, rgb(0, 87, 115, 0.9), rgb(1, 77, 102, 9.5));border-bottom:solid 1px #fff;align-items:center;padding:65px 20px 5px 20px} .navContainer{width:98%;margin:0 auto} .navContainerLP{width:98%;margin:0 auto} .nav2ndLevel{width:98%;max-width:1400px;margin:0 auto} .nav-menu,.nav-menu a,.nav-menu li,.nav-menu ul{margin:0;padding:0;line-height:normal;list-style:none;display:block;position:relative} .nav-subMenu,.nav-subMenu a,.nav-subMenu li,.nav-subMenu ul{margin:0 auto;padding:0;line-height:normal;list-style:none;display:block;position:relative} .nav-menu ul{opacity:0;position:absolute;top:100%;left:-9999px;z-index:999;-webkit-transition:opacity .3s;transition:opacity .3s} .nav-subMenu ul{opacity:0;position:absolute;top:100%;left:-9999px;z-index:999;-webkit-transition:opacity .3s;transition:opacity .3s} .nav-menu li:hover>ul{left:0;opacity:1;z-index:20;box-shadow:5px 5px 10px rgba(153,153,153,.25)} .nav-subMenu li:hover>ul{left:0;opacity:1;z-index:20;color:var(--navHover);box-shadow:5px 5px 10px rgba(153,153,153,.25)} .nav-menu li{cursor:default;float:left;white-space:nowrap} .nav-subMenu li{cursor:default;float:left;white-space:nowrap} .nav-menu ul li{float:none} .nav-subMenu ul li{float:none} .nav-menu ul{min-width:12em;color:red;-webkit-box-shadow:2px 2px 2px rgba(153,153,153,.25);box-shadow:10px 10px 10px rgba(153,153,153,.25)} .nav-subMenu ul{ min-width:12em; color:orange; -webkit-box-shadow:2px 2px 2px rgba(153,153,153,.25); box-shadow:10px 10px 10px rgba(153,153,153,.25) } .nav-right{float:right} .nav-middle{display:flex;align-content: center;align-items: center;width: 90%;margin: 0 auto} .nav-menu a{padding:2px 20px 0 6px;color:#fff;font-weight:400;font-size:1.25em;line-height:40px;text-decoration:none;text-shadow:3px 3px 3px #333;background-color:transparent;z-index:1000} .nav-subMenu a, .nav-subMenuSelected a{padding: 3px 5px;margin: 0 10px;color:#EEE;font-weight:400;font-size:1.25em;line-height:40px;text-decoration:none;text-shadow:3px 3px 3px #333;background-color:transparent;z-index:1000} .nav-subMenuSelected a{color:#d0d} .nav-menu>li>.nav-active{background-color:rgba(c,255,c,.9)} .nav-subMenu>li>.nav-active{background-color:rgba(c,255,c,.9)} .nav-menu a:focus, .nav-menu a:hover, .nav-menu li:hover a{background:var(--col1);color:var(--navHover);text-shadow:2px 2px 2px #111;transition:.5s;background-color:transparent;border-bottom:solid 0 transparent;margin-bottom:0} .nav-subMenu a:focus, .nav-subMenu a:hover, .nav-subMenu li:hover a{background:var(--col1);color:#ccc;color:var(--navHover);text-shadow:2px 2px 2px #111;transition:.5s;background-color:transparent;border-bottom:solid 0 transparent;margin-bottom:0} .nav-menu li li a, .nav-menu li:hover li a{padding:9px 10px;background: #333;background-image: linear-gradient(to top right, rgba(0, 87, 115, .8), rgba(0, 87, 115, .3));color:#ddd;text-shadow:3px 3px 3px #333;font-size:1.1666em;line-height:140%;border-right:solid 1px #eee;border-bottom:solid 1px #eee;border-left:solid 1px #eee} /* sub menu dropdown items */ .nav-subMenu li li a, .nav-subMenu li:hover li a{padding:9px 10px;background:rgba(50,50,50,.9);color:#eee;text-shadow:3px 3px 3px #333;font-size:1.1666em;line-height:140%;border-right:solid 1px #666;border-bottom:solid 1px #666;border-left:solid 1px #666;box-shadow:15px 8px 30px rgba(000,000,000,.8)} li.navTop{margin-top:13px} li.navTopSub{margin-top:6px} .nav-menu li:hover li a:focus, .nav-menu li:hover li a:hover, .nav-menu li:hover li:hover a{background: var(--col4);color:#eee;border-right:solid 1px #FFF;border-bottom:solid 1px #FFF;border-left:solid 1px #FFF;transition:.3s} .nav-subMenu li:hover li a:focus, .nav-subMenu li:hover li a:hover, .nav-subMenu li:hover li:hover a{background:linear-gradient(to bottom right,rgba(24,63,102,.9),rgba(24,63,102,1));color:#fff;color:var(--navHover);border-right:solid 1px #666;border-bottom:solid 1px #666;border-left:solid 1px #666;transition:.3s} /* NEW Align submenu of the Info menu to the right */ .nav-menu li.alignRight:hover > ul {left: auto;right: 0} .nav-menu li.alignRight > ul {text-align: right} li.subMenuActive {color:red} /* targaNavMob.css */ *,:after,:before{box-sizing:border-box}label .menu{position:absolute;z-index:100;right:-70px;top:-65px;width:115px;height:115px;border-radius:8px 8px 8px 8px;-webkit-transition:.8s ease-in-out;transition:.8s ease-in-out;box-shadow:0 0 0 0 var(--col1),0 0 0 0 var(--col2);cursor:pointer;background:0 0}label .iconBar{position:absolute;top:90px;left:10px;width:26px;height:2px;background:#fff;display:block;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}label .iconBar:after,label .iconBar:before{-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out;content:"";position:absolute;display:block;width:100%;height:100%;background:#fff}label .iconBar:before{top:-8px}label .iconBar:after{bottom:-8px}label input{display:none}label input:checked+.menu{box-shadow:0 0 0 100vw var(--col2),0 0 0 100vh var(--col2);border-radius:0;background:var(--col2)}label input:checked+.menu .iconBar{-webkit-transform:rotate(45deg);transform:rotate(45deg)}label input:checked+.menu .iconBar:after{-webkit-transform:rotate(90deg);transform:rotate(90deg);bottom:0}label input:checked+.menu .iconBar:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:0}label input:checked+.menu+ul{display:block;opacity:.8;color:#ccc}label ul{font-family:arial,helvetica,sans-serif;font-size:1.25em;z-index:200;position:absolute;color:#fff;width:100%;top:220px;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;display:none;-webkit-transition:1s 0s ease-in-out;transition:1s 0s ease-in-out;transition-delay:.5s}label a{margin:8px 0;color:#fff;text-decoration:none}label a:hover{color:#fff}a.selectedNo{color:#ccc;text-decoration:none} /* bundleContact.css */ .bundleContainer,.bundleContactContainerOuter {width: 100%;max-width: 1200px;padding: 0 0 12px 0;margin: 5px auto 5px auto} .bundleContactContainerOuter {margin: 50px auto 5px auto;border-right:solid 1px #22598f;border-bottom:solid 1px #22598f;border-left:solid 1px #22598f;box-shadow: 5px 6px 3px #ccc} .bundleCells {display:flex} .bundleCells > div {background-color: #fff;width:50%;margin: 10px;padding: 20px} .bundleContactCell1,.bundleContactCell2 {padding-top:40px;height: 1100px} .bundleContactCell2 {height: 600px} @media (max-width:575px) { .bundleCells {flex-direction: column-reverse} .bundleCells > div {background-color: #fff;width:100%;margin: 0px;padding: 20px} .bundleContactContainerOuter {margin: 30px 0 5px 0;border-right:solid 0px transparent;border-bottom:solid 0px transparent;border-left:solid 0px transparent;box-shadow: unset} .bundleContactCell {padding-top:20px} .bundleContactCell1,.bundleContactCell2 {padding-top:15px;height: 1650px} .bundleContactCell2 {height: 1150px} } .bundleDisplay {display:none} .selectorContainer {text-align:center;margin:0;padding:0;white-space: nowrap} .bundleSelector {cursor: pointer;height: 40px;width: 50%;margin: 0;padding: 6px 0 0 0;background-color: #ccc;color:var(--col3);font-size:20px;font-weight:700;display: inline-block;border:solid 1px #000;transition: background-color 0.9s ease} .activeBundle {background-color: var(--col3);color:#fff} .bundleSelector:hover {background-color: var(--col4);color:#fff} .bundleSelector1 {border-right:none;width: 49.5%} div.bundleContentContainer {width:99.7%;height: 26vw;max-height: 500px;min-height: 380px;max-width: 1200px;margin: 1px 1px;padding: 0;background:white} div.bundleContactContainer {width:99.7%;max-width: 1200px;margin: 1px 1px;padding: 0;background:white} @media (max-width:575px) { div.bundleContentContainer {width:96%;margin: 15px auto 5px auto;padding: 15px 2px;background:white;max-height: unset;height: auto;border:solid 1px var(--contentBoxBorders);border-radius:8px;box-shadow:5px 6px 3px #ccc} div.bundleContactContainer {width:99.7%;max-width: unset;margin: 1px 1px;padding: 0;background:white} .prevImage,.nextImage,.text {background:#ccc;font-size: 14px;padding:4px 6px} .prevImage:hover, .nextImage:hover {color: #333;background:#eee} } /* bundle-2.css */ .bundle2Container {width: 100%;max-width: 1200px;padding: 0 0 12px 0;margin: 5px auto 5px auto} .bundle2Cells {display:flex} .bundle2Cells > div {background-color: #fff;width:50%;margin: 10px;padding: 20px} @media (max-width:575px) { .bundle2Cells {flex-direction: column-reverse} .bundle2Cells > div {background-color: #fff;width:100%;margin: 0px;padding: 20px} } .bundle2Display {display:none} .slideshow2container {position: relative;margin: auto} .selector2Container {text-align:center;margin:0;padding:0;white-space: nowrap} .active2Bundle {background-color: #42607f;color:#fff} .bundle2Selector1 {border-right:none;width: 49.5%} .bundleHeading{display:inline;color: #22598f;margin:0} div.bundle2ContentContainer {width:99.7%;height: 26vw;max-height: 500px;min-height: 380px;max-width: 1200px;margin: 1px 1px;padding: 0;background:white} @media (max-width:575px) { div.bundle2ContentContainer {width:96%;margin: 15px auto 5px auto;padding: 15px 2px;background:white;max-height: unset;height: auto;border:solid 1px var(--contentBoxBorders);border-radius:8px;box-shadow:5px 6px 3px #ccc} .prevImage,.nextImage,.text {background:#ccc;font-size: 14px;padding:4px 6px} .prevImage:hover, .nextImage:hover {color: #333;background:#eee} } .slideshow3container {position: relative;margin: auto} .selector3Container {text-align:center;margin:0;padding:0;white-space: nowrap} @media (max-width:575px) { .bundle3Selector {width: 32%;margin: 0;padding: 3px 0 0 0} .bundle3Selector1 {border-right:none;width: 32%} .bundle3Selector2 {border-right:solid 1px #000;width: 32%} .bundle3Selector3 {border-left:none;width: 32%} } .active3Bundle {background-color: var(--col3);color:#fff} .bundle3Selector:hover {background-color: var(--col4);color:#fff} .bundle3Selector1 {border-right:none;width: 33%} .bundle3Selector3 {border-left:none;width: 33%} .bundle3Heading{display:inline;color: var(--col3);margin:0} div.bundle3ContentContainer {width:99.7%;height: 27vw;max-height: 500px;min-height: 380px;max-width: 1200px;margin: 1px 1px;padding: 0;background:#fff} div.bundle3ContentContainerAutoHeight {width:99.7%;height: auto;margin: 1px 1px;padding: 0;background:#fff} @media (max-width:575px) { div.bundle3ContentContainer {width:100%;margin: 15px auto 0 auto;padding: 5px 2px 0 2px;background:white;max-height: unset;height: auto;border:unset;border-radius:unset;box-shadow:unset} .prevImage,.nextImage,.text {background:#ccc;font-size: 14px;padding:4px 6px} .prevImage:hover, .nextImage:hover {color: #333;background:#eee} } img.bundleImage,img.bundleImageNoShad {display: block;width: 100%;height: auto;max-width: 900px;margin: 0;box-shadow: 5px 6px 3px #ccc} img.bundleImageNoShad {box-shadow: unset} /* targaCssLB.css */ .imageInContentDiv{max-width:100%;padding:0;margin:0} .thumbDisplayAll2,.thumbDisplayAll3{float:left;height:auto;margin:5px;z-index:1000} .thumbDisplayAll2{width:47%;height:auto} .thumbDisplayAll3{width:30%;height:auto} img.thumbNail{width:100%;height:auto;cursor:zoom-in;margin:3px;box-shadow:5px 5px 5px #999} img.thumbNail:hover{box-shadow:5px 5px 5px #666;opacity:.8} figcaption,figcaption.set2,figcaption.set3{color:var(--LBCaptionColour);font-size:0.9166em;font-style:italic;padding:4px;text-align:center;font-weight:400;clear:left} @media only screen and (max-width:575px){ .thumbDisplayAll2{width:100%;height:auto} .thumbDisplayAll3{width:100%;height:auto} .thumbMobNo{display:none}img .thumbNail{width:95%;height:auto;cursor:zoom-in;padding-right:0}figcaption.set2,figcaption.set3{display:none} } .lightBox{display:none;position:fixed;z-index:2000;padding-top:80px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.8)} .lightBox-content{position:relative;margin:auto;margin-bottom:0;padding:0;padding-bottom:0;width:95%;max-width:800px} @media only screen and (max-width:575px){.lightBox-content{position:relative;margin:auto;margin-bottom:0;padding:0;padding-bottom:0;width:100%;max-width:800px}} .closeButton{position:absolute;top:0;right:0;font-size:28px;color:#fff;font-weight:700;background-color:rgba(0,0,0,.5);padding:0 10px;border-radius:0 0 0 7px} .closeButton:focus,.closeButton:hover{color:#099;text-decoration:none;cursor:pointer;background:#ccc;transition:.4s ease} .mySlides{display:none} .next,.prev{cursor:pointer;position:absolute;bottom:0;width:auto;padding:10px 16px;margin-top:-50px;color:#fff;font-weight:700;font-size:20px;transition:.6s ease;border-radius:0 7px 0 0;user-select:none;-webkit-user-select:none;text-decoration:none;background-color:rgba(0,0,0,.5)} .next{right:0;border-radius:7px 0 0 0} .next:hover,.prev:hover{background:#ccc;transition:.4s ease;color:#099} img.slideOverlay{width:100%;height:auto;padding:0;margin:0} A:link.largeImageLink,A:visited.largeImageLink{font-size:9pt;color:#099;text-decoration:none;text-align:center;margin:0 auto} A:hover.largeImageLink{color:var(--col2)} @media only screen and (max-width:575px){ A:link.largeImageLink,A:visited.largeImageLink{color:var(--col1);text-decoration:none;text-align:center;margin:5 auto} A:hover.largeImageLink{color:var(--col2)}} /* carousel-1.css */ .imageDisplay {display:none} img {vertical-align: middle} /* Slideshow container */ .slideshow-container {max-width: 1000px;position: relative;margin: auto} /* Next & prevImageious buttons */ .prevImage, .nextImage {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -22px;color: #22598f;text-decoration:none;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none} /* Position the "nextImage button" to the right */ .nextImage {right: 0;border-radius: 3px 0 0 3px} /* On hover, add a black background color with a little bit see-through */ .prevImage:hover, .nextImage:hover {color: #ccc} /* The dots/bullets/indicators */ .imageSelector {cursor: pointer;height: 15px;width: 16px;margin: 0 3px;background-color: #ccc;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease} .activeImage, .imageSelector:hover {background-color: #22598f} /* Fading animation */ .fade {animation-name: fade;animation-duration: 4s} @keyframes fade { from {opacity: 0} to {opacity: 1} } div.carouselImageContainer {width:96%;max-width: 1000px;margin: 15px auto;padding: 15px 5px;background:white;height: 42vw;max-height: 500px;border:solid 1px var(--contentBoxBorders);border-radius:8px;box-shadow:5px 6px 3px #ccc} @media (max-width:575px) { div.carouselImageContainer {width:96%;margin: 15px auto 5px auto;padding: 15px 2px;background:white;height: 72vw;max-height: 500px;border:solid 1px var(--contentBoxBorders);border-radius:8px;box-shadow:5px 6px 3px #ccc} .prevImage, .nextImage, .text {background:#ccc;font-size: 14px;padding:4px 6px} .prevImage:hover, .nextImage:hover {color: #333;background:#eee} } /* scrollAnimation.css */ .revealH2{position:relative;transform:translateX(150px);opacity:0;transition: 2s all cubic-bezier(0.38, 0.02, 0.37, 1)} .revealH2.active{transform:translateX(0);opacity:1} @media (min-width:576px) AND (max-width:991px) {.revealH2,.revealBtnMobFixed{position:relative;transform:translateX(0px);opacity:1;transition:1s all ease}} @media (max-width:575px){.revealH2{position:relative;transform:translateY(40px);opacity:1;transition:1s all ease}} .revealText{position:relative;transform:translateY(80px);opacity:0;transition: 1s all cubic-bezier(0.16, 0.45, 0.44, 0.92)} .revealText.active{transform:translateY(0);opacity:1} /* INDENTS */ .indented {margin-left:20px} .indented0 {margin-left:0} .indented10 {margin-left:10px} .indented30 {margin-left:30px} .indented45 {margin-left:45px} .indented60 {margin-left:60px} .indentedUl {margin-left:10px} ul.indented {padding-left:15px;margin-top:0} @media screen and (max-width:575px) { .indentedUl {margin-left:0;padding-left:10px} .indented {margin-left:0} .indented0 {margin-left:0} .indented10 {margin-left:0;padding-left:10px} .indented30 {margin-left:10px} .indented45 {margin-left:10px} .indented60 {margin-left:0} ul.indented {margin-left:0;padding-left:5px} ul.indented>li {margin-left:0;padding-left:4px} ul.indented30, ul.indented45 {margin-left:8px;padding-left:13px} }