.desktopView
{
    position: relative;
    margin: auto;
}

.desktopView > *
{
    position: absolute;
    z-index: 1;
}

.animation .nav-wrapper.anim-carousle.mobile
{
    display: none;
}

.desktopView .tilt2
{
    top: 20%;
    width: 28%;
    left: 56%;
    z-index: 1;
}
.full-bleed .desktopView .tilt2{ 
    top: 20%;
    width: 28%;
    left: 56%
}
.desktopView .tilt1
{
    left: 56%;
    width: 20%;
    top: 10%;
    z-index:1;
}
.full-bleed .desktopView .tilt1{ 
    left: 56%;
    width: 20%;
    top: 10%;   
}
.rtm-editorial-block .desktopView .block-content-container
{
    padding-top: 0px;
}

.lt-ie9 .rtm-editorial-block .desktopView .block-content-container
{
    padding-top: 62px;
}

.bganimeffects
{
    background-size: 110% 100%;
}

#surface2-Kickstand img
{
    position: absolute;
}

#surface-2-comp6.rtm-editorial-block .desktopView .block-wrapper
{
    overflow: visible;
}

/* animtargates*/
.anim-target
{
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
}

#anim-target
{
    top: 15%;
}

#anim-target1
{
    top: 18%;
}

#anim-target2
{
    top: 22%;
}

#anim-target3
{
    top: 70%;
}

#anim-target4, #anim-target5, #anim-target6, #anim-target7
{
    top: 10%;
}

#content-anim-target1, #content-anim-target2, #content-anim-target3, #content-anim-target4, #content-anim-target5, #content-anim-target6, #content-anim-target7, #content-anim-target8, #content-anim-target9
{
    top: 10%;
}

#bg-anim-target1, #bg-anim-target2, #bg-anim-target3
{
    top: 40%;
}

#fg-anim-target1, #fg-anim-target2, #fg-anim-target3
{
    top: 30%;
}

#fg-anim-target4, #fg-anim-target5, #fg-anim-target6, #fg-anim-target7, #bg-anim-target4, #bg-anim-target5, #bg-anim-target6, #bg-anim-target7
{
    top: 10%;
}

#anim-first-content-target
{
    top: 10%;
}

.desktopView .unleashImage
{
    float: right;
}

#surface-mini-comp5, #surface-mini-comp7
{
    overflow: hidden;
}

.lt-ie9 .desktopView .tilt2
{
    display: none;
}

@media only screen and (min-width:961px) and (max-width:1600px)
{
    .desktopView .tilt2
    {
        top: 24%;
        width: 26%;
        left: 45%;
    }

    .desktopView .tilt1
    {
        left: 45%;
        width: 17%;
        top: 20%;
    }
}
@media only screen and (min-width: 961px)
{
    #surface2 .rtm-header, #surfacepro3 .rtm-header, #surfacemini .rtm-header
    {
        position: fixed;
        z-index: 99;
    }
}

@media only screen and (min-width: 641px)
{
    .rtm-eb-media-placement-left .desktopView .block-content-container.anim-block
    {
        position: absolute;
        left: 68%;
    }

    .rtm-eb-media-placement-left .desktopView .block-content-container.rtm-eb-text-width-thirty-five-percent-text.anim-block
    {
        left: 60%;
    }

    .rtm-eb-media-placement-left .desktopView .block-content-container.rtm-eb-text-width-two-third-text.anim-block
    {
        left: 64%;
    }

    .rtm-eb-media-placement-left .desktopView .block-content-container.rtm-eb-text-width-one-fourth-text.anim-block
    {
        left: 78%;
    }
    .full-bleed .rtm-eb-media-placement-left .desktopView .block-content-container.rtm-eb-text-width-one-fourth-text.anim-block { 
          left: 65%;
    }

    .rtm-eb-media-placement-right .desktopView .block-content-container.anim-block
    {
        position: absolute;
    }

    #surface-nyx-comp3 .block-plugins .rtm-image-button img
    {
        bottom: -30%!important;
    }

    #surface-nyx-comp6.rtm-editorial-block, #surface-mini-comp7.rtm-editorial-block, surfac-iris-comp5.rtm-editorial-block, .rtm-eb-media-type-SpriteWithParallax
    {
        overflow: hidden;
    }

    #surface-nyx-comp3.rtm-editorial-block .block-wrapper, #surface-nyx-comp6.rtm-editorial-block .block-wrapper, #surface-nyx-comp8.rtm-editorial-block .block-wrapper, #surface-mini-comp5 .block-wrapper, #surface-mini-comp7 .block-wrapper
    {
        overflow: visible;
    }

    .unleashImage, #surface-nyx-comp8.rtm-editorial-block .block-wrapper .rtm-image-container img, #surface-2-comp6.rtm-editorial-block .block-wrapper .rtm-image-container img, #surface-nyx-comp3.rtm-editorial-block .block-wrapper .rtm-image-container img
     {
        position: absolute;
        bottom: 0px;
      }
    #surface-nyx-comp3 .revolutionary
    {
        float: left;
        left: 0%;        
    }

    #surface-nyx-comp3 img.revolutionary {
        max-width: 120%;
        width: 108%;
    }
}

