.perspective {
  -webkit-perspective: 800px;
  perspective: 800px
}

body,
div,
footer,
h1,
h2,
header,
html,
img,
nav,
p,
span,
table,
td,
th,
tr {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline
}

body {
  font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
  overflow-x: hidden
}

.clearfix:after,
.clearfix:before,
.container:after,
.container:before {
  content: " ";
  display: table
}

.clearfix:after,
.container:after {
  clear: both
}

.hidden {
  display: none
}

.app {
  position: relative;
  overflow-x: hidden
}

.linkButtonMenuItem {
  padding: 15px;
  display: block;
  text-align: center;
  border-bottom: 1px solid #e1e1e1;
  color: #212121;
  font-size: 18px;
  text-decoration: none
}

.linkButtonMenuItem:focus {
  outline-offset: -3px
}

.linkButtonMenuItem:hover {
  background-color: #f8f8f8
}

.linkButton {
  display: inline-block;
  line-height: 39px;
  height: 39px;
  padding: 0 5px;
  cursor: pointer;
  color: #fff;
  font: inherit;
  text-decoration: none
}

.linkButton:hover {
  color: #78b4e0
}

.linkButtonFixedHeader {
  display: flex;
  align-items: baseline;
  height: 39px;
  padding: 0;
  cursor: pointer;
  font-size: 15px !important;
  color: #222;
  font: inherit;
  text-decoration: none;
  transition: color .167s ease
}

.linkButtonFixedHeader.office-signIn {
  height: auto;
  padding: 0 12px
}

.linkButtonFixedHeader-hamburger {
  display: none
}

.linkButtonFixedHeader:hover {
  color: #0078d7
}

@media screen and (min-width:768px) and (max-width:1024px) {
  .linkButtonMenu {
    right: 0
  }
}

@media screen and (min-width:320px) and (max-width:767px) {
  .linkButtonSigninHeader {
    margin: 5px 13px
  }
}

.landing-background {
  position: absolute;
  top: 0;
  min-width: 100vw;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  z-index: -1;
  height: 100%;
  box-sizing: border-box;
  background-size: 1713px auto;
  background-position: center 350px;
  background-repeat: no-repeat
}

@media screen and (min-width:768px) and (max-width:1024px) {
  .landing-background {
    background-size: 1155px auto;
    background-position: center 445px
  }
}

.edgeFlyout {
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  margin-top: -72px;
  height: 72px;
  animation-name: ms-slideDownIn100;
  animation-duration: .367s;
  animation-delay: .267s;
  animation-fill-mode: forwards
}

.edgeFlyout.out {
  margin-top: 0;
  animation-name: ms-slideUpOut100;
  animation-duration: .267s;
  animation-delay: 0;
  animation-fill-mode: forwards
}

.edgeFlyout .edgePromo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  height: 72px
}

.edgeFlyout .edgePromo .edgeLogo {
  height: 40px;
  margin-right: 9px;
  padding: 10px 0
}

.edgeFlyout .edgePromo .edgeTry {
  color: #262626;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px
}

.edgeFlyout .edgePromo .edgeDescript {
  font-size: 12px;
  color: #818181
}

.edgeFlyout .egdeActionButton {
  background-color: #0078d7;
  height: 26px;
  width: 120px;
  color: #fff;
  padding: 4px 28px 5px;
  font-size: 13px;
  text-decoration: none;
  box-sizing: border-box
}

.edgeFlyout .egdeActionButton:hover {
  background-color: #0060ac;
  text-decoration: underline
}

.edgeFlyout .egdeActionButton.edgeDeny {
  background-color: transparent;
  color: #0078d7;
  text-decoration: underline;
  margin-right: 5px
}

.edgeFlyout .egdeActionButton.edgeDeny:hover {
  background-color: #c1c1c1
}

@keyframes ms-slideDownIn100 {
  0% {
    margin-top: -72px
  }

  to {
    margin-top: 0
  }
}

@keyframes ms-slideUpOut100 {
  0% {
    margin-top: 0
  }

  to {
    margin-top: -72px
  }
}

