@font-face {
    font-family: Apis-Light;
    src: url(/content/dam/wegovy/fonts/apis-web/woff-2-tt/ApisWeb-Light.woff2) format('woff2');
    font-display: swap;
}

:root {
    --color-black: #0F0F0F;
    --color-black2: #333333;
    --color-gray: #4A4A4A;
    --color-nniblue: #001965;

    --color-dark-grey: #0F0F0F;
    --color-mid-grey: #4A4A4A;
    --color-grey-3: #6C6C6C;
    --color-grey-4: #8F8F8F;
    --color-grey-5: #DADAD9;
    --color-grey-6: #EBEBEB;
    --color-grey-7: #F5F5F5;
    --color-white: #FFFFFF;
    --color-dark-blue: #001965;
    --color-lasting-blue: #00008F;
    --color-rich-nordic-blue: #0878CF;
    --color-nordic-blue: #92CDFF;
    --color-nordic-blue-50: #C9E6FF;
    --color-nordic-blue-25: #E4F3FF;
    --color-rich-ice-blue: #0080A0;
    --color-ice-blue: #B6F0FF;
    --color-ice-blue-50: #DBF8FF;
    --color-ice-blue-25: #EDFBFF;
    --color-rich-warm-grey: #806C5B;
    --color-warm-gray: #DDD4C9;
    --color-warm-gray-50: #EEEAE4;
    --color-warm-gray-25: #F6F4F2;
    
    --light-font: Apis-Light, Verdana, Helvetica, sans-serif !important;
    --regular-font: Apis-Regular, Verdana, Helvetica, sans-serif !important;
    --medium-font: Apis-Medium, Verdana, Helvetica, sans-serif !important;
}

/* Type Colors */
.variant .color-black,.variant .color-black * {
    color: var(--color-black) !important;
}
.variant .color-black2,.variant .color-black2 * {
    color: var(--color-black2) !important;
}
.variant .color-gray,.variant .color-gray * {
    color: var(--color-gray) !important;
} 
.variant .color-nniblue,.variant .color-nniblue * {
    color: var(--color-nniblue) !important;
}
.variant .color-white,.variant .color-white * { color: var(--color-white) !important;} 
.variant .color-dark-grey,.variant .color-dark-grey * { color: var(--color-dark-grey) !important;}
.variant .color-mid-grey,.variant .color-mid-grey * { color: var(--color-mid-grey) !important;}
.variant .color-grey-3,.variant .color-grey-3 * { color: var(--color-grey-3) !important;}
.variant .color-grey-4,.variant .color-grey-4 * { color: var(--color-grey-4) !important;}
.variant .color-grey-5,.variant .color-grey-5 * { color: var(--color-grey-5) !important;}
.variant .color-grey-6,.variant .color-grey-6 * { color: var(--color-grey-6) !important;}
.variant .color-grey-7,.variant .color-grey-7 * { color: var(--color-grey-7) !important;}
.variant .color-dark-blue,.variant .color-dark-blue * { color: var(--color-dark-blue) !important;}
.variant .color-lasting-blue,.variant .color-lasting-blue * { color: var(--color-lasting-blue) !important;}
.variant .color-rich-nordic-blue,.variant .color-rich-nordic-blue * { color: var(--color-rich-nordic-blue) !important;}
.variant .color-nordic-blue,.variant .color-nordic-blue * { color: var(--color-nordic-blue) !important;}
.variant .color-nordic-blue-50,.variant .color-nordic-blue-50 * { color: var(--color-nordic-blue-50) !important;}
.variant .color-nordic-blue-25,.variant .color-nordic-blue-25 * { color: var(--color-nordic-blue-25) !important;}

 /* Type Styles - LargeHeaders */
