/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* Colours reference
    "Venclexta Blue":   #005570
    "Venclexta Teal":   #00bcb5
    "Venclexta Yellow": #ffce00

*/

/** ----------- Global Styles ----------- **/

body {
    font-family: "Lato", serif;
}

/* Typography */
p {
    font-family: "Lato", serif;
    color: #005570;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

b, strong {
    font-size: 18px;
    font-weight: 800;
    line-height: 25.2px;
}

h1, .h1
h2, .h2
h3, .h3
h4, .h4 {
    font-family: "Lato", serif!important;
}

h1, .h1 {
    font-family: "Lato", serif!important;
    color: #005570;
    font-size: 60px !important;
    font-weight: 900;
    line-height: 72px;
}

h2, .h2 {
    font-family: "Lato", serif!important;
    color: #005570;
    font-weight: 900;
    font-size: 55px !important;
    line-height: 69px !important;
    /* font-size: 60px !important; */
    /* line-height: 72px; */
    margin-top: 0px;
    margin-bottom: 50px;
}

h3, .h3 {
    font-family: "Lato", serif !important;
    color: #00bcb5;
    font-size: 20px !important;
    font-weight: 600;
    line-height: 25.2px;
    text-transform: uppercase;
    border-bottom: 2px solid #00bcb5;
    letter-spacing: 3px;
    padding-bottom: 8px;
    margin-top: 85px;
    /* margin-left: 65px;
    margin-right: 65px; */
}

h4, .h4 {
    font-family: "Lato", serif!important;
    color: #005570;
    font-size: 30px;
    font-weight: 900;
    line-height: 36px;
}

a {
    color: #00bcb5!important;
    text-decoration: underline!important;
    border-bottom: none!important;
}

a:hover {
    box-shadow: none!important;
}

/* Back to Top */
.back-to-top, 
.back-to-top:hover, 
.back-to-top a, 
.back-to-top a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    --back-to-top-bg-color: #005570;
}

.back-to-top>a {
    transition: opacity .25s ease-in-out;
}

.back-to-top>a, .back-to-top>a:hover {
    background-color: #005570 !important;
    bottom: 30px !important;
    border: 2px solid #ffffff !important;
    right: 30px;
    border-radius: 5px;
}

.back-to-top>a:hover {
    opacity: 0.7;
}


/* Header Section */
.header, .header p, .header a {
    font-family: "Lato", serif;
    color: #ffffff!important;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    background: #005570;
}

.header-links {
    display: block;
    float: right;
    padding-top: 16px;
}

.header-links a {
    text-decoration: underline !important;
    border-bottom: none !important;
    color: #ffffff!important;
    font-weight: 600;
    font-size: 16px;
    margin-right: 50px;
    box-shadow: none;
    display: block;
    float: left;
    padding-top: 10px;
}

.header-links a:hover {
    box-shadow: none!important;
}

.header-links a.button-yellow {
    text-decoration: none!important;
    color: #004f6b!important;
    font-weight: 600;
    font-size: 16px;
    border: none;
    border-radius: 100px!important;
    height: 45px;
    line-height: 22px;
    background-color: #ffce00;
    padding-left: 25px;
    padding-right: 25px;
}

.header-links a.button-yellow:hover {
    text-decoration: none;
}

/* Hero Banners */
.hero-banner {
    min-height: 480px;
    width: 100%;
}

.hero-banner .alt {
    opacity: 0;
}

.hero-banner.cll {
    background: url(/content/dam/abbvie-sitegenerator-ous/venclexta/au/en/images/banners/banner-cll.jpg) white bottom center no-repeat !important;
}

/* Resource Tiles */
.tile-copy {
    padding-left: 22px;
    padding-right: 22px;
}

.tile-copy p {
    padding-right: 22px;
}

.tile-copy h4 {
    padding-right: 25px;
}

/* Footer Section */
.footer {
    margin-right: 20px;
    margin-left: 20px;
}

.footer p:first-of-type {
    padding-top: 35px;
}

.footer, .footer p, .footer a {
    font-family: "Lato", serif;
    color: #ffffff!important;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    background: #005570;
}

/* Buttons */
a.btn.btn-primary {
    text-decoration: none!important;
    color: #004f6b!important;
    font-weight: 600;
    font-size: 18px;
    border: none;
    border-radius: 100px!important;
    height: 45px;
    line-height: 16px;
    background-color: #ffce00;
}

a.btn.btn-secondary {
    text-decoration: none !important;
    color: #004f6b !important;
    font-weight: 600;
    font-size: 18px;
    border: none;
    border-radius: 100px !important;
    height: 45px;
    line-height: 16px;
    background-color: lightgrey;
    cursor: default !important;
}

a.btn.btn-secondary:focus, a.btn.btn-primary:focus {
    box-shadow: none!important;
    text-decoration: none!important;
}

a.btn.btn-secondary:hover, a.btn.btn-primary:hover {
    box-shadow: none!important;
    text-decoration: none!important;
}

/* hide footer grey area */
#teconsent {
    display: none!important;
}





/** ----------- Media Queries ----------- **/

/* ----------- Mobile ----------- */

