/*
    iPad Pro Select CSS
    ===============================================
*/

/* Animations START */

.as-productdecision-selectionmedia {
    cursor: default;
}

.as-productdecision-selectionmedia-ambient .iphone-ambient-center {
    border: none;
}
.ipadpro-ambient .scene3::after {
    content: '';
    display: block;
    width: 490px;
    height: 1px;
    background: #d6d6d6;
    position: absolute;
    bottom: -621px;
    left: 0;
    right: 0;
}
@media only screen and (max-width:736px) and (max-device-width:768px) {
    .ipadpro-ambient .scene3::after {
        display: none;
    }
}

.ipadpro-ambient .keyframe {
    display: block;
    position: absolute;
    background: #fff;
    width: 70%;
    height: auto;
    z-index: -1;
}

.ipadpro-ambient .scene1 img {
    height: auto;
    width: 460px;
}
.ipadpro-ambient .scene2 img {
    height: auto;
    width: 485px;
}
.ipadpro-ambient .scene3 img {
    height: auto;
    width: 420px;
}

.ipadpro-ambient .keyframe > img,
.ipadpro-ambient .keyframe > div {
    position: absolute;
    display: inline;
}

.ipadpro-ambient-center {
    position: relative;
    min-height: 624px;
    overflow: visible !important;
}

