﻿html[dir="RTL"] .featuresCarousel .outerWrap {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    direction: ltr;
    text-align: right;
}

html[dir="RTL"] .featuresCarousel .item {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    float: right;
}

html[dir="RTL"] .epgPSTouchCarousel {
    text-align: right;
}

.featuresCarousel {
    position: relative;
    background-color: #EEEEEE;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    display: inline-block;
    width: 100%;
}

    .featuresCarousel.noArrows .leftArrow, .featuresCarousel.noArrows .rightArrow {
        display: none !important;
    }

    .featuresCarousel.noArrows .innerWrap.hasArrows {
        margin: 0 25px !important;
    }

    .featuresCarousel .leftArrow .arrow, .featuresCarousel .rightArrow .arrow {
        background-repeat: no-repeat;
        background-size: 100%;
        width: 50px;
        height: 50px;
    }
/* ie8 can't scale background image so keep it container same size as background */
.ie8orless .featuresCarousel .leftArrow .arrow, .ie8orless .featuresCarousel .rightArrow .arrow {
    height: 40px;
    width: 40px;
}

.featuresCarousel .leftArrow, .featuresCarousel .rightArrow {
    position: absolute;
    min-height: 100%;
    cursor: pointer;
}

.featuresCarousel .leftArrow {
    left: 12px;
}

    .featuresCarousel .leftArrow .arrow {
        background-image: url(/global/enterprise/publishingimages/homepage/feat_left_arrow_sprite.png);
        margin-top: 90px;
    }

    .featuresCarousel .leftArrow.max .arrow {
        background-image: url(/global/enterprise/publishingimages/homepage/feat_left_arrow_ns_sprite.png);
        margin-top: 90px;
    }

    .featuresCarousel .leftArrow.max {
        cursor: initial;
    }

.featuresCarousel .rightArrow {
    right: 12px;
}

    .featuresCarousel .rightArrow .arrow {
        background-image: url(/global/enterprise/publishingimages/homepage/feat_right_arrow_sprite.png);
        margin-top: 90px;
    }

    .featuresCarousel .rightArrow.max .arrow {
        background-image: url(/global/enterprise/publishingimages/homepage/feat_right_arrow_ns_sprite.png);
        margin-top: 90px;
    }

    .featuresCarousel .rightArrow.max {
        cursor: initial;
    }

.featuresCarousel > h4 {
    font: 30px 'Segoe UI Light';
    padding-bottom: 10px;
    padding-left: 80px;
    margin-bottom: 1px;
}

.featuresCarousel.noArrows > h4 {
    padding-left: 25px;
}
/* rtl adjust */
html[dir="rtl"] .featuresCarousel > h4 {
    padding-left: 0;
    padding-right: 80px;
}

html[dir="RTL"] .featuresCarousel.noArrows > h4 {
    padding-right: 25px;
}

.featuresCarousel .innerWrap {
    overflow: hidden;
}

    .featuresCarousel .innerWrap .container {
        overflow: hidden;
        position: relative;
    }

    .featuresCarousel .innerWrap.hasArrows {
        margin: 0 80px;
    }

.featuresCarousel .item, .featuresCarousel .container > * {
    float: left;
    background-color: white;
    position: relative;
}

.featuresCarousel.gridGroupCarousel .item {
    background-color: initial;
}

.featuresCarousel .item .articleWrap {
    padding-bottom: 1em;
    padding-right: 5%;
    padding-left: 5%;
}

    .featuresCarousel .item .articleWrap > a {
        background-repeat: no-repeat;
        background-position: center;
    }

.featuresCarousel .item .topLink {
    display: block;
    position: relative;
    height: 150px;
    margin-bottom: 10px;
    background-size: cover;
    background-repeat: no-repeat;
}

    .featuresCarousel .item .topLink .hero {
        width: 100%;
        position: absolute;
        min-height: 100%;
        background-size: 100%;
    }