@media screen and (min-width:320px) and (max-width:767px) {
  .edgeAction {
    display: flex;
    flex-direction: column;
    width: 120px;
    align-items: center
  }

  .edgeFlyout .egdeActionButton.edgeDeny {
    margin-right: 0
  }

  .edgeDescript,
  .edgeTry {
    max-width: 45vw
  }
}

@media screen and (min-width:320px) and (max-width:374px) {
  .edgeTry {
    max-width: 40vw
  }

  .edgeDescript {
    display: none
  }
}

.officeHeader .headerContainer {
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  height: 50px;
  justify-content: space-between;
  align-items: center
}

.officeHeader .microsoftLogo {
  width: 108px;
  margin-top: 1px
}

.landing-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 5%;
  display: block
}

.landing-section:after,
.landing-sectionImgs:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both
}

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

.landing-sectionImgs .landing-sectionImg {
  float: none
}

.landing-sectionCopy {
  max-width: 60%;
  float: left
}

.landing-sectionImg {
  float: left
}

.sectionOne {
  flex-direction: column;
  align-items: center;
  position: relative;
  perspective: 1000px;
  margin-top: 70px
}

.sectionOne .landing-sectionCopy {
  align-self: flex-start;
  margin-top: 150px
}

.sectionTwo {
  margin-top: 140px
}

.sectionTwo .landing-sectionCopy {
  margin: 250px 0 0 50px
}

.sectionThree {
  margin-top: 350px
}

.sectionThree .landing-sectionCopy {
  margin: 180px 0 0
}

.sectionThree.noAnimation {
  margin-top: 230px
}

.sectionFour {
  margin-bottom: 80px;
  margin-top: 90px
}

.sectionFour .landing-sectionCopy {
  width: 100%;
  text-align: center;
  margin: 40px 0;
  float: none;
  max-width: 100%
}

.sectionFour .landing-sectionImgs {
  text-align: center;
  cursor: pointer
}

.sectionFive {
  margin-top: 180px
}

.sectionFive .landing-sectionCopy {
  width: 100%;
  text-align: center;
  margin: 0;
  float: none;
  max-width: 100%
}

.section-header {
  font-size: 32px;
  font-style: normal;
  color: #222;
  letter-spacing: .2px;
  font-weight: 100
}

.section-subheader {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: #666;
  margin-top: 17px;
  font-weight: 300
}

.sectionOne-subheader {
  max-width: 445px
}

.sectionTwo-subheader {
  max-width: 375px
}

.sectionThree-subheader {
  max-width: 520px
}

.sectionFive-subheader {
  max-width: 465px;
  margin: 17px auto 0;
  text-align: center
}

.sectionFive-subheader .linkButtonSigninHeader {
  margin: 20px 0
}

@media screen and (min-width:768px) and (max-width:1024px) {
  .landing-sectionCopy {
    max-width: 100%;
    float: none;
    text-align: center;
    clear: both
  }

  .section-header,
  .section-subheader {
    max-width: 522px;
    margin: 25px auto
  }

  .sectionTwo {
    margin-top: 180px
  }

  .sectionTwo .landing-sectionCopy {
    margin: 86px 0 0
  }

  .sectionTwo.noAnimation .outlookTabletScreen {
    margin-bottom: 100px
  }

  .sectionTwo.noAnimation .landing-sectionCopy {
    margin-top: 0
  }

  .sectionThree {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
    padding-top: 0
  }

  .sectionThree .landing-sectionCopy {
    order: 2;
    margin: 50px 0 0
  }

  .sectionThree.noAnimation {
    margin-top: 130px
  }

  .sectionFour {
    margin-bottom: 100px;
    margin-top: 170px
  }

  .sectionFour .section-header,
  .sectionFour .section-subheader {
    max-width: 100%
  }
}