.as-productdecision-selectionmedia-opengallerybtnwrapper {
    height: 100px;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.ipadpro-ambient .scene1,
.ipadpro-ambient .scene2,
.ipadpro-ambient .scene3 {
    display: block;
    /* targets ie 8 and 9 */
    display: none\9;
}

.no-supports-animation .ipadpro-ambient-center .scene2,
.no-supports-animation .ipadpro-ambient-center .scene3 {
    display: none;
}


.ipadpro-ambient-center .scene1-1 {
    margin-top: 110px;
    margin-left: -173px;
}
.scene1-1-shadow {
    width: 55px;
    filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 999px 0 999px 0;
    position: absolute;
    bottom: 22px;
    right: 202px;
    height: 300px;
    z-index: 1;
    transform: rotate(-24deg);
}
.ipadpro-ambient-center .scene1-2 {
    margin-top: 102px;
    margin-left: -168px;
}
.scene1-2-shadow {
    width: 55px;
    filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 999px 0 999px 0;
    position: absolute;
    bottom: 40px;
    right: 176px;
    height: 300px;
    z-index: 1;
    transform: rotate(-20deg);
}
.ipadpro-ambient-center .scene1-3 {
    margin-top: 94px;
    margin-left: -162px;
}
.scene1-3-shadow {
    width: 55px;
    filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 999px 0 999px 0;
    position: absolute;
    bottom: 51px;
    right: 148px;
    height: 300px;
    z-index: 1;
    transform: rotate(-16deg);
}
.ipadpro-ambient-center .scene1-4 {
    margin-top: 86px;
    margin-left: -154px;
}


.ipadpro-ambient-center .scene2-1 {
    margin-top: 112px;
    margin-left: -163px;
}
.ipadpro-ambient-center .scene2-2 {
    margin-top: 90px;
    margin-left: -160px;
}
.scene2-shadow {
    width: 55px;
    filter: blur(8px);
    background-color: rgba(0, 0, 0, .4);
    border-radius: 254px 999px 999px 246px;
    position: absolute;
    top: 84px;
    z-index: -1;
    transform: rotate(22deg);
}

.ipadpro-ambient-center .scene3-1 {
    margin-top: 187px;
    margin-left: -123px;
    transform: rotate(3deg);
}



/* Scene 1 */
.ipadpro-ambient .scene1-1 {
    -webkit-animation: scene1-1-anim 24000ms linear 0s infinite;
    animation: scene1-1-anim 24000ms ease-in-out 0s infinite;
}
.ipadpro-ambient .scene1-2 {
    -webkit-animation: scene1-2-anim 24000ms ease-in-out 0s infinite;
    animation: scene1-2-anim 24000ms ease-in-out 0s infinite;
}
.ipadpro-ambient .scene1-3 {
    -webkit-animation: scene1-3-anim 24000ms ease-in-out 0s infinite;
    animation: scene1-3-anim 24000ms ease-in-out 0s infinite;
}
.ipadpro-ambient .scene1-4 {
    -webkit-animation: scene1-4-anim 24000ms ease-in-out 0s infinite;
    animation: scene1-4-anim 24000ms ease-in-out 0s infinite;
}
.ipadpro-ambient .scene1-1-shadow {
    -webkit-animation: scene1-1-shadow-anim 24000ms ease-in-out 0s infinite;
    animation: scene1-1-shadow-anim 24000ms ease-in-out 0s infinite;
}
.ipadpro-ambient .scene1-2-shadow {
    -webkit-animation: scene1-2-shadow-anim 24000ms ease-in-out 0s infinite;
    animation: scene1-2-shadow-anim 24000ms ease-in-out 0s infinite;
}
.ipadpro-ambient .scene1-3-shadow {
    -webkit-animation: scene1-3-shadow-anim 24000ms ease-in-out 0s infinite;
    animation: scene1-3-shadow-anim 24000ms ease-in-out 0s infinite;
}
.ipadpro-ambient .scene1-1 img {
    -webkit-animation: scene1-1-anim-img 24000ms linear 0s infinite;
    animation: scene1-1-anim-img 24000ms ease-in-out 0s infinite;
    transform-origin: 50% 100%;
}
.ipadpro-ambient .scene1-2 img {
    -webkit-animation: scene1-2-anim-img 24000ms ease-in-out 0s infinite;
    animation: scene1-2-anim-img 24000ms ease-in-out 0s infinite;
    transform-origin: 50% 100%;
}
.ipadpro-ambient .scene1-3 img {
    -webkit-animation: scene1-3-anim-img 24000ms ease-in-out 0s infinite;
    animation: scene1-3-anim-img 24000ms ease-in-out 0s infinite;
    transform-origin: 50% 100%;
}
.ipadpro-ambient .scene1-4 img {
    -webkit-animation: scene1-4-anim-img 24000ms ease-in-out 0s infinite;
    animation: scene1-4-anim-img 24000ms ease-in-out 0s infinite;
    transform-origin: 50% 100%;
}
@keyframes scene1-1-anim {
    0% { transform:translate(0,0); }
    30%  { transform:translate(0,0); }
    100% { transform:translate(0,0); }
}
@keyframes scene1-2-anim {
    0% { transform:translate(0,0); }
    30%  { transform:translate(10px,-15px); }
    100% { transform:translate(10px,-15px); }
}
@keyframes scene1-3-anim {
    0% { transform:translate(0,0); }
    30%  { transform:translate(20px,-30px); }
    100% { transform:translate(20px,-30px); }
}
@keyframes scene1-4-anim {
    0% { transform:translate(0,0); }
    30%  { transform:translate(30px,-45px); }
    100% { transform:translate(30px,-45px); }
}

@keyframes scene1-1-anim-img {
    0% { transform:rotate(6deg); }
    30%  { transform:rotate(0deg); }
    100% { transform:rotate(0deg); }
}
@keyframes scene1-2-anim-img {
    0% { transform:rotate(2deg); }
    30%  { transform:rotate(0deg); }
    100% { transform:rotate(0deg); }
}
@keyframes scene1-3-anim-img {
    0% { transform:rotate(-2deg); }
    30%  { transform:rotate(0deg); }
    100% { transform:rotate(0deg); }
}
@keyframes scene1-4-anim-img {
    0% { transform:rotate(-6deg); }
    30%  { transform:rotate(0deg); }
    100% { transform:rotate(0deg); }
}

@keyframes scene1-1-shadow-anim {
    0% {
        filter: blur(8px);
        opacity: 1;
    }
    30%  {
        filter: blur(30px);
        opacity: .6;
    }
    100% {
        filter: blur(30px);
        opacity: .6;
    }
}
@keyframes scene1-2-shadow-anim {
    0% {
        filter: blur(8px);
        opacity: 1;
    }
    30%  {
        filter: blur(30px);
        opacity: .6;
    }
    100% {
        filter: blur(30px);
        opacity: .6;
    }
}
@keyframes scene1-3-shadow-anim {
    0% {
        filter: blur(8px);
        opacity: 1;
    }
    30%  {
        filter: blur(30px);
        opacity: .6;
    }
    100% {
        filter: blur(30px);
        opacity: .6;
    }
}




/* Scene 2 */
.ipadpro-ambient .scene2-1 {
    -webkit-animation: scene2-1-anim 24000ms ease-in-out 0s infinite;
    animation: scene2-1-anim 24000ms ease-in-out 0s infinite;
}
.ipadpro-ambient .scene2-2 {
    -webkit-animation: scene2-2-anim 24000ms ease-in-out 0s infinite;
    animation: scene2-2-anim 24000ms ease-in-out 0s infinite;
}

.ipadpro-ambient .scene2-shadow {
    -webkit-animation: scene2-shadow 24000ms ease-in-out 0s infinite;
    animation: scene2-shadow 24000ms ease-in-out 0s infinite;
}
@keyframes scene2-1-anim {
    38%  { transform:translate(0,0); }
    63%  { transform:translate(22px,-35px); }
    100% { transform:translate(22px,-35px); }
}
@keyframes scene2-2-anim {
    38%  { transform:translate(0,0); }
    63%  { transform:translate(-22px,70px); }
    100% { transform:translate(-22px,70px); }
}
@keyframes scene2-shadow {
    38%  {
        height: 304px;
        right: 195px;
    }
    63%  {
        right: 172px;
        height: 190px;
    }
    100% {
        right: 172px;
        height: 190px;
    }
}


/* Scene 3 */
.ipadpro-ambient .scene3-1 {
    -webkit-animation: scene3-1-anim 24000ms linear 0s infinite;
    animation: scene3-1-anim 24000ms ease-in-out 0s infinite;
    transform-origin: 100% 100%;
}
.ipadpro-ambient .scene3-1 img {
    -webkit-animation: scene3-1-img-anim 24000ms linear 0s infinite;
    animation: scene3-1-img-anim 24000ms ease-in-out 0s infinite;
    transform-origin: 100% 100%;
}
@keyframes scene3-1-anim {
    69%  { transform:rotate(3deg); }
    95%  { transform:rotate(1deg); }
    100% { transform:rotate(1deg); }
}
@keyframes scene3-1-img-anim {
    69%  { transform:translateY(0); }
    95%  { transform:translateY(-75px); }
    100% { transform:translateY(-75px); }
}


/* opacity scene switching */
.ipadpro-ambient .scene1 {
    -webkit-animation: scene1-opacity 24000ms linear 0s infinite;
    animation: scene1-opacity 24000ms linear 0s infinite;
}
.ipadpro-ambient .scene2 {
    -webkit-animation: scene2-opacity 24000ms linear 0s infinite;
    animation: scene2-opacity 24000ms linear 0s infinite;
}
.ipadpro-ambient .scene3 {
    -webkit-animation: scene3-opacity 24000ms linear 0s infinite;
    animation: scene3-opacity 24000ms linear 0s infinite;
}
@-webkit-keyframes scene1-opacity {
    0%,100%,33% {
        opacity: 0
    }

    3%,30% {
        opacity: 1
    }
}
@-webkit-keyframes scene2-opacity {
    0%,100%,35%,66% {
        opacity: 0
    }

    38%,63% {
        opacity: 1
    }
}
@-webkit-keyframes scene3-opacity {
    0%,100%,69%,98% {
        opacity: 0
    }

    72%,95% {
        opacity: 1
    }
}
@keyframes scene1-opacity {
    0% { opacity: 0; }
    3%, 30%  { opacity: 1; }
    33%, 100% { opacity: 0; }
}
@keyframes scene2-opacity {
    0%, 35%  { opacity: 0; }
    38%, 63%  { opacity: 1; }
    66%, 100% { opacity: 0; }
}
@keyframes scene3-opacity {
    0%, 69%  { opacity: 0; }
    72%, 95%  { opacity: 1; }
    98%, 100% { opacity: 0; }
}
/* Animations END */






/* iPad Pro Selection Overrides  */


.as-imagelist-content.gone {
    display: none;
}

.as-buyflowherogallery .ase-gallery-item {
    background: #fff;
}

/* 23171149 */
.overlay-nav li img {
    width: auto;
}


/* 23110335 */
.as-productdecision-family-ipad {
    .as-dimension-capacity .as-dimension-summary {
        position: relative;
    }
}

/* 23170535 */
.as-multipartsnogallery-container .form-choice-selector-label {
    &:lang(en-US) {
        padding-bottom: 0px;
        padding-top: 0px;
    }
}
.as-multipartsnogallery-image {
    &:lang(en-US) {
        max-width: 60px;
        max-height: 60px;

        @include viewport(small) {
            max-width: 54px;
            max-height: 54px;
        }
    }
}


#tabs_compare .compare video {
    margin-top: -320px;
    margin-left: -350px;
}

