﻿/*
    This file is intended only to hold overrides we need to add to the MWF in order to suit our needs.
    Do not add any clases here that are not directly related to the basic markup of an MWF component - That should go into global.css

    COMBINED US & ROW FILE

*/

/* Fix for large white space appearing at the LHS of screen for RTL languages */
html[dir="rtl"] a.m-skip-to-main,
html[dir="rtl"] a.m-skip-to-main:hover {
    right: -999px;
}

    html[dir="rtl"] a.m-skip-to-main:active,
    html[dir="rtl"] a.m-skip-to-main:focus {
        right: 0;
    }

.ctex-centered {
    text-align: center;
}

.ctex-align-right {
    text-align: right !important;
}


/* General Components */
.ctex-band {
    padding: 50px 0;
}

.c-paragraph-4 {
    margin-bottom: 20px;
}

.c-divider, .c-divider.competency-divider {
    margin: 30px 0 !important;
}

.c-list:not(.mwf-default) {
    margin-bottom: 30px !important;
}

.c-list.ctex-list-margin-vertical-24 {
    margin-top: 24px;
    margin-bottom: 24px !important;
}

.f-marginbottom-30x {
    margin-bottom: 30px;
}

.span_bold {
    font-weight: bold; /* ?????  TODO: remove this and use <strong> tag instead*/
}

.c-hyperlink:focus p {
    display: inline-block;
    outline: 1px dashed #000000;
}

ul .no-bullet {
    list-style: none;
}

/* START GLYPH DEFINITION */
.glyph-calendar:before {
    content: "\E8C0";
}

.glyph-check-box:before {
    content: "\E73A";
}

.glyph-refresh:before {
    content: "\E895";
}

/* END OF GLYPH DEFINITION */

.c-action-trigger.c-glyph.glyph-chevron-right::before {
    content: '' !important;
    width: 0;
    margin: 0;
}

.c-action-trigger.c-glyph.glyph-chevron-right::after {
    content: '\E76C';
    height: 16px;
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle;
    width: 16px;
}

.ctex-feature .ctex-feature-content-wrapper .ctex-feature-content-inner a.c-hyperlink.ctex-inline-link {
    margin: 0;
    font-size: inherit;
    float: none;
    line-height: inherit;
}

.c-action-trigger.c-glyph.glyph-chevron-left::before {
    content: '\E76B';
    height: 16px;
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle;
    width: 16px;
}

.c-action-trigger.c-glyph.glyph-chevron-left::after {
    content: '' !important;
    width: 0;
    margin: 0;
}

.m-banner.ctex-full-width {
    max-width: none;
}

.m-banner.ctex-full-width.ctex-constrained-content p,
.m-banner.ctex-full-width.ctex-constrained-content h1,
.m-banner.ctex-full-width.ctex-constrained-content h2,
.m-banner.ctex-full-width.ctex-constrained-content h3,
.m-banner.ctex-full-width.ctex-constrained-content h4,
.m-banner.ctex-full-width.ctex-constrained-content h5,
.m-banner.ctex-full-width.ctex-constrained-content h6 {
    max-width: 1000px;
    margin: auto;
}

@media screen and (max-width:683px) {
    .c-pivot > header > a:first-child:not(.indiIcon) {
        margin: 0 12px !important;
    }
}

.c-action-trigger:hover {
    cursor: pointer;
}

button.c-button {
    text-transform: capitalize;
}

/* END General Components*/

/* Breadcrumb */

@media screen and (max-width: 1083px) {
    .breadCrumbNav {
        padding: 0 15px !important;
    }
}

ol.c-breadcrumb {
    display: block !important;
    margin: 0.6em 0 !important;
    line-height: 1em;
}

@media (max-width: 539px) {
    ul.c-breadcrumb li:not(:last-child) {
        padding: 0.5em 0 !important;
    }
}

/* END Breadcrumb */



/* Hero Component */

.m-hero-item {
    outline: none;
}

    .m-hero-item.theme-light:focus {
        border: 1px dashed #000;
    }

    .m-hero-item a.f-lightweight {
        color: #0067b8 !important;
    }

    .m-hero-item a.f-lightweight:focus > span {
        text-decoration:underline !important;
    }

    .c-hero > div > div, .m-hero-item > div > div {
        max-width: 550px;
    }

    .c-hero > div, .m-hero-item > div {
        max-width: 1600px;
    }

.c-subheading {
    max-height: 500px !important;
}

.hero-max .m-hero-item {
    max-height: none !important;
}

.hero-max > div > div {
    overflow: visible !important;
}

.hero-product-logo {
    width: 115px;
    margin-top: 15px;
}

@media screen and (min-width: 1345px) {
    .m-hero-item {
        max-height: 500px !important;
    }
}

@media screen and (min-width: 1345px) {
    .m-hero-item.ctex-hero-default {
        max-height: none !important;
    }
}

@media screen and (max-width: 767px) {
    .c-hero > picture, .m-hero-item > picture {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
    }

        .c-hero > picture img, .m-hero-item > picture img {
            position: relative;
        }

    .c-hero:before, .m-hero-item:before {
        padding-top: 0;
        padding-bottom: 0;
    }

    .c-hero > div:before, .m-hero-item > div:before {
        padding-top: 0;
        padding-bottom: 0 !important;
    }

    .c-hero > div, .m-hero-item > div {
        min-height: 220px;
        height: auto !important;
    }

    .c-hero[class*=f-x][class*=f-y] > div > div, .m-hero-item[class*=f-x][class*=f-y] > div > div {
        transform: translateY(0) !important;
    }

    .c-hero[class*=f-x][class*=f-y-bottom] > div > div, .m-hero-item[class*=f-x][class*=f-y-bottom] > div > div {
        top: 0;
    }

    .c-subheading {
        display: block !important;
    }
}