@media only screen and (max-width: 960px) and (min-width :641px)
{
.desktopView .tilt1
{
    top: 11%;
}
.full-bleed .desktopView .tilt1{ 
    top: 11%;   
}

    .rtm-eb-media-placement-left .desktopView .block-content-container.anim-block
    {
        left: 63%;
    }

    .rtm-eb-media-placement-left .desktopView .block-content-container.rtm-eb-text-width-thirty-five-percent-text.anim-block
    {
        left: 59%;
    }

    .rtm-eb-media-placement-left .desktopView .block-content-container.rtm-eb-text-width-two-third-text.anim-block
    {
        left: 63%;
    }

    .rtm-eb-media-placement-left .desktopView .block-content-container.rtm-eb-text-width-one-fourth-text.anim-block
    {
        left: 70%;
    }

    #surface-mini-comp7 .animation.desktopView .block-image-wrapper .rtm-image-container img
    {
        position: absolute;
    }

    .no-animation .tilt1
    {
        width: 18%;
        top: 17%;
        left: 45%;
    }

    .no-animation .tilt2
    {
        opacity: 0;
        width: 26%;
        top: 23%;
        left: 45%;
    }
}

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

    .animation .nav-wrapper.anim-carousle.mobile
    {
        display: block;
        padding-top: 10px;
    }

    .animation .tilt1
    {
        top: 3%;
        width: 22%;
        left: 54%;
    }
    .full-bleed .animation .tilt1
    {
        top: 3%;
        width: 22%;
        left: 54%;
    }

    .animation .tilt2
    {
        opacity: 0;
        top: 4%;
        left: 54%;
        width: 34%;
    }
    .full-bleed .animation .tilt2
    {
        opacity: 0;
        top: 5%;
        left: 54%;
        width: 34%;
    }
    #surface2-Kickstand .animation .nav-wrapper.anim-carousle.mobile nav ul li:last-child { 
        display:none;
    } 
    #surface2-Kickstand .animation .block-image-wrapper:first-child
    {
        /*Need to get this bg image dynamically using JQuery*/
        background-image: url('http://compass.surface.com/assets/37/a6/37a6c942-657d-4cee-a5f9-15da2e444b82.jpg?n=Surface_PDP_Surface2_mobile-ki.jpg');
        background-position: left;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 0;
        padding-bottom: 50%;
    }

    .animation .nav-wrapper.anim-carousle.mobile nav ul li
    {
        float: left;
    }

        .animation .nav-wrapper.anim-carousle.mobile nav ul li span a
        {
            font-size: 3em;
            line-height: 0px;
            color: rgba(0,0,0,0.5);
        }

        .animation .nav-wrapper.anim-carousle.mobile nav ul li.on span a
        {
            color: #0078d7;
        }

    .animation .nav-wrapper
    {
        text-align: center;
        display: block;
        position: static;
    }
}

@media only screen and (max-width: 400px)
{
    .animation .tilt1
    {
        top: 1%;
    }

    .animation .tilt2
    {
        top: 2%;
    }
    .full-bleed .animation .tilt1
    {
        top: 2%;
    }

    .full-bleed .animation .tilt2
    {
        top: 4%;
    }
}

/*Ipad Specific landscape mode css*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)
{
    #surface2-Kickstand.rtm-editorial-block.rtm-eb-type-hero .block-image-wrapper:nth-child(3)
    {
        z-index:0;
    }
    /*Kickstand css*/
    .animation.no-animation .tilt1
    {
         left: 55.9%;
         width: 20%;
         top: 11.9%;
    }

    .animation.no-animation .tilt2
    {
        top: 24%;
        width: 26%;
        left: 45%;
        display: none;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)
{

 #surface2-Kickstand.rtm-editorial-block.rtm-eb-type-hero .block-image-wrapper:nth-child(3)
    {
        z-index:0;
    }
   
  .no-animation .tilt1 {
  width: 20%;
  top: 12%;
  left: 56.7%;
}

}