@media screen and (min-width:320px) and (max-width:767px) {
  .landing-section {
    max-width: 716px;
    padding: 30px 25px
  }

  .landing-sectionCopy {
    width: 520px !important;
    text-align: center;
    margin: 0 auto
  }

  .landing-sectionCopy,
  .landing-sectionCopy .section-subheader {
    max-width: 100% !important
  }

  .section-header {
    font-size: 24px
  }

  .section-subheader {
    font-size: 14px
  }

  .sectionFive,
  .sectionFour,
  .sectionOne,
  .sectionThree,
  .sectionTwo {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center
  }

  .sectionOne .landing-sectionCopy {
    margin-top: 80px
  }

  .sectionTwo {
    padding-top: 0
  }

  .sectionTwo .landing-sectionCopy {
    margin-top: 230px;
    margin-left: 0
  }

  .sectionTwo.noAnimation .outlookTabletScreen {
    transform: scale(1.3) translate(-10%, 10%)
  }

  .sectionTwo.noAnimation .landing-sectionCopy {
    margin-top: 130px
  }

  .sectionThree.noAnimation {
    margin-top: 0
  }

  .sectionThree .landing-sectionCopy {
    margin-top: 219px;
    order: 2;
    padding-top: 30px;
    margin-top: 0
  }

  .sectionFour {
    margin-bottom: 0
  }

  .sectionFour .landing-sectionCopy {
    margin-top: 10px
  }

  .outlookAppstore,
  .outlookPlaystore,
  .outlookWinstore {
    padding: 10px 0
  }

  .sectionFour--android .outlookAppstore,
  .sectionFour--android .outlookWinstore,
  .sectionFour--ios .outlookPlaystore,
  .sectionFour--ios .outlookWinstore {
    display: none
  }
}

.headerLogo {
  float: left;
  width: 135px;
  display: block
}

.headerLogo-mini {
  float: left;
  width: 37px;
  display: none
}

.headerNav {
  padding: 32px 0
}

.fixedHeaderNav,
.headerNav {
  z-index: 2;
  position: relative
}

.fixedHeaderNav {
  padding: 5px 0
}

.headerLogo {
  font-size: 24px;
  line-height: 28px;
  font-weight: 200
}

.headerContainer {
  margin: 0 auto;
  padding: 0 5%
}

.fixedHeaderMenu,
.headerContainer {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: flex-start
}

.fixedHeaderMenu {
  flex-grow: 1
}

.fixedHeaderMenu .linkButtonFixedHeader-mobileMenu {
  display: flex;
  align-items: baseline;
  line-height: 45px
}

.fixedHeaderMenu .linkButtonFixedHeader {
  margin-right: 40px;
  position: relative
}

.fixedHeaderHidden {
  height: 0
}

.fixedHeader {
  background-color: #fff;
  width: 100%;
  height: 80px
}

.fixedHeader .headerContainer {
  max-width: 1600px;
  height: 100%;
  margin: 0 auto
}

.buyO365Button {
  width: 170px;
  height: 38px;
  display: flex;
  color: #fff;
  font-size: 13px !important;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: background-color .3s ease;
  font-weight: 100;
  letter-spacing: .975px;
  background-color: #0078d7
}

.buyO365Button:hover {
  background-color: #005b9e
}

.linkButtonMenu {
  display: block;
  position: absolute;
  width: 190px;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 1px 4px 0 rgba(34, 34, 34, .28);
  top: 45px;
  right: -50px;
  overflow: hidden
}

@media screen and (min-width:320px) and (max-width:767px) {
  .linkButtonFixedHeader-mobileMenu {
    line-height: normal;
    position: absolute;
    width: 190px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 4px 0 rgba(34, 34, 34, .28);
    top: 40px;
    left: 0;
    display: none
  }

  .linkButtonFixedHeader-mobileMenu .linkButtonFixedHeader {
    padding: 15px;
    display: block;
    text-align: center;
    border-bottom: 1px solid #e1e1e1;
    color: #222;
    font-size: 18px;
    text-decoration: none;
    margin: 0;
    height: 55px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center
  }

  .linkButtonFixedHeader-mobileMenu .linkButtonMenu {
    top: 202%;
    left: 0
  }

  .linkButtonFixedHeader-mobileMenu .linkButtonMenuItem {
    padding: 10px 15px;
    font-size: 16px
  }

  .linkButtonFixedHeader-mobileMenu.linkButtonFixedHeader-mobileMenu--visible {
    display: block
  }
}

