﻿#MainContent_fourColLayout  p {
    font-size: 18px;
    padding: 0 25px;
    text-align: center;
}
#MainContent_fourColLayout img {
    margin: 0 42px;
}
.create-innovative-schools .epgPsSolutionArticleItemDescription ul li {
    margin-bottom: 0.1em !important;
}
.create-innovative-schools .epgPsSolutionArticleItemDescription ul {
    list-style-type: none !important;
    margin-left: 0 !important;
    padding: 8px 0;
}
.CSPvNext .row-fluid > .bp2-col-3,
.CSPvNext .row-fluid > .bp2-col-3-1,
.CSPvNext .row-fluid > .bp2-col-6-2,
.CSPvNext .row-fluid > .bp2-col-9-3,
.CSPvNext .row-fluid > .bp2-col-12-4 {
    width: 100%;
}
/*tab css*/

.schoolLeadersBtn {
    left: 25%;
    padding-top: 5px !important;
    position: relative;
    text-align: center;
    width: 250px;
    height: 50px !important;
}
.schoolLeadersBtn > a {
    color: #fff;
} 
.schoolLeadersBtn > a:hover {
    color: #fff !important;
} 
.active {
    background-color: #fff;
    color: #000 !important;
}

.transformation {
    margin: 30px 0 0 0;
    padding: 20px;
    width: 90%;
}
.tabLayoutContent {
    width: 100% !important;
}
.tab-panel-one.span.epgPsSolutionArticleItemDescription img {
    float: left;
    padding: 5px 10px 20px;
}
.tab-panel-one.span.epgPsSolutionArticleItemDescription h3 {
    margin: 15px 0;
}
.epg_doublebox > .span {
    border-color: #fff !important;
}
#wtpContainer > img {
    left: 15%;
    position: relative;
    width: 66%;
}
.main.icon-rightlongarrcirc {
    left: 3px;
    position: relative;
    top: 4px;
}
.cta-icon .mscom-image {
    top: 8px;
    position: relative;
    padding-right: 5px;
}
.schoolLeadersTabHolder{
    margin-top: 25px;
}
#tabLayout a:hover,
#tabLayout a:active {
    text-decoration: none !important;
}
.table-heading-one {
    font-size: 25px;
    line-height: 40px;
    color: #fff;
    background-color: #0078d7;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
}
.table-heading-two {
    font-size: 25px;
    line-height: 40px;
    color: #fff;
    background-color: #F05922;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
}
.table-heading-three {
    font-size: 25px;
    line-height: 40px;
    color: #fff;
    background-color: #000000;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
}
.table-heading-four {
    font-size: 25px;
    line-height: 40px;
    color: #fff;
    background-color: #00188f;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
}
.deploy-table {
    padding: 10px !important;
}
.school-leader-icon {
    margin-bottom: 4px;
}
.school-leader-icon-minecraft {
    margin-bottom: 0;
}
.creative {
    width: 100% !important;
    padding: 0 10px 0 10px;
}
.wtp {
    position: relative;
}
.wtpContainer {
    height: 600px;
}
.wtpSlideNav {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
}
.wtpSlideNav li {
    cursor: pointer;
    display: inline-block;
    height: 135px;
    margin-bottom: 0 !important;
    margin-right: 25px;
    padding: 20px 0;
    text-align: center;
    vertical-align: bottom;
    width: 16%;
}
.wtpSlideNav li p {
    color: #fff;
}
.wtpSlideNav img {
    padding-top: 22px;
}
.wtp .epg_panelsimple .panel_body {
    padding-bottom: 0;
    padding-top: 0;
}
.wtpSlide h1 {
    color: #fff;
}
.wtpSlides li {
    background: #fff none repeat scroll 0 0;
    display: block;
    height: 600px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.wtp-cta-btn-pages a {
    border: 2px solid #fff;
    color: #fff !important;
    padding: 10px 25px;
    position: relative;
}
#feedback {
    background: #ff3300 none repeat scroll 0 0;
}
#brainstorming {
    background: #0033cc none repeat scroll 0 0;
}
#problemsolving {
    background: #006666 none repeat scroll 0 0;
}
#annotating {
    background: #7030a0 none repeat scroll 0 0;
}
#making {
    background: #00b0f0 none repeat scroll 0 0;
}
#synthesizing {
    background: #3b3838 none repeat scroll 0 0;
}
.wtpArticlePage.guide-content {
    color: #fff;
    height: 340px;
    margin-top: 100px;
}
.container-row {
    height: 100%;
}
.wtp-contianer {
    padding: 10px;
    width: 40% !important;
}
.wtp-contianer > img {
    height: 331px;
    left: 145px;
    position: relative;
    top: 120px;
    width: 185px;
}
.extra {
    width: 78% !important;
}
.image-holder-panel {
    height: 150px;
    position: relative;
    top: 82px;
    min-width: 190px !important;
    padding: 5px;
}
.view {
    display: none;
}
.wtpSlideNavMob {
    display: none;
}
#a-cb83df13-160f-4d21-a017-ba2042cde5e0 {
    background-color: #ffb900;
    color: #000;
}
#a-6bd2ae02-b9b6-492a-a8a3-941ef880e783 {
    background-color: #0078d7;
}
#a-155fd564-3ce4-42e0-ab62-90992115680f {
    background-color: #107c10;
}
#a-450af3cb-4ecb-458e-800f-59cc4b79815a {
    background-color: #6507a7;
}
#a-b6a5061e-f547-4b1b-967e-c8124186d7cf {
    background-color: #e81123;
}
#a-cb83df13-160f-4d21-a017-ba2042cde5e0.selected,
#a-6bd2ae02-b9b6-492a-a8a3-941ef880e783.selected,
#a-155fd564-3ce4-42e0-ab62-90992115680f.selected,
#a-450af3cb-4ecb-458e-800f-59cc4b79815a.selected,
#a-b6a5061e-f547-4b1b-967e-c8124186d7cf.selected {
    background-color: #fff;
}
#a-cb83df13-160f-4d21-a017-ba2042cde5e0.selected {
    color: #4f4f4f;
}
.transform-arrow {
    height: 5em;
}
.transform-arrow a.c-call-to-action {
    height: 3em;
    margin: 1em 0;
    float: right;
}
.ofhobPage a.mscom-pivot-item-flyout-link {
    font-size: 1.5em !important;
}
.hidden {
    display: none;
}
.school-leaders-tab-style:after {
    border-bottom-color: transparent #000 transparent transparent;
    border-style: solid;
    border-width: 10px;
    height: 0;
    left: -15px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    width: 0;
}
.tab-content .content-row:nth-child(2n) {
    background-color: #eee;
}
.tab-content .content-row {
    margin: 0 -100%;
    padding: 30px 100% 20px;
}
#school-leaders-tab-one li {
    list-style: outside none none;
}
#school-leaders-tab-two li {
    list-style: outside none none;
}
.tab-content .cta-list li {
    box-sizing: border-box;
    display: inline-block;
    padding: 0 10px 10px;
    vertical-align: top;
    width: 168px;
}
/****media****/