span.pd-iphone-price-message.as-purchaseinfo-cover {
    color: #999;
}

.as-productdecision-header {
    z-index: 2;
}

.as-dimension-screensize .as-form-choiceselectorlabel-twocolleft {
    @include viewport(small) {
        white-space: initial;
    }
}

.as-productdecision-headerbox { z-index: 2; }

.as-productdecision-family-ipad .as-dimension-screensize .as-dimension-summary {
    position: relative;
}


.tab-overlay #tabs_compare .compare video {
    border: none;
}

.as-footnotes-sosumi p {margin-bottom:25px;}

/* INC060591030 */
.as-dimension .form-choice-selector-label .form-label,.renderplayer-grabbable,.renderplayer-grabbing .renderplayer-grabbable,.replay:hover{cursor:pointer}

.ru .as-purchaseinfo-chatonline {
    padding-left: 10px;
    padding-right: 10px;
}

.applecare_overlay .as-singlepartdescription .as-singlepartdescription-details-container .as-singlepartdescription-image {
    padding-left: 0;
    padding-top: 0;
}

.applecare_overlay .as-singlepartdescription .as-singlepartdescription-details-container .as-singlepartdescription-details {
    padding-left: 0;
}

.applecare_overlay .as-singlepartdescription .as-singlepartdescription-details-container .as-singlepartdescription-details .as-singlepartdescription-add {
    padding-top: 0;
}

