html.no-js picture[data-lazy] {
display: none !important
}
.section-ios .grid-item-horizontal, .section-ios .grid-item-vertical, glass-container {
display: block;
position: relative;
z-index: 1
}
.section-ios .grid-item-horizontal:after, .section-ios .grid-item-horizontal:before, .section-ios .grid-item-vertical:after, .section-ios .grid-item-vertical:before, glass-container:after, glass-container:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.section-ios .grid-item-horizontal glass-hardware, .section-ios .grid-item-horizontal glass-screen, .section-ios .grid-item-vertical glass-hardware, .section-ios .grid-item-vertical glass-screen, glass-container glass-hardware, glass-container glass-screen {
display: block;
position: absolute;
top: 0;
left: 0
}
.section-ios .grid-item-horizontal glass-hardware, .section-ios .grid-item-vertical glass-hardware, glass-container glass-hardware {
pointer-events: none;
z-index: 3
}
.section-ios .grid-item-horizontal glass-screen, .section-ios .grid-item-vertical glass-screen, glass-container glass-screen {
z-index: 4
}
.theme-dark {
background-color: #000
}
.theme-dark, .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 {
color: #f5f5f7
}
.theme-dark .link, .theme-dark a {
color: #2997ff
}
.theme-dark .footnote a {
color: inherit
}
.theme-dark .footnote a:hover {
color: #2997ff
}
.theme-dark .button {
background: #0071e3;
color: #fff
}
.theme-dark .button:hover {
background: #0077ed
}
.theme-dark .button:active {
background: #006edb
}
.theme-dark .button.disabled, .theme-dark .button:disabled {
background: #0071e3;
color: #fff;
opacity: .32
}
.theme-dark .button-neutral {
background: #f5f5f7;
color: #000
}
.theme-dark .button-neutral:hover {
background: #fff
}
.theme-dark .button-neutral:active {
background: #ededf2
}
.theme-dark .button-neutral.disabled, .theme-dark .button-neutral:disabled {
background: #f5f5f7;
color: #000;
opacity: .32
}
.theme-dark .button-secondary {
background: #333336;
color: #fff
}
.theme-dark .button-secondary:hover {
background: #353538
}
.theme-dark .button-secondary:active {
background: #303033
}
.theme-dark .button-secondary.disabled, .theme-dark .button-secondary:disabled {
background: #333336;
color: #fff;
opacity: .56
}
.theme-dark .button-secondary-alpha {
background: rgba(255, 255, 255, .2);
color: #fff
}
.theme-dark .button-secondary-alpha:hover {
background: rgba(255, 255, 255, .21)
}
.theme-dark .button-secondary-alpha:active {
background: rgba(255, 255, 255, .19)
}
.theme-dark .button-secondary-alpha.disabled, .theme-dark .button-secondary-alpha:disabled {
background: rgba(255, 255, 255, .2);
color: #fff;
opacity: .56
}
.theme-dark .violator, .theme-dark .violator-frameless {
background: transparent;
border-color: #f56300;
color: #f56300
}
.theme-dark .violator-secondary {
background: transparent;
border-color: #86868b;
color: #86868b
}
.section-accessories, .section-ar, .section-ways-to-buy {
padding-top: 122px
}
@media only screen and (max-width: 1068px) {
.section-accessories, .section-ar, .section-ways-to-buy {
padding-top: 124px
}
}
@media only screen and (max-width: 734px) {
.section-accessories, .section-ar, .section-ways-to-buy {
padding-top: 64px
}
}
.section-ar .ar-gallery {
margin-top: 53px
}
@media only screen and (max-width: 1068px) {
.section-ar .ar-gallery {
margin-top: 54px
}
}
@media only screen and (max-width: 734px) {
.section-ar .ar-gallery {
margin-top: 30px
}
}
.section-accessories .grid {
margin-top: 53px
}
@media only screen and (max-width: 1068px) {
.section-accessories .grid {
margin-top: 54px
}
}
@media only screen and (max-width: 734px) {
.section-accessories .grid {
margin-top: 30px
}
}
.section-ways-to-buy .carrier-offers {
margin-top: 53px
}
@media only screen and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers {
margin-top: 54px
}
}
@media only screen and (max-width: 734px) {
.section-ways-to-buy .carrier-offers {
margin-top: 30px
}
}
.section .accessories-intro, .section .ar-intro, .section .ways-to-buy-intro {
margin-top: 0
}
.claim-copy, .claim-prefix, .claim-title {
display: block
}
.claim-copy.typography-claim {
color: #1d1d1f
}
.claim-grid {
--gap: 1px;
--small-border-top: 1px solid #d2d2d7;
margin: 0;
width: 100%
}
@media only screen and (min-width: 735px) {
.claim-grid {
--col-1: 360px;
--col-2: 385px;
grid-template-columns: calc(var(--col-1) + var(--bg-overflow) / 2) 1fr calc(var(--col-2) + var(--bg-overflow) / 2);
grid-auto-rows: minmax(200px, auto);
grid-gap: var(--gap);
padding-bottom: var(--gap);
width: 100%
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.claim-grid {
--col-1: 290px;
--col-2: 285px
}
}
@media only screen and (min-width: 735px) {
html:not(.text-zoom) .claim-grid {
display: grid
}
}
.claim-grid-container {
position: relative;
margin: 0 auto;
overflow: hidden;
flex-shrink: 0;
display: flex;
justify-content: center
}
@media only screen and (min-width: 735px) {
.claim-grid-container {
--bg-overflow: 400px;
width: calc(100% + var(--bg-overflow));
transform: translateX(-50%);
left: 50%
}
}
@media only screen and (max-width: 1068px) {
.claim-grid-container {
--bg-overflow: 120px
}
}
html.text-zoom .claim-grid-container {
width: 100%
}
.claim-grid-background {
position: absolute;
z-index: -1;
top: -5%;
right: 0;
bottom: -50%;
left: 0;
margin: auto;
background: radial-gradient(closest-side, #d2d2d7, transparent)
}
@media only screen and (max-width: 734px) {
.claim-grid-background {
display: none
}
}
.claim-grid .claim {
background: #fff;
color: #6e6e73;
list-style-type: none
}
@media only screen and (max-width: 734px) {
.claim-grid .claim {
background: transparent;
padding-bottom: 35px
}
}
html.text-zoom .claim-grid .claim {
padding-left: 0;
padding-right: 0
}
@media only screen and (max-width: 734px) {
.claim-grid .claim + .claim {
border-top: var(--small-border-top);
padding-top: 25px
}
}
@media only screen and (min-width: 735px) {
.claim-grid .claim {
padding: 70px 40px 85px 60px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.claim-grid .claim {
padding: 55px 25px 60px 45px
}
}
@media only screen and (min-width: 735px) {
.claim-grid .claim:first-child, .claim-grid .claim:nth-child(4n), .claim-grid .claim:nth-child(4n+5) {
grid-column: span 2
}
}
.claim-grid .claim:nth-child(4n+2) .claim-title, .claim-grid .claim:nth-child(4n-1) .claim-title {
font-size: 32px;
line-height: 1.125;
font-weight: 600;
letter-spacing: .004em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(ja), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(ja) {
line-height: 1.21875;
font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(ko), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(ko) {
line-height: 1.21875;
font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(th), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(th) {
line-height: 1.375;
font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(ar), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(ar) {
font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-CN), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-HK), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-MO), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-TW), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
@media only screen and (max-width: 1068px) {
.claim-grid .claim:nth-child(4n+2) .claim-title, .claim-grid .claim:nth-child(4n-1) .claim-title {
font-size: 24px;
line-height: 1.1666666667;
font-weight: 600;
letter-spacing: .009em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(ja), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(ja) {
line-height: 1.25;
font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(ko), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(ko) {
line-height: 1.2916666667;
font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(th), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(th) {
line-height: 1.375;
font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(ar), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(ar) {
font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-CN), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-HK), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-MO), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-TW), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
}
@media only screen and (max-width: 734px) {
.claim-grid .claim:nth-child(4n+2) .claim-title, .claim-grid .claim:nth-child(4n-1) .claim-title {
font-size: 32px;
line-height: 1.125;
font-weight: 600;
letter-spacing: .004em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(ja), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(ja) {
line-height: 1.21875;
font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(ko), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(ko) {
line-height: 1.21875;
font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(th), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(th) {
line-height: 1.375;
font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(ar), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(ar) {
font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-CN), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-HK), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-MO), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.claim-grid .claim:nth-child(4n+2) .claim-title:lang(zh-TW), .claim-grid .claim:nth-child(4n-1) .claim-title:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
}
@media only screen and (min-width: 1069px) {
html:not(.text-zoom) .claim-grid .claim:nth-child(odd) {
padding-left: calc(81.66667px + var(--bg-overflow) / 2)
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.claim-grid .claim:nth-child(odd) {
padding-left: calc(var(--bg-overflow) / 2)
}
}
@media only screen and (min-width: 1069px) {
html:not(.text-zoom) .claim-grid .claim:nth-child(2n) {
padding-right: calc(81.66667px + var(--bg-overflow) / 2)
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.claim-grid .claim:nth-child(2n) {
padding-right: calc(var(--bg-overflow) / 2)
}
}
.claim-grid .claim-title {
margin-bottom: 15px
}
@media only screen and (max-width: 1068px) {
.claim-grid .claim-title {
margin-bottom: 8px
}
}
.claim-grid .claim-prefix {
margin-bottom: 7px
}
@media only screen and (max-width: 1068px) {
.claim-grid .claim-prefix {
margin-bottom: 12px
}
}
@media only screen and (max-width: 734px) {
.claim-grid .claim-prefix {
margin-bottom: 6px
}
}
.accordion {
margin: 0;
list-style: none
}
.accordion-item {
--accordion-border-width: 1px;
border-top: var(--accordion-border-width) solid;
font-size: 24px;
line-height: 1.1666666667;
font-weight: 600;
letter-spacing: .009em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
--accordion-border-color: #d2d2d7;
border-color: var(--accordion-border-color)
}
.accordion-item:first-child {
--accordion-border-width: 0
}
.accordion-item:lang(ja) {
line-height: 1.25;
font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(ko) {
line-height: 1.2916666667;
font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(th) {
line-height: 1.375;
font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(ar) {
font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
@media only screen and (max-width: 1068px) {
.accordion-item {
font-size: 21px;
line-height: 1.1904761905;
font-weight: 600;
letter-spacing: .011em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(ja) {
line-height: 1.2380952381;
font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(ko) {
line-height: 1.2858042857;
font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(th) {
line-height: 1.381002381;
font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(ar) {
font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
}
@media only screen and (max-width: 734px) {
.accordion-item {
font-size: 19px;
line-height: 1.2105263158;
font-weight: 600;
letter-spacing: .012em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(ja) {
line-height: 1.2631578947;
font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(ko) {
line-height: 1.3157894737;
font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(th) {
line-height: 1.3684410526;
font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(ar) {
font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-item:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
}
.accordion-item .accordion-nested .accordion-icon {
--accordion-icon-width: 24px
}
@media only screen and (max-width: 1068px) {
.accordion-item .accordion-nested .accordion-icon {
--accordion-icon-width: 21px
}
}
@media only screen and (max-width: 734px) {
.accordion-item .accordion-nested .accordion-icon {
--accordion-icon-width: 19px
}
}
.accordion-title {
font-size: inherit;
line-height: inherit;
letter-spacing: inherit
}
.accordion-title .accordion-title-text {
--accordion-title-max-width: 83.3333333333%;
max-width: var(--accordion-title-max-width)
}
.accordion-button {
letter-spacing: inherit;
display: flex;
justify-content: space-between;
align-items: baseline;
width: 100%;
position: relative;
--accordion-button-padding-top: 1em;
--accordion-button-padding-bottom: 1em;
padding-top: var(--accordion-button-padding-top);
padding-bottom: var(--accordion-button-padding-bottom)
}
.accordion-button:focus {
outline: none
}
.accordion-button:focus:after {
outline: 4px solid rgba(0, 125, 250, .6);
outline-offset: 1px
}
.accordion-button:focus:after[data-focus-method=mouse]:not(input):not(textarea):not(select), .accordion-button:focus:after[data-focus-method=touch]:not(input):not(textarea):not(select), .accordion-button:focus[data-focus-method=mouse]:not(input):not(textarea):not(select):after, .accordion-button:focus[data-focus-method=touch]:not(input):not(textarea):not(select):after {
outline: none
}
.accordion-button:after {
content: "";
display: block;
width: 100%;
top: .6em;
height: calc(100% - 1.2em);
position: absolute
}
.accordion-icon {
margin: 0;
transition: color 100ms linear;
display: flex;
justify-content: center;
align-items: center;
--accordion-icon-width: 1em;
--accordion-icon-height: auto;
--accordion-icon-stroke-width: 2.25;
width: var(--accordion-icon-width);
height: var(--accordion-icon-height);
stroke-width: var(--accordion-icon-stroke-width);
--accordion-icon-color: #86868b;
--accordion-icon-color-hover: #6e6e73;
color: var(--accordion-icon-color)
}
.accordion-icon .accordion-icon-svg {
overflow: visible;
--accordion-icon-svg-width: 1em;
width: var(--accordion-icon-svg-width)
}
.accordion-button:hover .accordion-icon {
color: var(--accordion-icon-color-hover)
}
.accordion-tray {
--accordion-transition-duration: 400ms;
margin: 0;
transition: height ease-in-out;
transition-duration: var(--accordion-transition-duration)
}
html.js .accordion-item.collapsed > .accordion-tray {
height: 0
}
.accordion-item.expanded > .accordion-tray {
overflow: visible
}
.accordion-item.animating > .accordion-tray, .accordion-item.collapsed > .accordion-tray, .accordion-tray {
overflow: hidden
}
@media (prefers-reduced-motion) {
.accordion-tray {
transition: none
}
}
.accordion-content {
--accordion-content-padding-top: 0em;
--accordion-content-padding-bottom: 1em;
padding-top: var(--accordion-content-padding-top);
padding-bottom: var(--accordion-content-padding-bottom)
}
.accordion-content .accordion-content-paragraph {
--accordion-content-paragraph-max-width: 83.3333333333%;
--accordion-content-paragraph-padding-top: 0em;
--accordion-content-paragraph-padding-bottom: 0.8em;
font-size: 17px;
line-height: 1.4705882353;
font-weight: 400;
letter-spacing: -0.022em;
max-width: var(--accordion-content-paragraph-max-width);
padding-top: var(--accordion-content-paragraph-padding-top);
padding-bottom: var(--accordion-content-paragraph-padding-bottom)
}
.accordion-content .accordion-content-paragraph:lang(ar) {
letter-spacing: 0em;
font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-content .accordion-content-paragraph:lang(ja) {
letter-spacing: 0em;
}
.accordion-content .accordion-content-paragraph:lang(ko) {
line-height: 1.5882352941;
letter-spacing: 0em;
font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-content .accordion-content-paragraph:lang(zh) {
letter-spacing: 0em
}
.accordion-content .accordion-content-paragraph:lang(th) {
line-height: 1.3529611765;
letter-spacing: 0em;
font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-content .accordion-content-paragraph:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-content .accordion-content-paragraph:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-content .accordion-content-paragraph:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-content .accordion-content-paragraph:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item {
font-size: 32px;
line-height: 1.125;
font-weight: 600;
letter-spacing: .004em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(ja) {
line-height: 1.21875;
font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(ko) {
line-height: 1.21875;
font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(th) {
line-height: 1.375;
font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(ar) {
font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
@media only screen and (max-width: 1068px) {
.accordion-elevated .accordion-item {
font-size: 28px;
line-height: 1.1428571429;
font-weight: 600;
letter-spacing: .007em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(ko) {
line-height: 1.25;
font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(th) {
line-height: 1.3928571429;
font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(ar) {
font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(ja) {
font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
}
@media only screen and (max-width: 734px) {
.accordion-elevated .accordion-item {
font-size: 24px;
line-height: 1.1666666667;
font-weight: 600;
letter-spacing: .009em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(ja) {
line-height: 1.25;
font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(ko) {
line-height: 1.2916666667;
font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(th) {
line-height: 1.375;
font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(ar) {
font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-elevated .accordion-item:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
}
.accordion-elevated .accordion-item .accordion-nested .accordion-icon {
--accordion-icon-width: 32px
}
@media only screen and (max-width: 1068px) {
.accordion-elevated .accordion-item .accordion-nested .accordion-icon {
--accordion-icon-width: 28px
}
}
@media only screen and (max-width: 734px) {
.accordion-elevated .accordion-item .accordion-nested .accordion-icon {
--accordion-icon-width: 24px
}
}
.accordion-reduced .accordion-item {
font-size: 17px;
line-height: 1.2353641176;
font-weight: 600;
letter-spacing: -0.022em;
font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(ar) {
letter-spacing: 0em;
font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(ja) {
letter-spacing: 0em;
font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(ko) {
line-height: 1.3529611765;
letter-spacing: 0em;
font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh) {
letter-spacing: 0em
}
.accordion-reduced .accordion-item:lang(th) {
line-height: 1.3529611765;
letter-spacing: 0em;
font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
@media only screen and (max-width: 1068px) {
.accordion-reduced .accordion-item {
font-size: 17px;
line-height: 1.2353641176;
font-weight: 600;
letter-spacing: -0.022em;
font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(ar) {
letter-spacing: 0em;
font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(ja) {
letter-spacing: 0em;
font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(ko) {
line-height: 1.3529611765;
letter-spacing: 0em;
font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh) {
letter-spacing: 0em
}
.accordion-reduced .accordion-item:lang(th) {
line-height: 1.3529611765;
letter-spacing: 0em;
font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
}
@media only screen and (max-width: 734px) {
.accordion-reduced .accordion-item {
font-size: 14px;
line-height: 1.2857742857;
font-weight: 600;
letter-spacing: -0.016em;
font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(ar) {
letter-spacing: 0em;
font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(ja) {
line-height: 1.3571828571;
letter-spacing: 0em;
font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(ko) {
line-height: 1.4285914286;
letter-spacing: 0em;
font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh) {
letter-spacing: 0em
}
.accordion-reduced .accordion-item:lang(th) {
line-height: 1.3571828571;
letter-spacing: 0em;
font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-item:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
}
.accordion-reduced .accordion-item .accordion-nested .accordion-icon {
--accordion-icon-width: 17px
}
@media only screen and (max-width: 1068px) {
.accordion-reduced .accordion-item .accordion-nested .accordion-icon {
--accordion-icon-width: 17px
}
}
@media only screen and (max-width: 734px) {
.accordion-reduced .accordion-item .accordion-nested .accordion-icon {
--accordion-icon-width: 14px
}
}
.accordion-reduced .accordion-content {
--accordion-content-padding-top: 0em;
--accordion-content-padding-bottom: 1em;
padding-top: var(--accordion-content-padding-top);
padding-bottom: var(--accordion-content-padding-bottom)
}
.accordion-reduced .accordion-content .accordion-content-paragraph {
--accordion-content-paragraph-max-width: 83.3333333333%;
--accordion-content-paragraph-padding-top: 0em;
--accordion-content-paragraph-padding-bottom: 0.8em;
font-size: 14px;
line-height: 1.4285914286;
font-weight: 400;
letter-spacing: -0.016em;
max-width: var(--accordion-content-paragraph-max-width);
padding-top: var(--accordion-content-paragraph-padding-top);
padding-bottom: var(--accordion-content-paragraph-padding-bottom)
}
.accordion-reduced .accordion-content .accordion-content-paragraph:lang(ar) {
letter-spacing: 0em;
font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-content .accordion-content-paragraph:lang(ja) {
letter-spacing: 0em;
font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-content .accordion-content-paragraph:lang(ko) {
line-height: 1.5714285714;
letter-spacing: 0em;
font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-content .accordion-content-paragraph:lang(zh) {
letter-spacing: 0em
}
.accordion-reduced .accordion-content .accordion-content-paragraph:lang(th) {
line-height: 1.3571828571;
letter-spacing: 0em;
font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-content .accordion-content-paragraph:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-content .accordion-content-paragraph:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-content .accordion-content-paragraph:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-reduced .accordion-content .accordion-content-paragraph:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-numbered {
--accordion-number-side-padding: 0.4em;
--accordion-number-icon-display: inline-block
}
.accordion-numbered .accordion-title-text {
display: flex;
align-items: baseline
}
.accordion-numbered .accordion-title-text:after, .accordion-numbered .accordion-title-text:before {
font-family: SF Pro Icons;
color: inherit;
display: inline-block;
font-style: normal;
font-weight: inherit;
font-size: inherit;
line-height: 1;
text-decoration: underline;
position: relative;
z-index: 1;
alt: "";
text-decoration: none
}
.accordion-numbered .accordion-title-text:before {
display: none
}
.accordion-numbered .accordion-title-text:after, .accordion-numbered .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-title-text:before {
padding-right: var(--accordion-number-side-padding);
display: inline-block;
top: 0
}
.accordion-numbered .accordion-title-text:after {
display: none
}
.accordion-numbered .accordion-title-text:before {
display: var(--accordion-number-icon-display)
}
.accordion-numbered .accordion-item:nth-child(2) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(2) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(3) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(3) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(4) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(4) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(5) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(5) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(6) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(6) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(7) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(7) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(8) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(8) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(9) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(9) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(10) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(10) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(11) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(11) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(12) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(12) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(13) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(13) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(14) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(14) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(15) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(15) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(16) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(16) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(17) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(17) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(18) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(18) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(19) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(19) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-item:nth-child(20) .accordion-title-text:after, .accordion-numbered .accordion-item:nth-child(20) .accordion-title-text:before {
content: "飴�"
}
.accordion-numbered .accordion-nested:not(.accordion-numbered) .accordion-title-text {
--accordion-number-icon-display: none
}
.accordion-inset {
--accordion-number-icon-width: 1.1875em;
--accordion-number-side-padding: 0.4em
}
.accordion-inset .accordion-content {
padding-left: calc(var(--accordion-number-icon-width) + var(--accordion-number-side-padding))
}
.accordion-inset .accordion-nested:not(.accordion-inset) .accordion-content {
--accordion-number-icon-width: 0;
--accordion-number-side-padding: 0
}
.accordion-nested .accordion-icon {
--accordion-icon-stroke-width: 2.75
}
.accordion-reduced .accordion-nested .accordion-icon {
--accordion-icon-stroke-width: 2.25
}
.accordion-toggle-all {
display: flex;
justify-content: flex-end
}
.accordion-toggle-all .accordion-toggle-all-button {
font-size: 14px;
line-height: 1.4285914286;
font-weight: 400;
letter-spacing: -0.016em;
margin-bottom: 12px
}
.accordion-toggle-all .accordion-toggle-all-button:lang(ar) {
letter-spacing: 0em;
font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-toggle-all .accordion-toggle-all-button:lang(ja) {
letter-spacing: 0em;
font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-toggle-all .accordion-toggle-all-button:lang(ko) {
line-height: 1.5714285714;
letter-spacing: 0em;
font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-toggle-all .accordion-toggle-all-button:lang(zh) {
letter-spacing: 0em
}
.accordion-toggle-all .accordion-toggle-all-button:lang(th) {
line-height: 1.3571828571;
letter-spacing: 0em;
font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-toggle-all .accordion-toggle-all-button:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-toggle-all .accordion-toggle-all-button:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-toggle-all .accordion-toggle-all-button:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-toggle-all .accordion-toggle-all-button:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.accordion-toggle-all .accordion-toggle-all-collapse.hidden, .accordion-toggle-all .accordion-toggle-all-expand.hidden {
display: none
}
.theme-dark.accordion .accordion-item, .theme-dark .accordion .accordion-item {
--accordion-border-color: #424245;
border-color: var(--accordion-border-color)
}
.theme-dark.accordion .accordion-icon, .theme-dark .accordion .accordion-icon {
--accordion-icon-color: #6e6e73;
--accordion-icon-color-hover: #86868b;
color: var(--accordion-icon-color)
}
.accordion-button:hover .theme-dark.accordion .accordion-icon, .accordion-button:hover .theme-dark .accordion .accordion-icon {
color: var(--accordion-icon-color-hover)
}
.theme-light.accordion .accordion-item, .theme-light .accordion .accordion-item {
--accordion-border-color: #d2d2d7;
border-color: var(--accordion-border-color)
}
.theme-light.accordion .accordion-icon, .theme-light .accordion .accordion-icon {
--accordion-icon-color: #86868b;
--accordion-icon-color-hover: #6e6e73;
color: var(--accordion-icon-color)
}
.accordion-button:hover .theme-light.accordion .accordion-icon, .accordion-button:hover .theme-light .accordion .accordion-icon {
color: var(--accordion-icon-color-hover)
}
.innovation-story-wrapper {
margin-left: auto;
margin-right: auto;
width: 980px
}
@media only screen and (min-width: 1441px) {
.innovation-story-wrapper {
margin-left: auto;
margin-right: auto;
width: 980px
}
}
@media only screen and (max-width: 1068px) {
.innovation-story-wrapper {
margin-left: auto;
margin-right: auto;
width: 692px
}
}
@media only screen and (max-width: 734px) {
.innovation-story-wrapper {
margin-left: auto;
margin-right: auto;
width: 87.5%
}
}
.innovation-story-wrapper:after, .innovation-story-wrapper:before {
content: " ";
display: table
}
.innovation-story-wrapper:after {
clear: both
}
@media only screen and (max-width: 734px) {
.innovation-story-wrapper {
width: auto
}
}
.innovation-story {
position: relative;
z-index: 1;
border-top: 0;
margin-top: 135px;
margin-bottom: 135px;
padding: 90px 0;
background-color: #f5f5f7
}
@media only screen and (max-width: 1068px) {
.innovation-story {
margin-top: 110px;
margin-bottom: 110px;
padding: 75px 0
}
}
@media only screen and (max-width: 734px) {
.innovation-story {
margin: 72px 22px 22px;
padding: 46px 0
}
.innovation-story.animating {
transition: margin 730ms ease-in-out
}
.innovation-story.innovation-story-active {
margin-left: 0;
margin-right: 0
}
}
@media only screen and (max-width: 734px) {
.innovation-story .innovation-story-content {
margin-left: auto;
margin-right: auto;
width: calc(100vw - 100px)
}
}
.innovation-story .innovation-story-header {
text-align: center
}
@media only screen and (max-width: 734px) {
.innovation-story .innovation-story-header {
text-align: left
}
}
html.text-zoom .innovation-story .innovation-story-headline {
flex-basis: 816.6666666667px;
max-width: 816.6666666667px
}
@media only screen and (max-width: 1068px) {
html.text-zoom .innovation-story .innovation-story-headline {
flex-basis: 576.6666666667px;
max-width: 576.6666666667px
}
}
.innovation-story.animating .innovation-story-button-close, .innovation-story.animating .innovation-story-button-open, html.no-enhance-innovation-story .innovation-story .innovation-story-button, html.no-js .innovation-story .innovation-story-button {
opacity: 0
}
.innovation-story .innovation-story-button-open {
margin-top: 48px;
margin-bottom: 0;
border: 2px solid #1d1d1f;
font-weight: inherit !important;
transition: opacity 170ms ease-in-out, background-color 350ms ease-in-out, color 350ms ease-in-out;
background: transparent;
color: #1d1d1f;
font-size: 17px;
line-height: 1.1764805882;
font-weight: 400;
letter-spacing: -0.022em;
min-width: 50px;
padding: 7px 10px
}
.innovation-story .innovation-story-button-open:hover {
background: rgba(255, 255, 255, .08)
}
.innovation-story .innovation-story-button-open:active {
background: rgba(0, 0, 0, .08)
}
.innovation-story .innovation-story-button-open.disabled, .innovation-story .innovation-story-button-open:disabled {
background: transparent;
color: #1d1d1f;
opacity: .32
}
.innovation-story .innovation-story-button-open:lang(ar) {
letter-spacing: 0em;
font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.innovation-story .innovation-story-button-open:lang(ja) {
letter-spacing: 0em;
font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.innovation-story .innovation-story-button-open:lang(ko) {
letter-spacing: 0em;
font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.innovation-story .innovation-story-button-open:lang(zh) {
letter-spacing: 0em
}
.innovation-story .innovation-story-button-open:lang(th) {
font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.innovation-story .innovation-story-button-open:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.innovation-story .innovation-story-button-open:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.innovation-story .innovation-story-button-open:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.innovation-story .innovation-story-button-open:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.innovation-story.expanded .innovation-story-button-open {
opacity: 0;
pointer-events: none;
cursor: auto
}
@media only screen and (max-width: 1068px) {
.innovation-story .innovation-story-button-open {
margin-top: 36px
}
}
.innovation-story .innovation-story-button-open:hover {
background: #000;
color: #f5f5f7
}
.innovation-story .innovation-story-button-open:hover:hover {
background: #141414
}
.innovation-story .innovation-story-button-open:hover:active {
background: #000
}
.innovation-story .innovation-story-button-open:hover.disabled, .innovation-story .innovation-story-button-open:hover:disabled {
background: #000;
color: #f5f5f7;
opacity: .32
}
.innovation-story .innovation-story-button-close-wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
padding: 28px 0
}
@media only screen and (max-width: 1068px) {
.innovation-story .innovation-story-button-close-wrapper {
padding: 16px 0
}
}
@media only screen and (max-width: 734px) {
.innovation-story .innovation-story-button-close-wrapper {
padding: 13px 0
}
}
.innovation-story .innovation-story-button-close {
position: sticky;
top: calc(28px + var(--r-localnav-height));
left: 0;
display: block;
width: 28px;
height: 28px;
font-style: normal;
font-size: 24px;
font-weight: 500;
color: #1d1d1f;
transform: translateX(28px);
opacity: 0;
transition: opacity 170ms ease-in-out;
border-radius: 50%
}
.innovation-story.collapsed .innovation-story-button-close {
opacity: 0;
pointer-events: none;
cursor: auto
}
.innovation-story.expanded .innovation-story-button-close {
opacity: 1
}
@media only screen and (max-width: 1068px) {
.innovation-story .innovation-story-button-close {
top: calc(16px + var(--r-localnav-height));
transform: translateX(16px)
}
}
@media only screen and (max-width: 734px) {
.innovation-story .innovation-story-button-close {
top: calc(13px + var(--r-localnav-height));
transform: translateX(13px)
}
}
.innovation-story .innovation-story-button-close:hover .icon-resetcircle {
opacity: 0
}
.innovation-story .innovation-story-button-close:hover .icon-resetsolid {
opacity: 1
}
.innovation-story .innovation-story-button-close:focus {
box-shadow: none;
outline: none
}
.innovation-story .innovation-story-button-close:focus[data-focus-method=mouse]:not(input):not(textarea):not(select) .icon, .innovation-story .innovation-story-button-close:focus[data-focus-method=touch]:not(input):not(textarea):not(select) .icon {
box-shadow: none
}
.innovation-story .innovation-story-button-close:focus .icon {
box-shadow: 0 0 0 1px rgba(0, 125, 250, .6), inset 0 0 0 4px rgba(0, 125, 250, .6);
outline: none
}
.innovation-story .innovation-story-button-close .icon {
position: absolute;
z-index: 1;
top: 0;
border-radius: 50%;
transition: opacity 350ms ease-in-out
}
.innovation-story .innovation-story-button-close .icon-resetcircle {
opacity: 1
}
.innovation-story .innovation-story-button-close .icon-resetsolid {
opacity: 0
}
.innovation-story .innovation-story-tray {
margin-top: -30px;
margin-bottom: 30px
}
html.no-enhance-innovation-story .innovation-story .innovation-story-tray, html.no-js .innovation-story .innovation-story-tray {
height: auto !important
}
.innovation-story.animating .innovation-story-tray {
transition: all 730ms ease-in-out
}
.innovation-story.innovation-story-active .innovation-story-tray {
margin-bottom: 0
}
.innovation-story .innovation-story-tray-row .innovation-story-body, .innovation-story .innovation-story-tray-row .innovation-story-tout {
margin-right: 55px
}
@media only screen and (max-width: 1068px) {
.innovation-story .innovation-story-tray-row .innovation-story-body, .innovation-story .innovation-story-tray-row .innovation-story-tout {
margin-right: 28px
}
}
@media only screen and (max-width: 734px) {
.innovation-story .innovation-story-tray-row .innovation-story-body, .innovation-story .innovation-story-tray-row .innovation-story-tout {
margin-right: 0
}
}
.innovation-story .innovation-story-tray-row .innovation-story-body {
color: #6e6e73
}
@media only screen and (max-width: 734px) {
.innovation-story .innovation-story-tray-row .innovation-story-body {
margin-top: .8em
}
}
.innovation-story .innovation-story-tray-row .innovation-story-tout {
margin-top: 35px;
margin-bottom: 43px;
padding: 25px 27px;
border-top: 1px solid #1d1d1f;
border-bottom: 1px solid #1d1d1f;
color: #1d1d1f
}
@media only screen and (max-width: 1068px) {
.innovation-story .innovation-story-tray-row .innovation-story-tout {
padding-left: 23px;
padding-right: 23px
}
}
@media only screen and (max-width: 734px) {
.innovation-story .innovation-story-tray-row .innovation-story-tout {
margin: 55px 0;
padding: 36px 0
}
}
@media only screen and (min-width: 735px) {
.innovation-story .innovation-story-tray-row .innovation-story-tout:first-child {
margin-top: 0
}
}
@media only screen and (min-width: 735px) {
.innovation-story .innovation-story-tray-row .innovation-story-tout:last-child {
margin-bottom: 0
}
}
.innovation-story .innovation-story-tray-row:first-child .column:first-child .innovation-story-body:first-child {
margin-top: 0
}
.quicklook-cta {
display: none
}
html.quicklook .quicklook-cta {
display: block
}
html.quicklook .quicklook-cta a {
position: relative
}
html.quicklook .quicklook-cta a .shared-quicklook-placeholder {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
clip-path: inset(0px 0px 99.9% 99.9%);
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
border: 0
}
html.quicklook .quicklook-cta a span {
position: relative
}
html.quicklook .quicklook-cta a span:after, html.quicklook .quicklook-cta a span:before {
font-family: SF Pro Icons;
color: inherit;
display: inline-block;
font-style: normal;
font-weight: inherit;
font-size: inherit;
line-height: 1;
text-decoration: underline;
position: relative;
z-index: 1;
alt: "";
text-decoration: none
}
html.quicklook .quicklook-cta a span:before {
display: none
}
html.quicklook .quicklook-cta a span:after, html.quicklook .quicklook-cta a span:before {
content: "瞑�"
}
html.quicklook .quicklook-cta a span:after {
padding-left: 0.3em;
top: 0
}
html.quicklook .quicklook-cta a .visuallyhidden {
display: inline-block;
position: absolute
}
.lift-transition-container, .lift-transition-sticky-content {
position: relative;
width: 100%
}
.colornav {
display: inline-block;
text-align: center
}
.colornav-title {
font-size: 17px;
line-height: 1.2353641176;
font-weight: 400;
letter-spacing: -0.022em;
border-bottom: 1px solid #d2d2d7;
margin: 0;
padding: 12px 0;
width: 100%
}
.colornav-title:lang(ar) {
letter-spacing: 0em;
font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-title:lang(ja) {
letter-spacing: 0em;
font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-title:lang(ko) {
letter-spacing: 0em;
font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-title:lang(zh) {
letter-spacing: 0em
}
.colornav-title:lang(th) {
font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-title:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-title:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-title:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-title:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-items {
display: inline-block;
list-style: none;
margin: 0 -1px;
padding-top: 17px
}
@media only screen and (max-width: 1068px) {
.colornav-items {
margin-left: 2px;
margin-right: 2px;
padding-top: 13px
}
}
.colornav-item {
float: left;
margin: -1px 5px
}
@media only screen and (max-width: 1068px) {
.colornav-item {
margin-left: 4px;
margin-right: 4px
}
}
.colornav-value {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
clip-path: inset(0px 0px 99.9% 99.9%);
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
border: 0
}
.colornav-link {
border: 1px solid transparent;
border-radius: 50%;
box-sizing: border-box;
color: #1d1d1f;
cursor: pointer;
float: left;
margin-bottom: 2.4705882353em;
padding: 2px;
position: relative;
width: 26px;
height: 26px;
z-index: 1
}
@media only screen and (max-width: 1068px) {
.colornav-link {
margin-bottom: 2.5882352941em;
padding: 3px;
width: 36px;
height: 36px
}
}
.colornav-link.current, .colornav-value:checked ~ .colornav-link {
border-color: #0071e3;
cursor: default
}
.colornav-link:focus, .colornav-value:focus ~ .colornav-link {
box-shadow: 0 0 0 4px rgba(0, 125, 250, 0.6);
outline: none
}
.colornav-link:focus[data-focus-method=mouse]:not(input):not(textarea):not(select), .colornav-link:focus[data-focus-method=touch]:not(input):not(textarea):not(select), .colornav-value:focus ~ .colornav-link[data-focus-method=mouse]:not(input):not(textarea):not(select), .colornav-value:focus ~ .colornav-link[data-focus-method=touch]:not(input):not(textarea):not(select) {
box-shadow: none
}
.colornav-swatch {
background: #f5f5f7 50%;
border-radius: 50%;
display: block;
width: 20px;
height: 20px
}
@media only screen and (max-width: 1068px) {
.colornav-swatch {
width: 28px;
height: 28px
}
}
.colornav-swatch:after {
border-radius: inherit;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
content: "";
display: block;
height: inherit;
position: absolute;
width: inherit
}
.colornav-label, .colornav-label-hidden {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
clip-path: inset(0px 0px 99.9% 99.9%);
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
border: 0
}
.colornav-label {
overflow: visible
}
.colornav-link.current .colornav-label, .colornav-value:checked ~ .colornav-link .colornav-label {
font-size: 12px;
line-height: 1.3333733333;
font-weight: 400;
letter-spacing: -0.01em;
clip: auto;
-webkit-clip-path: none;
clip-path: none;
margin-left: -50px;
padding-top: 7px;
position: absolute;
top: 100%;
left: 50%;
text-align: center;
white-space: nowrap;
width: 100px;
height: auto;
z-index: 1
}
.colornav-link.current .colornav-label:lang(ar), .colornav-value:checked ~ .colornav-link .colornav-label:lang(ar) {
letter-spacing: 0em;
font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-link.current .colornav-label:lang(ja), .colornav-value:checked ~ .colornav-link .colornav-label:lang(ja) {
letter-spacing: 0em;
font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, 銉掋儵銈儙瑙掋偞 Pro W3, 銉°偆銉偑, Meiryo, 锛汲 锛般偞銈枫儍銈�, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-link.current .colornav-label:lang(ko), .colornav-value:checked ~ .colornav-link .colornav-label:lang(ko) {
letter-spacing: 0em;
font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-link.current .colornav-label:lang(zh), .colornav-value:checked ~ .colornav-link .colornav-label:lang(zh) {
letter-spacing: 0em
}
.colornav-link.current .colornav-label:lang(th), .colornav-value:checked ~ .colornav-link .colornav-label:lang(th) {
font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-link.current .colornav-label:lang(zh-CN), .colornav-value:checked ~ .colornav-link .colornav-label:lang(zh-CN) {
font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-link.current .colornav-label:lang(zh-HK), .colornav-value:checked ~ .colornav-link .colornav-label:lang(zh-HK) {
font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-link.current .colornav-label:lang(zh-MO), .colornav-value:checked ~ .colornav-link .colornav-label:lang(zh-MO) {
font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}
.colornav-link.current .colornav-label:lang(zh-TW), .colornav-value:checked ~ .colornav-link .colornav-label:lang(zh-TW) {
font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}
@media only screen and (max-width: 1068px) {
.colornav-link.current .colornav-label, .colornav-value:checked ~ .colornav-link .colornav-label {
padding-top: 4px
}
}
.colornav-neutral .colornav-title {
border-color: #d2d2d7
}
.colornav-neutral .colornav-link {
color: #1d1d1f
}
.colornav-neutral .colornav-link.current, .colornav-neutral .colornav-value:checked ~ .colornav-link {
border-color: #1d1d1f
}
.theme-dark .colornav .colornav-title {
border-color: #424245
}
.theme-dark .colornav .colornav-link {
color: #f5f5f7
}
.theme-dark .colornav .colornav-link.current, .theme-dark .colornav .colornav-value:checked ~ .colornav-link {
border-color: #0071e3
}
.theme-dark .colornav-neutral .colornav-title {
border-color: #424245
}
.theme-dark .colornav-neutral .colornav-link {
color: #f5f5f7
}
.theme-dark .colornav-neutral .colornav-link.current, .theme-dark .colornav-neutral .colornav-value:checked ~ .colornav-link {
border-color: #f5f5f7
}
.colornav-swatch-alpine-green {
background-color: #576856
}
.colornav-swatch-sierra-blue {
background-color: #a7c1d9
}
.colornav-swatch-silver {
background-color: #f1f2ed
}
.colornav-swatch-gold {
background-color: #fae7cf
}
.colornav-swatch-graphite {
background-color: #54524f
}
.colornav-item-productred {
padding-right: 77px
}
.colornav-logo-productred {
width: 71px;
height: 21px;
background-size: 71px 21px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/built/assets/ac-colornav/productred__dowwr5bifd8i.svg);
margin-top: -10.5px;
margin-left: 6px;
position: absolute;
left: 100%;
top: 50%;
z-index: 1
}
html.no-svg .colornav-logo-productred {
background-image: url(/v/iphone-13-pro/f/built/assets/ac-colornav/productred__dowwr5bifd8i.png)
}
.section-hero {
background-color: #fff;
position: relative
}
html.enhance-hero.enhance-page-xp-parallax .section-hero {
--lt-container-min-height: calc(var(--lt-content-min-height) * 2);
--lt-content-min-height: calc(var(--lt-container-overlap) * -1);
--lt-container-overlap: -100vh;
--lt-sticky-top: 0;
min-height: var(--lt-container-min-height);
overflow: visible !important
}
html.enhance-hero.enhance-page-xp-parallax .section-hero.lift-transition-revealed {
margin-top: var(--lt-container-overlap)
}
html.enhance-hero.enhance-page-xp-parallax .section-hero.lift-transition-covered {
margin-bottom: var(--lt-container-overlap)
}
html.enhance-hero.enhance-page-xp-parallax .section-hero .lift-transition-sticky-content {
min-height: var(--lt-content-min-height);
position: sticky;
top: var(--lt-sticky-top)
}
html.aow .section-hero {
min-height: calc(100vh + 1px)
}
.section-hero .lift-transition-sticky-content {
overflow: hidden
}
.section-hero .hero-copy-wrapper {
--device-start-height: 750px;
--device-end-height: calc(var(--device-start-height) - 162px);
position: relative;
height: calc(100% - var(--device-end-height));
width: 100%;
top: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
place-content: center;
text-align: center;
margin-top: 130px
}
@media only screen and (max-width: 1068px) {
.section-hero .hero-copy-wrapper {
--device-start-height: 670px;
--device-end-height: calc(var(--device-start-height) - 74px)
}
}
@media only screen and (max-width: 734px) {
.section-hero .hero-copy-wrapper {
--device-start-height: 746px;
--device-end-height: calc(var(--device-start-height) - 252px)
}
}
@media only screen and (max-width: 1068px) {
.section-hero .hero-copy-wrapper {
margin-top: 97px
}
}
@media only screen and (max-width: 734px) {
.section-hero .hero-copy-wrapper {
margin-top: 70px
}
}
.section-hero .hero-copy-wrapper .hero-headline, .section-hero .hero-copy-wrapper .hero-intro-copy {
opacity: 1
}
.section-hero .hero-copy-wrapper .hero-headline {
width: 156px;
height: 23px;
background-size: 156px 23px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro__bjc7yi7siseq_large.svg);
position: relative;
left: 50%;
margin-left: -78px;
margin-bottom: 0px
}
html.no-svg .section-hero .hero-copy-wrapper .hero-headline {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro__bjc7yi7siseq_large.png)
}
@media only screen and (max-width: 1068px) {
.section-hero .hero-copy-wrapper .hero-headline {
width: 149px;
height: 21px;
background-size: 149px 21px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro__bjc7yi7siseq_medium.svg)
}
html.no-svg .section-hero .hero-copy-wrapper .hero-headline {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro__bjc7yi7siseq_medium.png)
}
}
@media only screen and (max-width: 734px) {
.section-hero .hero-copy-wrapper .hero-headline {
width: 109px;
height: 16px;
background-size: 109px 16px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro__bjc7yi7siseq_small.svg)
}
html.no-svg .section-hero .hero-copy-wrapper .hero-headline {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro__bjc7yi7siseq_small.png)
}
}
@media only screen and (max-width: 1068px) {
.section-hero .hero-copy-wrapper .hero-headline {
left: 50%;
margin-left: -74.5px
}
}
@media only screen and (max-width: 734px) {
.section-hero .hero-copy-wrapper .hero-headline {
left: 50%;
margin-left: -54.5px
}
}
.section-hero .hero-copy-wrapper .hero-intro-copy {
margin-top: 22px
}
@media only screen and (max-width: 1068px) {
.section-hero .hero-copy-wrapper .hero-intro-copy {
margin-top: 10px
}
}
@media only screen and (max-width: 734px) {
.section-hero .hero-copy-wrapper .hero-intro-copy {
margin-top: 10px
}
}
html.enhance-hero .section-hero .hero-copy-wrapper {
position: absolute;
height: calc(100% - var(--device-start-height));
margin-top: 0px;
min-height: 21vh
}
html.enhance-hero .section-hero .hero-copy-wrapper .hero-headline, html.enhance-hero .section-hero .hero-copy-wrapper .hero-intro-copy {
will-change: opacity;
transition-property: opacity
}
html.enhance-hero .section-hero .hero-copy-wrapper:not(.final-enhanced-state) .hero-headline {
width: 359px;
height: 50px;
background-size: 359px 50px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro_enhanced__b5g5o18vtnzm_large.svg);
position: relative;
left: 50%;
margin-left: -179.5px
}
html.enhance-hero.no-svg .section-hero .hero-copy-wrapper:not(.final-enhanced-state) .hero-headline {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro_enhanced__b5g5o18vtnzm_large.png)
}
@media only screen and (max-width: 1068px) {
html.enhance-hero .section-hero .hero-copy-wrapper:not(.final-enhanced-state) .hero-headline {
width: 309px;
height: 43px;
background-size: 309px 43px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro_enhanced__b5g5o18vtnzm_medium.svg)
}
html.enhance-hero.no-svg .section-hero .hero-copy-wrapper:not(.final-enhanced-state) .hero-headline {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro_enhanced__b5g5o18vtnzm_medium.png)
}
}
@media only screen and (max-width: 734px) {
html.enhance-hero .section-hero .hero-copy-wrapper:not(.final-enhanced-state) .hero-headline {
width: 223px;
height: 32px;
background-size: 223px 32px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro_enhanced__b5g5o18vtnzm_small.svg)
}
html.enhance-hero.no-svg .section-hero .hero-copy-wrapper:not(.final-enhanced-state) .hero-headline {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/logo_iphone_13_pro_enhanced__b5g5o18vtnzm_small.png)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-hero .section-hero .hero-copy-wrapper:not(.final-enhanced-state) .hero-headline {
left: 50%;
margin-left: -154.5px
}
}
@media only screen and (max-width: 734px) {
html.enhance-hero .section-hero .hero-copy-wrapper:not(.final-enhanced-state) .hero-headline {
left: 50%;
margin-left: -111.5px
}
}
html.enhance-hero .section-hero .hero-copy-wrapper.initial-enhanced-state {
height: calc(100% - var(--device-start-height))
}
html.enhance-hero .section-hero .hero-copy-wrapper.initial-enhanced-state .hero-headline {
opacity: 1
}
@media only screen and (max-width: 734px) {
html.enhance-hero .section-hero .hero-copy-wrapper.initial-enhanced-state .hero-headline {
opacity: 0
}
}
html.enhance-hero .section-hero .hero-copy-wrapper.initial-enhanced-state .hero-intro-copy {
opacity: 0;
position: absolute
}
html.enhance-hero .section-hero .hero-copy-wrapper.intermediate-enhanced-state .hero-headline {
opacity: 0;
transition-duration: 1s
}
html.enhance-hero .section-hero .hero-copy-wrapper.intermediate-enhanced-state .hero-intro-copy {
opacity: 0;
position: absolute
}
html.enhance-hero .section-hero .hero-copy-wrapper.final-enhanced-state {
height: calc(100% - var(--device-end-height))
}
html.enhance-hero .section-hero .hero-copy-wrapper.final-enhanced-state .hero-headline, html.enhance-hero .section-hero .hero-copy-wrapper.final-enhanced-state .hero-intro-copy {
opacity: 1;
transition-duration: 1s
}
.section-hero .hero-video-container {
width: 1440px;
left: 50%;
margin-left: -720px;
z-index: 1;
position: relative;
height: 899px;
margin-top: -210px
}
@media only screen and (min-width: 1441px) {
.section-hero .hero-video-container {
width: 2560px
}
}
@media only screen and (max-width: 1068px) {
.section-hero .hero-video-container {
width: 1068px
}
}
@media only screen and (max-width: 734px) {
.section-hero .hero-video-container {
width: 734px
}
}
@media only screen and (min-width: 1441px) {
.section-hero .hero-video-container {
left: 50%;
margin-left: -1280px
}
}
@media only screen and (max-width: 1068px) {
.section-hero .hero-video-container {
left: 50%;
margin-left: -534px
}
}
@media only screen and (max-width: 734px) {
.section-hero .hero-video-container {
left: 50%;
margin-left: -367px
}
}
@media only screen and (min-width: 1069px)and (max-width: 1440px) {
.section-hero .hero-video-container {
height: 750px;
margin-top: -60px
}
}
@media only screen and (max-width: 1068px) {
.section-hero .hero-video-container {
height: 432px;
margin-top: -5px
}
}
@media only screen and (max-width: 734px) {
.section-hero .hero-video-container {
height: 746px;
margin-top: -215px
}
}
@media only screen and (max-width: 734px)and (max-height: 580px) {
.section-hero .hero-video-container {
height: 100vh;
transform: scale(0.9);
transform-origin: bottom
}
}
html.enhance-hero .section-hero .hero-video-container {
margin-top: 0px
}
@media only screen and (min-width: 735px) {
html.enhance-hero .section-hero .hero-video-container {
height: 100vh
}
}
.section-hero .hero-video, .section-hero .hero-video-endframe, .section-hero .hero-video-startframe {
height: 750px;
position: absolute;
top: 0;
left: 0;
width: 100%
}
@media only screen and (min-width: 1441px) {
.section-hero .hero-video, .section-hero .hero-video-endframe, .section-hero .hero-video-startframe {
height: 900px
}
}
@media only screen and (max-width: 1068px) {
.section-hero .hero-video, .section-hero .hero-video-endframe, .section-hero .hero-video-startframe {
height: 670px
}
}
@media only screen and (max-width: 734px) {
.section-hero .hero-video, .section-hero .hero-video-endframe, .section-hero .hero-video-startframe {
height: 746px
}
}
html.enhance-hero .section-hero .hero-video, html.enhance-hero .section-hero .hero-video-endframe, html.enhance-hero .section-hero .hero-video-startframe {
top: auto;
bottom: 0
}
.section-hero .hero-video, .section-hero .hero-video-startframe {
display: none
}
html.enhance-hero .section-hero .hero-video, html.enhance-hero .section-hero .hero-video-startframe {
display: block
}
.section-hero .hero-video-endframe, .section-hero .hero-video-startframe {
z-index: 2;
background-position: 50%;
background-size: contain
}
html.enhance-hero .section-hero .hero-video-endframe, html.enhance-hero .section-hero .hero-video-startframe {
opacity: 0
}
html.enhance-hero .section-hero .hero-video-endframe.active, html.enhance-hero .section-hero .hero-video-startframe.active {
opacity: 1
}
html.enhance-hero .section-hero .hero-video-startframe {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_startframe__tjgmpy97igqy_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
html.enhance-hero .section-hero .hero-video-startframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_startframe__tjgmpy97igqy_large_2x.jpg)
}
}
@media only screen and (min-width: 1441px) {
html.enhance-hero .section-hero .hero-video-startframe {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_startframe__tjgmpy97igqy_xlarge.jpg)
}
}
@media only screen and (min-width: 1441px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1441px)and (min-resolution: 1.5dppx), only screen and (min-width: 1441px)and (min-resolution: 144dpi) {
html.enhance-hero .section-hero .hero-video-startframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_startframe__tjgmpy97igqy_xlarge_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-hero .section-hero .hero-video-startframe {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_startframe__tjgmpy97igqy_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
html.enhance-hero .section-hero .hero-video-startframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_startframe__tjgmpy97igqy_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
html.enhance-hero .section-hero .hero-video-startframe {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_startframe__tjgmpy97igqy_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
html.enhance-hero .section-hero .hero-video-startframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_startframe__tjgmpy97igqy_small_2x.jpg)
}
}
.section-hero .hero-video-endframe {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-hero .hero-video-endframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_large_2x.jpg)
}
}
@media only screen and (min-width: 1441px) {
.section-hero .hero-video-endframe {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_xlarge.jpg)
}
}
@media only screen and (min-width: 1441px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1441px)and (min-resolution: 1.5dppx), only screen and (min-width: 1441px)and (min-resolution: 144dpi) {
.section-hero .hero-video-endframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_xlarge_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-hero .hero-video-endframe {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-hero .hero-video-endframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-hero .hero-video-endframe {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-hero .hero-video-endframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_small_2x.jpg)
}
}
html.aow .section-hero .hero-video-endframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_large.jpg)
}
@media only screen and (max-width: 1068px) {
html.aow .section-hero .hero-video-endframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_medium.jpg)
}
}
@media only screen and (max-width: 734px) {
html.aow .section-hero .hero-video-endframe {
background-image: url(/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_small.jpg)
}
}
.section-hero .hero-video {
z-index: 1;
object-fit: contain
}
.section-manifesto {
position: relative;
background: #011410
}
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto {
--lt-container-min-height: calc(var(--lt-content-min-height) * 2);
--lt-content-min-height: calc(var(--lt-container-overlap) * -1);
--lt-container-overlap: -100vh;
--lt-sticky-top: 0;
min-height: var(--lt-container-min-height);
overflow: visible !important
}
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto.lift-transition-revealed {
margin-top: var(--lt-container-overlap)
}
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto.lift-transition-covered {
margin-bottom: var(--lt-container-overlap)
}
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .lift-transition-sticky-content {
min-height: var(--lt-content-min-height);
position: sticky;
top: var(--lt-sticky-top)
}
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto {
min-height: 100vh
}
.section-manifesto .wallpaper-video-container {
z-index: 1;
display: none;
background: linear-gradient(45deg, #023b23 15%, #025633 31%, #026139 42%, #036e42 45%, #23e8b2 0, #0aa061 48%, #057e4b 51%, #01462a 63%, #023121 78%, #070f3d 88%)
}
.section-manifesto .wallpaper-video, html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .wallpaper-video-container {
display: block
}
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .wallpaper-video {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_large.jpg);
width: 100%;
height: var(--lt-content-min-height);
background-position: 50%;
background-size: cover
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .wallpaper-video {
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .wallpaper-video {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .wallpaper-video {
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .wallpaper-video {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .wallpaper-video {
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_small_2x.jpg)
}
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .wallpaper-video {
object-fit: cover
}
.section-manifesto .inline-media-ui {
z-index: 3;
display: none
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui {
--inline-media-playpause-icon-color: rgba(0, 0, 0, 0.56);
--inline-media-playpause-icon-color-hover: rgba(0, 0, 0, 0.64);
--inline-media-playpause-scrim-color: rgba(210, 210, 215, 0.64);
--inline-media-playpause-scrim-color-hover: rgba(223, 223, 227, 0.6976);
--inline-media-playpause-scrim-color-active: rgba(193, 193, 198, 0.6544);
display: flex;
justify-content: flex-end;
z-index: 3;
position: sticky;
bottom: 0;
pointer-events: all
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui.loading-empty .play-pause-button {
opacity: 0
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui.loading .play-pause-button {
pointer-events: none;
opacity: 1
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui.loading .play-pause-button:before {
display: none
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui.loading .play-pause-button:after {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGg1NnY1NkgweiIvPjxwYXRoIGQ9Ik0yOCA4LjVhMi41IDIuNSAwIDAxMi41IDIuNXY3YTIuNSAyLjUgMCAwMS01IDB2LTdBMi41IDIuNSAwIDAxMjggOC41eiIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTQxLjc5IDE0LjIxYTIuNTIgMi41MiAwIDAxMCAzLjU0bC00Ljk1IDQuOTVhMi41IDIuNSAwIDAxLTMuNTQtMy41NGw1LTQuOTVhMi41MiAyLjUyIDAgMDEzLjQ5IDB6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjEiLz48cGF0aCBkPSJNNDcuNSAyOGEyLjUgMi41IDAgMDEtMi41IDIuNWgtN2EyLjUgMi41IDAgMDEwLTVoN2EyLjUgMi41IDAgMDEyLjUgMi41eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQxLjc5IDQxLjc5YTIuNTIgMi41MiAwIDAxLTMuNTQgMGwtNS00Ljk1YTIuNSAyLjUgMCAwMTMuNTQtMy41NGw0Ljk1IDVhMi41MiAyLjUyIDAgMDEuMDUgMy40OXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuMyIvPjxwYXRoIGQ9Ik0yOCA0Ny41YTIuNSAyLjUgMCAwMS0yLjUtMi41di03YTIuNSAyLjUgMCAwMTUgMHY3YTIuNSAyLjUgMCAwMS0yLjUgMi41eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii40Ii8+PHBhdGggZD0iTTE0LjIxIDQxLjc5YTIuNTIgMi41MiAwIDAxMC0zLjU0bDQuOTUtNWEyLjUgMi41IDAgMDEzLjU0IDMuNTRsLTQuOTUgNC45NWEyLjUyIDIuNTIgMCAwMS0zLjU0LjA1eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii42Ii8+PHBhdGggZD0iTTguNSAyOGEyLjUgMi41IDAgMDEyLjUtMi41aDdhMi41IDIuNSAwIDAxMCA1aC03QTIuNSAyLjUgMCAwMTguNSAyOHoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNyIvPjxwYXRoIGQ9Ik0xNC4yMSAxNC4yMWEyLjUyIDIuNTIgMCAwMTMuNTQgMGw0Ljk1IDQuOTVhMi41IDIuNSAwIDAxLTMuNTQgMy41NGwtNC45NS00Ljk1YTIuNTIgMi41MiAwIDAxMC0zLjU0eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii45Ii8+PC9zdmc+");
position: absolute;
width: 100%;
height: 100%;
animation: inline-media-spin .85s steps(8) infinite;
background-position-x: center;
background-position-y: center;
mask: none;
-webkit-mask: none;
top: 0;
left: 0
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui.loaded.playing .play-pause-button:after {
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyBpZD0iRXhwb3J0YWJsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMWQxZDFmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJwYXVzZSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzLjc1IiB5PSIzIiB3aWR0aD0iNC41IiBoZWlnaHQ9IjE0IiByeD0iMS41Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxMS43NSIgeT0iMyIgd2lkdGg9IjQuNSIgaGVpZ2h0PSIxNCIgcng9IjEuNSIvPjwvZz48L3N2Zz4=");
mask: url("data:image/svg+xml;base64,PHN2ZyBpZD0iRXhwb3J0YWJsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMWQxZDFmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJwYXVzZSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzLjc1IiB5PSIzIiB3aWR0aD0iNC41IiBoZWlnaHQ9IjE0IiByeD0iMS41Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxMS43NSIgeT0iMyIgd2lkdGg9IjQuNSIgaGVpZ2h0PSIxNCIgcng9IjEuNSIvPjwvZz48L3N2Zz4=")
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui.loaded.ended .play-pause-button:after {
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE2Ljc1IDkuNGExLjUgMS41IDAgMDAtMS41IDEuNUE0Ljg4IDQuODggMCAxMTEwLjM4IDZoLjJMOS4zMSA3LjMyYTEuNSAxLjUgMCAwMDEuMDYgMi41NiAxLjQ1IDEuNDUgMCAwMDEuMDYtLjQ0TDE1IDUuODhhMS41MiAxLjUyIDAgMDAuNDQtMS4wNkExLjU0IDEuNTQgMCAwMDE1IDMuNzVMMTEuNDMuMTlhMS40OSAxLjQ5IDAgMDAtMi4xMiAwIDEuNTEgMS41MSAwIDAwMCAyLjEybC43NS43NWE3Ljg1IDcuODUgMCAxMDguMTkgNy44NCAxLjUgMS41IDAgMDAtMS41LTEuNXoiIGZpbGw9IiMxZDFkMWYiLz48L3N2Zz4=");
mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE2Ljc1IDkuNGExLjUgMS41IDAgMDAtMS41IDEuNUE0Ljg4IDQuODggMCAxMTEwLjM4IDZoLjJMOS4zMSA3LjMyYTEuNSAxLjUgMCAwMDEuMDYgMi41NiAxLjQ1IDEuNDUgMCAwMDEuMDYtLjQ0TDE1IDUuODhhMS41MiAxLjUyIDAgMDAuNDQtMS4wNkExLjU0IDEuNTQgMCAwMDE1IDMuNzVMMTEuNDMuMTlhMS40OSAxLjQ5IDAgMDAtMi4xMiAwIDEuNTEgMS41MSAwIDAwMCAyLjEybC43NS43NWE3Ljg1IDcuODUgMCAxMDguMTkgNy44NCAxLjUgMS41IDAgMDAtMS41LTEuNXoiIGZpbGw9IiMxZDFkMWYiLz48L3N2Zz4=")
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui.loaded .play-pause-button {
pointer-events: all;
opacity: 1
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button {
padding: 0;
margin-right: 16px;
margin-bottom: 16px;
background: none;
display: block;
width: 44px;
min-width: 44px;
height: 44px;
border: none;
display: flex;
position: relative;
justify-self: flex-end;
align-self: flex-end;
align-items: center;
justify-content: center;
pointer-events: none;
cursor: pointer;
background-repeat: no-repeat;
transition: opacity 100ms linear, transform .2s ease
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:after {
content: "";
mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUgMTUuMjVWNC43N2ExLjQ0IDEuNDQgMCAwMTEuNDQtMS42MiAxLjg2IDEuODYgMCAwMTEuMTEuMzFsOC41MyA1Yy43Ni40NCAxLjE3LjggMS4xNyAxLjUxcy0uNDEgMS4wNy0xLjE3IDEuNTFsLTguNTMgNWExLjg2IDEuODYgMCAwMS0xLjExLjMxQTEuNDIgMS40MiAwIDAxNSAxNS4yNXoiLz48L3N2Zz4=");
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUgMTUuMjVWNC43N2ExLjQ0IDEuNDQgMCAwMTEuNDQtMS42MiAxLjg2IDEuODYgMCAwMTEuMTEuMzFsOC41MyA1Yy43Ni40NCAxLjE3LjggMS4xNyAxLjUxcy0uNDEgMS4wNy0xLjE3IDEuNTFsLTguNTMgNWExLjg2IDEuODYgMCAwMS0xLjExLjMxQTEuNDIgMS40MiAwIDAxNSAxNS4yNXoiLz48L3N2Zz4=");
mask-size: cover;
-webkit-mask-size: cover;
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
background-size: 20px 20px;
background-color: var(--inline-media-playpause-icon-color)
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:before {
content: "";
position: absolute;
background-color: var(--inline-media-playpause-scrim-color);
border-radius: 50%;
width: 36px;
height: 36px
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:disabled {
pointer-events: none;
opacity: .32
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:hover:after {
background-color: var(--inline-media-playpause-icon-color-hover)
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:hover:before {
background-color: var(--inline-media-playpause-scrim-color-hover)
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:active {
transform: scale(0.95)
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:active:after {
background-color: var(--inline-media-playpause-icon-color)
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:active:before {
background-color: var(--inline-media-playpause-scrim-color-active)
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:focus {
outline: none
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:focus:before {
box-shadow: 0 0 0 4px #007d96
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:focus[data-focus-method=mouse]:not(input):not(textarea):not(select):before, html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button:focus[data-focus-method=touch]:not(input):not(textarea):not(select):before {
box-shadow: none
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui.loaded .play-pause-button, html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui.loading .play-pause-button {
opacity: 0
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui.loaded .play-pause-button.active {
opacity: 1
}
html.enhance-manifesto.enhance-page-xp-media .section-manifesto .inline-media-ui .play-pause-button {
margin: 37px;
opacity: 0;
transition: opacity .3s ease-in-out, top 80ms linear
}
.section-manifesto .manifesto-copy-container {
--comp-padding-bottom: 95px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_large.jpg);
z-index: 2;
padding-top: 100px;
padding-bottom: var(--comp-padding-bottom);
background-position: 50%;
background-size: cover;
position: relative
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-manifesto .manifesto-copy-container {
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-manifesto .manifesto-copy-container {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-manifesto .manifesto-copy-container {
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-manifesto .manifesto-copy-container {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-manifesto .manifesto-copy-container {
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_small_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-manifesto .manifesto-copy-container {
--comp-padding-bottom: 75px;
padding-top: 68px
}
}
@media only screen and (max-width: 734px) {
.section-manifesto .manifesto-copy-container {
--comp-padding-bottom: 46px;
padding-top: 34px
}
}
html.enhance-manifesto .section-manifesto .manifesto-copy-container {
background: transparent
}
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .manifesto-copy-container {
--initial-video-overlap: -100vh;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
margin-top: var(--initial-video-overlap);
transform: translateZ(0)
}
html.aow .section-manifesto .manifesto-copy-container {
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_large.jpg)
}
@media only screen and (max-width: 1068px) {
html.aow .section-manifesto .manifesto-copy-container {
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_medium.jpg)
}
}
@media only screen and (max-width: 734px) {
html.aow .section-manifesto .manifesto-copy-container {
background-image: url(/v/iphone-13-pro/f/images/overview/manifesto/wallpaper_startframe__crc5hsgtpzo2_small.jpg)
}
}
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .feature, html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .support-copy-container {
opacity: .25;
transition-property: opacity;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1)
}
html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .feature.active, html.enhance-manifesto.enhance-page-xp-parallax .section-manifesto .support-copy-container.active {
opacity: 1
}
.section-manifesto .feature {
display: inline
}
.section-manifesto .feature:not(:first-child) {
margin-left: 0.08em
}
.section-manifesto .manifesto-subhead {
margin-top: 53px;
margin-bottom: 62px
}
@media only screen and (max-width: 1068px) {
.section-manifesto .manifesto-subhead {
margin-top: 28px;
margin-bottom: 36px
}
}
@media only screen and (max-width: 734px) {
.section-manifesto .manifesto-subhead {
margin-top: 17px;
margin-bottom: 9px
}
}
.section-manifesto .pricing {
display: none
}
.section-manifesto .pricing.has-dynamic-content {
display: block
}
@media only screen and (min-width: 735px) {
.section-manifesto .cta-links li {
display: inline;
margin-right: 1em
}
}
@media only screen and (max-width: 734px) {
.section-manifesto .cta-links li {
margin-top: .97em
}
}
.section-manifesto .cta-links a {
color: #fff
}
.section-manifesto .quicklook-cta {
margin-top: .85em
}
@media only screen and (max-width: 1068px) {
.section-manifesto .quicklook-cta {
margin-top: .87em
}
}
.section-design {
--static-row-min-height: 900px;
background-color: #fff
}
.section-design .design-display {
margin-left: auto;
margin-right: auto;
width: 980px;
position: relative;
margin-top: 0;
padding-top: 85px
}
html.enhance-design-display-lift-transition.enhance-page-xp-parallax .section-design .design-display {
--lt-container-min-height: calc(var(--lt-content-min-height) * 2);
--lt-content-min-height: calc(var(--lt-container-overlap) * -1);
--lt-container-overlap: -100vh;
--lt-sticky-top: 0;
min-height: var(--lt-container-min-height);
overflow: visible !important
}
html.enhance-design-display-lift-transition.enhance-page-xp-parallax .section-design .design-display.lift-transition-revealed {
margin-top: var(--lt-container-overlap)
}
html.enhance-design-display-lift-transition.enhance-page-xp-parallax .section-design .design-display.lift-transition-covered {
margin-bottom: var(--lt-container-overlap)
}
html.enhance-design-display-lift-transition.enhance-page-xp-parallax .section-design .design-display .lift-transition-sticky-content {
min-height: var(--lt-content-min-height);
position: sticky;
top: var(--lt-sticky-top)
}
@media only screen and (min-width: 1441px) {
.section-design .design-display {
margin-left: auto;
margin-right: auto;
width: 980px
}
}
@media only screen and (max-width: 1068px) {
.section-design .design-display {
margin-left: auto;
margin-right: auto;
width: 692px
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display {
margin-left: auto;
margin-right: auto;
width: 87.5%
}
}
@media only screen and (max-width: 1068px) {
.section-design .design-display {
padding-top: 75px
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display {
padding-top: 54px
}
}
.section-design .design-display .design-display-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding-bottom: 75px
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .design-display-content {
padding-bottom: 35px
}
}
html.enhance-page-xp-parallax .section-design .design-display .design-display-content {
min-height: var(--lt-content-min-height)
}
.section-design .design-display .section-headline {
order: 2;
padding-top: 74px;
text-align: center
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .section-headline {
padding-top: 60px
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .section-headline {
padding-top: 37px;
max-width: 14em;
text-align: center
}
}
.section-design .design-display .grid {
--hardware-centers-offset: 162px;
grid-column-gap: 0;
grid-row-gap: 0;
padding-left: 0;
padding-right: 0;
margin-top: 0
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .grid {
--hardware-centers-offset: 118px
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid {
--hardware-centers-offset: 96px
}
}
html.enhance-design-display-lift-transition .section-design .design-display .grid {
--min-dist-to-vp-boundary: 20px
}
html.enhance-design-display-lift-transition.safari-ios .section-design .design-display .grid {
--min-dist-to-vp-boundary: var(--iosSafariBottomToolbarHeight)
}
html.enhance-design-display-lift-transition.safari-ipados .section-design .design-display .grid {
--min-dist-to-vp-boundary: var(--ipadosSafariBottomToolbarHeight)
}
html.enhance-design-display-lift-transition.chrome-android .section-design .design-display .grid {
--min-dist-to-vp-boundary: var(--chromeAndroidBottomToolbarHeight)
}
.section-design .design-display .grid-item {
display: flex;
align-items: center
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid-item {
flex-direction: column
}
}
.section-design .design-display .grid-item-iphone-13-pro-max {
--hardware-width: 321px;
--x-axis-dir: -1;
margin-right: calc(var(--hardware-width) / -2);
justify-content: flex-end;
transform: translate(calc(var(--hardware-centers-offset) / -2))
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .grid-item-iphone-13-pro-max {
--hardware-width: 235px
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid-item-iphone-13-pro-max {
--hardware-width: 194px;
align-items: flex-end
}
}
.section-design .design-display .grid-item-iphone-13-pro-max .product-spec {
margin-right: 2.0588235294rem;
text-align: right
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .grid-item-iphone-13-pro-max .product-spec {
margin-right: 1.7647058824rem
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid-item-iphone-13-pro-max .product-spec {
margin-left: 0;
margin-right: auto;
text-align: left
}
}
.section-design .design-display .grid-item-iphone-13-pro-max .image-shadow {
width: 264px;
height: 8px;
background-size: 264px 8px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/design/design_display_pro_max_shadow__culap1v8hymq_large.png);
position: absolute;
left: 50%;
margin-left: -132px
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .grid-item-iphone-13-pro-max .image-shadow {
width: 192px;
height: 8px;
background-size: 192px 8px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/design/design_display_pro_max_shadow__culap1v8hymq_medium.png)
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid-item-iphone-13-pro-max .image-shadow {
width: 162px;
height: 8px;
background-size: 162px 8px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/design/design_display_pro_max_shadow__culap1v8hymq_small.png)
}
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .grid-item-iphone-13-pro-max .image-shadow {
left: 50%;
margin-left: -96px
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid-item-iphone-13-pro-max .image-shadow {
left: 50%;
margin-left: -81px
}
}
.section-design .design-display .grid-item-iphone-13-pro {
--hardware-width: 292px;
--x-axis-dir: 1;
margin-left: calc(var(--hardware-width) / -2);
justify-content: flex-start;
transform: translateX(calc(var(--hardware-centers-offset) / 2))
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .grid-item-iphone-13-pro {
--hardware-width: 214px
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid-item-iphone-13-pro {
--hardware-width: 177px;
align-items: flex-start
}
}
.section-design .design-display .grid-item-iphone-13-pro .product-spec {
margin-left: 1.9411764706rem;
order: 2
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .grid-item-iphone-13-pro .product-spec {
margin-left: 1.7647058824rem
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid-item-iphone-13-pro .product-spec {
margin-left: auto;
margin-right: 0;
order: 1
}
}
.section-design .design-display .grid-item-iphone-13-pro .hardware-composition-wrapper {
order: 1
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid-item-iphone-13-pro .hardware-composition-wrapper {
order: 2;
align-self: flex-start;
position: absolute;
bottom: 0;
left: 0
}
}
.section-design .design-display .grid-item-iphone-13-pro .image-shadow {
width: 242px;
height: 8px;
background-size: 242px 8px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/design/design_display_pro_shadow__eorzkjgfhey6_large.png);
position: absolute;
left: 50%;
margin-left: -121px
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .grid-item-iphone-13-pro .image-shadow {
width: 178px;
height: 8px;
background-size: 178px 8px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/design/design_display_pro_shadow__eorzkjgfhey6_medium.png)
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid-item-iphone-13-pro .image-shadow {
width: 148px;
height: 8px;
background-size: 148px 8px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/design/design_display_pro_shadow__eorzkjgfhey6_small.png)
}
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .grid-item-iphone-13-pro .image-shadow {
left: 50%;
margin-left: -89px
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .grid-item-iphone-13-pro .image-shadow {
left: 50%;
margin-left: -74px
}
}
.section-design .design-display .hardware-composition-wrapper {
z-index: 2;
position: relative;
align-self: flex-end
}
.section-design .design-display .image-shadow {
bottom: -2px
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .image-shadow {
bottom: -3px
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .image-shadow {
bottom: -2px
}
}
.section-design .design-display .product-spec {
z-index: 1;
position: relative;
padding-top: 5px
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .product-spec {
padding-top: 0;
padding-bottom: 5px
}
}
@media only screen and (max-width: 734px) {
.section-design .design-display .product-spec {
padding-bottom: 33px
}
}
.section-design .design-display .product-name, .section-design .design-display .section-headline {
color: #1d1d1f
}
@media only screen and (min-width: 735px) {
.section-design .design-display .product-name {
margin: 10px 0 0
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-design .design-display .product-name {
margin-top: 18px
}
}
.section-design .design-display .product-size {
margin: 0
}
@media only screen and (max-width: 1068px) {
.section-design .design-display .product-size {
margin-top: 10px
}
}
.section-design .design-display .overview-design-design-display-pro-max {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 321px;
--p-height: 650px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-design .design-display .overview-design-design-display-pro-max {
--p-width: 235px;
--p-height: 474px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-design .design-display .overview-design-design-display-pro-max {
--p-width: 194px;
--p-height: 392px
}
}
.section-design .design-display .overview-design-design-display-pro {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 292px;
--p-height: 588px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-design .design-display .overview-design-design-display-pro {
--p-width: 214px;
--p-height: 430px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-design .design-display .overview-design-design-display-pro {
--p-width: 177px;
--p-height: 356px
}
}
.section-design .section-5050-container {
--enhanced-row-height: 100vh;
--dead-scroll: 35vh;
--sticky-row-height: calc(var(--enhanced-row-height) + var(--dead-scroll));
max-width: 2560px;
margin: auto
}
html.safari .section-design .section-5050-container {
width: calc(100% - 0.1px)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
html.safari .section-design .section-5050-container {
width: 100%
}
}
html.enhance-section-design-parallax .section-design .section-5050-container {
margin-bottom: calc(var(--dead-scroll) * -1)
}
@media only screen and (min-width: 735px) {
.section-design .section-5050-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: var(--static-row-min-height)
}
html.enhance-section-design-parallax .section-design .section-5050-container {
grid-auto-rows: var(--sticky-row-height)
}
}
.section-design .section-5050-column {
overflow: hidden
}
@media only screen and (max-width: 734px) {
html.enhance-section-design-parallax .section-design .section-5050-column {
min-height: var(--sticky-row-height)
}
}
html.enhance-section-design-parallax .section-design .section-5050-column {
position: sticky;
top: 0
}
.section-design .section-5050-column.media-crop-right {
--min-margin-left: 100px
}
.section-design .section-5050-column.media-crop-right .section-5050-column-inner {
grid-template-columns: minmax(var(--min-margin-left), 1fr) auto 1fr
}
@media only screen and (max-width: 1068px) {
.section-design .section-5050-column.media-crop-right .section-5050-column-inner {
--min-margin-left: 70px
}
}
@media only screen and (max-width: 734px) {
.section-design .section-5050-column.media-crop-right .section-5050-column-inner {
--min-margin-left: 35px
}
}
.section-design .section-5050-column.media-crop-right .section-5050-column-inner .section-5050-asset {
grid-column-start: 2
}
.section-design .section-5050-column.full-width {
background: #fff
}
@media only screen and (min-width: 735px) {
.section-design .section-5050-column.full-width {
grid-column: span 2
}
}
.section-design .section-5050-column:not(.full-width):nth-child(odd) {
background: #fbfbfd
}
.section-design .section-5050-column:not(.full-width):nth-child(2n) {
background: #000
}
@media only screen and (min-width: 735px) {
.section-design .section-5050-column:not(.full-width):nth-child(4n+3) {
transform: translateX(100%)
}
.section-design .section-5050-column:not(.full-width):nth-child(4n+4) {
transform: translateX(-100%)
}
}
.section-design .section-5050-column noscript {
grid-row-start: 2
}
.section-design .section-5050-column-inner {
--min-margin-top: var(--min-margin-left);
--buffer: minmax(var(--min-margin-top), 1fr);
box-sizing: border-box;
position: relative;
display: grid;
grid-template-rows: var(--buffer) minmax(0, auto);
height: var(--static-row-min-height)
}
html.enhance-section-design-parallax .section-design .section-5050-column-inner {
height: var(--enhanced-row-height);
padding-top: var(--r-localnav-height)
}
.section-design .section-5050-column-copy .section-5050-column-inner {
--column-small-spacing: 30px;
--buffer: minmax(var(--column-small-spacing), 1fr);
grid-template-rows: var(--buffer) minmax(0, auto) var(--buffer) auto var(--column-small-spacing)
}
.section-design .section-5050-column-copy .section-5050-asset:not(.overview-design-water-resistant) {
top: 5px;
position: relative
}
.section-design .section-5050-asset {
grid-row-start: 2
}
.section-design .section-5050-scalable-asset {
margin: auto;
height: 100%
}
.section-design .section-5050-scalable-asset img {
height: 100%;
width: auto;
display: block;
margin: auto
}
.section-design .bottom-row {
box-sizing: border-box;
grid-row-start: 4;
justify-content: center;
padding: 0 40px
}
.section-design .section-5050-title {
margin: 0;
text-align: center
}
html.touch .section-design .section-5050-column:not(.section-5050-column-water-resistance) .bottom-row {
padding-bottom: 30px
}
@media only screen and (min-width: 735px) {
html.touch.chrome-android .section-design .section-5050-column:not(.section-5050-column-water-resistance) .bottom-row {
padding-bottom: 110px
}
}
@media only screen and (max-width: 734px) {
html.touch .section-design .section-5050-column:not(.section-5050-column-water-resistance) .bottom-row {
padding-bottom: 60px
}
}
.section-design .colorgallery {
--duration: 0.75s
}
html.enhance-page-xp-parallax.enhance-section-design-parallax .section-design .colorgallery.colorgallery-column-primary .section-5050-column-inner {
height: var(--enhanced-row-height)
}
html.enhance-page-xp-parallax .section-design .colorgallery.colorgallery-column-primary .bottom-row {
flex-direction: column;
align-items: center;
flex-wrap: nowrap
}
html.enhance-page-xp-parallax .section-design .colorgallery.colorgallery-column-primary .section-5050-title {
color: rgba(0, 0, 0, .25)
}
@media only screen and (max-width: 734px) {
.section-design .colorgallery.section-5050-column-image .section-5050-column-inner {
grid-template-columns: minmax(var(--min-margin-left), 1fr) auto;
justify-items: end
}
}
.section-design .colorgallery .colorgallery-enhanced-image {
display: none
}
html.enhance-page-xp-parallax .section-design .colorgallery .colorgallery-enhanced-image {
display: block;
height: 100%
}
.section-design .colorgallery .colorgallery-copy-enhanced, html.enhance-page-xp-parallax .section-design .colorgallery .colorgallery-copy-static {
display: none
}
html.enhance-page-xp-parallax .section-design .colorgallery .colorgallery-copy-enhanced {
display: inline
}
html.enhance-page-xp-parallax .section-design .colorgallery .colorgallery-name {
transition: color .15s linear
}
html.enhance-page-xp-parallax .section-design .colorgallery .colorgallery-name.current {
color: #1d1d1f
}
.section-design .colorgallery .item-container {
display: none
}
html.enhance-page-xp-parallax .section-design .colorgallery .item-container {
display: block
}
html.enhance-page-xp-parallax .section-design .colorgallery .item-container.will-change .gallery-item {
will-change: transform
}
html.enhance-page-xp-parallax .section-design .colorgallery .item-container .section-5050-parallax {
display: grid;
grid-auto-rows: 100%
}
.section-design .colorgallery .secondary-gallery-item-container {
position: relative;
grid-row-start: 2;
grid-column-start: 2
}
@media only screen and (max-width: 734px) {
.section-design .colorgallery .secondary-gallery-item {
display: flex
}
.section-design .colorgallery .secondary-gallery-item.always-justified, html.safari-mobile .section-design .colorgallery .secondary-gallery-item {
justify-content: flex-end
}
}
html.enhance-page-xp-parallax .section-design .colorgallery .secondary-gallery-item {
transition: opacity var(--duration) linear
}
.section-design .colorgallery .secondary-gallery-item:not(:first-child) {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0
}
.section-design .colorgallery .secondary-gallery-item:nth-child(2) {
opacity: 1
}
html.enhance-page-xp-parallax .section-design .colorgallery .secondary-gallery-item:nth-child(2):not(.current) {
opacity: 0
}
.section-design .colorgallery .secondary-gallery-item.current {
opacity: 1
}
.section-design .colorgallery .secondary-gallery-item img {
margin: 0
}
html.enhance-page-xp-parallax .section-design .colorgallery .colorgallery-static-image {
display: none
}
.section-design .colorgallery .gallery-item, .section-design .colorgallery .item-container, .section-design .colorgallery .item-container .section-5050-parallax {
height: 100%;
width: 100%
}
.section-design .colorgallery .gallery-item {
justify-content: center
}
html.enhance-page-xp-parallax .section-design .colorgallery .gallery-item {
grid-row-start: 1;
grid-column-start: 1
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax.safari-ios .section-design .colorgallery .gallery-item {
width: 100vw
}
}
.section-design .colorgallery .colornav {
display: none
}
html.enhance-page-xp-parallax .section-design .colorgallery .colornav {
display: block;
margin-bottom: 15px
}
.section-design .colorgallery .colornav-label.visuallyhidden {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
clip-path: inset(0px 0px 99.9% 99.9%);
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
border: 0
}
.section-design .colorgallery .colornav-items {
padding-top: 0
}
.section-design .colorgallery .colornav-link {
margin-bottom: 0
}
@media only screen and (max-width: 734px) {
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .section-5050-column-inner {
--asset-width: 438px;
grid-template-columns: minmax(var(--min-margin-left), 1fr) minmax(0, var(--asset-width)) minmax(var(--min-margin-left), 1fr)
}
html.enhance-page-xp-media .section-design .section-5050-column-ceramic-shield.section-5050-column-image .section-5050-column-inner {
--asset-width: 462px
}
}
html.enhance-page-xp-media .section-design .section-5050-column-ceramic-shield.section-5050-column-image .overview-design-ceramic-shield-2-static {
display: none
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media {
position: relative
}
@media only screen and (max-width: 734px) {
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media.section-5050-asset {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0px auto
}
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .video-container {
display: none;
position: relative
}
@media only screen and (max-width: 734px) {
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .video-container {
max-height: 998px;
max-width: 462px;
height: 100%;
width: 100%;
margin: auto
}
}
html.enhance-page-xp-media .section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .video-container {
display: block
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .design-ceramic-shield-video {
z-index: 1;
object-position: center bottom
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .design-ceramic-shield-video, .section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-endframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
height: 100%;
width: 100%
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-startframe {
display: flex
}
@media only screen and (min-width: 1069px) {
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-startframe {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 562px;
--p-height: 866px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-startframe {
display: block;
width: var(--p-width);
height: var(--p-height)
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px)and (max-width: 1068px) {
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-startframe {
--p-width: 420px;
--p-height: 638px
}
}
@media only screen and (max-width: 734px) {
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-startframe {
max-height: 998px;
height: 100%
}
}
@media only screen and (max-width: 734px) {
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-startframe img {
height: 100%;
width: auto;
display: block;
margin: auto
}
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-startframe img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center bottom
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-endframe {
z-index: 2
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-endframe img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center bottom
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .ended .overview-design-ceramic-shield-endframe, .section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media :not(.loaded):not(.loading-error):not(.loading-disabled) .overview-design-ceramic-shield-startframe {
opacity: 1;
pointer-events: all
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .ended .overview-design-ceramic-shield-endframe img {
height: 100%;
width: 100%
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-endframe, .section-design .section-5050-column-ceramic-shield.section-5050-column-image .enhanced-media .overview-design-ceramic-shield-startframe {
opacity: 0;
pointer-events: none
}
@media only screen and (max-width: 1068px) {
.section-design {
--static-row-min-height: 670px
}
}
@media only screen and (max-width: 734px) {
.section-design {
--static-row-min-height: 675px
}
}
.section-design .section-5050-column-colors.section-5050-column-copy .section-5050-title {
max-width: 13em
}
.section-design .section-5050-column-material.section-5050-column-image .section-5050-column-inner {
--min-margin-top: 65px
}
@media only screen and (max-width: 1068px) {
.section-design .section-5050-column-material.section-5050-column-image .section-5050-column-inner {
--min-margin-top: 90px
}
}
.section-design .section-5050-column-material.section-5050-column-image .section-5050-asset {
margin: auto
}
.section-design .section-5050-column-material.section-5050-column-copy .section-5050-title {
max-width: 10em
}
.section-design .section-5050-column-ceramic-shield.section-5050-column-copy .section-5050-title {
max-width: 14em
}
.section-design .section-5050-column-water-resistance {
background: #fff
}
@media only screen and (min-width: 735px) {
.section-design .section-5050-column-water-resistance .section-5050-column-inner {
grid-template-rows: var(--buffer) auto var(--buffer) minmax(0, auto)
}
}
@media only screen and (min-width: 735px) {
.section-design .section-5050-column-water-resistance .section-5050-asset {
grid-row-start: 4
}
}
@media only screen and (min-width: 735px) {
.section-design .section-5050-column-water-resistance .bottom-row {
grid-row-start: 2
}
}
.section-design .section-5050-column-water-resistance.section-5050-column-copy .section-5050-title {
max-width: 10em
}
@media only screen and (max-width: 1068px) {
.section-design .section-5050-column-water-resistance.section-5050-column-copy .section-5050-title {
max-width: 12em
}
}
@media only screen and (min-width: 735px) {
.section-design .section-5050-column-water-resistance noscript {
grid-row-start: 4
}
}
.section-design .overview-design-finishes-1-alpine-green, .section-design .overview-design-finishes-1-gold, .section-design .overview-design-finishes-1-graphite, .section-design .overview-design-finishes-1-sierra-blue, .section-design .overview-design-finishes-1-silver {
max-height: 543px
}
@media only screen and (max-width: 1068px) {
.section-design .overview-design-finishes-1-alpine-green, .section-design .overview-design-finishes-1-gold, .section-design .overview-design-finishes-1-graphite, .section-design .overview-design-finishes-1-sierra-blue, .section-design .overview-design-finishes-1-silver {
max-height: 383px
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-finishes-1-alpine-green, .section-design .overview-design-finishes-1-gold, .section-design .overview-design-finishes-1-graphite, .section-design .overview-design-finishes-1-sierra-blue, .section-design .overview-design-finishes-1-silver {
max-height: 603px
}
}
@media only screen and (min-width: 1069px) {
.section-design .overview-design-finishes-2-alpine-green, .section-design .overview-design-finishes-2-gold, .section-design .overview-design-finishes-2-graphite, .section-design .overview-design-finishes-2-sierra-blue, .section-design .overview-design-finishes-2-silver {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1042px;
--p-height: 935px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-design .overview-design-finishes-2-alpine-green, .section-design .overview-design-finishes-2-gold, .section-design .overview-design-finishes-2-graphite, .section-design .overview-design-finishes-2-sierra-blue, .section-design .overview-design-finishes-2-silver {
display: block;
width: var(--p-width);
height: var(--p-height)
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px)and (max-width: 1068px) {
.section-design .overview-design-finishes-2-alpine-green, .section-design .overview-design-finishes-2-gold, .section-design .overview-design-finishes-2-graphite, .section-design .overview-design-finishes-2-sierra-blue, .section-design .overview-design-finishes-2-silver {
--p-width: 464px;
--p-height: 735px
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-finishes-2-alpine-green, .section-design .overview-design-finishes-2-gold, .section-design .overview-design-finishes-2-graphite, .section-design .overview-design-finishes-2-sierra-blue, .section-design .overview-design-finishes-2-silver {
max-height: 960px;
height: 100%
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-finishes-2-alpine-green img, .section-design .overview-design-finishes-2-gold img, .section-design .overview-design-finishes-2-graphite img, .section-design .overview-design-finishes-2-sierra-blue img, .section-design .overview-design-finishes-2-silver img {
height: 100%;
width: auto;
display: block;
margin: auto;
max-height: 100%;
max-width: 100%;
object-fit: contain;
object-position: right bottom
}
}
.section-design .overview-design-finishes-1-static {
max-height: 460px;
height: 100%;
padding: 0 40px
}
@media only screen and (max-width: 1068px) {
.section-design .overview-design-finishes-1-static {
max-height: 325px
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-finishes-1-static {
max-height: 257px
}
}
@media only screen and (max-width: 1068px) {
.section-design .overview-design-finishes-1-static {
padding: 0 20px
}
}
.section-design .overview-design-finishes-1-static img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center center
}
@media only screen and (min-width: 1069px) {
.section-design .overview-design-stainless-steel-1-static {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 201px;
--p-height: 960px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-design .overview-design-stainless-steel-1-static {
display: block;
width: var(--p-width);
height: var(--p-height)
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px)and (max-width: 1068px) {
.section-design .overview-design-stainless-steel-1-static {
--p-width: 142px;
--p-height: 746px
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-stainless-steel-1-static {
max-height: 612px;
height: 100%
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-stainless-steel-1-static img {
height: 100%;
width: auto;
display: block;
margin: auto
}
}
.section-design .overview-design-stainless-steel-2-static {
max-height: 657px
}
@media only screen and (max-width: 1068px) {
.section-design .overview-design-stainless-steel-2-static {
max-height: 456px
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-stainless-steel-2-static {
max-height: 497px
}
}
.section-design .overview-design-ceramic-shield-1-static {
max-height: 543px
}
@media only screen and (max-width: 1068px) {
.section-design .overview-design-ceramic-shield-1-static {
max-height: 455px
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-ceramic-shield-1-static {
max-height: 470px
}
}
@media only screen and (min-width: 1069px) {
.section-design .overview-design-ceramic-shield-2-static {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 536px;
--p-height: 1216px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-design .overview-design-ceramic-shield-2-static {
display: block;
width: var(--p-width);
height: var(--p-height)
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px)and (max-width: 1068px) {
.section-design .overview-design-ceramic-shield-2-static {
--p-width: 390px;
--p-height: 890px
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-ceramic-shield-2-static {
max-height: 998px;
height: 100%
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-ceramic-shield-2-static img {
height: 100%;
width: auto;
display: block;
margin: auto
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-ceramic-shield-2-static {
display: flex;
justify-content: center
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-ceramic-shield-2-static img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center bottom
}
}
.section-design .overview-design-water-resistant {
margin: auto
}
@media only screen and (min-width: 1069px) {
.section-design .overview-design-water-resistant {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 884px;
--p-height: 1394px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-design .overview-design-water-resistant {
display: block;
width: var(--p-width);
height: var(--p-height)
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px)and (max-width: 1068px) {
.section-design .overview-design-water-resistant {
--p-width: 638px;
--p-height: 800px
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-water-resistant {
max-height: 478px;
height: 100%
}
}
@media only screen and (max-width: 734px) {
.section-design .overview-design-water-resistant img {
height: 100%;
width: auto;
display: block;
margin: auto
}
}
.section-camera {
position: relative
}
.section-camera .camera-intro {
background-color: #fbfbfd;
margin-top: 0;
padding-top: 125px;
padding-bottom: 138px;
position: relative;
z-index: 2
}
@media only screen and (max-width: 1068px) {
.section-camera .camera-intro {
padding-top: 123px
}
}
@media only screen and (max-width: 734px) {
.section-camera .camera-intro {
padding-top: 69px;
padding-bottom: 69px
}
}
html.enhance-page-xp-parallax .section-camera .camera-intro .container {
position: relative
}
.section-camera .camera-intro .copy-wrapper {
color: #86868b
}
html.enhance-page-xp-parallax .section-camera .camera-intro .copy-wrapper {
padding-top: 25vh
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .section-camera .camera-intro .copy-wrapper {
padding-top: 50vh
}
}
html.text-zoom .section-camera .camera-intro .copy-wrapper {
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word
}
.section-camera .camera-intro .image-wrapper {
height: 562px;
padding-top: 100px
}
@media only screen and (max-width: 1068px) {
.section-camera .camera-intro .image-wrapper {
height: 405px
}
}
@media only screen and (max-width: 734px) {
.section-camera .camera-intro .image-wrapper {
height: 180px
}
}
@media only screen and (max-width: 1068px) {
.section-camera .camera-intro .image-wrapper {
padding-top: 69px
}
}
@media only screen and (max-width: 734px) {
.section-camera .camera-intro .image-wrapper {
padding-top: 42px
}
}
html.enhance-page-xp-parallax .section-camera .camera-intro .image-wrapper {
width: 100%;
position: sticky;
z-index: 1;
bottom: -224.8px
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .section-camera .camera-intro .image-wrapper {
bottom: -162px
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .section-camera .camera-intro .image-wrapper {
bottom: -72px
}
}
.section-camera .camera-intro .image-wrapper .image-overflow-crop {
width: 100%;
overflow: hidden
}
.section-camera .camera-intro .overview-camera-intro-camera-system {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 2442px;
--p-height: 562px;
position: relative;
left: 50%;
margin-left: -791px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-camera .camera-intro .overview-camera-intro-camera-system {
--p-width: 1068px;
--p-height: 405px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-camera .camera-intro .overview-camera-intro-camera-system {
--p-width: 617px;
--p-height: 180px
}
}
@media only screen and (max-width: 1068px) {
.section-camera .camera-intro .overview-camera-intro-camera-system {
left: 50%;
margin-left: -534px
}
}
@media only screen and (max-width: 734px) {
.section-camera .camera-intro .overview-camera-intro-camera-system {
left: 50%;
margin-left: -252.5px
}
}
.camera-macro {
z-index: 1;
position: relative;
overflow: hidden;
padding-top: 122px;
padding-bottom: 138px
}
@media only screen and (max-width: 1068px) {
.camera-macro {
padding-bottom: 130px
}
}
@media only screen and (max-width: 734px) {
.camera-macro {
padding-top: 60px;
padding-bottom: 70px
}
}
.camera-macro .grid-macro {
position: relative;
grid-column-gap: 0;
grid-row-gap: 0;
padding-left: 0;
padding-right: 0
}
.camera-macro .grid-item-photo {
margin-bottom: 4.8235294118rem
}
@media only screen and (max-width: 1068px) {
.camera-macro .grid-item-photo {
margin-bottom: 3.7058823529rem
}
}
@media only screen and (max-width: 734px) {
.camera-macro .grid-item-photo {
margin-bottom: 2.4117647059rem
}
}
.camera-macro .macro-photo {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1358px;
--p-height: 1019px;
position: relative;
left: 50%;
margin-left: -679px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-macro .macro-photo {
--p-width: 1012px;
--p-height: 759px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-macro .macro-photo {
--p-width: 734px;
--p-height: 551px
}
}
@media only screen and (max-width: 1068px) {
.camera-macro .macro-photo {
left: 50%;
margin-left: -506px
}
}
@media only screen and (max-width: 734px) {
.camera-macro .macro-photo {
left: 50%;
margin-left: -367px
}
}
html.text-zoom .camera-macro .grid-intro-container {
grid-column: span 12
}
@media only screen and (max-width: 734px) {
.camera-macro .grid-intro-container {
padding-bottom: 22px
}
}
html.text-zoom .camera-macro .grid-copy-container {
grid-column: span 12
}
.camera-macro .grid-photo-subhead {
max-width: 9em;
margin-top: .25em
}
@media only screen and (max-width: 734px) {
.camera-macro .grid-photo-subhead {
margin-top: 0
}
}
.camera-macro .grid-photo-copy {
margin-top: 1.1em
}
@media only screen and (max-width: 1068px) {
.camera-macro .grid-photo-copy {
margin-top: .8em
}
}
.camera-macro .macro-video-container {
width: 1358px;
height: 768px;
position: relative;
left: 50%;
margin-left: -679px
}
.camera-macro .macro-video-container .start-frame {
opacity: 0;
pointer-events: all;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none
}
.camera-macro .macro-video-container.ended .end-frame {
opacity: 1;
pointer-events: all
}
.camera-macro .macro-video-container .end-frame {
opacity: 0;
pointer-events: all;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none
}
@media only screen and (max-width: 1068px) {
.camera-macro .macro-video-container {
width: 1012px;
height: 570px
}
}
@media only screen and (max-width: 734px) {
.camera-macro .macro-video-container {
width: 734px;
height: 410px
}
}
@media only screen and (max-width: 1068px) {
.camera-macro .macro-video-container {
left: 50%;
margin-left: -506px
}
}
@media only screen and (max-width: 734px) {
.camera-macro .macro-video-container {
left: 50%;
margin-left: -367px
}
}
.camera-macro .macro-video-container .end-frame, .camera-macro .macro-video-container video {
display: none;
transition: opacity .2s
}
html.enhance-page-xp-media .camera-macro .macro-video-container .end-frame, html.enhance-page-xp-media .camera-macro .macro-video-container video {
display: block
}
.camera-macro .macro-video-container .start-frame {
opacity: 1;
transition: opacity .2s
}
.camera-macro .macro-video-container video {
width: 1358px;
height: 768px;
position: relative;
left: 50%;
margin-left: -679px;
max-width: 100%
}
@media only screen and (max-width: 1068px) {
.camera-macro .macro-video-container video {
width: 1012px;
height: 570px
}
}
@media only screen and (max-width: 734px) {
.camera-macro .macro-video-container video {
width: 734px;
height: 410px
}
}
@media only screen and (max-width: 1068px) {
.camera-macro .macro-video-container video {
left: 50%;
margin-left: -506px
}
}
@media only screen and (max-width: 734px) {
.camera-macro .macro-video-container video {
left: 50%;
margin-left: -367px
}
}
html.enhance-page-xp-media .camera-macro .macro-video-container.ended .start-frame, html.enhance-page-xp-media .camera-macro .macro-video-container.paused .start-frame, html.enhance-page-xp-media .camera-macro .macro-video-container.playing .start-frame {
opacity: 0
}
html.enhance-page-xp-media .camera-macro .macro-video-container.loading-error .start-frame, html.enhance-page-xp-media .camera-macro .macro-video-container.loading .start-frame {
opacity: 1
}
.camera-macro .grid-item-video {
position: relative;
margin: 7.8235294118rem max(-189px, calc(-50vw - -490px)) 5.4705882353rem
}
@media only screen and (max-width: 1068px) {
.camera-macro .grid-item-video {
margin: 6.7647058824rem max(-160px, calc(-50vw - -346px)) 3.4117647059rem
}
}
@media only screen and (max-width: 734px) {
.camera-macro .grid-item-video {
margin: 2.6470588235rem -6.25vw 2.7058823529rem
}
}
.camera-macro .inline-media-ui {
--inline-media-playpause-icon-color: rgba(0, 0, 0, 0.56);
--inline-media-playpause-icon-color-hover: rgba(0, 0, 0, 0.64);
--inline-media-playpause-scrim-color: rgba(210, 210, 215, 0.64);
--inline-media-playpause-scrim-color-hover: rgba(223, 223, 227, 0.6976);
--inline-media-playpause-scrim-color-active: rgba(193, 193, 198, 0.6544);
display: none
}
.camera-macro .inline-media-ui.loading-empty .play-pause-button {
opacity: 0
}
.camera-macro .inline-media-ui.loading .play-pause-button {
pointer-events: none;
opacity: 1
}
.camera-macro .inline-media-ui.loading .play-pause-button:before {
display: none
}
.camera-macro .inline-media-ui.loading .play-pause-button:after {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGg1NnY1NkgweiIvPjxwYXRoIGQ9Ik0yOCA4LjVhMi41IDIuNSAwIDAxMi41IDIuNXY3YTIuNSAyLjUgMCAwMS01IDB2LTdBMi41IDIuNSAwIDAxMjggOC41eiIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTQxLjc5IDE0LjIxYTIuNTIgMi41MiAwIDAxMCAzLjU0bC00Ljk1IDQuOTVhMi41IDIuNSAwIDAxLTMuNTQtMy41NGw1LTQuOTVhMi41MiAyLjUyIDAgMDEzLjQ5IDB6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjEiLz48cGF0aCBkPSJNNDcuNSAyOGEyLjUgMi41IDAgMDEtMi41IDIuNWgtN2EyLjUgMi41IDAgMDEwLTVoN2EyLjUgMi41IDAgMDEyLjUgMi41eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQxLjc5IDQxLjc5YTIuNTIgMi41MiAwIDAxLTMuNTQgMGwtNS00Ljk1YTIuNSAyLjUgMCAwMTMuNTQtMy41NGw0Ljk1IDVhMi41MiAyLjUyIDAgMDEuMDUgMy40OXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuMyIvPjxwYXRoIGQ9Ik0yOCA0Ny41YTIuNSAyLjUgMCAwMS0yLjUtMi41di03YTIuNSAyLjUgMCAwMTUgMHY3YTIuNSAyLjUgMCAwMS0yLjUgMi41eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii40Ii8+PHBhdGggZD0iTTE0LjIxIDQxLjc5YTIuNTIgMi41MiAwIDAxMC0zLjU0bDQuOTUtNWEyLjUgMi41IDAgMDEzLjU0IDMuNTRsLTQuOTUgNC45NWEyLjUyIDIuNTIgMCAwMS0zLjU0LjA1eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii42Ii8+PHBhdGggZD0iTTguNSAyOGEyLjUgMi41IDAgMDEyLjUtMi41aDdhMi41IDIuNSAwIDAxMCA1aC03QTIuNSAyLjUgMCAwMTguNSAyOHoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNyIvPjxwYXRoIGQ9Ik0xNC4yMSAxNC4yMWEyLjUyIDIuNTIgMCAwMTMuNTQgMGw0Ljk1IDQuOTVhMi41IDIuNSAwIDAxLTMuNTQgMy41NGwtNC45NS00Ljk1YTIuNTIgMi41MiAwIDAxMC0zLjU0eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii45Ii8+PC9zdmc+");
position: absolute;
width: 100%;
height: 100%;
animation: inline-media-spin .85s steps(8) infinite;
background-position-x: center;
background-position-y: center;
mask: none;
-webkit-mask: none;
top: 0;
left: 0
}
.camera-macro .inline-media-ui.loaded.playing .play-pause-button:after {
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyBpZD0iRXhwb3J0YWJsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMWQxZDFmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJwYXVzZSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzLjc1IiB5PSIzIiB3aWR0aD0iNC41IiBoZWlnaHQ9IjE0IiByeD0iMS41Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxMS43NSIgeT0iMyIgd2lkdGg9IjQuNSIgaGVpZ2h0PSIxNCIgcng9IjEuNSIvPjwvZz48L3N2Zz4=");
mask: url("data:image/svg+xml;base64,PHN2ZyBpZD0iRXhwb3J0YWJsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMWQxZDFmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJwYXVzZSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzLjc1IiB5PSIzIiB3aWR0aD0iNC41IiBoZWlnaHQ9IjE0IiByeD0iMS41Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxMS43NSIgeT0iMyIgd2lkdGg9IjQuNSIgaGVpZ2h0PSIxNCIgcng9IjEuNSIvPjwvZz48L3N2Zz4=")
}
.camera-macro .inline-media-ui.loaded.ended .play-pause-button:after {
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE2Ljc1IDkuNGExLjUgMS41IDAgMDAtMS41IDEuNUE0Ljg4IDQuODggMCAxMTEwLjM4IDZoLjJMOS4zMSA3LjMyYTEuNSAxLjUgMCAwMDEuMDYgMi41NiAxLjQ1IDEuNDUgMCAwMDEuMDYtLjQ0TDE1IDUuODhhMS41MiAxLjUyIDAgMDAuNDQtMS4wNkExLjU0IDEuNTQgMCAwMDE1IDMuNzVMMTEuNDMuMTlhMS40OSAxLjQ5IDAgMDAtMi4xMiAwIDEuNTEgMS41MSAwIDAwMCAyLjEybC43NS43NWE3Ljg1IDcuODUgMCAxMDguMTkgNy44NCAxLjUgMS41IDAgMDAtMS41LTEuNXoiIGZpbGw9IiMxZDFkMWYiLz48L3N2Zz4=");
mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE2Ljc1IDkuNGExLjUgMS41IDAgMDAtMS41IDEuNUE0Ljg4IDQuODggMCAxMTEwLjM4IDZoLjJMOS4zMSA3LjMyYTEuNSAxLjUgMCAwMDEuMDYgMi41NiAxLjQ1IDEuNDUgMCAwMDEuMDYtLjQ0TDE1IDUuODhhMS41MiAxLjUyIDAgMDAuNDQtMS4wNkExLjU0IDEuNTQgMCAwMDE1IDMuNzVMMTEuNDMuMTlhMS40OSAxLjQ5IDAgMDAtMi4xMiAwIDEuNTEgMS41MSAwIDAwMCAyLjEybC43NS43NWE3Ljg1IDcuODUgMCAxMDguMTkgNy44NCAxLjUgMS41IDAgMDAtMS41LTEuNXoiIGZpbGw9IiMxZDFkMWYiLz48L3N2Zz4=")
}
.camera-macro .inline-media-ui.loaded .play-pause-button {
pointer-events: all;
opacity: 1
}
.camera-macro .inline-media-ui .play-pause-button {
padding: 0;
margin-right: 16px;
margin-bottom: 16px;
background: none;
display: block;
width: 44px;
min-width: 44px;
height: 44px;
opacity: 0;
border: none;
display: flex;
position: relative;
justify-self: flex-end;
align-self: flex-end;
align-items: center;
justify-content: center;
pointer-events: none;
cursor: pointer;
background-repeat: no-repeat;
transition: opacity 100ms linear, transform .2s ease
}
.camera-macro .inline-media-ui .play-pause-button:after {
content: "";
mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUgMTUuMjVWNC43N2ExLjQ0IDEuNDQgMCAwMTEuNDQtMS42MiAxLjg2IDEuODYgMCAwMTEuMTEuMzFsOC41MyA1Yy43Ni40NCAxLjE3LjggMS4xNyAxLjUxcy0uNDEgMS4wNy0xLjE3IDEuNTFsLTguNTMgNWExLjg2IDEuODYgMCAwMS0xLjExLjMxQTEuNDIgMS40MiAwIDAxNSAxNS4yNXoiLz48L3N2Zz4=");
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUgMTUuMjVWNC43N2ExLjQ0IDEuNDQgMCAwMTEuNDQtMS42MiAxLjg2IDEuODYgMCAwMTEuMTEuMzFsOC41MyA1Yy43Ni40NCAxLjE3LjggMS4xNyAxLjUxcy0uNDEgMS4wNy0xLjE3IDEuNTFsLTguNTMgNWExLjg2IDEuODYgMCAwMS0xLjExLjMxQTEuNDIgMS40MiAwIDAxNSAxNS4yNXoiLz48L3N2Zz4=");
mask-size: cover;
-webkit-mask-size: cover;
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
background-size: 20px 20px;
background-color: var(--inline-media-playpause-icon-color)
}
.camera-macro .inline-media-ui .play-pause-button:before {
content: "";
position: absolute;
background-color: var(--inline-media-playpause-scrim-color);
border-radius: 50%;
width: 36px;
height: 36px
}
.camera-macro .inline-media-ui .play-pause-button:disabled {
pointer-events: none;
opacity: .32
}
.camera-macro .inline-media-ui .play-pause-button:hover:after {
background-color: var(--inline-media-playpause-icon-color-hover)
}
.camera-macro .inline-media-ui .play-pause-button:hover:before {
background-color: var(--inline-media-playpause-scrim-color-hover)
}
.camera-macro .inline-media-ui .play-pause-button:active {
transform: scale(0.95)
}
.camera-macro .inline-media-ui .play-pause-button:active:after {
background-color: var(--inline-media-playpause-icon-color)
}
.camera-macro .inline-media-ui .play-pause-button:active:before {
background-color: var(--inline-media-playpause-scrim-color-active)
}
.camera-macro .inline-media-ui .play-pause-button:focus {
outline: none
}
.camera-macro .inline-media-ui .play-pause-button:focus:before {
box-shadow: 0 0 0 4px #007d96
}
.camera-macro .inline-media-ui .play-pause-button:focus[data-focus-method=mouse]:not(input):not(textarea):not(select):before, .camera-macro .inline-media-ui .play-pause-button:focus[data-focus-method=touch]:not(input):not(textarea):not(select):before {
box-shadow: none
}
html.enhance-page-xp-media .camera-macro .inline-media-ui {
display: block;
position: absolute;
bottom: 0;
right: 0;
z-index: 10
}
.camera-macro .grid-video-copy {
margin-top: .15em
}
@media only screen and (max-width: 1068px) {
.camera-macro .grid-video-copy {
margin-top: .25em
}
}
@media only screen and (max-width: 734px) {
.camera-macro .grid-video-copy {
margin-top: 0
}
}
.overview-camera-low-light-night-mode-photography-1 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 676px;
--p-height: 902px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-low-light-night-mode-photography-1 {
--p-width: 480px;
--p-height: 641px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-1 {
--p-width: 486px;
--p-height: 552px
}
}
@media only screen and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-1 {
position: relative;
left: 50%;
margin-left: -338px
}
}
@media only screen and (max-width: 734px)and (max-width: 1068px) {
.overview-camera-low-light-night-mode-photography-1 {
left: 50%;
margin-left: -240px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-1 {
left: 50%;
margin-left: -243px
}
}
.overview-camera-low-light-night-mode-photography-2 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 621px;
--p-height: 829px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-low-light-night-mode-photography-2 {
--p-width: 451px;
--p-height: 601px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-2 {
--p-width: 355px;
--p-height: 472px
}
}
@media only screen and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-2 {
position: relative;
left: 50%;
margin-left: -310.5px
}
}
@media only screen and (max-width: 734px)and (max-width: 1068px) {
.overview-camera-low-light-night-mode-photography-2 {
left: 50%;
margin-left: -225.5px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-2 {
left: 50%;
margin-left: -177.5px
}
}
.overview-camera-low-light-night-mode-photography-3 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 676px;
--p-height: 939px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-low-light-night-mode-photography-3 {
--p-width: 480px;
--p-height: 640px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-3 {
--p-width: 486px;
--p-height: 552px
}
}
@media only screen and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-3 {
position: relative;
left: 50%;
margin-left: -338px
}
}
@media only screen and (max-width: 734px)and (max-width: 1068px) {
.overview-camera-low-light-night-mode-photography-3 {
left: 50%;
margin-left: -240px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-3 {
left: 50%;
margin-left: -243px
}
}
.overview-camera-low-light-night-mode-photography-4 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 884px;
--p-height: 663px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-low-light-night-mode-photography-4 {
--p-width: 652px;
--p-height: 489px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-4 {
--p-width: 390px;
--p-height: 521px
}
}
@media only screen and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-4 {
position: relative;
left: 50%;
margin-left: -442px
}
}
@media only screen and (max-width: 734px)and (max-width: 1068px) {
.overview-camera-low-light-night-mode-photography-4 {
left: 50%;
margin-left: -326px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-4 {
left: 50%;
margin-left: -195px
}
}
.overview-camera-low-light-night-mode-photography-5 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 635px;
--p-height: 848px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-low-light-night-mode-photography-5 {
--p-width: 410px;
--p-height: 550px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-5 {
--p-width: 486px;
--p-height: 552px
}
}
@media only screen and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-5 {
position: relative;
left: 50%;
margin-left: -317.5px
}
}
@media only screen and (max-width: 734px)and (max-width: 1068px) {
.overview-camera-low-light-night-mode-photography-5 {
left: 50%;
margin-left: -205px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-low-light-night-mode-photography-5 {
left: 50%;
margin-left: -243px
}
}
.camera-low-light {
overflow: hidden
}
html.text-zoom .grid-low-light {
display: block
}
@media only screen and (min-width: 735px) {
.grid-low-light {
display: grid;
grid-template-columns: 307px minmax(85px, 4fr) minmax(21px, 1fr) 114px 453px;
grid-template-rows: auto auto 300px auto 90px auto 305px auto 120px auto auto;
padding-bottom: 133px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.grid-low-light {
grid-template-columns: 215px minmax(92px, 4fr) minmax(23px, 1fr) 80px 330px;
grid-template-rows: auto auto 195px auto 35px auto 175px auto 75px auto auto;
width: 740px;
padding-bottom: 30px
}
}
@media only screen and (max-width: 734px) {
.grid-low-light {
max-width: 390px;
padding-top: 20px;
padding-bottom: 10px
}
}
.grid-low-light p + * {
margin-top: 0
}
@media only screen and (max-width: 734px) {
.grid-low-light .claim {
max-width: 15em;
padding: 63px 0 68px
}
}
.grid-low-light .claim .claim-prefix + .claim-title {
margin-top: 8px
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.grid-low-light .claim .claim-prefix + .claim-title {
margin-top: 14px
}
}
.grid-low-light .claim .claim-title + .claim-copy {
max-width: 13em;
margin-top: 11px
}
@media only screen and (max-width: 1068px) {
.grid-low-light .claim .claim-title + .claim-copy {
margin-top: 13px
}
}
@media only screen and (max-width: 734px) {
.grid-low-light .claim .claim-title + .claim-copy {
margin-top: 8px
}
}
@media only screen and (min-width: 735px) {
.grid-low-light .grid-item-headline {
padding-left: 50px;
grid-column: 4/6;
grid-row: 1/2;
align-self: end;
margin-top: 250px;
padding-bottom: 33px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.grid-low-light .grid-item-headline {
margin-right: max(-30px, -3vw);
margin-top: 130px;
padding-bottom: 25px
}
}
@media only screen and (max-width: 734px) {
.grid-low-light .grid-item-headline {
padding: 37px 0
}
}
html.text-zoom .grid-low-light .grid-item-photo-1, html.text-zoom .grid-low-light .grid-item-photo-1 + noscript {
margin-top: 50px;
padding-bottom: 50px
}
@media only screen and (min-width: 735px) {
.grid-low-light .grid-item-photo-1, .grid-low-light .grid-item-photo-1 + noscript {
grid-column: 1/4;
grid-row: 1/4;
justify-self: end;
margin-top: 125px;
z-index: 2
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.grid-low-light .grid-item-photo-1, .grid-low-light .grid-item-photo-1 + noscript {
margin-top: 120px
}
}
@media only screen and (min-width: 735px) {
.grid-low-light .grid-item-copy {
padding-left: 50px;
grid-column: 4/6;
grid-row: 2/3;
align-self: end;
padding-bottom: 80px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.grid-low-light .grid-item-copy {
padding-right: 25px;
padding-bottom: 65px
}
}
@media only screen and (max-width: 734px) {
.grid-low-light .grid-item-copy {
padding-bottom: 70px
}
}
html.text-zoom .grid-low-light .grid-item-photo-2, html.text-zoom .grid-low-light .grid-item-photo-2 + noscript {
padding-top: 50px
}
@media only screen and (min-width: 735px) {
.grid-low-light .grid-item-photo-2, .grid-low-light .grid-item-photo-2 + noscript {
grid-column: 3/6;
grid-row: 3/6;
z-index: 1
}
}
@media only screen and (min-width: 735px) {
.grid-low-light .claim-wide {
padding-left: 25px;
padding-right: 50px;
grid-column: 1/3;
grid-row: 4/5;
align-self: center;
max-width: 14.6em
}
html.enhance-section-design-parallax .grid-low-light .claim-wide {
padding-bottom: 100px
}
}
@media only screen and (max-width: 1068px) {
.grid-low-light .claim-wide {
max-width: 9em
}
}
@media only screen and (max-width: 734px) {
.grid-low-light .claim-wide {
max-width: 16em
}
}
@media only screen and (max-width: 734px) {
.grid-low-light .claim-wide .claim-title + .claim-copy {
max-width: none
}
}
html.text-zoom .grid-low-light .grid-item-photo-3, html.text-zoom .grid-low-light .grid-item-photo-3 + noscript {
padding-bottom: 50px
}
@media only screen and (min-width: 735px) {
.grid-low-light .grid-item-photo-3, .grid-low-light .grid-item-photo-3 + noscript {
grid-column: 1/4;
grid-row: 5/8;
align-self: end;
justify-self: end
}
}
@media only screen and (max-width: 734px) {
.grid-low-light .grid-item-photo-3, .grid-low-light .grid-item-photo-3 + noscript {
padding-bottom: 40px
}
}
@media only screen and (min-width: 735px) {
.grid-low-light .claim-ultra-wide {
--padding-top: 50px;
grid-column: 4/6;
grid-row: 6/7;
align-self: center;
max-width: 20em;
padding: var(--padding-top) 50px 50px
}
}
@media only screen and (max-width: 1068px) {
.grid-low-light .claim-ultra-wide {
max-width: 17em
}
}
@media only screen and (max-width: 734px) {
.grid-low-light .claim-ultra-wide {
max-width: 16em
}
}
@media only screen and (max-width: 734px) {
.grid-low-light .claim-ultra-wide .claim-title + .claim-copy {
max-width: none
}
}
@media only screen and (min-width: 735px) {
.grid-low-light .grid-item-photo-4, .grid-low-light .grid-item-photo-4 + noscript {
grid-column: 2/6;
grid-row: 7/10;
align-self: end
}
}
html.text-zoom .grid-low-light .claim-telephoto {
padding-top: 50px;
padding-bottom: 50px
}
@media only screen and (min-width: 735px) {
.grid-low-light .claim-telephoto {
padding-left: 50px;
--padding-top: 230px;
grid-column: 5/6;
grid-row: 10/11;
padding-top: var(--padding-top)
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.grid-low-light .claim-telephoto {
padding-left: 58px;
--padding-top: 0;
align-self: center
}
}
@media only screen and (min-width: 735px) {
.grid-low-light .grid-item-photo-5, .grid-low-light .grid-item-photo-5 + noscript {
grid-column: 1/5;
grid-row: 9/11;
align-self: end;
justify-self: end
}
}
@media only screen and (min-width: 735px) {
.grid-low-light .claim-detail {
--padding-top: 70px;
grid-column: 1/5;
grid-row: 11/12;
align-self: end;
padding-top: var(--padding-top)
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.grid-low-light .claim-detail {
--padding-top: 32px;
position: relative;
left: 50px;
padding-bottom: 100px
}
}
.overview-camera-zoom-zoom-photography-1 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 492px;
--p-height: 657px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-zoom-zoom-photography-1 {
--p-width: 350px;
--p-height: 460px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-zoom-zoom-photography-1 {
--p-width: 256px;
--p-height: 319px
}
}
.overview-camera-zoom-zoom-photography-2 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 841px;
--p-height: 631px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-zoom-zoom-photography-2 {
--p-width: 596px;
--p-height: 447px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-zoom-zoom-photography-2 {
--p-width: 434px;
--p-height: 540px
}
}
@media only screen and (max-width: 734px) {
.overview-camera-zoom-zoom-photography-2 {
left: 50%;
margin-left: -217px;
position: relative
}
}
.overview-camera-zoom-zoom-photography-3 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 718px;
--p-height: 957px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-zoom-zoom-photography-3 {
--p-width: 538px;
--p-height: 717px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-zoom-zoom-photography-3 {
--p-width: 257px;
--p-height: 342px
}
}
.camera-zoom {
overflow: hidden
}
html.text-zoom .grid-zoom {
display: block
}
@media only screen and (min-width: 735px) {
.grid-zoom {
display: grid;
grid-template-columns: 369px minmax(124px, 1fr) 487px;
grid-template-rows: auto 80px minmax(260px, auto) 172px auto;
padding-top: 123px;
padding-bottom: 135px
}
}
@media only screen and (max-width: 1068px) {
.grid-zoom {
grid-template-columns: 284px minmax(62px, 1fr) 346px;
grid-template-rows: auto 65px minmax(260px, auto) 60px auto;
padding-top: 60px
}
}
@media only screen and (max-width: 734px) {
.grid-zoom {
max-width: 390px;
padding-bottom: 50px
}
html.enhance-page-xp-parallax .grid-zoom {
padding-bottom: 100px
}
}
.grid-zoom p + * {
margin-top: 0
}
.grid-zoom .grid-item-headline {
grid-column: 3/4;
grid-row: 1/2;
align-self: end;
padding: 50px 50px 80px
}
@media only screen and (max-width: 1068px) {
.grid-zoom .grid-item-headline {
padding-top: 100px;
padding-bottom: 45px
}
}
@media only screen and (max-width: 734px) {
.grid-zoom .grid-item-headline {
padding: 50px 0
}
}
.grid-zoom .grid-item-photo-2, .grid-zoom .grid-item-photo-2 + noscript {
grid-column: 2/4;
grid-row: 2/5;
align-self: center;
z-index: 1
}
.grid-zoom .grid-item-copy {
padding-right: 50px;
grid-column: 1/2;
grid-row: 3/4;
align-self: center;
padding-top: 50px;
padding-bottom: 50px
}
@media only screen and (max-width: 1068px) {
.grid-zoom .grid-item-copy {
padding-right: 55px;
padding-top: 50px
}
}
@media only screen and (max-width: 734px) {
.grid-zoom .grid-item-copy {
padding: 30px 0 40px
}
}
.grid-zoom .claim-list {
padding-left: 81px;
grid-column: 3/4;
grid-row: 5/6;
align-self: center
}
@media only screen and (max-width: 1068px) {
.grid-zoom .claim-list {
padding-left: 50px
}
}
@media only screen and (max-width: 734px) {
.grid-zoom .claim-list {
padding: 0 0 70px
}
html.enhance-page-xp-parallax .grid-zoom .claim-list {
padding-bottom: 20px
}
}
.grid-zoom .claim-list .claim + .claim {
padding-top: 110px
}
@media only screen and (max-width: 1068px) {
.grid-zoom .claim-list .claim + .claim {
padding-top: 50px
}
}
@media only screen and (max-width: 734px) {
.grid-zoom .claim-list .claim + .claim {
padding-top: 40px
}
}
.grid-zoom .claim-list .claim-title {
margin-bottom: 10px
}
@media only screen and (max-width: 1068px) {
.grid-zoom .claim-list .claim-title {
margin-bottom: 12px
}
}
@media only screen and (max-width: 734px) {
.grid-zoom .claim-list .claim-title {
margin-bottom: 0
}
}
.grid-zoom .grid-item-photo-1, .grid-zoom .grid-item-photo-1 + noscript {
grid-column: 1/3;
grid-row: 1/3;
justify-self: end;
align-self: end;
z-index: 1
}
html.text-zoom .grid-zoom .grid-item-photo-1, html.text-zoom .grid-zoom .grid-item-photo-1 + noscript {
padding-top: 50px;
padding-bottom: 50px
}
.grid-zoom .grid-item-photo-3, .grid-zoom .grid-item-photo-3 + noscript {
grid-column: 1/3;
grid-row: 4/6;
justify-self: end
}
@media only screen and (min-width: 1069px)and (max-width: 1440px) {
.grid-zoom .grid-item-photo-3, .grid-zoom .grid-item-photo-3 + noscript {
margin-right: 10px
}
}
@media only screen and (max-width: 734px) {
.grid-zoom .grid-item-photo-3, .grid-zoom .grid-item-photo-3 + noscript {
margin-left: 90px;
margin-top: -120px
}
}
@media only screen and (min-width: 735px) {
.grid-zoom .photo-lockup {
display: contents
}
}
@media only screen and (max-width: 734px) {
.grid-zoom .photo-lockup {
max-width: 347px;
margin-right: auto;
margin-left: auto
}
}
@media (max-width: 396.5714285714px) {
.grid-zoom .photo-lockup {
margin-left: calc(-173.5px - -43.75vw)
}
}
.camera-cinematic-mode {
position: relative;
z-index: 1
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode {
--cinematic-mode-device-scale: 0.6666666667;
--cinematic-mode-device-w: 984px;
--cinematic-mode-device-h: 485.3333333333px;
--cinematic-mode-screen-x: 21px;
--cinematic-mode-screen-y: 24px;
--cinematic-mode-mask-w: 504px;
--cinematic-mode-mask-h: 284px;
--cinematic-mode-mask-offset-x: 1px;
--cinematic-mode-mask-offset-y: -20px
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode {
--cinematic-mode-device-w: 697.3333333333px;
--cinematic-mode-device-h: 344px;
--cinematic-mode-screen-x: 15px;
--cinematic-mode-screen-y: 16px;
--cinematic-mode-mask-w: 360px;
--cinematic-mode-mask-h: 202px;
--cinematic-mode-mask-offset-x: 3px;
--cinematic-mode-mask-offset-y: -15px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode {
--cinematic-mode-device-w: 234.6666666667px;
--cinematic-mode-device-h: 474.6666666667px;
--cinematic-mode-screen-x: 12px;
--cinematic-mode-screen-y: 6px;
--cinematic-mode-mask-w: 166px;
--cinematic-mode-mask-h: 296px;
--cinematic-mode-mask-offset-x: 1px;
--cinematic-mode-mask-offset-y: -34px
}
}
.camera-cinematic-mode .content-header {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 125px;
padding-bottom: 92px
}
@media only screen and (max-width: 1068px) {
.camera-cinematic-mode .content-header {
padding-top: 93px;
padding-bottom: 102px
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .content-header {
display: block;
padding-top: 90px;
padding-bottom: 44px
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .intro-copy, .camera-cinematic-mode .subhead {
max-width: 230px
}
}
.camera-cinematic-mode .intro-copy {
margin-top: 0
}
.camera-cinematic-mode .subhead {
align-self: flex-start;
margin-top: 29px
}
@media only screen and (max-width: 1068px) {
.camera-cinematic-mode .subhead {
margin-top: 22px
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .subhead {
margin-top: 11px
}
}
.camera-cinematic-mode .image-static-hero {
background-size: 1440px 946px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hero_static__b216ggxhkiqa_large.jpg);
background-size: cover;
background-position: 50%
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.camera-cinematic-mode .image-static-hero {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hero_static__b216ggxhkiqa_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.camera-cinematic-mode .image-static-hero {
background-size: 1068px 701px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hero_static__b216ggxhkiqa_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.camera-cinematic-mode .image-static-hero {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hero_static__b216ggxhkiqa_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .image-static-hero {
background-size: 375px 682px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hero_static__b216ggxhkiqa_small.jpg)
}
}
@media only screen and (min-width: 1069px)and (max-width: 1440px) {
.camera-cinematic-mode .image-static-hero {
min-height: 946px
}
}
@media only screen and (min-width: 735px) {
.camera-cinematic-mode .image-static-hero {
width: 100%;
height: 100%
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.camera-cinematic-mode .image-static-hero {
min-height: 701px
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .image-static-hero {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hero_static__b216ggxhkiqa_small.jpg);
background-size: cover
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.camera-cinematic-mode .image-static-hero {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hero_static__b216ggxhkiqa_small_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .image-static-hero:after {
content: "";
display: block;
padding-bottom: 181.8666666667%
}
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .image-static-hero {
display: none
}
.camera-cinematic-mode .inline-media-ui-container {
position: relative;
z-index: 1
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui {
--inline-media-playpause-icon-color: rgba(0, 0, 0, 0.56);
--inline-media-playpause-icon-color-hover: rgba(0, 0, 0, 0.64);
--inline-media-playpause-scrim-color: rgba(210, 210, 215, 0.64);
--inline-media-playpause-scrim-color-hover: rgba(223, 223, 227, 0.6976);
--inline-media-playpause-scrim-color-active: rgba(193, 193, 198, 0.6544);
display: block;
z-index: 10;
position: absolute;
top: 0;
right: 0;
width: 84px;
height: calc(100% - 37px);
pointer-events: all;
padding-top: 37px
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loading-empty .play-pause-button {
opacity: 0
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loading .play-pause-button {
pointer-events: none;
opacity: 1
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loading .play-pause-button:before {
display: none
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loading .play-pause-button:after {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGg1NnY1NkgweiIvPjxwYXRoIGQ9Ik0yOCA4LjVhMi41IDIuNSAwIDAxMi41IDIuNXY3YTIuNSAyLjUgMCAwMS01IDB2LTdBMi41IDIuNSAwIDAxMjggOC41eiIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTQxLjc5IDE0LjIxYTIuNTIgMi41MiAwIDAxMCAzLjU0bC00Ljk1IDQuOTVhMi41IDIuNSAwIDAxLTMuNTQtMy41NGw1LTQuOTVhMi41MiAyLjUyIDAgMDEzLjQ5IDB6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjEiLz48cGF0aCBkPSJNNDcuNSAyOGEyLjUgMi41IDAgMDEtMi41IDIuNWgtN2EyLjUgMi41IDAgMDEwLTVoN2EyLjUgMi41IDAgMDEyLjUgMi41eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQxLjc5IDQxLjc5YTIuNTIgMi41MiAwIDAxLTMuNTQgMGwtNS00Ljk1YTIuNSAyLjUgMCAwMTMuNTQtMy41NGw0Ljk1IDVhMi41MiAyLjUyIDAgMDEuMDUgMy40OXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuMyIvPjxwYXRoIGQ9Ik0yOCA0Ny41YTIuNSAyLjUgMCAwMS0yLjUtMi41di03YTIuNSAyLjUgMCAwMTUgMHY3YTIuNSAyLjUgMCAwMS0yLjUgMi41eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii40Ii8+PHBhdGggZD0iTTE0LjIxIDQxLjc5YTIuNTIgMi41MiAwIDAxMC0zLjU0bDQuOTUtNWEyLjUgMi41IDAgMDEzLjU0IDMuNTRsLTQuOTUgNC45NWEyLjUyIDIuNTIgMCAwMS0zLjU0LjA1eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii42Ii8+PHBhdGggZD0iTTguNSAyOGEyLjUgMi41IDAgMDEyLjUtMi41aDdhMi41IDIuNSAwIDAxMCA1aC03QTIuNSAyLjUgMCAwMTguNSAyOHoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNyIvPjxwYXRoIGQ9Ik0xNC4yMSAxNC4yMWEyLjUyIDIuNTIgMCAwMTMuNTQgMGw0Ljk1IDQuOTVhMi41IDIuNSAwIDAxLTMuNTQgMy41NGwtNC45NS00Ljk1YTIuNTIgMi41MiAwIDAxMC0zLjU0eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii45Ii8+PC9zdmc+");
position: absolute;
width: 100%;
height: 100%;
animation: inline-media-spin .85s steps(8) infinite;
background-position-x: center;
background-position-y: center;
mask: none;
-webkit-mask: none;
top: 0;
left: 0
}
@keyframes inline-media-spin {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loaded.playing .play-pause-button:after {
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyBpZD0iRXhwb3J0YWJsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMWQxZDFmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJwYXVzZSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzLjc1IiB5PSIzIiB3aWR0aD0iNC41IiBoZWlnaHQ9IjE0IiByeD0iMS41Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxMS43NSIgeT0iMyIgd2lkdGg9IjQuNSIgaGVpZ2h0PSIxNCIgcng9IjEuNSIvPjwvZz48L3N2Zz4=");
mask: url("data:image/svg+xml;base64,PHN2ZyBpZD0iRXhwb3J0YWJsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMWQxZDFmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJwYXVzZSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzLjc1IiB5PSIzIiB3aWR0aD0iNC41IiBoZWlnaHQ9IjE0IiByeD0iMS41Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxMS43NSIgeT0iMyIgd2lkdGg9IjQuNSIgaGVpZ2h0PSIxNCIgcng9IjEuNSIvPjwvZz48L3N2Zz4=")
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loaded.ended .play-pause-button:after {
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE2Ljc1IDkuNGExLjUgMS41IDAgMDAtMS41IDEuNUE0Ljg4IDQuODggMCAxMTEwLjM4IDZoLjJMOS4zMSA3LjMyYTEuNSAxLjUgMCAwMDEuMDYgMi41NiAxLjQ1IDEuNDUgMCAwMDEuMDYtLjQ0TDE1IDUuODhhMS41MiAxLjUyIDAgMDAuNDQtMS4wNkExLjU0IDEuNTQgMCAwMDE1IDMuNzVMMTEuNDMuMTlhMS40OSAxLjQ5IDAgMDAtMi4xMiAwIDEuNTEgMS41MSAwIDAwMCAyLjEybC43NS43NWE3Ljg1IDcuODUgMCAxMDguMTkgNy44NCAxLjUgMS41IDAgMDAtMS41LTEuNXoiIGZpbGw9IiMxZDFkMWYiLz48L3N2Zz4=");
mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE2Ljc1IDkuNGExLjUgMS41IDAgMDAtMS41IDEuNUE0Ljg4IDQuODggMCAxMTEwLjM4IDZoLjJMOS4zMSA3LjMyYTEuNSAxLjUgMCAwMDEuMDYgMi41NiAxLjQ1IDEuNDUgMCAwMDEuMDYtLjQ0TDE1IDUuODhhMS41MiAxLjUyIDAgMDAuNDQtMS4wNkExLjU0IDEuNTQgMCAwMDE1IDMuNzVMMTEuNDMuMTlhMS40OSAxLjQ5IDAgMDAtMi4xMiAwIDEuNTEgMS41MSAwIDAwMCAyLjEybC43NS43NWE3Ljg1IDcuODUgMCAxMDguMTkgNy44NCAxLjUgMS41IDAgMDAtMS41LTEuNXoiIGZpbGw9IiMxZDFkMWYiLz48L3N2Zz4=")
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loaded .play-pause-button {
pointer-events: all;
opacity: 1
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button {
padding: 0;
margin-right: 16px;
margin-bottom: 16px;
background: none;
display: block;
width: 44px;
min-width: 44px;
height: 44px;
opacity: 0;
border: none;
display: flex;
position: relative;
justify-self: flex-end;
align-self: flex-end;
align-items: center;
justify-content: center;
pointer-events: none;
cursor: pointer;
background-repeat: no-repeat;
transition: opacity 100ms linear, transform .2s ease
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:after {
content: "";
mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUgMTUuMjVWNC43N2ExLjQ0IDEuNDQgMCAwMTEuNDQtMS42MiAxLjg2IDEuODYgMCAwMTEuMTEuMzFsOC41MyA1Yy43Ni40NCAxLjE3LjggMS4xNyAxLjUxcy0uNDEgMS4wNy0xLjE3IDEuNTFsLTguNTMgNWExLjg2IDEuODYgMCAwMS0xLjExLjMxQTEuNDIgMS40MiAwIDAxNSAxNS4yNXoiLz48L3N2Zz4=");
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUgMTUuMjVWNC43N2ExLjQ0IDEuNDQgMCAwMTEuNDQtMS42MiAxLjg2IDEuODYgMCAwMTEuMTEuMzFsOC41MyA1Yy43Ni40NCAxLjE3LjggMS4xNyAxLjUxcy0uNDEgMS4wNy0xLjE3IDEuNTFsLTguNTMgNWExLjg2IDEuODYgMCAwMS0xLjExLjMxQTEuNDIgMS40MiAwIDAxNSAxNS4yNXoiLz48L3N2Zz4=");
mask-size: cover;
-webkit-mask-size: cover;
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
background-size: 20px 20px;
background-color: var(--inline-media-playpause-icon-color)
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:before {
content: "";
position: absolute;
background-color: var(--inline-media-playpause-scrim-color);
border-radius: 50%;
width: 36px;
height: 36px
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:disabled {
pointer-events: none;
opacity: .32
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:hover:after {
background-color: var(--inline-media-playpause-icon-color-hover)
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:hover:before {
background-color: var(--inline-media-playpause-scrim-color-hover)
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:active {
transform: scale(0.95)
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:active:after {
background-color: var(--inline-media-playpause-icon-color)
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:active:before {
background-color: var(--inline-media-playpause-scrim-color-active)
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:focus {
outline: none
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:focus:before {
box-shadow: 0 0 0 4px #007d96
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:focus[data-focus-method=mouse]:not(input):not(textarea):not(select):before, html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button:focus[data-focus-method=touch]:not(input):not(textarea):not(select):before {
box-shadow: none
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loaded .play-pause-button, html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loading .play-pause-button {
opacity: 0;
pointer-events: none
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loaded.active-controls .play-pause-button, html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui.loading.active-controls .play-pause-button {
opacity: 1;
pointer-events: all
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button {
position: sticky;
top: calc(100vh - 81px);
pointer-events: all;
margin: 0;
transition: opacity .3s ease-in-out, top 80ms linear
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media .camera-cinematic-mode .inline-media-ui .play-pause-button.will-change {
will-change: opacity
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media.safari-ios.safari-mobile-toolbar-maximized .camera-cinematic-mode .inline-media-ui .play-pause-button {
top: calc(100vh - 81px - var(--iosSafariBottomToolbarHeight))
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media.safari-ipados.safari-mobile-toolbar-maximized .camera-cinematic-mode .inline-media-ui .play-pause-button {
top: calc(100vh - 81px - var(--ipadosSafariTopToolbarHeight))
}
html.enhance-camera-cinematic-mode.enhance-page-xp-media.chrome-android .camera-cinematic-mode .inline-media-ui .play-pause-button {
top: calc(100vh - 81px - var(--chromeAndroidBottomToolbarHeight))
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .sticky-container {
height: 148vh
}
.camera-cinematic-mode .sticky-content {
display: flex;
flex-direction: column
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .sticky-content {
position: sticky;
overflow: hidden;
height: 100vh;
top: 0
}
.camera-cinematic-mode .device-container {
padding-top: 100px
}
@media only screen and (max-width: 1068px) {
.camera-cinematic-mode .device-container {
padding-top: 110px
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .device-container {
padding-top: 50px
}
}
.camera-cinematic-mode .device-container.will-change {
will-change: transform
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-container {
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--cinematic-mode-device-w);
height: var(--cinematic-mode-device-h)
}
@media only screen and (min-width: 320px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-container {
padding-top: 0
}
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen__f14s45dcw4a6_large.jpg);
position: absolute;
z-index: 1;
top: var(--cinematic-mode-screen-y);
left: var(--cinematic-mode-screen-x);
background-size: cover;
width: calc(100% - var(--cinematic-mode-screen-x) * 2);
height: calc(100% - var(--cinematic-mode-screen-y) * 2);
border-radius: 30px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen__f14s45dcw4a6_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen__f14s45dcw4a6_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen__f14s45dcw4a6_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen__f14s45dcw4a6_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen__f14s45dcw4a6_small_2x.jpg)
}
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen-playhead-container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
height: 29px;
width: 418px;
top: 350px;
left: 290px
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen-playhead-container {
height: 22px;
width: 299px;
top: 249px;
left: 207px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen-playhead-container {
height: 22px;
width: 151px;
top: 356px;
left: 44px
}
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen-playhead-container .device-screen-playhead-marker {
width: 10px;
height: 53px;
background-size: 10px 53px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen_playhead_marker__ga63z4w9d9iu_large.png);
position: absolute;
z-index: 1
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen-playhead-container .device-screen-playhead-marker {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen_playhead_marker__ga63z4w9d9iu_large_2x.png)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen-playhead-container .device-screen-playhead-marker {
width: 7px;
height: 38px;
background-size: 7px 38px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen_playhead_marker__ga63z4w9d9iu_medium.png)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen-playhead-container .device-screen-playhead-marker {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen_playhead_marker__ga63z4w9d9iu_medium_2x.png)
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen-playhead-container .device-screen-playhead-marker {
width: 6px;
height: 38px;
background-size: 6px 38px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen_playhead_marker__ga63z4w9d9iu_small.png)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device-screen-playhead-container .device-screen-playhead-marker {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_screen_playhead_marker__ga63z4w9d9iu_small_2x.png)
}
}
.camera-cinematic-mode .cinematic-mode-video-container {
display: none
}
.camera-cinematic-mode .cinematic-mode-video-container.will-change {
will-change: transform
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container {
display: block;
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--cinematic-mode-mask-w);
height: var(--cinematic-mode-mask-h)
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container.loading-disabled .device, html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container.loading-error .device {
opacity: 1
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container .device {
opacity: 0;
pointer-events: all;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container:not(.loaded):not(.loading-error):not(.loading-disabled) .cinematic-mode-start-frame {
opacity: 1;
pointer-events: all
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container .cinematic-mode-start-frame {
opacity: 0;
pointer-events: all;
left: 0;
pointer-events: none
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container .cinematic-mode-video {
z-index: 2;
visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
object-fit: cover
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container .cinematic-mode-start-frame {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_startframe__e613hnm05re6_large.jpg);
position: absolute;
z-index: 3;
top: 0;
width: 100%;
height: 100%;
background-size: cover
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container .cinematic-mode-start-frame {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_startframe__e613hnm05re6_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container .cinematic-mode-start-frame {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_startframe__e613hnm05re6_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container .cinematic-mode-start-frame {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_startframe__e613hnm05re6_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container .cinematic-mode-start-frame {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_startframe__e613hnm05re6_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container .cinematic-mode-start-frame {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_startframe__e613hnm05re6_small_2x.jpg)
}
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container.loaded .cinematic-mode-video, html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .cinematic-mode-video-container.loading .cinematic-mode-video {
visibility: visible
}
.camera-cinematic-mode .device {
width: 981px;
height: 487px;
background-size: 981px 487px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_static__by3g5rn0eumq_large.jpg);
position: relative;
left: 50%;
margin-left: -490.5px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.camera-cinematic-mode .device {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_static__by3g5rn0eumq_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.camera-cinematic-mode .device {
width: 693px;
height: 345px;
background-size: 693px 345px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_static__by3g5rn0eumq_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.camera-cinematic-mode .device {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_static__by3g5rn0eumq_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .device {
width: 236px;
height: 474px;
background-size: 236px 474px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_static__by3g5rn0eumq_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.camera-cinematic-mode .device {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_static__by3g5rn0eumq_small_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.camera-cinematic-mode .device {
left: 50%;
margin-left: -346.5px
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .device {
left: 50%;
margin-left: -118px
}
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_zoomed__h0u6x3mlu8i2_large.png);
z-index: 4;
background-size: cover !important;
width: 100%;
height: 100%
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_zoomed__h0u6x3mlu8i2_large_2x.png)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_zoomed__h0u6x3mlu8i2_medium.png)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_zoomed__h0u6x3mlu8i2_medium_2x.png)
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_zoomed__h0u6x3mlu8i2_small.png)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/cinematic-mode/cinematic_mode_hardware_zoomed__h0u6x3mlu8i2_small_2x.png)
}
}
@media only screen and (min-width: 320px) {
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .device {
margin-left: auto;
margin-right: auto;
left: auto
}
}
.camera-cinematic-mode .subsection-container {
padding-top: 75px
}
@media only screen and (max-width: 1068px) {
.camera-cinematic-mode .subsection-container {
padding-top: 57px
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .subsection-container {
padding-top: 26px
}
}
html.enhance-camera-cinematic-mode.enhance-page-xp-parallax .camera-cinematic-mode .subsection-container {
position: relative;
z-index: 0;
--framing-size: calc(100vh - var(--r-localnav-height));
--half-framing-size: calc(var(--framing-size) / 2);
--half-device-height: calc(var(--cinematic-mode-device-h) / 2);
margin-top: calc(var(--half-framing-size) * -1 + var(--half-device-height))
}
.camera-cinematic-mode .subsection-container [data-text-parallax=subCopyIntro].will-change {
will-change: transform, opacity
}
.camera-cinematic-mode .claim-list li {
margin-top: 54px
}
@media only screen and (max-width: 1068px) {
.camera-cinematic-mode .claim-list li {
margin-top: 26px
}
}
@media only screen and (max-width: 734px) {
.camera-cinematic-mode .claim-list li {
margin-top: 32px
}
}
@media only screen and (min-width: 735px) {
.camera-cinematic-mode .claim-list li:first-of-type {
margin-top: 0
}
}
.camera-photographic-styles {
padding-top: 118px;
padding-bottom: 195px;
overflow: hidden;
background: #fbfbfd
}
@media only screen and (max-width: 1068px) {
.camera-photographic-styles {
padding-top: 103px;
padding-bottom: 98px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles {
padding-top: 60px;
padding-bottom: 37px
}
}
html.enhance-page-xp-parallax .camera-photographic-styles {
padding-bottom: 122px
}
@media only screen and (min-width: 735px) {
.camera-photographic-styles .grid-photo-styles-1 {
display: grid;
grid-template-columns: minmax(272px, 1fr) repeat(2, 218px) 1fr;
grid-template-rows: auto 222px 222px auto 230px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.camera-photographic-styles .grid-photo-styles-1 {
grid-template-columns: minmax(167px, 1fr) repeat(2, 179px) 1fr;
grid-template-rows: auto auto 97px auto 160px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-1 {
position: relative;
margin-bottom: 30px
}
}
.camera-photographic-styles .grid-photo-styles-1 p + * {
margin-top: 0
}
.camera-photographic-styles .grid-photo-styles-1 .grid-item-headline {
margin-right: 125px;
grid-column: 1/4;
grid-row: 1/3;
align-self: end;
z-index: 1
}
@media only screen and (max-width: 1068px) {
.camera-photographic-styles .grid-photo-styles-1 .grid-item-headline {
margin-right: 72px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-1 .grid-item-headline {
margin-right: 0;
margin-bottom: 46px
}
}
.camera-photographic-styles .grid-photo-styles-1 .grid-item-headline strong {
display: block;
margin-top: 12px
}
.camera-photographic-styles .grid-photo-styles-1 .grid-item-photo-1, .camera-photographic-styles .grid-photo-styles-1 .grid-item-photo-1 + noscript {
grid-column: 2/4;
grid-row: 4/6;
z-index: 1
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-1 .grid-item-photo-1, .camera-photographic-styles .grid-photo-styles-1 .grid-item-photo-1 + noscript {
padding: 20px 0
}
}
.camera-photographic-styles .grid-photo-styles-1 .grid-item-photo-2, .camera-photographic-styles .grid-photo-styles-1 .grid-item-photo-2 + noscript {
grid-column: 3/5;
grid-row: 2/5
}
@media only screen and (min-width: 735px) {
.camera-photographic-styles .grid-photo-styles-1 .grid-item-photo-2, .camera-photographic-styles .grid-photo-styles-1 .grid-item-photo-2 + noscript {
margin-left: 80px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-1 .grid-item-photo-2, .camera-photographic-styles .grid-photo-styles-1 .grid-item-photo-2 + noscript {
position: absolute;
bottom: 0
}
}
.camera-photographic-styles .grid-photo-styles-1 .media-frame {
position: absolute;
top: 19px;
left: 22px;
border-radius: 10px;
overflow: hidden;
z-index: -1
}
@media only screen and (max-width: 1068px) {
.camera-photographic-styles .grid-photo-styles-1 .media-frame {
top: 16px;
left: 19px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-1 .media-frame {
display: flex;
justify-content: center;
top: 33px;
left: 0;
width: 100%
}
}
.camera-photographic-styles .grid-photo-styles-1 .camera-photo-styles-video, .camera-photographic-styles .grid-photo-styles-1 .overview-camera-photographic-styles-photographic-styles-startframe {
display: none
}
html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .camera-photo-styles-video, html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .overview-camera-photographic-styles-photographic-styles-startframe {
display: block
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .camera-photo-styles-video, html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .overview-camera-photographic-styles-photographic-styles-startframe {
display: flex
}
}
.camera-photographic-styles .grid-photo-styles-1 .media-container {
position: relative
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .media-container {
display: block;
width: var(--p-width);
height: var(--p-height);
left: 50%;
margin-left: -149px;
position: relative
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .media-container {
--p-width: 298px;
--p-height: 602px
}
}
.camera-photographic-styles .grid-photo-styles-1 .media-container:not(.loaded):not(.loading-error):not(.loading-disabled) .overview-camera-photographic-styles-photographic-styles-startframe {
opacity: 1;
pointer-events: all
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.loaded .play-pause-reset-button:after, .camera-photographic-styles .grid-photo-styles-1 .media-container.loaded .play-pause-reset-button:before {
font-family: SF Pro Icons;
color: inherit;
display: inline-block;
font-style: normal;
font-weight: inherit;
font-size: inherit;
line-height: 1;
text-decoration: underline;
position: relative;
z-index: 1;
alt: "";
text-decoration: none
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.loaded .play-pause-reset-button:before {
display: none
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.loaded .play-pause-reset-button:after, .camera-photographic-styles .grid-photo-styles-1 .media-container.loaded .play-pause-reset-button:before {
content: "飳�"
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.loaded .play-pause-reset-button:after {
padding-left: 0.3em;
top: 0
}
html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .media-container.loaded .play-pause-reset-button {
opacity: 1
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.playing .play-pause-reset-button:after, .camera-photographic-styles .grid-photo-styles-1 .media-container.playing .play-pause-reset-button:before {
font-family: SF Pro Icons;
color: inherit;
display: inline-block;
font-style: normal;
font-weight: inherit;
font-size: inherit;
line-height: 1;
text-decoration: underline;
position: relative;
z-index: 1;
alt: "";
text-decoration: none
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.playing .play-pause-reset-button:before {
display: none
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.playing .play-pause-reset-button:after, .camera-photographic-styles .grid-photo-styles-1 .media-container.playing .play-pause-reset-button:before {
content: "飳�"
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.playing .play-pause-reset-button:after {
padding-left: 0.3em;
top: 0
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.ended .overview-camera-photographic-styles-photographic-styles-endframe {
opacity: 1;
pointer-events: all
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.ended .play-pause-reset-button:after, .camera-photographic-styles .grid-photo-styles-1 .media-container.ended .play-pause-reset-button:before {
font-family: SF Pro Icons;
color: inherit;
display: inline-block;
font-style: normal;
font-weight: inherit;
font-size: inherit;
line-height: 1;
text-decoration: underline;
position: relative;
z-index: 1;
alt: "";
text-decoration: none
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.ended .play-pause-reset-button:before {
display: none
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.ended .play-pause-reset-button:after, .camera-photographic-styles .grid-photo-styles-1 .media-container.ended .play-pause-reset-button:before {
content: "飳�"
}
.camera-photographic-styles .grid-photo-styles-1 .media-container.ended .play-pause-reset-button:after {
padding-left: 0.3em;
top: 0
}
.camera-photographic-styles .grid-photo-styles-1 .media-container .play-pause-reset-button {
display: none;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
color: #06c
}
@media only screen and (max-width: 1068px) {
.camera-photographic-styles .grid-photo-styles-1 .media-container .play-pause-reset-button {
margin-top: 22px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-1 .media-container .play-pause-reset-button {
margin-top: 32px
}
}
html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .media-container .play-pause-reset-button {
display: block;
opacity: 0
}
html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .media-container .play-pause-reset-button:hover {
text-decoration: underline
}
html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .media-container .overview-camera-photographic-styles-photographic-styles-endframe, html.enhance-page-xp-media .camera-photographic-styles .grid-photo-styles-1 .media-container .overview-camera-photographic-styles-photographic-styles-startframe {
opacity: 0;
transition: opacity .1s;
pointer-events: none
}
.camera-photographic-styles .grid-photo-styles-2 {
--overlap-row: 323px
}
@media only screen and (min-width: 735px) {
.camera-photographic-styles .grid-photo-styles-2 {
display: grid;
grid-template-columns: 326.6666666667px repeat(3, 81.6666666667px) 1fr;
grid-template-rows: auto var(--overlap-row) auto 1fr;
padding-top: 128px
}
html.enhance-page-xp-parallax .camera-photographic-styles .grid-photo-styles-2 {
padding-top: 0
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.camera-photographic-styles .grid-photo-styles-2 {
--overlap-row: 147px;
grid-template-columns: 288.3333333333px 45px 27px 45px 1fr;
padding-top: 86px
}
}
.camera-photographic-styles .grid-photo-styles-2 p + * {
margin-top: 0
}
.camera-photographic-styles .grid-photo-styles-2 .photo-styles-headline {
margin-bottom: 41px
}
@media only screen and (max-width: 1068px) {
.camera-photographic-styles .grid-photo-styles-2 .photo-styles-headline {
margin-bottom: 31px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-2 .photo-styles-headline {
margin-bottom: 20px
}
}
.camera-photographic-styles .grid-photo-styles-2 .grid-item-copy-1, .camera-photographic-styles .grid-photo-styles-2 .grid-item-copy-1 + noscript {
grid-column: 5/-1;
grid-row: 1/2;
max-width: 22em;
padding-bottom: 81.6666666667px
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.camera-photographic-styles .grid-photo-styles-2 .grid-item-copy-1, .camera-photographic-styles .grid-photo-styles-2 .grid-item-copy-1 + noscript {
padding-bottom: 45px;
max-width: 16em
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-2 .grid-item-copy-1, .camera-photographic-styles .grid-photo-styles-2 .grid-item-copy-1 + noscript {
padding-bottom: 15px
}
}
.camera-photographic-styles .grid-photo-styles-2 .claim-pipeline {
padding-top: 36px
}
@media only screen and (max-width: 1068px) {
.camera-photographic-styles .grid-photo-styles-2 .claim-pipeline {
padding-top: 19px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-2 .claim-pipeline {
padding-top: 30px
}
}
@media only screen and (min-width: 735px) {
.camera-photographic-styles .grid-photo-styles-2 .photo-lockup {
display: contents
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-2 .photo-lockup {
max-width: 414px;
margin-right: auto;
margin-left: auto
}
}
@media (max-width: 473.1428571429px) {
.camera-photographic-styles .grid-photo-styles-2 .photo-lockup {
margin-left: calc(-207px - -43.75vw)
}
}
.camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-3, .camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-3 + noscript {
grid-column: 1/4;
grid-row: 1/3;
align-self: end;
justify-self: end;
z-index: 1
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-3, .camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-3 + noscript {
margin-top: 20px;
position: relative;
z-index: 1
}
}
.camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-4, .camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-4 + noscript {
grid-column: 3/-1;
grid-row: 2/4
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-4, .camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-4 + noscript {
margin-left: 50px;
margin-top: -20px
}
}
.camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-5, .camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-5 + noscript {
grid-column: 1/2;
grid-row: 3/-1
}
@media only screen and (min-width: 735px) {
.camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-5, .camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-5 + noscript {
margin-top: 81.6666666667px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-5, .camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-5 + noscript {
margin-top: 45px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-5, .camera-photographic-styles .grid-photo-styles-2 .grid-item-photo-5 + noscript {
margin-top: 40px
}
}
.camera-photographic-styles .grid-photo-styles-2 .grid-item-copy-2 {
grid-column: 3/-1;
grid-row: 4/-1;
max-width: 21em;
padding-top: 81.6666666667px
}
@media only screen and (max-width: 1068px) {
.camera-photographic-styles .grid-photo-styles-2 .grid-item-copy-2 {
max-width: 16em;
padding-top: 45px
}
}
.camera-photographic-styles .grid-photo-styles-2 .grid-item-copy-2 .description:after {
content: "";
display: block;
margin-bottom: 30px
}
.camera-photographic-styles .overview-camera-photographic-styles-customize-camera-static {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 726px;
--p-height: 1031px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-photographic-styles .overview-camera-photographic-styles-customize-camera-static {
--p-width: 462px;
--p-height: 656px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-photographic-styles .overview-camera-photographic-styles-customize-camera-static {
--p-width: 554px;
--p-height: 642px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .overview-camera-photographic-styles-customize-camera-static {
left: 50%;
margin-left: -277px;
position: relative
}
}
.camera-photographic-styles .camera-photo-styles-video {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 390px;
--p-height: 842px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-photographic-styles .camera-photo-styles-video {
--p-width: 322px;
--p-height: 694px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-photographic-styles .camera-photo-styles-video {
--p-width: 266px;
--p-height: 574px
}
}
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-startframe {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 390px;
--p-height: 842px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-startframe {
--p-width: 322px;
--p-height: 694px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-startframe {
--p-width: 266px;
--p-height: 574px
}
}
.camera-photographic-styles .overview-camera-photographic-styles-customize-camera-hw {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 436px;
--p-height: 882px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-photographic-styles .overview-camera-photographic-styles-customize-camera-hw {
--p-width: 358px;
--p-height: 726px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-photographic-styles .overview-camera-photographic-styles-customize-camera-hw {
--p-width: 298px;
--p-height: 602px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .overview-camera-photographic-styles-customize-camera-hw {
left: 50%;
margin-left: -149px;
position: relative
}
}
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-1 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 490px;
--p-height: 653px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-1 {
--p-width: 360px;
--p-height: 480px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-1 {
--p-width: 273px;
--p-height: 335px
}
}
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-2 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 719px;
--p-height: 539px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-2 {
--p-width: 500px;
--p-height: 370px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-2 {
--p-width: 364px;
--p-height: 272px
}
}
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-3 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 325px;
--p-height: 549px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-3 {
--p-width: 291px;
--p-height: 470px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-3 {
--p-width: 375px;
--p-height: 537px
}
}
@media only screen and (max-width: 734px) {
.camera-photographic-styles .overview-camera-photographic-styles-photographic-styles-3 {
left: 50%;
margin-left: -187.5px;
position: relative
}
}
.camera-pro-res {
overflow: hidden;
padding-top: 110px
}
@media only screen and (max-width: 1068px) {
.camera-pro-res {
padding-top: 102px
}
}
@media only screen and (max-width: 734px) {
.camera-pro-res {
padding-top: 50px
}
}
html.enhance-page-xp-parallax .camera-pro-res .headline-wrapper {
margin: 0 auto
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-pro-res .headline-wrapper {
margin-left: 0
}
}
.camera-pro-res .camera-pro-res-headline span {
display: block
}
html.enhance-page-xp-parallax .camera-pro-res .camera-pro-res-headline span {
text-align: center
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-pro-res .camera-pro-res-headline span {
text-align: left
}
}
.camera-pro-res .camera-pro-res-headline span:nth-of-type(2) {
margin-left: -163.3333333333px
}
@media only screen and (max-width: 734px) {
.camera-pro-res .camera-pro-res-headline span:nth-of-type(2) {
margin-left: -23.3333333333px
}
}
html.enhance-page-xp-parallax .camera-pro-res .camera-pro-res-headline span:nth-of-type(2) {
margin: 0
}
.camera-pro-res .subhead-wrapper {
padding: 47px 0 91px
}
@media only screen and (max-width: 1068px) {
.camera-pro-res .subhead-wrapper {
padding: 17px 0 72px
}
}
@media only screen and (max-width: 734px) {
.camera-pro-res .subhead-wrapper {
padding: 17px 0 43px
}
html.enhance-page-xp-parallax .camera-pro-res .subhead-wrapper {
margin-left: 0
}
}
.camera-pro-res .details-wrapper {
padding: 73px 0 134px
}
@media only screen and (max-width: 1068px) {
.camera-pro-res .details-wrapper {
padding: 58px 0 132px
}
}
@media only screen and (max-width: 734px) {
.camera-pro-res .details-wrapper {
padding: 24px 0 70px
}
.camera-pro-res .details-wrapper .claim-list {
order: 2;
padding-top: 22px
}
}
@media only screen and (max-width: 734px) {
.camera-pro-res .copy-wrapper {
order: 1;
max-width: 350px
}
}
.camera-pro-res .copy-wrapper .violator {
color: #1d1d1f;
padding-top: 7px
}
.camera-pro-res .overview-camera-pro-res-pro-res {
position: relative;
left: 50%;
margin-left: -490.5px;
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 981px;
--p-height: 485px
}
@media only screen and (max-width: 1068px) {
.camera-pro-res .overview-camera-pro-res-pro-res {
left: 50%;
margin-left: -347.5px
}
}
@media only screen and (max-width: 734px) {
.camera-pro-res .overview-camera-pro-res-pro-res {
left: 50%;
margin-left: -118px
}
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-pro-res .overview-camera-pro-res-pro-res {
--p-width: 695px;
--p-height: 345px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-pro-res .overview-camera-pro-res-pro-res {
--p-width: 236px;
--p-height: 474px
}
}
.overview-camera-smart-hdr-smart-hdr-4-1 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1358px;
--p-height: 1078px;
position: relative;
left: 50%;
margin-left: -679px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-smart-hdr-smart-hdr-4-1 {
--p-width: 1012px;
--p-height: 806px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-smart-hdr-smart-hdr-4-1 {
--p-width: 487px;
--p-height: 650px
}
}
@media only screen and (max-width: 1068px) {
.overview-camera-smart-hdr-smart-hdr-4-1 {
left: 50%;
margin-left: -506px
}
}
@media only screen and (max-width: 734px) {
.overview-camera-smart-hdr-smart-hdr-4-1 {
left: 50%;
margin-left: -243.5px
}
}
.overview-camera-smart-hdr-deep-fusion-01 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 980px;
--p-height: 735px;
position: relative;
left: 50%;
margin-left: -490px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-smart-hdr-deep-fusion-01 {
--p-width: 736px;
--p-height: 552px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-smart-hdr-deep-fusion-01 {
--p-width: 487px;
--p-height: 650px
}
}
@media only screen and (max-width: 1068px) {
.overview-camera-smart-hdr-deep-fusion-01 {
left: 50%;
margin-left: -368px
}
}
@media only screen and (max-width: 734px) {
.overview-camera-smart-hdr-deep-fusion-01 {
left: 50%;
margin-left: -243.5px
}
}
.overview-camera-smart-hdr-deep-fusion-02 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 326px;
--p-height: 435px;
margin-left: auto
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-smart-hdr-deep-fusion-02 {
--p-width: 310px;
--p-height: 414px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-smart-hdr-deep-fusion-02 {
--p-width: 326px;
--p-height: 435px
}
}
@media only screen and (max-width: 734px) {
.overview-camera-smart-hdr-deep-fusion-02 {
left: 50%;
margin-left: -163px;
position: relative
}
}
.camera-computational-photography {
padding: 113px 20px 100px;
overflow: hidden;
background: #fbfbfd
}
@media only screen and (max-width: 1068px) {
.camera-computational-photography {
padding-top: 117px
}
}
@media only screen and (max-width: 734px) {
.camera-computational-photography {
padding: 65px 0 75px
}
}
.camera-computational-photography .computational-headline {
padding-bottom: 66px
}
@media only screen and (max-width: 1068px) {
.camera-computational-photography .computational-headline {
padding-bottom: 36px
}
}
@media only screen and (max-width: 734px) {
.camera-computational-photography .computational-headline {
padding-bottom: 25px
}
}
.subsection-hdr .details-row {
margin: 72px 0 100px
}
@media only screen and (max-width: 1068px) {
.subsection-hdr .details-row {
margin-top: 58px
}
}
@media only screen and (max-width: 734px) {
.subsection-hdr .details-row {
margin: 50px 0
}
}
@media only screen and (max-width: 734px) {
.subsection-hdr .section-subheader {
margin-bottom: 20px
}
}
.subsection-hdr .section-copy {
max-width: 23em;
padding-top: 2px
}
@media only screen and (max-width: 1068px) {
.subsection-hdr .section-copy {
max-width: none;
padding-top: 4px
}
}
.subsection-deep-fusion .details-row {
margin: 74px 0 100px
}
@media only screen and (max-width: 1068px) {
.subsection-deep-fusion .details-row {
margin-top: 58px
}
}
@media only screen and (max-width: 734px) {
.subsection-deep-fusion .details-row {
margin-top: 25px;
margin-bottom: 0
}
}
.subsection-deep-fusion .section-subheader {
margin-bottom: 32px
}
@media only screen and (max-width: 1068px) {
.subsection-deep-fusion .section-subheader {
margin-bottom: 29px
}
}
@media only screen and (max-width: 734px) {
.subsection-deep-fusion .section-subheader {
margin-bottom: 20px
}
}
.subsection-deep-fusion .section-image {
margin-top: 8px
}
@media only screen and (max-width: 734px) {
.subsection-deep-fusion .section-image {
margin-top: 45px
}
}
.overview-camera-hardware-camera-redesign {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 988px;
--p-height: 1077px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.overview-camera-hardware-camera-redesign {
--p-width: 644px;
--p-height: 896px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.overview-camera-hardware-camera-redesign {
--p-width: 275px;
--p-height: 575px
}
}
@media only screen and (max-width: 734px) {
.overview-camera-hardware-camera-redesign {
left: 50%;
margin-left: -137.5px;
position: relative
}
}
.camera-hardware {
padding-top: 124px;
overflow: hidden
}
@media only screen and (max-width: 1068px) {
.camera-hardware {
padding-top: 118px
}
}
@media only screen and (max-width: 734px) {
.camera-hardware {
padding-top: 70px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-hardware .camera-hardware {
overflow: visible
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .section-content {
width: 100%
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .hardware-header {
max-width: 310px;
overflow: hidden
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-hardware .hardware-header {
margin-left: auto;
margin-right: auto;
width: 87.5%
}
}
.camera-hardware .headline-hardware span:first-of-type {
display: block;
margin-left: max(-1.75em, -326.6666666667px)
}
html.enhance-page-xp-parallax .camera-hardware .headline-hardware span:first-of-type {
margin-left: 0
}
@media only screen and (max-width: 1068px) {
.camera-hardware .headline-hardware span:first-of-type {
margin-left: max(-1.75em, -173px)
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .headline-hardware span:first-of-type {
margin-left: 0
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-hardware .camera-hardware .headline-hardware span:last-of-type {
display: block
}
}
.camera-hardware .hardware-container {
position: relative;
height: 929px;
margin-top: 132px;
padding-top: 148px
}
html.text-zoom .camera-hardware .hardware-container {
height: auto
}
@media only screen and (max-width: 1068px) {
.camera-hardware .hardware-container {
height: 846px;
margin-top: 60px;
padding-top: 50px
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .hardware-container {
height: auto;
margin-top: 32px;
padding-top: 0
}
html.enhance-camera-hardware .camera-hardware .hardware-container {
margin-top: 20px
}
}
.camera-hardware .hardware-image {
position: absolute;
bottom: 0;
right: 0;
max-width: 55%
}
@media only screen and (max-width: 1068px) {
.camera-hardware .hardware-image {
max-width: 66%
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .hardware-image {
display: none
}
html.enhance-camera-hardware .camera-hardware .hardware-image {
position: sticky;
top: 0;
display: block;
width: 100%;
max-width: 100%;
padding-top: 340px
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .pin-wrapper {
background-size: 275px 575px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/camera/hardware/camera_redesign__epvv5uvn9lea_small.jpg);
margin-bottom: 40px;
padding-bottom: 400px;
border-bottom: 10px solid #fff;
background-position: 50% 250px;
overflow: hidden
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.camera-hardware .pin-wrapper {
background-image: url(/v/iphone-13-pro/f/images/overview/camera/hardware/camera_redesign__epvv5uvn9lea_small_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-hardware .camera-hardware .pin-wrapper {
position: sticky;
top: calc(var(--r-localnav-height) + 40px);
max-width: 310px;
height: 105vh;
margin: 0 auto;
padding-bottom: 0;
border-bottom: 0;
background: none;
overflow: visible
}
}
.camera-hardware .pin-special {
position: relative;
z-index: 1;
margin-bottom: 40px
}
@media only screen and (max-width: 1068px) {
.camera-hardware .pin-special {
margin-bottom: 60px
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .pin-special {
margin-bottom: 0
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-hardware .pin-special {
margin-left: auto;
margin-right: auto;
width: 87.5%
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-hardware .camera-hardware .pin-special {
position: absolute;
top: 0;
width: 100%;
margin-right: 0
}
}
.camera-hardware .pin-line {
position: absolute;
top: 2.25em;
display: block;
width: 100%;
height: 1px;
background-color: #fff;
transform-origin: 0
}
html.text-zoom .camera-hardware .pin-line {
display: none
}
@media only screen and (max-width: 1068px) {
.camera-hardware .pin-line {
top: 1.75em
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .pin-line {
top: 105%;
left: 33%;
width: 1px;
transform-origin: bottom
}
html.enhance-camera-hardware .camera-hardware .pin-line {
left: 103px;
padding-bottom: 2px
}
}
.camera-hardware .pin-caption {
font-weight: 400
}
@media only screen and (min-width: 1069px) {
.camera-hardware .pin-caption {
max-width: 441px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.camera-hardware .pin-caption {
max-width: 235.28px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-hardware .camera-hardware .pin-caption {
width: 87.5vw;
max-width: 310px;
margin-left: auto;
margin-right: auto
}
}
.camera-hardware .pin-caption .pin-headline + ul li {
color: #fff
}
.camera-hardware .pin-caption em {
font-style: normal;
color: #ffe701
}
.camera-hardware .pin-headline {
margin-bottom: 12px
}
@media only screen and (max-width: 734px) {
.camera-hardware .pin-headline {
margin-bottom: 8px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-hardware .camera-hardware .pin-telephoto {
height: calc(105vh - 340px);
margin-top: -825px
}
}
@media only screen and (min-width: 1069px) {
.camera-hardware .pin-telephoto .pin-special {
width: 655px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.camera-hardware .pin-telephoto .pin-special {
width: 443px
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .pin-telephoto .pin-special {
max-width: 310px
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .pin-telephoto .pin-special .pin-line, .camera-hardware .pin-telephoto .pin-special:after {
height: 97px
}
}
@media only screen and (min-width: 1069px) {
.camera-hardware .pin-ultra-wide .pin-special {
left: 163.3333333333px;
width: 711px;
margin-bottom: 80px
}
html.text-zoom .camera-hardware .pin-ultra-wide .pin-special {
left: 0
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.camera-hardware .pin-ultra-wide .pin-special {
width: 564px;
margin-bottom: 67px
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .pin-ultra-wide .pin-special {
max-width: 230px;
left: 24px
}
html.enhance-camera-hardware .camera-hardware .pin-ultra-wide .pin-special {
left: auto;
max-width: none
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .pin-ultra-wide .pin-special .pin-line, .camera-hardware .pin-ultra-wide .pin-special:after {
left: 95px;
height: 179px
}
html.enhance-camera-hardware .camera-hardware .pin-ultra-wide .pin-special .pin-line, html.enhance-camera-hardware .camera-hardware .pin-ultra-wide .pin-special:after {
left: 160px
}
}
@media only screen and (min-width: 1069px) {
.camera-hardware .pin-ultra-wide .pin-caption {
max-width: 277.6666666667px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.camera-hardware .pin-ultra-wide .pin-caption {
max-width: 235.28px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-hardware .camera-hardware .pin-ultra-wide .pin-caption {
padding-left: 16.6666666667%;
box-sizing: border-box
}
}
.camera-hardware .pin-wide {
margin-bottom: 0;
padding-bottom: 650px
}
@media only screen and (max-width: 734px) {
html.enhance-camera-hardware .camera-hardware .pin-wide {
padding-bottom: 0
}
}
@media only screen and (min-width: 1069px) {
.camera-hardware .pin-wide .pin-special {
width: 677px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.camera-hardware .pin-wide .pin-special {
width: 453px
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .pin-wide .pin-special {
max-width: 310px
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .pin-wide .pin-special .pin-line, .camera-hardware .pin-wide .pin-special:after {
height: 190px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-hardware .camera-hardware .spacer {
position: sticky;
top: calc(var(--r-localnav-height) + 40px);
height: 575px;
padding-top: 300px
}
}
.camera-hardware .hardware-callout {
position: absolute;
bottom: 120px;
right: 0;
width: 340px;
z-index: 1;
color: #000
}
@media only screen and (max-width: 1068px) {
.camera-hardware .hardware-callout {
bottom: 60px;
width: 230px;
margin-right: -20px
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .hardware-callout {
bottom: 35px;
left: 0;
width: auto;
max-width: 270px;
margin: 0 auto
}
}
@media only screen and (max-width: 734px) {
.camera-hardware .hardware-callout .callout-wrapper {
display: block;
padding-left: 40px;
padding-right: 20px
}
}
.camera-truedepth {
overflow: hidden;
margin-top: 134px;
min-height: 1158px;
position: relative;
z-index: 1
}
@media only screen and (max-width: 1068px) {
.camera-truedepth {
min-height: 988px
}
}
@media only screen and (max-width: 734px) {
.camera-truedepth {
margin-top: 70px;
min-height: 1170px
}
}
html.enhance-page-xp-parallax .camera-truedepth {
margin-top: 0;
overflow: initial
}
.camera-truedepth .section-truedepth {
margin-top: 0
}
html.enhance-page-xp-parallax .camera-truedepth .section-truedepth {
height: 360vh
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .section-truedepth {
height: 400vh
}
}
html.enhance-page-xp-parallax .camera-truedepth .sticky-wrapper {
height: 100vh;
min-height: 1158px;
overflow: hidden;
position: sticky;
top: 0
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .camera-truedepth .sticky-wrapper {
min-height: 988px
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .sticky-wrapper {
height: auto;
min-height: 0
}
}
html.enhance-page-xp-parallax .camera-truedepth .section-copy {
position: absolute;
z-index: 4;
width: 100%
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .section-copy {
position: relative
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .section-copy {
margin-left: auto;
margin-right: auto;
width: 87.5%
}
}
html.enhance-page-xp-parallax .camera-truedepth .copy-row {
align-items: center;
display: flex;
height: 100vh
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .copy-row {
height: auto
}
}
@media only screen and (max-width: 734px) {
.camera-truedepth .copy-wrapper {
max-width: 20em
}
}
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper {
display: flex;
flex-basis: 100%;
justify-content: center;
padding-top: 216px;
max-width: 100%;
z-index: 1
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper {
padding-top: 126px
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper {
display: block;
padding-top: 88px;
max-width: 20em;
position: absolute
}
}
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper.active {
z-index: 5
}
.camera-truedepth .copy-wrapper > p {
padding-right: 20px
}
@media only screen and (max-width: 1068px) {
.camera-truedepth .copy-wrapper > p {
padding: 0
}
}
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper > p {
flex-basis: 408.3333333333px;
max-width: 400px
}
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper > p:first-of-type {
padding-right: 81.6666666667px
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper > p:first-of-type {
padding: 0
}
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper > p {
flex-basis: 288.3333333333px
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper > p {
flex-basis: auto
}
}
.camera-truedepth .copy-wrapper .features-truedepth {
padding-top: 9px
}
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper .features-truedepth {
flex-basis: 326.6666666667px;
margin: 0;
padding: 0
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper .features-truedepth {
flex-basis: 288.3333333333px
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper .features-truedepth {
margin-left: 0;
padding-left: 0;
flex-basis: 280px;
margin-top: .8em;
padding-top: 10px
}
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper .features-truedepth > ul {
margin-left: 57.6666666667px
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .copy-wrapper .features-truedepth > ul {
margin-left: 0
}
}
.camera-truedepth .enhanced-wrapper {
margin-top: -116px
}
@media only screen and (max-width: 1068px) {
.camera-truedepth .enhanced-wrapper {
margin-top: 32px
}
}
html.enhance-page-xp-parallax .camera-truedepth .enhanced-wrapper {
align-items: center;
display: flex;
justify-content: center;
margin-top: 0;
width: 100%
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .enhanced-wrapper {
display: block;
min-height: 1366px
}
}
.camera-truedepth .content-wrapper {
z-index: 3
}
@media only screen and (max-width: 734px) {
.camera-truedepth .content-wrapper {
margin-top: -496px;
padding-bottom: 0
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .content-wrapper {
margin-top: 0;
padding-top: 780px;
padding-bottom: 69px
}
}
.camera-truedepth .content-wrapper.active {
z-index: 5
}
.camera-truedepth .camera-truedepth-headline {
padding-top: 197px;
z-index: 1
}
@media only screen and (max-width: 1068px) {
.camera-truedepth .camera-truedepth-headline {
padding-top: 54px
}
}
@media only screen and (max-width: 734px) {
.camera-truedepth .camera-truedepth-headline {
max-width: 365px;
padding: 0
}
}
html.enhance-page-xp-parallax .camera-truedepth .camera-truedepth-headline {
padding-top: 0
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .camera-truedepth .camera-truedepth-headline {
padding-right: 150px
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .camera-truedepth-headline {
padding: 0
}
}
.camera-truedepth .claim-list {
padding-top: 41px;
padding-bottom: 94px
}
@media only screen and (max-width: 1068px) {
.camera-truedepth .claim-list {
padding-top: 14px;
padding-bottom: 128px
}
}
@media only screen and (max-width: 734px) {
.camera-truedepth .claim-list {
padding-top: 23px;
padding-bottom: 67px
}
}
html.enhance-page-xp-parallax .camera-truedepth .claim-list {
padding-top: 74px;
padding-bottom: 0
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .camera-truedepth .claim-list {
padding-top: 54px
}
}
.camera-truedepth .image-row {
display: flex;
justify-content: flex-end
}
@media only screen and (max-width: 734px) {
.camera-truedepth .image-row {
padding-top: 42px
}
}
.camera-truedepth .image-wrapper {
left: 150px;
position: absolute;
z-index: 1;
top: 0;
bottom: 0
}
@media only screen and (max-width: 1068px) {
.camera-truedepth .image-wrapper {
left: 100px
}
}
@media only screen and (max-width: 734px) {
.camera-truedepth .image-wrapper {
top: auto;
bottom: auto;
padding-top: 42px;
position: relative;
z-index: 1
}
}
html.enhance-page-xp-parallax .camera-truedepth .image-wrapper {
margin-left: 206px;
left: 40px;
align-items: flex-end;
display: flex;
height: 1158px;
justify-content: center;
max-width: 100%;
top: auto;
transform-origin: bottom center;
width: 100%;
z-index: 4
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .camera-truedepth .image-wrapper {
margin-left: 278px;
height: 988px
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .image-wrapper {
left: 0;
display: block;
height: 1170px;
padding-top: 0;
position: absolute;
top: 0;
transform-origin: top center
}
}
.camera-truedepth .overview-camera-truedepth-true-depth {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 861px;
--p-height: 1158px;
left: 0;
bottom: 0;
position: absolute;
z-index: 1
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-truedepth .overview-camera-truedepth-true-depth {
--p-width: 641px;
--p-height: 988px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-truedepth .overview-camera-truedepth-true-depth {
--p-width: 524px;
--p-height: 1170px
}
}
@media only screen and (max-width: 1068px) {
.camera-truedepth .overview-camera-truedepth-true-depth {
top: 0;
bottom: auto
}
}
@media only screen and (max-width: 734px) {
.camera-truedepth .overview-camera-truedepth-true-depth {
left: 50%;
margin-left: -249px;
position: relative
}
}
html.enhance-page-xp-parallax .camera-truedepth .overview-camera-truedepth-true-depth {
left: 0;
top: auto;
bottom: 0;
position: relative
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .camera-truedepth .overview-camera-truedepth-true-depth {
left: 219px;
display: flex;
justify-content: center;
position: absolute;
top: 40px;
width: 100%
}
}
.camera-storage {
background-color: #fbfbfd;
padding: 110px 0 64px
}
@media only screen and (max-width: 1068px) {
.camera-storage {
padding: 115px 0 72px
}
}
@media only screen and (max-width: 734px) {
.camera-storage {
padding: 129px 0 89px
}
}
html.enhance-camera-storage .camera-storage {
padding: 0
}
.camera-storage .base-xp-wrapper {
display: block
}
html.enhance-camera-storage .camera-storage .base-xp-wrapper {
display: none
}
@media only screen and (max-width: 734px) {
.camera-storage .storage-wrapper {
align-items: center;
display: flex;
flex-direction: column;
width: auto
}
}
html.enhance-camera-storage .camera-storage .storage-wrapper {
height: 280vh
}
@media only screen and (max-width: 734px) {
html.enhance-camera-storage .camera-storage .storage-wrapper {
display: block
}
}
html.enhance-camera-storage .camera-storage .content-wrapper {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
margin-top: 0;
min-height: 980px;
overflow: hidden;
position: sticky;
top: 0
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-storage .camera-storage .content-wrapper {
min-height: 692px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-storage .camera-storage .content-wrapper {
min-height: 585px
}
}
.camera-storage .storage-content {
position: relative;
z-index: 4
}
@media only screen and (max-width: 734px) {
.camera-storage .storage-content {
width: 100%
}
}
html.enhance-camera-storage .camera-storage .storage-content {
left: 0;
width: 980px;
height: 980px;
position: absolute;
top: 0
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-storage .camera-storage .storage-content {
width: 692px;
height: 692px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-storage .camera-storage .storage-content {
width: 585px;
height: 585px
}
}
.camera-storage .copy-wrapper {
z-index: 4
}
html.enhance-camera-storage .camera-storage .copy-wrapper {
position: absolute
}
.camera-storage .copy-wrapper-start {
padding: 0 0 28px 34px
}
@media only screen and (max-width: 1068px) {
.camera-storage .copy-wrapper-start {
padding: 0 0 38px 15px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .copy-wrapper-start {
padding: 0 0 18px 2px
}
}
html.enhance-camera-storage .camera-storage .copy-wrapper-start {
left: 149px;
padding: 0;
top: 176px
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-storage .camera-storage .copy-wrapper-start {
left: 106px;
top: 108px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-storage .camera-storage .copy-wrapper-start {
left: 183px;
top: 165px
}
}
.camera-storage .copy-wrapper-end {
padding: 38px 0 66px 54px;
position: relative
}
@media only screen and (max-width: 1068px) {
.camera-storage .copy-wrapper-end {
padding: 32px 0 56px 20px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .copy-wrapper-end {
padding-left: 0;
padding-top: 16px
}
.camera-storage .copy-wrapper-end .camera-storage-copy {
margin-left: 107px;
max-width: 7em
}
}
html.enhance-camera-storage .camera-storage .copy-wrapper-end {
left: 46px;
padding: 0;
top: 748px
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-storage .camera-storage .copy-wrapper-end {
left: 33px;
max-width: 400px;
top: 531px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-storage .camera-storage .copy-wrapper-end {
left: 149px;
max-width: 400px;
top: 385px
}
}
.camera-storage .text-wrapper {
margin-top: -156px;
margin-bottom: -169px
}
@media only screen and (max-width: 1068px) {
.camera-storage .text-wrapper {
margin-top: -121px;
margin-bottom: -117px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .text-wrapper {
margin-top: -45px;
margin-bottom: -41px
}
}
html.enhance-camera-storage .camera-storage .text-wrapper {
display: none
}
.camera-storage .text-wrapper .text-storage {
color: #000;
font-size: 625px;
font-weight: 600;
letter-spacing: -0.037em;
text-indent: -27px
}
@media only screen and (max-width: 1068px) {
.camera-storage .text-wrapper .text-storage {
font-size: 442px;
letter-spacing: -0.059em
}
}
@media only screen and (max-width: 734px) {
.camera-storage .text-wrapper .text-storage {
font-size: 190px;
letter-spacing: -0.12em;
text-indent: -11px
}
}
html.text-zoom .camera-storage .text-wrapper .text-storage {
word-break: break-all
}
.camera-storage .gallery-wrapper {
display: none
}
html.enhance-camera-storage .camera-storage .gallery-wrapper {
align-items: center;
background: #000;
display: flex;
height: 100vh;
justify-content: center;
min-height: 834px;
overflow: hidden;
position: absolute;
z-index: 1;
top: 0;
width: 100%
}
@media only screen and (max-width: 1068px) {
html.enhance-camera-storage .camera-storage .gallery-wrapper {
min-height: 768px
}
}
@media only screen and (max-width: 734px) {
html.enhance-camera-storage .camera-storage .gallery-wrapper {
min-height: 585px
}
}
.camera-storage .gallery-border {
background-color: #fbfbfd;
height: 10vh;
width: 100%;
opacity: 0;
position: absolute;
will-change: opacity
}
.camera-storage .gallery-border.visible {
opacity: 1
}
.camera-storage .gallery-top {
top: 0
}
.camera-storage .gallery-bottom {
bottom: 0
}
.camera-storage .enhanced-copy-wrapper {
width: 980px;
height: 980px;
position: absolute;
z-index: 4
}
@media only screen and (max-width: 1068px) {
.camera-storage .enhanced-copy-wrapper {
width: 692px;
height: 692px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .enhanced-copy-wrapper {
width: 585px;
height: 585px
}
}
.camera-storage .image-gallery {
width: 980px;
height: 980px;
margin: 0 auto;
position: relative;
z-index: 1
}
@media only screen and (max-width: 1068px) {
.camera-storage .image-gallery {
width: 692px;
height: 692px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .image-gallery {
width: 585px;
height: 585px
}
}
html.enhance-camera-storage .camera-storage .image-gallery {
transform: scale(1.2)
}
.camera-storage .svg-wrapper {
display: none
}
html.enhance-camera-storage .camera-storage .svg-wrapper {
display: flex;
justify-content: center;
opacity: 0;
z-index: 3;
transition: opacity .2s ease-in;
will-change: opacity, transform
}
html.enhance-camera-storage .camera-storage .svg-wrapper.active {
opacity: 1
}
.camera-storage .overview-camera-storage-1tb {
display: block;
width: 980px;
height: 980px;
transform: scale(4)
}
@media only screen and (max-width: 1068px) {
.camera-storage .overview-camera-storage-1tb {
width: 692px;
height: 692px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .overview-camera-storage-1tb {
width: 585px;
height: 585px
}
}
.camera-storage .image-plane {
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%
}
.camera-storage .image-plane-bg {
background-color: #000;
display: none
}
html.enhance-camera-storage .camera-storage .image-plane-bg {
display: grid;
grid-template-rows: repeat(6, auto);
grid-template-columns: repeat(5, auto)
}
.camera-storage .image-plane-fg {
display: none
}
html.enhance-camera-storage .camera-storage .image-plane-fg {
display: grid;
grid-template-rows: repeat(5, auto);
grid-template-columns: 5% 122px repeat(4, auto);
top: -50px
}
.camera-storage .image-hero {
display: none
}
html.enhance-camera-storage .camera-storage .image-hero {
align-items: center;
display: flex;
justify-content: center;
transform: scale(0.8)
}
.camera-storage .overview-camera-storage-storage-photo-2 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 279px;
--p-height: 213px;
position: absolute;
grid-row: 1;
grid-column: 3;
transform: translateY(50%) scale(0.6)
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-2 {
--p-width: 207px;
--p-height: 158px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-2 {
--p-width: 186px;
--p-height: 142px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-2 {
transform: translateY(0) scale(0.6)
}
}
.camera-storage .overview-camera-storage-storage-photo-4 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 122px;
--p-height: 162px;
grid-row: 3;
grid-column: 2;
margin-top: 50px;
margin-left: -17%;
position: absolute;
z-index: 1
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-4 {
--p-width: 90px;
--p-height: 120px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-4 {
--p-width: 80px;
--p-height: 107px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-4 {
grid-row: 1
}
}
.camera-storage .overview-camera-storage-storage-photo-6 {
padding-left: 50px;
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 163px;
--p-height: 123px;
position: absolute;
grid-row: 4;
grid-column: 5;
transform: scale(0.7);
z-index: 1
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-6 {
--p-width: 121px;
--p-height: 92px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-6 {
--p-width: 108px;
--p-height: 82px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-6 {
display: none
}
}
.camera-storage .overview-camera-storage-storage-photo-8 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 190px;
--p-height: 146px;
left: -60px;
margin-top: -60px;
position: absolute;
grid-row: 6;
grid-column: 3;
transform: scale(0.8)
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-8 {
--p-width: 141px;
--p-height: 108px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-8 {
--p-width: 127px;
--p-height: 97px
}
}
@media only screen and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-8 {
left: 0;
margin-top: 0
}
}
.camera-storage .overview-camera-storage-storage-photo-1 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 306px;
--p-height: 230px;
position: absolute;
grid-row: 2;
grid-column: 1;
transform: translateY(-50%)
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-1 {
--p-width: 227px;
--p-height: 170px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-1 {
--p-width: 203px;
--p-height: 153px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-1 {
display: none
}
}
.camera-storage .overview-camera-storage-storage-photo-3 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 198px;
--p-height: 265px;
position: absolute;
grid-row: 2;
grid-column: 6;
transform: scale(0.8)
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-3 {
--p-width: 146px;
--p-height: 197px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-3 {
--p-width: 131px;
--p-height: 177px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-3 {
display: none
}
}
.camera-storage .overview-camera-storage-storage-photo-7 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 227px;
--p-height: 302px;
position: absolute;
grid-row: 5;
grid-column: 2;
transform: translate(-50%, -50%)
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-7 {
--p-width: 169px;
--p-height: 224px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-7 {
--p-width: 151px;
--p-height: 200px
}
}
@media only screen and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-7 {
transform: translate(-50%)
}
}
@media only screen and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-7 {
grid-row: 6;
transform: translateX(-25%)
}
}
.camera-storage .overview-camera-storage-storage-photo-9 {
margin-left: -25%;
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 389px;
--p-height: 293px;
margin-top: -25%;
position: absolute;
grid-row: 5;
grid-column: 6
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-9 {
--p-width: 288px;
--p-height: 217px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-9 {
--p-width: 258px;
--p-height: 195px
}
}
@media only screen and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-9 {
transform: translateX(-25%)
}
}
.camera-storage .overview-camera-storage-storage-photo-5 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 569px;
--p-height: 427px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.camera-storage .overview-camera-storage-storage-photo-5 {
--p-width: 421px;
--p-height: 317px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.camera-storage .overview-camera-storage-storage-photo-5 {
--p-width: 378px;
--p-height: 284px
}
}
.section-chip {
position: relative;
z-index: 1;
padding-top: 65px
}
@media only screen and (max-width: 1068px) {
.section-chip {
padding-top: 22px
}
}
@media only screen and (max-width: 734px) {
.section-chip {
padding-top: 52px
}
}
html.enhance-page-xp-parallax .section-chip {
--chip-intro-scale-multiplier: 2.4;
--video-width-resolved: 246px;
--video-height-resolved: 242px;
padding-top: 0
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .section-chip {
--chip-intro-scale-multiplier: 2;
--video-width-resolved: 246px;
--video-height-resolved: 242px
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .section-chip {
--chip-intro-scale-multiplier: 1.8;
--video-width-resolved: 281px;
--video-height-resolved: 277px
}
}
html.enhance-page-xp-parallax .section-chip .sticky-container {
min-height: 200vh;
box-sizing: border-box
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-chip .sticky-content {
margin-left: auto;
margin-right: auto;
width: 87.5%
}
}
html.enhance-page-xp-parallax .section-chip .sticky-content {
position: sticky;
z-index: 1;
top: 0;
width: auto;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column
}
.section-chip .chip-video-container {
display: none
}
html.enhance-page-xp-parallax .section-chip .chip-video-container {
position: absolute;
display: block;
left: 50%;
top: 50%;
transform: translate(-50%, calc(-50% + var(--r-localnav-height) / 2));
width: calc(var(--video-width-resolved) * var(--chip-intro-scale-multiplier));
height: calc(var(--video-height-resolved) * var(--chip-intro-scale-multiplier))
}
html.enhance-page-xp-parallax .section-chip .chip-video-container:not(.loaded):not(.loading-error):not(.loading-disabled) .chip-start-frame {
opacity: 1;
pointer-events: all
}
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-start-frame {
opacity: 0;
pointer-events: all;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none
}
html.enhance-page-xp-parallax .section-chip .chip-video-container.ended .chip-end-frame {
opacity: 1;
pointer-events: all
}
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-end-frame {
opacity: 0;
pointer-events: all;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none
}
html.enhance-page-xp-parallax .section-chip .chip-video-container.will-change {
will-change: transform
}
html.enhance-page-xp-parallax.no-enhance-page-xp-media .section-chip .chip-video-container:not(.loaded):not(.loading-error):not(.loading-disabled) .chip-start-frame {
opacity: 0
}
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-end-frame, html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-start-frame {
position: absolute;
width: 100%;
height: 100%;
background-size: contain;
background-position: 50%
}
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-start-frame {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_startframe__c3k9iyprt32a_large.jpg);
z-index: 5
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-start-frame {
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_startframe__c3k9iyprt32a_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-start-frame {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_startframe__c3k9iyprt32a_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-start-frame {
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_startframe__c3k9iyprt32a_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-start-frame {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_startframe__c3k9iyprt32a_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-start-frame {
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_startframe__c3k9iyprt32a_small_2x.jpg)
}
}
.section-chip .chip-video-container .chip-video {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
top: 0px
}
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-end-frame {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_endframe__dklhezbn68ae_large.jpg);
z-index: 4
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-end-frame {
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_endframe__dklhezbn68ae_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-end-frame {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_endframe__dklhezbn68ae_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-end-frame {
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_endframe__dklhezbn68ae_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-end-frame {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_endframe__dklhezbn68ae_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
html.enhance-page-xp-parallax .section-chip .chip-video-container .chip-end-frame {
background-image: url(/v/iphone-13-pro/f/images/overview/chip/chip_endframe__dklhezbn68ae_small_2x.jpg)
}
}
html.enhance-page-xp-parallax.no-enhance-page-xp-media .section-chip .chip-video-container .chip-end-frame {
opacity: 1
}
.section-chip .content-container {
--framing-size: calc(100vh - var(--r-localnav-height));
--half-framing-size: calc(var(--framing-size) / 2);
--half-video-height: calc(var(--video-height-resolved) / 2);
margin-top: calc(var(--half-framing-size) * -1 + var(--half-video-height))
}
.section-chip .image-chip-static {
width: 246px;
height: 242px;
background-size: 246px 242px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/chip/a15_bionic_static__udy7esdw4lua_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-chip .image-chip-static {
background-image: url(/v/iphone-13-pro/f/images/overview/chip/a15_bionic_static__udy7esdw4lua_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-chip .image-chip-static {
width: 246px;
height: 242px;
background-size: 246px 242px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/chip/a15_bionic_static__udy7esdw4lua_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-chip .image-chip-static {
background-image: url(/v/iphone-13-pro/f/images/overview/chip/a15_bionic_static__udy7esdw4lua_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-chip .image-chip-static {
width: 281px;
height: 277px;
background-size: 281px 277px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/chip/a15_bionic_static__udy7esdw4lua_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-chip .image-chip-static {
background-image: url(/v/iphone-13-pro/f/images/overview/chip/a15_bionic_static__udy7esdw4lua_small_2x.jpg)
}
}
html.enhance-page-xp-parallax .section-chip .image-chip-static {
display: none
}
@media only screen and (min-width: 735px) {
.section-chip .image-chip-static {
left: 50%;
margin-left: -123px;
position: relative
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-chip .image-chip-static {
left: 50%;
margin-left: -123px;
position: relative
}
}
.section-chip .section-headline {
text-align: center;
padding-top: 62px
}
@media only screen and (max-width: 1068px) {
.section-chip .section-headline {
padding-top: 48px
}
}
@media only screen and (max-width: 734px) {
.section-chip .section-headline {
padding-top: 64px;
text-align: left
}
}
.section-chip .section-subhead {
margin-top: 40px
}
@media only screen and (max-width: 1068px) {
.section-chip .section-subhead {
margin-top: 16px
}
}
@media only screen and (max-width: 734px) {
.section-chip .section-subhead {
margin-top: 22px
}
}
.section-chip .section-subhead.will-change {
will-change: transform, opacity
}
.section-chip .content-header {
position: relative;
z-index: 2
}
.section-chip .chip-grid-full-width {
overflow: hidden
}
.section-chip .claim-grid-container {
position: relative;
z-index: 1;
margin-top: 61px
}
@media only screen and (max-width: 734px) {
.section-chip .claim-grid-container {
margin-top: 93px
}
}
@media only screen and (min-width: 735px) {
.section-chip .claim-grid {
padding-top: var(--gap)
}
}
@media only screen and (max-width: 734px) {
.section-chip .claim-grid {
border-top: var(--small-border-top)
}
}
.section-chip .claim-grid-background {
top: -50%
}
@media only screen and (min-width: 1069px) {
.section-chip .claim-gpu {
padding-bottom: 62px
}
}
@media only screen and (max-width: 734px) {
.section-chip .claim-gpu {
padding-top: 32px
}
}
@media only screen and (min-width: 735px) {
.section-chip .claim-gpu .claim-title {
max-width: 6em
}
}
@media only screen and (min-width: 1069px) {
.section-chip .claim-gpu .claim-copy {
max-width: 18em
}
}
@media only screen and (min-width: 1069px) {
html:not(.text-zoom) .section-chip .claim-cpu:nth-child(2) {
padding-right: calc(45px + var(--bg-overflow) / 2);
padding-top: 64px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
html:not(.text-zoom) .section-chip .claim-cpu:nth-child(2) {
padding-left: 68px;
padding-top: 79px
}
}
@media only screen and (min-width: 1069px) {
.section-chip .claim-operations {
padding-top: 53px;
padding-bottom: 53px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-chip .claim-operations {
padding-top: 48px;
padding-bottom: 50px
}
}
@media only screen and (min-width: 735px) {
.section-chip .claim-operations .claim-title {
max-width: 6.2em
}
}
@media only screen and (min-width: 735px) {
.section-chip .claim-operations .claim-copy {
max-width: 11em
}
}
@media only screen and (min-width: 1069px) {
.section-chip .claim-isp {
padding-left: 125px;
padding-right: 55px;
padding-bottom: 70px
}
}
@media only screen and (min-width: 735px) {
.section-chip .claim-isp {
padding-top: 68px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-chip .claim-isp {
padding-right: 0;
padding-bottom: 42px
}
}
@media only screen and (min-width: 1069px) {
.section-chip .claim-isp .claim-copy {
max-width: 20em
}
}
@media only screen and (min-width: 1069px) {
.section-chip .claim-secure-enclave {
padding-left: 127px;
padding-top: 62px;
padding-bottom: 75px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-chip .claim-secure-enclave {
padding-top: 55px;
padding-bottom: 66px
}
}
@media only screen and (min-width: 735px) {
.section-chip .claim-secure-enclave .claim-title {
max-width: 6em
}
}
@media only screen and (min-width: 735px) {
.section-chip .claim-secure-enclave .claim-copy {
max-width: 17em
}
}
@media only screen and (min-width: 1069px) {
.section-chip .claim-audio-processing {
padding-top: 67px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-chip .claim-audio-processing {
padding-top: 59px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-chip .claim-audio-processing .claim-title {
max-width: 9em
}
}
@media only screen and (min-width: 735px) {
.section-chip .claim-audio-processing .claim-copy {
max-width: 12em
}
}
@media only screen and (max-width: 734px) {
.section-chip .innovation-story, .section-chip .innovation-story-wrapper {
margin-top: 0
}
}
.section-battery {
padding-top: 100px;
padding-bottom: 126px;
background-color: #fbfbfd
}
@media only screen and (max-width: 1068px) {
.section-battery {
padding-top: 75px;
padding-bottom: 120px
}
}
@media only screen and (max-width: 734px) {
.section-battery {
padding-top: 50px;
padding-bottom: 70px
}
}
.section-battery .section-eyebrow {
margin-bottom: .625em
}
@media only screen and (max-width: 1068px) {
.section-battery .section-eyebrow {
margin-bottom: .875em
}
}
@media only screen and (max-width: 734px) {
.section-battery .section-eyebrow {
margin-bottom: .571em
}
}
.section-battery .section-headline {
margin-top: 0
}
.section-battery .copy-battery-life {
color: #03a10e
}
@keyframes slideOut {
0% {
background-position: 100%
}
to {
background-position: 0%
}
}
.section-battery .claim-list {
display: flex;
justify-content: space-between;
margin: 0;
padding-top: 62px
}
@media only screen and (max-width: 1068px) {
.section-battery .claim-list {
padding-top: 26px
}
}
@media only screen and (max-width: 734px) {
.section-battery .claim-list {
display: block
}
}
@media only screen and (max-width: 734px) {
.section-battery .claim:last-of-type {
padding-top: 20px
}
}
.section-battery .callout-magsafe {
align-items: center;
display: flex;
margin: 0;
padding-top: 42px
}
@media only screen and (max-width: 1068px) {
.section-battery .callout-magsafe {
padding-top: 39px
}
}
.section-battery .callout-magsafe .copy-magsafe {
margin-top: 8px
}
@media only screen and (max-width: 734px) {
.section-battery .callout-magsafe .copy-magsafe {
align-items: center;
display: flex;
margin-top: 4px;
max-width: 280px;
min-height: 68px
}
}
.section-battery .image-magsafe {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 36px;
--p-height: 73px;
margin-right: 25px;
margin-bottom: -10px
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-battery .image-magsafe {
--p-width: 34px;
--p-height: 68px
}
}
@media only screen and (max-width: 734px) {
.section-battery .image-magsafe {
margin-right: 14px;
margin-bottom: -6px
}
}
.display-gaming {
background: #fbfbfd;
padding-top: 130px;
overflow: hidden;
min-height: 738px
}
@media only screen and (max-width: 1068px) {
.display-gaming {
min-height: 540px;
padding-top: 48px
}
}
@media only screen and (max-width: 734px) {
.display-gaming {
min-height: 328px;
padding-top: 70px
}
}
.display-gaming-content {
position: relative;
margin-bottom: 72px
}
@media only screen and (max-width: 1068px) {
.display-gaming-content {
margin-bottom: 54px
}
}
@media only screen and (max-width: 734px) {
.display-gaming-content {
margin-bottom: 32px
}
}
.display-gaming-headline {
margin-bottom: 33px
}
@media only screen and (max-width: 1068px) {
.display-gaming-headline {
margin-bottom: 22px
}
}
@media only screen and (max-width: 734px) {
.display-gaming-headline {
margin-bottom: 11px
}
}
.display-gaming-headline + p {
margin-top: 0
}
.display-gaming .overview-display-gaming-static {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1168px;
--p-height: 738px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.display-gaming .overview-display-gaming-static {
--p-width: 854px;
--p-height: 540px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.display-gaming .overview-display-gaming-static {
--p-width: 518px;
--p-height: 328px
}
}
html.enhance-page-xp-media .display-gaming .overview-display-gaming-static {
display: none
}
.display-gaming .enhanced-media-gaming {
left: 50%;
margin-left: -555px;
position: relative
}
@media only screen and (max-width: 1068px) {
.display-gaming .enhanced-media-gaming {
left: 50%;
margin-left: -406px
}
}
@media only screen and (max-width: 734px) {
.display-gaming .enhanced-media-gaming {
left: 50%;
margin-left: -247px
}
}
.display-gaming .enhanced-media-gaming .display-gaming-video {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1168px;
--p-height: 738px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.display-gaming .enhanced-media-gaming .display-gaming-video {
--p-width: 854px;
--p-height: 540px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.display-gaming .enhanced-media-gaming .display-gaming-video {
--p-width: 518px;
--p-height: 328px
}
}
.display-gaming .enhanced-media-gaming .overview-display-gaming-startframe {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1168px;
--p-height: 738px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.display-gaming .enhanced-media-gaming .overview-display-gaming-startframe {
--p-width: 854px;
--p-height: 540px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.display-gaming .enhanced-media-gaming .overview-display-gaming-startframe {
--p-width: 518px;
--p-height: 328px
}
}
.display-gaming .enhanced-media-gaming .overview-display-gaming-endframe {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1168px;
--p-height: 738px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.display-gaming .enhanced-media-gaming .overview-display-gaming-endframe {
--p-width: 854px;
--p-height: 540px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.display-gaming .enhanced-media-gaming .overview-display-gaming-endframe {
--p-width: 518px;
--p-height: 328px
}
}
.display-gaming .enhanced-media-gaming .display-gaming-video, .display-gaming .enhanced-media-gaming .overview-display-gaming-endframe, .display-gaming .enhanced-media-gaming .overview-display-gaming-startframe {
display: none
}
html.enhance-page-xp-media .display-gaming .enhanced-media-gaming .display-gaming-video, html.enhance-page-xp-media .display-gaming .enhanced-media-gaming .overview-display-gaming-endframe, html.enhance-page-xp-media .display-gaming .enhanced-media-gaming .overview-display-gaming-startframe {
display: block
}
.display-gaming .enhanced-media-gaming.ended .overview-display-gaming-endframe, .display-gaming .enhanced-media-gaming:not(.loaded):not(.loading-error):not(.loading-disabled) .overview-display-gaming-startframe {
opacity: 1;
pointer-events: all
}
.display-gaming .enhanced-media-gaming .overview-display-gaming-endframe, .display-gaming .enhanced-media-gaming .overview-display-gaming-startframe {
position: absolute;
opacity: 0;
pointer-events: none;
top: 0
}
.display-tilt {
--margin-top: 214px;
position: relative;
left: 9px;
margin-top: var(--margin-top)
}
html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt {
--margin-top: 210px
}
@media only screen and (max-width: 1068px) {
.display-tilt {
--margin-top: 110px;
left: 3px
}
html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt {
--margin-top: 108px
}
}
@media only screen and (max-width: 734px) {
.display-tilt {
--margin-top: 68px;
left: 50%;
position: relative;
transform: translateX(-50%);
width: calc(100vw + 1px);
overflow: hidden;
margin-bottom: -65px
}
html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt {
--margin-top: 65px;
margin-bottom: -68px
}
}
html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .image-wrapper {
display: none
}
@media only screen and (min-width: 735px) {
.display-tilt .image-wrapper {
display: flex;
align-items: center;
flex-direction: column
}
}
@media only screen and (max-width: 734px) {
.display-tilt .image-wrapper {
max-width: 542px;
margin-right: auto
}
.display-tilt .image-wrapper:after, .display-tilt .image-wrapper:before {
content: " ";
display: table
}
.display-tilt .image-wrapper:after {
clear: both
}
}
@media only screen and (max-width: 734px) {
.display-tilt .display-tilt-video, .display-tilt .overview-display-tilt-endframe, .display-tilt .overview-display-tilt-startframe {
position: relative;
float: right;
left: 34px
}
}
@media only screen and (min-width: 735px) {
.display-tilt .enhanced-media-tilt {
display: flex;
align-items: center;
flex-direction: column
}
}
@media only screen and (max-width: 734px) {
.display-tilt .enhanced-media-tilt {
max-width: 542px;
margin-right: auto
}
.display-tilt .enhanced-media-tilt:after, .display-tilt .enhanced-media-tilt:before {
content: " ";
display: table
}
.display-tilt .enhanced-media-tilt:after {
clear: both
}
}
@media only screen and (min-width: 1069px) {
html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt {
margin-bottom: 18px
}
}
.display-tilt .enhanced-media-tilt .display-tilt-video {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1306px;
--p-height: 426px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.display-tilt .enhanced-media-tilt .display-tilt-video {
--p-width: 920px;
--p-height: 290px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.display-tilt .enhanced-media-tilt .display-tilt-video {
--p-width: 576px;
--p-height: 346px
}
}
.display-tilt .enhanced-media-tilt .overview-display-tilt-startframe {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1306px;
--p-height: 426px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.display-tilt .enhanced-media-tilt .overview-display-tilt-startframe {
--p-width: 920px;
--p-height: 290px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.display-tilt .enhanced-media-tilt .overview-display-tilt-startframe {
--p-width: 576px;
--p-height: 346px
}
}
.display-tilt .enhanced-media-tilt .overview-display-tilt-endframe {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1306px;
--p-height: 426px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.display-tilt .enhanced-media-tilt .overview-display-tilt-endframe {
--p-width: 920px;
--p-height: 290px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.display-tilt .enhanced-media-tilt .overview-display-tilt-endframe {
--p-width: 576px;
--p-height: 346px
}
}
.display-tilt .enhanced-media-tilt .display-tilt-video, .display-tilt .enhanced-media-tilt .overview-display-tilt-startframe {
display: none
}
html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt .display-tilt-video, html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt .overview-display-tilt-startframe {
display: block
}
html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt .display-tilt-video, html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt .overview-display-tilt-endframe {
margin-top: -426px
}
@media only screen and (max-width: 1068px) {
html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt .display-tilt-video, html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt .overview-display-tilt-endframe {
margin-top: -290px
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt .display-tilt-video, html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt .overview-display-tilt-endframe {
margin-top: -346px
}
}
.display-tilt .enhanced-media-tilt:not(.loaded):not(.loading-error):not(.loading-disabled) .overview-display-tilt-startframe, html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt.ended .overview-display-tilt-endframe {
opacity: 1;
pointer-events: all
}
html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt .overview-display-tilt-endframe, html.enhance-page-xp-media.enhance-page-xp-parallax .display-tilt .enhanced-media-tilt .overview-display-tilt-startframe {
opacity: 0;
pointer-events: none;
top: 0
}
.section-display {
position: relative;
z-index: 2;
background-color: #fff
}
html.enhance-page-xp-parallax.enhance-lift-transition .section-display .subsection-sticky {
position: sticky;
top: calc(var(--subsection-height) * -1 + 100vh)
}
.section-display .subsection {
overflow: hidden
}
html.enhance-page-xp-parallax.enhance-lift-transition .section-display .subsection {
--subsection-height: null
}
html.enhance-page-xp-parallax.enhance-lift-transition .section-display .subsection.end-sticky {
position: relative;
overflow: hidden;
background: #fff;
z-index: 1;
transform: translateZ(0)
}
html.enhance-page-xp-parallax.enhance-lift-transition .section-display .innovation-story-background {
background: #fff;
position: relative;
transform: translateZ(0)
}
@media only screen and (max-width: 734px) {
.section-display .innovation-story-background .innovation-story {
margin-top: 0
}
}
@media only screen and (max-width: 734px) {
html.enhance-page-xp-parallax .section-display .innovation-story-background .innovation-story.innovation-story-active {
margin-bottom: 0
}
}
.section-display .display-pro-motion {
--media-offset: -130px;
position: relative;
max-width: 1440px;
margin: 138px auto auto
}
html.text-zoom .section-display .display-pro-motion {
--media-offset: 0px;
margin-top: 0
}
@media only screen and (max-width: 1068px) {
.section-display .display-pro-motion {
--media-offset: -80px;
margin-top: 109px
}
}
@media only screen and (max-width: 734px) {
.section-display .display-pro-motion {
--media-offset: -70px;
margin-top: 65px
}
}
.section-display .display-pro-motion-content {
position: relative;
z-index: 1
}
html.text-zoom .section-display .display-pro-motion-content {
margin-left: 0;
max-width: 100%
}
.section-display .display-pro-motion-content .typography-intro-shared {
margin-top: 0
}
html.text-zoom .section-display .display-pro-motion-content .typography-intro-shared {
margin-top: 20px
}
html.text-zoom .section-display .display-pro-motion-content p {
max-width: 100%
}
.section-display .display-pro-motion-subhead {
margin-top: 40px
}
@media only screen and (max-width: 734px) {
.section-display .display-pro-motion-subhead {
margin-top: 8px;
max-width: 12em
}
}
.section-display .media-container {
left: 50%;
margin-left: -442px;
position: relative;
margin-top: var(--media-offset)
}
.section-display .media-container:not(.loaded):not(.loading-error):not(.loading-disabled) .overview-display-pro-motion-startframe {
opacity: 1;
pointer-events: all
}
.section-display .media-container .overview-display-pro-motion-startframe {
opacity: 0;
pointer-events: all;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none
}
@media only screen and (max-width: 1068px) {
.section-display .media-container {
left: 50%;
margin-left: -446px;
position: relative
}
}
@media only screen and (max-width: 734px) {
.section-display .media-container {
left: 50%;
margin-left: -289px;
position: relative
}
}
html.enhance-page-xp-media.enhance-page-xp-parallax .section-display .media-container.ended .overview-display-pro-motion-endframe {
opacity: 1;
pointer-events: all
}
html.enhance-page-xp-media.enhance-page-xp-parallax .section-display .media-container .overview-display-pro-motion-endframe {
opacity: 0;
pointer-events: all;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none
}
.section-display .media-container .display-pro-motion-video {
width: 1412px;
height: 840px
}
@media only screen and (max-width: 1068px) {
.section-display .media-container .display-pro-motion-video {
width: 980px;
height: 772px
}
}
@media only screen and (max-width: 734px) {
.section-display .media-container .display-pro-motion-video {
width: 714px;
height: 512px
}
}
.section-display .media-container .overview-display-pro-motion-startframe {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1412px;
--p-height: 840px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-display .media-container .overview-display-pro-motion-startframe {
--p-width: 980px;
--p-height: 772px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-display .media-container .overview-display-pro-motion-startframe {
--p-width: 714px;
--p-height: 512px
}
}
.section-display .media-container .overview-display-pro-motion-endframe {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1412px;
--p-height: 840px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-display .media-container .overview-display-pro-motion-endframe {
--p-width: 980px;
--p-height: 772px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-display .media-container .overview-display-pro-motion-endframe {
--p-width: 714px;
--p-height: 512px
}
}
.section-display .media-container .display-pro-motion-video, .section-display .media-container .overview-display-pro-motion-startframe {
display: none
}
html.enhance-page-xp-media.enhance-page-xp-parallax .section-display .media-container .display-pro-motion-video, html.enhance-page-xp-media.enhance-page-xp-parallax .section-display .media-container .overview-display-pro-motion-startframe {
display: block
}
.section-display .details-wrapper {
margin-top: 75px;
margin-bottom: 134px
}
@media only screen and (max-width: 1068px) {
.section-display .details-wrapper {
margin-top: 60px;
margin-bottom: 110px
}
}
@media only screen and (max-width: 734px) {
.section-display .details-wrapper {
margin-top: 46px;
margin-bottom: 70px
}
}
@media only screen and (max-width: 734px) {
.section-display .display-intro-copy {
margin-bottom: 22px
}
}
.section-display .claim-list li + li {
margin-top: 30px
}
.section-display .claim-integration .claim-copy {
max-width: 16em
}
@media only screen and (min-width: 735px) {
.section-display .claim-grid .claim:first-child, .section-display .claim-grid .claim:nth-child(2) {
padding-top: 0
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-display .claim-grid .claim-brighter {
padding-bottom: 37px
}
}
@media only screen and (min-width: 1069px) {
.section-display .claim-grid .claim-brighter .claim-title {
display: inline
}
}
@media only screen and (max-width: 734px) {
.section-display .claim-grid .claim-brighter .claim-title {
max-width: 10em
}
}
@media only screen and (min-width: 1069px) {
.section-display .claim-grid .claim-brighter .claim-copy {
margin-left: 22px;
display: inline-block;
width: 9em;
top: 12px;
position: relative;
vertical-align: top
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-display .claim-grid .claim-brighter .claim-copy {
width: auto;
max-width: 17em
}
}
@media only screen and (max-width: 734px) {
.section-display .claim-grid .claim-brighter .claim-copy {
max-width: 15em
}
}
@media only screen and (min-width: 1069px) {
.section-display .claim-grid .claim-oled:nth-child(2) {
padding-top: 23px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-display .claim-grid .claim-oled:nth-child(2) {
padding-left: 58px;
padding-top: 50px
}
}
@media only screen and (min-width: 1069px) {
.section-display .claim-grid .claim-size {
padding-left: 130px;
padding-top: 66px;
padding-bottom: 66px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-display .claim-grid .claim-size {
padding-left: 58px;
padding-top: 60px;
padding-bottom: 69px
}
}
@media only screen and (max-width: 734px) {
.section-display .claim-grid .claim-size .claim-title {
max-width: 8em
}
}
.section-display .claim-grid .claim-size .claim-copy {
max-width: 17em
}
@media only screen and (min-width: 735px) {
.section-display .claim-grid .claim-nits {
padding-right: 30px;
padding-top: 58px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-display .claim-grid .claim-nits {
padding-top: 77px
}
}
@media only screen and (max-width: 734px) {
.section-display .claim-grid .claim-nits .claim-copy {
max-width: 16em
}
}
@media only screen and (min-width: 1069px) {
.section-display .claim-grid .claim-color {
padding-bottom: 66px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-display .claim-grid .claim-color {
padding-top: 64px;
padding-bottom: 76px
}
}
.section-display .claim-grid .claim-color .claim-title {
max-width: 6em
}
.section-display .claim-grid .claim-color .claim-copy {
max-width: 14em
}
@media only screen and (max-width: 734px) {
.section-display .claim-grid .claim-color .claim-copy {
max-width: 12em
}
}
@media only screen and (min-width: 1069px) {
.section-display .claim-grid .claim-contrast {
padding-top: 75px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-display .claim-grid .claim-contrast {
padding-left: 58px;
padding-top: 106px
}
}
@media only screen and (min-width: 1069px) {
.section-display .claim-grid .claim-contrast .claim-title {
max-width: 7em
}
}
@media only screen and (min-width: 1069px) {
.section-display .claim-grid .claim-contrast .claim-copy {
max-width: 11em
}
}
@media only screen and (max-width: 734px) {
.section-display .claim-grid .claim-contrast .claim-copy {
max-width: 18em
}
}
@media only screen and (max-width: 734px) {
.section-display .innovation-story-wrapper {
margin-top: 0
}
}
.section-5g {
overflow: hidden;
padding-top: 22px
}
@media only screen and (max-width: 1068px) {
.section-5g {
padding-top: 41px
}
}
@media only screen and (max-width: 734px) {
.section-5g {
padding-top: 21px
}
}
.section-5g .intro {
padding-bottom: 62px
}
@media only screen and (max-width: 1068px) {
.section-5g .intro {
padding-bottom: 12px
}
}
@media only screen and (max-width: 734px) {
.section-5g .intro {
max-width: 290px
}
}
.section-5g .grid-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, -webkit-max-content) auto;
grid-template-rows: repeat(2, max-content) auto;
grid-column-gap: 98px;
column-gap: 98px;
position: relative;
z-index: 1;
grid-template-areas: "copy image-stack" "claims image-stack" "image-iso image-stack"
}
@media only screen and (max-width: 1068px) {
.section-5g .grid-wrapper {
grid-column-gap: 78px;
column-gap: 78px
}
}
@media only screen and (max-width: 734px) {
.section-5g .grid-wrapper {
grid-template-columns: 187px 1fr;
grid-column-gap: 20px;
column-gap: 20px;
grid-template-areas: "copy copy" "claims image-stack" "image-iso image-stack"
}
}
.section-5g .copy-wrapper {
grid-area: copy;
padding-top: 126px
}
@media only screen and (max-width: 1068px) {
.section-5g .copy-wrapper {
padding-top: 90px
}
}
@media only screen and (max-width: 734px) {
.section-5g .copy-wrapper {
padding-top: 0;
padding-bottom: 28px
}
}
html.enhance-page-xp-parallax .section-5g .copy-wrapper {
opacity: 0
}
.section-5g .claims-wrapper {
grid-area: claims;
padding: 57px 0 111px
}
@media only screen and (max-width: 1068px) {
.section-5g .claims-wrapper {
padding: 30px 0 60px
}
}
@media only screen and (max-width: 734px) {
.section-5g .claims-wrapper {
padding: 56px 0 0
}
}
html.enhance-page-xp-parallax .section-5g .claims-wrapper {
opacity: 0
}
.section-5g .image-wrapper {
grid-area: image-stack;
margin-bottom: 132px
}
@media only screen and (max-width: 1068px) {
.section-5g .image-wrapper {
margin-bottom: 232px
}
}
@media only screen and (max-width: 734px) {
.section-5g .image-wrapper {
justify-self: start;
margin-bottom: 72px;
min-width: 0
}
}
.section-5g .overview-5g-5g-1 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 444px;
--p-height: 896px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-5g .overview-5g-5g-1 {
--p-width: 311px;
--p-height: 625px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-5g .overview-5g-5g-1 {
--p-width: 187px;
--p-height: 376px
}
}
.section-5g .overview-5g-5g-2 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 444px;
--p-height: 896px;
grid-area: image-iso;
padding-bottom: 176px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-5g .overview-5g-5g-2 {
--p-width: 311px;
--p-height: 625px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-5g .overview-5g-5g-2 {
--p-width: 187px;
--p-height: 376px
}
}
@media only screen and (max-width: 1068px) {
.section-5g .overview-5g-5g-2 {
padding-bottom: 121px
}
}
@media only screen and (max-width: 734px) {
.section-5g .overview-5g-5g-2 {
padding-top: 32px;
padding-bottom: 74px
}
}
.section-5g .overview-5g-5g-3 {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 444px;
--p-height: 896px;
padding-top: 55px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-5g .overview-5g-5g-3 {
--p-width: 311px;
--p-height: 625px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-5g .overview-5g-5g-3 {
--p-width: 187px;
--p-height: 376px
}
}
@media only screen and (max-width: 1068px) {
.section-5g .overview-5g-5g-3 {
max-height: 530px
}
}
@media only screen and (max-width: 734px) {
.section-5g .overview-5g-5g-3 {
max-height: none;
padding-top: 16px
}
}
.section-ios {
overflow: hidden;
position: relative;
background: linear-gradient(180deg, #f5f5f7, white 90%);
--device-width: 274px;
--logo-width: 192px;
--logo-height: 192px;
--logo-scale: 1.875;
--grid-rows: 6;
--grid-gap: 82px;
--grid-padding-top: 130px;
--grid-padding-bottom: 140px;
--grid-vertical-centering-offset: 26px
}
@media only screen and (max-width: 1068px) {
.section-ios {
--device-width: 220px;
--logo-width: 155px;
--logo-height: 155px;
--grid-gap: 65px;
--grid-padding-top: 106px;
--grid-padding-bottom: 106px;
--grid-vertical-centering-offset: 10px
}
}
@media only screen and (max-width: 734px) {
.section-ios {
--device-width: 134px;
--logo-width: 101px;
--logo-height: 101px;
--logo-scale: 1.8614;
--grid-rows: 7;
--grid-gap: 33px;
--grid-padding-top: 130px;
--grid-padding-bottom: 100px
}
}
.section-ios .ios-grid {
display: grid;
grid-template-rows: var(--device-width) var(--device-width) var(--logo-width) var(--device-width) var(--device-width) auto;
grid-template-columns: var(--device-width) var(--device-width) var(--device-width) var(--device-width) var(--logo-height) var(--device-width) var(--device-width) var(--device-width) var(--device-width) var(--device-width);
grid-gap: var(--grid-gap);
gap: var(--grid-gap);
margin-bottom: var(--grid-padding-bottom);
margin-left: calc(var(--device-width) / 2 + var(--grid-gap) / 2);
justify-content: center;
align-content: center;
width: 100%;
margin-top: calc(var(--device-width) * -1 + var(--r-localnav-height))
}
@media only screen and (min-width: 1069px)and (max-height: 1150px) {
.section-ios .ios-grid {
margin-top: calc(var(--grid-rows) * (var(--device-width) + var(--grid-gap)) * 0.33 * -1 - -50vh + var(--device-width) / 2 * -1 + var(--grid-gap) / 2 * -1 - var(--grid-vertical-centering-offset) * -1 - var(--r-localnav-height) * -1)
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px)and (max-height: 1025px) {
.section-ios .ios-grid {
margin-top: calc(var(--grid-rows) * (var(--device-width) + var(--grid-gap)) * 0.33 * -1 - -50vh + var(--device-width) / 2 * -1 + var(--grid-gap) / 2 * -1 - var(--grid-vertical-centering-offset) * -1 - var(--r-localnav-height) * -1)
}
}
@media only screen and (max-width: 734px) {
.section-ios .ios-grid {
margin-top: calc(var(--device-width) * -1 + var(--r-localnav-height) - 13px)
}
}
.section-ios .ios-grid-item-logo {
grid-area: 3/5
}
.section-ios .ios-grid-item-content {
grid-area: 5/4/7/7
}
.section-ios .ios-grid-item-1 {
grid-area: 2/1
}
.section-ios .ios-grid-item-2 {
grid-area: 2/3
}
.section-ios .ios-grid-item-3 {
grid-area: 2/4
}
.section-ios .ios-grid-item-4 {
grid-area: 2/5
}
.section-ios .ios-grid-item-5 {
grid-area: 1/7
}
.section-ios .ios-grid-item-6 {
grid-area: 2/8
}
.section-ios .ios-grid-item-7 {
grid-area: 1/9
}
.section-ios .ios-grid-item-8 {
grid-area: 3/1
}
.section-ios .ios-grid-item-9 {
grid-area: 3/2
}
.section-ios .ios-grid-item-10 {
grid-area: 4/3
}
.section-ios .ios-grid-item-11 {
grid-area: 4/4
}
.section-ios .ios-grid-item-12 {
grid-area: 3/6
}
.section-ios .ios-grid-item-13 {
grid-area: 3/7
}
.section-ios .ios-grid-item-14 {
grid-area: 4/8
}
.section-ios .ios-grid-item-15 {
grid-area: 3/9
}
.section-ios .ios-grid-item-16 {
grid-area: 4/9
}
.section-ios .ios-grid-item-17 {
grid-area: 5/1
}
.section-ios .ios-grid-item-18 {
grid-area: 6/2
}
.section-ios .ios-grid-item-19 {
grid-area: 5/7
}
@media only screen and (max-width: 734px) {
.section-ios .ios-grid-item-content {
grid-area: last / 3 /last/ 8
}
.section-ios .ios-grid-item-4 {
grid-area: 5/5
}
.section-ios .ios-grid-item-12 {
grid-area: 6/5
}
.section-ios .ios-grid-item-13 {
grid-area: 5/4
}
.section-ios .ios-grid-item-15 {
grid-area: 6/6
}
.section-ios .ios-grid-item-18 {
grid-area: 2/5
}
.section-ios .ios-grid-item-19 {
grid-area: 3/6
}
}
.section-ios .ios-grid-item-logo {
width: 192px;
height: 192px;
background-size: 192px 192px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15__girldmfkjh6y_large.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .ios-grid-item-logo {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15__girldmfkjh6y_large_2x.png)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .ios-grid-item-logo {
width: 155px;
height: 155px;
background-size: 155px 155px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15__girldmfkjh6y_medium.png)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .ios-grid-item-logo {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15__girldmfkjh6y_medium_2x.png)
}
}
@media only screen and (max-width: 734px) {
.section-ios .ios-grid-item-logo {
width: 101px;
height: 101px;
background-size: 101px 101px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15__girldmfkjh6y_small.png)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .ios-grid-item-logo {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15__girldmfkjh6y_small_2x.png)
}
}
@media only screen and (inverted-colors) {
.section-ios .ios-grid-item-logo {
filter: invert(1)
}
}
html.enhance-ios .section-ios .ios-grid-item-logo {
width: 384px;
height: 384px;
background-size: 384px 384px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15_enhanced__q2xev54kigqy_large.png);
width: 192px;
height: 192px;
background-size: 192px 192px;
transform: scale(var(--logo-scale))
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
html.enhance-ios .section-ios .ios-grid-item-logo {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15_enhanced__q2xev54kigqy_large_2x.png)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-ios .section-ios .ios-grid-item-logo {
width: 310px;
height: 310px;
background-size: 310px 310px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15_enhanced__q2xev54kigqy_medium.png)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
html.enhance-ios .section-ios .ios-grid-item-logo {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15_enhanced__q2xev54kigqy_medium_2x.png)
}
}
@media only screen and (max-width: 734px) {
html.enhance-ios .section-ios .ios-grid-item-logo {
width: 202px;
height: 202px;
background-size: 202px 202px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15_enhanced__q2xev54kigqy_small.png)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
html.enhance-ios .section-ios .ios-grid-item-logo {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/icon_ios15_enhanced__q2xev54kigqy_small_2x.png)
}
}
@media only screen and (max-width: 1068px) {
html.enhance-ios .section-ios .ios-grid-item-logo {
width: 155px;
height: 155px
}
}
@media only screen and (max-width: 734px) {
html.enhance-ios .section-ios .ios-grid-item-logo {
width: 101px;
height: 101px
}
}
@media only screen and (max-width: 1068px) {
html.enhance-ios .section-ios .ios-grid-item-logo {
background-size: 155px 155px
}
}
@media only screen and (max-width: 734px) {
html.enhance-ios .section-ios .ios-grid-item-logo {
background-size: 101px 101px
}
}
.section-ios .ios-grid-item-content {
text-align: center;
align-self: start
}
@media only screen and (max-width: 734px) {
.section-ios .ios-grid-item-content {
text-align: left
}
}
.section-ios .ios-grid-item-horizontal {
grid-column-end: span 2
}
.section-ios .ios-grid-item-vertical {
grid-row-end: span 2
}
.section-ios .ios-grid-item-11 {
margin-top: 2px
}
@media only screen and (max-width: 734px) {
.section-ios .ios-grid-item-15 {
margin-left: 17px
}
}
.section-ios .ios-grid-item-offset {
margin-top: calc(var(--device-width) * -1 - var(--logo-width) * -1 - -2px)
}
@media only screen and (max-width: 734px) {
.section-ios .ios-grid-item-offset.no-top-offset-small {
margin-top: 0
}
}
@media only screen and (max-width: 734px) {
.section-ios .ios-grid-item-offset-horizontal {
margin-left: -16px
}
}
.section-ios .justify-self-end {
justify-self: end
}
.section-ios .image-screen-1 glass-screen {
width: 536px;
height: 258px;
background-size: 536px 258px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_1__zlg3sxiutk2i_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-1 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_1__zlg3sxiutk2i_large_2x.jpg)
}
}
.section-ios .image-screen-2 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_2__d438l7vx2gom_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-2 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_2__d438l7vx2gom_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .image-screen-2 glass-screen {
width: 204px;
height: 426px;
background-size: 204px 426px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_2__d438l7vx2gom_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .image-screen-2 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_2__d438l7vx2gom_medium_2x.jpg)
}
}
.section-ios .image-screen-3 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_3__bfyvxdhsfjci_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-3 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_3__bfyvxdhsfjci_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .image-screen-3 glass-screen {
width: 204px;
height: 426px;
background-size: 204px 426px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_3__bfyvxdhsfjci_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .image-screen-3 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_3__bfyvxdhsfjci_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-ios .image-screen-3 glass-screen {
width: 124px;
height: 260px;
background-size: 124px 260px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_3__bfyvxdhsfjci_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .image-screen-3 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_3__bfyvxdhsfjci_small_2x.jpg)
}
}
.section-ios .image-screen-4 glass-screen {
width: 536px;
height: 258px;
background-size: 536px 258px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_4__cclo7jc7i4eq_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-4 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_4__cclo7jc7i4eq_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .image-screen-4 glass-screen {
width: 426px;
height: 204px;
background-size: 426px 204px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_4__cclo7jc7i4eq_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .image-screen-4 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_4__cclo7jc7i4eq_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-ios .image-screen-4 glass-screen {
width: 260px;
height: 124px;
background-size: 260px 124px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_4__cclo7jc7i4eq_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .image-screen-4 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_4__cclo7jc7i4eq_small_2x.jpg)
}
}
.section-ios .image-screen-5 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_5__ca3gxmmgwoya_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-5 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_5__ca3gxmmgwoya_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .image-screen-5 glass-screen {
width: 204px;
height: 426px;
background-size: 204px 426px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_5__ca3gxmmgwoya_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .image-screen-5 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_5__ca3gxmmgwoya_medium_2x.jpg)
}
}
.section-ios .image-screen-6 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_6__npu3sogrin6i_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-6 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_6__npu3sogrin6i_large_2x.jpg)
}
}
.section-ios .image-screen-7 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_7__fx7fj2jredua_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-7 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_7__fx7fj2jredua_large_2x.jpg)
}
}
.section-ios .image-screen-8 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_8__bum3t2ouq02q_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-8 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_8__bum3t2ouq02q_large_2x.jpg)
}
}
.section-ios .image-screen-9 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_9__n56hvl6y48ay_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-9 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_9__n56hvl6y48ay_large_2x.jpg)
}
}
.section-ios .image-screen-10 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_10__fcarqcadwfyy_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-10 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_10__fcarqcadwfyy_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .image-screen-10 glass-screen {
width: 204px;
height: 426px;
background-size: 204px 426px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_10__fcarqcadwfyy_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .image-screen-10 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_10__fcarqcadwfyy_medium_2x.jpg)
}
}
.section-ios .image-screen-11 glass-screen {
width: 536px;
height: 258px;
background-size: 536px 258px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_11__fmmcl1js49ay_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-11 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_11__fmmcl1js49ay_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .image-screen-11 glass-screen {
width: 426px;
height: 204px;
background-size: 426px 204px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_11__fmmcl1js49ay_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .image-screen-11 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_11__fmmcl1js49ay_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-ios .image-screen-11 glass-screen {
width: 260px;
height: 124px;
background-size: 260px 124px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_11__fmmcl1js49ay_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .image-screen-11 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_11__fmmcl1js49ay_small_2x.jpg)
}
}
.section-ios .image-screen-12 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_12__cm3i2gfj0iz6_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-12 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_12__cm3i2gfj0iz6_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .image-screen-12 glass-screen {
width: 204px;
height: 426px;
background-size: 204px 426px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_12__cm3i2gfj0iz6_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .image-screen-12 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_12__cm3i2gfj0iz6_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-ios .image-screen-12 glass-screen {
width: 124px;
height: 260px;
background-size: 124px 260px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_12__cm3i2gfj0iz6_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .image-screen-12 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_12__cm3i2gfj0iz6_small_2x.jpg)
}
}
.section-ios .image-screen-13 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_13__dej112wvudme_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-13 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_13__dej112wvudme_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .image-screen-13 glass-screen {
width: 204px;
height: 426px;
background-size: 204px 426px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_13__dej112wvudme_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .image-screen-13 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_13__dej112wvudme_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-ios .image-screen-13 glass-screen {
width: 124px;
height: 260px;
background-size: 124px 260px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_13__dej112wvudme_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .image-screen-13 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_13__dej112wvudme_small_2x.jpg)
}
}
.section-ios .image-screen-14 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_14__b73jngwx7wya_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-14 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_14__b73jngwx7wya_large_2x.jpg)
}
}
.section-ios .image-screen-15 glass-screen {
width: 536px;
height: 258px;
background-size: 536px 258px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_15__c4hyaz31t6ie_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-15 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_15__c4hyaz31t6ie_large_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-ios .image-screen-15 glass-screen {
width: 260px;
height: 124px;
background-size: 260px 124px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_15__c4hyaz31t6ie_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .image-screen-15 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_15__c4hyaz31t6ie_small_2x.jpg)
}
}
.section-ios .image-screen-16 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_16__em8ureb8u7o2_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-16 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_16__em8ureb8u7o2_large_2x.jpg)
}
}
.section-ios .image-screen-17 glass-screen {
width: 536px;
height: 258px;
background-size: 536px 258px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_17__zc7lkd9o136e_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-17 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_17__zc7lkd9o136e_large_2x.jpg)
}
}
.section-ios .image-screen-18 glass-screen {
width: 536px;
height: 258px;
background-size: 536px 258px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_18__kgnn2l96j92m_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-18 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_18__kgnn2l96j92m_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .image-screen-18 glass-screen {
width: 426px;
height: 204px;
background-size: 426px 204px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_18__kgnn2l96j92m_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .image-screen-18 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_18__kgnn2l96j92m_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-ios .image-screen-18 glass-screen {
width: 260px;
height: 124px;
background-size: 260px 124px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_18__kgnn2l96j92m_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .image-screen-18 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_18__kgnn2l96j92m_small_2x.jpg)
}
}
.section-ios .image-screen-19 glass-screen {
width: 258px;
height: 536px;
background-size: 258px 536px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_19__fyvr7wsftxei_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .image-screen-19 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_19__fyvr7wsftxei_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .image-screen-19 glass-screen {
width: 204px;
height: 426px;
background-size: 204px 426px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_19__fyvr7wsftxei_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .image-screen-19 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_19__fyvr7wsftxei_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-ios .image-screen-19 glass-screen {
width: 124px;
height: 260px;
background-size: 124px 260px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_19__fyvr7wsftxei_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .image-screen-19 glass-screen {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/screen_19__fyvr7wsftxei_small_2x.jpg)
}
}
.section-ios .grid-item-horizontal {
width: 552px;
height: 274px
}
@media only screen and (max-width: 1068px) {
.section-ios .grid-item-horizontal {
width: 442px;
height: 220px
}
}
@media only screen and (max-width: 734px) {
.section-ios .grid-item-horizontal {
width: 270px;
height: 136px
}
}
.section-ios .grid-item-horizontal glass-hardware {
width: 552px;
height: 274px;
background-size: 552px 274px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_horizontal__chfay7tv2jyq_large.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .grid-item-horizontal glass-hardware {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_horizontal__chfay7tv2jyq_large_2x.png)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .grid-item-horizontal glass-hardware {
width: 442px;
height: 220px;
background-size: 442px 220px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_horizontal__chfay7tv2jyq_medium.png)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .grid-item-horizontal glass-hardware {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_horizontal__chfay7tv2jyq_medium_2x.png)
}
}
@media only screen and (max-width: 734px) {
.section-ios .grid-item-horizontal glass-hardware {
width: 270px;
height: 136px;
background-size: 270px 136px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_horizontal__chfay7tv2jyq_small.png)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .grid-item-horizontal glass-hardware {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_horizontal__chfay7tv2jyq_small_2x.png)
}
}
.section-ios .grid-item-horizontal glass-screen {
z-index: 2;
margin-left: 8px;
margin-top: 8px
}
@media only screen and (max-width: 734px) {
.section-ios .grid-item-horizontal glass-screen {
margin-left: 5px;
margin-top: 5px
}
}
.section-ios .grid-item-horizontal:before {
width: 710px;
height: 478px;
background-size: 710px 478px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_horizontal__kmg9qamjf0qe_large.png);
left: -24px;
top: -22px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .grid-item-horizontal:before {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_horizontal__kmg9qamjf0qe_large_2x.png)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .grid-item-horizontal:before {
width: 568px;
height: 382px;
background-size: 568px 382px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_horizontal__kmg9qamjf0qe_medium.png)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .grid-item-horizontal:before {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_horizontal__kmg9qamjf0qe_medium_2x.png)
}
}
@media only screen and (max-width: 734px) {
.section-ios .grid-item-horizontal:before {
width: 332px;
height: 222px;
background-size: 332px 222px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_horizontal__kmg9qamjf0qe_small.png)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .grid-item-horizontal:before {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_horizontal__kmg9qamjf0qe_small_2x.png)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .grid-item-horizontal:before {
left: -19px;
top: -17px
}
}
@media only screen and (max-width: 734px) {
.section-ios .grid-item-horizontal:before {
left: -5px;
top: -4px
}
}
.section-ios .grid-item-vertical {
width: 274px;
height: 552px
}
@media only screen and (max-width: 1068px) {
.section-ios .grid-item-vertical {
width: 220px;
height: 442px
}
}
@media only screen and (max-width: 734px) {
.section-ios .grid-item-vertical {
width: 134px;
height: 270px
}
}
.section-ios .grid-item-vertical glass-hardware {
width: 274px;
height: 552px;
background-size: 274px 552px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_vertical__cfxeypep5qoi_large.png)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .grid-item-vertical glass-hardware {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_vertical__cfxeypep5qoi_large_2x.png)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .grid-item-vertical glass-hardware {
width: 220px;
height: 442px;
background-size: 220px 442px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_vertical__cfxeypep5qoi_medium.png)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .grid-item-vertical glass-hardware {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_vertical__cfxeypep5qoi_medium_2x.png)
}
}
@media only screen and (max-width: 734px) {
.section-ios .grid-item-vertical glass-hardware {
width: 134px;
height: 270px;
background-size: 134px 270px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_vertical__cfxeypep5qoi_small.png)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .grid-item-vertical glass-hardware {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_hardware_vertical__cfxeypep5qoi_small_2x.png)
}
}
.section-ios .grid-item-vertical glass-screen {
z-index: 2;
margin-left: 8px;
margin-top: 8px
}
@media only screen and (max-width: 734px) {
.section-ios .grid-item-vertical glass-screen {
margin-left: 5px;
margin-top: 5px
}
}
.section-ios .grid-item-vertical:before {
width: 478px;
height: 710px;
background-size: 478px 710px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_vertical__dcwlvxvdp0eq_large.png);
left: -22px;
top: -25px
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-ios .grid-item-vertical:before {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_vertical__dcwlvxvdp0eq_large_2x.png)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .grid-item-vertical:before {
width: 382px;
height: 568px;
background-size: 382px 568px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_vertical__dcwlvxvdp0eq_medium.png)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-ios .grid-item-vertical:before {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_vertical__dcwlvxvdp0eq_medium_2x.png)
}
}
@media only screen and (max-width: 734px) {
.section-ios .grid-item-vertical:before {
width: 222px;
height: 332px;
background-size: 222px 332px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_vertical__dcwlvxvdp0eq_small.png)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-ios .grid-item-vertical:before {
background-image: url(/v/iphone-13-pro/f/images/overview/ios/iphone_shadow_vertical__dcwlvxvdp0eq_small_2x.png)
}
}
@media only screen and (max-width: 1068px) {
.section-ios .grid-item-vertical:before {
left: -17px;
top: -19px
}
}
@media only screen and (max-width: 734px) {
.section-ios .grid-item-vertical:before {
left: -8px;
top: -10px
}
}
@media only screen and (inverted-colors) {
.section-ios .grid-item-horizontal, .section-ios .grid-item-vertical, .section-ios glass-container {
filter: invert(1)
}
}
html.enhance-ios .section-ios .grid-item-horizontal, html.enhance-ios .section-ios .grid-item-vertical, html.enhance-ios .section-ios glass-container {
opacity: 0
}
.section-ios glass-screen {
border-radius: 27px
}
@media only screen and (max-width: 1068px) {
.section-ios glass-screen {
border-radius: 20px
}
}
@media only screen and (max-width: 734px) {
.section-ios glass-screen {
border-radius: 17px
}
}
.section-ios .ios-content {
box-sizing: border-box;
padding: calc(var(--grid-gap) / 2) calc(var(--grid-gap) / 2) 0 calc(var(--grid-gap) / 2)
}
@media only screen and (max-width: 734px) {
.section-ios .ios-content {
padding-top: calc(52px - var(--grid-gap));
margin: 0 auto;
max-width: 87.5vw;
padding-left: 0;
padding-right: 0
}
}
html.enhance-ios .section-ios .ios-content [data-animate-ios-content] {
opacity: 0
}
.section-ios .ios-intro {
margin-top: 80px
}
@media only screen and (max-width: 1068px) {
.section-ios .ios-intro {
margin-top: 35px
}
}
@media only screen and (max-width: 734px) {
.section-ios .ios-intro {
margin-top: 0
}
}
.section-ios .ios-availability {
color: #6e6e73
}
.section-privacy {
position: relative;
overflow: hidden
}
.section-privacy .grid-headline {
max-width: 5em
}
@media only screen and (max-width: 734px) {
.section-privacy .grid-headline {
max-width: 10em
}
}
.section-privacy .base-headline {
opacity: 1
}
html.enhance-privacy .section-privacy .base-headline {
opacity: 0
}
.section-privacy .animated-headline {
position: absolute;
top: 0;
margin-top: 0;
opacity: 0
}
html.enhance-privacy .section-privacy .animated-headline {
opacity: 1
}
.section-privacy .icon-privacy {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/privacy_icon__dlw1ars629g2_large.png);
background-size: 396px 528px;
width: 66px;
height: 88px;
animation: unlock_animation-large 3s steps(1) forwards;
animation-play-state: paused;
animation-iteration-count: 1;
animation-duration: 36s;
background-position: 0px 0px;
animation-delay: 0s
}
@keyframes unlock_animation-large {
0% {
background-position: 0px 0px
}
2.7777777778% {
background-position: -66px 0px
}
5.5555555556% {
background-position: -132px 0px
}
8.3333333333% {
background-position: -198px 0px
}
11.1111111111% {
background-position: -264px 0px
}
13.8888888889% {
background-position: -330px 0px
}
16.6666666667% {
background-position: 0px -88px
}
19.4444444444% {
background-position: -66px -88px
}
22.2222222222% {
background-position: -132px -88px
}
25% {
background-position: -198px -88px
}
27.7777777778% {
background-position: -264px -88px
}
30.5555555556% {
background-position: -330px -88px
}
33.3333333333% {
background-position: 0px -176px
}
36.1111111111% {
background-position: -66px -176px
}
38.8888888889% {
background-position: -132px -176px
}
41.6666666667% {
background-position: -198px -176px
}
44.4444444444% {
background-position: -264px -176px
}
47.2222222222% {
background-position: -330px -176px
}
50% {
background-position: 0px -264px
}
52.7777777778% {
background-position: -66px -264px
}
55.5555555556% {
background-position: -132px -264px
}
58.3333333333% {
background-position: -198px -264px
}
61.1111111111% {
background-position: -264px -264px
}
63.8888888889% {
background-position: -330px -264px
}
66.6666666667% {
background-position: 0px -352px
}
69.4444444444% {
background-position: -66px -352px
}
72.2222222222% {
background-position: -132px -352px
}
75% {
background-position: -198px -352px
}
77.7777777778% {
background-position: -264px -352px
}
80.5555555556% {
background-position: -330px -352px
}
83.3333333333% {
background-position: 0px -440px
}
86.1111111111% {
background-position: -66px -440px
}
88.8888888889% {
background-position: -132px -440px
}
91.6666666667% {
background-position: -198px -440px
}
94.4444444444% {
background-position: -264px -440px
}
97.2222222222% {
background-position: -330px -440px
}
to {
background-position: -330px -440px
}
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-privacy .icon-privacy {
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/privacy_icon__dlw1ars629g2_large_2x.png)
}
}
html.no-enhance-privacy .section-privacy .icon-privacy {
animation: none;
background-position: -330px -440px
}
@keyframes unlock_animation-medium {
0% {
background-position: 0px 0px
}
2.7777777778% {
background-position: -50px 0px
}
5.5555555556% {
background-position: -100px 0px
}
8.3333333333% {
background-position: -150px 0px
}
11.1111111111% {
background-position: -200px 0px
}
13.8888888889% {
background-position: -250px 0px
}
16.6666666667% {
background-position: -300px 0px
}
19.4444444444% {
background-position: -350px 0px
}
22.2222222222% {
background-position: -400px 0px
}
25% {
background-position: 0px -66px
}
27.7777777778% {
background-position: -50px -66px
}
30.5555555556% {
background-position: -100px -66px
}
33.3333333333% {
background-position: -150px -66px
}
36.1111111111% {
background-position: -200px -66px
}
38.8888888889% {
background-position: -250px -66px
}
41.6666666667% {
background-position: -300px -66px
}
44.4444444444% {
background-position: -350px -66px
}
47.2222222222% {
background-position: -400px -66px
}
50% {
background-position: 0px -132px
}
52.7777777778% {
background-position: -50px -132px
}
55.5555555556% {
background-position: -100px -132px
}
58.3333333333% {
background-position: -150px -132px
}
61.1111111111% {
background-position: -200px -132px
}
63.8888888889% {
background-position: -250px -132px
}
66.6666666667% {
background-position: -300px -132px
}
69.4444444444% {
background-position: -350px -132px
}
72.2222222222% {
background-position: -400px -132px
}
75% {
background-position: 0px -198px
}
77.7777777778% {
background-position: -50px -198px
}
80.5555555556% {
background-position: -100px -198px
}
83.3333333333% {
background-position: -150px -198px
}
86.1111111111% {
background-position: -200px -198px
}
88.8888888889% {
background-position: -250px -198px
}
91.6666666667% {
background-position: -300px -198px
}
94.4444444444% {
background-position: -350px -198px
}
97.2222222222% {
background-position: -400px -198px
}
to {
background-position: -400px -198px
}
}
@media only screen and (max-width: 1068px) {
.section-privacy .icon-privacy {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/privacy_icon__dlw1ars629g2_medium.png);
background-size: 450px 264px;
width: 50px;
height: 66px;
animation: unlock_animation-medium 3s steps(1) forwards;
animation-play-state: paused;
animation-iteration-count: 1;
animation-duration: 36s;
background-position: 0px 0px
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-privacy .icon-privacy {
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/privacy_icon__dlw1ars629g2_medium_2x.png)
}
}
@media only screen and (max-width: 1068px) {
html.no-enhance-privacy .section-privacy .icon-privacy {
animation: none;
background-position: -400px -198px
}
}
@keyframes unlock_animation-small {
0% {
background-position: 0px 0px
}
2.7777777778% {
background-position: -48px 0px
}
5.5555555556% {
background-position: -96px 0px
}
8.3333333333% {
background-position: -144px 0px
}
11.1111111111% {
background-position: -192px 0px
}
13.8888888889% {
background-position: -240px 0px
}
16.6666666667% {
background-position: -288px 0px
}
19.4444444444% {
background-position: -336px 0px
}
22.2222222222% {
background-position: -384px 0px
}
25% {
background-position: 0px -62px
}
27.7777777778% {
background-position: -48px -62px
}
30.5555555556% {
background-position: -96px -62px
}
33.3333333333% {
background-position: -144px -62px
}
36.1111111111% {
background-position: -192px -62px
}
38.8888888889% {
background-position: -240px -62px
}
41.6666666667% {
background-position: -288px -62px
}
44.4444444444% {
background-position: -336px -62px
}
47.2222222222% {
background-position: -384px -62px
}
50% {
background-position: 0px -124px
}
52.7777777778% {
background-position: -48px -124px
}
55.5555555556% {
background-position: -96px -124px
}
58.3333333333% {
background-position: -144px -124px
}
61.1111111111% {
background-position: -192px -124px
}
63.8888888889% {
background-position: -240px -124px
}
66.6666666667% {
background-position: -288px -124px
}
69.4444444444% {
background-position: -336px -124px
}
72.2222222222% {
background-position: -384px -124px
}
75% {
background-position: 0px -186px
}
77.7777777778% {
background-position: -48px -186px
}
80.5555555556% {
background-position: -96px -186px
}
83.3333333333% {
background-position: -144px -186px
}
86.1111111111% {
background-position: -192px -186px
}
88.8888888889% {
background-position: -240px -186px
}
91.6666666667% {
background-position: -288px -186px
}
94.4444444444% {
background-position: -336px -186px
}
97.2222222222% {
background-position: -384px -186px
}
to {
background-position: -384px -186px
}
}
@media only screen and (max-width: 734px) {
.section-privacy .icon-privacy {
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/privacy_icon__dlw1ars629g2_small.png);
background-size: 432px 248px;
width: 48px;
height: 62px;
animation: unlock_animation-small 3s steps(1) forwards;
animation-play-state: paused;
animation-iteration-count: 1;
animation-duration: 36s;
background-position: 0px 0px
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-privacy .icon-privacy {
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/privacy_icon__dlw1ars629g2_small_2x.png)
}
}
@media only screen and (max-width: 734px) {
html.no-enhance-privacy .section-privacy .icon-privacy {
animation: none;
background-position: -384px -186px
}
}
html.no-enhance-privacy .section-privacy .icon-privacy {
background-position: 0 0
}
.grid-container {
display: grid;
grid-template-columns: 570px 1fr;
grid-template-rows: minmax(265px, -webkit-max-content) 24px minmax(350px, -webkit-max-content);
grid-template-rows: minmax(265px, max-content) 24px minmax(350px, max-content);
padding-bottom: 60px
}
@media only screen and (max-width: 1068px) {
.grid-container {
grid-template-columns: 404px 1fr;
grid-template-rows: minmax(231px, -webkit-max-content) 24px minmax(350px, -webkit-max-content);
grid-template-rows: minmax(231px, max-content) 24px minmax(350px, max-content)
}
}
@media only screen and (max-width: 734px) {
.grid-container {
display: flex;
flex-direction: column;
padding-top: 48px;
padding-bottom: 70px
}
}
.icon {
grid-area: 1/1/1/1;
align-self: flex-end
}
@media only screen and (max-width: 734px) {
.icon {
align-self: flex-start;
margin-bottom: 23px
}
}
.grid-left {
position: relative;
grid-area: 3/1/3/1
}
@media only screen and (max-width: 734px) {
.grid-left {
margin-bottom: .6em
}
}
.grid-right {
grid-area: 3/2/3/2;
margin-top: 7px
}
.grid-cta {
display: block;
margin-top: 1.2em
}
@media only screen and (max-width: 734px) {
.grid-cta {
margin-top: .8em
}
}
.section-environment {
background-color: #f5f5f7;
margin-bottom: 80px
}
@media only screen and (max-width: 1068px) {
.section-environment {
margin-bottom: 30px
}
}
.section-environment .icon-environment {
width: 57px;
height: 69px;
background-size: 57px 69px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/environment_icon__epb71nmm8bau_large.jpg)
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.section-environment .icon-environment {
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/environment_icon__epb71nmm8bau_large_2x.jpg)
}
}
@media only screen and (max-width: 1068px) {
.section-environment .icon-environment {
width: 51px;
height: 62px;
background-size: 51px 62px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/environment_icon__epb71nmm8bau_medium.jpg)
}
}
@media only screen and (max-width: 1068px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px)and (min-resolution: 1.5dppx), only screen and (max-width: 1068px)and (min-resolution: 144dpi) {
.section-environment .icon-environment {
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/environment_icon__epb71nmm8bau_medium_2x.jpg)
}
}
@media only screen and (max-width: 734px) {
.section-environment .icon-environment {
width: 41px;
height: 49px;
background-size: 41px 49px;
background-repeat: no-repeat;
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/environment_icon__epb71nmm8bau_small.jpg)
}
}
@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 734px)and (min-resolution: 1.5dppx), only screen and (max-width: 734px)and (min-resolution: 144dpi) {
.section-environment .icon-environment {
background-image: url(/v/iphone-13-pro/f/images/overview/privacy-environment/environment_icon__epb71nmm8bau_small_2x.jpg)
}
}
.section-environment .grid-headline {
max-width: 6em
}
@media only screen and (max-width: 734px) {
.section-environment .grid-headline {
max-width: 9em
}
}
.section-switch {
display: none
}
.switch-variant-a .section-switch {
display: block;
background-color: #f5f5f7;
margin-top: -60px;
margin-bottom: 80px;
padding-top: 97px;
overflow: hidden
}
@media only screen and (min-width: 735px) {
.switch-variant-a .section-switch {
text-align: center
}
}
@media only screen and (max-width: 1068px) {
.switch-variant-a .section-switch {
margin-top: -8px;
margin-bottom: 1.2em;
padding-top: 109px
}
}
@media only screen and (max-width: 734px) {
.switch-variant-a .section-switch {
padding-top: 80px
}
}
.switch-variant-a .section-switch .headline {
margin-top: 0
}
@media only screen and (min-width: 735px) {
.switch-variant-a .section-switch .headline {
padding-left: .1em;
padding-right: .1em
}
}
.switch-variant-a .section-switch .body {
margin-top: 31px;
margin-bottom: 38px
}
@media only screen and (max-width: 1068px) {
.switch-variant-a .section-switch .body {
margin-top: 24px;
margin-bottom: 50px
}
}
@media only screen and (max-width: 734px) {
.switch-variant-a .section-switch .body {
margin-top: 20px;
margin-bottom: 44px
}
}
.switch-variant-a .section-switch .overview-switch-switch {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1373px;
--p-height: 502px;
position: relative;
left: 50%;
margin-left: -686.5px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.switch-variant-a .section-switch .overview-switch-switch {
--p-width: 971px;
--p-height: 361px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.switch-variant-a .section-switch .overview-switch-switch {
--p-width: 734px;
--p-height: 259px
}
}
@media only screen and (max-width: 1068px) {
.switch-variant-a .section-switch .overview-switch-switch {
left: 50%;
margin-left: -485.5px
}
}
@media only screen and (max-width: 734px) {
.switch-variant-a .section-switch .overview-switch-switch {
left: 50%;
margin-left: -367px
}
}
.section-appleone {
background-color: #f5f5f7;
margin-bottom: 80px;
padding-top: 183px;
padding-bottom: 175px
}
@media only screen and (max-width: 1068px) {
.section-appleone {
margin-bottom: 30px;
padding-top: 98px;
padding-bottom: 113px
}
}
@media only screen and (max-width: 734px) {
.section-appleone {
margin-bottom: 30px;
padding-top: 62px;
padding-bottom: 70px
}
}
.section-appleone .image-appleone {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1027px;
--p-height: 185px;
margin-bottom: 3em;
z-index: 1
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-appleone .image-appleone {
--p-width: 719px;
--p-height: 129px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-appleone .image-appleone {
--p-width: 293px;
--p-height: 180px
}
}
@media only screen and (min-width: 735px) {
.section-appleone .image-appleone {
position: relative;
left: 50%;
margin-left: -513.5px
}
}
@media only screen and (min-width: 735px)and (max-width: 1068px) {
.section-appleone .image-appleone {
left: 50%;
margin-left: -359.5px
}
}
@media only screen and (min-width: 735px)and (max-width: 734px) {
.section-appleone .image-appleone {
left: 50%;
margin-left: -146.5px
}
}
@media only screen and (max-width: 734px) {
.section-appleone .image-appleone {
margin-bottom: 1.6em
}
}
.section-wide {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
overflow: hidden
}
@media only screen and (max-width: 1068px) {
.section-wide {
max-width: 1012px
}
}
@media only screen and (max-width: 734px) {
.section-wide {
max-width: 100%
}
}
.flex-container {
display: flex;
flex-direction: row;
z-index: 2
}
@media only screen and (max-width: 734px) {
.flex-container {
flex-direction: column
}
}
.flex-right {
margin-top: .4em
}
@media only screen and (max-width: 734px) {
.flex-right {
margin-top: 1.5em
}
}
.flex-left {
padding-right: 50px;
width: 520px
}
@media only screen and (max-width: 1068px) {
.flex-left {
padding-right: 40px;
width: 365px
}
}
@media only screen and (max-width: 734px) {
.flex-left {
width: 100%
}
}
.flex-right {
width: 410px
}
@media only screen and (max-width: 1068px) {
.flex-right {
width: 287px
}
}
@media only screen and (max-width: 734px) {
.flex-right {
width: 100%
}
}
.flex-cta {
display: block;
margin-top: 1.2em
}
@media only screen and (max-width: 734px) {
.flex-cta {
margin-top: .8em
}
}
.section-continuity {
background-color: #f5f5f7;
padding-top: 82px;
padding-bottom: 84px
}
@media only screen and (max-width: 1068px) {
.section-continuity {
padding-top: 59px;
padding-bottom: 82px
}
}
@media only screen and (max-width: 734px) {
.section-continuity {
padding-top: 37px;
padding-bottom: 71px
}
}
.section-continuity .image-continuity {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 1018px;
--p-height: 393px;
position: relative;
left: 50%;
margin-left: -509px;
margin-bottom: 1.3em
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-continuity .image-continuity {
--p-width: 726px;
--p-height: 282px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-continuity .image-continuity {
--p-width: 344px;
--p-height: 391px
}
}
@media only screen and (max-width: 1068px) {
.section-continuity .image-continuity {
left: 50%;
margin-left: -363px
}
}
@media only screen and (max-width: 734px) {
.section-continuity .image-continuity {
left: 50%;
margin-left: -192px
}
}
@media only screen and (max-width: 1068px) {
.section-continuity .image-continuity {
margin-bottom: 1.9em
}
}
@media only screen and (max-width: 734px) {
.section-continuity .image-continuity {
margin-bottom: -0.1em
}
}
.section-ar {
overflow: hidden;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
background-color: #fff
}
.section-ar .ar-intro {
margin-top: 0;
text-align: center
}
.section-ar .ar-gallery {
position: relative;
padding-top: 95px;
padding-left: 0;
padding-right: 0;
grid-row-gap: 0;
grid-column-gap: 0;
background-color: #f5f5f7
}
@media only screen and (max-width: 1068px) {
.section-ar .ar-gallery {
padding-top: 65px
}
}
@media only screen and (max-width: 734px) {
.section-ar .ar-gallery {
padding-top: 30px;
text-align: center
}
}
.section-ar .section-content {
position: relative
}
.section-ar .grid {
grid-row-gap: 0;
grid-column-gap: 0;
padding-left: 0;
padding-right: 0
}
.section-ar .grid-item-hardware {
display: flex;
justify-content: center;
align-items: flex-end
}
@media only screen and (max-width: 734px) {
.section-ar .grid-item-hardware {
grid-row-start: 2;
margin-top: 30px
}
}
.section-ar .gallery-items-container {
width: 411px;
height: 546px;
position: relative
}
@media only screen and (max-width: 1068px) {
.section-ar .gallery-items-container {
width: 360px
}
}
@media only screen and (max-width: 734px) {
.section-ar .gallery-items-container {
width: 277px
}
}
@media only screen and (max-width: 1068px) {
.section-ar .gallery-items-container {
height: 437px
}
}
@media only screen and (max-width: 734px) {
.section-ar .gallery-items-container {
height: 389px
}
}
.section-ar .gallery-item {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.section-ar .gallery-item[class*=green], html.enhance-ar .section-ar .gallery-item {
display: block
}
.section-ar .grid-item-quicklook {
grid-column-start: 8;
grid-column-end: 13
}
@media only screen and (max-width: 734px) {
.section-ar .grid-item-quicklook {
grid-column: span 12
}
}
.section-ar .icon-ar {
width: var(--p-width);
height: var(--p-height);
display: block;
margin-top: 70px;
margin-bottom: 21px
}
@media only screen and (max-width: 1068px) {
.section-ar .icon-ar {
margin-top: 38px;
margin-bottom: 25px
}
}
@media only screen and (max-width: 734px) {
.section-ar .icon-ar {
margin: 0 auto 6px
}
}
.section-ar .icon-ar img {
height: 58px
}
@media only screen and (max-width: 734px) {
.section-ar .icon-ar img {
height: 38px
}
}
.section-ar .quicklook-supported {
display: none
}
html.quicklook .section-ar .quicklook-supported {
display: block
}
@media only screen and (max-width: 1068px) {
.section-ar .quicklook-supported {
margin-bottom: 30px
}
}
@media only screen and (max-width: 734px) {
.section-ar .quicklook-supported {
margin-bottom: 0
}
}
html.quicklook .section-ar .quicklook-not-supported {
display: none
}
.section-ar .quicklook-subhead {
margin-left: auto;
margin-right: auto
}
@media only screen and (max-width: 734px) {
.section-ar .quicklook-subhead {
max-width: 9em
}
}
@media only screen and (max-width: 734px) {
.section-ar .not-supported-copy {
max-width: 18em;
margin-right: auto;
margin-left: auto
}
}
.section-ar .quicklook-cta {
margin-top: .6em
}
@media only screen and (max-width: 1068px) {
.section-ar .quicklook-cta {
margin-top: .8em
}
}
html.enhance-ar .section-ar .quicklook-cta.quicklook-cta-iphone-13-pro {
margin-top: 0
}
.section-ar .colornav-items {
display: none;
align-items: center;
height: 105px;
padding-top: 0
}
@media only screen and (max-width: 1068px) {
.section-ar .colornav-items {
height: 100px
}
}
@media only screen and (max-width: 734px) {
.section-ar .colornav-items {
justify-content: center;
height: 95px
}
}
html.enhance-ar .section-ar .colornav-items {
display: flex
}
.section-ar .colornav-link {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
padding: 0;
margin-bottom: 1em
}
.section-ar .colornav-swatch {
width: 26px;
height: 26px
}
.section-ar .image-hardware {
position: absolute;
bottom: 0
}
.section-ar .image-hardware-sierra-blue {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 411px;
--p-height: 546px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-ar .image-hardware-sierra-blue {
--p-width: 360px;
--p-height: 437px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-ar .image-hardware-sierra-blue {
--p-width: 277px;
--p-height: 389px
}
}
.section-ar .image-hardware-silver {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 411px;
--p-height: 546px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-ar .image-hardware-silver {
--p-width: 360px;
--p-height: 437px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-ar .image-hardware-silver {
--p-width: 277px;
--p-height: 389px
}
}
.section-ar .image-hardware-gold {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 411px;
--p-height: 546px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-ar .image-hardware-gold {
--p-width: 360px;
--p-height: 437px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-ar .image-hardware-gold {
--p-width: 277px;
--p-height: 389px
}
}
.section-ar .image-hardware-graphite {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 411px;
--p-height: 546px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-ar .image-hardware-graphite {
--p-width: 360px;
--p-height: 437px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-ar .image-hardware-graphite {
--p-width: 277px;
--p-height: 389px
}
}
.section-ar .image-hardware-alpine-green {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 411px;
--p-height: 546px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-ar .image-hardware-alpine-green {
--p-width: 360px;
--p-height: 437px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-ar .image-hardware-alpine-green {
--p-width: 277px;
--p-height: 389px
}
}
.section-accessories {
overflow: hidden;
text-align: center
}
.section-accessories .grid {
max-width: 1040px
}
@media only screen and (max-width: 734px) {
.section-accessories .grid {
padding-left: 0;
padding-right: 0
}
}
.section-accessories .grid-item {
overflow: hidden;
padding-top: 55px;
background-color: #f5f5f7
}
@media only screen and (max-width: 1068px) {
.section-accessories .grid-item {
padding-top: 58px
}
}
@media only screen and (max-width: 734px) {
.section-accessories .grid-item {
padding-top: 35px
}
}
.section-accessories .grid-item.airpods-pro, .section-accessories .grid-item.airtag {
min-height: 450px
}
@media only screen and (max-width: 1068px) {
.section-accessories .grid-item.airpods-pro, .section-accessories .grid-item.airtag {
min-height: 445px
}
}
@media only screen and (max-width: 734px) {
.section-accessories .grid-item.airpods-pro, .section-accessories .grid-item.airtag {
min-height: auto
}
}
.section-accessories .accessory-copy-container {
max-width: 18em;
padding-left: .5em;
padding-right: .5em;
margin-left: auto;
margin-right: auto
}
.section-accessories .links-inline {
margin-top: .8em
}
@media only screen and (max-width: 734px) {
.section-accessories .airpods-pro .accessory-copy-container {
max-width: 17em
}
}
@media only screen and (max-width: 734px) {
.section-accessories .magsafe .accessory-copy-container {
max-width: 15em
}
}
.section-accessories .image-airpods-pro {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 392px;
--p-height: 178px;
position: relative;
left: 50%;
margin-left: -196px;
margin-top: 37px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-accessories .image-airpods-pro {
--p-width: 314px;
--p-height: 142px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-accessories .image-airpods-pro {
--p-width: 290px;
--p-height: 133px
}
}
@media only screen and (max-width: 1068px) {
.section-accessories .image-airpods-pro {
left: 50%;
margin-left: -157px
}
}
@media only screen and (max-width: 734px) {
.section-accessories .image-airpods-pro {
left: 50%;
margin-left: -145px
}
}
@media only screen and (max-width: 1068px) {
.section-accessories .image-airpods-pro {
margin-top: 54px
}
}
@media only screen and (max-width: 734px) {
.section-accessories .image-airpods-pro {
margin-top: 50px;
margin-bottom: 55px
}
}
.section-accessories .image-airtag {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 172px;
--p-height: 173px;
position: relative;
left: 50%;
margin-left: -86px;
margin-top: 28px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-accessories .image-airtag {
--p-width: 158px;
--p-height: 158px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-accessories .image-airtag {
--p-width: 182px;
--p-height: 182px
}
}
@media only screen and (max-width: 1068px) {
.section-accessories .image-airtag {
left: 50%;
margin-left: -79px
}
}
@media only screen and (max-width: 734px) {
.section-accessories .image-airtag {
left: 50%;
margin-left: -91px
}
}
@media only screen and (max-width: 1068px) {
.section-accessories .image-airtag {
margin-top: 36px
}
}
@media only screen and (max-width: 734px) {
.section-accessories .image-airtag {
margin-top: 50px;
margin-bottom: 55px
}
}
.section-accessories .image-magsafe {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 849px;
--p-height: 455px;
position: relative;
left: 50%;
margin-left: -424.5px;
margin-top: 62px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-accessories .image-magsafe {
--p-width: 691px;
--p-height: 370px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-accessories .image-magsafe {
--p-width: 506px;
--p-height: 251px
}
}
@media only screen and (max-width: 1068px) {
.section-accessories .image-magsafe {
left: 50%;
margin-left: -345.5px
}
}
@media only screen and (max-width: 734px) {
.section-accessories .image-magsafe {
left: 50%;
margin-left: -253px
}
}
@media only screen and (max-width: 1068px) {
.section-accessories .image-magsafe {
margin-top: 46px
}
}
@media only screen and (max-width: 734px) {
.section-accessories .image-magsafe {
margin-top: 36px
}
}
.section-accessories .cta-all-accessories {
margin-top: 36px
}
@media only screen and (max-width: 734px) {
.section-accessories .cta-all-accessories {
margin-top: 38px
}
}
.section-ways-to-buy {
text-align: center;
background-color: #fff
}
.section-ways-to-buy .buystrip-hero {
background-color: #f5f5f7
}
.section-ways-to-buy .carrier-offers {
max-width: 1440px;
padding-top: 98px;
padding-bottom: 95px;
margin-bottom: 95px;
margin-left: auto;
margin-right: auto;
background-color: #f5f5f7
}
@media only screen and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers {
padding-top: 65px;
padding-bottom: 66px;
margin-bottom: 30px
}
}
@media only screen and (max-width: 734px) {
.section-ways-to-buy .carrier-offers {
padding-top: 50px;
padding-bottom: 48px
}
}
.section-ways-to-buy .carrier-offers .carriers-subhead {
margin-top: .4em
}
.section-ways-to-buy .carrier-offers .grid {
margin-top: 0;
padding-left: 0;
padding-right: 0
}
@media only screen and (max-width: 734px) {
.section-ways-to-buy .carrier-offers .grid {
padding-left: 0;
padding-right: 0;
margin-top: 43px
}
}
.section-ways-to-buy .carrier-offers .grid-item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-top: 40px
}
@media only screen and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers .grid-item {
margin-top: 50px
}
}
@media only screen and (max-width: 734px) {
.section-ways-to-buy .carrier-offers .grid-item {
margin-top: 21px
}
}
@media only screen and (min-width: 1069px) {
.section-ways-to-buy .carrier-offers .grid-item-att {
grid-area: 1/1/1/4
}
}
@media only screen and (min-width: 1069px) {
.section-ways-to-buy .carrier-offers .grid-item-tmobile-sprint {
grid-area: 1/5/1/9
}
}
@media only screen and (min-width: 1069px) {
.section-ways-to-buy .carrier-offers .grid-item-verizon {
grid-area: 1/10/1/13
}
}
@media only screen and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers .grid-item-verizon {
margin-top: 47px
}
}
@media only screen and (max-width: 734px) {
.section-ways-to-buy .carrier-offers .grid-item-verizon {
margin-top: 33px
}
}
.section-ways-to-buy .carrier-offers .logo-att {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 126px;
--p-height: 53px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers .logo-att {
--p-width: 122px;
--p-height: 52px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-ways-to-buy .carrier-offers .logo-att {
--p-width: 102px;
--p-height: 43px
}
}
.section-ways-to-buy .carrier-offers .logo-tmobile-sprint {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 219px;
--p-height: 58px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers .logo-tmobile-sprint {
--p-width: 219px;
--p-height: 58px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-ways-to-buy .carrier-offers .logo-tmobile-sprint {
--p-width: 208px;
--p-height: 56px
}
}
.section-ways-to-buy .carrier-offers .logo-verizon {
display: block;
width: var(--p-width);
height: var(--p-height);
--p-width: 119px;
--p-height: 28px;
margin-top: 11px
}
@media only screen and (max-width: 1068px)and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers .logo-verizon {
--p-width: 117px;
--p-height: 28px
}
}
@media only screen and (max-width: 734px)and (max-width: 734px) {
.section-ways-to-buy .carrier-offers .logo-verizon {
--p-width: 98px;
--p-height: 23px
}
}
@media only screen and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers .logo-verizon {
margin-top: unset
}
}
.section-ways-to-buy .carrier-offers .offer {
margin-top: 27px;
color: #1d1d1f
}
@media only screen and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers .offer {
margin-top: 35px
}
}
@media only screen and (max-width: 734px) {
.section-ways-to-buy .carrier-offers .offer {
margin-top: 19px
}
}
.section-ways-to-buy .carrier-offers .shop-button {
margin-top: 60px;
margin-bottom: 50px
}
@media only screen and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers .shop-button {
margin-top: 56px;
margin-bottom: 47px
}
}
@media only screen and (max-width: 734px) {
.section-ways-to-buy .carrier-offers .shop-button {
margin-top: 60px;
margin-bottom: 52px
}
}
@media only screen and (max-width: 1068px) {
.section-ways-to-buy .carrier-offers .help-link {
display: block
}
}
.main {
position: relative;
font-size: 19px;
line-height: 1.2105263158;
font-weight: 600;
}
.main:lang(ja) {
line-height: 1.2631578947;
}
.main:lang(ko) {
line-height: 1.3157894737;
}
.main:lang(th) {
line-height: 1.3684410526;
}
.main:lang(ar) {
}
.main:lang(zh-CN) {
}
.main:lang(zh-HK) {
}
.main:lang(zh-MO) {
}
.main:lang(zh-TW) {
}
@media only screen and (max-width: 734px) {
.main {
font-size: 17px;
line-height: 1.2353641176;
}
.main:lang(ar) {
letter-spacing: 0em;
}
.main:lang(ja) {
letter-spacing: 0em;
}
.main:lang(ko) {
line-height: 1.3529611765;
}
.main:lang(ko), .main:lang(th), .main:lang(zh) {
letter-spacing: 0em
}
.main:lang(th) {
line-height: 1.3529611765;
}
.main:lang(zh-CN) {
}
.main:lang(zh-HK) {
}
.main:lang(zh-MO) {
}
.main:lang(zh-TW) {
}
}
.main .typography-weight-normal, .main .typography-weight-normal a, .main .typography-weight-normal p {
font-weight: 400
}
.main .typography-cta-shared {
font-weight: 500
}
.main dd:not([class*=typography]), .main li:not([class*=typography]), .main p:not([class*=typography]) {
color: #6e6e73
}
.main .theme-dark dd:not([class*=typography]), .main .theme-dark li:not([class*=typography]), .main .theme-dark p:not([class*=typography]) {
color: #86868b
}
.main strong {
color: #1d1d1f
}
.main ul:not([class*=offset]) {
margin-left: 0
}
.main li {
list-style-type: none
}
.main .visibility-hidden {
visibility: hidden
}
#ac-globalfooter .ac-gf-buystrip {
border-top: 1px solid #ccc
}
#footnote-1 p:first-of-type {
display: inline
}
.theme-dark strong {
color: #fff
}