@media screen and (max-width: 1315px) {
    ul .resp-view {
        margin-right: 10px;
        padding: 10px;
    }
    .wtpSlideNav li {
        cursor: pointer;
        display: inline-block;
        height: 180px;
        margin-bottom: 0 !important;
        margin-right: 25px;
        padding: 20px 0;
        text-align: center;
        vertical-align: bottom;
        width: 16%;
    }
}
@media screen and (max-width: 1024px) {
    #tabLayout li {
        left: 0;
    }

    .resp-view {
        margin-right: 10px;
        padding: 10px;
    }
    .wtpSlideNav li {
        cursor: pointer;
        display: inline-block;
        height: 180px;
        margin-bottom: 0 !important;
        margin-right: 25px;
        padding: 20px 0;
        text-align: center;
        vertical-align: bottom;
        width: 16%;
    }
    .wtp-cta-btn > a {
        left: 39%;
    }
    .creative {
        width: 100% !important;
    }
}
@media screen and (max-width: 768px) {
    #tabLayout li {
        left: 0;
    }
    .creative {
        width: 100% !important;
        padding: 10px 1px 0 14px !important;
    }
    .wtpSlide.fullscreen {
        display: none;
        border: medium none !important;
    }
    .wtpSlideNav {
        display: none;
    }
    #wtpContainer > img {
        display: none;
    }
    .wtpSlideNavMob li p {
        color: #fff;
        float: left;
        font-size: 15px;
        font-weight: bold;
        margin: 0 0 0 17px;
    }
    .wtpSlideNavMob {
        display: block;
        position: absolute;
        right: 0;
    }
    .wtpSlideNavMob li {
        cursor: pointer;
        display: inline-block;
        height: 35px;
        margin-bottom: 0 !important;
        margin-right: 25px;
        padding: 20px 0;
        text-align: center;
        vertical-align: bottom;
        width: 137px;
    }
    .wtpSlideNavMob img {
        float: right;
        position: relative;
        right: 25px;
        top: -9px;
    }
    .wtpContainer {
        height: 540px;
    }
    .wtpSlideNav li p {
        color: #0075da;
        font-size: 17px;
        letter-spacing: 1px;
        margin-left: 12px;
    }
    .wtpSlideNav li {
        cursor: pointer;
        display: inline-block;
        height: 74px;
        margin-bottom: 0;
        margin-right: 0;
        padding: 0;
        text-align: left;
        vertical-align: unset;
        width: 100%;
    }
    .wtp-contianer > img {
        display: none;
    }
    .resp-slide {
        display: none;
    }
    #feedback > img {
        float: right;
    }
    #brainstorming > img {
        float: right;
    }
    #problemsolving > img {
        float: right;
    }
    #annotating > img {
        float: right;
    }
    #making > img {
        float: right;
    }
    #synthesizing > img {
        float: right;
    }
    #feedback {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: #ff3300 none repeat scroll 0 0;
        border-color: #ccc #ccc -moz-use-text-color;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 1px 0;
        margin: 0;
        width: 100%;
    }
    #brainstorming {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: rgba(0, 0, 0, 0) none repeat scroll 0 center;
        border-color: #ccc #ccc -moz-use-text-color;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 1px 0;
        margin: 0;
        width: 100%;
    }
    #problemsolving {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: rgba(0, 0, 0, 0) none repeat scroll 0 center;
        border-color: #ccc #ccc -moz-use-text-color;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 1px 0;
        margin: 0;
        width: 100%;
    }
    #annotating {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: rgba(0, 0, 0, 0) none repeat scroll 0 center;
        border-color: #ccc #ccc -moz-use-text-color;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 1px 0;
        margin: 0;
        width: 100%;
    }
    #making {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: rgba(0, 0, 0, 0) none repeat scroll 0 center;
        border-color: #ccc #ccc -moz-use-text-color;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 1px 0;
        margin: 0;
        width: 100%;
    }
    #synthesizing {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: rgba(0, 0, 0, 0) none repeat scroll 0 center;
        border-color: #ccc #ccc -moz-use-text-color;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 1px 0;
        border-bottom: 1px solid #ccc;
        margin: 0;
        width: 100%;
    }
    #feedback,
    .resp-view {
        background: #ff3300 none repeat scroll 0 0;
        float: left;
        padding: 20px 20px 20px 10px;
    }
    #brainstorming,
    .resp-view {
        background: #0033cc none repeat scroll 0 0;
        float: left;
        padding: 20px 20px 20px 10px;
    }
    #synthesizing,
    .resp-view {
        background: #3b3838 none repeat scroll 0 0;
        ;
        float: left;
        padding: 20px 20px 20px 10px;
    }
    #making,
    .resp-view {
        background: #00b0f0 none repeat scroll 0 0;
        float: left;
        padding: 20px 20px 20px 10px;
    }
    #annotating,
    .resp-view {
        background: #7030a0 none repeat scroll 0 0;
        float: left;
        padding: 20px 20px 20px 10px;
    }
    #problemsolving,
    .resp-view {
        background: #006666 none repeat scroll 0 0;
        float: left;
        padding: 20px 20px 20px 10px;
    }
    .resp-view {
        background-image: url("feedback-small-icon-en-au.png");
    }
    
}
@media screen and (max-width: 769px) {
    .schoolLeadersBtn {
        left: 0 !important;
        width: 100% !important;
        display:block !important;
        margin:0 !important;
    }

    #schoolLeadersTabHolder {
        height: auto;
        display: block;
    }
}
@media screen and (max-width: 576px) {
    #tabLayout li {
        left: 0;
        display: block;
    }
    .wtpSlide.fullscreen {
        display: none;
    }
    #wtpContainer > img {
        display: none;
    }
    .wtpContainer {
        height: 455px;
    }
    .wtpSlideNav {
        display: none;
    }
    .wtpSlideNavMob li p {
        color: #fff;
        float: left;
        font-size: 15px;
        font-weight: bold;
        margin: 0 0 0 17px;
    }
    .wtpSlideNavMob {
        display: block;
        position: absolute;
        right: 0;
    }
    .wtpSlideNavMob li {
        cursor: pointer;
        display: inline-block;
        height: 35px;
        margin-bottom: 0 !important;
        margin-right: 25px;
        padding: 20px 0;
        text-align: center;
        vertical-align: bottom;
        width: 137px;
    }
    .wtpSlideNavMob img {
        float: right;
        position: relative;
        right: 25px;
        top: -9px;
    }
    .wtpSlideNav li p {
        color: #fff;
        font-size: 15px;
        margin-top: -10px;
    }
    .wtp-contianer > img {
        left: 120px;
        top: 66px;
    }
    .wtp-main-text-header img {
        margin-left: 9%;
        margin-top: 30px;
        width: 72%;
    }
    .wtpSlideNav li {
        height: 172px;
        margin-right: -5px;
        padding: 5px 5px 0;
        width: 96px;
    }
    .wtpSlides li {
        height: 0;
    }
}
@media screen and (max-width: 538px) {
    #tabLayout li {
        left: 0;
        list-style: outside none none;
        padding: 10px;
        text-align: center;
        display: block;
    }
    .image-holder-panel img {
        left: 25%;
        position: relative;
        top: -66px;
    }
    .wtpSlide.fullscreen {
        display: none;
    }
    .wtpSlides li {
        height: 0;
    }
    .wtpContainer {
        height: 455px;
    }
    .wtpSlideNavMob li p {
        color: #fff;
        float: left;
        font-size: 15px;
        font-weight: bold;
        margin: 0 0 0 17px;
    }
}
@media screen and (max-width: 480px) {
    #tabLayout a {
        font-size: 12px;
    }
    #tabLayout li {
        display: block;
        left: 0;
        list-style: outside none none;
        padding: 10px;
        text-align: center;
    }
    .image-holder-panel img {
        left: 25%;
        position: relative;
        top: -66px;
    }
    .wtpSlide.fullscreen {
        display: none;
    }
    .wtpContainer {
        height: 480px;
    }
    .wtpSlides li {
        height: 0;
    }
    .wtpSlideNav {
        display: none;
    }
    .wtpSlideNavMob li p {
        color: #fff;
        float: left;
        font-size: 15px;
        font-weight: bold;
        margin: 0 0 0 17px;
    }
    .wtpSlideNavMob {
        display: block;
        position: absolute;
        right: 0;
    }
    .wtpSlideNavMob li {
        cursor: pointer;
        display: inline-block;
        height: 35px;
        margin-bottom: 0 !important;
        margin-right: 25px;
        padding: 20px 0;
        text-align: center;
        vertical-align: bottom;
        width: 137px;
    }
    .wtpSlideNavMob img {
        float: right;
        position: relative;
        right: 25px;
        top: -9px;
    }
    .resp-slide {
        display: none;
    }
}
@media screen and (max-width: 320px) {
    #tabLayout a {
        font-size: 10px;
    }
    #tabLayout li {
        left: 0;
        list-style: outside none none;
        padding: 10px;
        text-align: center;
        display: block;
    }
    .image-holder-panel img {
        left: 25%;
        position: relative;
        top: -66px;
    }
    #MainContent_fourColLayout img {
        padding: 0 0 0 18px;
    }
    .wtpContainer {
        height: 450px;
    }
    .wtpSlide.fullscreen {
        display: none;
    }
    .wtpSlideNav {
        display: none;
    }
    .wtpSlides li {
        height: 0;
    }
    .wtpSlideNavMob li p {
        color: #fff;
        float: left;
        font-size: 15px;
        margin: 0 0 0 17px;
        font-weight: bold;
    }
    .wtpSlideNavMob {
        display: block;
        position: absolute;
        right: 0;
    }
    .wtpSlideNavMob li {
        cursor: pointer;
        display: inline-block;
        height: 35px;
        margin-bottom: 0 !important;
        margin-right: 25px;
        padding: 20px 0;
        text-align: center;
        vertical-align: bottom;
        width: 137px;
    }
    .wtpSlideNavMob img {
        float: right;
        margin: 0 auto;
        padding: 10px 5px 0 0;
        position: relative;
        right: 4px;
        top: -16px;
    }
    .resp-slide {
        display: none;
    }
}