@media screen and (min-width:320px) and (max-width:767px) {
  .headerContainer {
    padding: 0 25px;
    max-width: 716px
  }

  .headerLogo {
    display: none
  }

  .headerLogo-mini {
    display: block
  }

  .headerHero {
    padding-top: 100px
  }

  .headerHero .headerHero-title {
    font-size: 27px
  }

  .headerHero .headerHero-subtitle {
    margin-bottom: 35px
  }

  .fixedHeaderMenu .linkButtonFixedHeader-mobileMenu {
    display: none;
    flex-direction: column;
    align-items: stretch
  }

  .fixedHeaderMenu .linkButtonFixedHeader-mobileMenu.linkButtonFixedHeader-mobileMenu--visible {
    display: block
  }

  .fixedHeaderMenu .linkButtonFixedHeader-hamburger {
    display: block;
    width: 23px
  }
}

.headerHero {
  text-align: center;
  padding: 117px 0 100px;
  position: relative;
  flex-direction: column
}

.headerHero-title {
  font-size: 47px;
  color: #222;
  margin-bottom: 26px;
  letter-spacing: .5px;
  font-weight: 100
}

.headerHero-subtitle {
  font-size: 16px;
  color: #676767;
  letter-spacing: 0;
  line-height: 1.88;
  margin: 0 auto 29px;
  max-width: 530px;
  font-weight: 300
}

.linkButtonSigninHeader {
  width: 210px;
  border-radius: 2px;
  background-color: #fff;
  border: 2px solid #0078d7;
  color: #0078d7;
  font-size: 18px;
  text-decoration: none;
  padding: 10px 0;
  display: inline-block;
  margin: 0 13px;
  text-align: center;
  transition: background-color .3s ease;
  cursor: pointer
}

.linkButtonSigninHeader.linkButtonSigninHeader--premium {
  background-color: #0078d7;
  color: #fff
}

.linkButtonSigninHeader:hover {
  border-color: #005b9e;
  color: #005b9e
}

.linkButtonSigninHeader.linkButtonSigninHeader--premium:hover {
  background-color: #005b9e;
  border-color: #005b9e;
  color: #fff
}

@media screen and (min-width:320px) and (max-width:767px) {
  .headerHero {
    padding: 30px 20px 50px
  }

  .headerHero .linkButtonSigninHeader {
    margin: 0 13px 20px
  }
}

@-webkit-keyframes slideDown {
  0% {
    transform: translateY(-300px)
  }

  to {
    transform: translateY(0)
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-300px)
  }

  to {
    transform: translateY(0)
  }
}

@-webkit-keyframes slideUp {
  0% {
    transform: translateY(0)
  }

  to {
    transform: translateY(-300px)
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(0)
  }

  to {
    transform: translateY(-300px)
  }
}

