.txt-light-blue {
    color: #00B0F0;
}

.txt-orange {
    color: #FFB900;
}

.txt-green {
    color: #bad80a;
}

.txt-dark-orange {
    color: #DA3B01;
}

.txt-purple {
    color: #5c2d91;
}

.txt-black {
    color: #000;
}

.txt-white {
    color: #fff;
}


/* Brand custom colours */
.brand-dt-blue {
    color: #ffffff;
}

.brand-dt-blue .c-call-to-action, .brand-dt-blue .c-call-to-action:active {
    background: #00aff0  !important;
    color:#fff !important;
}

.brand-dt-blue .c-call-to-action:hover {
    background: #0078D7;
}

.brand-dt-blue .c-hyperlink, .brand-dt-blue .c-hyperlink:visited, .brand-dt-blue a.c-action-trigger, .brand-dt-blue a.c-action-trigger:visited, .brand-dt-blue a.c-action-trigger:hover {
    color: #ffffff !important;
}

.brand-dt-blue .c-hyperlink:hover {
    color: #ffffff;
    text-decoration: underline;
}

.brand-dt-purple {
    color: #ffffff;
}

.brand-dt-purple .c-call-to-action, .brand-dt-purple .c-call-to-action:active {
    background: #5c2d91  !important;
    color:#fff !important;
}

.brand-dt-purple .c-call-to-action:hover {
    background: #512980;
}

.brand-dt-purple .c-hyperlink, .brand-dt-purple .c-hyperlink:visited, .brand-dt-purple a.c-action-trigger, .brand-dt-purple a.c-action-trigger:visited, .brand-dt-purple a.c-action-trigger:hover {
    color: #ffffff !important;
}

.brand-dt-purple .c-hyperlink:hover {
    color: #ffffff;
    text-decoration: underline;
}

.ctx-btn-orange {
    background-color: #FFB900 !important;
    color: #fff !important;
}

.ctx-btn-green {
    background-color: #bad80a !important;
    color: #fff !important;
}

.ctx-btn-purple {
    background-color: #5c2d91;
    color: #fff;
}

.ctx-btn-white {
    background-color: #fff !important;
    color: #000 !important;
}

    .ctx-btn-orange:hover, .ctx-btn-white:hover, .ctx-btn-purple:hover {
        text-decoration: underline !important;
    }

.screen-reader-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.digitalTransformation {
    overflow: hidden;
}

.videoContainer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
    background-image :url("edu_win_educationHome_hero_vid_1666_en-US.jpg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

.videoCover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}

@media screen and (min-width:1920px){
    video{
        width:100% !important;
    }
}

@media screen and (orientation:portrait) and (max-width:1919px) {
    video {
        height:auto !important;
        min-width: 100% !important;
    }
}

@media screen and (orientation:landscape) and (max-width:1919px) {
    video {
        min-height:100% !important;
        width: auto !important;
    }
}

video {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.main-hero {
    position: relative;
    height: auto;
    min-height: 850px;
}

    .main-hero .hero-content {
        top: 50%;
        width: 100%;
        text-align: center;
        z-index: 2;
    }

.hero-content {
    position: relative;
    font-weight: normal;
    z-index: 999;
    color: #fff;
    top: 50%;
}

.full, .full img {
    width: 100%;
}

.h-split span {
    display: block;
}

.iconContainer {
    position: relative;
    width: 900px;
    padding-top: 35px;
    margin: 0 auto;
    overflow: visible;
}

    .iconContainer header {
        overflow: visible;
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
    }

.c-pivot > header {
    overflow: visible !important;
    display: block !important;
}

    .c-pivot > header > a:focus {
        outline: none;
    }

.indiIcon {
    position: relative;
    width: 24.6%;
    text-align: center;
    display: inline-block;
    min-height: 125px;
    max-height: 200px;
    white-space: pre-wrap !important;
    margin:0 !important;
}

    .indiIcon.active {
        -moz-transition: 1s linear;
        -o-transition: 1s linear;
        -webkit-transition: 1s linear;
        transition: 1s linear;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }

    .indiIcon a {
        height: 124px;
        width: 124px;
        display: block;
        margin: 0 auto;
    }

    .indiIcon p:first-of-type {
        padding-top: 10px;
    }

.c-explore {
    position: absolute;
    z-index: 3;
    bottom: 40px;
    left: 50%;
    margin-left: -60px;
}

/**** MIXED CSS FROM DEMO AND IMPLEMENTATION  ****/
html, body, div, h1, p, a, video {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-size: 14px;
    line-height: 20px;
    color: #404040;
}

.overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.5);
    overflow-x: hidden;
}

.navbartopwrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 30px;
    background-color: #ffffff;
    margin: 0 auto;
}

.navbartop {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 50px;
}

.navbarbottomwrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 50px;
    background-color: #5c2d91;
    margin: 0 auto;
}