.featuresCarousel .item.customerStory .topLink {
    background-size: 50%;
    background-position: center;
}

.featuresCarousel .item.video .hero {
    background-image: url(/global/enterprise/publishingimages/homepage/featu_play_btn.png) !important;
    background-position: center;
    background-size: 20%;
    background-repeat: no-repeat;
}

.featuresCarousel .item .hero {
    border-bottom: 3px solid black;
}

.featuresCarousel .item .details {
    padding: 0 5px 5px 10px;
}

.featuresCarousel .item h4 {
    font: 18px 'Segoe UI Light';
    line-height: 120%;
    margin-bottom: 5px;
}

.featuresCarousel .item .carouselCTA {
    font-size: 13px;
    display: block;
    line-height: 150%;
}

.featuredArea {
    background: url(/global/enterprise/publishingimages/homepage/loader/html5_video_loader_black.gif) center no-repeat;
    min-height: 50px;
}

.featuresCarousel, .non_featuredArea {
    min-height: 50px;
}

html[dir="RTL"] .featuresCarousel, html[dir="RTL"] .non_featuredArea {
    text-align: right;
}

/*input PAGE CAROUSEL*/

.gridGroupCarousel.featuresCarousel {
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin-right: 3px;
    margin-bottom: 35px;
    height: auto;
    min-height: initial;
    border: none;
    background-color: #eee;
}

    .gridGroupCarousel.featuresCarousel #non_featuredArea1 gridGroupCarousel .nf_article {
        min-height: initial !important;
    }

    .gridGroupCarousel.featuresCarousel .outerWrap {
        position: relative;
    }

    .gridGroupCarousel.featuresCarousel .controls {
        position: absolute;
        right: 20px;
        bottom: 0px;
    }

        .gridGroupCarousel.featuresCarousel .controls .selector {
            float: left;
            background-image: url('http://microsoft.com/global/enterprise/PublishingImages/epgHomeHero2/car_btns_sprite.png');
            background-repeat: no-repeat;
            background-position: 0px -19px;
            width: 19px;
            height: 21px;
            margin-top: -1px;
            margin-left: 0px;
            cursor: pointer;
            list-style-type: none;
        }

            .gridGroupCarousel.featuresCarousel .controls .selector.selected {
                background-position: 0px 0px;
            }

    .gridGroupCarousel.featuresCarousel .featuredArticle {
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0 !important;
    }

    .gridGroupCarousel.featuresCarousel .innerWrap {
        overflow: hidden;
        position: relative;
    }

    .gridGroupCarousel.featuresCarousel .contact .contactWrap {
        background-color: white;
        margin: 20px;
    }

    .gridGroupCarousel.featuresCarousel .contact .contactOptionsWrap {
        margin: 5px 0;
        font-size: 13px;
    }

    .gridGroupCarousel.featuresCarousel .innerWrap > * {
        float: left;
        width: 100%;
    }

    .gridGroupCarousel.featuresCarousel .contact .profilePic {
        width: 100px;
        float: left;
        margin: 10px 20px 10px 10px;
    }

    .gridGroupCarousel.featuresCarousel .contact .right {
        overflow: hidden;
    }

    .gridGroupCarousel.featuresCarousel .contact h3 {
        font: 20px 'Segoe UI Light', 'Segoe UI', Arial, Verdana, Tahoma, Sans-Serif;
        margin-bottom: 10px;
    }

    .gridGroupCarousel.featuresCarousel .contact p {
        font: 14px "Segoe Ui Semibold", 'Segoe UI', Arial, Verdana, Tahoma, Sans-Serif;
        margin-bottom: 5px;
    }

    .gridGroupCarousel.featuresCarousel .contact .contactOptions {
        padding: 3px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin: 10px auto;
        min-width: 75%;
        clear: both;
        max-width: 80%;
    }

        .gridGroupCarousel.featuresCarousel .contact .contactOptions .contactm {
            display: block;
        }

            .gridGroupCarousel.featuresCarousel .contact .contactOptions .contactm > * {
                display: inline-block;
            }

        .gridGroupCarousel.featuresCarousel .contact .contactOptions .inputHolder {
            overflow: hidden;
            clear: right;
        }

            .gridGroupCarousel.featuresCarousel .contact .contactOptions .inputHolder input {
                max-width: 90%;
                width: 100%;
                font-size: 80%;
                padding: 5px;
            }

        .gridGroupCarousel.featuresCarousel .contact .contactOptions .contactm img {
            max-width: 100%;
            background-color: #0072c6;
            width: 25px;
            height: 25px;
            vertical-align: middle;
            margin-right: 5px;
        }

        .gridGroupCarousel.featuresCarousel .contact .contactOptions .contactm:hover img {
            background-color: #008cf2;
        }

        .gridGroupCarousel.featuresCarousel .contact .contactOptions .contactm.telephone {
            display: none;
        }

        .gridGroupCarousel.featuresCarousel .contact .contactOptions .contactm.linkedin {
            background-image: url(/global/enterprise/nl-nl/publishingimages/contactcontributor/linkedin.png);
        }

        .gridGroupCarousel.featuresCarousel .contact .contactOptions .contactm.email {
            background-image: url(/global/enterprise/nl-nl/publishingimages/contactcontributor/email.png);
        }

        .gridGroupCarousel.featuresCarousel .contact .contactOptions .contactm.twitter {
            background-image: url(/global/enterprise/nl-nl/publishingimages/contactcontributor/twitter.png);
        }