/* Hero with obscured text */
@media screen and (max-width: 1083px) {

        .ctex-hero-default.m-hero-item[class*=f-x][class*=f-y] > picture img {
            top: 0;
            left: 0;
            left: calc(50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .ctex-hero-default.m-hero-item[class*=f-x][class*=f-y] > div > div {
            position: relative;
            margin: 0 auto;
            left: 0;
            top: 0;
            top: calc(50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            max-width: 100%;
        }

         .ctex-hero-default.m-hero-item > div {
            position: relative;
         }

        .ctex-hero-default.m-hero-item {
            height: auto;
            padding: 0;
            text-align: center;
        }

        .ctex-hero-default.m-hero-item > picture {
            position: relative;
            display: block;
            width: 100%;
            height: auto;
        }

            .ctex-hero-default.m-hero-item > picture img {
                position: relative;
            }

        .ctex-hero-default.m-hero-item:before {
            padding-top: 0;
            padding-bottom: 0;
        }

        .ctex-hero-default.m-hero-item > div:before {
            padding-top: 0;
            padding-bottom: 0 !important;
        }

        .ctex-hero-default.m-hero-item > div {
            min-height: 220px;
            height: auto !important;
        }

            .ctex-hero-default.m-hero-item[class*=f-x][class*=f-y] > div > div {
                transform: translateY(0) !important;
                padding: 10px;
            }

        .ctex-hero-default.m-hero-item[class*=f-x][class*=f-y-bottom] > div > div {
            top: 0;
        }

        .c-subheading {
            display: block !important;
        }

        /* collapse margins */
        [class*=margin-].responsive-margin.ctex-hero-default {
            margin-bottom: 10px !important;
            margin-top: 0px !important;
            padding-top: 0 !important;
        }

        [class*=padding-vertical].responsive-margin.ctex-hero-default {
            margin-bottom: 10px !important;
            margin-top: 0px !important;
        }


        [class*=margin-vertical-].responsive-margin.ctex-hero-default {
            margin-top: 2em !important;
            margin-bottom: 2em !important;
        }
    }

@media screen and (-ms-high-contrast:active) {
    .c-hero .c-subheading-2, .m-hero-item .c-subheading-2,
    .c-hero .c-subheading-3, .m-hero-item .c-subheading-3,
    .c-hero .c-heading-2, .m-hero-item .c-heading-2,
    .c-hero .c-heading-3, .m-hero-item .c-heading-3,
    .c-hero .c-paragraph-2, .m-hero-item .c-paragraph-2,
    .c-hero .c-paragraph-3, .m-hero-item .c-paragraph-3 {
        background-color: #000;
        color: inherit !important;
    }
}

@media screen and (-ms-high-contrast:black-on-white) {
    .c-hero .c-heading-2, .m-hero-item .c-heading-2,
    .c-hero .c-heading-3, .m-hero-item .c-heading-3,
    .c-hero .c-subheading-2, .m-hero-item .c-subheading-2,
    .c-hero .c-subheading-3, .m-hero-item .c-subheading-3,
    .c-hero .c-paragraph-2, .m-hero-item .c-paragraph-2,
    .c-hero .c-paragraph-3, .m-hero-item .c-paragraph-3 {
        background-color: #FFF;
        color: inherit !important;
    }
}
    @media screen and (-ms-high-contrast:white-on-black) {
        .c-hero .c-subheading-2, .m-hero-item .c-subheading-2,
        .c-hero .c-subheading-3, .m-hero-item .c-subheading-3,
        .c-hero .c-heading-2, .m-hero-item .c-heading-2,
        .c-hero .c-heading-3, .m-hero-item .c-heading-3,
        .c-hero .c-paragraph-2, .m-hero-item .c-paragraph-2,
        .c-hero .c-paragraph-3, .m-hero-item .c-paragraph-3 {
            background-color: #000;
            color: inherit !important;
        }
    }
    /* END Hero Component */



/* Carousel Component */

.c-carousel .m-product-placement-item {
    white-space: normal !important;
}

.c-carousel .m-product-placement-item > a:hover h2,
.c-carousel .m-product-placement-item > a:hover h3 {
    text-decoration: underline;
}

.m-product-placement-item.f-size-extra-large {
    width: 400px;
}

.c-carousel-products ul li {
    width: 320px;
    text-align: center;
    padding: 0 15px;
    white-space: normal;
}

        .c-carousel-products ul li img {
            height: 100px;
            margin-bottom: 10px;
        }

        .c-carousel-products ul li p {
            max-width: 100%;
            white-space: normal;
        }

    .c-carousel-videos ul li img {
        height: 180px;
        margin: 10px;
    }

    .c-carousel-videos ul li p {
        max-width: 100%;
        white-space: initial;
    }

    .c-carousel-products .c-heading-5 {
        padding-top: 10px;
    }

    .ctex-article-carousel .item {
        width: 300px;
        padding: 5px;
        background: #ffffff;
        height: 500px;
    }

    .c-carousel-products ul li.school {
        width: 260px;
        text-align: center;
        padding: 0 15px;
    }

        .c-carousel-products ul li.school img {
            height: 130px;
        }

    .c-carousel-school-stories p.c-heading-6 {
        padding-top: 0;
    }

.c-carousel.f-single-slide .c-group.f-gallery > li {
    padding: 0;
    height: auto;
}

        .c-carousel.f-single-slide .c-group.f-gallery > li > div.video-container, .c-carousel.f-single-slide .c-group > li > div.video-container {
            position: relative;
        }

            .c-carousel.f-single-slide .c-group.f-gallery > li > div.video-container .c-image {
                margin: 0;
                width: 100%;
                height: auto;
            }

            .c-carousel.f-single-slide .c-group.f-gallery > li > div.video-container a.c-glyph.glyph-play:before {
                padding: 0;
                line-height: 85px;
            }

    .c-carousel .c-sequence-indicator.align-bottom {
        bottom: 0;
    }

/* END Carousel Component */

    /* START school leaders fixes */

    .edx-img {
        max-width: 290px;
        margin: auto;
        display: block;
    }

    /* END school leaders fixes */




    /* Features Component */
    .ctex-feature {
        min-height: 334px;
        padding: 50px 0;
        background: #FFFFFF;
        position: relative;
    }

        .ctex-feature.nopad {
            padding: 0;
        }

        .ctex-feature.ctex-auto-height {
            min-height: 0;
        }

        .ctex-feature.ctex-thinner {
            min-height: 234px;
        }

            .ctex-feature.ctex-thinner .ctex-feature-content-wrapper {
                height: 234px;
            }

    @media screen and (max-width: 767px) {

        .ctex-feature.ctex-thinner.nopad {
            min-height: 0px;
        }

            .ctex-feature.ctex-thinner.nopad .ctex-feature-content-wrapper:not(.mixed-content-link) {
                height: auto;
                margin: 0;
                padding-top: 2em;
                padding-bottom: 2em;
            }
    }


    .ctex-feature-ctas {
        padding-top: 25px;
    }

    .ctex-feature h4 {
        padding-top: 0;
    }

    #howtouse.ctex-feature h4 {
        padding-top: 35px;
    }

    .ctex-feature-img img {
        width: 100%;
        max-width: 500px;
    }

    .ctex-feature-content-wrapper {
        display: table;
        height: 334px;
    }

    .mixed-content-link img {
        max-width: 100%;
    }

    .mixed-content-link a {
        outline: none;
    }

        .mixed-content-link a:link:hover {
            text-decoration: none !important;
        }

    .mixed-content-link.ctex-centered, .mixed-content-link.ctex-centered div {
        display: block;
    }

    .ctex-feature-content-wrapper.mixed-content-link img {
        max-width: 100%;
    }

    .ctex-feature-content-wrapper.mixed-content-link a {
        outline: none;
    }

        .ctex-feature-content-wrapper.mixed-content-link a:focus {
            outline: 1px dashed #000000;
        }

    .ctex-thinner .ctex-feature-content-wrapper.mixed-content-link.ctex-centered a:hover {
        text-decoration: underline;
    }

    .ctex-feature-content-wrapper.mixed-content-link.ctex-centered, .ctex-feature-content-wrapper.mixed-content-link div, .ctex-feature-content-wrapper.mixed-content-link a:focus div {
        display: block;
    }

        .ctex-feature-content-wrapper.mixed-content-link.ctex-centered .ctex-feature-content-inner {
            position: relative;
            top: 50%; /* vertically centre content */
            transform: translateY(-50%); /* vertically centre content */
        }

    .ctex-feature-content-inner {
        display: table-cell;
        vertical-align: middle;
        position: relative;
    }

    .ctex-feature-swap .ctex-feature-img {
        float: right;
    }

        .ctex-feature-swap .ctex-feature-img .ctex-feature-content-wrapper {
            float: right;
        }

    @media screen and (min-width: 0) and (max-width: 767px) {
        .ctex-feature-img img {
            max-width: unset;
        }

        .ctex-feature-content-wrapper {
            width: 100%;
            height: auto !important;
            margin-top: 25px !important;
            margin-bottom: 25px !important;
            display: block;
        }

        .ctex-feature {
            padding: 15px 0;
        }

            .ctex-feature.nopad {
                min-height: 0;
            }

                .ctex-feature.nopad .ctex-feature-content-wrapper:not(.mixed-content-link) {
                    margin: 0;
                    padding-top: 2em;
                    padding-bottom: 2em;
                }

        .c-breadcrumb {
            display: inline !important;
        }
    }

    @media screen and (min-width: 1084px) and (max-width: 1399px) {
        .ctex-feature {
            padding: 35px 0;
        }
    }

    @media screen and (min-width: 1083px) and (max-width: 768px) {
        .ctex-feature {
            padding: 0;
        }
    }

    @media screen and (min-width: 0) and (max-width: 767px) {
        .ctex-feature-content-inner {
            display: block;
        }
    }

    @media screen and (min-width: 786px) and (max-width: 1200px) {
        .ctex-feature {
            min-height: 250px;
        }

        .ctex-feature-content-wrapper {
            height: 250px;
        }

        .double-cta-padding .ctex-feature-content-wrapper {
            padding-bottom: 20px;
        }

        .ctex-feature-content-wrapper.fixed-height {
            height: 334px !important;
        }
    }



    .ctex-feature a:link:hover {
        text-decoration: underline;
    }
    /* END Features Component */


    /* Global style overrides */
    main a.c-call-to-action {
        cursor: pointer;
        text-transform: uppercase;
        margin-right: 15px;
    }

    .c-call-to-action.f-lightweight.ctex-centered-cta,
    .c-call-to-action.ctex-cta-responsive.ctex-centered-cta {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    a.c-call-to-action.f-lightweight:not(.ctex-centered-cta) {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    a.c-call-to-action.whitelink {
        color: #FFFFFF !important;
    }

        a.c-call-to-action.whitelink:hover {
            text-decoration: underline;
        }

    a.c-action-trigger.longName,
    a.c-call-to-action.longName {
        white-space: pre-line !important;
    }

    a.c-call-to-action:last-child {
        margin-right: 0;
    }

    a.c-call-to-action + a.c-call-to-action,
    button.c-call-to-action + a.c-call-to-action,
    a.c-call-to-action + button.c-call-to-action,
    button.c-call-to-action + button.c-call-to-action {
        margin-left: 0 !important;
    }

    .m-banner.theme-dark a.c-call-to-action.light-focus {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .de-de-custom-list {
        max-width: 680px !important;
    }

    .c-action-trigger.c-glyph.cta-font-style {
        letter-spacing: .075em;
        font-size: 13px;
        white-space: unset;
    }

        .c-action-trigger.c-glyph.cta-font-style:before {
            text-align: left !important;
            width: 25px !important;
        }

    @media screen and (max-width: 720px) {
        .c-call-to-action .ctex-responsive-max-width-cta {
            max-width: 215px !important;
        }
    }
    /* END Global style overrides */

    /* MWF Column Layout Component */
    .ctex-columns {
        padding: 50px 0;
    }

    .ctex-display-table {
        display: table-cell;
    }

    .c-content-placement {
        margin: 0;
    }

    .ctex-columns a.c-call-to-action {
        background: none !important;
        color: #FFFFFF !important;
    }

        .ctex-columns a.c-call-to-action:hover {
            text-decoration: underline;
        }

.ctex-columns h1 a:hover {
    text-decoration: underline;
}

    .ctex-columns.brand-white a.colLink,
    .ctex-columns.f-background-neutral-10 a.colLink,
    .ctex-columns.f-background-neutral-20 a.colLink,
    .ctex-columns.f-background-neutral-30 a.colLink,
    .ctex-columns.brand-yellow a.colLink,
    .ctex-columns.brand-green-light a.colLink {
        color: #000000 !important;
    }

    .greyimg {
        width: 100%;
        height: 100%;
    }
    /* END MWF Column Layout Component */

    /*  UHF overrides */
    .c-universal-footer {
        margin-top: 0 !important;
    }

    .c-universal-header > div + div .c-logo {
        margin: 0 !important;
    }

    @media only screen and (min-width: 1779px) {
        .c-universal-header {
            margin-top: 0 !important;
        }
    }
    /* END UHF overrides */

    /* VFI */

.ctex-focus {
    border: 2px solid transparent;
}      

    button.c-action-trigger:focus,
    a.c-hyperlink:focus {
        outline-width: 2px !important;
        outline-style: dashed !important;
        outline-color: #000 !important;
    }

    section.ctex-focus img:focus {
        outline: none;
        border: 2px dashed #000;
    }

    .m-hero-item:focus, .m-hero-item.theme-dark:focus,
    .hero:focus, .hero.theme-dark:focus {
        border: 2px dashed #FFF;
        outline: none;
    }

    .m-hero-item.theme-light:focus,
    .hero.theme-light:focus {
        border: 2px dashed #000;
        outline: none;
    }

    .ctex-focus:focus,
    .c-date-time-picker button:focus,
    img.focusable:focus,
    a.c-hyperlink:focus img,
    a.c-call-to-action:focus:not(.x-hidden-focus),
    a.c-action-trigger:focus:not(.x-hidden-focus),
    a.c-action-trigger:focus:not(.x-hidden-focus),
    .c-drawer > button:focus,
    a.c-refine-item:focus,
    button.c-refine-item:focus,
    button.c-button[type=submit]:focus:not(.x-hidden-focus),
    .non-brand-light-blue a:focus, non-brand-light-blue button:focus,
    .mixed-content-link a:focus,
    .ctex-link-panel a.c-action-trigger:focus,
    .c-pivot a[role=tab]:focus,
    .c-social > a:focus,
    .c-social > ul > li > a:focus,
    .m-social > a:focus,
    .m-social > ul > li > a:focus,
    #customer-stories-results #rightPanel .no-results:focus,
    #customer-stories-results #rightPanel .m-content-placement-item div:focus,
    #partners-results #rightPanel .no-results:focus,
    #partners-results #rightPanel .m-content-placement-item div:focus,
    #partners-results form #search-field:active,
    #partners-results form #search-field:focus,
    a.c-back-to-top:focus,
    a.m-back-to-top:focus,
    .single-partner-details button.c-button[type=submit]:focus:not(.x-hidden-focus),
    #LauncherLogoLink:focus {
        outline: 2px dashed #000 !important;
    }

    .ctex-focus.light-focus:focus,
    img.light-focus.focusable:focus,
    a.c-call-to-action.light-focus:focus:not(.x-hidden-focus),
    a.c-action-trigger.light-focus:focus,
    .f-background-neutral-80 a.c-call-to-action:focus:not(.x-hidden-focus),
    .non-brand-blue a:focus, .non-brand-blue button:focus,
    .non-brand-dark-blue a:focus, .non-brand-dark-blue:focus,
    .mixed-content-link a.light-focus:focus,
    .c-choice-summary:focus,
    .c-choice-summary button.c-action-trigger.c-glyph:focus {
        outline: 2px dashed #FFF !important;
    }      

    .c-carousel-products .item a:focus {
        outline: 2px dashed;
    }

    a.glyph-play:focus img {
        outline: none;
    }

    a.glyph-play:focus img {
        border: dashed 2px;
    }

    .c-social > a:focus:before,
    .c-social > ul > li > a:focus:before,
    .m-social > a:focus:before,
    .m-social > ul > li > a:focus:before {
        background-color: transparent !important;
    }

    input.c-text-field[type=text]:active,
    input.c-text-field[type=text]:focus,
    input.c-text-field[type=number]:active,
    input.c-text-field[type=number]:focus,
    input[type=email]:active, input[type=email]:focus,
    #customer-stories-results form #search-field:active,
    #customer-stories-results form #search-field:focus {
        border: 2px dashed #000 !important;
    }

    .ctex-article-nextsteps a.x-hidden-focus {
        outline-color: #000000;
    }

    .openHeroVideo:focus {
        border: 2px dashed #FFF;
    }
         
    .ctex-feature-content-wrapper.mixed-content-link a.light-focus:focus div {
        outline: 2px dashed #FFFFFF;
    }

    .f-background-neutral-80.ctex-link-panel a.c-action-trigger:focus {
        outline: 2px dashed #FFF;
    }

    .c-carousel.f-multi-slide .m-hero-item .inner-container {
        padding-left: 2px; /* to make room for LHS of VFI on CTAs */
    }

    .ctex-tap-disable {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

    .c-pivot div[role=tablist] {
        min-height: 40px !important;
        padding-top: 2px;
    }

    /* END VFI */

    /* Dialog */

    .c-dialog.f-flow [role^="dialog"] {
        height: 95% !important;
        width: 95%;
        max-height: 394px !important;
        min-height: 0;
        max-width: 700px;
        padding-top: 2em;
        text-align: center;
    }

    .c-dialog.f-flow [role=dialog], .c-dialog.f-lightbox [role=dialog] {
        padding: 38px 0 0 0 !important;
    }

    .c-dialog.f-flow [role^="dialog"] [role^="document"] {
        height: 100% !important;
    }

    .c-dialog.f-flow [role^="dialog"] [data-js-dialog-hide] {
        top: 1px !important;
        right: 1px !important;
    }

    .c-dialog.f-flow [role^="dialog"] .f-dialog-scroll {
        height: 100%;
    }

    .c-dialog.f-flow [role^="dialog"] [role^="document"] iframe {
        height: 100%;
        width: 100%;
    }

    .c-dialog.f-lightbox [role=dialog] > .c-glyph {
        top: 0px;
        outline-offset: -1px;
    }

    /* END Dialog */

    /* Office 365 page */

    .ctex-dialog-default.c-dialog.f-flow [role^="dialog"], .ctex-dialog-default.c-dialog.f-flow .f-dialog-scroll {
        max-height: none !important;
    }

    @media only screen and (max-width: 1299px) {
        .hero.office365 {
            padding: 0 !important;
        }

            .hero.office365 .c-feature.f-align-left picture {
                float: none !important;
                width: 100% !important;
                overflow: hidden;
                text-align: center;
            }

                .hero.office365 .c-feature.f-align-left picture img {
                    max-height: 600px;
                    position: relative;
                    margin: auto;
                    display: block;
                    padding-top: 30px;
                }

            .hero.office365 .c-feature.f-align-left > div {
                transform: translateY(0%) !important;
                -webkit-transform: translateY(0%) !important;
                -ms-transform: translateY(0%) !important;
                padding: 10px !important;
                width: 100% !important;
                margin: 0 auto !important;
                text-align: left !important;
                position: relative !important;
            }

            .hero.office365 .c-feature.f-align-left > div {
                background-color: #2f2f2f;
                color: #fff;
                text-align: center !important;
            }

                .hero.office365 .c-feature.f-align-left > div a.c-call-to-action.f-lightweight {
                    color: #FFF !important;
                }

                .hero.office365 .c-feature.f-align-left > div a,
                .hero.office365 .c-feature.f-align-left > div a:focus {
                    color: #FFF !important;
                }

                    .hero.office365 .c-feature.f-align-left > div a:focus,
                    .hero.office365 .c-feature.f-align-left > div button:focus {
                        outline-color: #FFF !important;
                    }

            .hero.office365 div[data-grid~=container] {
                padding: 0 !important;
            }
    }

    @media only screen and (max-width: 1095px) {

        .hero.office365 .c-feature.f-align-left picture, .hero.office365 .c-feature.f-align-right picture {
            float: none !important;
            text-align: center;
            position: relative;
            margin: auto;
        }

        .hero.office365 .c-feature.f-align-left img, .hero.office365 .c-feature.f-align-right img {
            height: 497px !important;
            width: auto !important;
        }
    }

    @media only screen and (max-width: 986px) {
        .hero.office365 .c-feature.f-align-left picture, .hero .c-feature.f-align-right picture {
            width: 80% !important;
            padding-top: 0;
        }

        .hero.office365 .c-feature.f-align-left img, .hero.office365.c-feature.f-align-right img {
            height: auto !important;
            width: 100% !important;
        }
    }

    @media only screen and (max-width: 539px) {
        .hero.office365 .c-feature.f-align-left picture img {
            padding: 16px 0 0 18px;
            float: right;
            height: auto !important;
            width: 100% !important;
            text-align: center;
            margin: auto;
        }

        .hero.office365 .c-feature.f-align-left picture {
            width: 100% !important;
        }
    }

    @media only screen and (max-width: 400px) {
        .hero.office365 {
            padding-top: 23px !important;
        }
    }

    .c-dialog.f-flow.office365-video [role^="dialog"] {
        max-width: 814px !important;
        max-height: 724px !important;
        height: auto !important;
    }

        .c-dialog.f-flow.office365-video [role^="dialog"] [role^="document"] {
            height: auto;
        }

            .c-dialog.f-flow.office365-video [role^="dialog"] [role^="document"] iframe {
                height: 340px;
            }

    @media only screen and (max-height: 572px) and (orientation: landscape) {
        .c-dialog.f-flow.office365-video div[role=document], .c-dialog.f-flow.office365-video [role^="dialog"] {
            height: 100% !important;
        }
    }

    /* END Office 365 page */

    /*  
    Hero Video 
    No support for f-mask-* classes as yet
*/

    .m-hero-item.ctex-html5-hero-video.ctex-hide-controls .c-video video::-webkit-media-controls {
        /* For accessibility, prevent screen readers reading out shadow DOM controls in webkit browsers */
        display: none !important;
    }

    .m-hero-item .c-video .ctex-html5-video-error {
        position: absolute;
        top: 0;
        left: 0;
        bottom: auto;
        min-width: 0;
        background-color: #919191;
        color: #E3E3E3;
        padding: 0.2em;
        transform: none !important;
        -webkit-transform: none !important;
        -ms-transform: none !important;
    }

    @media only screen and (max-width: 767px) {

        .m-hero-item.ctex-html5-hero-video.stack-2 video {
            position: relative;
        }

        .m-hero-item.ctex-html5-hero-video.stack-2 .c-video {
            padding: 0;
        }

        .m-hero-item.ctex-html5-hero-video.stack-2 > div h1 {
            padding-top: 0;
        }

        .m-hero-item.ctex-html5-hero-video.stack-2 > div {
            display: block;
            position: relative;
            min-height: 0;
        }

            .m-hero-item.ctex-html5-hero-video.stack-2 > div:not(.c-video) > div {
                transform: none;
                -moz-transform: none;
                -webkit-transform: none;
            }
    }
    /* END Hero Video */

    /* Responsive, multi-line capable CTA with vertically centred chevron */

    .c-call-to-action.ctex-cta-responsive {
        position: relative !important;
        display: inline-block;
        white-space: nowrap;
        text-transform: none; /* We should not have text-transform:uppercase on main override, this is not an MWF style */
        padding-right: 44px !important;
    }

        .c-call-to-action.ctex-cta-responsive span {
            display: inline-block;
            white-space: normal;
        }

        .c-call-to-action.ctex-cta-responsive.f-lightweight {
            text-align: left;
        }

    .c-call-to-action.f-lightweight.ctex-cta-responsive:after {
        margin-top: 3px !important;
        right: 0;
    }

    .ctex-text-uppercase {
        text-transform: uppercase !important;
    }

    .c-call-to-action.ctex-cta-responsive.ctex-text-uppercase {
        text-transform: uppercase;
    }

    .c-action-trigger.ctex-text-uppercase {
        text-transform: uppercase;
    }

    .c-call-to-action.ctex-cta-responsive.ctex-centered {
        padding-left: 40px !important; /* balance out with padding for glyph so text remains centred to surrounding content */
    }

    .c-action-trigger.ctex-cta-responsive {
        white-space: normal !important;
    }

    .c-call-to-action.left-align {
        text-align: left;
    }

    /* END Responsive, multi-line capable CTA */

    /* c-drawer */

    .c-drawer.benefits-drawer {
        border: 1px solid #2f2f2f !important;
        border-top: 2px solid #00188f !important;
        margin-bottom: 15px;
    }

        .c-drawer.benefits-drawer ul {
            margin-left: 14px !important;
        }

        .c-drawer.benefits-drawer > button > * {
            padding: 14px;
        }

        .c-drawer.benefits-drawer > button {
            margin: 2% !important;
            padding: 0 !important;
            width: 96% !important;
        }

    /* END c-drawer */

    /* Social footer padding fix */
    .m-social.f-horizontal {
        padding-left: 0 !important;
    }

    @media screen and (max-width: 1081px) {
        .m-social.f-horizontal {
            padding-left: 12px !important;
        }
    }

    /*Double link Cta*/
    a.double-cta-start.c-call-to-action {
        margin-right: 0;
        padding-right: 0 !important;
    }

        a.double-cta-start.c-call-to-action:after {
            content: none !important;
        }

    a.double-cta-end.c-call-to-action {
        padding-left: 0px !important;
    }
    /*End Double link Cta*/
    /* END c-drawer */

    @media screen and (max-width: 1083px) {
        .c-feature .c-video, .c-feature:not(.mwf-default) picture {
            display: block;
            width: 100% !important;
            max-width: 100% !important;
        }

        .c-feature.f-align-left:not(.mwf-default) > div,
        .c-feature.f-align-right:not(.mwf-default) > div {
            width: 90%;
            margin: 0 auto;
            text-align: center;
            position: relative;
            top: 0 !important;
            transform: none;
            -webkit-transform: none;
            left: 0;
        }

        .c-feature.f-align-left:not(.mwf-default) picture, .c-feature.f-align-right:not(.mwf-default) picture,
        .c-feature.f-align-left:not(.mwf-default) video, .c-feature.f-align-right:not(.mwf-default) video, 
        .c-feature.f-align-right:not(.mwf-default) .m-ambient-video {
            float: none;
        }

        .c-feature.f-align-right.f-image-priority > div, .c-feature.f-align-left.f-image-priority > div {
            left: 0;
            right: 0;
        }

        .c-feature.f-align-left:not(.mwf-default) picture img, .c-feature.f-align-right:not(.mwf-default) picture img {
            float: none;
            display: block;
            margin: 0 auto;
        }
    }

    /* Imagine Academy list and image fixes */

    .c-action-trigger.c-glyph.glyph-download::before {
        content: '\E896';
    }

    @media screen and (max-width: 767px) {
        nav.c-link-navigation li p, nav.c-link-navigation li img {
            text-align: center !important;
            display: block !important;
            clear: both;
            max-width: none !important;
            padding: 0 !important;
        }
    }

    @media screen and (max-width: 1083px) {
        .c-feature > div .c-list {
            text-align: left !important;
        }
    }

    nav.c-link-navigation li a:focus p {
        display: block;
    }

    /* MWF Mosaic styling for button hovers which is present on MWF 1 */
    .theme-dark .c-mosaic-placement a.c-call-to-action:hover, .theme-light .theme-dark .c-mosaic-placement a.c-call-to-action:hover {
        background: 0 0;
    }

    /* Page Creator required classes */
    #bandPageContent .panel-dark a.c-call-to-action:focus:not(.x-hidden-focus) {
        outline: 1px dashed #FFF !important;
        color: #FFFFFF !important;
    }

    #bandPageContent .panel-light a.c-call-to-action:focus:not(.x-hidden-focus) {
        outline: 1px dashed #000 !important;
    }
    /* END Page Creator required classes */

    /* c-link-navigation */

    nav.c-link-navigation {
        margin-top: 0;
    }

        nav.c-link-navigation ul {
            padding-bottom: 0.9em;
        }

        nav.c-link-navigation li {
            vertical-align: middle;
            padding-top: 0.9em;
        }

    .ctex-list-pipe-seperated li {
        display: inline-block;
    }

        .ctex-list-pipe-seperated li:not(:last-child):after {
            content: '|';
            margin-left: 1em;
            margin-right: 1em;
        }

        .ctex-list-pipe-seperated li a {
            display: inline-block !important;
        }

    @media screen and (max-width:768px) {

        nav.c-link-navigation.ctex-list-pipe-seperated-mobile li:after {
            content: '' !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }

    /* END c-link-navigation */

    .c-content-toggle .text-block {
        display: inline-block;
        margin-bottom: 24px;
    }

    .c-content-toggle.hide-button-on-expand p[data-f-expanded=true] + button {
        display: none !important;
    }

    .m-alert .c-action-trigger.c-glyph.glyph-chevron-right::after {
        height: 17px !important;
    }

    .m-alert[role="alert"] > div > .c-paragraph .c-group .c-action-trigger {
        margin-top: 0px !important;
    }

    @media screen and (max-width: 1083px) {
        .c-feature.f-align-left .c-heading-3 {
            text-align: center !important;
        }
    }

    .recorded-webcasts-page #lpChatButtonMWFCTA-lightweight a.c-call-to-action.f-lightweight {
        padding: 6px 0 3px !important;
    }

        .recorded-webcasts-page #lpChatButtonMWFCTA-lightweight a.c-call-to-action.f-lightweight:hover {
            text-decoration: underline;
        }

    /* START Typographic intro override with use of a custom 'ctex'
    class as we dont have the up-to-date verison of MWF */
    .ctex-typographic-temp-override {
        min-height: 350px;
    }

        .ctex-typographic-temp-override > div > div {
            max-width: none !important;
            top: 50% !important;
        }

            .ctex-typographic-temp-override > div > div p {
                max-width: 550px;
            }

    @media screen and (max-width:540px) {
        .ctex-typographic-temp-override {
            min-height: 400px;
        }
    }
    /* END Typographic */

    /* vCMS */

    .vCMSdialog.c-dialog.f-flow [role^="dialog"] {
        height: auto !important;
        width: 600px;
        max-width: 95% !important;
        max-height: 95% !important;
    }

        .vCMSdialog.c-dialog.f-flow [role^="dialog"] [role=document] {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 35px;
            height: 0;
            overflow: hidden;
        }

    .vCMSdialog.c-dialog.f-flow.fourthree [role^="dialog"] [role=document] {
        padding-bottom: 75%;
    }

    .vCMSdialog.c-dialog.f-flow.wide [role^="dialog"] [role=document] {
        padding-bottom: 56.25%;
    }

    .vCMSdialog.c-dialog.f-flow [role^="dialog"] [role=document] iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* END vCMS */


    /* START content Placement overrides */

    .m-content-placement .m-content-placement-item.ctex-img-fixed > picture {
        text-align: center;
    }

        .m-content-placement .m-content-placement-item.ctex-img-fixed > picture img {
            width: auto;
        }

    .m-content-placement-item:hover > div [class^="c-heading"] {
        text-decoration: underline;
    }

    .m-content-placement.ctex-cta-default .m-content-placement-item .c-call-to-action:not(.f-lightweight) {
        color: #fff;
        background: #0067b8;
    }

    /* END content placement */

    /* MWF Styles from MWF V1.24 */

    button.c-button.f-primary {
        color: #FFF;
        background-color: #0067B8;
    }

        button.c-button.f-primary:focus:not(.x-hidden-focus) {
            background: #005DA6 !important;
            transform: none !important;
            -webkit-transform: none !important;
            text-decoration: none;
            outline: 2px dashed #000;
        }

    /* END MWF Styles from MWF V1.24 */

    /* START Multi-feature classes */

    .m-multi-feature .m-area-heading {
        padding-top: 0;
        padding-bottom: 48px;
    }

        .m-multi-feature .m-area-heading h2 {
            padding: 0;
        }

    /* END Multi-feature classes */


    /* START System Requirements */

    .m-system-requirements.ctex-system-requirements .c-table th {
        font-weight: 200;
        font-size: 24px;
        padding: 1em 0;
        padding-right: 1em;
    }

    .m-system-requirements.ctex-system-requirements .c-table {
        margin-top: 0;
    }

        .m-system-requirements.ctex-system-requirements .c-table tbody tr {
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }

            .m-system-requirements.ctex-system-requirements .c-table tbody tr:last-child {
                border-bottom: none;
            }

    @media screen and (max-width:767px) {
        .m-system-requirements.ctex-system-requirements .c-table caption:empty {
            display: none;
        }

        .m-system-requirements.ctex-system-requirements .c-table th {
            width: 8em;
        }

        .m-system-requirements.ctex-system-requirements .c-table th,
        .m-system-requirements.ctex-system-requirements .c-table td {
            vertical-align: middle;
        }

        .m-system-requirements.ctex-system-requirements .c-table tbody tr:last-child {
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }

        .m-system-requirements.ctex-system-requirements div:last-child .c-table tbody tr:last-child {
            border-bottom: none;
        }
    }

    /* END System Requirements */
    @media screen and (max-width: 1083px) {
        .c-feature.f-align-left > div.skype-badge {
            text-align: center !important;
        }
    }
    
/* High contrast mode CSS */
@media all and (-ms-high-contrast: active) {
    [class*="c-"] .c-call-to-action,
    [class*="m-"] .c-call-to-action,
    [class*="ctex-"] .c-call-to-action,
    [class*="c-"] .c-call-to-action.f-lightweight,
    [class*="m-"] .c-call-to-action.f-lightweight,
    .c-call-to-action,
    .c-call-to-action.f-lightweight {
        -ms-high-contrast-adjust: auto !important;
    }

    a:not(.x-hidden-focus).c-action-trigger:focus,
    a:not(.x-hidden-focus).c-call-to-action:focus,
    a:not(.x-hidden-focus).c-call-to-action.light-focus:focus,
    .cta-white-text a.c-call-to-action.f-lightweight:focus,
    .c-hyperlink:focus,
    button.c-action-trigger:focus, a.c-hyperlink:focus {
        outline: 2px dashed !important;
    }

}

/* fix for strange styling of sibling links in headings */

[class^=c-heading-] span + a.c-hyperlink.header-footnote-link {
    float: none;
    margin-left: 0;
    font-size: inherit;
    font-weight: 100;
}

/*Hacking STEM Hero override for Hero element padding*/

@media only screen and (min-width: 768px) and (max-width: 1300px) {
    .hackingSTEM .c-hero:before, .hackingSTEM:before {
        padding-bottom: 56.25% !important;
        padding: 0%;
    }

    .hackingSTEM .c-hero, .hackingSTEM .m-hero-item {
        padding: 0%;
    }
}

.m-product-placement-item > a:focus > picture img {
    outline: rgba(0,0,0,.1) solid 1px !important;
}

/* START Product Placement - Video */

.m-product-placement.f-video a.c-action-trigger.c-glyph {
    outline: none !important;
    border: 2px dashed transparent;
}

.m-product-placement.f-video a.c-action-trigger.c-glyph:focus {
    outline: none !important;
    border-color: #FFF;
    background: rgba(0,0,0,0.6) !important;
}

.m-product-placement.f-video a.c-action-trigger.c-glyph:before {
    line-height: normal !important;
}

/* END Product Placement - Video */

.c-tooltip {
    white-space: normal !important; /* needed if a parent element has nowrap */
}

/* Content Placement A11Y Override */

.c-content-placement, .m-content-placement-item {
    cursor: default !important;
}

.c-content-placement:hover picture img,
.m-content-placement-item:hover picture img {
    opacity: 1 !important;
}

.m-content-placement-item:hover > div > .c-call-to-action span,
.m-content-placement-item:hover > div [class^="c-heading"] {
    text-decoration: none !important;
}

.m-content-placement-item > div > .c-call-to-action:hover span {
    text-decoration: underline !important;
}

/* END Content Placement A11Y Override */


/*Feature group Cta color*/
.m-feature-group .m-feature a.c-call-to-action {
    color: #005da6 !important;
}

.UnsetCase {
    text-transform: initial !important;
}

.c-badge.f-large {
    height: auto;
}

.c-badge {
    white-space: unset;
    height: auto !important;
    word-break: break-all;
}

@media screen and (-ms-high-contrast:white-on-black) {
    .theme-dark .c-mosaic-placement picture::after, .theme-light .theme-dark .c-mosaic-placement picture::after {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }
    .theme-dark .c-mosaic-placement {
        color: #FFF;
    }
}

@media screen and (-ms-high-contrast: black-on-white) {
    .theme-dark .c-mosaic-placement picture::after, .theme-light .theme-dark .c-mosaic-placement picture::after {
        background-color: rgba(255, 255, 255, 0.6) !important;
    }
}

@media only screen and (min-width: 768px) {
    .m-highlight-feature > div {
        margin: 0 48px;
        width: 355px;
        height: 336px;
    }
}

a.c-call-to-action.f-lightweight, button.c-call-to-action.f-lightweight {
    white-space: unset !important;
}

.c-feature .c-call-to-action:not(.f-primary):not(.f-secondary), .m-feature .c-call-to-action:not(.f-primary):not(.f-secondary) {
    white-space: unset !important;
}

.m-multi-feature > section .c-pivot, .m-multi-feature > section > ul {
    width: 100%;
}
/*Override to make the apps carousel fill the container at full width*/
#AppsCarousel.c-carousel ul li:not(:last-child) {
    margin-right: 27px;
}