.navbarbottom {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 50px;
}

.contentwrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 850px;
    z-index: 2;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent;
}

.content {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 40%;
    margin: 0 auto;
    text-align: center;
    overflow: visible !important;
    z-index: 12;
}

.icon {
    position: absolute;
    width: 124px;
    height: 124px;
    cursor: pointer;
}

.box {
    position: absolute;
    top: 357px;
    z-index: 3;
}

.head {
    position: absolute;
    top: 142px;
    left: 0;
    right: 0;
    display: none;
    text-align: center;
    width: 100%;
    z-index: 999;
    color: #fff;
}

.subhead {
    position: absolute;
    top: 180px;
    left: 0;
    right: 0;
    opacity: 0;
    z-index: 999;
    width: 100%;
    color: #fff;
    white-space: pre-wrap !important;
}

    .head:hover, .subhead:hover {
        color: #fff;
    }

.splash {
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    width: 124px;
    height: 124px;
    z-index: 2 !important;
}

.slider {
    width: 1280px;
    height: 656px;
    overflow: hidden;
}

.c-hero > div, .m-hero-item > div {
    max-width: none !important;
}

.c-carousel.theme-dark {
    background-color: rgba(255, 255, 255, 0.00) !important;
}


    .c-carousel.theme-dark .c-group {
        padding: 0;
    }

.m-hero-item-custom {
    height: auto !important;
    position: relative;
    overflow: hidden;
    padding: 0 5%;
    width: 100%;
}

    .m-hero-item-custom:before {
        display: block;
        width: 100%;
        padding-top: 41.5%;
    }

.m-hero-item picture img {
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
}

  .DigitalFirstSlide picture:last-of-type {
            display:none;
        }

#activatebutton {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 22%;
    z-index: 10;
}

    #activatebutton a.c-call-to-action {
        background-color: rgba(255,255,255,0);
    }

        #activatebutton a.c-call-to-action:hover {
            background-color: rgba(255,255,255,0);
            color: #fff;
            border-color: #fff;
        }

#studenticon, #educatoricon, #institutionicon, #learningicon {
    z-index: 10;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 124px;
    margin: 0 auto;
    cursor: pointer;
}

#educatorsplash, #institutionsplash, #learningsplash {
    display: none;
}

.max-width-900 {
    max-width: 900px;
    margin: 0 auto;
}

.max-width-1300 {
    max-width: 1300px;
    margin: 0 auto;
}

.part {
    display: none;
}

    .part .subHeadText {
        margin-bottom: 5em;
    }

    .part .headerIcon {
        display: block;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .part .headerIconContainer {
        min-height: 70px;
        width: 100%;
        position: relative;
    }

    .part [data-grid~=col-3], .part [data-grid~=col-4], .part [data-grid~=col-1-5] {
        position: relative;
        height:100%;
        margin-bottom: 6em;
    }

        .part [data-grid~=col-4]:focus, .part [data-grid~=col-1-5]:focus, .part [data-grid~=col-3]:focus, .part section:focus {
            outline: none;
        }

    .part > section {
        margin-top: 1em;
    }

    .part .c-carousel button.f-toggle {
        display: none;
    }

    .part .c-carousel {
        margin-bottom: 40px;
    }

    .part .c-hero > div > div, .m-hero-item > div > div {
        max-width: 650px;
    }

    .part .c-carousel .c-sequence-indicator {
        bottom: -35px;
    }

    .part .c-sequence-indicator button {
        padding: 2px 3px;
        margin-right: 8px;
        width: 18px;
        height: 16px;
    }

.maincontent [data-grid~=col-12] [data-grid~=col-4] p, .c-paragraph-3 {
    line-height: 20px;
}


.overflow-vis {
    overflow: visible !important;
}

#studentContent, .c-pivot > header > a.f-active, .c-pivot > header > a {
    color: #fff;
}

#videoSection, #iconSection {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}

#introcopy {
    padding: 0 1.5em 3em 1.5em;
}

    #introcopy:active, #introcopy:focus, #studentContent:focus, #introcopy > div:focus, [data-grid=col-12]:focus {
        outline: none;
    }

#iconSection {
    z-index: 10;
    background: none;
    outline: none;
}

#ytplayer {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: none;
}

    #ytplayer img {
        position: absolute;
        bottom: 25px;
        right: 25px;
        width: 305px;
    }

@media screen and (max-width:1024px) {
    .content {
        max-width: 768px;
    }

    .iconContainer {
        width: 100%;
    }

    #ytplayer img{
        width:280px;
    }
}

@media screen and (max-width:1024px) and (min-width:768px){
        #educator-hero-slide-one div:last-of-type div{
        width:60%;
    }
}