.it .as-purchaseinfo-details .as-price-promotion > a sup {
    font-size: 16px;
    font-weight: 300;
    bottom: .4em;
}

@media only screen and (max-width:736px) and (max-device-width:768px) {
    .ru .as-purchaseinfo-chatonline {
        padding-left: 5%;
        padding-right: 5%;
    }

    .pt .as-price-disclaimer .as-price-disclaimertext {
        display: block;
        width: 200px;
    }

    .applecare_overlay .as-singlepartdescription .as-singlepartdescription-details-container .as-singlepartdescription-image {
        padding-left: inherit;
        padding-top: inherit;
    }

    .nl .as-accessory-cover .as-bfaccessory-title + p {
        padding-right: 20px;
    }
}

.gb .as-purchaseinfo-price .as-price-installment-overlay .icon-infocircle:before {
    display: none;
}

.as-accessory-cover .as-bfaccessory-title + p {
    color: #333;
}

.as-chatonline > div {
    display: inline-block;
}

.hu .as-dimension-label .form-choiceselectorlabel-twocolright {
    padding-left: 20px;
}

.fr .as-retailavailabilitysearch-searchactions {
    bottom: -10px;
}

.lu .as-dimension-label .form-choiceselectorlabel-twocolright,
.ch .as-dimension-label .form-choiceselectorlabel-twocolright {
    width: 80px;
}

.es .as-dimension-label .form-choiceselectorlabel-twocolright {
    width: 80px;
}

@media only screen and (max-device-width: 320px) {
    .as-promo-img {
        padding-right: 12px;
    }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
    .lu .as-dimension-label .form-choiceselectorlabel-twocolright,
    .ch .as-dimension-label .form-choiceselectorlabel-twocolright {
        width: 80px;
    }

    .es .as-dimension-label .form-choiceselectorlabel-twocolright {
        width: 80px;
    }
}

@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
    .lu .as-dimension-label .form-choiceselectorlabel-twocolright,
    .ch .as-dimension-label .form-choiceselectorlabel-twocolright {
        width: auto;
    }

    .es .as-dimension-label .form-choiceselectorlabel-twocolright {
        width: auto;
    }
}

