.swatchBackground {
    position:absolute;
    top:0;bottom:0;right:2%;left:-50vw;
}
.rtl .swatchBackground{
    left:2%;
    right:-50vw;
}
.swatchBackgroundRight {
    position:absolute;
    top:0;bottom:0;right:-50vw; left:-2%;
}
.rtl .swatchBackgroundRight{
    left:-50vw; 
    right:-2%;
}

.swatch-content-container {overflow:hidden;}

/* position shinanigans*/
.swatch-panel-container {
    position: relative;
    overflow-y: hidden;
}

.swatch-panel-container .swatch-content-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    width: 100%;
    color: white;

}
.home-categories ul {
    margin-bottom:0;
}
.home-categories .rtm-image-container img {width:100%;}

.touts-block.home-categories {margin-top:84px;}
.touts-block.home-categories .tout {margin-bottom: 7px;}

.full .invisible .swatch-description, .full .invisible .heading, .full .invisible .swatch-cta{width:90%;}

.swatch-panel-container img {width: 100%;}

.swatch-panel-container .swatch-colored {
    background-color: #0078d7;
    opacity: 1.0;
}

.swatch-panel-container .swatch-heading{
    text-align: left;
}
.rtl .swatch-panel-container .swatch-heading{
    text-align: right;
}
.rtl div#EmbededVideoHero .close{
    right:auto;
    left:0;
}
.swatch-panel-container .swatch-heading:focus,
.swatch-panel-container .swatch-description:focus{
    outline: 1px dotted white;
}
/* DESKTOP */
@media screen and (min-width: 1084px) {
    .home-categories .secRow {
        margin-top: 42px;
    }
    .swatch-panel-container .swatch-text-container {
        padding-top: 70px; /* reduced from 84px*/
        padding-bottom: 79px;
    }
    .swatch-panel-container .tablet, .swatch-panel-container.mobile {
        display: none;
    }

    .swatch-panel-container.desktop{
        display: block;
    }
    /* Text formatting*/
    .swatch-panel-container .swatch-heading {
        color: white;
        padding-top: 0px;
        margin-top: 0px;
        margin-bottom: 16px; /* 32 */
    }

    /*homepage only*/
    #devkit-homeswatch .swatch-panel-container .swatch-heading {
        margin-bottom: 16px;
    }

    .swatch-panel-container .swatch-description {
        margin-bottom: 33px; /* 36px */
    }

    /*homepage only*/
    #devkit-homeswatch .swatch-panel-container .swatch-description {
        margin-bottom: 33px; /* 36px */
    }

    .swatch-panel-container .swatch-colored {
        opacity: 1.0;
    }
    .swatch-panel-container a {
        opacity: 1.0;
    }
}

@media screen and (max-width: 1400px) and (min-width: 1084px) {
    .swatch-panel-container .swatch-colored {
        top: 10%;
        bottom: 10%;
    }
}

@media screen and (max-width: 767px) and (min-width: 631px) {
    .swatch-panel-container .swatch-colored {
        top: 10%;
        bottom: 10%;
    }
}

/*@media screen and (max-width: 630px) and (min-width: 540px) {
    .swatch-panel-container .swatch-colored {
        top: 50%;
        bottom: 0;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        min-height: 245px;
        max-height: 245px;
        margin: 0 auto;
    }
}*/


/* TABLET */
@media screen and (max-width: 1083px) and (min-width: 540px) {
    .touts-block.home-categories {margin-top: 64px;}

    .swatch-panel-container .desktop, .swatch-panel-container.mobile {
        display: none;
    }

    .swatch-panel-container.tablet{
        display: block;
    }

    .swatch-panel-container .swatch-text-container {
        padding-top: 52px; /* reduced 8px from 64px*/
        padding-bottom: 60px;
    }

    .swatch-panel-container .swatch-heading {
        color: white;
        padding-top: 0px;
        margin-top: 0px;
        margin-bottom: 14px;
    }

    .swatch-panel-container .swatch-description {
        margin-bottom: 30px;
    }

    .swatch-panel-container .swatch-colored {
        opacity: 1.0;
    }

    .swatch-content-container .tablet .tablet-box {
        display:table;
    }
}

/* MOBILE */ 
@media screen and (max-width: 767px) {
    .touts-block.home-categories {margin-top:0;}


    .swatch-panel-container.desktop, .swatch-panel-container.tablet {
        display: none;
    }

    .swatch-panel-container.mobile{
        display: block;
        position: static;
    }

    .swatch-panel-container .swatch-text-container {
        padding-top: 56px;  /* reduced 8px from 64px*/
        padding-bottom: 56px;
    }

    
    .swatch-panel-container.mobile .swatch-text-container {
        padding-top: 22px;
        padding-bottom: 28px;
    }

    #devkit-homeswatch .swatch-panel-container.mobile .swatch-text-container {
        padding-top: 26px;
        padding-bottom: 44px;
        float:right;
    }

    #devkit-gridswatch .swatch-panel-container.mobile .swatch-text-container {
        padding-bottom: 44px;
    }

    .swatch-panel-container .swatch-heading {
        color: white;
        padding-top: 0px;
        margin-top: 0px;
        margin-bottom: 15px;
    }

    #devkit-homeswatch .swatch-panel-container .swatch-heading {
        margin-bottom: 11px;
    }

    .swatch-panel-container .swatch-description {
        margin-bottom: 26px;
    }

    #devkit-gridswatch .swatch-panel-container .swatch-description {
        margin-bottom: 30px;
    }

    .swatch-panel-container .swatch-colored {
        opacity: 1.0;
    }
}

