*,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td{
    margin:0;
    padding:0
}
table{
    border-collapse:collapse;
    border-spacing:0
}
fieldset,img{
    border:0
}
address,caption,cite,code,dfn,em,strong,th,var{
    font-style:normal;
    font-weight:normal
}
ol,ul,li{
    list-style:none
}
caption,th{
    text-align:left
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:inherit
}
q:before,q:after{
    content:''
}
header,aside,nav,footer,section,article,hgroup,address,figure,figcaption,video,details,small,summary,img,main,time,dl,dt,dd,li{
    display:block
}
html{
    webkit-text-size-adjust:none
}
i,b,em,strong{
    font-style:inherit;
    font-weight:inherit
}
img,video{
    display:block;
    width:100%;
    height:auto
}
a{
    text-decoration:none;
    color:inherit
}
mark{
    background:none;
    color:inherit
}
small{
    font-size:inherit
}
abbr{
    text-decoration:none;
    color:inherit
}
.preload *{
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important
}
@font-face{
    font-family:'segoe';
    src:url("../fonts/segoeui-light.woff") format("woff");
    font-weight:200;
    font-style:normal
}
@font-face{
    font-family:'segoe';
    src:url("../fonts/segoeui-semilight.woff") format("woff");
    font-weight:300;
    font-style:normal
}
@font-face{
    font-family:'segoe';
    src:url("../fonts/segoeui-regular.woff") format("woff");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:'segoe';
    src:url("../fonts/segoeui-semibold.woff") format("woff");
    font-weight:500;
    font-style:normal
}
@font-face{
    font-family:'segoe';
    src:url("../fonts/segoeui-bold.woff") format("woff");
    font-weight:600;
    font-style:normal
}
body{
    font-size:100%;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-text-size-adjust:100%;
    font:400 normal 1.125rem/1.35 "segoe","Segoe UI",Arial,sans-serif;
    background-color:white;
    color:#666
}
html,body{
    height:100%
}
.clear:before,.clear:after{
    content:" ";
    display:table
}
.clear:after{
    clear:both
}
.bound{
    width:87%;
    /*max-width:calc(996 * 1px);*/
	max-width:calc(900 * 1px);
    margin:0 auto
}
.clause{
    display:inline-block
}
.diptych{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:150px 0 170px
}
.diptych .media{
    width:48.7179487179487%
}
.diptych.mirrored .media{
    order:1
}
.diptych.mirrored .prose{
    order:2;
    text-align:center
}
[name="gdpr-banner"]{
    color:#231f20;
    background:#f2f2f2;
    font-size:0.8125rem;
    line-height:1.35;
    overflow:hidden;
    display:none;
    padding:0 0 0 0
}
[name="gdpr-banner"] .inner{
    height:114px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:15px 0
}
[name="gdpr-banner"] .content{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center
}
[name="gdpr-banner"] p{
    max-width:40em;
    position:relative;
    text-align:left
}
[name="gdpr-banner"] span{
    display:block
}
[name="gdpr-banner"] i{
    display:block;
    position:absolute;
    top:0.0625rem;
    left:-1.5rem;
    background-image:url("../images/fabric-info.svg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:95% 95%;
    width:1.0625rem;
    height:1.0625rem;
    -webkit-transform-origin:center center;
    transform-origin:center center
}
@media (max-width: 469px){
    [name="gdpr-banner"] i{
        left:-1.25rem;
        -webkit-transform:scale(0.8);
        transform:scale(0.8)
    }
}
[name="gdpr-banner"] footer{
    margin-top:0.25em;
    text-align:left
}
[name="gdpr-banner"] a{
    color:#0078d4
}
[name="gdpr-banner"] a:hover{
    text-decoration:underline
}
[name="gdpr-banner"].active{
    display:block
}
@media (min-width: 850px){
    [name="gdpr-banner"]{
        -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.25);
        box-shadow:0 1px 4px rgba(0,0,0,0.25);
        z-index:2;
        position:relative
    }
    [name="gdpr-banner"] .inner{
        height:52px;
        padding:7px 0 0
    }
    [name="gdpr-banner"] .content{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        align-items:flex-start
    }
    [name="gdpr-banner"] p{
        max-width:calc(100% - 160px)
    }
    [name="gdpr-banner"] footer{
        width:150px;
        text-align:right;
        margin-top:0
    }
}
.user-agent-test{
    background:rgba(0,0,0,0.66);
    font-family:monospace;
    position:fixed;
    bottom:30%;
    left:13px;
    z-index:9;
    padding:10px 20px;
    border-radius:5px;
    color:white;
    font-size:1.25rem;
    display:none
}
.user-agent-test span{
    font-weight:bold
}
@-webkit-keyframes cookiesEmerge{
    0%{
        -webkit-transform:translateY(50%);
        transform:translateY(50%);
        opacity:0
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0);
        opacity:1
    }
}
@keyframes cookiesEmerge{
    0%{
        -webkit-transform:translateY(50%);
        transform:translateY(50%);
        opacity:0
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0);
        opacity:1
    }
}
@-webkit-keyframes cookiesHide{
    0%{
        -webkit-transform:translateY(0);
        transform:translateY(0);
        opacity:1
    }
    100%{
        -webkit-transform:translateY(50%);
        transform:translateY(50%);
        opacity:0
    }
}
@keyframes cookiesHide{
    0%{
        -webkit-transform:translateY(0);
        transform:translateY(0);
        opacity:1
    }
    100%{
        -webkit-transform:translateY(50%);
        transform:translateY(50%);
        opacity:0
    }
}
[data-show-cookie-disclosure="true"] [name="cookie-disclosure"]{
    display:block
}
[name="cookie-disclosure"]{
    -webkit-transform:translateY(50%);
    transform:translateY(50%);
    opacity:0;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-duration:250ms;
    animation-duration:250ms;
    -webkit-animation-name:cookiesHide;
    animation-name:cookiesHide;
    -webkit-animation-delay:0ms;
    animation-delay:0ms;
    display:none;
    top:15px;
    left:13px;
    position:fixed;
    z-index:10;
    width:calc(100% - 26px);
    max-width:470px;
    background:white;
    -webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.12),0 20px 60px rgba(0,0,0,0.4);
    box-shadow:0 0 0 1px rgba(0,0,0,0.12),0 20px 60px rgba(0,0,0,0.4);
    border-radius:5px;
    font-size:0.875rem;
    line-height:1.4;
    color:#333333
}
[name="cookie-disclosure"].visible{
    -webkit-animation-duration:700ms;
    animation-duration:700ms;
    -webkit-animation-name:cookiesEmerge;
    animation-name:cookiesEmerge;
    -webkit-animation-delay:200ms;
    animation-delay:200ms
}
[name="cookie-disclosure"] .plate{
    position:relative;
    margin:17px 40px 20px 15px
}
[name="cookie-disclosure"] .afterword{
    margin-top:1em
}
[name="cookie-disclosure"] .content{
    max-width:29em
}
[name="cookie-disclosure"] .close{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    background:aqua;
    position:absolute;
    display:block;
    top:5px;
    right:2px;
    -webkit-transform-origin:center center;
    transform-origin:center center;
    -webkit-transform:translate(40px, -20px);
    transform:translate(40px, -20px);
    width:40px;
    height:40px;
    cursor:pointer;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    background-image:url("../images/fabric-close-x.svg");
    background-color:transparent;
    text-align:left;
    overflow:hidden;
    text-align:100%;
    white-space:nowrap;
    color:transparent;
    background-size:40% 40%;
    -webkit-transition:background-color 250ms;
    transition:background-color 250ms;
    border-radius:4px
}
[name="cookie-disclosure"] .close:hover{
    background-color:rgba(0,0,0,0.08)
}
[name="cookie-disclosure"] .afterword a{
    color:#0078d4;
    position:relative;
    padding-right:16px
}
[name="cookie-disclosure"] .afterword a span{
    position:relative;
    -webkit-transition:-webkit-box-shadow 250ms;
    transition:-webkit-box-shadow 250ms;
    transition:box-shadow 250ms;
    transition:box-shadow 250ms, -webkit-box-shadow 250ms;
    -webkit-box-shadow:inset 0 -1px 0 white,inset 0 -2px 0 rgba(0,120,212,0);
    box-shadow:inset 0 -1px 0 white,inset 0 -2px 0 rgba(0,120,212,0)
}
[name="cookie-disclosure"] .afterword a:after{
    content:"";
    display:block;
    position:absolute;
    width:0.75em;
    height:0.75em;
    right:0;
    top:50%;
    -webkit-transform:translate(0, -40%);
    transform:translate(0, -40%);
    background-image:url("../images/fabric-rightward-arrow-blue.svg");
    background-size:contain;
    background-position:right center;
    background-repeat:no-repeat;
    -webkit-transition:-webkit-transform 250ms;
    transition:-webkit-transform 250ms;
    transition:transform 250ms;
    transition:transform 250ms, -webkit-transform 250ms
}
[name="cookie-disclosure"] .afterword a:hover span{
    -webkit-box-shadow:inset 0 -1px 0 white,inset 0 -2px 0 rgba(0,120,212,0.3);
    box-shadow:inset 0 -1px 0 white,inset 0 -2px 0 rgba(0,120,212,0.3)
}
[name="cookie-disclosure"] .afterword a:hover:after{
    -webkit-transform:translate(50%, -40%);
    transform:translate(50%, -40%)
}
[name="mobile-speedbump"]{
    position:fixed;
    z-index:10;
    overflow:hidden;
    top:0;
    left:0;
    width:1px;
    height:1px;
    opacity:0
}
[name="mobile-speedbump"] .advancement-choices{
    display:flex
}
[name="mobile-speedbump"] .advancement-choices,[name="mobile-speedbump"] .advancement-choices-above{
    flex-direction:column;
    justify-content:center
}
[name="mobile-speedbump"] .advancement-choices-above{
    display:none
}
[name="mobile-speedbump"].alternatePlacement .advancement-choices-above{
    display:flex
}
[name="mobile-speedbump"].alternatePlacement .advancement-choices .primary{
    display:none
}
[name="mobile-speedbump"] .advancement-choices{
    flex-grow:0
}
[name="mobile-speedbump"].alternatePlacement .artwork{
    flex-grow:2
}
[name="mobile-speedbump"].alternatePlacement .advancement-choices,[name="mobile-speedbump"].alternatePlacement .advancement-choices-above{
    flex-grow:1
}
[name="mobile-speedbump"].alternateColor .secondary a.sign-in-link{
    color:#605e5c;
    -webkit-box-shadow:inset 0 0 0 1px #605e5c;
    box-shadow:inset 0 0 0 1px #605e5c
}
[name="mobile-speedbump"].alternateColor .secondary a.sign-in-link .glyph svg{
    fill:#605e5c
}
[name="mobile-speedbump"].alternateColor .secondary a.sign-in-link:hover,[name="mobile-speedbump"].alternateColor .secondary a.sign-in-link:focus,[name="mobile-speedbump"].alternateColor .secondary a.sign-in-link:visited{
    background:#605e5c;
    color:#FFFFFF
}
[name="mobile-speedbump"].alternateColor .secondary a.sign-in-link:hover .glyph svg,[name="mobile-speedbump"].alternateColor .secondary a.sign-in-link:focus .glyph svg,[name="mobile-speedbump"].alternateColor .secondary a.sign-in-link:visited .glyph svg{
    fill:#FFFFFF
}
[name="mobile-speedbump"].launched{
    width:100%;
    height:100%;
    opacity:1
}
[name="mobile-speedbump"] *:focus{
    -webkit-box-shadow:0 0 4px 4px #0078d4;
    box-shadow:0 0 4px 4px #0078d4
}
[name="mobile-speedbump"] .screen{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:1
}
[name="mobile-speedbump"] .plate{
    width:86%;
    max-height:800px;
    max-width:500px;
    height:91%;
    background:white;
    border-radius:5px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    z-index:2;
    -webkit-box-shadow:0 10px 90px rgba(0,0,0,0.8);
    box-shadow:0 10px 90px rgba(0,0,0,0.8);
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    padding:28px 26px 20px
}
[name="mobile-speedbump"] .plate-contents{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center
}
[name="mobile-speedbump"] .artwork{
    flex:1;
    width:100%;
    margin-top:26px;
    margin-bottom:22px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center
}
[name="mobile-speedbump"] .mobile-speedbump-close{
    display:block;
    border:none;
    position:absolute;
    top:0;
    right:0;
    width:44px;
    height:44px;
    overflow:hidden;
    z-index:3;
    cursor:pointer;
    background-image:url("../images/fabric-close-x.svg");
    background-repeat:no-repeat;
    background-size:contain;
    background-size:18px 18px;
    background-color:transparent;
    background-position:center center;
    -webkit-appearance:none;
    text-align:center;
    white-space:nowrap;
    text-indent:100%
}
[name="mobile-speedbump"] .slogan{
    color:#0078d4;
    font-weight:500;
    max-width:14em;
    font-size:1.625rem;
    line-height:1;
    margin:0 auto;
    text-align:center
}
@media (max-width: 399px){
    [name="mobile-speedbump"] .slogan{
        font-size:1.4375rem
    }
}
[name="mobile-speedbump"] .advancement-choices,[name="mobile-speedbump"] .advancement-choices-above{
    width:100%
}
[name="mobile-speedbump"] .advancement-choices li,[name="mobile-speedbump"] .advancement-choices-above li{
    display:block
}
[name="mobile-speedbump"] .advancement-choices a,[name="mobile-speedbump"] .advancement-choices-above a{
    display:block
}
[name="mobile-speedbump"] .advancement-choices .primary,[name="mobile-speedbump"] .advancement-choices-above .primary{
    margin-bottom:20px
}
[name="mobile-speedbump"] .advancement-choices .primary a,[name="mobile-speedbump"] .advancement-choices-above .primary a{
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    background-image:url("../images/download-app-badge-ios.svg");
    white-space:nowrap;
    overflow:hidden;
    text-indent:100%;
    width:138px;
    height:44px;
    margin:0 auto;
    color:transparent
}
[name="mobile-speedbump"] .advancement-choices [data-relevance="android"] a,[name="mobile-speedbump"] .advancement-choices-above [data-relevance="android"] a{
    background-image:url("../images/download-app-badge-android.svg")
}
[name="mobile-speedbump"] .advancement-choices .secondary a,[name="mobile-speedbump"] .advancement-choices-above .secondary a{
    -webkit-box-shadow:inset 0 0 0 1px #0078d4;
    box-shadow:inset 0 0 0 1px #0078d4;
    border-radius:4px;
    cursor:pointer;
    -webkit-transition:all 180ms;
    transition:all 180ms;
    color:#0078d4
}
[name="mobile-speedbump"] .advancement-choices .secondary span,[name="mobile-speedbump"] .advancement-choices-above .secondary span{
    position:relative;
    display:inline-block;
    width:100%;
    text-align:center;
    font-size:0.875rem;
    line-height:1.2;
    font-weight:500;
    display:flex;
    justify-content:center;
    align-items:center;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    padding:10px 7px 11px
}
[name="mobile-speedbump"] .advancement-choices .secondary a:hover,[name="mobile-speedbump"] .advancement-choices-above .secondary a:hover{
    background:rgba(0,120,212,0.1)
}
[name="mobile-speedbump"] .advancement-choices .secondary i,[name="mobile-speedbump"] .advancement-choices-above .secondary i{
    position:relative
}
[name="mobile-speedbump"] .advancement-choices .secondary .glyph,[name="mobile-speedbump"] .advancement-choices-above .secondary .glyph{
    display:inline-block;
    position:relative;
    width:16px;
    height:17px;
    margin-left:8px
}
[name="mobile-speedbump"] .advancement-choices .secondary .glyph svg,[name="mobile-speedbump"] .advancement-choices-above .secondary .glyph svg{
    width:100%;
    height:auto;
    fill:#0078d4;
    -webkit-transition:fill 180ms;
    transition:fill 180ms
}
[name="mobile-speedbump"] .advancement-choices .secondary a:focus,[name="mobile-speedbump"] .advancement-choices-above .secondary a:focus{
    background-color:#0078d4;
    color:white
}
[name="mobile-speedbump"] .advancement-choices .secondary a:focus .glyph svg,[name="mobile-speedbump"] .advancement-choices-above .secondary a:focus .glyph svg{
    fill:white
}
[data-likely-os="Android"] [data-relevance="ios"],[data-likely-os="iOS"] [data-relevance="android"]{
    display:none !important
}
body.locked{
    overflow:hidden;
    -webkit-overflow-scrolling:touch
}
@-webkit-keyframes stickyHeaderDescend{
    0%{
        top:-69px
    }
    100%{
        top:0
    }
}
@keyframes stickyHeaderDescend{
    0%{
        top:-69px
    }
    100%{
        top:0
    }
}
.sticky-header{
    position:fixed;
    top:-69px;
    left:0;
    width:100%;
    z-index:3
}
.sticky-header.visible{
    -webkit-animation-name:stickyHeaderDescend;
    animation-name:stickyHeaderDescend;
    -webkit-animation-duration:150ms;
    animation-duration:150ms;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-delay:50ms;
    animation-delay:50ms
}
.sticky-header .plate{
    background:white;
    width:100%;
    position:relative;
    height:69px;
    -webkit-box-shadow:0 2px 60px 14px rgba(0,0,0,0.13);
    box-shadow:0 2px 60px 14px rgba(0,0,0,0.13)
}
@media (max-width: 499px){
    .sticky-header .plate{
        -webkit-box-shadow:0 0 35px 8px rgba(0,0,0,0.13);
        box-shadow:0 0 35px 8px rgba(0,0,0,0.13)
    }
}
@media screen and (-ms-high-contrast: black-on-white){
    .sticky-header .plate{
        -webkit-box-shadow:0 2px 0 black;
        box-shadow:0 2px 0 black
    }
}
.sticky-header .elements-rack{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:100%
}
.sticky-header .identifier{
    position:relative
}
.sticky-header .product-tile{
    display:block;
    position:absolute;
    left:0;
    top:50%;
    background:url("../images/outlook-icon.jpg") no-repeat left center;
    background-size:contain;
    -webkit-transform:translate(-12px, -57%);
    transform:translate(-12px, -57%);
    width:45px;
    height:45px
}
.sticky-header .actions ul{
    display:flex
}
.sticky-header .actions li{
    margin-left:10px
}
.sticky-header .actions a{
    display:inline-block;
    font-size:1rem;
    line-height:1;
    font-weight:500;
    border-radius:4px;
    padding:9px 27px 12px;
    color:white;
    background:rgba(0,0,0,0.1);
    -webkit-transition:all 180ms;
    transition:all 180ms;
    -webkit-box-shadow:0 3px 9px rgba(0,0,0,0.05),inset 0 0 0 1px white;
    box-shadow:0 3px 9px rgba(0,0,0,0.05),inset 0 0 0 1px white
}
@media (max-width: 570px){
    .sticky-header .actions a{
        font-size:0.875rem;
        border-radius:2px;
        padding:8px 15px 11px;
        -webkit-transition:none;
        transition:none
    }
}
@media (max-width: 399px){
    .sticky-header .actions a{
        font-size:0.75rem;
        padding:8px 11px 9px
    }
}
.sticky-header .actions li:last-of-type a{
    background:white;
    color:#0078d4;
    -webkit-box-shadow:0 3px 9px rgba(0,0,0,0.05);
    box-shadow:0 3px 9px rgba(0,0,0,0.05)
}
.sticky-header .actions a:hover{
    -webkit-transform:translateY(-1px);
    transform:translateY(-1px);
    -webkit-box-shadow:0 4px 10px rgba(0,0,0,0.35),inset 0 0 0 1px white;
    box-shadow:0 4px 10px rgba(0,0,0,0.35),inset 0 0 0 1px white
}
.sticky-header .actions li:last-of-type a:hover{
    -webkit-box-shadow:0 5px 13px rgba(0,0,0,0.15);
    box-shadow:0 5px 13px rgba(0,0,0,0.15)
}
.sticky-header .actions li a{
    background:white;
    color:#666;
    -webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);
    padding-top:13px;
    padding-bottom:15px
}
.sticky-header .actions li a:hover{
    -webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3),0 7px 12px rgba(0,0,0,0.08);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3),0 7px 12px rgba(0,0,0,0.08)
}
.sticky-header .actions li:last-of-type a{
    background:#0078d4;
    color:white;
    -webkit-box-shadow:none;
    box-shadow:none
}
@media (max-width: 749px){
    .sticky-header .plate{
        height:63px
    }
    .sticky-header .product-tile{
        width:37px;
        height:37px
    }
    .sticky-header .actions a{
        font-size:0.875rem
    }
    .sticky-header .actions li{
        margin-left:7px
    }
    .sticky-header .actions li:first-of-type{
        margin-left:0;
        max-width:32%
    }
    .sticky-header .actions li a{
        padding:10px 13px 11px
    }
}
@media (max-width: 539px){
    .sticky-header .plate{
        height:57px
    }
    .sticky-header .product-tile{
        width:32px;
        height:32px;
        -webkit-transform:translate(-12px, -50%);
        transform:translate(-12px, -50%)
    }
    .sticky-header .actions{
        width:100%;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        padding-left:29px;
        position:relative
    }
    .sticky-header .actions li{
        margin-left:4px;
        display:flex
    }
    .sticky-header .actions li:last-of-type{
        flex:1
    }
    .sticky-header .actions a{
        display:flex;
        width:100%;
        height:100%;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        text-align:center;
        align-items:center;
        justify-content:center
    }
    .sticky-header .actions li a{
        padding:8px 12px 9px
    }
}
@media (max-width: 419px){
    .sticky-header .actions a{
        font-size:0.75rem
    }
}
@media (max-width: 374px){
    .sticky-header .actions{
        padding-left:19px
    }
    .sticky-header .actions ul{
        align-items:center
    }
    .sticky-header .product-tile{
        -webkit-transform:translate(-12px, -50%);
        transform:translate(-12px, -50%);
        width:27px;
        height:27px
    }
    .sticky-header .actions li a{
        padding:7px 6px 8px
    }
    .sticky-header .actions a{
        font-size:0.6875rem
    }
}
:root{
    --vh-offset: 0px
}
.masthead{
    color:white;
    width:100%;
    overflow:hidden;
    position:relative;
    z-index:1;
    /*height:100px;*/
    background-image:url("../images/masthead-alt-06-wide-large.jpg");
    background-repeat:no-repeat;
    background-position:45% center;
    background-size:cover;
/*    min-height:calc(100vh);
    min-height:calc(100vh - var(--vh-offset));*/
    background-color:#FFFFFF;
}
@media (min-aspect-ratio: 3 / 2){
    .masthead{
        background-image:url("../images/masthead-alt-06-wide-large.jpg") !important;
        background-position:right 25%
    }
}
@media (max-aspect-ratio: 1 / 1){
    .masthead{
        background-image:url("../images/masthead-alt-06-wide-large.jpg") !important;
        background-position:50% top
    }
}
.masthead:after,.masthead:before{
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.masthead .static-strip{
    background:url("../images/masthead-static-strip-fallback-texture.jpg") repeat-x left top;
    background-size:150px 60px
}
@supports (-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60px, 0% 60px)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 60px, 0% 60px)){
    .masthead:after{
        z-index:2;
        background-image:url("../images/masthead-alt-06-wide-large.jpg");
        background-repeat:no-repeat;
        background-position:45% center;
        background-size:cover;
        -webkit-filter:blur(15px);
        filter:blur(15px);
        -webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 60px, 0% 60px);
        clip-path:polygon(0% 0%, 100% 0%, 100% 60px, 0% 60px)
    }
    @media (min-aspect-ratio: 3 / 2){
        .masthead:after{
            background-image:url("../images/masthead-alt-06-wide-large.jpg") !important;
            background-position:right 25%
        }
    }
    @media (max-aspect-ratio: 1 / 1){
        .masthead:after{
            background-image:url("../images/masthead-alt-06-wide-large.jpg") !important;
            background-position:50% top
        }
    }
    @media (max-width: 399px){
        .masthead:after{
            -webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 54px, 0% 54px);
            clip-path:polygon(0% 0%, 100% 0%, 100% 54px, 0% 54px)
        }
    }
}
.masthead:before{
    z-index:2;
    top:auto;
    bottom:0
}
.masthead .masthead-shell{
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    z-index:3
}
.masthead .static-strip{
    order:1;
    -webkit-box-shadow:0 10px 30px rgba(0,0,0,0.05);
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    height:60px
}
@media (max-width: 399px){
    .masthead .static-strip{
        height:54px
    }
}
@supports (-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60px, 0% 60px)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 60px, 0% 60px)){
    .masthead .static-strip{
        background:rgba(255,255,255,0.2)
    }
}
.masthead .static-strip .bound{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:100%;
    -webkit-transform:translateY(-1px);
    transform:translateY(-1px)
}
.masthead .static-strip .auxiliary-actions ul{
    display:flex
}
.masthead .static-strip .auxiliary-actions li{
    margin-left:10px
}
.masthead .static-strip .auxiliary-actions a{
    display:inline-block;
    font-size:1rem;
    line-height:1;
    font-weight:500;
    border-radius:4px;
    padding:9px 27px 12px;
    color:white;
    background:rgba(0,0,0,0.1);
    -webkit-transition:all 180ms;
    transition:all 180ms;
    -webkit-box-shadow:0 3px 9px rgba(0,0,0,0.05),inset 0 0 0 1px white;
    box-shadow:0 3px 9px rgba(0,0,0,0.05),inset 0 0 0 1px white
}
@media (max-width: 570px){
    .masthead .static-strip .auxiliary-actions a{
        font-size:0.875rem;
        border-radius:2px;
        padding:8px 15px 11px;
        -webkit-transition:none;
        transition:none
    }
}
@media (max-width: 399px){
    .masthead .static-strip .auxiliary-actions a{
        font-size:0.75rem;
        padding:8px 11px 9px
    }
}
.masthead .static-strip .auxiliary-actions li:last-of-type a{
    background:white;
    color:#0078d4;
    -webkit-box-shadow:0 3px 9px rgba(0,0,0,0.05);
    box-shadow:0 3px 9px rgba(0,0,0,0.05)
}
.masthead .static-strip .auxiliary-actions a:hover{
    -webkit-transform:translateY(-1px);
    transform:translateY(-1px);
    -webkit-box-shadow:0 4px 10px rgba(0,0,0,0.35),inset 0 0 0 1px white;
    box-shadow:0 4px 10px rgba(0,0,0,0.35),inset 0 0 0 1px white
}
.masthead .static-strip .auxiliary-actions li:last-of-type a:hover{
    -webkit-box-shadow:0 5px 13px rgba(0,0,0,0.15);
    box-shadow:0 5px 13px rgba(0,0,0,0.15)
}
.masthead .static-strip .corp-name{
    width:104px;
    height:22px;
    display:block
}
@media (max-width: 399px){
    .masthead .static-strip .corp-name{
        width:90px
    }
}
.masthead .static-strip .corp-name a{
    display:block;
    width:100%;
    height:100%;
    background:url("../images/ms-wordmark-white.svg") no-repeat left center;
    background-size:contain;
    text-indent:100%;
    overflow:hidden;
    white-space:nowrap;
    color:transparent
}
.masthead .primary-content{
    display:flex;
    flex-direction:column;
    order:2;
    flex:1
}
.masthead .primary-content .titling{
    flex:1;
    display:flex;
    flex-direction:column
}
.masthead .primary-content .product-name{
    flex:1;
    font-size:2.125rem;
    line-height:1;
    font-weight:500;
    margin-top:30px
}
@media (max-width: 499px), (max-height: 499px){
    .masthead .primary-content .product-name{
        font-size:1.375rem;
        margin-top:20px
    }
}
.masthead .primary-content .product-name span{
    display:inline-block;
    position:relative;
    text-shadow:0 2px 14px rgba(0,0,0,0.1)
}
.masthead .primary-content .tagline{
    font-size:28px !important;
	 /*font-size:7.5rem;*/
    /*line-height:0.95;*/
    line-height:normal;
   /* font-weight:500;*/
	font-weight:500;
	text-align: center;
    letter-spacing:-0.02em;
    padding-bottom:55px;
	color: #202020;
    -webkit-transform:translateX(-0.0625em);
    transform:translateX(-0.0625em);
    text-shadow:0 6px 30px rgba(0,0,0,0.15)
}
.masthead .primary-content .tagline span{padding: 20px 0}
@media (max-width: 1040px), (max-height: 849px){
    .masthead .primary-content .tagline{
        /*font-size:6rem*/
    }
}
@media (max-width: 849px), (max-height: 699px){
    .masthead .primary-content .tagline{
        font-size:5.5rem;
        padding-bottom:40px
    }
}
@media (max-width: 765px){
    .masthead .primary-content .tagline{
        font-size:4.5rem
    }
}
@media (max-width: 630px){
    .masthead .primary-content .tagline{
        font-size:4rem
    }
}
@media (max-width: 565px), (max-height: 699px){
    .masthead .primary-content .tagline{
        font-size:3.5rem
    }
}
@media (max-width: 499px), (max-height: 499px){
    .masthead .primary-content .tagline{
        font-size:3rem;
			font-size: 20px !important;
		line-height: normal;
    }
}
@media (max-width: 420px){
    .masthead .primary-content .tagline{
        font-size:2.5rem;
		font-size: 20px;
        padding-bottom:20px;
			line-height: normal
    }
}
@media (min-width: 665px) and (max-height: 699px){
    .masthead .primary-content .tagline{
        font-size:4.5rem;
        padding-bottom:25px;
        margin-bottom:16px;
        border-bottom:1px solid white
    }
}
@media (min-width: 665px) and (max-height: 499px){
    .masthead .primary-content .tagline{
        font-size:2.5rem
    }
}
@-webkit-keyframes taglineEmerge{
    0%{
        -webkit-transform:translateY(50px);
        transform:translateY(50px);
        opacity:0
    }
    100%{
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        opacity:1
    }
}
@keyframes taglineEmerge{
    0%{
        -webkit-transform:translateY(50px);
        transform:translateY(50px);
        opacity:0
    }
    100%{
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        opacity:1
    }
}
.masthead .primary-content .tagline span{
    display:block;
    -webkit-transform:translateY(50px);
    transform:translateY(50px);
    opacity:0
}
@media (max-width: 630px){
    .masthead .primary-content .tagline span{
        margin-bottom:0.125em
    }
}
@media (max-height: 670px) and (min-width: 760px){
    .masthead .primary-content .tagline span{
        display:inline-block
    }
}
@media (max-height: 499px) and (min-width: 600px){
    .masthead .primary-content .tagline span{
        display:inline-block
    }
}
.masthead .primary-content.ready-to-animate .tagline span{
    -webkit-animation-name:taglineEmerge;
    animation-name:taglineEmerge;
    -webkit-animation-duration:1400ms;
    animation-duration:1400ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}