@media only screen and (max-device-width: 320px) {
    .as-promo-img {
        padding-right: 12px;
    }
}

@media only screen and (max-width:736px) and (max-device-width:768px) {
    .as-chatonline > div {
        display: block;
    }

    .as-overlay-content .as-chatonline a {
        white-space: nowrap;
    }

    .applecare_overlay .as-chatonline > div > span {
        display: block;
    }

    .applecare_overlay .as-chatonline > div > span > a {
        white-space: nowrap;
    }

    .cn .as-dimension-label .as-form-choiceselectorlabel-large {
        letter-spacing: -0.04em
    }

    .hu .as-dimension-label .form-choiceselectorlabel-twocolright {
        padding-left: 0;
    }

    /* <rdar://problem/32350968> DCM QA - [J207][MOW][Step 1][US]: Hero image doesn't match handoff */
    .as-productdecision-selectionmedia-opengallerybtn {
        margin: 12px 0 20px;
    }

    .as-dimension-Item1 .as-dimension-materializer-header {
        margin-top: 0;
    }

    .as-dimension-Item1 .as-dimension-materializer-header .as-dimension-header {
        border-top: solid 1px #d6d6d6;
        padding-top: 18px;
    }
}

/*Fix for INC063788474*/
@media only screen and (min-width: 769px){
    .pd-ipad-product-family-201706 .pd-billboard-product:lang(tr-TR) {
        padding-right: 8%;
    }
}

/*rdar://problem/37922808*/
.as-promo-content.as-promo-content-hide a {
  color: white;
}
/* Product Locator Geo Specific */
.jp input[name=dimensionScreensize] + .form-choice-selector-label {
    padding: 0 12px;
}
.fr input[name=dimensionScreensize] + .form-choice-selector-label {
    padding: 0 8px;
}
@media only screen and (max-width:736px) and (max-device-width:768px) {
    .jp input[name=dimensionScreensize] + .form-choice-selector-label {
        padding: 0 8px;
    }
    .fr input[name=dimensionScreensize] + .form-choice-selector-label {
        padding: 0 8px;
    }
}
/* End of PL changes */

/*set zero padding for no padding overlay*/
.applecare_overlay .as-overlay-content.as-overlay-contentnopadding,
.applecareplus_overlay .as-overlay-content.as-overlay-contentnopadding {
    padding: 0;
}

/*rdar://problem/39483211*/
.fr .as-productlocator-dimensions .form-choice-selector:checked~.form-choice-selector-label,
.jp .as-productlocator-dimensions .form-choice-selector:checked~.form-choice-selector-label {
    padding-left: 5px;
    padding-right: 5px;
}

/* PL overlay search STARTS */
.as-productlocator-form .ase-validator-message {
    margin-top: 0
}
.as-productlocator-autocomplete .form-icons-wrapper-left {
    position: absolute;
    margin: 0;
    top: 2px;
    left: 8px;
}
.as-productlocator-autocomplete ~ .as-productlocator-inputreset {
    position: absolute;
    right: 15px;
    top: 4px;
}
/* PL overlay search ENDS */

.rs-modularaccessory .as-addondetails-detail.rs-modularaccessory-learnmore {
    width: 75%;
}


.rs-modularaccessory .as-addondetails-detail.rs-modularaccessory-learnmore p {
    margin-top: -11px;
}

.rs-modularaccessory .as-icondetails-icon + .as-icondetails-detail {
    padding-right: 5px;
}

.rs-modularaccessory .as-addondetails-ipttext {
    font-weight: 400;
    padding-left: 28px;
}

.as-icondetails-detail .as-addondetails-label span {
    white-space: nowrap;
}

@media only screen and (max-device-width: 736px) and (max-width: 1023px) {
    .as-dimension-dimensionScreensize .form-choiceselectorlabel-twocolleft:lang(es-ES) {
        white-space: normal;
    }
}

@media only screen and (max-device-width: 736px) and (max-width: 1023px) {
    .as-icondetails-detail .as-addondetails-label span {
        white-space: normal;
    }
}

.as-addondetails>.as-icondetails {
    width: 75%;
}

.rs-modularaccessory .as-purchaseinfo-alignright {
    width: 25%
}