body { /* centene.com styles */ .centene { &-h1 { margin: 20px 0; font-family: 'Roboto-Light', sans-serif; font-size: 60px; font-weight: 300; } &-h2 { margin: 30px 0; font-family: 'Roboto-Regular', sans-serif; font-size: 45px; font-weight: 400; } &-h3 { margin: 22px 0; font-family: 'Roboto-Regular', sans-serif; font-size: 34px; font-weight: 400; } &-h4 { font-family: 'Roboto-Italic', sans-serif; font-size: 25px; font-weight: 400; } &-h5 { font-family: 'Roboto-Bold', sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase; } } .rd-ambetter-content { /* redesign doc colors matched to LESS variables: Ambetter Reaspberry (Primary) -> @brand-raspberry Teal (Secondary) -> @ambetter-teal Orange (Tertiary) -> @redesign-orange Gray (Message Bar) -> @darker-grey */ //This code ensures that the color box will stack when in the ambetterredesign .background-color-box { padding-left: 10%; padding-right: 10%; margin-bottom: 0px; } background-color: @light-white; font-family: 'Roboto', sans-serif; h1 { width: 100%; line-height: 48px; } .d-55-m-36 { font-size: 55px; } .rd-t-36, .hero { font-size: 36px; } .rd-t-32, h1 { font-size: 32px; } .rd-t-29, .subtitle, h2 { font-size: 29px; } .m-24 { font-size: 24px; } .d-55-m-36-slab { font-size: 55px; font-family: 'Roboto Slab', sans-serif; } .rd-t-36-slab { font-size: 36px; font-family: 'Roboto Slab', sans-serif; } .rd-t-32-slab { font-size: 32px; font-family: 'Roboto Slab', sans-serif; } .rd-t-29-slab { font-size: 29px; font-family: 'Roboto Slab', sans-serif; } .m-24-slab { font-size: 24px; font-family: 'Roboto Slab', sans-serif; } .rd-t-23-slab { font-size: 23px; font-family: 'Roboto Slab', sans-serif; } .rd-t-23, .small-subtitle, h3 { font-size: 23px; } .rd-t-20-bold, h4 { font-size: 20px; font-weight: 600; } .rd-t-20-standard, .body-text-large { font-size: 20px; } .rd-t-18-bold, h5 { font-size: 18px; font-weight: 600; } .rd-t-18-standard, p { font-size: 18px; } .rd-t-16, .body-text-small, .rd-label, .help-text, .m-16 { font-size: 16px; } .blueberry { a { color: @brand-blueberry } } .brand-color { color: @brand-color } .celticblue { a { color: @brand-celticblue } } .grape { a { color: @brand-grape } } .yelloworange { a { color: @ambetter-yelloworange } } .healthnetgreen { a { color: @brand-healthnetgreen } } .lime { a { color: @brand-lime } } .mint { a { color: @brand-mint } } .navy { a { color: @brand-navy } } .orange { a { color: @brand-orange } } .raspberry { a { color: @brand-raspberry } } .teal-ambetter { a { color: @ambetter-teal } } .white { a { color: @white } } iframe { border: none; } img { &.circle-crop { border-radius: 50%; } &.rounded-corners { border-radius: 7px; } &.box-shadow { -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1); margin: 16px 21px 27px 21px; max-width: -webkit-fill-available; } } .richtext { a:not(.btn):not(.button):not([href^="tel"]):not(.acc-title) { color: @light-blue; text-decoration: underline; text-shadow: -0.1px -0.1px 0 transparent, 0.1px 0.1px transparent; } a:hover:not(.btn):not(.button):not([href^="tel"]):not(.acc-title) { text-shadow: -0.1px -0.1px 0 @light-blue, 0.1px 0.1px @light-blue; } ul { margin: 0 0 10px 23px; font-size: 18px; } ul>li { padding: 0 0 5px 25px; } ul>li:before { top: 6px; left: 0px; width: 10px; height: 10px; background: @brand-color; } ol>li { padding: 5px 0 10px 15px; } ol>li:before { font-size: @default-font-size; } } } .rd-ambetter-content { #default-year, #toggle-year { >.richtext { width: 90%; margin: auto; } } } .rd-landing-top-bar, .rd-top-bar { font-size: 16px; background-color: @lightest-grey; color: @darker-grey; font-family: 'Roboto', sans-serif; .super-nav { margin: 0; border-right: 1px solid @darker-grey; #top-menu { text-align: right; padding-right: 0px; .top-navigation{ li:last-child a:link { margin-right: 0px; } } } .top-menu-button{ margin-right: 0px; } .top-menu-dropdown{ text-align: left; } ul { margin: 0px; } } .bar-content { padding: 10px; a:link { color: @darker-grey; } a:hover { text-decoration: underline; color: @darker-grey; text-shadow: -0.1px -0.1px 0 #006dc1, 0.1px 0.1px #006dc1; } .richtext { text-align: left; } .richtext a:not(.btn):not(.button):not([href^="tel"]):not(.acc-title) { color: @darker-grey; text-decoration: none; } .richtext a:hover:not(.btn):not(.button):not([href^="tel"]):not(.acc-title) { text-decoration: underline; } .ambetter-language-text { a { margin-left: 10px; } } } .size-selector { text-align: center; padding: 1px; .large-text, .medium-text, .small-text { margin-right: 0px; a { color: @darker-grey; } a:hover { text-shadow: -0.1px -0.1px 0 #006dc1, 0.1px 0.1px #006dc1; } } } } .rd-main-header { font-size: 16px; background-color: @white; text-align: center; >div { height: inherit; } .with-border { padding-left: 0px; } span.brand-color, span.brand-color-slab { color: @brand-color; font-weight: 400; } span.brand-color-slab { font-family: 'Roboto Slab', sans-serif; } .ambetter-header-left-nav, .product-main-navigation { height: 70px; text-align: right; display: table; float: right; ul.parent-nav { display: table-row; float: right; border-spacing: 10px 0px; li.top-level { display: table-cell; text-align: center; vertical-align: top; a { display: inline-block; color: @darker-grey; } a:hover { color: @brand-color; text-decoration: underline; } ul.dropdown-menu { //max-content isn't IE compatible! width: max-content; left: -25px; -webkit-box-shadow: 0 12px 12px rgba(0, 0, 0, 0.075); box-shadow: 0 12px 12px rgba(0, 0, 0, 0.075); >li { padding: 0 25px 0 25px; span { padding-bottom: 15px; } ul.column-menu { li { padding-bottom: 8px; a { line-height: 16px; } } } } li.col-md-12 { width: 50%; } } } .button { border: 2px solid @brand-color; border-radius: 20px; padding: 7px 10px; margin-top: -7px; background-color: @white; } .button:hover { color: @white !important; background: @dark-grey; border: 2px solid @dark-grey; text-decoration: none; } } } .ambetter-header-right-nav { height: 70px; padding-top: 70px; ul { padding-left: 10px; li { padding-left: 18px; a { color: @darker-grey; display: inline-block; } a:hover { color: @brand-color; text-decoration: underline; } .button { border: 2px solid @brand-color; border-radius: 20px; padding: 10px 30px 10px 30px; transition: all .3s ease; } .button:hover { color: @white; background: @dark-grey; border: 2px solid @dark-grey; text-decoration: none; } } } } .left-logo, .center-logo { margin-top: 8px; z-index: 2; img { height: auto; } } .left-of-logo { padding-left: 0px; .ambetter-header-left-nav, .product-main-navigation { ul.parent-nav { padding-left: 0px; } } } .right-of-logo { padding-right: 0px; .ambetter-header-left-nav, .product-main-navigation { ul.parent-nav { padding-right: 0px; padding-left: 0px; } } } } .left-logo-header { .ambetter-header-right-nav { ul { li { a { padding-top: 10px; padding-bottom: 10px; } } } } } @media (min-width: 375px) { /* For Left Logo */ .center-logo, .left-logo { img { max-width: 175px; } } } @media (min-width: 768px) { /* For Left Logo */ .center-logo, .left-logo { img { max-width: 200px; } } } @media (min-width: 992px) { /* For Left Logo */ .left-logo { img { max-width: 200px; } } } @media (min-width: 1080px) { /* For Left Logo */ .left-logo { img { max-width: 220px; } } } @media (min-width: 1150px) { /* For Left Logo */ .left-logo { img { max-width: 240px; } } } @media (min-width: 1275px) { /* For Left Logo */ .left-logo { img { max-width: 260px; } } } @media (min-width: 1370px) { /* For Left Logo */ .left-logo { img { max-width: 300px; } } } .landing-header { ul { float: right; } } #ambetter-mobile-header #ambetter-mobile-menu, #ambetter-desktop-header, #product-mobile-header, #product-mobile-menu, #product-desktop-header { .ambetter-header-left-nav, .product-main-navigation, .product-secondary-menu { color: @darker-grey; ul.parent-nav { li.top-level { margin: 0; position: relative; a { &.dropdown-toggle { display: none; } .fa { width: 0px; color: transparent; &.link-external { width: fit-content; color: inherit; } } } ul.dropdown-menu { border: none; border-radius: 0px; padding: 25px 0 20px 0; >li { span { display: inline-block; font-weight: 600; } ul.column-menu { list-style-type: none; margin: 0; padding: 0; li { line-height: 24px; } } } } ul.show-table-style-nav { display: table; } } li.open { >a { color: @brand-color; text-decoration: underline; } } } ul.parent-nav:last-child { padding-right: 0px; } } .ambetter-header-right-nav { li { display: table-cell; margin: 0; vertical-align: middle; } } .search { .search-form-trigger.open { color: @brand-color !important; } } } #ambetter-desktop-header, #product-desktop-header { .rd-main-header.center-logo-header { height: 140px; .ambetter-header-left-nav, .product-main-navigation { padding-top: 70px; } .ambetter-header-right-nav { ul li { vertical-align: top; a { &.button { margin-top: -12px; } } } } } } .rd-main-header.left-logo-header { height: 100px; max-height: 100px; .ambetter-header-left-nav, .product-main-navigation { padding-top: 40px; } .ambetter-header-right-nav { padding-top: 28px; ul { padding-left: 10px; } } } .rd-main-header.left-logo-header:not(.landing-header) { .ambetter-header-right-nav { ul { li:first-child { border-left: 1px solid @brand-color; padding-left: 15px; } } } } #ambetter-mobile-header, #product-mobile-header { display: none; .rd-main-header { height: 60px; max-height: 60px; .center-logo { margin-top: 0px; a { img { margin: auto; max-height: 110px; width: auto; &.xs-only { display: inline; } } } } .left-logo { a { img { max-height: 75px; width: auto; &.xs-only { float: left; } } } } .mobile-menu-button { padding: 20px 0px; } } #modal-background { display: none; position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; padding-top: 100px; background-color: black; background-color: rgba(0, 0, 0, 0.6); -webkit-transition: 0.5s; overflow: auto; } #ambetter-mobile-menu, #product-mobile-menu { z-index: 9999; position: absolute; top: 0px; right: 0px; width: 90%; background-color: @white; .primary-menu { padding: 15px 5px 15px 30px; } .secondary-menu { padding: 15px 5px 15px 30px; background-color: @lightest-grey; } .navbar-toggle { margin-right: 0px; display: block; } .x-bar { display: block; background-color: @brand-color; position: relative; left: 1px; height: 2px; width: 26px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .x-bar:last-of-type { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: -2px; } a { color: @darker-grey; display: inline-block; } a:hover { color: @brand-color; text-decoration: underline; } .button { margin-bottom: 25px; border: 2px solid @brand-color; border-radius: 20px; padding: 10px 30px 10px 30px; transition: all .3s ease; } .button:hover { color: @white; background: @dark-grey; border: 2px solid @dark-grey; text-decoration: none; } .ambetter-header-left-nav, .product-main-navigation, .product-secondary-menu { ul.parent-nav { padding-left: 0px; margin-bottom: 0px; li.top-level { display: block; padding: 5px; ul.dropdown-menu { width: 100%; position: relative; z-index: 9999; float: none; -webkit-box-shadow: none; box-shadow: none; >li { float: left; font-size: 12px; span { padding-bottom: 5px; } ul.column-menu { li { padding-bottom: 5px; a { line-height: 14px; } } } } li.col-md-12 { width: 45%; } } } } } .ambetter-header-right-nav { ul { padding-left: 0px; li:last-child { display: none; } li { display: block; padding: 5px; } } } .topmenu { ul { padding-left: 0px; margin-bottom: 0px; li { display: block; padding: 5px; } } } .rd-size-selector { float: none; padding-left: 5px; .size-select-lg { margin-right: 3px; } } } } .rd-landing-content, .rd-content { background-color: @light-white; } .rd-landing-content>.richtext, .rd-content>.richtext, .rd-landing-content h1, .rd-content h1 { width: 90%; margin: auto; } .rd-landing-content h1, .rd-content h1 { color: @darker-grey; } .rd-landing-content>.richtext, .rd-content>.richtext { .d-55-m-36, .rd-t-36, .hero, .rd-t-32, h1, .rd-t-29, .subtitle, h2, .rd-t-23, .small-subtitle, h3, .rd-t-20-bold, h4, .rd-t-20-standard, .body-text-large, .rd-t-18-bold, h5, .rd-t-18-standard, p, .rd-t-16, .body-text-small, .rd-label, .help-text, ul, ol { color: @darker-grey; } .rd-t-36, .hero { line-height: 52px; } .rd-t-32, h1 { width: 100%; line-height: 48px; } .rd-t-29, .subtitle, h2 { line-height: 44px; } .rd-t-23, .small-subtitle, h3 { line-height: 40px; } .rd-t-20-bold, h4 { line-height: 32px; } .rd-t-20-standard, .body-text-large { line-height: 32px; } .rd-t-18-bold, h5 { line-height: 28px; } .rd-t-18-standard, p, ul { line-height: 28px; } .rd-t-16, .body-text-small, .rd-label, .help-text { line-height: 24px; } } .ambetterredesign-footer.lightBackground { background-color: @light-colored-grey; color: @darker-grey; .footerLinkList { ul { li, span { a { color: @darker-grey !important; } } } } } .ambetterredesign-footer.darkBackground { background-color: @darker-grey; color: @white; .footerLinkList { ul { li, span { a { color: @white !important; } } } } } .ambetterredesign-footer { /* Landing Footer */ padding-top: 25px; .abr-logo { img.xs-only { margin: auto; margin-bottom: 15px; } img.xs-hide { margin-bottom: 10px; } } .footer-content { padding: 0px 25px; } /* Standard Footer (link list in the dark grey) */ .footerLinkList { margin-top: 0px; padding-bottom: 0px; ul { overflow: auto; list-style-type: none; padding: 0px; text-align: center; margin-bottom: 15px; li, span { padding: 0px 1px; display: inline-block; a { font-size: 16px; line-height: 0px; font-family: 'Roboto-Regular', sans-serif; display: inline-block; } } } } .fine-print { padding-bottom: 15px; } .copyright, .fullDisclaimer, .excerpt, .rd-footerrichtext { margin-bottom: 10px; padding: 0 35px; p { font-size: 16px; margin-bottom: 0px; } } .copyright { text-align: center; } .fullDisclaimer, .excerpt, .rd-footerrichtext { text-align: left; a, span { font-size: 16px; text-decoration: underline !important; cursor: pointer; &:hover { text-decoration: underline !important; text-shadow: -0.1px -0.1px 0, 0.1px 0.1px; } } } .fullDisclaimer, .excerpt { &.notShowing { display: none; } p { display: contents; } } } /* Standard Footer */ .top-footer { padding: 30px; background: @ambetter-background-grey; .ambettersocial { display: flex; padding-top: 10px; border-top: 1px solid @darker-grey; align-items: center; .socialWrap { margin-left: auto; margin-top: -8px; } a { max-width: 40px; margin-right: 10px; display: inline-block; color: @ambetter-teal; width: 33%; float: left; } .topFooterBold { text-align: center; } .fa-facebook-square, .fa-twitter-square, .fa-youtube-square, .fa-instagram, .fa-linkedin-square { font-size: 48px; line-height: 60px; } } .ambettersocial.blueberry { a { color: @brand-blueberry } } .ambettersocial.brand-color { a { color: @brand-color } } .ambettersocial.celticblue { a { color: @brand-celticblue } } .ambettersocial.grape { a { color: @brand-grape } } .ambettersocial.yelloworange { a { color: @ambetter-yelloworange } } .ambettersocial.healthnetgreen { a { color: @brand-healthnetgreen } } .ambettersocial.lime { a { color: @brand-lime } } .ambettersocial.mint { a { color: @brand-mint } } .ambettersocial.navy { a { color: @brand-navy } } .ambettersocial.orange { a { color: @brand-orange } } .ambettersocial.raspberry { a { color: @brand-raspberry } } .ambettersocial.teal-ambetter { a { color: @ambetter-teal } } .ambettersocial.white { a { color: @white } } .abr-footer-rich { padding-top: 24px; text-align: left; p { font-size: 16px; } a { color: @ambetter-teal; } } .topFooterBold { font-size: 16px; line-height: 24px; font-family: 'Roboto-Bold', sans-serif; color: @darker-grey; } .footerLinkList, .languageAccess { margin-top: 0px; padding-bottom: 10px; border-bottom: 1px solid @darker-grey; ul { overflow: auto; list-style-type: none; padding: 0px; li { float: left; a { font-size: 16px; line-height: 24px; font-family: 'Roboto-Regular', sans-serif; display: inline-block; color: @darker-grey !important; } } } } .footerLinkList { margin-bottom: 5px; width: 100%; #footerlinks { width: 100%; } button.dropdown-toggle { height: 30px; width: 100%; color: @darker-grey; background: none; border: none; span { display: block; float: left; } .fa-chevron-down { float: right; margin-top: 4px; } } .dropdown-toggle:focus { outline: 1px dotted black; } ul.dropdown-menu { width: auto; margin-right: 10px; top: 27px; left: 10px; padding: 15px 0px; li { width: 95%; a { width: 100%; text-decoration: underline; font-family: 'Roboto-Regular', sans-serif; font-size: 16px; } } } } .languageAccess { margin-bottom: 20px; padding-top: 5px; ul li { margin-top: 5px; width: 33.3333%; } } } .pagebanner, .videobanner { .bannerWrap { p, h1, h2, h3, h4, h5, h6 { font-size: 34px; color: @white; font-family: 'Roboto Slab', sans-serif; text-align: center; margin-bottom: 20px; max-width: 425px; line-height: 1.1; } .bannerSubtext { p, h1, h2, h3, h4, h5, h6 { font-size: 16px; padding: 0px 25px; } a { color: white; text-decoration: underline; } } .buttonWrap { padding-bottom: 15px; .banner-btn { margin: auto; margin-bottom: 15px; padding: 7px 0px 5px 0px; } } } } .videobanner { .ambetter-redesign-video-banner, .videoWrap { position: relative; } #videobannervideo { width: 100%; max-width: 100%; min-height: 280px; object-fit: cover; } .bannerWrap { position: relative; width: 100%; margin-top: -5px; p, h1, h2, h3, h4, h5, h6 { margin: auto; padding: 0px 20px; padding-top: 20px; margin-bottom: 20px; font-size: 30px; } .buttonWrap { .banner-btn { width: 100%; max-width: 320px; } } } #pause { position: absolute; bottom: 20px; right: 57px; background: @dark-grey; color: white; padding: 10px; border-radius: 50%; &:hover { cursor: pointer; } } .fa-info-circle { position: absolute; bottom: 20px; right: 20px; background: @dark-grey; color: white; padding: 10px; border-radius: 50%; } } .pagebanner { .ambetter-redesign-page-banner { height: 568px; background-size: cover; background-position: 77% -20%; margin: 0; padding: 0; position: relative; overflow: hidden; background-repeat: no-repeat; } &.noImg { height: 500px; } .bannerWrap { position: absolute; bottom: 0; padding-top: 20px; overflow: auto; p, h1, h2, h3, h4, h5, h6 { font-size: 34px; } .buttonWrap { .banner-btn { max-width: 160px; } } } } /* Styles specific to Cards Carousel Component */ .cardscarousel { .component-wrapper { width: 100%; .title-wrapper { text-align: center; font-size: 40px; padding: 0px 60px; } .jcarousel-wrapper { margin: 0px auto 105px; position: relative; /** Carousel Controls **/ .jcarousel-control-prev, .jcarousel-control-next { position: absolute; top: 50%; width: 30px; height: 30px; text-align: center; } .jcarousel-control-prev:hover, .jcarousel-control-prev:focus, .jcarousel-control-next:hover, .jcarousel-control-next:focus { color: #000; text-decoration: none; } .jcarousel-control-prev { left: -30px; background: url('/etc.clientlibs/centene/clientlibs/clientlibs-main/resources/images/carousel-arrow-left.png') no-repeat; } .jcarousel-control-next { right: -40px; background: url('/etc.clientlibs/centene/clientlibs/clientlibs-main/resources/images/carousel-arrow-right.png') no-repeat; } .jcarousel-control-prev:hover span, .jcarousel-control-next:hover span { display: block; } .jcarousel-control-prev.inactive, .jcarousel-control-next.inactive { opacity: .5; cursor: default; } /** Carousel Pagination **/ .jcarousel-pagination { position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); margin: 0; a { text-decoration: none; display: inline-block; font-size: 11px; height: 10px; width: 10px; line-height: 10px; background-color: @darker-grey; border-radius: 10px; text-indent: -9999px; margin-right: 7px; -webkit-box-shadow: 0 0 2px #4E443C; -moz-box-shadow: 0 0 2px #4E443C; box-shadow: 0 0 2px #4E443C; &.active { border: 1px solid @darker-grey; height: 12px; width: 12px; box-shadow: none; background-color: @white; } } } .jcarousel { position: relative; overflow: hidden; .loading { text-align: center; line-height: 90px; /* Fake vertical aligning */ } .jcarousel-container { left: 0px; top: 0px; width: 10000em; position: relative; margin: 0; padding: 0; } .card-container { width: 345px; float: left; text-align: center; margin: 50px 10px 10px 10px; .card { float: left; width: 100%; height: 100%; margin-right: 1px; border-radius: 10px; background: white; } img { width: 102px; height: 102px; border-radius: 50px; display: inline-block; margin-top: -35px; max-height: 102px; } .text-wrapper { padding: 15px 55px 0px 55px; height: 55%; h2, h3, h4, h5, h6 { color: @brand-color; font-family: 'Roboto Slab', sans-serif; font-size: 1.5em; padding: 0px 20px; margin: 0px 0px 20px; min-height: 48px; font-weight: 500; } p { color: #333333; font-family: 'Roboto-Regular', sans-serif; font-size: 1.125em; } } .button-wrapper { padding: 0px 52px; a { border-radius: 20px; padding: 9px; font-size: 1.2em; text-decoration: none; } } } } } } } /* Styles specific to Cards Carousel Component */ .cardscarousel { .component-wrapper { width: 100%; .jcarousel-wrapper { width: 80%; .jcarousel-control-prev { left: -20px; } .jcarousel { width: 100%; .jcarousel-container { .list-container { width: 290px; .text-wrapper { padding: 30px 25px 0 25px; } } } } } } } /* Media Queries specific to Cards Carousel Component */ @media (min-width: 375px) { .cardscarousel { .component-wrapper { width: 100%; .jcarousel-wrapper { width: 80%; .jcarousel-control-prev { left: -20px; } .jcarousel { width: 100%; .jcarousel-container { .list-container { width: 290px; .text-wrapper { padding: 30px 25px 0 25px; } } } } } } } } /* Media Queries specific to Cards Carousel Component */ @media (min-width: 750px) { .cardscarousel { .component-wrapper { width: 100%; .jcarousel-wrapper { width: 80%; .jcarousel-control-prev { left: -30px; } .jcarousel-pagination { left: 50%; } .jcarousel { width: 100%; .jcarousel-container { .list-container { width: 290px; .text-wrapper { padding: 30px 25px 0 25px; h2, h3, h4, h5, h6 { padding: 0px 18px; } } } } } } } } } /* Media Queries specific to Cards Carousel Component */ @media (min-width: 1140px) { .cardscarousel { .component-wrapper { .jcarousel-wrapper { .jcarousel { .jcarousel-container { .list-container { .text-wrapper { h2, h3, h4, h5, h6 { padding: 0px 20px; } } } } } } } } } /* Media Queries specific to Cards Carousel Component */ @media (min-width: 1400px) { .cardscarousel { .component-wrapper { .jcarousel-wrapper { .jcarousel { .jcarousel-container { .list-container { .text-wrapper { h2, h3, h4, h5, h6 { padding: 0px 55px; } p { padding: 0px 30px; } } } } } } } } } .valuecards { background-color: transparent; padding-bottom: 20px; .pullUp { margin-top: -80px; } div.carousel { margin-top: 40px; &.pullUp { margin-top: -43px; } .pullDown { margin-top: 17px; } } .carousel { width: 90%; max-width: 315px; margin: auto; } .item { .cardWrapper { background: white; text-align: center; margin-left: auto; margin-right: auto; border: 2px solid white; border-radius: 10px; .cardHeading { h2, h3, h4, h5, h6 { color: @brand-color; font-size: 1.4em; font-family: 'RobotoSlab-Bold', sans-serif; line-height: 1.1; height: 52px; background: @lightest-grey; padding-top: 15px; margin-top: 0px; border-radius: 10px 10px 0px 0px; } } .cardImage { img { height: 80px; } margin-top: 22px; } .planName p { font-size: 1.4em; font-family: 'Roboto Slab', sans-serif; line-height: 1.42857143; margin-bottom: 13px; } .planDescription p { font-size: 1em; font-family: 'Roboto-Regular', sans-serif; line-height: 1.42857143; padding-bottom: 25px; width: 100%; max-width: 255px; margin: auto; } .paymentInfo { border-top: 1px solid @darker-grey; max-width: 255px; margin: auto; p { font-family: 'Roboto-Regular', sans-serif; font-size: 0.75em; line-height: 1.42857143; text-align: center; margin-top: 20px; } } } &.leftCard .cardWrapper { float: right; } &.rightCard .cardWrapper { float: left; } &.padLeft { padding-left: 40px; } &.padRight { padding-right: 40px; } &.centerCard { .cardHeading { h2, h3, h4, h5, h6 { color: white; height: 70px; background: @ambetter-teal; margin-bottom: 0px; padding-top: 25px; } p { color: @white; margin-top: 0px; padding-top: 10px; height: 45px; font-size: 1.125em; font-family: 'Roboto-Regular', sans-serif; background: @ambetter-teal-gradient; } } } } .carousel-control { .glyphicon-chevron-left { top: 50%; left: -40%; } .glyphicon-chevron-right { top: 50%; right: -40%; } } .carousel-control:focus { outline: none; } .carousel-indicators { bottom: -50px; } } .carousel-tablist-highlight.focus { outline: none; background-color: transparent; } .featurecards { .cardWrapper { margin-top: 50px; .cardCols { .featureCard { max-width: 392px; margin: auto; .featureCardContent { width: 72%; margin: auto; text-align: center; .cardImage { margin-bottom: 25px; img { height: 80px; } } .cardButton { margin-top: 20px; } h2, h3, h4, h5, h6 { color: @darker-grey; font-family: 'Roboto Slab', sans-serif; font-size: 24px; line-height: 1.1; margin-bottom: 20px; } p.cardSubtext { color: @darker-grey; font-family: 'Roboto-Regular', sans-serif; font-size: 18px; } } .btn-default { max-width: 220px; padding: 5px 10px 7px 10px; margin: auto; padding-top: 8px; font-size: 1.2em; &:hover { text-decoration: none; } } } } } /* featurecards-specific positioning of carousel glyphs */ .carousel-control { .glyphicon-chevron-left, .glyphicon-chevron-right { top: 39%; } } .carousel-indicators { position: relative; bottom: auto; left: auto; width: auto; padding-left: 0px; margin-left: 0px; margin-top: 8px; } } /* Carousel Control Styles */ .valuecards, .featurecards { div.carousel { margin-bottom: 40px; .carousel-aside-pause { display: none; } a.carousel-control:focus { background-image: none; box-shadow: none; outline: none; } } .carousel-control { background: none; &.right { background: none; } &.left { background: none; } .glyphicon-chevron-left { color: @light-grey; } .glyphicon-chevron-right { color: @darker-grey; } } .carousel-indicators { li, li.active { border: 1px solid @darker-grey; height: 12px; width: 12px; box-shadow: none; } li { background-color: @darker-grey; } .active { background-color: @white; margin: 1px; } } } /* Bootstrap Sm */ @media (min-width: 768px) { .rd-ambetter-content { .background-color-box.background-color-box-more-padding, .background-color-box-full-width.background-color-box-more-padding { padding-left: 20%; padding-right: 20%; } #default-year, #toggle-year { >.richtext { width: 60%; } } } .rd-content>.richtext { width: 60%; } .xs-only { display: none !important; } .ambetterredesign-footer.landing-footer { padding-top: 65px; padding-bottom: 57px; } .redesign-standard-footer .ambetterredesign-footer { padding-top: 40px; padding-bottom: 57px; } .top-footer .footerLinkList ul li { width: 100%; } .ambetterredesign-footer { .logo-wrap { height: 313px; position: relative; .abr-logo { .vert-center(); } } .home-logo-wrap { height: 100px; position: relative; .abr-logo { .vert-center(); } } .footer-content { padding: 30px; } .footerLinkList { ul { text-align: left; margin-bottom: 5px; li a { line-height: 0px; } li, span { padding: 0px 4px; } } } .copyright, .excerpt, .fullDisclaimer, .rd-footerrichtext { text-align: left; padding: 0px; } } .top-footer { .ambettersocial { display: block; padding-top: 0; .topFooterBold { text-align: left; } .socialWrap { justify-content: left; margin-left: 0px; } } } .pagebanner { .ambetter-redesign-page-banner { position: relative; background-position: unset; } .bannerWrap { .vert-center(); bottom: 27%; width: 545px; max-width: 50%; border-radius: 0px 10px 10px 0px; .bannerTextWrap { padding-top: 25px; p, h1, h2, h3, h4, h5, h6 { text-align: left; margin-bottom: 27px; } .bannerSubtext { p, h1, h2, h3, h4, h5, h6 { font-size: 16px; padding: 0px; } } .buttonWrap { overflow: auto; .banner-btn { margin-right: 10px; float: left; } } } } } .featurecards { .cardWrapper { margin-bottom: 60px; .cardCols { border-right: 1px solid @darker-grey; .featureCard { width: 100%; max-width: 220px; .featureCardContent { width: 93%; h2, h3, h4, h5, h6 { margin-bottom: 10px; line-height: 28px; } } .btn-default { width: 100%; max-width: 220px; margin-top: 5px; margin-bottom: 0px; } } } .cardCols:last-child { border-right: none; } } } /* Styles specific to the three column version */ .featurecards .cardWrapper { .col-sm-8.cardCols { .featureCard { width: 100%; max-width: 392px; .featureCardContent { width: 65%; h2, h3, h4, h5, h6 { font-size: 30px; line-height: 34px; } } .btn-default { width: 90%; margin-top: 0px; } } } } .valuecards { .hidden-xs { margin-top: 40px; margin-bottom: 40px; &.pullUp { margin-top: -43px; } .vertCenter { display: flex; .item { margin: unset; &.centerCard { .cardWrapper { max-width: 420px; width: 100%; &.noLeft { float: right; } &.noRight { float: left; } .cardImage img { height: 100px; margin-top: 0px; margin-bottom: 0px; } .cardHeading { h2, h3, h4, h5, h6 { font-size: 1.4em; padding-top: 25px; } } } } &.leftCard, &.rightCard { .cardWrapper { margin-top: 17px; } } .cardWrapper { width: 100%; max-width: 340px; .cardImage img { height: 60px; margin-top: 14px; margin-bottom: 27px; } .cardHeading { h2, h3, h4, h5, h6 { font-size: 1em; padding-top: 19px; } } } } } } } } /* Bootstrap XS Only */ @media (max-width: 767px) { body { .rd-ambetter-content { .d-55-m-36, .d-55-m-36-slab { font-size: 36px; line-height: 55px; } } } body.large-text { .rd-ambetter-content { .d-55-m-36, .d-55-m-36-slab { font-size: 42px !important; } } } body.small-text { .rd-ambetter-content { .d-55-m-36, .d-55-m-36-slab { font-size: 30px !important; } } } } /* Bootstrap Sm Only */ @media (min-width: 768px) and (max-width: 991px) { .pagebanner { .bannerWrap { .vert-center(); .bannerTextWrap { margin-left: 50px; width: 260px; p { font-size: 34px; } .buttonWrap a { padding: 7px 5px 5px 5px; width: 100%; } } } } .top-footer { .clearing { clear: both; } .languageAccess { padding-top: 0px; ul li { margin-top: 0px; } } .languageAccess, .footerLinkList { border-bottom: none; } .abr-footer-rich { padding-top: 0px; } .ambettersocial { border-top: none; } } /* Styles for stacking the four card version into 2x2 in Sm*/ .four .cardCols { margin-bottom: 25px; border-right: none; &:nth-child(2) { border-right: none; } &:nth-child(4) { border-right: none; } } .large-text { .four .cardCols { margin-bottom: 150px; } } /* Three card version font adj */ .featurecards .cardWrapper { .col-sm-8.cardCols { .featureCard { .featureCardContent { h2, h3, h4, h5, h6 { font-size: 24px; line-height: 26px; } } } } } } /* Bootstrap Md */ @media (min-width: 992px) { .ambetterredesign-footer { .logo-wrap { height: 240px; } } .top-footer { padding-top: 65px; padding-bottom: 10px; .topFooterBold { padding-top: 20px; } .footerLinkList, .languageAccess { border-bottom: none; border-right: 1px solid @darker-grey; min-height: 170px; padding-bottom: 15px; padding-left: 10px; } .ambettersocial { min-height: 170px; padding-bottom: 15px; padding-left: 20px; border-top: none; border-left: 1px solid @darker-grey; } .footerLinkList { ul li { width: 100%; } } .languageAccess { margin-top: 0px; padding-top: 0px; ul { padding-right: 20px; li { margin-top: 0px; width: 33.33%; } } } } /* Three card version width adj */ .featurecards .cardWrapper .col-sm-8.cardCols .featureCard { .featureCardContent { width: 90%; } } .pagebanner .bannerWrap { max-width: 42%; } .videobanner { #videobannervideo { min-width: 100%; z-index: 1; } .bannerWrap { max-width: 100%; height: 150px; position: absolute; left: 50%; margin-left: -50%; top: 5px; z-index: 2; .bannerTextWrap { width: 100%; max-width: 930px; margin: auto; height: 150px; position: relative; padding-top: 0px; p, h1, h2, h3, h4, h5, h6 { .vert-center(); font-size: 36px; text-align: left; max-width: 60%; float: left; padding-right: 0px; padding-left: 25px; padding-top: 0px; margin-bottom: 0px; } .buttonWrap { .vert-center(); width: 40%; float: left; padding-bottom: 0px; .banner-btn { max-width: 300px; padding: 9px 0px 5px 0px; font-size: 16px; margin-bottom: 0px; } } } } } } /* For Main Nav */ @media (max-width: 1600px) { .rd-main-header:not(.landing-header) { .ambetter-header-left-nav, .product-main-navigation { ul.parent-nav { li.top-level { width: 135px; >a { text-align: center; } } } } } .rd-main-header.left-logo-header { .ambetter-header-left-nav, .product-main-navigation { padding-top: 30px; } } } /* For Main Nav */ @media (max-width: 1500px) { .rd-main-header:not(.landing-header) { .ambetter-header-right-nav { ul { li { width: 135px; >a { text-align: center; } } } } } .rd-main-header.left-logo-header { .ambetter-header-right-nav { padding-top: 18px; } } } @media (max-width: 1280px) { .rd-main-header:not(.landing-header) { .ambetter-header-left-nav, .product-main-navigation { ul.parent-nav { li.top-level { width: 125px; } } } .ambetter-header-right-nav { ul { li { width: 125px; } } } } } @media (max-width: 1199px) { .rd-main-header:not(.landing-header) { .ambetter-header-left-nav, .product-main-navigation { ul.parent-nav { li.top-level { width: 110px; } } } .ambetter-header-right-nav { ul { li { width: 110px; } } } } } @media (max-width: 1100px) { .rd-main-header:not(.landing-header) { .ambetter-header-left-nav, .product-main-navigation { ul.parent-nav { li.top-level { width: 100px; } } } .ambetter-header-right-nav { ul { li { width: 100px; } } } } } @media (max-width: 992px) { .rd-main-header { >div { display: none; } .center-logo, .left-logo { display: block; } .left-logo { margin-top: 0px; } } #ambetter-mobile-header, #product-mobile-header { display: block; } #ambetter-desktop-header, #product-desktop-header { display: none; } } /* Bootstrap Md Only */ @media (min-width: 992px) and (max-width: 1199px) { .pagebanner { .bannerWrap { .vert-center(); .bannerTextWrap { margin-left: 50px; width: 347px; p, h1, h2, h3, h4, h5, h6 { font-size: 47px; } } } } } /* Bootstrap Lg */ @media (min-width: 1200px) { .ambetterredesign-footer { .logo-wrap { height: 220px; } } .top-footer { .footerLinkList { min-height: 125px; } .languageAccess { min-height: 125px; ul li { width: 25%; } } .ambettersocial { min-height: 125px; } } .featurecards .cardWrapper .col-sm-8.cardCols .featureCard { .featureCardContent { width: 80%; } } .videobanner { .ambetter-redesign-video-banner { background-position: unset; } .bannerWrap { max-width: 976px; margin-left: -488px; border-radius: 7px; } } .pagebanner { .bannerWrap { .vert-center(); .bannerTextWrap { margin-left: unset; margin-right: 52px; float: right; width: 360px; p, h1, h2, h3, h4, h5, h6 { font-size: 55px; } } } } } /* Accessibility Considerations */ .high_contrast { .featurecards .cardWrapper .cardCols .featureCard .featureCardContent { p.cardSubtext { color: yellow !important; } } .featurecards .cardWrapper .cardCols .featureCard { .teal-ambetter-btn, .teal-ambetter-btn:focus { background: yellow !important; color: black !important; } } } .large-text { .rd-ambetter-content { .d-55-m-36, .d-55-m-36-slab { font-size: 61px !important; } .rd-t-36, .hero { font-size: 42px; } .rd-t-32, h1 { font-size: 38px; } .rd-t-29, .subtitle, h2 { font-size: 35px; } .m-24, .m-24-slab { font-size: 30px !important; } .rd-t-23, .small-subtitle, h3 { font-size: 29px; } .rd-t-20-bold, h4, .rd-t-20-standard, .body-text-large { font-size: 26px; } .rd-t-18-bold, h5, .rd-t-18-standard, p, .richtext ul { font-size: 24px; } .m-16 { font-size: 22px !important; } .rd-t-16, .body-text-small, .rd-label, .help-text { font-size: 22px; } } .featurecards .cardWrapper .cardCols .featureCard a { font-size: 1.8em; } .featurecards .cardWrapper .cardCols { .featureCard .featureCardContent { height: 600px; h1, h2, h3, h4, h5, h6, p { font-size: 1.8em; line-height: 48px; } } } .carousel { margin-bottom: 40px; &.three .cardCols { height: 800px; .featureCardContent { height: 550px; } } } } .small-text { .rd-ambetter-content { .d-55-m-36 { font-size: 49px !important; } .rd-t-36, .hero { font-size: 30px; } .rd-t-32, h1 { font-size: 26px; } .rd-t-29, .subtitle, h2 { font-size: 23px; } .m-24, .m-24-slab { font-size: 18px !important; } .rd-t-23, .small-subtitle, h3 { font-size: 17px; } .rd-t-20-bold, h4, .rd-t-20-standard, .body-text-large { font-size: 14px; } .rd-t-18-bold, h5, .rd-t-18-standard, p, .richtext ul { font-size: 12px; } .m-16 { font-size: 10px !important; } .rd-t-16, .body-text-small, .rd-label, .help-text { font-size: 10px; } } .featurecards .cardWrapper .cardCols .featureCard .featureCardContent { h1, h2, h3, h4, h5, h6, p { font-size: 1.2em; } } .featurecards .cardWrapper .cardCols .featureCard a { font-size: 1.0em; } } /* Media XXL */ @media (min-width: 1400px) { .ambetterredesign-footer { .footer-content { margin-left: 0px; } } } /* Styles specific to Benefits Box Component */ .benefitsbox { background: white; .benefits-wrapper { background: white; padding-bottom: 100px; margin: auto; max-width: 1300px; font-size: 16px; .benefits-content-wrapper { width: 80%; margin: auto; color: #333333; padding-bottom: 50px; .benefits-content-text-right { position: relative; margin-bottom: 110px; .benefits-img { position: absolute; width: 60%; } .benefits-icon { height: 30px; width: auto; position: absolute; top: 70px; right: 20px; z-index: 1; } .benefits-text { width: 60%; background: white; padding: 40px 60px 25px 60px; position: relative; top: 50px; left: 40%; min-height: 400px; border-radius: 10px; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2), 0 20px 40px 0 rgba(0, 0, 0, 0.19); h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', sans-serif; font-size: 2em; text-align: left; min-height: 48px; font-weight: 500; color: @brand-color; } a { text-decoration: underline; } p { font-family: 'Roboto-Regular', sans-serif; font-size: 1em; } } } .benefits-content-text-left { position: relative; margin-bottom: 110px; .benefits-img { position: absolute; width: 60%; right: 0; } .benefits-icon { height: 30px; width: auto; position: absolute; top: 70px; left: 20px; z-index: 1; } .benefits-text { background: white; width: 60%; padding: 40px 60px 25px 60px; position: relative; top: 50px; left: 0; min-height: 400px; border-radius: 10px; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2), 0 20px 40px 0 rgba(0, 0, 0, 0.19); } h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', sans-serif; font-size: 2em; text-align: left; min-height: 48px; font-weight: 500; color: @brand-color; } a { text-decoration: underline; } p { font-family: 'Roboto-Regular', sans-serif; font-size: 1em; } } } } .benefits-wrapper-mobile { //background:linear-gradient(to bottom,#cb177d 200px,#a5247f 350px, white 5%);keep code for fiture use font-size: 16px; .benefits-content-wrapper-mobile { width: 90%; position: relative; margin: auto; color: #333333; background: white; padding-top: 25px; padding-bottom: 25px; margin-bottom: 100px; border-radius: 10px; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2), 0 20px 40px 0 rgba(0, 0, 0, 0.19); .benefits-img-mobile { margin-left: 10%; width: 80%; position: relative; } .benefits-icon-mobile { height: 60px; width: auto; margin: 30px auto 30px auto; display: block; } .benefits-text-mobile { width: 90%; margin: auto; background: white; text-align: center; min-height: 250px; h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', sans-serif; font-size: 2em; text-align: center; min-height: 48px; font-weight: 500; color: @brand-color; } a { text-decoration: underline; } p { font-family: 'Roboto-Regular', sans-serif; font-size: 1em; } } .benefits-indicator { text-align: right; font-size: 1.2em; width: 50%; float: left; } .benefits-size { font-size: 1.2em; } .carousel-control { background: none; &.right { background: none; } &.left { background: none; } .glyphicon-chevron-left, .glyphicon-chevron-right { color: black; top: 300px; } } } } } @media (max-width: 700px) and (min-width:551px) { .benefitsbox { .benefits-wrapper-mobile { .benefits-content-wrapper-mobile { .carousel-control { .glyphicon-chevron-left, .glyphicon-chevron-right { top: 250px; } } } } } } @media (max-width: 550px) { .benefitsbox { .benefits-wrapper-mobile { .benefits-content-wrapper-mobile { .carousel-control { .glyphicon-chevron-left, .glyphicon-chevron-right { top: 200px; } } } } } } }