/* Mobile Portrait */
@media (max-width: 500px) {

    .footer {
        /* background: purple!important; */
    }

    /* Footer Section */
    .footer a:first-of-type {
        padding-right: 0!important;
        width: 100%;
        display: block;
    }

    /* remove side gutter */
    .cmp-container,
    .layout-container__inner,
    .layout-container--center,
    .container {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .container > .row {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

  }

/* ----------- Tablet ----------- */



@media (max-width: 1200px) {

    p {
        margin-right: 0px!important;
    }

    h2, .h2 {
        margin-bottom: 20px!important;
        font-size: 48px !important;
        line-height: 60px !important;
    }

    .customMarginTop:has(#guiding) {
        margin-top: 20px!important;
    }

    .customMarginTop:has(#treatment) {
        margin-top: 50px!important;
    }

    .col-md-6:has(#guiding) {
        margin-bottom: 10px!important;
    }

    .col-md-6:has(#guiding) + .col-md-6 img {
        width: 90%;
        float: right;
    }
    
    .col-md-6:has(#treatment) {
        width: 100%;
        margin-bottom: 10px!important;
    }
  
    .col-md-6:has(#treatment) + .col-md-6 {
        display: none;
    }

    .col-md-4:has(.image-extension.section.Default) {
        display: none;
    }

    .col-md-8:has(#side-effects) {
        width: 100%;
        margin-bottom: 50px;
    }

    .col-md-8:has(#side-effects) p {
        margin-right: 0px!important;
    }

    .col-md-3:first-of-type {
        width: 100%!important;
    }

    .header-links {
        margin-bottom: 20px!important;
        float: none !important;
    }

    .header-links a {
        float: none;
        clear: both;
        margin-right: 0px;
        height: 40px;
        display: inline-block!important;
        width: 100%!important;
    }

    .header-links a.button-yellow {
        width: 200px;
        margin: 0 auto;
        margin-top: 10px;
        width: 220px !important;
    }

    /* header */
    .col-md-9:has(.header-links) {
        width: 100%;
        clear: both;
        text-align: center;
    }

  }



/* START Responsive tile stacking */
/* ============================== */

@media (min-width: 989px) and (max-width: 1200px) {
    
    p {
        margin-right: 0px!important;
    }

    .col-md-6:has(.aml),
    .col-md-6:has(.veni),
    .col-md-6:has(.venr),
    .col-md-6:has(.veno) {
        width: 100%;
    }

    .col-md-8:has(.aml),
    .col-md-8:has(.veni),
    .col-md-8:has(.venr),
    .col-md-8:has(.veno) {
        width: 50%;
    }
    
    .col-md-4:has(.aml),
    .col-md-4:has(.veni),
    .col-md-4:has(.venr),
    .col-md-4:has(.veno) {
        width: 50%;
    }

    h3.aml,
    .h3.aml,
    h3.veni,
    .h3.veni,
    h3.venr,
    .h3.venr,
    h3.veno,
    .h3.veno {
        font-size: 17px !important;
        letter-spacing: 2px;
    }

}

@media (max-width: 989px) {

    p {
        margin-right: 0px!important;
    }

    .col-md-6:has(.aml),
    .col-md-6:has(.veni),
    .col-md-6:has(.venr),
    .col-md-6:has(.veno) {
        width: 100%;
    }

    .col-md-8:has(.aml),
    .col-md-8:has(.veni),
    .col-md-8:has(.venr),
    .col-md-8:has(.veno) {
        width: 100%;
    }

    .col-md-4:has(.aml),
    .col-md-4:has(.veni),
    .col-md-4:has(.venr),
    .col-md-4:has(.veno) {
        width: 100%;
    }

    h3.aml,
    .h3.aml,
    h3.veni,
    .h3.veni,
    h3.venr,
    .h3.venr,
    h3.veno,
    .h3.veno {
        font-size: 17px !important;
        letter-spacing: 2px;
    }


}

/* END Responsive tile stacking */
/* ============================== */





/* Mobile Portrait */
@media (max-width: 760px) {

    /* Typography */
    h3, .h3 {
        margin-top: 50px;
        font-size: 18px !important;
        letter-spacing: 1px;
    }

    p {
        margin-right: 0px!important;
    }

}

/* @media (max-width: 501px) {

      .column-control-wrapper.customMarginTop.customMarginBottom.customMarginLeft.customMarginRight {
          margin: 10px !important;
      }
} */

/* Styles specific to the landing page */
.col-md-6:has(.inner-rounded-container) {
    min-width: 423px!important;
    margin: 0 auto!important;
}

/* THIS IS NEW */
@media (max-width: 550px) {

    .footer.landing a {
        padding-left: 0px!important;
        padding-right: 0px!important;
        clear: both;
        display: block;
      }

    .column-control-wrapper.customMarginTop.customMarginBottom.customMarginLeft.customMarginRight {
        margin: 10px !important;
    }
    
    .column-control-wrapper.customMarginTop.customMarginBottom.customMarginLeft.customMarginRight:has(> .rounded) {
        margin-left: 10px!important;
        margin-right: 10px!important;
    }

    .footer.landing a:has(img) {
        margin: 0 auto!important;
    }

    .col-md-6:has(.inner-rounded-container) {
        min-width: unset!important;
    }
    
    .col-md-6:has(.inner-rounded-container) h2 {
        min-width: unset !important;
    }

}

@media (max-width: 1000px) {

    .footer.landing a:has(img) {
        margin: 0 auto!important;
    }

    /* .col-md-6:has(.inner-rounded-container) {
        min-width: unset!important;
    } */
/*     
    .col-md-6:has(.inner-rounded-container) h2 {
        min-width: unset !important;
    } */
    
    .column-control-wrapper.customMarginTop.customMarginBottom.customMarginLeft.customMarginRight:has(.inner-rounded-container) {
        margin-left: 13px !important;
        margin-right: 13px !important;
        
    }

}

/* Landing Page */
.articles .btn-loadmore, .multi-steps-back, .multi-steps-forward, .rounded, .section-list--loadmore .btn-loadmore, .inner-rounded-container {
    border-radius: 20px!important;
}