﻿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 .articleWrap {border-right: 1px solid #eee;}
.featuresCarousel .item, .featuresCarousel .container > * { float: left; background-color: white; position: relative; }
.featuresCarousel.gridGroupCarousel .item { background-color: initial; }
.featuresCarousel .item .articleWrap {  padding-bottom: 1em; }
   .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); }

@media screen and (max-width: 1180px), only screen and (max-device-width: 1180px) {
    .epgPSTouchCarousel {
    margin-left:20px;}
}


@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; }
}