.swatch-panel-container .invisible {
    visibility: hidden;
}

.swatch-panel-container .swatch-cta a, .swatch-panel-container .swatch-description {
    color: #ffffff;
    opacity: 1.0;
}

.swatch-content-container .swatch-cta.PlayIcon, .swatch-panel-container.mobile .swatch-cta.PlayIcon {
    color: #ffffff;
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding-left: 42px;
    padding-top: 3px;
    background-image: url("//c.s-microsoft.com/en-us/CMSImages/icon-msn-video-white.png?version=434de9a1-62af-b269-9665-77d7127ea145");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    height: 34px;/* One extra pixel so the BG doesn't loop*/
    text-align: left;
    font-size: 100%;
    opacity: 1.0;
}
.rtl .swatch-content-container .swatch-cta.PlayIcon, 
.rtl .swatch-panel-container.mobile .swatch-cta.PlayIcon{
    text-align:right;
    padding-left: 0px;
    padding-right: 42px;
    background-position: right;
}

.swatch-content-container .swatch-cta.Chevron, .swatch-panel-container.mobile .swatch-cta.Chevron{
    color: #ffffff;
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding-right: 42px;
    padding-top: 3px;
    background-image: url("//c.s-microsoft.com/en-us/CMSImages/icon-ChevronRightSmall_white.png?version=acceb345-ab93-e256-e42a-50621d20cdbf");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: right;
    height: 34px;/* One extra pixel so the BG doesn't loop*/
    text-align: left;
    font-size: 100%;
    opacity: 1.0;
}
#EmbededVideo {
    background-color: black;
}

#EmbededVideo svg {
    fill: white;
}
@media screen and (-ms-high-contrast: black-on-white) {
  #EmbededVideo svg {
    fill: black;
}
}


#EmbededVideo .close {
    /*position: relative;*/
    /*position: absolute;*/
    /*width: 100%;*/
    display: none;
    /*background-color: rgb(0, 0, 0);*/
    right: 0;
    height: 40px;
    padding: 0;
    font-size: 0;
    background-color: transparent;
    float: right;
    margin-bottom:1px;
}

#EmbededVideoHero, #EmbededVideo {
    margin-top: 1px;
}

#EmbededVideoHero:focus, #EmbededVideo:focus {
   outline: 1px dashed #000000;
}

#EmbededVideo .close:focus{
    outline: dotted 1px white;
}
#EmbededVideoHero .close {
    /*position: relative;*/
    position: absolute;
    /*width: 100%;*/
    display: none;
    /*background-color: rgb(0, 0, 0);*/
    right: 0;
    margin-right:90px;
    padding: 0;
    font-size: 0;
    background-color: transparent;
    margin-top: 14px;
}

#EmbededVideoHero .close:focus{
    outline: dotted 1px white;
}

#EmbededVideoHero svg{
    fill:white;
}

#EmbededVideo .close span {
    float: right;
    color: #fff;
    font-size: 20px;
    font-weight: lighter;
    cursor: pointer;
    /*margin-right: 90px;*/
    margin: 10px 10px 0px 10px;
}
.rtl #EmbededVideo .close span {
    float: left;
}
#EmbededVideoHero .close span {
    float: right;
    color: #fff;
    font-size: 20px;
    font-weight: lighter;
    cursor: pointer;
    /*margin-right: 90px;*/
    /*margin-top: 10px;*/
}
@media screen and (-ms-high-contrast: black-on-white) {
  #EmbededVideoHero svg {
    fill: black;
}
}
.close svg:focus{
    outline: dotted 1px white;
}

#EmbededVideo video {
    width:100%;
}
#EmbededVideoHero {
    background-color:black;
}
.players {
    text-align:center;
    position:relative;
}
@media screen and (-ms-high-contrast: active) {
  /* All high contrast styling rules */
  .swatch-content-container .swatch-cta.PlayIcon, .swatch-panel-container.mobile .swatch-cta.PlayIcon {
    color: #ffffff;
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding-left: 42px;
    padding-top: 3px;
    background-image: url("//c.s-microsoft.com/en-us/CMSImages/icon-msn-video-white.png?version=434de9a1-62af-b269-9665-77d7127ea145");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    height: 34px;/* One extra pixel so the BG doesn't loop*/
    text-align: left;
    font-size: 100%;
    opacity: 1.0;
}
}
@media screen and (-ms-high-contrast: white-on-black) {
   .swatch-content-container .swatch-cta.PlayIcon, .swatch-panel-container.mobile .swatch-cta.PlayIcon {
    color: #ffffff;
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding-left: 42px;
    padding-top: 3px;
    background-image: url("//c.s-microsoft.com/en-us/CMSImages/icon-msn-video-white.png?version=434de9a1-62af-b269-9665-77d7127ea145");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    height: 34px;/* One extra pixel so the BG doesn't loop*/
    text-align: left;
    font-size: 100%;
    opacity: 1.0;
}
}
@media screen and (-ms-high-contrast: black-on-white) {
    .swatch-content-container .swatch-cta.PlayIcon, .swatch-panel-container.mobile .swatch-cta.PlayIcon {
        color: #000000;
        width: 100%;
        display: block;
        box-sizing: border-box;
        padding-left: 42px;
        padding-top: 3px;
        background-image: url("http://compass.microsoft.com/assets/4e/7d/4e7df2a0-988e-4fea-94aa-928adc54f82b.png?n=icon-msn-video-black.png");
        background-size: 30px 30px;
        background-repeat: no-repeat;
        height: 34px; /* One extra pixel so the BG doesn't loop*/
        text-align: left;
        font-size: 100%;
        opacity: 1.0;
    }
}