/* PHOTOGRAPHY HOW TO */

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    padding: 0
}

ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, hgroup, p, blockquote, figure,
form, fieldset, input, legend, pre, abbr, button {
    margin: 0;
    padding: 0
}

pre, code, address, caption, th, figcaption {
    font-size: 1em;
    font-weight: normal;
    font-style: normal
}

fieldset, iframe, img {
    border: 0
}

caption, th {
    text-align: left
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

article, aside, footer, header, nav, main, section, summary, details,
hgroup, figure, figcaption {
    display: block
}

audio, canvas, video, progress {
    display: inline-block;
    vertical-align: baseline
}

button {
    background: none;
    border: 0;
    box-sizing: content-box;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    overflow: visible;
    vertical-align: inherit
}

button:disabled {
    cursor: default
}

:focus {
    outline: 3px solid #c1e0fe;
    outline: 3px solid rgba(131, 192, 253, 0.5);
    outline-offset: 1px
}

:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select),
:focus[data-focus-method="touch"]:not(input):not(textarea):not(select) {
    outline: none
}

::-moz-focus-inner {
    border: 0;
    padding: 0
}

@media print {
    body, #main, #content {
        color: #000
    }

    a, a:link, a:visited {
        color: #000;
        text-decoration: none
    }

    #globalheader, #globalfooter, #directorynav, #tabs, .noprint, .hide {
        display: none
    }
}

html {
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 106.25%;
    quotes: "“" "”"
}

body {
    font-size: 17px;
    line-height: 1.52947;
    font-weight: 400;
    letter-spacing: -.021em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    background-color: #fff;
    color: #333;
    font-style: normal
}

body, input, textarea, select, button {
    font-synthesis: none;
    -moz-font-feature-settings: 'kern';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    direction: ltr;
    text-align: left
}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
    display: block;
    margin: 0
}

h1 + * , h2 + * , h3 + * , h4 + * , h5 + * , h6 + * {
    margin-top: .75em
}

h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, h2 + h1, h2 + h2, h2 + h3, h2 + h4,
h2 + h5, h2 + h6, h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, h4 + h1, h4 + h2, h4 + h3,
h4 + h4, h4 + h5, h4 + h6, h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, h6 + h1, h6 + h2,
h6 + h3, h6 + h4, h6 + h5, h6 + h6 {
    margin-top: 0
}

p + h1, ul + h1, ol + h1, p + h2, ul + h2, ol + h2, p + h3, ul + h3, ol + h3, p + h4, ul + h4,
ol + h4, p + h5, ul + h5, ol + h5, p + h6, ul + h6, ol + h6 {
    margin-top: 1.4em
}

p + * , ul + * , ol + * {
    margin-top: .7em
}

ul, ol {
    margin-left: 1.17647em
}

ul ul, ul ol, ol ul, ol ol {
    margin-top: 0;
    margin-bottom: 0
}

nav ul, nav ol {
    margin: 0;
    list-style: none
}

li li {
    font-size: 1em
}

a {
    color: #0070c9
}