.masthead .primary-content.ready-to-animate .tagline span:nth-of-type(2){
    -webkit-animation-delay:300ms;
    animation-delay:300ms
}
.masthead .primary-content.ready-to-animate .tagline span:nth-of-type(3){
    -webkit-animation-delay:600ms;
    animation-delay:600ms
}
.precis{
    overflow:hidden
}
@media (max-width: 739px), (max-height: 699px){
    .precis.above-fold{
        display:none
    }
}
.precis .plate{
    background:white;
    display:flex;
    align-items:center;
    padding:27px 0 39px;
    justify-content:space-between;
    position:relative
}
@media (max-width: 739px){
    .precis .plate{
        display:block
    }
}
.precis .plate:before,.precis .plate:after{
    content:"";
    display:block;
    position:absolute;
    bottom:0;
    width:1px;
    height:100%
}
.precis .plate:after{
    right:0;
    background:white;
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
    width:calc((100vw * 0.13) / 2);
    -webkit-box-shadow:-1px 0 0 white;
    box-shadow:-1px 0 0 white
}
@media (min-width: 1142px){
    .precis .plate:after{
        width:calc((100vw - calc(996 * 1px)) / 2)
    }
}
@media (max-width: 499px){
    .precis .plate:after{
        width:calc((100vw * 0.13) / 3.5)
    }
}
.precis .plate:before{
    left:0;
    background:white;
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
    width:calc((100vw * 0.13) / 3.5);
    -webkit-box-shadow:1px 0 0 white;
    box-shadow:1px 0 0 white
}
.precis .prose{
    max-width:569px;
    color:#333333;
    padding-top:3px;
    line-height:1.5;
    margin-right:20px
}
@media (max-width: 739px){
    .precis .prose{
        margin-bottom:20px;
        font-size:1rem
    }
}
@media (max-width: 499px){
    .precis .prose{
        font-size:0.9375rem;
        line-height:1.4
    }
}
.precis .prose p{
    max-width:29em
}
.precis h2{
    font-weight:500;
    margin-bottom:0.5em
}
@media (max-width: 499px){
    .precis h2{
        margin-bottom:0.25em
    }
}
.precis .action a{
    display:inline-block;
    position:relative;
    z-index:1
}
@media (max-width: 739px){
    .precis .action a{
        display:block
    }
}
@media (min-width: 740px) and (max-width: 1010px){
    .action{
        min-width:260px
    }
}
.action a{
    display:block;
    width:100%
}
.action a span{
    display:block;
    position:relative;
    text-align:center;
    background:#0078d4;
    border-radius:6px;
    padding:24px 41px 31px;
    color:white;
    font-size:1.75rem;
    line-height:1.1;
    font-weight:500;
    z-index:3;
    -webkit-transition:all 220ms;
    transition:all 220ms
}
@media (min-width: 740px) and (max-width: 1010px){
    .action a span{
        font-size:1.5rem;
        padding-right:20px;
        padding-left:20px
    }
}
@media (max-width: 739px){
    .action a span{
        font-size:1.5rem;
        padding:14px 31px 21px;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        width:100%;
        border-radius:4px
    }
}
@media (max-width: 499px){
    .action a span{
        font-size:1.25rem !important;
        padding:12px 10px 18px
    }
}
@media (max-height: 699px){
    .action a span{
        font-size:1.25rem;
        padding:12px 10px 16px
    }
}
.action a:before{
    content:"";
    display:block;
    position:relative;
    z-index:2;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    background:gray;
    width:90%;
    height:70%;
    border-radius:6px;
    -webkit-box-shadow:0 15px 15px -4px rgba(0,0,0,0.5);
    box-shadow:0 15px 15px -4px rgba(0,0,0,0.5);
    -webkit-transition:all 190ms;
    transition:all 190ms
}
@media (max-width: 739px){
    .action a:before{
        -webkit-box-shadow:0 12px 13px rgba(0,0,0,0.3);
        box-shadow:0 12px 13px rgba(0,0,0,0.3)
    }
}
.action a:hover span{
    -webkit-transform:translateY(-2px);
    transform:translateY(-2px)
}
.action a:hover:before{
    -webkit-transform:translate(-50%, -35%);
    transform:translate(-50%, -35%);
    -webkit-box-shadow:0 7px 38px 0 rgba(0,0,0,0.31);
    box-shadow:0 7px 38px 0 rgba(0,0,0,0.31)
}
.mobile-cta{
    display:none;
    position:relative;
    margin-bottom:25px
}
.mobile-cta h2{
    font-weight:500;
    font-size:1.5rem;
    line-height:1;
    margin-bottom:1em;
    text-shadow:0 1px 15px rgba(0,0,0,0.4);
    -webkit-transform:translateY(50px);
    transform:translateY(50px);
    opacity:0
}
@media (max-width: 450px){
    .mobile-cta h2{
        font-size:1.25rem
    }
}
@media (max-width: 360px){
    .mobile-cta h2{
        font-size:1rem
    }
}
@media (max-width: 739px), (max-height: 699px){
    .mobile-cta{
        display:block
    }
}
.mobile-cta .action-wrapper{
    position:relative
}
@media (min-width: 665px) and (max-height: 699px){
    .mobile-cta h2{
        margin-bottom:0;
        width:55%;
        font-size:1.125rem
    }
    .mobile-cta .action-wrapper{
        width:42%
    }
    .mobile-cta .action a span{
        font-size:1.125rem
    }
    .mobile-cta .bound{
        display:flex;
        justify-content:space-between;
        align-items:center
    }
}
.ready-to-animate .mobile-cta h2{
    -webkit-animation-name:taglineEmerge;
    animation-name:taglineEmerge;
    -webkit-animation-duration:1400ms;
    animation-duration:1400ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-delay:400ms;
    animation-delay:400ms
}
[data-is-probably-mobile-os="true"] .extraneous-descriptive-summary{
    display:none
}
.extraneous-descriptive-summary{
    display:none
}
body[data-is-probably-mobile-os="true"] .masthead{
    min-height:calc(100%);
    max-height:calc(100%)
}
@media (max-height: 415px){
    body[data-is-probably-mobile-os="true"] .masthead{
        min-height:calc(100% - 53px);
        max-height:calc(100% - 53px)
    }
}
@media (max-width: 600px) and (max-height: 390px){
    .masthead{
        height:auto
    }
}
@media (max-width: 550px) and (max-height: 440px){
    .masthead{
        height:auto
    }
}
body[data-show-gdpr-banner="true"] .masthead{
    min-height:calc(100vh - 114px);
    min-height:calc((100vh - var(--vh-offset)) - 114px)
}
@media (min-width: 850px){
    body[data-show-gdpr-banner="true"] .masthead{
        min-height:calc((100vh - var(--vh-offset)) - 52px)
    }
}
body[data-show-gdpr-banner="true"][data-is-probably-mobile-os="true"] .masthead{
    min-height:calc(100% - 114px);
    max-height:calc(100% - 114px)
}
@media (max-height: 415px){
    body[data-show-gdpr-banner="true"][data-is-probably-mobile-os="true"] .masthead{
        min-height:calc((100% - 53px) - 114px);
        max-height:calc((100% - 53px) - 114px)
    }
}
[name="conditional-app-appeal"]{
    display:none
}
[data-likely-os="iOS"] [name="conditional-app-appeal"],[data-likely-os="Android"] [name="conditional-app-appeal"]{
    display:block
}
[name="conditional-app-appeal"]{
    text-align:center;
    margin-top:100px
}
@media (max-width: 699px){
    [name="conditional-app-appeal"]{
        margin-top:50px
    }
}
[name="conditional-app-appeal"] .device-photograph{
    position:relative;
    width:80%;
    max-width:680px;
    margin:0 auto;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain
}
[name="conditional-app-appeal"] .device-photograph:before{
    display:block;
    content:"";
    width:100%;
    padding-top:72.72059%
}
[name="conditional-app-appeal"] .device-photograph>.fill{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
[name="conditional-app-appeal"] figcaption{
    margin-top:1.5rem
}
[name="conditional-app-appeal"] h1{
    color:#333;
    font-weight:500;
    line-height:1.1;
    max-width:11em;
    margin:0 auto 0.75em;
    font-size:1.75rem
}
[name="conditional-app-appeal"] p{
    max-width:18em;
    margin:0 auto
}
[name="conditional-app-appeal"] .app-store-outbound{
    display:block;
    width:120px;
    height:40px;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    margin:1.75em auto 0;
    text-indent:100%;
    overflow:hidden;
    white-space:nowrap
}
[name="conditional-app-appeal"] .app-store-outbound.ios{
    background-image:url("../images/download-app-badge-ios.svg")
}
[name="conditional-app-appeal"] .app-store-outbound.android{
    background-image:url("../images/download-app-badge-android.svg")
}
@media (min-width: 550px){
    [name="conditional-app-appeal"] figcaption{
        margin-top:2.5em
    }
    [name="conditional-app-appeal"] h1{
        font-size:2.5rem
    }
    [name="conditional-app-appeal"] p{
        font-size:1.25rem;
        max-width:23em
    }
}
@media (min-width: 1000px){
    [name="conditional-app-appeal"] figcaption{
        margin-top:3em
    }
}
[data-likely-os="iOS"] [name="conditional-app-appeal"] .android{
    display:none
}
[data-likely-os="Android"] [name="conditional-app-appeal"] .ios{
    display:none
}
@-webkit-keyframes introPlateRaise{
    0%{
        -webkit-transform:translateY(17%);
        transform:translateY(17%);
        -webkit-box-shadow:70px 60px 90px rgba(0,0,0,0.15);
        box-shadow:70px 60px 90px rgba(0,0,0,0.15)
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0);
        -webkit-box-shadow:none;
        box-shadow:none
    }
}
@keyframes introPlateRaise{
    0%{
        -webkit-transform:translateY(17%);
        transform:translateY(17%);
        -webkit-box-shadow:70px 60px 90px rgba(0,0,0,0.15);
        box-shadow:70px 60px 90px rgba(0,0,0,0.15)
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0);
        -webkit-box-shadow:none;
        box-shadow:none
    }
}
@-webkit-keyframes diamondRise{
    0%{
        -webkit-transform:translate(-50%, 100%);
        transform:translate(-50%, 100%)
    }
    100%{
        -webkit-transform:translate(-50%, 0%);
        transform:translate(-50%, 0%)
    }
}
@keyframes diamondRise{
    0%{
        -webkit-transform:translate(-50%, 100%);
        transform:translate(-50%, 100%)
    }
    100%{
        -webkit-transform:translate(-50%, 0%);
        transform:translate(-50%, 0%)
    }
}
@-webkit-keyframes diamondSink{
    0%{
        -webkit-transform:translate(-50%, 0);
        transform:translate(-50%, 0)
    }
    100%{
        -webkit-transform:translate(-50%, 100%);
        transform:translate(-50%, 100%)
    }
}
@keyframes diamondSink{
    0%{
        -webkit-transform:translate(-50%, 0);
        transform:translate(-50%, 0)
    }
    100%{
        -webkit-transform:translate(-50%, 100%);
        transform:translate(-50%, 100%)
    }
}
[name="a-simple-experience"]{
    padding-top:130px
}
@media (max-width: 999px){
    [name="a-simple-experience"]{
        padding-top:90px
    }
}
[name="a-simple-experience"] header{
    position:relative;
    z-index:1
}
[name="a-simple-experience"] header .media{
    width:100%;
    height:412px;
    z-index:1;
    overflow:hidden
}
@media (max-width: 699px){
    [name="a-simple-experience"] header .media{
        height:320px
    }
}
@media (max-width: 599px){
    [name="a-simple-experience"] header .media{
        height:280px
    }
}
@media (max-width: 499px){
    [name="a-simple-experience"] header .media{
        height:240px
    }
}
@media (max-width: 433px){
    [name="a-simple-experience"] header .media{
        height:200px
    }
}
@media (max-width: 433px){
    [name="a-simple-experience"] header .media{
        height:180px
    }
}
[name="a-simple-experience"] header .media .bound{
    height:100%
}
[name="a-simple-experience"] header .photo{
    background-repeat:no-repeat;
    background-position:left center;
    background-size:auto 100%;
    width:100%;
    height:100%;
    -webkit-transform:translateX(25%);
    transform:translateX(25%)
}
@media (max-width: 699px){
    [name="a-simple-experience"] header .photo{
        -webkit-transform:translateX(10%);
        transform:translateX(10%);
        background-position:80% center
    }
}
@media (max-width: 433px){
    [name="a-simple-experience"] header .photo{
        background-position:65% center
    }
}
[name="a-simple-experience"] header .text{
    position:relative;
    margin-top:-350px;
    z-index:2
}
@media (max-width: 699px){
    [name="a-simple-experience"] header .text{
        margin-top:-100px
    }
}
@media (max-width: 499px){
    [name="a-simple-experience"] header .text{
        margin-top:-60px
    }
}
[name="a-simple-experience"] header .plate{
    background:white;
    width:51.8072289156627%;
    padding:80px 0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    min-width:516px;
    -webkit-transform:translateY(17%);
    transform:translateY(17%);
    -webkit-animation-duration:1300ms;
    animation-duration:1300ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1
}
@media (max-width: 1020px){
    [name="a-simple-experience"] header .plate{
        min-width:0
    }
}
@media (max-width: 875px){
    [name="a-simple-experience"] header .plate{
        width:60%
    }
}
@media (max-width: 699px){
    [name="a-simple-experience"] header .plate{
        padding:50px 0;
        width:90%
    }
}
[name="a-simple-experience"] header.ready-to-animate .plate{
    -webkit-animation-name:introPlateRaise;
    animation-name:introPlateRaise
}
[name="a-simple-experience"] header h1{
    color:#0078d4;
    font-weight:500;
    font-size:4.375rem;
    line-height:1;
    max-width:6.5em;
    margin-bottom:45px
}
@media (max-width: 1020px){
    [name="a-simple-experience"] header h1{
        font-size:3.5rem
    }
}
@media (max-width: 699px){
    [name="a-simple-experience"] header h1{
        max-width:100%;
        font-size:3rem;
        margin-right:25px
    }
}
@media (max-width: 399px){
    [name="a-simple-experience"] header h1{
        font-size:2.75rem
    }
}
@media (min-width: 700px){
    [name="a-simple-experience"] header h1,[name="a-simple-experience"] header p{
        margin-right:17%
    }
}
[name="a-simple-experience"] header p{
    font-size:1.1875rem;
    line-height:1.5;
    max-width:21em
}
@media (max-width: 699px){
    [name="a-simple-experience"] header p{
        padding-right:20px
    }
}
[name="a-simple-experience"] .tour-the-interface{
    background:#dcebfa;
    position:relative;
    padding-bottom:130px
}
@media (max-width: 699px){
    [name="a-simple-experience"] .tour-the-interface{
        padding-bottom:30px
    }
}
[name="a-simple-experience"] .tour-the-interface:before{
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:20%;
    background:white;
    z-index:1
}
@media (max-width: 699px){
    [name="a-simple-experience"] .tour-the-interface:before{
        height:15%
    }
}
@media (max-width: 499px){
    [name="a-simple-experience"] .tour-the-interface:before{
        height:10%
    }
}
[name="a-simple-experience"] .tour-the-interface .bound{
    position:relative;
    z-index:2
}
[name="a-simple-experience"] .accessibility-interface-descriptions{
    width:1px;
    height:1px;
    overflow:hidden;
    color:rgba(0,0,0,0.01)
}
[name="a-simple-experience"] .interface-arcade-cabinet{
    position:relative;
    z-index:1
}
[name="a-simple-experience"] .monitor{
    position:relative;
    -webkit-box-shadow:0 35px 60px rgba(0,0,0,0.18);
    box-shadow:0 35px 60px rgba(0,0,0,0.18);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    background-color:rgba(0,0,0,0.5);
    background-color:transparent;
    position:relative;
    z-index:1
}
[name="a-simple-experience"] .monitor:before{
    display:block;
    content:"";
    width:100%;
    padding-top:64.10684%
}
[name="a-simple-experience"] .monitor>.fill{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
[name="a-simple-experience"] .controller{
    margin-top:50px;
    position:relative;
    z-index:2
}
[name="a-simple-experience"] .buttons-track{
    display:flex;
    justify-content:space-between
}
[name="a-simple-experience"] .buttons-track li{
    display:block;
    height:87px;
    width:19.3775100401606%;
    background:#0078d4;
    border-radius:5px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    padding-top:47px;
    cursor:default;
    position:relative;
    -webkit-transition:all 300ms;
    transition:all 300ms;
    -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.25);
    box-shadow:0 1px 2px rgba(0,0,0,0.25)
}
@media (max-width: 670px){
    [name="a-simple-experience"] .buttons-track li{
        padding-top:44px;
        height:75px
    }
}
@media screen and (-ms-high-contrast: white-on-black){
    [name="a-simple-experience"] .buttons-track li{
        -webkit-box-shadow:0 0 0 2px white;
        box-shadow:0 0 0 2px white
    }
}
@media screen and (-ms-high-contrast: black-on-white){
    [name="a-simple-experience"] .buttons-track li{
        -webkit-box-shadow:0 0 0 2px black;
        box-shadow:0 0 0 2px black
    }
}
[name="a-simple-experience"] .buttons-track .beak{
    display:block;
    position:absolute;
    top:-10px;
    height:10px;
    left:0;
    width:100%;
    overflow:hidden;
    z-index:1
}
@media screen and (-ms-high-contrast: black-on-white){
    [name="a-simple-experience"] .buttons-track .beak{
        display:none
    }
}
[name="a-simple-experience"] .buttons-track .beak:before{
    content:"";
    display:block;
    position:absolute;
    width:20px;
    height:10px;
    background-image:url("../images/triangle-up.svg");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center bottom;
    bottom:0;
    left:50%;
    -webkit-transform:translate(-50%, 100%);
    transform:translate(-50%, 100%);
    -webkit-animation-name:diamondSink;
    animation-name:diamondSink;
    -webkit-animation-duration:50ms;
    animation-duration:50ms;
    -webkit-animation-delay:0ms;
    animation-delay:0ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1
}
[name="a-simple-experience"] .buttons-track .icon{
    display:block;
    position:absolute;
    left:50%;
    top:15px;
    z-index:3;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    width:27px;
    height:22px;
    overflow:hidden
}
@media (max-width: 670px){
    [name="a-simple-experience"] .buttons-track .icon{
        top:13px
    }
}
[name="a-simple-experience"] .buttons-track .icon svg path{
    fill:white
}
@media screen and (-ms-high-contrast: black-on-white){
    [name="a-simple-experience"] .buttons-track .icon svg path{
        fill:black
    }
}
[name="a-simple-experience"] .buttons-track .label{
    display:block;
    width:90%;
    margin:0 auto;
    text-align:center;
    color:white;
    font-weight:500;
    font-size:1.25rem;
    line-height:1;
    overflow:hidden;
    text-overflow:ellipsis;
    position:relative;
    white-space:nowrap
}
@media (max-width: 670px){
    [name="a-simple-experience"] .buttons-track .label{
        font-size:1rem
    }
}
@media (max-width: 549px){
    [name="a-simple-experience"] .buttons-track .label{
        font-size:0.8125rem
    }
}
@media (max-width: 369px){
    [name="a-simple-experience"] .buttons-track .label{
        font-size:0.75rem;
        letter-spacing:-0.05em
    }
}
@media screen and (-ms-high-contrast: white-on-black){
    [name="a-simple-experience"] .buttons-track .label{
        color:white
    }
}
[name="a-simple-experience"] .buttons-track li.default .beak:before{
    -webkit-transform:translate(-50%, 0%);
    transform:translate(-50%, 0%)
}
[name="a-simple-experience"] .buttons-track li.current{
    -webkit-transform:translateY(-3px);
    transform:translateY(-3px);
    background-color:white;
    -webkit-box-shadow:0 18px 35px rgba(0,0,0,0.15);
    box-shadow:0 18px 35px rgba(0,0,0,0.15)
}
[name="a-simple-experience"] .buttons-track li.current .beak:before{
    -webkit-animation-name:diamondRise;
    animation-name:diamondRise;
    -webkit-animation-duration:100ms;
    animation-duration:100ms;
    -webkit-animation-delay:210ms;
    animation-delay:210ms
}
[name="a-simple-experience"] .buttons-track li.current .label{
    color:#0078d4
}
[name="a-simple-experience"] .buttons-track li.current .icon svg path{
    fill:#0078d4
}
@media screen and (-ms-high-contrast: white-on-black){
    [name="a-simple-experience"] .buttons-track li.current{
        background-color:white
    }
    [name="a-simple-experience"] .buttons-track li.current .icon svg path{
        fill:white
    }
}
@media screen and (-ms-high-contrast: black-on-white){
    [name="a-simple-experience"] .buttons-track li.current{
        -webkit-box-shadow:0 0 0 2px black, 0 6px 0 black;
        box-shadow:0 0 0 2px black, 0 6px 0 black
    }
    [name="a-simple-experience"] .buttons-track li.current .icon svg path{
        fill:black
    }
}
[name="a-simple-experience"] .buttons-captions{
    margin-top:20px;
    display:flex;
    justify-content:space-between
}
[name="a-simple-experience"] .buttons-captions li{
    display:block;
    width:19.3775100401606%;
    text-align:center;
    position:relative
}
[name="a-simple-experience"] .buttons-captions p{
    position:relative;
    font-size:0.8125rem;
    color:#0078d4;
    margin-left:-20%;
    width:140%;
    opacity:0;
    -webkit-transition:all 400ms;
    transition:all 400ms
}
[name="a-simple-experience"] .buttons-captions em{
    font-weight:500
}
[name="a-simple-experience"] .buttons-captions[data-current="1"] li:nth-of-type(1) p,[name="a-simple-experience"] .buttons-captions[data-current="2"] li:nth-of-type(2) p,[name="a-simple-experience"] .buttons-captions[data-current="3"] li:nth-of-type(3) p,[name="a-simple-experience"] .buttons-captions[data-current="4"] li:nth-of-type(4) p,[name="a-simple-experience"] .buttons-captions[data-current="5"] li:nth-of-type(5) p{
    opacity:1
}
@media (max-width: 599px){
    [name="a-simple-experience"] .buttons-captions{
        margin-top:12px;
        position:relative;
        height:4em;
        display:block
    }
    [name="a-simple-experience"] .buttons-captions li{
        width:100%;
        position:absolute;
        left:0;
        top:0
    }
    [name="a-simple-experience"] .buttons-captions p{
        width:100%;
        max-width:25em;
        margin:0 auto 0 auto
    }
}
[name="a-simple-experience"] .scenarios{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1
}
[name="a-simple-experience"] .scenarios .scenario{
    position:absolute;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100% auto;
    opacity:0;
    -webkit-transition:all 400ms;
    transition:all 400ms
}
[name="a-simple-experience"] .scenarios .scenario.active{
    opacity:1
}
[name="a-simple-experience"] .scenarios [data-scenario="2"]{
    width:calc((2396 / 2396) * 100%);
    height:calc((1440 / 1536) * 100%);
    left:0;
    bottom:0
}
[name="a-simple-experience"] .scenarios [data-scenario="3"]{
    width:calc((748 / 2396) * 100%);
    height:calc((1250 / 1536) * 100%);
    background-position:left top;
    left:51.5859766277129%;
    top:14.5%
}
[name="a-simple-experience"] .scenarios [data-scenario="4"]{
    width:calc((769 / 2396) * 100%);
    height:calc((1536 / 1536) * 100%);
    right:0;
    top:0
}
[name="a-simple-experience"] .scenarios [data-scenario="5"]{
    width:calc((2396 / 2396) * 100%);
    height:calc((1219 / 1536) * 100%);
    left:0;
    top:0
}
@-webkit-keyframes cornerExpand{
    0%{
        width:10px
    }
    100%{
        width:calc((394 / 996) * 100%)
    }
}
@keyframes cornerExpand{
    0%{
        width:10px
    }
    100%{
        width:calc((394 / 996) * 100%)
    }
}
@-webkit-keyframes cornerRetract{
    0%{
        width:calc((394 / 996) * 100%)
    }
    100%{
        width:10px
    }
}
@keyframes cornerRetract{
    0%{
        width:calc((394 / 996) * 100%)
    }
    100%{
        width:10px
    }
}
@-webkit-keyframes securityIconReveal{
    0%{
        opacity:0;
        -webkit-transform:scaleX(0.02);
        transform:scaleX(0.02)
    }
    50%{
        opacity:1
    }
    100%{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@keyframes securityIconReveal{
    0%{
        opacity:0;
        -webkit-transform:scaleX(0.02);
        transform:scaleX(0.02)
    }
    50%{
        opacity:1
    }
    100%{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@-webkit-keyframes securityIconHide{
    0%{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
    100%{
        opacity:0;
        -webkit-transform:scaleX(0.02);
        transform:scaleX(0.02)
    }
}
@keyframes securityIconHide{
    0%{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
    100%{
        opacity:0;
        -webkit-transform:scaleX(0.02);
        transform:scaleX(0.02)
    }
}
[name="security"]{
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:cover;
    background-color:black;
    color:white;
    position:relative;
    overflow:hidden;
    font-weight:500
}
@media (max-width: 699px){
    [name="security"]{
        /*background-image:none !important*/
    }
}
@media (min-width: 700px) and (max-width: 1023px){
    [name="security"]{
        background-position:65% bottom
    }
}

@media (max-width: 1199px){
    [name="security"]:before,[name="security"]:after{
        width:20px
    }
}
@media (max-width: 999px){
    [name="security"]:before,[name="security"]:after{
        width:13px
    }
}
@media (max-width: 699px){
    [name="security"]:before,[name="security"]:after{
        width:10px
    }
}
[name="security"]:before{
    left:0
}
[name="security"]:after{
    right:0
}
[name="security"] .corner{
    display:block;
    position:absolute;
    height:50px;
    z-index:2
}
@media screen and (max-width: 699px){
    [name="security"] .corner{
        height:40px
    }
}
[name="security"] .corner:before{
    display:block;
    content:"";
    position:absolute;
    height:50px;
    width:10px
}
@media screen and (max-width: 699px){
    [name="security"] .corner:before{
        height:40px
    }
}
[name="security"] .mobile-exclusive-photo{
    position:relative;
    position:relative;
    z-index:1;
    margin-left:-7.5%;
    width:115%;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    background-color:black
}
@media (min-width: 700px){
    [name="security"] .mobile-exclusive-photo{
        display:none
    }
}
[name="security"] .mobile-exclusive-photo:before{
    display:block;
    content:"";
    width:100%;
    padding-top:113.07143%
}
[name="security"] .mobile-exclusive-photo>.fill{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
[name="security"] .primary{
    margin-bottom:100px
}
[name="security"] .primary .bound{
    position:relative
}
@media (min-width: 700px){
    [name="security"] .primary .bound{
        padding-top:140px
    }
}
@media (min-width: 700px){
    [name="security"] .primary .text{
        width:56.8273092369478%
    }
}
[name="security"] .primary h1{
    font-size:5rem;
    line-height:0.95;
    margin-bottom:1em
}
@media (min-width: 700px){
    [name="security"] .primary h1{
        min-width:7em
    }
}
@media (max-width: 630px){
    [name="security"] .primary h1{
        font-size:4rem
    }
}
@media (max-width: 490px){
    [name="security"] .primary h1{
        font-size:3rem
    }
}
@media (max-width: 699px){
    [name="security"] .primary h1{
        margin-top:0.5em
    }
}
[name="security"] .primary p{
    font-size:1.1875rem;
    line-height:1.4;
    max-width:23em
}
[name="security"] .primary .corner{
    background:#dcebfa;
    top:0;
    right:0;
    width:10px;
    -webkit-transform-origin:right center;
    transform-origin:right center;
    -webkit-animation-name:cornerRetract;
    animation-name:cornerRetract;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-duration:300ms;
    animation-duration:300ms
}
[name="security"] .primary .corner:before{
    top:0;
    right:0;
    background:#dcebfa;
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
    -webkit-box-shadow:-2px 0 0 #dcebfa;
    box-shadow:-2px 0 0 #dcebfa;
    width:calc((100vw - calc(996 * 1px)) / 2)
}
@media (max-width: 1142px){
    [name="security"] .primary .corner:before{
        width:calc((100vw * 0.13) / 2)
    }
}
[name="security"].ready-to-animate .primary .corner{
    -webkit-animation-name:cornerExpand;
    animation-name:cornerExpand;
    -webkit-animation-duration:1500ms;
    animation-duration:1500ms
}
[name="security"] .features{
    position:relative
}
[name="security"] .features .bound{
    position:relative;
    z-index:1
}
[name="security"] .features .corner{
    background:white;
    left:0;
    bottom:0;
    width:86px;
    -webkit-box-shadow:0 2px 0 white;
    box-shadow:0 2px 0 white
}
[name="security"] .features .corner:before{
    background:white;
    bottom:0;
    left:0;
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
    -webkit-box-shadow:2px 0 0 white, 0 2px 0 white;
    box-shadow:2px 0 0 white, 0 2px 0 white;
    width:calc((100vw - calc(996 * 1px)) / 2)
}
@media (max-width: 1142px){
    [name="security"] .features .corner:before{
        width:calc((100vw * 0.13) / 2)
    }
}
[name="security"] .features ul{
    max-width:894px;
    /*font-size:0.9375rem;*/
    padding-bottom:150px;
    position:relative
}
@media screen and (max-width: 699px){
    [name="security"] .features ul{
        padding-bottom:70px
    }
}
[name="security"] .features ul:before{
    content:"";
    display:block;
    position:absolute;
	top: 0;
    /*bottom:0;*/
    width:1px;
    height:75%;
    left:96px;
    background:white;
    -webkit-transform:translateX(-1px);
    transform:translateX(-1px)
}
[name="security"] .features li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:65px;
    min-height:47px
}
[name="security"] .features .text{
    display:block;
    position:relative;
    width:calc(100% - 116px);
    max-width:878px
}
@media (max-width: 449px){
    [name="security"] .features .text{
        width:auto;
        width:calc(100% - (86px + 33px))
    }
}
[name="security"] .features small{
    display:block;
    color:#edaa24;
    margin-top:0.25em;
    position:relative;
    padding-left:17px
}
[name="security"] .features small:before{
    content:"";
    display:block;
    position:absolute;
    left:0;
    top:50%;
    -webkit-transform:translateY(-40%);
    transform:translateY(-40%);
    background-image:url("../images/premium-diamond-03.svg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    width:12px;
    height:12px
}
[name="security"] .features .icon{
    display:block;
    width:77px;
    height:77px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    -webkit-transform:scaleX(0.02);
    transform:scaleX(0.02);
    opacity:0;
    -webkit-transform-origin:center center;
    transform-origin:center center;
    -webkit-animation-name:securityIconHide;
    animation-name:securityIconHide;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-duration:200ms;
    animation-duration:200ms
}
@media (max-width: 699px){
    [name="security"] .features .icon{
        width:57px;
        height:57px;
        margin-left:14px
    }
}
[name="security"] .features .icon.ready-to-animate{
    -webkit-animation-name:securityIconReveal;
    animation-name:securityIconReveal;
    -webkit-animation-duration:800ms;
    animation-duration:800ms;
    -webkit-animation-delay:200ms;
    animation-delay:200ms
}
.icono,
.iconos_nosotros{
	background-repeat: no-repeat;
	width: 80px;
	height: 80px;
}
[name="security"] .features li:nth-of-type(1) .icono{
    background-image:url("../../images/iconos_servicios/branding.svg");	
}
[name="security"] .features li:nth-of-type(2) .icono{
    /*background-image:url("../../images/iconos_servicios/campanas_digitales.svg")*/
		 background-image:url("../../images/iconos_servicios/gestion_de_redes_sociales.svg");
}
[name="security"] .features li:nth-of-type(3) .icono{
    background-image:url("../../images/iconos_servicios/pagina_web.svg");
}
[name="security"] .features li:nth-of-type(4) .icono{
    background-image:url("../../images/iconos_servicios/animacion-y-edicion-digital-a41.svg");
}



[name="security"] .features li:nth-of-type(1) .iconos_nosotros{
    background-image:url("../../images/iconos_servicios/que_es_savitar.svg");	
}
[name="security"] .features li:nth-of-type(2) .iconos_nosotros{
		 background-image:url("../../images/iconos_servicios/mision.svg");
}
[name="security"] .features li:nth-of-type(3) .iconos_nosotros{
    background-image:url("../../images/iconos_servicios/vision.svg");
}
[name="security"] .features li:nth-of-type(4) .iconos_nosotros{
    background-image:url("../../images/iconos_servicios/historia.svg");
}
@-webkit-keyframes emergeFromEast{
    0%{
        -webkit-transform:translateX(75%);
        transform:translateX(75%);
        opacity:0
    }
    100%{
        -webkit-transform:translateX(0);
        transform:translateX(0);
        opacity:1
    }
}
@keyframes emergeFromEast{
    0%{
        -webkit-transform:translateX(75%);
        transform:translateX(75%);
        opacity:0
    }
    100%{
        -webkit-transform:translateX(0);
        transform:translateX(0);
        opacity:1
    }
}
@-webkit-keyframes emergeFromWest{
    0%{
        -webkit-transform:translateX(-75%);
        transform:translateX(-75%);
        opacity:0
    }
    100%{
        -webkit-transform:translateX(0);
        transform:translateX(0);
        opacity:1
    }
}
@keyframes emergeFromWest{
    0%{
        -webkit-transform:translateX(-75%);
        transform:translateX(-75%);
        opacity:0
    }
    100%{
        -webkit-transform:translateX(0);
        transform:translateX(0);
        opacity:1
    }
}
@-webkit-keyframes appTileEmerge{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@keyframes appTileEmerge{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@-webkit-keyframes appTilesTrackRotate{
    0%{
        -webkit-transform:translate(-50%, -50%) rotate(0deg);
        transform:translate(-50%, -50%) rotate(0deg)
    }
    100%{
        -webkit-transform:translate(-50%, -50%) rotate(359.9deg);
        transform:translate(-50%, -50%) rotate(359.9deg)
    }
}
@keyframes appTilesTrackRotate{
    0%{
        -webkit-transform:translate(-50%, -50%) rotate(0deg);
        transform:translate(-50%, -50%) rotate(0deg)
    }
    100%{
        -webkit-transform:translate(-50%, -50%) rotate(359.9deg);
        transform:translate(-50%, -50%) rotate(359.9deg)
    }
}
@-webkit-keyframes appTileCorrectiveRotate{
    0%{
        -webkit-transform:translate(-50%, -50%) rotate(0deg);
        transform:translate(-50%, -50%) rotate(0deg)
    }
    100%{
        -webkit-transform:translate(-50%, -50%) rotate(-359.9deg);
        transform:translate(-50%, -50%) rotate(-359.9deg)
    }
}
@keyframes appTileCorrectiveRotate{
    0%{
        -webkit-transform:translate(-50%, -50%) rotate(0deg);
        transform:translate(-50%, -50%) rotate(0deg)
    }
    100%{
        -webkit-transform:translate(-50%, -50%) rotate(-359.9deg);
        transform:translate(-50%, -50%) rotate(-359.9deg)
    }
}
@-webkit-keyframes freeSink{
    0%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
    100%{
        opacity:0;
        -webkit-transform:translateY(0.5em);
        transform:translateY(0.5em)
    }
}
@keyframes freeSink{
    0%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
    100%{
        opacity:0;
        -webkit-transform:translateY(0.5em);
        transform:translateY(0.5em)
    }
}
@-webkit-keyframes freeRise{
    0%{
        opacity:0;
        -webkit-transform:translateY(0.5em);
        transform:translateY(0.5em)
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
@keyframes freeRise{
    0%{
        opacity:0;
        -webkit-transform:translateY(0.5em);
        transform:translateY(0.5em)
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
.block[name="productivity-apps"]{
    margin-top:180px;
    margin-bottom:180px
}
@media (max-width: 750px){
    .block[name="productivity-apps"]{
        margin-bottom:120px
    }
}
@media (max-width: 500px){
    .block[name="productivity-apps"]{
        margin-top:120px;
        margin-bottom:60px
    }
}
.block[name="productivity-apps"] header{
    margin-bottom:130px;
    text-align:center;
    font-weight:500;
    font-size:5rem;
    line-height:0.9
}
.block[name="productivity-apps"] header span{
    color:#333;
    display:block;
    margin-bottom:0.625em
}
.block[name="productivity-apps"] header span:last-of-type{
    color:#0078d4;
    opacity:0;
    -webkit-transform:translateY(0.5em);
    transform:translateY(0.5em);
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-name:freeSink;
    animation-name:freeSink;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-duration:150ms;
    animation-duration:150ms;
    -webkit-animation-delay:0;
    animation-delay:0;
    margin-bottom:0
}
.block[name="productivity-apps"] header span:last-of-type.visible{
    -webkit-animation-name:freeRise;
    animation-name:freeRise;
    -webkit-animation-duration:700ms;
    animation-duration:700ms;
    -webkit-animation-delay:50ms;
    animation-delay:50ms
}
@media (max-width: 999px){
    .block[name="productivity-apps"] header{
        font-size:4.5rem
    }
}
@media (max-width: 750px){
    .block[name="productivity-apps"] header{
        margin-bottom:150px;
        font-size:4rem
    }
}
@media (max-width: 660px){
    .block[name="productivity-apps"] header{
        margin-bottom:100px;
        font-size:3.5rem
    }
}
@media (max-width: 499px){
    .block[name="productivity-apps"] header{
        margin-bottom:100px;
        font-size:3rem
    }
}
@media (max-width: 399px){
    .block[name="productivity-apps"] header{
        margin-bottom:100px;
        font-size:2.75rem
    }
}
.block[name="productivity-apps"] .carousel-placeholder{
    position:relative;
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover
}
.block[name="productivity-apps"] .carousel-placeholder:before{
    display:block;
    content:"";
    width:100%;
    padding-top:46.12576%
}
.block[name="productivity-apps"] .carousel-placeholder>.fill{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
.block[name="productivity-apps"] .description{
    margin-top:80px;
    margin-bottom:80px;
    font-size:1.1875rem;
    line-height:1.5
}
.block[name="productivity-apps"] .description .bound{
    max-width:400px
}
.block[name="productivity-apps"] .description mark{
    font-weight:500
}
@media (max-width: 500px){
    .block[name="productivity-apps"] .description{
        margin-top:30px;
        margin-bottom:30px
    }
}
@media screen and (-ms-high-contrast: white-on-black){
    .block[name="productivity-apps"] .description mark{
        color:white
    }
}
.block[name="productivity-apps"] .app-icons-in-orbit{
    overflow:hidden
}
.block[name="productivity-apps"] .app-icons-in-orbit .visualization{
    position:relative;
    width:320px;
    height:320px;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    margin:0 auto;
    -webkit-transform-origin:center center;
    transform-origin:center center
}
@media (max-width: 419px){
    .block[name="productivity-apps"] .app-icons-in-orbit .visualization{
        -webkit-transform:scale(0.75);
        transform:scale(0.75)
    }
}
.block[name="productivity-apps"] .app-icons-in-orbit .app-tiles-track{
    position:absolute;
    left:50%;
    top:50%;
    width:82%;
    height:82%;
    border-radius:100%;
    -webkit-transform:translate(-50%, -50%) rotate(0deg);
    transform:translate(-50%, -50%) rotate(0deg);
    -webkit-animation-duration:5000ms;
    animation-duration:5000ms;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-timing-function:linear;
    animation-timing-function:linear
}
.block[name="productivity-apps"] .app-icons-in-orbit .app-tile{
    display:block;
    position:absolute;
    width:44px;
    height:44px;
    border-radius:10px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    -webkit-transform:translate(-50%, -50%) rotate(0deg);
    transform:translate(-50%, -50%) rotate(0deg);
    -webkit-animation-duration:5000ms, 750ms;
    animation-duration:5000ms, 750ms;
    -webkit-animation-iteration-count:infinite, 1;
    animation-iteration-count:infinite, 1;
    -webkit-animation-fill-mode:forwards, forwards;
    animation-fill-mode:forwards, forwards;
    -webkit-animation-timing-function:linear, ease-in;
    animation-timing-function:linear, ease-in;
    opacity:0
}
.block[name="productivity-apps"] .app-icons-in-orbit .app-tile[data-tile="word"]{
    left:24.5%;
    top:9%
}
.block[name="productivity-apps"] .app-icons-in-orbit .app-tile[data-tile="powerpoint"]{
    left:75.5%;
    top:9%
}
.block[name="productivity-apps"] .app-icons-in-orbit .app-tile[data-tile="onedrive"]{
    left:100%;
    top:50%
}
.block[name="productivity-apps"] .app-icons-in-orbit .app-tile[data-tile="onenote"]{
    left:75.5%;
    top:91%
}
.block[name="productivity-apps"] .app-icons-in-orbit .app-tile[data-tile="skype"]{
    left:24.5%;
    top:91%
}
.block[name="productivity-apps"] .app-icons-in-orbit .app-tile[data-tile="excel"]{
    left:0%;
    top:50%
}
.block[name="productivity-apps"] .app-icons-in-orbit .visualization.ready-to-animate .app-tiles-track{
    -webkit-animation-name:appTilesTrackRotate;
    animation-name:appTilesTrackRotate
}
.block[name="productivity-apps"] .app-icons-in-orbit .visualization.ready-to-animate .app-tile{
    -webkit-animation-name:appTileCorrectiveRotate, appTileEmerge;
    animation-name:appTileCorrectiveRotate, appTileEmerge
}
.block[name="productivity-apps"] .app-icons-in-orbit .visualization.ready-to-animate .app-tile[data-tile="powerpoint"]{
    -webkit-animation-delay:0s, 1000ms;
    animation-delay:0s, 1000ms
}
.block[name="productivity-apps"] .app-icons-in-orbit .visualization.ready-to-animate .app-tile[data-tile="onedrive"]{
    -webkit-animation-delay:0s, 800ms;
    animation-delay:0s, 800ms
}
.block[name="productivity-apps"] .app-icons-in-orbit .visualization.ready-to-animate .app-tile[data-tile="onenote"]{
    -webkit-animation-delay:0s, 600ms;
    animation-delay:0s, 600ms
}
.block[name="productivity-apps"] .app-icons-in-orbit .visualization.ready-to-animate .app-tile[data-tile="skype"]{
    -webkit-animation-delay:0s, 400ms;
    animation-delay:0s, 400ms
}
.block[name="productivity-apps"] .app-icons-in-orbit .visualization.ready-to-animate .app-tile[data-tile="excel"]{
    -webkit-animation-delay:0s, 200ms;
    animation-delay:0s, 200ms
}
@-webkit-keyframes trackRatchet{
    0%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    18.333%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    33.333%{
        -webkit-transform:translateX(-16.81333%) translateZ(0);
        transform:translateX(-16.81333%) translateZ(0)
    }
    51.6663%{
        -webkit-transform:translateX(-16.81333%) translateZ(0);
        transform:translateX(-16.81333%) translateZ(0)
    }
    66.6663%{
        -webkit-transform:translateX(-33.62666%) translateZ(0);
        transform:translateX(-33.62666%) translateZ(0)
    }
    84.9996%{
        -webkit-transform:translateX(-33.62666%) translateZ(0);
        transform:translateX(-33.62666%) translateZ(0)
    }
    100%{
        -webkit-transform:translateX(-50.44%) translateZ(0);
        transform:translateX(-50.44%) translateZ(0)
    }
}
@keyframes trackRatchet{
    0%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    18.333%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    33.333%{
        -webkit-transform:translateX(-16.81333%) translateZ(0);
        transform:translateX(-16.81333%) translateZ(0)
    }
    51.6663%{
        -webkit-transform:translateX(-16.81333%) translateZ(0);
        transform:translateX(-16.81333%) translateZ(0)
    }
    66.6663%{
        -webkit-transform:translateX(-33.62666%) translateZ(0);
        transform:translateX(-33.62666%) translateZ(0)
    }
    84.9996%{
        -webkit-transform:translateX(-33.62666%) translateZ(0);
        transform:translateX(-33.62666%) translateZ(0)
    }
    100%{
        -webkit-transform:translateX(-50.44%) translateZ(0);
        transform:translateX(-50.44%) translateZ(0)
    }
}
@-webkit-keyframes appOpacityWord{
    0%{
        opacity:1
    }
    18.333%{
        opacity:1
    }
    33.333%{
        opacity:.2
    }
    51.6663%{
        opacity:.2
    }
    66.6663%{
        opacity:.2
    }
    84.9996%{
        opacity:.2
    }
    100%{
        opacity:1
    }
}
@keyframes appOpacityWord{
    0%{
        opacity:1
    }
    18.333%{
        opacity:1
    }
    33.333%{
        opacity:.2
    }
    51.6663%{
        opacity:.2
    }
    66.6663%{
        opacity:.2
    }
    84.9996%{
        opacity:.2
    }
    100%{
        opacity:1
    }
}
@-webkit-keyframes appOpacityPowerPoint{
    0%{
        opacity:.2
    }
    18.333%{
        opacity:.2
    }
    33.333%{
        opacity:.2
    }
    51.6663%{
        opacity:.2
    }
    66.6663%{
        opacity:1
    }
    84.9996%{
        opacity:1
    }
    100%{
        opacity:.2
    }
}
@keyframes appOpacityPowerPoint{
    0%{
        opacity:.2
    }
    18.333%{
        opacity:.2
    }
    33.333%{
        opacity:.2
    }
    51.6663%{
        opacity:.2
    }
    66.6663%{
        opacity:1
    }
    84.9996%{
        opacity:1
    }
    100%{
        opacity:.2
    }
}
@-webkit-keyframes appOpacityExcel{
    0%{
        opacity:.2
    }
    18.333%{
        opacity:.2
    }
    33.333%{
        opacity:1
    }
    51.6663%{
        opacity:1
    }
    66.6663%{
        opacity:.2
    }
    84.9996%{
        opacity:.2
    }
    100%{
        opacity:.2
    }
}
@keyframes appOpacityExcel{
    0%{
        opacity:.2
    }
    18.333%{
        opacity:.2
    }
    33.333%{
        opacity:1
    }
    51.6663%{
        opacity:1
    }
    66.6663%{
        opacity:.2
    }
    84.9996%{
        opacity:.2
    }
    100%{
        opacity:.2
    }
}
.productivity-apps-carousel{
    display:none;
    position:relative;
    z-index:1
}
@media (min-width: 749px){
    .productivity-apps-carousel{
        display:block
    }
}
.productivity-apps-carousel .container{
    position:relative;
    overflow:hidden;
    z-index:2
}
.productivity-apps-carousel .container:before{
    display:block;
    content:"";
    width:100%;
    padding-top:45.92308%
}
.productivity-apps-carousel .container>.fill{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
@media (max-width: 700px){
    .productivity-apps-carousel .container{
        position:relative
    }
    .productivity-apps-carousel .container:before{
        display:block;
        content:"";
        width:100%;
        padding-top:50%
    }
    .productivity-apps-carousel .container>.fill{
        display:block;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0
    }
}
.productivity-apps-carousel .track{
    width:314.7692307692308%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:flex;
    justify-content:space-between;
    margin-left:-28%;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:8500ms;
    animation-duration:8500ms;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    animation-timing-function:linear;
    webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -webkit-transform:translateX(0) translateZ(0);
    transform:translateX(0) translateZ(0);
    -webkit-transform-style:preserve-3d;
    -webkit-animation-name:trackRatchet;
    animation-name:trackRatchet;
    -webkit-animation-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1)
}
@media (max-width: 700px){
    .productivity-apps-carousel .track{
        -webkit-animation-duration:4500ms;
        animation-duration:4500ms
    }
}
.productivity-apps-carousel .single-app{
    width:15.9335288367546%;
    color:white;
    font-size:4rem;
    -webkit-animation-duration:8500ms;
    animation-duration:8500ms;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    animation-timing-function:linear;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    opacity:.2;
    webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    position:relative;
    z-index:1
}
@media (max-width: 700px){
    .productivity-apps-carousel .single-app{
        -webkit-animation-duration:4500ms;
        animation-duration:4500ms
    }
}
.productivity-apps-carousel .art{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:contain;
    z-index:1
}
.productivity-apps-carousel .art:after{
    content:"";
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    background:url("../images/productivity-app-drop-shadow.jpg") no-repeat center top;
    background-size:contain;
    width:100%;
    z-index:2;
    opacity:0.8;
    height:14.875%
}
@media (max-width: 700px){
    .productivity-apps-carousel .art:after{
        height:21.875%
    }
}
.productivity-apps-carousel [data-position="1"]{
    -webkit-animation-name:appOpacityPowerPoint;
    animation-name:appOpacityPowerPoint
}
.productivity-apps-carousel [data-position="2"]{
    -webkit-animation-name:appOpacityWord;
    animation-name:appOpacityWord
}
.productivity-apps-carousel [data-position="3"]{
    -webkit-animation-name:appOpacityExcel;
    animation-name:appOpacityExcel
}
.productivity-apps-carousel [data-position="4"]{
    -webkit-animation-name:appOpacityPowerPoint;
    animation-name:appOpacityPowerPoint
}
.productivity-apps-carousel [data-position="5"]{
    -webkit-animation-name:appOpacityWord;
    animation-name:appOpacityWord
}
.productivity-apps-carousel [data-position="6"]{
    -webkit-animation-name:appOpacityExcel;
    animation-name:appOpacityExcel
}
.productivity-apps-carousel .caption{
    position:absolute;
    display:block;
    z-index:3;
    left:0;
    bottom:0;
    width:100%;
    text-align:center;
    font-weight:500;
    font-size:1.875rem;
    line-height:1.2;
    overflow:hidden
}
@media (max-width: 999px){
    .productivity-apps-carousel .caption{
        font-size:1.25rem
    }
}
@media (max-width: 700px){
    .productivity-apps-carousel .caption{
        font-size:1rem
    }
}
.productivity-apps-carousel [data-app="p"] .caption{
    color:#b6472a
}
.productivity-apps-carousel [data-app="w"] .caption{
    color:#2c579b
}
.productivity-apps-carousel [data-app="x"] .caption{
    color:#217245
}
.productivity-apps-carousel-mini{
    overflow:hidden;
    padding-bottom:55px;
    display:none
}
@media (max-width: 750px){
    .productivity-apps-carousel-mini{
        display:block
    }
}
.productivity-apps-carousel-mini .productivity-rows{
    position:relative;
    z-index:1
}
.productivity-apps-carousel-mini .productivity-row{
    margin-top:8%;
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    opacity:0;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-duration:1200ms;
    animation-duration:1200ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}
.productivity-apps-carousel-mini .productivity-row .caption{
    display:block;
    width:32%;
    text-align:center;
    font-weight:500
}
@media (min-width: 550px){
    .productivity-apps-carousel-mini .productivity-row .caption{
        font-size:1.5rem
    }
}
@media (max-width: 370px){
    .productivity-apps-carousel-mini .productivity-row .caption{
        font-size:0.875rem
    }
}
.productivity-apps-carousel-mini .productivity-row .art{
    width:67%;
    position:relative
}
.productivity-apps-carousel-mini .productivity-row.word{
    z-index:2;
    margin-top:0;
    -webkit-transform:translateX(75%);
    transform:translateX(75%)
}
.productivity-apps-carousel-mini .productivity-row.word .caption{
    color:#2c579b
}
.productivity-apps-carousel-mini .productivity-row.excel{
    z-index:3;
    -webkit-transform:translateX(-75%);
    transform:translateX(-75%)
}
.productivity-apps-carousel-mini .productivity-row.excel .art{
    order:2
}
.productivity-apps-carousel-mini .productivity-row.excel .caption{
    color:#217245;
    order:1
}
.productivity-apps-carousel-mini .productivity-row.powerpoint{
    z-index:4;
    -webkit-transform:translateX(75%);
    transform:translateX(75%)
}
.productivity-apps-carousel-mini .productivity-row.powerpoint .caption{
    color:#b6472a
}
.productivity-apps-carousel-mini .productivity-row .screenshot{
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    position:relative;
    z-index:2
}
.productivity-apps-carousel-mini .productivity-row .screenshot:before{
    display:block;
    content:"";
    width:100%;
    padding-top:78%
}
.productivity-apps-carousel-mini .productivity-row .screenshot>.fill{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
.productivity-apps-carousel-mini .productivity-row.word.ready-to-animate{
    -webkit-animation-name:emergeFromEast;
    animation-name:emergeFromEast
}
.productivity-apps-carousel-mini .productivity-row.excel.ready-to-animate{
    -webkit-animation-name:emergeFromWest;
    animation-name:emergeFromWest
}
.productivity-apps-carousel-mini .productivity-row.powerpoint.ready-to-animate{
    -webkit-animation-name:emergeFromEast;
    animation-name:emergeFromEast
}
.productivity-apps-carousel-mini .productivity-row .art:after{
    content:"";
    display:block;
    width:75%;
    height:98%;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    background:gray;
    z-index:1;
    -webkit-box-shadow:0 20px 35px rgba(0,0,0,0.4);
    box-shadow:0 20px 35px rgba(0,0,0,0.4)
}
@-webkit-keyframes mobileDeviceMiniFirst{
    0%{
        -webkit-transform:translateX(61%);
        transform:translateX(61%)
    }
    100%{
        -webkit-transform:translateX(0);
        transform:translateX(0)
    }
}
@keyframes mobileDeviceMiniFirst{
    0%{
        -webkit-transform:translateX(61%);
        transform:translateX(61%)
    }
    100%{
        -webkit-transform:translateX(0);
        transform:translateX(0)
    }
}
@-webkit-keyframes mobileDeviceMiniThird{
    0%{
        -webkit-transform:translateX(-61%);
        transform:translateX(-61%)
    }
    100%{
        -webkit-transform:translateX(0);
        transform:translateX(0)
    }
}
@keyframes mobileDeviceMiniThird{
    0%{
        -webkit-transform:translateX(-61%);
        transform:translateX(-61%)
    }
    100%{
        -webkit-transform:translateX(0);
        transform:translateX(0)
    }
}
@-webkit-keyframes familyBordersRetract{
    0%{
        -webkit-transform:scaleX(4);
        transform:scaleX(4)
    }
    100%{
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@keyframes familyBordersRetract{
    0%{
        -webkit-transform:scaleX(4);
        transform:scaleX(4)
    }
    100%{
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@-webkit-keyframes slideStackOrderTwo{
    0%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    10%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    15%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    92%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    93%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    100%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
}
@keyframes slideStackOrderTwo{
    0%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    10%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    15%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    92%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    93%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    100%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
}
@-webkit-keyframes slideStackOrderThree{
    0%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    35%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    40%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    92%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    93%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    100%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
}
@keyframes slideStackOrderThree{
    0%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    35%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    40%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    92%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    93%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    100%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
}
@-webkit-keyframes slideStackOrderFour{
    0%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    60%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    65%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    92%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    93%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    100%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
}
@keyframes slideStackOrderFour{
    0%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    60%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    65%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    92%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0)
    }
    93%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
    100%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0)
    }
}
@-webkit-keyframes slideStackOrderFive{
    0%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0);
        opacity:1
    }
    85%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0);
        opacity:1
    }
    90%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0);
        opacity:1
    }
    97%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0);
        opacity:1
    }
    98%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0);
        opacity:0
    }
    99%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0);
        opacity:0
    }
    100%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0);
        opacity:1
    }
}
@keyframes slideStackOrderFive{
    0%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0);
        opacity:1
    }
    85%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0);
        opacity:1
    }
    90%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0);
        opacity:1
    }
    97%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0);
        opacity:1
    }
    98%{
        -webkit-transform:translateX(0) translateZ(0);
        transform:translateX(0) translateZ(0);
        opacity:0
    }
    99%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0);
        opacity:0
    }
    100%{
        -webkit-transform:translateX(125%) translateZ(0);
        transform:translateX(125%) translateZ(0);
        opacity:1
    }
}
[name="time-management"]{
    margin-bottom:250px;
    position:relative;
    z-index:1
}
@media (max-width: 899px){
    [name="time-management"]{
        margin-bottom:180px
    }
}
@media (max-width: 599px){
    [name="time-management"]{
        margin-bottom:120px
    }
}
[name="time-management"] .family-photograph{
    position:relative;
    z-index:1
}
[name="time-management"] .family-photograph .art{
    width:100%;
    height:965px;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:auto 100%;
    background-color:white
}
@media (max-width: 939px){
    [name="time-management"] .family-photograph .art{
        height:800px
    }
}
@media (max-width: 549px){
    [name="time-management"] .family-photograph .art{
        height:650px
    }
}
@media (max-width: 470px){
    [name="time-management"] .family-photograph .art{
        height:550px
    }
}
[name="time-management"] .family-photograph:before,[name="time-management"] .family-photograph:after{
    content:"";
    display:block;
    position:absolute;
    background:white;
    width:25px;
    height:101%;
    top:0;
    z-index:2;
    -webkit-transform:scaleX(4);
    transform:scaleX(4);
    -webkit-animation-name:familyBordersExpand;
    animation-name:familyBordersExpand;
    -webkit-animation-duration:200ms;
    animation-duration:200ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1
}
@media (max-width: 599px){
    [name="time-management"] .family-photograph:before,[name="time-management"] .family-photograph:after{
        width:10px
    }
}
[name="time-management"] .family-photograph:before{
    left:0;
    -webkit-transform-origin:left center;
    transform-origin:left center
}
[name="time-management"] .family-photograph:after{
    right:0;
    -webkit-transform-origin:right center;
    transform-origin:right center
}
[name="time-management"] .family-photograph.ready-to-animate:before,[name="time-management"] .family-photograph.ready-to-animate:after{
    -webkit-animation-name:familyBordersRetract;
    animation-name:familyBordersRetract;
    -webkit-animation-duration:2000ms;
    animation-duration:2000ms
}
[name="time-management"] .essay,[name="time-management"] .scenarios,[name="time-management"] .scenario{
    position:relative;
    z-index:2
}
[name="time-management"] .essay{
    margin-top:-373px
}
@media (max-width: 939px){
    [name="time-management"] .essay{
        margin-top:-320px
    }
}
@media (max-width: 625px){
    [name="time-management"] .essay{
        margin-top:-270px
    }
}
@media (max-width: 549px){
    [name="time-management"] .essay{
        margin-top:-240px
    }
}
@media (max-width: 499px){
    [name="time-management"] .essay{
        margin-top:-200px
    }
}
[name="time-management"] .essay h1{
    color:white;
    text-shadow:0 4px 30px rgba(0,0,0,0.2);
    font-size:5rem;
    font-weight:500;
    line-height:0.95;
    max-width:8em;
    margin-bottom:54px
}
@media (max-width: 999px){
    [name="time-management"] .essay h1{
        font-size:4.5rem
    }
}
@media (max-width: 939px){
    [name="time-management"] .essay h1{
        max-width:6em;
        line-height:0.89
    }
}
@media (max-width: 625px){
    [name="time-management"] .essay h1{
        font-size:4rem
    }
}
@media (max-width: 549px){
    [name="time-management"] .essay h1{
        font-size:3.5rem
    }
}
@media (max-width: 499px){
    [name="time-management"] .essay h1{
        font-size:3rem;
        margin-bottom:40px
    }
}
@media (max-width: 360px){
    [name="time-management"] .essay h1{
        font-size:2.75rem
    }
}
[name="time-management"] .essay h1 span{
    display:inline-block
}
[name="time-management"] .essay .description{
    background:white;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    position:relative;
    max-width:516px;
    padding:54px 48px 50px 0;
    font-size:1.1875rem;
    line-height:1.48
}
@media (max-width: 939px){
    [name="time-management"] .essay .description{
        padding-top:40px
    }
}
@media (max-width: 625px){
    [name="time-management"] .essay .description{
        padding-right:30px;
        width:calc(100% - 10%)
    }
}
@media (max-width: 499px){
    [name="time-management"] .essay .description{
        padding-top:30px
    }
}
[name="time-management"] .essay .description:before{
    content:"";
    display:block;
    position:absolute;
    background:white;
    left:0;
    height:100%;
    width:10px;
    top:0;
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
    -webkit-box-shadow:2px 0 0 white;
    box-shadow:2px 0 0 white;
    width:calc((100vw - calc(996 * 1px)) / 2)
}
@media (max-width: 1142px){
    [name="time-management"] .essay .description:before{
        width:calc((100vw * 0.13) / 2)
    }
}
[name="time-management"] .essay .description p{
    position:relative;
    z-index:2
}
[name="time-management"] .scenarios{
    margin-top:80px
}
@media (max-width: 599px){
    [name="time-management"] .scenarios{
        margin-top:30px
    }
}
[name="time-management"] .scenario{
    display:flex;
    justify-content:space-between;
    align-items:center
}
[name="time-management"] .scenario:nth-of-type(odd) .caption{
    order:1
}
[name="time-management"] .scenario:nth-of-type(odd) .media{
    order:2
}
[name="time-management"] .scenario:nth-of-type(2),[name="time-management"] .scenario:nth-of-type(3){
    margin-top:120px
}
@media (max-width: 599px){
    [name="time-management"] .scenario:nth-of-type(2),[name="time-management"] .scenario:nth-of-type(3){
        margin-top:80px
    }
}
[name="time-management"] .media{
    width:34.6385542168675%;
    width:55%
}
[name="time-management"] .caption{
    text-align:center;
    width:34.6385542168675%;
    width:37%;
    text-align:left;
    color:#0078d4;
    font-weight:500;
    font-size:3.125rem;
    line-height:1.05
}
@media (max-width: 1129px){
    [name="time-management"] .caption{
        font-size:2.75rem
    }
}
@media (max-width: 999px){
    [name="time-management"] .caption{
        font-size:2.5rem;
        width:42%
    }
}
@media (max-width: 999px){
    [name="time-management"] .caption{
        font-size:2.125rem
    }
}
@media screen and (-ms-high-contrast: white-on-black){
    [name="time-management"] .caption{
        -ms-high-contrast-adjust:none;
        background:white
    }
}
[name="time-management"] .caption mark{
    display:block
}
[name="time-management"] .scenario.ready-to-animate{
    -webkit-animation-name:none;
    animation-name:none
}
[name="time-management"] .mini-states{
    position:relative
}
[name="time-management"] .mini-states:before{
    display:block;
    content:"";
    width:100%;
    padding-top:91%
}
[name="time-management"] .mini-states>.fill{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
[name="time-management"] .mini-states.android{
    position:relative
}
[name="time-management"] .mini-states.android:before{
    display:block;
    content:"";
    width:100%;
    padding-top:95.5%
}
[name="time-management"] .mini-states.android>.fill{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
[name="time-management"] .triptych{
    width:100%;
    height:100%;
    position:relative;
    z-index:1
}
[name="time-management"] .single-device{
    position:absolute;
    width:45%;
    height:100%;
    -webkit-animation-duration:1100ms;
    animation-duration:1100ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1);
    animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1)
}
[name="time-management"] .single-device:nth-of-type(1){
    z-index:1;
    left:0;
    -webkit-transform:translateX(61%);
    transform:translateX(61%)
}
[name="time-management"] .single-device:nth-of-type(2){
    z-index:2;
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%)
}
[name="time-management"] .single-device:nth-of-type(3){
    z-index:3;
    right:0;
    -webkit-transform:translateX(-61%);
    transform:translateX(-61%)
}
[name="time-management"] img{
    display:block;
    width:100%;
    height:auto;
    position:relative;
    z-index:2
}
[name="time-management"] .scenario.ready-to-animate .single-device:nth-of-type(1){
    -webkit-animation-name:mobileDeviceMiniFirst;
    animation-name:mobileDeviceMiniFirst
}
[name="time-management"] .scenario.ready-to-animate .single-device:nth-of-type(3){
    -webkit-animation-name:mobileDeviceMiniThird;
    animation-name:mobileDeviceMiniThird
}
@media (max-width: 899px){
    [name="time-management"] .scenario{
        display:block;
        max-width:600px;
        margin-right:auto;
        margin-left:auto
    }
    [name="time-management"] .caption{
        text-align:center;
        width:100%;
        margin:30px auto 0;
        max-width:12em
    }
    [name="time-management"] .media{
        width:100%
    }
}
@-webkit-keyframes accessibilityRise{
    0%{
        -webkit-transform:translateY(5%);
        transform:translateY(5%);
        -webkit-box-shadow:0 60px 120px rgba(0,0,0,0.6);
        box-shadow:0 60px 120px rgba(0,0,0,0.6)
    }
    100%{
        -webkit-transform:translateY(-13%);
        transform:translateY(-13%);
        -webkit-box-shadow:0 0 1px rgba(0,0,0,0.01);
        box-shadow:0 0 1px rgba(0,0,0,0.01)
    }
}
@keyframes accessibilityRise{
    0%{
        -webkit-transform:translateY(5%);
        transform:translateY(5%);
        -webkit-box-shadow:0 60px 120px rgba(0,0,0,0.6);
        box-shadow:0 60px 120px rgba(0,0,0,0.6)
    }
    100%{
        -webkit-transform:translateY(-13%);
        transform:translateY(-13%);
        -webkit-box-shadow:0 0 1px rgba(0,0,0,0.01);
        box-shadow:0 0 1px rgba(0,0,0,0.01)
    }
}
[name="accessibility-addendum"]{
    margin-bottom:130px
}
@media (max-width: 499px){
    [name="accessibility-addendum"]{
        margin-bottom:90px
    }
}
[name="accessibility-addendum"] .diptych{
    position:relative;
    display:flex;
    z-index:1;
    align-items:start;
    padding:0
}
[name="accessibility-addendum"] .photo{
    width:48.6153846153846%;
    position:relative;
    z-index:2;
    -webkit-transform:translateY(5%);
    transform:translateY(5%);
    -webkit-box-shadow:0 60px 120px rgba(0,0,0,0.6);
    box-shadow:0 60px 120px rgba(0,0,0,0.6)
}
[name="accessibility-addendum"].ready-to-animate .photo{
    -webkit-animation-name:accessibilityRise;
    animation-name:accessibilityRise;
    -webkit-animation-duration:1000ms;
    animation-duration:1000ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1
}
[name="accessibility-addendum"] .text-plate{
    background:#0078d4;
    color:white;
    width:51.3846153846154%;
    z-index:1;
    position:relative
}
[name="accessibility-addendum"] .text-plate .fill{
    padding:17% 0 19%
}
[name="accessibility-addendum"] .text-plate .content{
    margin-right:calc((100vw - calc(996 * 1px)) / 2);
    margin-left:18.2634730538922%
}
@media (max-width: 1142px){
    [name="accessibility-addendum"] .text-plate .content{
        margin-right:calc((100vw * 0.13) / 2)
    }
}
@media (max-width: 1099px){
    [name="accessibility-addendum"] .text-plate .content{
        margin-left:15%
    }
}
@media (max-width: 850px){
    [name="accessibility-addendum"] .text-plate .content{
        margin-left:11%
    }
}
[name="accessibility-addendum"] h1{
    font-size:2.25rem;
    line-height:1.0875;
    font-weight:500;
    margin-bottom:0.75em;
    max-width:9em
}
@media (max-width: 1099px){
    [name="accessibility-addendum"] h1{
        font-size:2rem
    }
}
[name="accessibility-addendum"] p{
    font-size:1.1875rem;
    line-height:1.4
}
[name="accessibility-addendum"] .text-plate .fill:before{
    content:"";
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    width:10px;
    background:#0078d4;
    height:100%;
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
    -webkit-box-shadow:2px 0 0 #0078d4;
    box-shadow:2px 0 0 #0078d4;
    width:13%
}
@media (max-width: 760px){
    [name="accessibility-addendum"] .diptych{
        display:block
    }
    [name="accessibility-addendum"] .photo{
        width:calc(100vw - 7.5%)
    }
    [name="accessibility-addendum"] .text-plate{
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        width:calc(100% - 7.5%);
        margin-left:7.5%
    }
    [name="accessibility-addendum"] .text-plate .fill{
        padding:4% 0 19%
    }
    [name="accessibility-addendum"] .text-plate .fill:before{
        display:none
    }
    [name="accessibility-addendum"] .text-plate .fill:after{
        content:"";
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:50px;
        background:#0078d4;
        height:70px;
        height:33%;
        -webkit-transform:translateY(-100%);
        transform:translateY(-100%);
        width:100%;
        -webkit-box-shadow:0 2px 0 #0078d4;
        box-shadow:0 2px 0 #0078d4
    }
    [name="accessibility-addendum"] .text-plate .content{
        margin:0;
        margin-right:10%;
        margin-left:7%
    }
}
@media (max-width: 760px) and (min-width: 570px){
    [name="accessibility-addendum"] .text-plate .fill{
        padding:0 0 13%
    }
    [name="accessibility-addendum"] .text-plate .fill:after{
        height:60%
    }
}
.block[name="gmail"]{
    background:rgba(128,0,0,0.4)
}
.block[name="gmail"] .bound{
    padding:300px 0
}
@-webkit-keyframes welcomeTextRise{
    0%{
        -webkit-transform:translateY(120px);
        transform:translateY(120px)
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
@keyframes welcomeTextRise{
    0%{
        -webkit-transform:translateY(120px);
        transform:translateY(120px)
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
.welcome-to-outlook{
    background-repeat:no-repeat;
    background-position:center center;
    background-color:lightgray;
    background-size:cover;
    margin-bottom:100px;
    overflow:hidden
}
.welcome-to-outlook .mobile-exclusive-photo{
    display:none
}
.welcome-to-outlook .scenery{
    position:relative;
    z-index:1
}
.welcome-to-outlook .scenery:before,.welcome-to-outlook .mobile-exclusive-photo:after{
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    background:white;
    width:48.6153846153846%;
    height:60px
}
.welcome-to-outlook .mobile-exclusive-photo:after{
    height:20px
}
@media (min-width: 650px){
    .welcome-to-outlook .primary .bound{
        -webkit-transform:translateY(150px);
        transform:translateY(150px)
    }
    .welcome-to-outlook.ready-to-animate .primary .bound{
        -webkit-animation-name:welcomeTextRise;
        animation-name:welcomeTextRise;
        -webkit-animation-duration:1500ms;
        animation-duration:1500ms;
        -webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
        -webkit-animation-iteration-count:1;
        animation-iteration-count:1
    }
}
.welcome-to-outlook .primary{
    padding:360px 0 170px;
    color:white;
    text-align:center
}
.welcome-to-outlook .secondary{
    height:240px;
    position:relative;
    display:flex
}
.welcome-to-outlook .secondary .bound{
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
    position:relative
}
.welcome-to-outlook .secondary .bound:after{
    content:"";
    display:block;
    position:absolute;
    right:0;
    top:0;
    -webkit-box-shadow:-3px 0 0 white;
    box-shadow:-3px 0 0 white;
    height:100%;
    width:20px;
    width:calc((100vw - calc(996 * 1px)) / 2);
    background:white;
    -webkit-transform:translateX(100%);
    transform:translateX(100%)
}
@media (max-width: 1141px){
    .welcome-to-outlook .secondary .bound:after{
        width:calc((100vw * 0.13) / 2)
    }
}
.welcome-to-outlook .text{
    font-weight:500;
    max-width:31em;
    margin:0 auto;
    text-shadow:0 3px 25px rgba(0,0,0,0.85)
}
.welcome-to-outlook h1{
    font-size:6.25rem;
    line-height:0.9;
    margin-bottom:0.3125em
}
.welcome-to-outlook h1 span{
    display:block
}
.welcome-to-outlook p{
    font-size:1.9375rem;
    line-height:1.15;
    max-width:20em;
    margin:0 auto 2.5em
}
.welcome-to-outlook p span{
    display:block
}
.welcome-to-outlook .call-to-action a{
    display:inline-block;
    -webkit-box-shadow:inset 0 0 0 2px white;
    box-shadow:inset 0 0 0 2px white;
    background:rgba(0,0,0,0.2);
    border-radius:6px;
    padding:17px 42px 24px;
    font-size:1.75rem;
    line-height:1.2;
    -webkit-transition:all 200ms;
    transition:all 200ms
}
.welcome-to-outlook .call-to-action a:hover{
    background:white;
    color:#333;
    color:#0078d4;
    text-shadow:none
}
.welcome-to-outlook .icons-row{
    display:flex;
    width:72.6907630522088%;
    justify-content:space-between
}
@-webkit-keyframes welcomeIconRetract{
    0%{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
    100%{
        opacity:0;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@keyframes welcomeIconRetract{
    0%{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
    100%{
        opacity:0;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@-webkit-keyframes welcomeIconEmerge{
    0%{
        opacity:0;
        -webkit-transform:scaleX(0.01);
        transform:scaleX(0.01)
    }
    20%{
        opacity:1
    }
    100%{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@keyframes welcomeIconEmerge{
    0%{
        opacity:0;
        -webkit-transform:scaleX(0.01);
        transform:scaleX(0.01)
    }
    20%{
        opacity:1
    }
    100%{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
.welcome-to-outlook .icons-row b{
    display:block;
    width:49px;
    height:49px;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    opacity:0;
    -webkit-transform:scaleX(0.01);
    transform:scaleX(0.01)
}
.welcome-to-outlook .icons-row.ready-to-animate b{
    -webkit-animation-name:welcomeIconEmerge;
    animation-name:welcomeIconEmerge;
    -webkit-animation-duration:800ms;
    animation-duration:800ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}
.welcome-to-outlook li:nth-of-type(1) b{
    -webkit-animation-delay:600ms;
    animation-delay:600ms
}
.welcome-to-outlook li:nth-of-type(2) b{
    -webkit-animation-delay:400ms;
    animation-delay:400ms
}
.welcome-to-outlook li:nth-of-type(3) b{
    -webkit-animation-delay:200ms;
    animation-delay:200ms
}
.welcome-to-outlook li:nth-of-type(4) b{
    -webkit-animation-delay:5ms;
    animation-delay:5ms
}
.welcome-to-outlook li:nth-of-type(5) b{
    -webkit-animation-delay:200ms;
    animation-delay:200ms
}
.welcome-to-outlook li:nth-of-type(6) b{
    -webkit-animation-delay:400ms;
    animation-delay:400ms
}
.welcome-to-outlook li:nth-of-type(7) b{
    -webkit-animation-delay:600ms;
    animation-delay:600ms
}
@media (max-width: 949px){
    .welcome-to-outlook .primary{
        padding:280px 0 120px
    }
    .welcome-to-outlook .secondary{
        height:150px
    }
    .welcome-to-outlook .icons-row{
        width:80%
    }
    .welcome-to-outlook h1{
        font-size:4.5rem
    }
    .welcome-to-outlook p{
        font-size:1.5rem;
        margin-bottom:2em
    }
}
@media (max-width: 659px) and (min-width: 500px){
    .welcome-to-outlook{
        margin-bottom:150px
    }
}
@media (max-width: 659px){
    .welcome-to-outlook{
        background-image:none !important;
        background-color:transparent
    }
    .welcome-to-outlook .mobile-exclusive-photo{
        display:block;
        position:relative;
        background-repeat:no-repeat;
        background-position:center center;
        background-size:cover;
        background-size:140% auto;
        position:relative;
        z-index:1
    }
    .welcome-to-outlook .mobile-exclusive-photo:before{
        display:block;
        content:"";
        width:100%;
        padding-top:95%
    }
    .welcome-to-outlook .mobile-exclusive-photo>.fill{
        display:block;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0
    }
    .welcome-to-outlook .scenery{
        position:relative;
        z-index:2
    }
    .welcome-to-outlook .primary{
        -webkit-transition:-webkit-transform 1600ms;
        transition:-webkit-transform 1600ms;
        transition:transform 1600ms;
        transition:transform 1600ms, -webkit-transform 1600ms;
        -webkit-transform:translateY(45px);
        transform:translateY(45px)
    }
    .welcome-to-outlook.ready-to-animate .primary{
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
    .welcome-to-outlook .scenery:before{
        content:"";
        display:block;
        position:absolute;
        top:0;
        left:50%;
        width:87%;
        height:40px;
        background:white;
        -webkit-transform:translate(-50%, -100%);
        transform:translate(-50%, -100%)
    }
    .welcome-to-outlook .primary{
        padding:50px 0 80px;
        margin:0
    }
    .welcome-to-outlook h1{
        color:#0078d4;
        text-shadow:none;
        margin-bottom:1em
    }
    .welcome-to-outlook p{
        color:#666;
        font-weight:400;
        text-shadow:none;
        margin-bottom:3em
    }
    .welcome-to-outlook .call-to-action a{
        background:#0078d4;
        text-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none
    }
    .welcome-to-outlook .secondary{
        height:auto
    }
    .welcome-to-outlook .icons-row{
        width:97%
    }
    .welcome-to-outlook .icons-row b{
        width:40px;
        height:40px
    }
}
@media (max-width: 470px){
    .welcome-to-outlook .primary{
        padding:20px 0 60px
    }
    .welcome-to-outlook h1{
        font-size:3rem;
        margin-bottom:0.75em
    }
    .welcome-to-outlook p{
        font-size:1.25rem;
        margin-bottom:2.5em
    }
    .welcome-to-outlook .call-to-action a{
        display:block;
        font-size:1.25rem;
        padding:14px 5px 18px
    }
    .welcome-to-outlook .icons-row b{
        width:30px;
        height:30px
    }
}
.premium-appeal{
    margin-bottom:160px;
    overflow:hidden
}
.premium-appeal .scenery{
    padding:114px 0;
    position:relative
}
.premium-appeal .photo{
    display:block;
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:55.2307692307692%;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover
}
.premium-appeal .plate{
    position:relative;
    background:white;
    width:60.4417670682731%;
    padding:61px 55px 94px 0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    z-index:1;
    -webkit-transform:translateY(70px);
    transform:translateY(70px);
    -webkit-transition:-webkit-transform 2000ms;
    transition:-webkit-transform 2000ms;
    transition:transform 2000ms;
    transition:transform 2000ms, -webkit-transform 2000ms
}
.premium-appeal .plate.ready-to-animate{
    -webkit-transform:translateY(0);
    transform:translateY(0)
}
.premium-appeal .plate:before{
    z-index:1;
    content:"";
    position:absolute;
    display:block;
    width:50px;
    background:white;
    height:100%;
    top:0;
    left:0;
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
    -webkit-box-shadow:1px 0 0 white;
    box-shadow:1px 0 0 white;
    width:calc((100vw - calc(996 * 1px)) / 2)
}
@media (max-width: 1144px){
    .premium-appeal .plate:before{
        width:calc((100vw * 0.13) / 2)
    }
}
.premium-appeal .text{
    position:relative;
    -webkit-transform:translateX(-0.1875em);
    transform:translateX(-0.1875em);
    z-index:2
}
.premium-appeal h1{
    font-size:5rem;
    line-height:1;
    color:#0078d4;
    font-weight:500;
    margin-bottom:1em
}
@media (max-width: 1020px){
    .premium-appeal h1{
        font-size:4rem
    }
}
@media (max-width: 840px){
    .premium-appeal h1{
        font-size:3rem
    }
}
.premium-appeal h1 span{
    display:block
}
.premium-appeal p{
    font-size:1.1875rem;
    line-height:1.5;
    line-height:1.42;
    max-width:24em
}
.premium-appeal mark{
    font-weight:500
}
.premium-appeal a{
    color:#0078d4;
    font-weight:500
}
.premium-appeal .final-phrase{
    white-space:nowrap;
    position:relative;
    padding-right:20px
}
.premium-appeal .final-phrase:after{
    content:"";
    display:block;
    position:absolute;
    width:13px;
    height:12px;
    background:url("../images/arrow-rightward-blue.png") no-repeat right center;
    background-size:contain;
    right:0;
    top:50%;
    -webkit-transform:translate(0, -50%);
    transform:translate(0, -50%);
    -webkit-transition:all 180ms;
    transition:all 180ms
}
.premium-appeal a:hover .final-phrase:after{
    -webkit-transform:translate(10px, -50%);
    transform:translate(10px, -50%)
}
@media (max-width: 659px){
    .premium-appeal{
        margin-bottom:70px
    }
    .premium-appeal .scenery{
        padding:0
    }
    .premium-appeal .photo{
        position:relative;
        position:relative;
        z-index:1;
        width:100%;
        height:auto
    }
    .premium-appeal .photo:before{
        display:block;
        content:"";
        width:100%;
        padding-top:100%
    }
    .premium-appeal .photo>.fill{
        display:block;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0
    }
    .premium-appeal .plate{
        width:100%;
        position:relative;
        background:white;
        padding:30px 0 60px 0;
        margin-top:-40px;
        -webkit-box-shadow:-50px 0 0 white;
        box-shadow:-50px 0 0 white
    }
    .premium-appeal .plate:before{
        display:none
    }
}
@-webkit-keyframes graveyardIconRetract{
    0%{
        opacity:1;
        -webkit-transform:translateX(-50%) scaleX(1);
        transform:translateX(-50%) scaleX(1)
    }
    100%{
        opacity:0;
        -webkit-transform:translateX(-50%) scaleX(0.01);
        transform:translateX(-50%) scaleX(0.01)
    }
}
@keyframes graveyardIconRetract{
    0%{
        opacity:1;
        -webkit-transform:translateX(-50%) scaleX(1);
        transform:translateX(-50%) scaleX(1)
    }
    100%{
        opacity:0;
        -webkit-transform:translateX(-50%) scaleX(0.01);
        transform:translateX(-50%) scaleX(0.01)
    }
}
@-webkit-keyframes graveyardIconEmerge{
    0%{
        opacity:0;
        -webkit-transform:translateX(-50%) scaleX(0.01);
        transform:translateX(-50%) scaleX(0.01)
    }
    10%{
        opacity:1
    }
    100%{
        opacity:1;
        -webkit-transform:translateX(-50%) scaleX(1);
        transform:translateX(-50%) scaleX(1)
    }
}
@keyframes graveyardIconEmerge{
    0%{
        opacity:0;
        -webkit-transform:translateX(-50%) scaleX(0.01);
        transform:translateX(-50%) scaleX(0.01)
    }
    10%{
        opacity:1
    }
    100%{
        opacity:1;
        -webkit-transform:translateX(-50%) scaleX(1);
        transform:translateX(-50%) scaleX(1)
    }
}
.links-graveyard{
    text-align:center;
    color:#666666;
    margin-bottom:130px
}
@media (max-width: 499px){
    .links-graveyard{
        margin-bottom:90px
    }
}
.links-graveyard .bound{
    padding-top:187px;
    z-index:1;
    position:relative;
    -webkit-box-shadow:inset 0 118px 0 white,inset 0 119px 0 rgba(0,0,0,0.15);
    box-shadow:inset 0 118px 0 white,inset 0 119px 0 rgba(0,0,0,0.15)
}
.links-graveyard .bound:before{
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:50%;
    width:50px;
    height:50px;
    background:url("../images/outlook-icon.jpg") no-repeat center top;
    background-size:contain;
    z-index:2;
    -webkit-transform:translateX(-50%) scaleX(0.01);
    transform:translateX(-50%) scaleX(0.01);
    opacity:0;
    -webkit-animation-name:graveyardIconRetract;
    animation-name:graveyardIconRetract;
    -webkit-animation-duration:200ms;
    animation-duration:200ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1
}
.links-graveyard.ready-to-animate .bound:before{
    -webkit-animation-name:graveyardIconEmerge;
    animation-name:graveyardIconEmerge;
    -webkit-animation-duration:600ms;
    animation-duration:600ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1
}
.links-graveyard li{
    display:inline-block;
    margin-right:25px;
    margin-left:25px;
    margin-bottom:50px
}
@media (max-width: 499px){
    .links-graveyard li{
        display:block;
        margin:0 0 40px
    }
}
.links-graveyard ul li:first-of-type{
    margin-left:0
}
.links-graveyard a{
    display:inline-block;
    position:relative
}
.links-graveyard .app{
    padding-left:22px
}
.links-graveyard .app:before{
    content:"";
    display:block;
    position:absolute;
    width:18px;
    height:18px;
    background:url("../images/glyph-apple.svg") no-repeat left center;
    background-size:contain;
    left:0;
    top:50%;
    -webkit-transform:translateY(-53%);
    transform:translateY(-53%)
}
.links-graveyard .app.android:before{
    background-image:url("../images/glyph-googleplay.svg")
}
.links-graveyard span{
    display:inline-block;
    -webkit-transition:all 180ms;
    transition:all 180ms
}
.links-graveyard a:hover span{
    -webkit-box-shadow:inset 0 -2px 0 white,inset 0 -3px 0 rgba(102,102,102,0.5);
    box-shadow:inset 0 -2px 0 white,inset 0 -3px 0 rgba(102,102,102,0.5)
}
.os-exclusive.mobile{
    display:none
}
[data-likely-os="iOS"] .os-exclusive.desktop,[data-likely-os="Android"] .os-exclusive.desktop{
    display:none
}
[data-likely-os="iOS"] .os-exclusive.mobile,[data-likely-os="Android"] .os-exclusive.mobile{
    display:block
}
.fine-print{
    background:black;
    color:white;
    font-size:0.8125rem;
    line-height:1.2
}
.fine-print .bound{
    padding:55px 0 70px
}
.fine-print .primary{
    margin-bottom:55px;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.fine-print .premium-exclusives{
    padding-top:120px;
    border-top:1px solid rgba(255,255,255,0.3);
    display:block;
    line-height:1.4;
    position:relative
}
.fine-print .premium-exclusives span{
    display:block;
    text-align:left;
    position:relative
}
.fine-print .premium-exclusives span:before{
    content:"†";
    display:block;
    position:absolute;
    top:-0.125em;
    left:-0.625em;
    text-align:right;
    font-size:1.25rem;
    line-height:1
}
.fine-print .brand a{
    display:block;
    width:87px;
    height:20px;
    background:url("../images/ms-wordmark-white.svg") no-repeat 0 center;
    background-size:contain;
    text-indent:100%;
    overflow:hidden;
    white-space:nowrap
}
.fine-print .legal{
    display:flex
}
.fine-print .copyright{
    display:block
}
.fine-print .links{
    display:flex;
    margin-left:43px
}
.fine-print .links li{
    margin-left:20px
}
.fine-print .links li:first-of-type{
    margin-left:0
}
.fine-print .links a{
    display:inline-block;
    -webkit-transition:all 150ms;
    transition:all 150ms
}
.fine-print .links a:hover{
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.7);
    box-shadow:0 1px 0 rgba(255,255,255,0.7)
}
@media (max-width: 899px){
    .fine-print{
        text-align:center
    }
    .fine-print .legal{
        display:block
    }
    .fine-print .primary{
        display:block
    }
    .fine-print .brand{
        padding-bottom:55px;
        border-bottom:1px solid rgba(255,255,255,0.3);
        margin-bottom:55px
    }
    .fine-print .brand a{
        margin:0 auto
    }
    .fine-print .copyright{
        display:block;
        margin-bottom:40px
    }
    .fine-print .links{
        margin-left:0;
        display:block
    }
    .fine-print .links li{
        white-space:nowrap;
        display:inline-block;
        margin:0 15px 20px 15px
    }
}
.fine-print:not([data-show-disclaimer="true"]) .premium-exclusives{
    display:none
}
html[dir="rtl"] body{
    overflow-x:hidden
}
html[dir="rtl"] .masthead{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
html[dir="rtl"] .masthead .static-strip,html[dir="rtl"] .masthead .primary-content .titling,html[dir="rtl"] .precis,html[dir="rtl"] .mobile-cta .bound{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
html[dir="rtl"] [name="a-simple-experience"] header{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
html[dir="rtl"] [name="a-simple-experience"] header .text{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
@media (min-width: 600px){
    html[dir="rtl"] [name="a-simple-experience"] .buttons-captions p{
        margin-left:0;
        margin-right:-20%
    }
}
html[dir="rtl"] [name="security"]{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
html[dir="rtl"] [name="security"] .scenery{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
html[dir="rtl"] [name="security"] .features ul:before{
    left:auto;
    right:86px
}
html[dir="rtl"] [name="security"] .features small{
    padding-left:0;
    padding-right:17px
}
html[dir="rtl"] [name="security"] .features small:before{
    left:auto;
    right:0
}
html[dir="rtl"] [name="security"] .features .corner{
    left:auto;
    right:0;
    -webkit-box-shadow:-2px 0 0 white;
    box-shadow:-2px 0 0 white
}
html[dir="rtl"] [name="security"] .features .corner:before{
    left:auto;
    right:0;
    -webkit-transform:translateX(100%);
    transform:translateX(100%)
}
@media (max-width: 699px){
    html[dir="rtl"] [name="security"] .features .icon{
        margin-left:0;
        margin-right:14px
    }
}
html[dir="rtl"] [name="security"] .mobile-exclusive-photo{
    margin-left:0;
    margin-right:-7.5%
}
html[dir="rtl"] .productivity-apps-carousel{
    direction:ltr;
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
html[dir="rtl"] .productivity-apps-carousel .caption{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
html[dir="rtl"] [name="time-management"]{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
html[dir="rtl"] [name="time-management"] .essay{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
html[dir="rtl"] [name="time-management"] .essay .description{
    padding-right:0;
    padding-left:48px
}
html[dir="rtl"] [name="time-management"] .essay .description:before{
    left:auto;
    right:0;
    -webkit-transform:translateX(100%);
    transform:translateX(100%)
}
html[dir="rtl"] [name="time-management"] .scenarios{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
@media (min-width: 700px){
    html[dir="rtl"] [name="time-management"] .caption{
        text-align:right
    }
}
html[dir="rtl"] [name="accessibility-addendum"] .text-plate .fill:before{
    left:auto;
    right:0;
    -webkit-transform:translateX(98%);
    transform:translateX(98%)
}
@media (max-width: 760px){
    html[dir="rtl"] [name="accessibility-addendum"] .text-plate{
        margin-left:0;
        margin-right:7.5%
    }
}
html[dir="rtl"] .premium-appeal{
    -webkit-transform:scaleX(-1);
    transform:scaleX(-1)
}
html[dir="rtl"] .premium-appeal .bound{
    display:flex;
    justify-content:flex-end
}
html[dir="rtl"] .premium-appeal .text{
    -webkit-transform:translateX(-0.1875em) scaleX(-1);
    transform:translateX(-0.1875em) scaleX(-1)
}
html[dir="rtl"] .premium-appeal .final-phrase{
    padding:0
}
html[dir="rtl"] .premium-appeal .final-phrase:after{
    display:none
}
@media (min-width: 500px){
    html[dir="rtl"] .links-graveyard ul li:first-of-type{
        margin-left:25px
    }
}
@media (min-width: 700px){
    html[dir="rtl"] .fine-print .links{
        margin-right:43px;
        margin-left:0
    }
}
html[dir="rtl"] .fine-print .links li:first-of-type{
    margin-left:20px
}
@media (min-width: 700px){
    html[dir="rtl"] .fine-print .links li:last-of-type{
        margin-left:0
    }
}
html[dir="rtl"] [name="mobile-speedbump"] .advancement-choices .secondary i{
    padding-right:0;
    padding-left:17px
}
html[dir="rtl"] [name="mobile-speedbump"] .advancement-choices .secondary i:after{
    right:auto;
    left:0;
    -webkit-transform:translateY(-43%) scaleX(-1);
    transform:translateY(-43%) scaleX(-1)
}
@media (max-width: 539px){
    html[dir="rtl"] .sticky-header .actions{
        padding-left:0;
        padding-right:29px
    }
    html[dir="rtl"] .sticky-header .actions li:last-of-type{
        margin-left:0
    }
    html[dir="rtl"] .sticky-header .actions li:first-of-type{
        margin-left:4px
    }
    html[dir="rtl"] .sticky-header .actions:before{
        left:auto;
        right:0;
        -webkit-transform:translate(11px, -50%);
        transform:translate(11px, -50%)
    }
}
@-webkit-keyframes ornamentRise{
    0%{
        -webkit-transform:translate(-50%, 0);
        transform:translate(-50%, 0);
        opacity:0
    }
    100%{
        -webkit-transform:translate(-50%, -55px);
        transform:translate(-50%, -55px);
        opacity:1
    }
}
@keyframes ornamentRise{
    0%{
        -webkit-transform:translate(-50%, 0);
        transform:translate(-50%, 0);
        opacity:0
    }
    100%{
        -webkit-transform:translate(-50%, -55px);
        transform:translate(-50%, -55px);
        opacity:1
    }
}
.experiment.hotmail-explanation{
    color:#333;
    text-align:center;
    margin-top:160px;
    margin-bottom:160px;
    display:block
}
@media (max-width: 739px){
    .experiment.hotmail-explanation{
        margin-top:130px
    }
}
.experiment.hotmail-explanation .plate{
    position:relative
}
.experiment.hotmail-explanation .ornament{
    display:block;
    position:absolute;
    left:50%;
    top:0;
    opacity:0;
    -webkit-transform:translate(-50%, 0);
    transform:translate(-50%, 0);
    width:34px;
    height:34px;
    background-image:url("../images/hotmail-ornament.svg");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    z-index:1;
    -webkit-animation-duration:700ms;
    animation-duration:700ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1
}
.experiment.hotmail-explanation h1,.experiment.hotmail-explanation p{
    position:relative;
    z-index:2
}
.experiment.hotmail-explanation h1{
    font-weight:500;
    font-size:1.25rem;
    margin-bottom:0.5em
}
.experiment.hotmail-explanation p{
    line-height:1.45;
    max-width:33em;
    margin:0 auto
}
.experiment.hotmail-explanation.ready-to-animate .ornament{
    -webkit-animation-name:ornamentRise;
    animation-name:ornamentRise
}