@-webkit-keyframes rotateInRight {
  0% {
    transform: matrix3d(.617678, .139478, 0, -.000589, -.220175, .905113, 0, -.000005, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  to {
    transform: matrix3d(.717678, .139478, 0, -.000089, -.200175, .925113, 0, -.000005, 0, 0, 1, 0, 0, 0, 0, 1)
  }
}

@keyframes rotateInRight {
  0% {
    transform: matrix3d(.617678, .139478, 0, -.000589, -.220175, .905113, 0, -.000005, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  to {
    transform: matrix3d(.717678, .139478, 0, -.000089, -.200175, .925113, 0, -.000005, 0, 0, 1, 0, 0, 0, 0, 1)
  }
}

@-webkit-keyframes rotateOutRight {
  0% {
    transform: matrix3d(.717678, .139478, 0, -.000089, -.200175, .925113, 0, -.000005, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  to {
    transform: matrix3d(.617678, .139478, 0, -.000589, -.220175, .905113, 0, -.000005, 0, 0, 1, 0, 0, 0, 0, 1)
  }
}

@keyframes rotateOutRight {
  0% {
    transform: matrix3d(.717678, .139478, 0, -.000089, -.200175, .925113, 0, -.000005, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  to {
    transform: matrix3d(.617678, .139478, 0, -.000589, -.220175, .905113, 0, -.000005, 0, 0, 1, 0, 0, 0, 0, 1)
  }
}

@-webkit-keyframes rotateInRightX {
  0% {
    transform: matrix3d(.9, .102242, 0, .000598, -.004839, 1.880642, 0, -.000048, 0, 0, 1, 0, 0, 100, 0, 1)
  }

  to {
    transform: matrix3d(1.170318, .102242, 0, .000598, -.004839, 1.880642, 0, -.000048, 0, 0, 1, 0, 0, 100, 0, 1)
  }
}

@keyframes rotateInRightX {
  0% {
    transform: matrix3d(.9, .102242, 0, .000598, -.004839, 1.880642, 0, -.000048, 0, 0, 1, 0, 0, 100, 0, 1)
  }

  to {
    transform: matrix3d(1.170318, .102242, 0, .000598, -.004839, 1.880642, 0, -.000048, 0, 0, 1, 0, 0, 100, 0, 1)
  }
}

@-webkit-keyframes rotateOutRightX {
  0% {
    transform: matrix3d(1.170318, .102242, 0, .000598, -.004839, 1.880642, 0, -.000048, 0, 0, 1, 0, 0, 100, 0, 1)
  }

  to {
    transform: matrix3d(.9, .102242, 0, .000598, -.004839, 1.880642, 0, -.000048, 0, 0, 1, 0, 0, 100, 0, 1)
  }
}

@keyframes rotateOutRightX {
  0% {
    transform: matrix3d(1.170318, .102242, 0, .000598, -.004839, 1.880642, 0, -.000048, 0, 0, 1, 0, 0, 100, 0, 1)
  }

  to {
    transform: matrix3d(.9, .102242, 0, .000598, -.004839, 1.880642, 0, -.000048, 0, 0, 1, 0, 0, 100, 0, 1)
  }
}

@-webkit-keyframes rotateInLeft {
  0% {
    transform: matrix3d(6.76044, .16718, -2, .00125, 1.91031, 7.838, 2, -.00032, 0, 0, 1, 0, 28, 32, 0, 8)
  }

  to {
    transform: matrix3d(6.76044, .16718, 0, .00125, .91031, 7.838, 0, -.00032, 0, 0, 1, 0, 28, 32, 0, 7)
  }
}

@keyframes rotateInLeft {
  0% {
    transform: matrix3d(6.76044, .16718, -2, .00125, 1.91031, 7.838, 2, -.00032, 0, 0, 1, 0, 28, 32, 0, 8)
  }

  to {
    transform: matrix3d(6.76044, .16718, 0, .00125, .91031, 7.838, 0, -.00032, 0, 0, 1, 0, 28, 32, 0, 7)
  }
}

@-webkit-keyframes rotateOutLeft {
  0% {
    transform: matrix3d(6.76044, .16718, 0, .00125, .91031, 7.838, 0, -.00032, 0, 0, 1, 0, 28, 32, 0, 7)
  }

  to {
    transform: matrix3d(6.76044, .16718, -2, .00125, 1.91031, 7.838, 2, -.00032, 0, 0, 1, 0, 28, 32, 0, 8)
  }
}

@keyframes rotateOutLeft {
  0% {
    transform: matrix3d(6.76044, .16718, 0, .00125, .91031, 7.838, 0, -.00032, 0, 0, 1, 0, 28, 32, 0, 7)
  }

  to {
    transform: matrix3d(6.76044, .16718, -2, .00125, 1.91031, 7.838, 2, -.00032, 0, 0, 1, 0, 28, 32, 0, 8)
  }
}

@-webkit-keyframes rotateInAndriod {
  0% {
    transform: matrix3d(1, .059794, 0, -.000485, -.154995, 1, 0, -.000282, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  to {
    transform: matrix3d(1, .049794, 0, -.000085, -.134995, 1, 0, -.000082, 0, 0, 1, 0, 0, 0, 0, 1)
  }
}

@keyframes rotateInAndriod {
  0% {
    transform: matrix3d(1, .059794, 0, -.000485, -.154995, 1, 0, -.000282, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  to {
    transform: matrix3d(1, .049794, 0, -.000085, -.134995, 1, 0, -.000082, 0, 0, 1, 0, 0, 0, 0, 1)
  }
}

@-webkit-keyframes rotateOutAndriod {
  0% {
    transform: matrix3d(1, .049794, 0, -.000085, -.134995, 1, 0, -.000082, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  to {
    transform: matrix3d(1, .059794, 0, -.000485, -.154995, 1, 0, -.000282, 0, 0, 1, 0, 0, 0, 0, 1)
  }
}

@keyframes rotateOutAndriod {
  0% {
    transform: matrix3d(1, .049794, 0, -.000085, -.134995, 1, 0, -.000082, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  to {
    transform: matrix3d(1, .059794, 0, -.000485, -.154995, 1, 0, -.000282, 0, 0, 1, 0, 0, 0, 0, 1)
  }
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px)
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.fadeInDown {
  animation: fadeInDown .267s cubic-bezier(.28, .06, .07, 1);
  animation-fill-mode: forwards
}

.rotateInLeft {
  animation: rotateInLeft 1s cubic-bezier(.28, .06, .07, 1);
  animation-delay: .367s;
  animation-fill-mode: forwards
}

.rotateInAndriod {
  animation: rotateInAndriod 1s cubic-bezier(.28, .06, .07, 1);
  animation-delay: .367s;
  animation-fill-mode: forwards
}

.rotateOutAndriod {
  animation: rotateOutAndriod 1s cubic-bezier(.28, .06, .07, 1);
  animation-fill-mode: forwards
}

.rotateOutLeft {
  animation: rotateOutLeft 1s cubic-bezier(.28, .06, .07, 1);
  animation-fill-mode: forwards
}

.rotateInRight {
  animation: rotateInRight 1s cubic-bezier(.28, .06, .07, 1);
  animation-delay: .367s;
  animation-fill-mode: forwards
}

.rotateOutRight {
  animation: rotateOutRight 1s cubic-bezier(.28, .06, .07, 1);
  animation-fill-mode: forwards
}

.rotateInRightX {
  animation: rotateInRightX 1s cubic-bezier(.28, .06, .07, 1);
  animation-delay: .367s;
  animation-fill-mode: forwards
}

.rotateOutRightX {
  animation: rotateOutRightX 1s cubic-bezier(.28, .06, .07, 1);
  animation-fill-mode: forwards
}

.noAnimation .rotateInAndriod,
.noAnimation .rotateInLeft,
.noAnimation .rotateInRight,
.noAnimation .rotateInRightX,
.noAnimation .rotateOutAndriod,
.noAnimation .rotateOutLeft,
.noAnimation .rotateOutRight,
.noAnimation .rotateOutRightX {
  animation: none
}

.noAnimation .outlookAndroidScreen,
.noAnimation .outlookCalendarScreen,
.noAnimation .outlookIphoneAppScreen,
.noAnimation .outlookTabletScreen {
  transform: none
}

.noAnimation .outlookTabletScreen {
  max-height: none;
  transform: scale(1.3) translateX(-10%)
}

.landing-sectionImg {
  margin: 0
}

.outlookCalendarScreen {
  width: 855px;
  max-height: 565px;
  max-width: 80%;
  margin-left: -40px;
  transform: matrix3d(6.76044, .16718, -2, .00125, 1.91031, 7.838, 2, -.00032, 0, 0, 1, 0, 28, 32, 0, 8)
}

.outlookIphoneAppScreen {
  width: 377px;
  max-height: 586px;
  max-width: 40vw;
  position: absolute;
  top: 200px;
  left: 55%;
  transform: matrix3d(.617678, .139478, 0, -.000589, -.220175, .905113, 0, -.000005, 0, 0, 1, 0, 0, 0, 0, 1)
}

.outlookTabletScreen {
  width: 542px;
  margin-top: 100px;
  max-height: 300px;
  max-width: 50%;
  transform: matrix3d(.9, .102242, 0, .000598, -.004839, 1.880642, 0, -.000048, 0, 0, 1, 0, 0, 100, 0, 1)
}

.outlookAndroidScreen {
  width: auto;
  max-width: 50%;
  max-height: 551px;
  margin-top: 59px;
  margin-right: 35px;
  float: right;
  transform-origin: center right -10px;
  transform: matrix3d(1, .059794, 0, -.000485, -.154995, 1, 0, -.000282, 0, 0, 1, 0, 0, 0, 0, 1)
}

.outlookAppstore,
.outlookPlaystore,
.outlookWinstore {
  min-width: 167px;
  height: 50px;
  margin: 0 14px
}

@media screen and (min-width:768px) and (max-width:1024px) {
  .outlookTabletScreen {
    float: none;
    margin: 0 auto;
    display: block;
    margin-bottom: 260px;
    margin-top: -100px
  }

  .outlookAndroidScreen {
    width: 275px;
    height: 500px;
    margin: 0
  }

  .outlookCalendarScreen {
    width: 610px;
    max-width: 90%;
    margin-left: 25px;
    float: none
  }

  .outlookIphoneAppScreen {
    top: 90px;
    width: 270px;
    height: 427px;
    left: 60%
  }
}

@media screen and (min-width:320px) and (max-width:767px) {
  .outlookCalendarScreen {
    margin-left: -10px;
    max-width: 100%
  }

  .outlookIphoneAppScreen {
    top: 35px;
    max-height: 60vw
  }

  .outlookTabletScreen {
    max-width: 375px;
    width: 85%;
    max-height: 40vh;
    margin-top: 0;
    margin-left: 30px
  }

  .outlookAndroidScreen {
    max-width: 50%;
    max-height: 310px;
    margin-top: 0
  }
}

#footerCurve {
  position: absolute;
  width: 100%;
  height: 70px;
  top: -70px;
  bottom: 0;
  left: 0
}

.footer {
  background-color: #f8f8f8;
  text-align: center;
  position: relative;
  padding-top: 50px;
  padding-bottom: 70px;
  max-width: 100vw
}

.footer .linkButtonMenu {
  top: -140%
}

.footerNav {
  z-index: 2;
  position: relative;
  max-width: 1600px;
  height: %;
  margin: 0 auto
}

.footerNav-contentLeft,
.footerNav-topMenu {
  float: left;
  width: 50%
}

.footerNav-contentLeft {
  text-align: left
}

.footerNav-contentLeft .linkButtonFixedFooter {
  color: #333;
  font-size: 17px;
  margin: 24px 24px 24px 0;
  display: block;
  float: left
}

.footerNav-contentLeft .linkButtonFixedFooter:hover {
  color: #222
}

.footerNav-contentLeft .privacy {
  font-weight: 600
}

.footerNav-contentLeft .legal {
  font-weight: 400
}

.footerNav-topMenu {
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline
}

.footerNav-topMenu .linkButtonFixedFooter {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  padding: 6px 0 10px 36px;
  cursor: pointer
}

.footerNav-topMenu .linkButtonFixedFooter:hover {
  color: #0078d7
}

@supports (-ms-ime-align:auto) {
  .footerNav-topMenu .linkButtonFixedFooter {
    padding: 7px 0 10px 36px
  }
}

.footerLogo {
  width: 108px;
  padding-top: 6px
}

.footerCopyright {
  float: left;
  color: #333;
  font-size: 16px;
  clear: both;
  font-weight: 400
}

.linkButtonFixedFooter {
  text-decoration: none
}

@media screen and (min-width:768px) and (max-width:1024px) {
  .footer {
    max-width: 100vw
  }

  .footerNav {
    padding: 0 40px
  }

  .footerNav-contentLeft {
    width: 60%
  }

  .footerNav-topMenu {
    width: 40%
  }
}

@media screen and (min-width:320px) and (max-width:767px) {
  .footer {
    max-width: 100vw
  }

  .footerNav {
    padding: 0
  }

  .linkButtonFixedFooter {
    clear: both
  }

  .footerNav-contentLeft .linkButtonFixedFooter {
    margin: 5px 0 0
  }

  .footerLogo {
    margin-bottom: 20px
  }

  .footerCopyright {
    margin-top: 15px
  }

  .footer .linkButtonMenu {
    top: -90%;
    right: 0
  }

  .footerNav-contentLeft {
    width: 40%
  }

  .footerNav-topMenu {
    width: 60%
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
  opacity: 1;
  background: rgba(0, 0, 0, .4);
  animation-name: fadeIn;
  animation-duration: .2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  padding: 0
}

.modal-close,
.modal-close svg {
  cursor: pointer
}

.modal {
  max-width: 480px;
  height: 380px;
  background: #fff;
  margin: 120px auto;
  text-align: center;
  animation-name: scaleUp;
  animation-delay: .1s;
  animation-duration: .2s;
  animation-timing-function: cubic-bezier(.1, .9, .2, 1);
  animation-fill-mode: both
}

@keyframes scaleUp {
  0% {
    opacity: 0;
    transform: scale3d(.95, .95, 1)
  }

  to {
    opacity: 1;
    transform: scaleX(1)
  }
}

.modal-header {
  font-size: 24px;
  color: #222;
  font-weight: 200;
  padding: 26px 0 0
}

.modal-button {
  width: 270px;
  height: 60px;
  font-size: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none
}

.modal-button .button-logo {
  width: 59px;
  border-right: 2px solid hsla(0, 0%, 100%, .2);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.modal-button .button-text {
  margin-left: 22px
}

.modal-button--microsoft {
  background: #0078d7;
  color: #fff;
  margin: 35px auto 0
}

.modal-button--microsoft:hover {
  background-color: #005a9e
}

.modal-button--google {
  border: 1px solid #fce2df;
  color: #ea4335;
  margin: 0 auto
}

.modal-button--google:hover {
  background-color: #eaeaea
}

.modal-button--google .button-logo {
  border-right-color: #fce2df
}

.modal-buttonSeparator {
  padding: 14px 0 15px;
  font-size: 16px;
  color: #8e8e93
}

.modal-footer {
  font-size: 20px;
  color: #222;
  border-top: 1px solid #f1f1f1;
  margin: 28px 0 0;
  padding: 30px 0 0
}

.modal-footer a {
  text-decoration: none;
  color: #0078d7
}

.modal-footer a:hover {
  color: #005a9e
}

.tnarrowDiv {
  text-align: center;
  font-weight: 400;
  margin-left: 35px;
  margin-right: 35px;
  overflow: hidden
}

.tnarrowMain {
  margin-top: 40px
}

.tnarrowAppIcon {
  height: 65px;
  width: 65px
}

.tnarrowBrand {
  color: #0072c6;
  margin-top: 10px;
  font-size: 32px
}

.tnarrowTitle {
  color: #222;
  font-size: 22px;
  margin-top: 40px
}

.tnarrowDescription {
  margin-top: 15px;
  font-size: 14px
}

.tnarrowButton {
  margin-top: 25px;
  border-radius: 3px;
  color: #fff;
  background-color: #0072c6;
  font-size: 16px;
  display: inline-block;
  padding: 7px 20px;
  text-decoration: none;
  width: 80px
}

.tnarrowLink {
  margin-top: 10px;
  font-size: 14px
}

.tnarrowStoreIcon {
  margin-top: 40px;
  width: 134px
}

.tnarrowSignupText {
  margin-top: 50px
}

.tnarrowSignupLink {
  margin-left: 5px;
  text-decoration: none
}