@media screen and (max-width:980px) {
    .part .subHeadText {
        margin-bottom: 2em;
    }

    .iconContainer .c-pivot > header {
        width: 100% !important;
        position: relative !important;
        display: block !important;
    }

    video {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
    }
}

@media screen and (min-width:768px) {
    /*.part [data-grid~=col-3] .c-call-to-action, .part [data-grid~=col-4] .c-call-to-action, .part [data-grid~=col-1-5] .c-call-to-action{
        position:absolute;
        bottom:0;
    }*/

    .maincontent {
        margin-top: 5em;
    }
}

@media screen and (max-width:768px) {

    .main-hero .hero-content {
        top: 0;
    }

    #activatebutton {
        display: none;
    }

    .iconContainer .c-pivot > header > a {
        float: left;
        display: inline-block;
        width: 50%;
        margin-top: 20px;
    }

    #ytplayer {
        display: none;
    }

    .m-hero-item picture img {
        width: 100%;
    }

    .m-hero-item {
        max-height: none !important;
    }

    .part [data-grid~=col-3] .c-call-to-action, .part [data-grid~=col-4] .c-call-to-action, .part [data-grid~=col-1-5] .c-call-to-action {
        position: relative;
    }

    .part > section{
        margin-top:0;
    }

        .part > section h2 {
            padding-top: 0;
        }

    #introcopy {
        padding-bottom: 0;
    }

    .iconContainer {
        margin-bottom: 0;
    }

    .splash, .indiIcon {
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@media screen and (max-width:767px) {
    .DigitalFirstSlide, .DigitalFirstSlide picture {
        display: block;
        position: relative;
    }

    .DigitalFirstSlide picture:last-of-type {
        display: inline;
        position: absolute;
        top: 0;
        bottom: auto !important;
        right: 0;
        left: 0;
        z-index: 9;
    }
    .theme-dark .txt-black {
        color: #fff;
    }

    .theme-dark .txt-purple {
        color: #fff;
    }
}

@media screen and (max-width: 539px) {
    [data-grid~=col-4] {
        width: 100% !important;
        float: left;
    }
}


/* Column Content Height/Button setting for bottom alignment */
@media screen and (min-width:768px) {
    .columnItems .ctex-feature-ctas {
        position: absolute;
        bottom: -50px;
    }
}

/* ICONS */
.engage, .optimize, .empower, .transform {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    margin: 0 auto;
    z-index: 9999;
}

.engage.active:hover, .optimize.active:hover, .empower.active:hover, .transform.active:hover {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


/* student */
.engage {
    width: 135px;
    height: 135px;
    background-repeat: no-repeat;
    background-image: url('EngageCombined.png');
}

.engage.active:hover, .engage.active.on {
    -moz-animation: engage .75s steps(17) forwards;
    -o-animation: engage .75s steps(17) forwards;
    -webkit-animation: engage .75s steps(17) forwards;
    animation: engage .75s steps(17) forwards;
}

/* Educator */
.optimize {
    width: 135px;
    height: 135px;
    background-repeat: no-repeat;
    background-image: url('OptimizeCombined.png');
}

.optimize.active:hover, .optimize.active.on {
    -moz-animation: engage .75s steps(17) forwards;
    -o-animation: engage .75s steps(17) forwards;
    -webkit-animation: engage .75s steps(17) forwards;
    animation: engage .75s steps(17) forwards;
}

/* institution */
.empower {
    width: 135px;
    height: 135px;
    background-repeat: no-repeat;
    background-image: url('EmpowerCombined.png');
}

.empower.active:hover, .empower.active.on {
    -moz-animation: empower .75s steps(33) forwards;
    -o-animation: empower .75s steps(33) forwards;
    -webkit-animation: empower .75s steps(33) forwards;
    animation: empower .75s steps(33) forwards;
}

/* learning */
.transform {
    width: 135px;
    height: 135px;
    background-repeat: no-repeat;
    background-image: url('TransformCombined.png');
}

.transform.active:hover, .transform.active.on {
    -moz-animation: transform .75s steps(21) forwards;
    -o-animation: transform .75s steps(21) forwards;
    -webkit-animation: transform .75s steps(21) forwards;
    animation: transform .75s steps(21) forwards;
}

@keyframes engage {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -2295px;
    }
}

@-moz-keyframes engage {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -2295px;
    }
}

@-webkit-keyframes engage {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -2295px;
    }
}

@keyframes optimize {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -2295px;
    }
}

@-moz-keyframes optimize {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -2295px;
    }
}

@-webkit-keyframes optimize {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -2295px;
    }
}

@keyframes empower {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -4455px;
    }
}

@-webkit-keyframes empower {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -4455px;
    }
}

@-moz-keyframes empower {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -4455px;
    }
}

@-moz-keyframes transform {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -2835px;
    }
}

@-webkit-keyframes transform {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -2835px;
    }
}

@keyframes transform {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -2835px;
    }
}