a:link, a:visited {
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

a:active {
    text-decoration: none
}

p + a {
    display: inline-block
}

.links-inline, .links-stacked {
    margin-left: 0;
    margin-right: 0;
    list-style: none
}

.links-inline li {
    display: inline;
    margin: 0 0.8em
}

.links-inline li:first-child {
    margin-left: 0
}

.links-inline li:last-child {
    margin-right: 0
}

.links-stacked li + li {
    margin-top: .3em
}

b, strong {
    font-weight: 700
}

em, i, cite, dfn {
    font-style: italic
}

sup {
    font-size: .6em;
    vertical-align: top;
    position: relative;
    bottom: -.2em
}

h1 sup, h2 sup, h3 sup {
    font-size: .4em
}

sup a {
    vertical-align: inherit;
    color: inherit
}

sup a:hover {
    color: #0070c9;
    text-decoration: none
}

sub {
    line-height: 1
}

abbr {
    border: 0
}

:lang(ja), :lang(ko), :lang(th), :lang(zh) {
    font-style: normal
}

:lang(ko) {
    word-break: keep-all
}

.selfclear:before, .selfclear:after {
    content: ' ';
    display: table
}

.selfclear:after {
    clear: both
}

.visuallyhidden {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    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
}

.nowrap {
    display: inline-block;
    text-decoration: inherit;
    white-space: nowrap
}

.clear {
    clear: both
}

.cursor-grab {
    cursor: move;
    cursor: grab
}

.cursor-grabbing {
    cursor: move;
    cursor: grabbing
}

.row {
    position: relative;
    z-index: 1
}

.row:before, .row:after {
    content: ' ';
    display: table
}

.row:after {
    clear: both
}

.column {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    float: left;
    min-height: 2px
}

.large-offset-0 {
    margin-left: 0
}

.large-push-0 {
    left: auto;
    right: auto
}

.large-pull-0 {
    right: auto;
    left: auto
}

.large-1 {
    width: 8.33333%
}

.large-offset-1 {
    margin-left: 8.33333%
}

.large-push-1 {
    left: 8.33333%;
    right: auto
}

.large-pull-1 {
    right: 8.33333%;
    left: auto
}

.large-2 {
    width: 16.66667%
}

.large-offset-2 {
    margin-left: 16.66667%
}

.large-push-2 {
    left: 16.66667%;
    right: auto
}

.large-pull-2 {
    right: 16.66667%;
    left: auto
}

.large-3 {
    width: 25%
}

.large-offset-3 {
    margin-left: 25%
}

.large-push-3 {
    left: 25%;
    right: auto
}

.large-pull-3 {
    right: 25%;
    left: auto
}

.large-4 {
    width: 33.33333%
}

.large-offset-4 {
    margin-left: 33.33333%
}

.large-push-4 {
    left: 33.33333%;
    right: auto
}

.large-pull-4 {
    right: 33.33333%;
    left: auto
}

.large-5 {
    width: 41.66667%
}

.large-offset-5 {
    margin-left: 41.66667%
}

.large-push-5 {
    left: 41.66667%;
    right: auto
}

.large-pull-5 {
    right: 41.66667%;
    left: auto
}

.large-6 {
    width: 50%
}

.large-offset-6 {
    margin-left: 50%
}

.large-push-6 {
    left: 50%;
    right: auto
}

.large-pull-6 {
    right: 50%;
    left: auto
}

.large-7 {
    width: 58.33333%
}

.large-offset-7 {
    margin-left: 58.33333%
}

.large-push-7 {
    left: 58.33333%;
    right: auto
}

.large-pull-7 {
    right: 58.33333%;
    left: auto
}

.large-8 {
    width: 66.66667%
}

.large-offset-8 {
    margin-left: 66.66667%
}

.large-push-8 {
    left: 66.66667%;
    right: auto
}

.large-pull-8 {
    right: 66.66667%;
    left: auto
}

.large-9 {
    width: 75%
}

.large-offset-9 {
    margin-left: 75%
}

.large-push-9 {
    left: 75%;
    right: auto
}

.large-pull-9 {
    right: 75%;
    left: auto
}

.large-10 {
    width: 83.33333%
}

.large-offset-10 {
    margin-left: 83.33333%
}

.large-push-10 {
    left: 83.33333%;
    right: auto
}

.large-pull-10 {
    right: 83.33333%;
    left: auto
}

.large-11 {
    width: 91.66667%
}

.large-offset-11 {
    margin-left: 91.66667%
}

.large-push-11 {
    left: 91.66667%;
    right: auto
}

.large-pull-11 {
    right: 91.66667%;
    left: auto
}

.large-12 {
    width: 100%
}

.large-offset-12 {
    margin-left: 100%
}

.large-push-12 {
    left: 100%;
    right: auto
}

.large-pull-12 {
    right: 100%;
    left: auto
}

.large-centered {
    margin-left: auto;
    margin-right: auto;
    float: none
}

.large-uncentered {
    margin-left: 0;
    margin-right: 0
}

.large-last {
    float: right
}

.large-notlast {
    float: left
}

@media only screen and (min-width: 1442px) {
    .xlarge-offset-0 {
        margin-left: 0
    }

    .xlarge-push-0 {
        left: auto;
        right: auto
    }

    .xlarge-pull-0 {
        right: auto;
        left: auto
    }

    .xlarge-1 {
        width: 8.33333%
    }

    .xlarge-offset-1 {
        margin-left: 8.33333%
    }

    .xlarge-push-1 {
        left: 8.33333%;
        right: auto
    }

    .xlarge-pull-1 {
        right: 8.33333%;
        left: auto
    }

    .xlarge-2 {
        width: 16.66667%
    }

    .xlarge-offset-2 {
        margin-left: 16.66667%
    }

    .xlarge-push-2 {
        left: 16.66667%;
        right: auto
    }

    .xlarge-pull-2 {
        right: 16.66667%;
        left: auto
    }

    .xlarge-3 {
        width: 25%
    }

    .xlarge-offset-3 {
        margin-left: 25%
    }

    .xlarge-push-3 {
        left: 25%;
        right: auto
    }

    .xlarge-pull-3 {
        right: 25%;
        left: auto
    }

    .xlarge-4 {
        width: 33.33333%
    }

    .xlarge-offset-4 {
        margin-left: 33.33333%
    }

    .xlarge-push-4 {
        left: 33.33333%;
        right: auto
    }

    .xlarge-pull-4 {
        right: 33.33333%;
        left: auto
    }

    .xlarge-5 {
        width: 41.66667%
    }

    .xlarge-offset-5 {
        margin-left: 41.66667%
    }

    .xlarge-push-5 {
        left: 41.66667%;
        right: auto
    }

    .xlarge-pull-5 {
        right: 41.66667%;
        left: auto
    }

    .xlarge-6 {
        width: 50%
    }

    .xlarge-offset-6 {
        margin-left: 50%
    }

    .xlarge-push-6 {
        left: 50%;
        right: auto
    }

    .xlarge-pull-6 {
        right: 50%;
        left: auto
    }

    .xlarge-7 {
        width: 58.33333%
    }

    .xlarge-offset-7 {
        margin-left: 58.33333%
    }

    .xlarge-push-7 {
        left: 58.33333%;
        right: auto
    }

    .xlarge-pull-7 {
        right: 58.33333%;
        left: auto
    }

    .xlarge-8 {
        width: 66.66667%
    }

    .xlarge-offset-8 {
        margin-left: 66.66667%
    }

    .xlarge-push-8 {
        left: 66.66667%;
        right: auto
    }

    .xlarge-pull-8 {
        right: 66.66667%;
        left: auto
    }

    .xlarge-9 {
        width: 75%
    }

    .xlarge-offset-9 {
        margin-left: 75%
    }

    .xlarge-push-9 {
        left: 75%;
        right: auto
    }

    .xlarge-pull-9 {
        right: 75%;
        left: auto
    }

    .xlarge-10 {
        width: 83.33333%
    }

    .xlarge-offset-10 {
        margin-left: 83.33333%
    }

    .xlarge-push-10 {
        left: 83.33333%;
        right: auto
    }

    .xlarge-pull-10 {
        right: 83.33333%;
        left: auto
    }

    .xlarge-11 {
        width: 91.66667%
    }

    .xlarge-offset-11 {
        margin-left: 91.66667%
    }

    .xlarge-push-11 {
        left: 91.66667%;
        right: auto
    }

    .xlarge-pull-11 {
        right: 91.66667%;
        left: auto
    }

    .xlarge-12 {
        width: 100%
    }

    .xlarge-offset-12 {
        margin-left: 100%
    }

    .xlarge-push-12 {
        left: 100%;
        right: auto
    }

    .xlarge-pull-12 {
        right: 100%;
        left: auto
    }

    .xlarge-centered {
        margin-left: auto;
        margin-right: auto;
        float: none
    }

    .xlarge-uncentered {
        margin-left: 0;
        margin-right: 0
    }

    .xlarge-last {
        float: right
    }

    .xlarge-notlast {
        float: left
    }
}

@media only screen and (max-width: 1068px) {
    .medium-offset-0 {
        margin-left: 0
    }

    .medium-push-0 {
        left: auto;
        right: auto
    }

    .medium-pull-0 {
        right: auto;
        left: auto
    }

    .medium-1 {
        width: 8.33333%
    }

    .medium-offset-1 {
        margin-left: 8.33333%
    }

    .medium-push-1 {
        left: 8.33333%;
        right: auto
    }

    .medium-pull-1 {
        right: 8.33333%;
        left: auto
    }

    .medium-2 {
        width: 16.66667%
    }

    .medium-offset-2 {
        margin-left: 16.66667%
    }

    .medium-push-2 {
        left: 16.66667%;
        right: auto
    }

    .medium-pull-2 {
        right: 16.66667%;
        left: auto
    }

    .medium-3 {
        width: 25%
    }

    .medium-offset-3 {
        margin-left: 25%
    }

    .medium-push-3 {
        left: 25%;
        right: auto
    }

    .medium-pull-3 {
        right: 25%;
        left: auto
    }

    .medium-4 {
        width: 33.33333%
    }

    .medium-offset-4 {
        margin-left: 33.33333%
    }

    .medium-push-4 {
        left: 33.33333%;
        right: auto
    }

    .medium-pull-4 {
        right: 33.33333%;
        left: auto
    }

    .medium-5 {
        width: 41.66667%
    }

    .medium-offset-5 {
        margin-left: 41.66667%
    }

    .medium-push-5 {
        left: 41.66667%;
        right: auto
    }

    .medium-pull-5 {
        right: 41.66667%;
        left: auto
    }

    .medium-6 {
        width: 50%
    }

    .medium-offset-6 {
        margin-left: 50%
    }

    .medium-push-6 {
        left: 50%;
        right: auto
    }

    .medium-pull-6 {
        right: 50%;
        left: auto
    }

    .medium-7 {
        width: 58.33333%
    }

    .medium-offset-7 {
        margin-left: 58.33333%
    }

    .medium-push-7 {
        left: 58.33333%;
        right: auto
    }

    .medium-pull-7 {
        right: 58.33333%;
        left: auto
    }

    .medium-8 {
        width: 66.66667%
    }

    .medium-offset-8 {
        margin-left: 66.66667%
    }

    .medium-push-8 {
        left: 66.66667%;
        right: auto
    }

    .medium-pull-8 {
        right: 66.66667%;
        left: auto
    }

    .medium-9 {
        width: 75%
    }

    .medium-offset-9 {
        margin-left: 75%
    }

    .medium-push-9 {
        left: 75%;
        right: auto
    }

    .medium-pull-9 {
        right: 75%;
        left: auto
    }

    .medium-10 {
        width: 83.33333%
    }

    .medium-offset-10 {
        margin-left: 83.33333%
    }

    .medium-push-10 {
        left: 83.33333%;
        right: auto
    }

    .medium-pull-10 {
        right: 83.33333%;
        left: auto
    }

    .medium-11 {
        width: 91.66667%
    }

    .medium-offset-11 {
        margin-left: 91.66667%
    }

    .medium-push-11 {
        left: 91.66667%;
        right: auto
    }

    .medium-pull-11 {
        right: 91.66667%;
        left: auto
    }

    .medium-12 {
        width: 100%
    }

    .medium-offset-12 {
        margin-left: 100%
    }

    .medium-push-12 {
        left: 100%;
        right: auto
    }

    .medium-pull-12 {
        right: 100%;
        left: auto
    }

    .medium-centered {
        margin-left: auto;
        margin-right: auto;
        float: none
    }

    .medium-uncentered {
        margin-left: 0;
        margin-right: 0
    }

    .medium-last {
        float: right
    }

    .medium-notlast {
        float: left
    }
}

@media only screen and (max-width: 735px) {
    .small-offset-0 {
        margin-left: 0
    }

    .small-push-0 {
        left: auto;
        right: auto
    }

    .small-pull-0 {
        right: auto;
        left: auto
    }

    .small-1 {
        width: 8.33333%
    }

    .small-offset-1 {
        margin-left: 8.33333%
    }

    .small-push-1 {
        left: 8.33333%;
        right: auto
    }

    .small-pull-1 {
        right: 8.33333%;
        left: auto
    }

    .small-2 {
        width: 16.66667%
    }

    .small-offset-2 {
        margin-left: 16.66667%
    }

    .small-push-2 {
        left: 16.66667%;
        right: auto
    }

    .small-pull-2 {
        right: 16.66667%;
        left: auto
    }

    .small-3 {
        width: 25%
    }

    .small-offset-3 {
        margin-left: 25%
    }

    .small-push-3 {
        left: 25%;
        right: auto
    }

    .small-pull-3 {
        right: 25%;
        left: auto
    }

    .small-4 {
        width: 33.33333%
    }

    .small-offset-4 {
        margin-left: 33.33333%
    }

    .small-push-4 {
        left: 33.33333%;
        right: auto
    }

    .small-pull-4 {
        right: 33.33333%;
        left: auto
    }

    .small-5 {
        width: 41.66667%
    }

    .small-offset-5 {
        margin-left: 41.66667%
    }

    .small-push-5 {
        left: 41.66667%;
        right: auto
    }

    .small-pull-5 {
        right: 41.66667%;
        left: auto
    }

    .small-6 {
        width: 50%
    }

    .small-offset-6 {
        margin-left: 50%
    }

    .small-push-6 {
        left: 50%;
        right: auto
    }

    .small-pull-6 {
        right: 50%;
        left: auto
    }

    .small-7 {
        width: 58.33333%
    }

    .small-offset-7 {
        margin-left: 58.33333%
    }

    .small-push-7 {
        left: 58.33333%;
        right: auto
    }

    .small-pull-7 {
        right: 58.33333%;
        left: auto
    }

    .small-8 {
        width: 66.66667%
    }

    .small-offset-8 {
        margin-left: 66.66667%
    }

    .small-push-8 {
        left: 66.66667%;
        right: auto
    }

    .small-pull-8 {
        right: 66.66667%;
        left: auto
    }

    .small-9 {
        width: 75%
    }

    .small-offset-9 {
        margin-left: 75%
    }

    .small-push-9 {
        left: 75%;
        right: auto
    }

    .small-pull-9 {
        right: 75%;
        left: auto
    }

    .small-10 {
        width: 83.33333%
    }

    .small-offset-10 {
        margin-left: 83.33333%
    }

    .small-push-10 {
        left: 83.33333%;
        right: auto
    }

    .small-pull-10 {
        right: 83.33333%;
        left: auto
    }

    .small-11 {
        width: 91.66667%
    }

    .small-offset-11 {
        margin-left: 91.66667%
    }

    .small-push-11 {
        left: 91.66667%;
        right: auto
    }

    .small-pull-11 {
        right: 91.66667%;
        left: auto
    }

    .small-12 {
        width: 100%
    }

    .small-offset-12 {
        margin-left: 100%
    }

    .small-push-12 {
        left: 100%;
        right: auto
    }

    .small-pull-12 {
        right: 100%;
        left: auto
    }

    .small-centered {
        margin-left: auto;
        margin-right: auto;
        float: none
    }

    .small-uncentered {
        margin-left: 0;
        margin-right: 0
    }

    .small-last {
        float: right
    }

    .small-notlast {
        float: left
    }
}

.icon:before, .icon:after, .more:before, .more:after {
    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: ''
}

.icon:before, .icon:after, .more:before, .more:after {
    text-decoration: none
}

.icon:before, .more:before {
    display: none
}

.icon-after:after, .more:after {
    padding-left: .3em;
    top: 0
}

.icon-before:before {
    padding-right: .3em;
    display: inline-block;
    top: 0
}

.icon-before:after {
    display: none
}

.icon-apple:before, .icon-apple:after {
    content: ""
}

.icon-chevrondown:before, .icon-chevrondown:after {
    content: ""
}

.icon-chevrondowncircle:before, .icon-chevrondowncircle:after {
    content: ""
}

.icon-chevronleft:before, .icon-chevronleft:after {
    content: ""
}

.icon-chevronleftcircle:before, .icon-chevronleftcircle:after {
    content: ""
}

.icon-chevronright:before, .icon-chevronright:after {
    content: ""
}

.icon-chevronrightcircle:before, .icon-chevronrightcircle:after {
    content: ""
}

.icon-chevronup:before, .icon-chevronup:after {
    content: ""
}

.icon-chevronupcircle:before, .icon-chevronupcircle:after {
    content: ""
}

.icon-downloadcircle:before, .icon-downloadcircle:after {
    content: ""
}

.icon-external:before, .icon-external:after {
    content: ""
}

.icon-share:before, .icon-share:after {
    content: ""
}

.icon-pausecircle:before, .icon-pausecircle:after {
    content: ""
}

.icon-playcircle:before, .icon-playcircle:after {
    content: ""
}

.icon-replay:before, .icon-replay:after {
    content: ""
}

.icon-stopcircle:before, .icon-stopcircle:after {
    content: ""
}

.icon-circle:before, .icon-circle:after {
    content: ""
}

.icon-check:before, .icon-check:after {
    content: ""
}

.icon-checkcircle:before, .icon-checkcircle:after {
    content: ""
}

.icon-checksolid:before, .icon-checksolid:after {
    content: ""
}

.icon-reset:before, .icon-reset:after {
    content: ""
}

.icon-resetcircle:before, .icon-resetcircle:after {
    content: ""
}

.icon-resetsolid:before, .icon-resetsolid:after {
    content: ""
}

.icon-exclamation:before, .icon-exclamation:after {
    content: ""
}

.icon-exclamationcircle:before, .icon-exclamationcircle:after {
    content: ""
}

.icon-exclamationsolid:before, .icon-exclamationsolid:after {
    content: ""
}

.icon-infocircle:before, .icon-infocircle:after {
    content: ""
}

.icon-question:before, .icon-question:after {
    content: ""
}

.icon-questioncircle:before, .icon-questioncircle:after {
    content: ""
}

.icon-questionsolid:before, .icon-questionsolid:after {
    content: ""
}

.icon-plus:before, .icon-plus:after {
    content: ""
}

.icon-pluscircle:before, .icon-pluscircle:after {
    content: ""
}

.icon-plussolid:before, .icon-plussolid:after {
    content: ""
}

.icon-minus:before, .icon-minus:after {
    content: ""
}

.icon-minuscircle:before, .icon-minuscircle:after {
    content: ""
}

.icon-minussolid:before, .icon-minussolid:after {
    content: ""
}

.icon-1circle:before, .icon-1circle:after {
    content: ""
}

.icon-2circle:before, .icon-2circle:after {
    content: ""
}

.icon-3circle:before, .icon-3circle:after {
    content: ""
}

.icon-4circle:before, .icon-4circle:after {
    content: ""
}

.icon-5circle:before, .icon-5circle:after {
    content: ""
}

.icon-6circle:before, .icon-6circle:after {
    content: ""
}

.icon-7circle:before, .icon-7circle:after {
    content: ""
}

.icon-8circle:before, .icon-8circle:after {
    content: ""
}

.icon-9circle:before, .icon-9circle:after {
    content: ""
}

.icon-10circle:before, .icon-10circle:after {
    content: ""
}

.icon-11circle:before, .icon-11circle:after {
    content: ""
}

.icon-12circle:before, .icon-12circle:after {
    content: ""
}

.icon-13circle:before, .icon-13circle:after {
    content: ""
}

.icon-14circle:before, .icon-14circle:after {
    content: ""
}

.icon-15circle:before, .icon-15circle:after {
    content: ""
}

.icon-16circle:before, .icon-16circle:after {
    content: ""
}

.icon-17circle:before, .icon-17circle:after {
    content: ""
}

.icon-18circle:before, .icon-18circle:after {
    content: ""
}

.icon-19circle:before, .icon-19circle:after {
    content: ""
}

.icon-20circle:before, .icon-20circle:after {
    content: ""
}

.icon-close:before, .icon-close:after {
    content: ""
}

.icon-closecompact:before, .icon-closecompact:after {
    content: ""
}

.icon-paddleleft:before, .icon-paddleleft:after {
    content: ""
}

.icon-paddleleftcompact:before, .icon-paddleleftcompact:after {
    content: ""
}

.icon-paddleright:before, .icon-paddleright:after {
    content: ""
}

.icon-paddlerightcompact:before, .icon-paddlerightcompact:after {
    content: ""
}

.icon-paddleup:before, .icon-paddleup:after {
    content: ""
}

.icon-paddleupcompact:before, .icon-paddleupcompact:after {
    content: ""
}

.icon-paddledown:before, .icon-paddledown:after {
    content: ""
}

.icon-paddledowncompact:before, .icon-paddledowncompact:after {
    content: ""
}

.icon-thumbnailreplay:before, .icon-thumbnailreplay:after {
    content: ""
}

.icon-thumbnailpause:before, .icon-thumbnailpause:after {
    content: ""
}

.icon-thumbnailplay:before, .icon-thumbnailplay:after {
    content: ""
}

.more:before, .more:after {
    content: ""
}

.more-block {
    margin-top: .5em
}

body {
    min-width: 320px
}

.large-hide {
    display: none
}

.large-show {
    display: block
}

.large-show-inline {
    display: inline
}

.large-show-inlineblock {
    display: inline-block
}

@media only screen and (min-width: 1442px) {
    .xlarge-hide {
        display: none
    }

    .xlarge-show {
        display: block
    }

    .xlarge-show-inline {
        display: inline
    }

    .xlarge-show-inlineblock {
        display: inline-block
    }
}

@media only screen and (max-width: 1068px) {
    .medium-hide {
        display: none
    }

    .medium-show {
        display: block
    }

    .medium-show-inline {
        display: inline
    }

    .medium-show-inlineblock {
        display: inline-block
    }
}

@media only screen and (max-width: 735px) {
    .small-hide {
        display: none
    }

    .small-show {
        display: block
    }

    .small-show-inline {
        display: inline
    }

    .small-show-inlineblock {
        display: inline-block
    }
}

.chapternav {
    background: rgba(242, 242, 242, 0.7);
    overflow: hidden;
    padding: 0;
    padding-top: 11px;
    padding-bottom: 12px;
    position: relative;
    text-align: center;
    width: 100%;
    height: 86px;
    z-index: 9987
}

@supports (backdrop-filter: initial) {
    .chapternav {
        backdrop-filter: saturate(180%) blur(20px);
        background: rgba(242, 242, 242, 0.6)
    }
}

.ac-nav-overlap .chapternav, .chapternav-overlap .chapternav {
    position: absolute;
    top: 0;
    left: 0
}

.ac-nav-overlap .chapternav {
    margin-top: 44px
}

@media only screen and (max-width: 767px) {
    .ac-nav-overlap .chapternav {
        margin-top: 48px
    }
}

.theme-dark .chapternav, .chapternav.theme-dark {
    background: rgba(51, 51, 51, 0.7)
}

@supports (backdrop-filter: initial) {
    .theme-dark .chapternav, .chapternav.theme-dark {
        background: rgba(51, 51, 51, 0.6)
    }
}

.chapternav-wrapper {
    position: relative;
    height: 100%;
    z-index: 1
}

.chapternav-items {
    list-style: none;
    margin: 0 34px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 50px;
    white-space: nowrap
}

@media only screen and (orientation: landscape) {
    .chapternav-items {
        padding-bottom: 49px
    }
}

html.touch .chapternav-items {
    margin: 0;
    padding-left: 34px;
    padding-right: 34px
}

.chapternav-item {
    display: inline-block;
    vertical-align: top;
    margin: 0 -.11765em;
    padding: 0 20px
}

.chapternav-item:first-child {
    margin-left: 0;
    padding-left: 0
}

.chapternav-item:last-child {
    margin-right: 0;
    padding-right: 0
}

.chapternav-icon {
    background: center bottom no-repeat;
    display: block;
    margin: 0 auto 6px;
    height: 54px
}

.chapternav-label {
    font-size: 11px;
    line-height: 1.09091;
    font-weight: 400;
    letter-spacing: .005em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    display: block;
    margin: 0
}

.chapternav-label:lang(ar) {
    font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-label:lang(ja) {
    font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-label:lang(ko) {
    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
}

.chapternav-label:lang(th) {
    font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-label:lang(zh-CN) {
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-label:lang(zh-HK) {
    font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-label:lang(zh-MO) {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-label:lang(zh-TW) {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-new {
    font-size: 9px;
    line-height: 1.22226;
    font-weight: 400;
    letter-spacing: .017em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #e85d00;
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%
}

.chapternav-new:lang(ar) {
    font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-new:lang(ja) {
    font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-new:lang(ko) {
    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
}

.chapternav-new:lang(th) {
    font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-new:lang(zh-CN) {
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-new:lang(zh-HK) {
    font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-new:lang(zh-MO) {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-new:lang(zh-TW) {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.theme-dark .chapternav-new {
    color: #f46c0e
}

.chapternav-link {
    color: #333;
    display: block;
    margin-top: 3px;
    padding: 0;
    position: relative;
    z-index: 1
}

.chapternav-link:hover {
    color: #0070c9;
    text-decoration: none
}

.chapternav-link:focus {
    outline-offset: 0
}

.chapternav-link.current {
    color: #333;
    cursor: default;
    opacity: .6
}

.theme-dark .chapternav-link {
    color: #fff
}

.theme-dark .chapternav-link:hover {
    color: #6bf
}

.theme-dark .chapternav-link.current {
    color: #fff
}

@-webkit-keyframes chapternav-slidein {
    0% {
        opacity: 0
    }

    1% {
        -webkit-transform: translateX(160px);
        transform: translateX(160px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes chapternav-slidein {
    0% {
        opacity: 0
    }

    1% {
        -webkit-transform: translateX(160px);
        transform: translateX(160px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.chapternav-item {
    -webkit-animation: chapternav-slidein 350ms backwards;
    animation: chapternav-slidein 350ms backwards
}

html.touch .chapternav-paddles {
    display: none
}

.chapternav-paddle {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    border: 0 solid rgba(51, 51, 51, 0.2);
    color: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    text-align: center;
    width: 33px;
    -webkit-transition: opacity 150ms ease-out;
    transition: opacity 150ms ease-out
}

.chapternav-paddle:lang(ar) {
    font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-paddle: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
}

.chapternav-paddle:lang(ko) {
    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
}

.chapternav-paddle:lang(th) {
    font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-paddle:lang(zh-CN) {
    font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-paddle:lang(zh-HK) {
    font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-paddle:lang(zh-MO) {
    font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-paddle:lang(zh-TW) {
    font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.chapternav-paddle:after {
    opacity: .8;
    -webkit-transition: opacity 200ms linear;
    transition: opacity 200ms linear
}

.chapternav-paddle:disabled {
    opacity: 0
}

.chapternav-paddle:hover:after {
    opacity: 1
}

.chapternav-paddle:focus {
    outline: none
}

.chapternav-paddle:focus:after {
    outline: 3px solid #c1e0fe;
    outline: 3px solid rgba(131, 192, 253, 0.5);
    outline-offset: 4px;
    opacity: 1
}

.chapternav-paddle:focus:after[data-focus-method="mouse"]:not(input):not(textarea):not(select),
.chapternav-paddle:focus:after[data-focus-method="touch"]:not(input):not(textarea):not(select) {
    outline: none
}

.chapternav-paddle:active {
    outline: none
}

.chapternav-paddle:active:after {
    outline: none;
    opacity: 1
}

.theme-dark .chapternav-paddle {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff
}

.chapternav-paddle-left {
    border-right-width: 1px;
    left: 0
}

.chapternav-paddle-left:before, .chapternav-paddle-left:after {
    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: ''
}

.chapternav-paddle-left:before, .chapternav-paddle-left:after {
    text-decoration: none
}

.chapternav-paddle-left:before {
    display: none
}

.chapternav-paddle-left:before, .chapternav-paddle-left:after {
    content: ""
}

.chapternav-paddle-left:after {
    margin-left: 8px
}

.chapternav-paddle-right {
    border-left-width: 1px;
    right: 0
}

.chapternav-paddle-right:before, .chapternav-paddle-right:after {
    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: ''
}

.chapternav-paddle-right:before, .chapternav-paddle-right:after {
    text-decoration: none
}

.chapternav-paddle-right:before {
    display: none
}

.chapternav-paddle-right:before, .chapternav-paddle-right:after {
    content: ""
}

.chapternav-paddle-right:after {
    margin-right: 8px
}

a.block {
    display: block;
    color: inherit;
    cursor: pointer;
    text-decoration: none
}

a.block:before, a.block:after {
    content: ' ';
    display: table
}

a.block:after {
    clear: both
}

a.block:hover {
    text-decoration: none
}

a.block:hover .block-link {
    text-decoration: underline
}

a.block:hover .block-link.icon-ie-parent {
    text-decoration: none
}

a.block:hover .block-link.icon-ie-parent .icon-ie-link {
    text-decoration: underline
}

.block-link {
    color: #0070c9;
    cursor: pointer
}

a.block-inline {
    display: inline-block
}

.button {
    font-size: 17px;
    line-height: 1.52947;
    font-weight: 400;
    letter-spacing: -.021em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    background-color: #0070c9;
    background: -webkit-linear-gradient(#42a1ec, #0070c9);
    background: linear-gradient(#42a1ec, #0070c9);
    border-color: #07c;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    min-width: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 3px;
    padding-bottom: 4px;
    text-align: center;
    white-space: nowrap
}

.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
}

.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
}

.button: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
}

.button:lang(th) {
    letter-spacing: 0em;
    font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button:lang(zh) {
    letter-spacing: 0em
}

.button:lang(zh-CN) {
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button:lang(zh-HK) {
    font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button:lang(zh-MO) {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button:lang(zh-TW) {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button:hover {
    background-color: #147bcd;
    background: -webkit-linear-gradient(#51a9ee, #147bcd);
    background: linear-gradient(#51a9ee, #147bcd);
    border-color: #1482d0;
    text-decoration: none
}

.button:focus {
    box-shadow: 0 0 0 3px rgba(131, 192, 253, 0.5);
    outline: none
}

.button:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select),
.button:focus[data-focus-method="touch"]:not(input):not(textarea):not(select) {
    box-shadow: none
}

.button:active {
    background-color: #0067b9;
    background: -webkit-linear-gradient(#3d94d9, #0067b9);
    background: linear-gradient(#3d94d9, #0067b9);
    border-color: #006dbc;
    outline: none
}

.button:disabled, .button.disabled {
    background-color: #0070c9;
    background: -webkit-linear-gradient(#42a1ec, #0070c9);
    background: linear-gradient(#42a1ec, #0070c9);
    border-color: #07c;
    color: #fff;
    cursor: default;
    opacity: .3
}

.button-compact {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    min-width: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 1px
}

.button-compact:lang(ar) {
    font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button-compact:lang(ja) {
    font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button-compact:lang(ko) {
    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
}

.button-compact:lang(th) {
    font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button-compact:lang(zh-CN) {
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button-compact:lang(zh-HK) {
    font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button-compact:lang(zh-MO) {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button-compact:lang(zh-TW) {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.button-block {
    box-sizing: border-box;
    display: block;
    width: 100%
}

.button-secondary {
    background-color: #e3e3e3;
    background: -webkit-linear-gradient(#fff, #e3e3e3);
    background: linear-gradient(#fff, #e3e3e3);
    border-color: #d6d6d6;
    color: #0070c9
}

.button-secondary:hover {
    background-color: #eee;
    background: -webkit-linear-gradient(#fff, #eee);
    background: linear-gradient(#fff, #eee);
    border-color: #d9d9d9
}

.button-secondary:active {
    background-color: #dcdcdc;
    background: -webkit-linear-gradient(#f7f7f7, #dcdcdc);
    background: linear-gradient(#f7f7f7, #dcdcdc);
    border-color: #d0d0d0
}

.button-secondary:disabled, .button-secondary.disabled {
    background-color: #e3e3e3;
    background: -webkit-linear-gradient(#fff, #e3e3e3);
    background: linear-gradient(#fff, #e3e3e3);
    border-color: #d6d6d6;
    color: #0070c9
}

.sosumi {
    font-size: 11px;
    line-height: 1.45455;
    font-weight: 400;
    letter-spacing: .005em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #888
}

.sosumi:lang(ar) {
    font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.sosumi:lang(ja) {
    font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.sosumi:lang(ko) {
    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
}

.sosumi:lang(th) {
    font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.sosumi:lang(zh-CN) {
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.sosumi:lang(zh-HK) {
    font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.sosumi:lang(zh-MO) {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.sosumi:lang(zh-TW) {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.sosumi * {
    margin: 0;
    padding: 0
}

.sosumi a {
    color: #555
}

.sosumi ul {
    list-style: none
}

.sosumi ol {
    list-style: decimal outside;
    padding-left: 1.33333em;
    padding-right: 1.33333em
}

.sosumi li, .sosumi p {
    padding-bottom: .41667em
}

.sosumi small {
    font-size: 1em
}

.sosumi > :last-child {
    margin-bottom: -.41667em
}

.align-middle {
    float: none;
    display: inline-block;
    vertical-align: middle
}

.align-bottom {
    float: none;
    display: inline-block;
    vertical-align: bottom
}

@media only screen and (max-width: 735px) {
    .desktop, .except-small {
        display: none
    }
}

.medium-only {
    display: none
}

@media only screen and (max-width: 1068px) {
    .medium-only {
        display: block
    }
}

@media only screen and (max-width: 735px) {
    .medium-only {
        display: none
    }
}

.small-only {
    display: none
}

@media only screen and (max-width: 735px) {
    .small-only {
        display: block
    }
}

.fp-pagetitle {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    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
}

.fp-section-content {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    height: 100%;
    text-align: center
}

@media only screen and (min-width: 1442px) {
    .fp-section-content {
        margin-left: auto;
        margin-right: auto;
        width: 980px
    }
}

@media only screen and (max-width: 1068px) {
    .fp-section-content {
        margin-left: auto;
        margin-right: auto;
        width: 692px
    }
}

@media only screen and (max-width: 735px) {
    .fp-section-content {
        margin-left: auto;
        margin-right: auto;
        width: 87.5%
    }
}

.fp-block-link {
    display: block
}

@media only screen and (max-width: 735px) {
    .fp-small-block-link {
        display: block;
        margin-bottom: 16px
    }
}

.fp-secondary-headline {
    margin-bottom: .33333em;
    text-align: center
}

.fp-secondary-subheadline {
    text-align: center
}

.fp-moreblock .more {
    margin-left: 10px;
    margin-right: 10px
}

.fp-moreblock-left:before, .fp-moreblock-left:after {
    content: ' ';
    display: table
}

.fp-moreblock-left:after {
    clear: both
}

.fp-moreblock-left .more {
    float: left;
    clear: both;
    margin-right: 0;
    margin-left: 0
}

.fp-shopstrip-content {
    margin-bottom: 80px;
    text-align: center
}

@media only screen and (max-width: 1068px) {
    .fp-shopstrip-content {
        margin-bottom: 70px
    }
}

@media only screen and (max-width: 735px) {
    .fp-shopstrip-content {
        margin-bottom: 36px
    }
}

.fp-shopstrip-icon-headline {
    display: block
}

.fp-shopstrip-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px
}

.fp-shopstrip-headline {
    font-size: 19px;
    line-height: 1.26316;
    font-weight: 500;
    letter-spacing: .018em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    margin-bottom: 12px;
    margin-top: .47368em
}

.fp-shopstrip-headline:lang(ar) {
    line-height: 1.47384;
    font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.fp-shopstrip-headline:lang(th) {
    line-height: 1.47384;
    font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.fp-shopstrip-headline: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
}

.fp-shopstrip-headline:lang(ko) {
    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
}

.fp-shopstrip-headline:lang(zh-CN) {
    font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.fp-shopstrip-headline:lang(zh-HK) {
    font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.fp-shopstrip-headline:lang(zh-MO) {
    font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.fp-shopstrip-headline:lang(zh-TW) {
    font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.fp-shopstrip-copy {
    margin: 0
}

.fp-shopstrip-more {
    margin: 0
}

.fp-billboard {
    position: relative;
    z-index: 1;
    margin-bottom: 7px
}

.fp-billboard, .fp-billboard a {
    color: #fff
}

.fp-billboard-image {
    position: relative;
    background-size: cover !important;
    background-position: center top
}

.fp-billboard-image::before {
    content: "";
    display: block;
    padding-bottom: 41.66667%
}

.fp-billboard-image-noscale::before {
    display: none
}

.fp-billboard-wrapper {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.fp-billboard-content {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1
}

.fp-billboard-headline, .fp-billboard-subheadline {
    margin-bottom: .25em
}

.fp-billboard-copy, .fp-billboard-moreblock .more {
    margin-bottom: .27778em
}

.fp-billboard-moreblock {
    display: block
}

.fp-billboard-left {
    text-align: left
}

.fp-billboard-center {
    text-align: center
}

.fp-billboard-center .fp-billboard-content {
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.fp-billboard-center .fp-billboard-headline, .fp-billboard-center .fp-billboard-copy {
    margin-left: auto;
    margin-right: auto
}

.fp-billboard-right {
    text-align: left
}

@media only screen and (max-width: 735px) {
    .fp-billboard-inline-small .fp-billboard-wrapper {
        position: relative
    }

    .fp-billboard-inline-small .fp-billboard-content {
        position: relative;
        top: auto;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        padding-top: 25px;
        padding-bottom: 32px;
        color: #333;
        text-align: left
    }

    .fp-billboard .fp-billboard-inline-small {
        color: #333
    }

    .fp-billboard-inline-small .more {
        margin-left: 0;
        margin-right: 0;
        color: #0070c9
    }
}

.chapternav-item-ipad-pro .chapternav-icon {
    background-size: 40px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipadpro_light_large.svg");
    width: 40px
}

html.no-svg .chapternav-item-ipad-pro .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipadpro_light_large.png")
}

.theme-dark .chapternav-item-ipad-pro .chapternav-icon {
    background-size: 40px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipadpro_dark_large.svg");
    width: 40px
}

html.no-svg .theme-dark .chapternav-item-ipad-pro .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipadpro_dark_large.png")
}

.chapternav-item-ipad .chapternav-icon {
    background-size: 28px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_large.svg");
    width: 28px
}

html.no-svg .chapternav-item-ipad .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_large.png")
}

.theme-dark .chapternav-item-ipad .chapternav-icon {
    background-size: 28px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_dark_large.svg");
    width: 28px
}

html.no-svg .theme-dark .chapternav-item-ipad .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_dark_large.png")
}

.chapternav-item-ipad-mini-4 .chapternav-icon {
    background-size: 22px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipadmini_large.svg");
    width: 22px
}

html.no-svg .chapternav-item-ipad-mini-4 .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipadmini_large.png")
}

.theme-dark .chapternav-item-ipad-mini-4 .chapternav-icon {
    background-size: 22px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipadmini_dark_large.svg");
    width: 22px
}

html.no-svg .theme-dark .chapternav-item-ipad-mini-4 .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipadmini_dark_large.png")
}

.chapternav-item-ios .chapternav-icon {
    background-size: 32px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_ios10_large.svg");
    width: 32px
}

html.no-svg .chapternav-item-ios .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_ios10_large.png")
}

.theme-dark .chapternav-item-ios .chapternav-icon {
    background-size: 32px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_ios10_dark_large.svg");
    width: 32px
}

html.no-svg .theme-dark .chapternav-item-ios .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_ios10_dark_large.png")
}

.chapternav-item-accessories .chapternav-icon {
    background-size: 33px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_acc_large.svg");
    width: 33px
}

html.no-svg .chapternav-item-accessories .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_acc_large.png")
}

.theme-dark .chapternav-item-accessories .chapternav-icon {
    background-size: 33px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_acc_dark_large.svg");
    width: 33px
}

html.no-svg .theme-dark .chapternav-item-accessories .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_acc_dark_large.png")
}

.chapternav-item-compare .chapternav-icon {
    background-size: 47px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_comp_large.svg");
    width: 47px
}

html.no-svg .chapternav-item-compare .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_comp_large.png")
}

.theme-dark .chapternav-item-compare .chapternav-icon {
    background-size: 47px 54px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_comp_dark_large.svg");
    width: 47px
}

html.no-svg .theme-dark .chapternav-item-compare .chapternav-icon {
    background-image: url("/v/ipad/home/af/images/home/familybrowser/ipad_comp_dark_large.png")
}

.chapternav-item-ipad-pro .chapternav-icon {
    width: 40px
}

.chapternav-item-ipad-mini-4 .chapternav-icon, .chapternav-item-ios .chapternav-icon {
    width: 32px
}

.chapternav-item-accessories .chapternav-icon {
    width: 33px
}

.chapternav-item-compare .chapternav-icon {
    width: 47px
}

body:focus {
    outline: none
}

.chapternav-icon {
    margin-bottom: 6px
}

@keyframes chapternav-slidein {
    0% {
        opacity: 0
    }

    1% {
        -webkit-transform: translateX(160px);
        transform: translateX(160px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.chapternav-item {
    -webkit-animation: chapternav-slidein 350ms backwards;
    animation: chapternav-slidein 350ms backwards
}

.background-alt {
    background-color: #fafafa
}

.background-alt-2 {
    background-color: #f2f2f2
}

.fp-product, .fp-hero {
    overflow: hidden
}

.large-section .more, .large-section .icon {
    color: #0070c9;
    font-size: 22px;
    line-height: 1.45455;
    font-weight: 300;
    letter-spacing: .016em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.large-section .more:lang(ar), .large-section .icon:lang(ar) {
    font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.large-section .more:lang(ja), .large-section .icon: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
}

.large-section .more:lang(ko), .large-section .icon:lang(ko) {
    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
}

.large-section .more:lang(th), .large-section .icon:lang(th) {
    font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.large-section .more:lang(zh-CN), .large-section .icon:lang(zh-CN) {
    font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.large-section .more:lang(zh-HK), .large-section .icon:lang(zh-HK) {
    font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.large-section .more:lang(zh-MO), .large-section .icon:lang(zh-MO) {
    font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.large-section .more:lang(zh-TW), .large-section .icon: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) {
    .large-section .more, .large-section .icon {
        font-size: 20px;
        line-height: 1.5;
        font-weight: 300;
        letter-spacing: .017em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(ar), .large-section .icon:lang(ar) {
        font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(ja), .large-section .icon: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
    }

    .large-section .more:lang(ko), .large-section .icon:lang(ko) {
        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
    }

    .large-section .more:lang(th), .large-section .icon:lang(th) {
        font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(zh-CN), .large-section .icon:lang(zh-CN) {
        font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(zh-HK), .large-section .icon:lang(zh-HK) {
        font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(zh-MO), .large-section .icon:lang(zh-MO) {
        font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(zh-TW), .large-section .icon: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: 735px) {
    .large-section .more, .large-section .icon {
        font-size: 19px;
        line-height: 1.47384;
        font-weight: 300;
        letter-spacing: .018em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(ar), .large-section .icon:lang(ar) {
        font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(ja), .large-section .icon: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
    }

    .large-section .more:lang(ko), .large-section .icon:lang(ko) {
        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
    }

    .large-section .more:lang(th), .large-section .icon:lang(th) {
        font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(zh-CN), .large-section .icon:lang(zh-CN) {
        font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(zh-HK), .large-section .icon:lang(zh-HK) {
        font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(zh-MO), .large-section .icon:lang(zh-MO) {
        font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }

    .large-section .more:lang(zh-TW), .large-section .icon:lang(zh-TW) {
        font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

.more, .icon {
    margin-left: 10px;
    margin-right: 10px
}

/* PHOTOGRAPHY HOW TO END*/


/* IPHONE  */

.typography-headline-reduced {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

@media only screen and (max-width: 1068px) {
    .typography-headline-reduced {
        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
    }
}


@media only screen and (max-width: 735px) {
    .typography-headline-reduced {
        font-size: 27px;
        line-height: 1.14815;
        font-weight: 600;
        letter-spacing: .008em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

.typography-headline-reduced + p, .typography-headline-reduced + ul,
.typography-intro-product-reduced + p, .typography-intro-product-reduced + ul {
    margin-top: 1em
}

.typography-headline + .typography-intro, .typography-intro-product + .typography-intro {
    margin-top: 1.2em
}

.typography-headline-elevated + .typography-intro-elevated, .typography-intro-product-elevated + .typography-intro-elevated {
    margin-top: 1.4em
}

.typography-headline-super + .typography-intro-elevated, .typography-intro-product-super + .typography-intro-elevated {
    margin-top: 1.6em
}

.typography-headline, .typography-headline-super, .typography-headline-elevated,
.typography-headline-reduced, .typography-eyebrow-product-reduced,
.typography-eyebrow, .typography-intro, .typography-intro-elevated,
.typography .eligibility-copy {
    color: #111
}

.dark-theme .typography-headline, .dark-theme .typography-headline-super,
.dark-theme .typography-headline-elevated, .dark-theme .typography-headline-reduced,
.dark-theme .typography-eyebrow-product-reduced, .dark-theme .typography-eyebrow,
.dark-theme .typography-intro, .dark-theme .typography-intro-elevated,
.dark-theme .typography .eligibility-copy {
    color: #fff
}

.typography-eyebrow-product-reduced {
    font-weight: 500
}

.typography-headline + .typography-headline-reduced {
    margin-top: .15em
}

.typography-headline-reduced + .typography-intro {
    margin-top: .75em
}

.fp-shopstrip-headline, .fp-shopstrip-copy {
    color: #111;
    font-size: 21px;
    line-height: 1.38105;
    font-weight: 400;
    letter-spacing: .011em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

.section a.more {
    font-size: 21px;
    line-height: 1.38105;
    font-weight: 400;
    letter-spacing: .011em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

@media only screen and (max-width: 1068px) {
    .section a.more {
        font-size: 19px;
        line-height: 1.42115;
        font-weight: 400;
        letter-spacing: .012em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

@media only screen and (max-width: 735px) {
    .section a.more {
        font-size: 18px;
        line-height: 1.4446;
        font-weight: 400;
        letter-spacing: .016em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

.section {
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: #fafafa;
    max-width: 1350px;
    margin: 45px auto
}

@media only screen and (max-width: 1068px) {
    .section {
        max-width: 736px;
        margin: 23px auto
    }
}

@media only screen and (max-width: 735px) {
    .section {
        max-width: 736px;
        margin: 30px auto
    }
}

.section a.more {
    display: inline-block;
    margin: .75em .6em 0
}

.section a.cta-alt-spacing {
    margin-top: 18px
}

@media only screen and (max-width: 1068px) {
    .section a.cta-alt-spacing {
        margin-top: 15px
    }
}

.section-content {
    margin-left: auto;
    margin-right: auto;
    width: 980px
}

@media only screen and (min-width: 1442px) {
    .section-content {
        margin-left: auto;
        margin-right: auto;
        width: 980px
    }
}

@media only screen and (max-width: 1068px) {
    .section-content {
        margin-left: auto;
        margin-right: auto;
        width: 692px
    }
}

@media only screen and (max-width: 735px) {
    .section-content {
        margin-left: auto;
        margin-right: auto;
        width: 87.5%
    }
}

.main-copy {
    position: relative;
    z-index: 1
}

sup * {
    vertical-align: inherit
}

.pagetitle {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    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
}

@media only screen and (max-width: 735px) {
    .small-max-width {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto
    }
}

@media only screen and (max-width: 735px) {
    .small-max-width.fp-shopstrip-content {
        float: none
    }
}

#viewport-emitter {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    visibility: hidden;
    z-index: -1;
    x-content: "large"
}

#viewport-emitter::before {
    content: "large"
}

@media only screen and (min-width: 1442px) {
    #viewport-emitter {
        x-content: "xlarge"
    }

    #viewport-emitter::before {
        content: "xlarge"
    }
}

@media only screen and (max-width: 1068px) {
    #viewport-emitter {
        x-content: "medium"
    }

    #viewport-emitter::before {
        content: "medium"
    }
}

@media only screen and (max-width: 735px) {
    #viewport-emitter {
        x-content: "small"
    }

    #viewport-emitter::before {
        content: "small"
    }
}

.typography-body {
    font-size: 17px;
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}


/* IPHONE END */

/* IPHONE 8  */

.portrait-examples .portrait-caption {
    margin-top: 26px;
    max-width: 450px
}

@media only screen and (max-width: 1068px) {
    .portrait-examples .portrait-caption {
        max-width: 319px
    }
}

@media only screen and (max-width: 735px) {
    .portrait-examples .portrait-caption {
        max-width: 358px
    }
}
/* IPHONE 8 END */

/* IPAD */
.section-playground {
    margin: 0 auto 45px;
    max-width: 1350px;
    position: relative;
    height: 497px
}

@media only screen and (max-width: 1068px) {
    .section-playground {
        height: 400px
    }
}

@media only screen and (max-width: 735px) {
    .section-playground {
        height: 455px
    }
}

@media only screen and (max-width: 1068px) {
    .section-playground {
        margin: 0 25px 25px
    }

    .section-playground .headline-safe-area-inset {
        padding-left: 22px;
        padding-right: 22px
    }
}

@media only screen and (max-width: 735px) {
    .section-playground {
        padding-top: 60px;
        padding-bottom: 0;
        margin: 0 auto 20px
    }
}

.section-playground .fp-secondary-headline {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px
}

@media only screen and (max-width: 735px) {
    .section-playground .learn-more-link {
        margin-bottom: 30px
    }
}

.section-playground .ipad-apps-playgrounds {
    padding-left: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: auto
}

@media only screen and (max-width: 735px) {
    .section-playground .ipad-apps-playgrounds {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        padding-left: 0
    }
}

.section-playground .ipad-apps-playgrounds-text {
    margin-left: 80px;
    pointer-events: none;
    z-index: 10
}

@media only screen and (max-width: 735px) {
    .section-playground .ipad-apps-playgrounds-text {
        margin-left: auto;
        margin-right: auto
    }
}

.section-playground .ipad-apps-playgrounds-text .more {
    pointer-events: all;
    z-index: 100
}

.section-playground .ipad-apps-playgrounds-copy {
    width: 14em;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 735px) {
    .section-playground .ipad-apps-playgrounds-copy {
        width: 70%
    }
}

@media only screen and (max-width: 1068px) {
    .section-playground .ipad-apps-playgrounds-image {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.section-playground .ipad-apps-playgrounds .ipad-apps-content {
    background-color: #fafafa
}

.section-playground .ipad-apps-playgrounds .image-swift-icon {
    width: 66px;
    height: 66px;
    background-size: 66px 66px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/icon_swift_large.png");
    left: 50%;
    margin-left: -33px;
    position: relative
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .section-playground .ipad-apps-playgrounds .image-swift-icon {
        background-image: url("/v/ipad/home/af/images/home/icon_swift_large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-playground .ipad-apps-playgrounds .image-swift-icon {
        width: 72px;
        height: 72px;
        background-size: 72px 72px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/icon_swift_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-playground .ipad-apps-playgrounds .image-swift-icon {
        background-image: url("/v/ipad/home/af/images/home/icon_swift_medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .section-playground .ipad-apps-playgrounds .image-swift-icon {
        width: 69px;
        height: 69px;
        background-size: 69px 69px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/icon_swift_small.png")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .section-playground .ipad-apps-playgrounds .image-swift-icon {
        background-image: url("/v/ipad/home/af/images/home/icon_swift_small_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-playground .ipad-apps-playgrounds .image-swift-icon {
        left: 50%;
        margin-left: -36px;
        position: relative
    }
}

@media only screen and (max-width: 735px) {
    .section-playground .ipad-apps-playgrounds .image-swift-icon {
        left: 50%;
        margin-left: -34.5px;
        position: relative
    }
}

.section-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
    width: 491px;
    height: 352px;
    background-size: 491px 352px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/ipad_playgrounds_large.png");
    left: 50%;
    margin-left: -245.5px;
    position: relative;
    left: 50%;
    bottom: 0;
    z-index: 1;
    margin-left: -245.5px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .section-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
        background-image: url("/v/ipad/home/af/images/home/ipad_playgrounds_large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
        width: 294px;
        height: 211px;
        background-size: 294px 211px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/ipad_playgrounds_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-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
        background-image: url("/v/ipad/home/af/images/home/ipad_playgrounds_medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .section-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
        width: 282px;
        height: 149px;
        background-size: 282px 149px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/ipad_playgrounds_small.png")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .section-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
        background-image: url("/v/ipad/home/af/images/home/ipad_playgrounds_small_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
        left: 50%;
        margin-left: -147px;
        position: relative
    }
}

@media only screen and (max-width: 735px) {
    .section-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
        left: 50%;
        margin-left: -141px;
        position: relative
    }
}

@media only screen and (max-width: 735px) {
    .section-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
        position: relative
    }
}

@media only screen and (max-width: 1068px) {
    .section-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
        margin-left: -100px
    }
}

@media only screen and (max-width: 735px) {
    .section-playground .ipad-apps-playgrounds .image-ipad-playgrounds {
        margin-left: -141px
    }
}

.section-headline {
    font-size: 48px;
    line-height: 1.08365;
    font-weight: 600;
    letter-spacing: -.003em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

@media only screen and (max-width: 1068px) {
    .section-headline {
        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
    }
}

@media only screen and (max-width: 735px) {
    .section-headline {
        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
    }
}

.fp-hero {
    padding-top: 90px;
    color: #333;
    display: block;
    margin-top: 18px;
    margin-bottom: 7px
}

@media only screen and (max-width: 1068px) {
    .fp-hero {
        padding-top: 80px
    }
}

@media only screen and (max-width: 735px) {
    .fp-hero {
        padding-top: 80px;
        padding-bottom: 88px
    }
}

.fp-hero .tagline-reduced {
    margin-top: 5px;
    margin-bottom: 20px
}

.fp-hero [data-promo-type] {
    visibility: hidden !important
}

.fp-hero .hero {
    display: block
}

.fp-hero .image-hero {
    width: 969px;
    height: 410px;
    background-size: 969px 410px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/hero_large.jpg")
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .fp-hero .image-hero {
        background-image: url("/v/ipad/home/af/images/home/hero_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .fp-hero .image-hero {
        width: 646px;
        height: 302px;
        background-size: 646px 302px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/hero_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) {
    .fp-hero .image-hero {
        background-image: url("/v/ipad/home/af/images/home/hero_medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .fp-hero .image-hero {
        width: 238px;
        height: 473px;
        background-size: 238px 473px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/hero_small.jpg")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .fp-hero .image-hero {
        background-image: url("/v/ipad/home/af/images/home/hero_small_2x.jpg")
    }
}

.fp-hero .fp-hero-image {
    width: 100%;
    margin-top: 72px;
    min-height: 0;
    background-position: center top
}

@media only screen and (max-width: 1068px) {
    .fp-hero .fp-hero-image {
        margin-top: 95px;
        margin-left: auto;
        width: 100%
    }
}

@media only screen and (max-width: 735px) {
    .fp-hero .fp-hero-image {
        margin-top: 71px;
        padding-left: 60px;
        width: 100%
    }
}

.fp-hero .fp-hero-image:before {
    padding-bottom: 0
}

.fp-hero .fp-product-moreblock {
    display: block;
    margin-top: 13px
}

.fp-hero .fp-product-moreblock .more, .fp-hero .fp-product-moreblock .icon {
    color: #0070c9;
    font-size: 22px;
    line-height: 1.45455;
    font-weight: 300;
    letter-spacing: .016em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

@media only screen and (max-width: 1068px) {
    .fp-hero .fp-product-moreblock .more, .fp-hero .fp-product-moreblock .icon {
        font-size: 20px;
        line-height: 1.5;
        font-weight: 300;
        letter-spacing: .017em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
    
}

@media only screen and (max-width: 735px) {
    .fp-hero .fp-product-moreblock .more, .fp-hero .fp-product-moreblock .icon {
        font-size: 19px;
        line-height: 1.47384;
        font-weight: 300;
        letter-spacing: .018em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

@media only screen and (max-width: 735px) {
    .fp-hero .fp-product-moreblock .more, .fp-hero .fp-product-moreblock .icon {
        display: block
    }
}

.fp-hero .tagline-reduced, .section-ipad-pro .tagline-reduced {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: .006em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

@media only screen and (max-width: 1068px) {
    .fp-hero .tagline-reduced, .section-ipad-pro .tagline-reduced {
        font-size: 34px;
        line-height: 1.08824;
        font-weight: 600;
        letter-spacing: .006em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

@media only screen and (max-width: 735px) {
    .fp-hero .tagline-reduced, .section-ipad-pro .tagline-reduced {
        font-size: 28px;
        line-height: 1.14286;
        font-weight: 600;
        letter-spacing: .007em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

.product-elevated {
    font-size: 72px;
    line-height: .83381;
    font-weight: 600;
    letter-spacing: -.005em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

@media only screen and (max-width: 1068px) {
    .product-elevated {
        font-size: 56px;
        line-height: 1.07143;
        font-weight: 600;
        letter-spacing: .006em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

@media only screen and (max-width: 735px) {
    .product-elevated {
        font-size: 45px;
        line-height: .97778;
        font-weight: 600;
        letter-spacing: .009em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

.tagline-reduced {
    font-size: 48px;
    line-height: 1.08365;
    font-weight: 600;
    letter-spacing: .006em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

@media only screen and (max-width: 1068px) {
    .tagline-reduced {
        font-size: 34px;
        line-height: 1.08824;
        font-weight: 600;
        letter-spacing: .006em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

@media only screen and (max-width: 735px) {
    .tagline-reduced {
        font-size: 28px;
        line-height: 1.14286;
        font-weight: 600;
        letter-spacing: .007em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

.section-ipad-pencil {
    max-width: 1350px;
    margin: 45px auto
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil {
        margin: 25px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil {
        margin: 20px auto
    }
}

.section-ipad-pencil .fp-secondary-headline {
    margin-bottom: 0
}

.section-ipad-pencil .moreblock-separation {
    margin-bottom: 10px
}

.section-ipad-pencil .ipad-apps-content {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 100px;
    text-align: center;
    overflow: hidden;
    background-color: #fafafa
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-content {
        height: 100%;
        padding-top: 76px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-content {
        height: auto;
        padding-top: 75px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-content.small-padding {
        padding-top: 75px
    }
}

.section-ipad-pencil .ipad-apps-appstore {
    background-position: center bottom;
    padding-right: 22px;
    height: 800px
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-appstore {
        padding-right: 12px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-appstore {
        padding-right: 10px
    }
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-appstore {
        height: 475px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-appstore {
        height: 455px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-appstore {
        margin-bottom: 20px;
        padding-right: 0
    }
}

.section-ipad-pencil .ipad-apps-appstore .fp-secondary-headline {
    width: 7em;
    margin: 30px auto 0 auto
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-appstore .fp-secondary-headline {
        margin-top: 0
    }
}



.section-ipad-pencil .ipad-apps-appstore .image-pencil-pro {
    width: 612px;
    height: 469px;
    background-size: 612px 469px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/pencil_large.jpg");
    left: 50%;
    margin-left: -330px;
    position: relative;
    margin-top: 98px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .section-ipad-pencil .ipad-apps-appstore .image-pencil-pro {
        background-image: url("/v/ipad/home/af/images/home/pencil_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-appstore .image-pencil-pro {
        width: 320px;
        height: 244px;
        background-size: 320px 244px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/pencil_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-ipad-pencil .ipad-apps-appstore .image-pencil-pro {
        background-image: url("/v/ipad/home/af/images/home/pencil_medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-appstore .image-pencil-pro {
        width: 293px;
        height: 236px;
        background-size: 293px 236px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/pencil_small.jpg")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .section-ipad-pencil .ipad-apps-appstore .image-pencil-pro {
        background-image: url("/v/ipad/home/af/images/home/pencil_small_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-appstore .image-pencil-pro {
        left: 50%;
        margin-left: -178px;
        position: relative
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-appstore .image-pencil-pro {
        left: 50%;
        margin-left: -161.5px;
        position: relative
    }
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-appstore .image-pencil-pro {
        margin-top: 70px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-appstore .image-pencil-pro {
        margin-top: 70px
    }
}

.section-ipad-pencil .ipad-apps-appstore-copy {
    width: 25em;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-appstore-copy {
        width: 17em
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-appstore-copy {
        width: 90%
    }
}

.section-ipad-pencil .ipad-apps-keyboard {
    overflow: hidden;
    padding-left: 22px;
    height: 800px
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-keyboard {
        padding-left: 12px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-keyboard {
        padding-left: 10px
    }
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-keyboard {
        height: 475px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-keyboard {
        height: 455px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-keyboard {
        padding-left: 0
    }
}

.section-ipad-pencil .ipad-apps-keyboard .fp-secondary-headline {
    margin-top: 420px
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-keyboard .fp-secondary-headline {
        margin-top: 221px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-keyboard .fp-secondary-headline {
        margin-top: 0
    }
}

.section-ipad-pencil .ipad-apps-keyboard-copy {
    width: 14em;
    margin-left: auto;
    margin-right: auto
}

.section-ipad-pencil .ipad-apps-keyboard .image-ipad-keyboard {
    width: 617px;
    height: 441px;
    background-size: 617px 441px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/smart_keyboard_large.jpg");
    left: 50%;
    margin-left: -308.5px;
    position: relative;
    position: absolute;
    top: 0;
    background-position: center -25px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .section-ipad-pencil .ipad-apps-keyboard .image-ipad-keyboard {
        background-image: url("/v/ipad/home/af/images/home/smart_keyboard_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-keyboard .image-ipad-keyboard {
        width: 348px;
        height: 249px;
        background-size: 348px 249px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/smart_keyboard_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-ipad-pencil .ipad-apps-keyboard .image-ipad-keyboard {
        background-image: url("/v/ipad/home/af/images/home/smart_keyboard_medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-keyboard .image-ipad-keyboard {
        width: 294px;
        height: 212px;
        background-size: 294px 212px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/smart_keyboard_small.jpg")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .section-ipad-pencil .ipad-apps-keyboard .image-ipad-keyboard {
        background-image: url("/v/ipad/home/af/images/home/smart_keyboard_small_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-keyboard .image-ipad-keyboard {
        left: 50%;
        margin-left: -174px;
        position: relative
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-keyboard .image-ipad-keyboard {
        left: 50%;
        margin-left: -147px;
        position: relative
    }
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-keyboard .image-ipad-keyboard {
        position: absolute;
        top: 0;
        background-position: center -14px
    }
}

@media only screen and (max-width: 735px) {
    .section-ipad-pencil .ipad-apps-keyboard .image-ipad-keyboard {
        position: relative;
        margin-top: 33px;
        margin-bottom: 25px;
        background-position: center center
    }
}

.section-ipad-pencil .ipad-apps-appstore .fp-secondary-headline {
    width: 7em;
    margin: 30px auto 0 auto
}

@media only screen and (max-width: 1068px) {
    .section-ipad-pencil .ipad-apps-appstore .fp-secondary-headline {
        margin-top: 0
    }
}

.ipad-pencil-headline, .ipad-keyboard-headline, .ipad-keyboard-tagline {
    font-size: 56px;
    line-height: 1.07143;
    font-weight: 600;
    letter-spacing: -.015em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

@media only screen and (max-width: 1068px) {
    .ipad-pencil-headline, .ipad-keyboard-headline, .ipad-keyboard-tagline {
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: .008em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

@media only screen and (max-width: 735px) {
    .ipad-pencil-headline, .ipad-keyboard-headline, .ipad-keyboard-tagline {
        font-size: 34px;
        line-height: 1.08824;
        font-weight: 600;
        letter-spacing: .01em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

.section-ipad-pencil .ipad-apps-appstore .moreblock-separation {
    margin-bottom: 10px
}

.section-augmented-reality {
    margin: 45px auto;
    background-position: center;
    position: relative;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/ar_large.jpg");
    background-size: 1352px 497px;
    max-width: 1350px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .section-augmented-reality {
        background-image: url("/v/ipad/home/af/images/home/ar_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-augmented-reality {
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/ar_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-augmented-reality {
        background-image: url("/v/ipad/home/af/images/home/ar_medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-augmented-reality {
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/ar_small.jpg")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .section-augmented-reality {
        background-image: url("/v/ipad/home/af/images/home/ar_small_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-augmented-reality {
        background-size: 1068px 400px;
        max-width: 100%
    }
}

@media only screen and (max-width: 735px) {
    .section-augmented-reality {
        background-size: 741px 963px
    }
}

@media only screen and (max-width: 1068px) {
    .section-augmented-reality {
        margin: 25px
    }
}

@media only screen and (max-width: 735px) {
    .section-augmented-reality {
        background-position: center bottom;
        margin: 0 0 20px
    }
}

.section-augmented-reality .ipad-ar {
    z-index: auto
}

@media only screen and (max-width: 1068px) {
    .section-augmented-reality .fp-ar-headline {
        font-size: 34px
    }
}

.section-augmented-reality .fp-section-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 497px
}

@media only screen and (max-width: 1068px) {
    .section-augmented-reality .fp-section-content {
        height: 400px
    }
}

@media only screen and (max-width: 735px) {
    .section-augmented-reality .fp-section-content {
        height: auto
    }
}

.section-augmented-reality .copy-block-augmented-reality {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    padding-right: 50px;
    text-align: left;
    pointer-events: none;
    z-index: 10
}

@media only screen and (max-width: 1068px) {
    .section-augmented-reality .copy-block-augmented-reality {
        left: 55%;
        padding-top: 0
    }
}

@media only screen and (max-width: 735px) {
    .section-augmented-reality .copy-block-augmented-reality {
        left: 10%;
        text-align: center;
        padding-right: 0;
        padding-bottom: 320px;
        padding-top: 80px
    }
}

.section-augmented-reality .copy-block-augmented-reality * {
    color: #fff
}

.section-augmented-reality .product-reduced {
    font-size: 27px;
    line-height: 1.14815;
    font-weight: 400;
    letter-spacing: .008em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

@media only screen and (max-width: 1068px) {
    .section-augmented-reality .product-reduced {
        font-size: 23px
    }
}

@media only screen and (max-width: 1068px) {
    .section-augmented-reality .product-reduced {
        font-size: 24px;
        line-height: 1.33349;
        font-weight: 400;
        letter-spacing: .009em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

@media only screen and (max-width: 735px) {
    .section-augmented-reality .product-reduced {
        font-size: 24px;
        line-height: 1.16667;
        font-weight: 500;
        letter-spacing: .009em;
        font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif
    }
}

.section-augmented-reality .more {
    margin: 0;
    pointer-events: all;
    z-index: 100
}

.section-education .image-education {
    width: 1352px;
    height: 497px;
    background-size: 1352px 497px;
    background-repeat: no-repeat;
    background-image: url("/v/ipad/home/af/images/home/education_large.jpg");
    width: 100%;
    background-position: center top
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .section-education .image-education {
        background-image: url("/v/ipad/home/af/images/home/education_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-education .image-education {
        width: 1068px;
        height: 400px;
        background-size: 1068px 400px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/education_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-education .image-education {
        background-image: url("/v/ipad/home/af/images/home/education_medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-education .image-education {
        width: 736px;
        height: 400px;
        background-size: 736px 400px;
        background-repeat: no-repeat;
        background-image: url("/v/ipad/home/af/images/home/education_small.jpg")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .section-education .image-education {
        background-image: url("/v/ipad/home/af/images/home/education_small_2x.jpg")
    }
}

@media only screen and (min-width: 1442px) {
    .section-education .image-education {
        width: 100%
    }
}

@media only screen and (max-width: 1068px) {
    .section-education .image-education {
        width: 100%
    }
}

@media only screen and (max-width: 735px) {
    .section-education .image-education {
        position: relative;
        width: 100%;
        height: 360px
    }
}

.section-education .fp-billboard-copy {
    width: 100%
}

@media only screen and (max-width: 1068px) {
    .section-education .fp-billboard-copy {
        width: 51%
    }
}

@media only screen and (max-width: 735px) {
    .section-education .fp-billboard-copy {
        width: 280px
    }
}

.fp-billboard {
    margin-bottom: 45px
}

@media only screen and (max-width: 1068px) {
    .fp-billboard {
        margin: 25px
    }
}

@media only screen and (max-width: 735px) {
    .fp-billboard {
        margin: 20px auto
    }
}

@media only screen and (max-width: 735px) {
    .fp-billboard .fp-billboard-wrapper {
        position: absolute
    }
}

@media only screen and (max-width: 735px) {
    .fp-billboard .fp-billboard-content {
        color: #333;
        text-align: center;
        position: absolute;
        top: 39%;
        padding: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

@media only screen and (max-width: 735px) {
    .fp-billboard.fp-billboard-inline-small .fp-billboard-wrapper {
        position: relative
    }

    .fp-billboard.fp-billboard-inline-small .fp-billboard-content {
        position: relative;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    .fp-billboard.fp-billboard-inline-small.fp-billboard .fp-billboard-content {
        margin-top: 82px;
        margin-bottom: 44px
    }
}

@media only screen and (max-width: 735px) {
    .fp-billboard .more {
        color: #0070c9;
        float: none;
        display: block
    }
}

@media only screen and (max-width: 735px) {
    .ipad-accessories .fp-billboard-copy {
        width: 260px;
        margin:0 auto;
    }
}

.link-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10
}

.link-wrap::before {
    content: ' ';
    display: table
}

.link-wrap::after {
    clear: both;
    content: ' ';
    display: table
}
/* IPAD END */