.variant .XL-light h1, .variant .XL-light {
    font-family: var(--light-font) !important;
    font-size: 74px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%; /* 96.2px */
    letter-spacing: -0.74px;
    @media only screen and (max-width: 768px) {
        font-size: 54px;
    }
}
.variant .h1-light h1, .variant .h1-light {
    font-family: var(--light-font) !important;
    font-size: 60px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%; /* 78px */
    letter-spacing: -0.6px;
    @media only screen and (max-width: 768px) {
        font-size: 44px;
    }
}
.variant .h2-regular h2, .variant .h2-regular {
    font-family: var(--regular-font) !important;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 62.4px */
    letter-spacing: -0.48px;
    @media only screen and (max-width: 768px) {
        font-size: 36px;
    }
}
.variant .h3-regular h3, .variant .h3-regular {
    font-family: var(--regular-font) !important;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 52px */
    letter-spacing: -0.4px;
    @media only screen and (max-width: 768px) {
        font-size: 28px;
    }
}
.variant .h4-medium h4, .variant .h4-medium {
    font-family: var(--medium-font) !important;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 41.6px */
    letter-spacing: -0.32px;
    @media only screen and (max-width: 768px) {
        font-size: 22px;
    }
}
.variant .h5-medium h5, .variant .h5-medium {
    font-family: var(--medium-font) !important;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 33.8px */
    letter-spacing: -0.26px;
}
.variant .h6-medium h6, .variant .h6-medium {
    font-family: var(--medium-font) !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 26px */
    letter-spacing: -0.2px;
}
.variant .eyebrow p, .variant .eyebrow {
    font-family: var(--regular-font) !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 15.6px */
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.variant .p1-light p, .variant .p1-light {
    font-family: var(--light-font) !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 30px */
    letter-spacing: -0.2px;
}
.variant .p2-regular p, .variant .p2-regular {
    font-family: var(--regular-font) !important;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    letter-spacing: -0.18px;
}
.variant .p3-regular p, .variant .p3-regular {
    font-family: var(--regular-font) !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: -0.16px;
}
.variant .p4-regular p, .variant .p4-regular {
    font-family: var(--regular-font) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    letter-spacing: -0.14px;
}
.variant .footnote p, .variant .footnote {
    font-family: var(--light-font) !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 18px */
    letter-spacing: -0.12px;
}



/* STYLE BREAK */


 .variant .h1-light h1,.variant .h1-light,
 .variant .h2-light h2,.variant .h2-light,
 .variant .h3-light h3,.variant .h3-light,
 .variant .h4-light h4,.variant .h4-light,
 .variant .h5-light h5,.variant .h5-light {
     font-weight: 300 !important;
     font-family: Apis-Light, Verdana, Helvetica, sans-serif !important;
 }

 .variant .h1-regular h1,.variant .h1-regular,
 .variant .h2-regular h2,.variant .h2-regular,
 .variant .h3-regular h3,.variant .h3-regular,
 .variant .h4-regular h4,.variant .h4-regular,
 .variant .h5-regular h5,.variant .h5-regular {
    font-weight: 300 !important;
     font-family: Apis-Regular, Verdana, Helvetica, sans-serif !important;
 }
 .variant .h1-medium h1,.variant .h1-medium,
 .variant .h2-medium h2,.variant .h2-medium,
 .variant .h3-medium h3,.variant .h3-medium,
 .variant .h4-medium h4,.variant .h4-medium,
 .variant .h5-medium h5,.variant .h5-medium {
    font-family: Apis-Medium, Verdana, Helvetica, sans-serif !important;
 }
 .variant .body-text-lg p,.variant .body-text-lg,
 .variant .body-text-md p,.variant .body-text-md,
 .variant .body-text-sm p,.variant .body-text-sm {
    font-weight: 400 !important;
     font-family: Apis-Regular, Verdana, Helvetica, sans-serif !important;
 }

 .variant .text-medium p,.variant .text-medium {
    font-weight: 500 !important;
    font-family: Apis-Medium, Verdana, Helvetica, sans-serif !important;
 }

.variant .h1-light h1,.variant .h1-light,.variant .h1-regular h1,.variant .h1-regular {
    font-size: 61px;
    line-height: 76px;
    font-style: normal !important;
    @media only screen and (max-width: 768px) {
        font-size: 35px;
        line-height: 44px;
    }
}
.variant .h2-light h2,.variant .h2-light,.variant .h2-regular h2,.variant .h2-regular {
    font-size: 48px;
    line-height: 60px;
    @media only screen and (max-width: 768px) {
        font-size: 28px;
        line-height: 35px;
    }
}
.variant .h3-light h3,.variant .h3-light,.variant .h3-regular h3,.variant .h3-regular {
    font-size: 39px;
    line-height: 48px;
    @media only screen and (max-width: 768px) {
        font-size: 28px;
        line-height: 35px;
    }
}
.variant .h4-light h4,.variant .h4-light,.variant .h4-regular h4,.variant .h4-regular {
    font-size: 30px;
    line-height: 40px;
}
.variant .h5-light h5,.variant .h5-light,.variant .h5-regular h5,.variant .h5-regular {
    font-size: 24px;
    line-height: 28px;
    @media only screen and (max-width: 768px) {
        font-size: 20px;
        line-height: 24px;
    }
}
.variant .heading-xs h5,.variant .heading-xs {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500 !important;
    font-family: Apis-Medium, Verdana, Helvetica, sans-serif !important;
}

.variant .body-text-lg p,.variant .body-text-lg {
    font-size: 20px;
    line-height: 30px;
    @media only screen and (max-width: 768px) {
        font-size: 16px;
        line-height: 24px;
    }
}
.variant .body-text-md p,.variant .body-text-md {
    font-size: 16px;
    line-height: 24px;
}
.variant .body-text-sm p,.variant .body-text-sm {
    font-size: 14px;
    line-height: 20px;
}

@media (max-width: 768px) {
    .variant .btn span.custom-icon {
        display: none !important;
    }
}