.featuresCarousel .item .articleWrap {
    border: none;
}

#epgSuccessStoriesCarousel_3 {
    color: white;
}

.featuresCarousel .item .articleWrap > a {
    background-size: 100%;
    background-position:0;

}

#epgSuccessStoriesCarousel_3 {
    padding: 2em 0;
    margin-bottom: 20px;
}

    #epgSuccessStoriesCarousel_3 .epgOwlCarousel-Title {
        font-size: 21px;
        padding-top: .5em;
    }

    #epgSuccessStoriesCarousel_3 .epgOwlCarousel-Desc {
        padding-top: .2em;
        color: rgb(255, 255, 255);
    }

.epgOwlCarouselWrapper {
    padding: 2em 0;
}

    .epgOwlCarouselWrapper .owl-carousel .item::selection, .owl-columns::selection, .owl-row::selection,
    .epgOwlCarouselWrapper-Body::selection, .epgOwlCarouselWrapper::selection {
        background: transparent;
    }

.epgOwlCarouselWrapper-prev-arrow {
    background-image: url('/global/en-us/education/PublishingImages/school-leaders/icon_prev_white.png');
}

.epgOwlCarouselWrapper-next-arrow {
    background-image: url('/global/en-us/education/PublishingImages/school-leaders/icon_right_white.png');
}

.epgEducationHero-Image {
    background-repeat: no-repeat;
    background-position-x: center;
}


@media screen and (max-width: 2600px), only screen and (max-device-width: 2600px) {
    .epgOwlCarouselWrapper-prev-arrow, .epgOwlCarouselWrapper-next-arrow {
        display: none;
    }
}


@media screen and (max-width: 1180px), only screen and (max-device-width: 1180px) {
    .epgPSTouchCarousel {
        margin-left: 20px;
    }
}

@media screen and (max-width: 600px), only screen and (max-device-width: 600px) {
    .epgOwlCarouselWrapper-prev-arrow, .epgOwlCarouselWrapper-next-arrow {
        display: block;
    }
}

@media screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .featuresCarousel .leftArrow .arrow, .featuresCarousel .rightArrow .arrow {
        width: 33px;
        height: 32px;
    }

    .featuresCarousel .innerWrap.hasArrows {
        margin: 0 45px;
    }

    .featuresCarousel > h4 {
        padding-left: 7px;
    }
}
