@font-face {
  font-family: AppFont;
  src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); }
@font-face {
  font-family: AppFontBold;
  src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); }
@font-face {
  font-family: AppFontBoldItalic;
  src: url("../fonts/Montserrat-BoldItalic.ttf") format("truetype"); }
@font-face {
  font-family: AppFontItalic;
  src: url("../fonts/Montserrat-Italic.ttf") format("truetype"); }
@font-face {
  font-family: AppFontLight;
  src: url("../fonts/Montserrat-Light.ttf") format("truetype"); }
@font-face {
  font-family: AppFontLightItalic;
  src: url("../fonts/Montserrat-LightItalic.ttf") format("truetype"); }
@font-face {
  font-family: AppFontMedium;
  src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); }
@font-face {
  font-family: AppFontMediumItalic;
  src: url("../fonts/Montserrat-MediumItalic.ttf") format("truetype"); }
@font-face {
  font-family: AppFontBlack;
  src: url("../fonts/Montserrat-Black.ttf") format("truetype"); }
@font-face {
  font-family: AppFontExtraBold;
  src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype"); }
@font-face {
  font-family: AppFontBlackItalic;
  src: url("../fonts/Montserrat-BlackItalic.ttf") format("truetype"); }
@font-face {
  font-family: AppFontThin;
  src: url("../fonts/Montserrat-Thin.ttf") format("truetype"); }
@font-face {
  font-family: AppFontThinItalic;
  src: url("../fonts/Montserrat-ThinItalic.ttf") format("truetype"); }
#body {
  background-color: white; }

.header {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  display: -moz-flex;
  -moz-flex-direction: column;
  -moz-justify-content: center;
  -moz-align-items: center;
  display: -ms-flex;
  -ms-flex-direction: column;
  -ms-justify-content: center;
  -ms-align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100vw;
  height: 4.5em;
  background-image: url(../img/header_bg.jpg);
  background-size: cover;
  background-position: center; }
  .header .logo_box {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -moz-flex;
    -moz-flex-direction: row;
    -moz-justify-content: center;
    -moz-align-items: center;
    display: -ms-flex;
    -ms-flex-direction: row;
    -ms-justify-content: center;
    -ms-align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 0.6em; }
    .header .logo_box .logo {
      position: relative;
      width: 2em;
      height: 100%;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
      .header .logo_box .logo[data-logo="netapp"] {
        background-image: url(../img/netapp_logo.png);
        background-size: 70%; }
      .header .logo_box .logo[data-logo="kaon"] {
        background-image: url(../img/kaon_logo.png);
        background-size: 59%; }
    .header .logo_box .logo_divider {
      position: relative;
      width: 1px;
      height: 100%;
      background-color: white; }
  .header .title {
    position: relative;
    margin-top: 1em;
    color: white;
    font-size: 0.6em;
    font-family: AppFontExtraBold;
    user-select: text; }
  .header .subtitle_container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -moz-flex;
    -moz-flex-direction: row;
    -moz-justify-content: center;
    -moz-align-items: center;
    display: -ms-flex;
    -ms-flex-direction: row;
    -ms-justify-content: center;
    -ms-align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 5.1em;
    height: 0.8em;
    margin-top: 0.4em;
    border-top: solid white 2px;
    border-bottom: solid white 2px; }
    .header .subtitle_container .subtitle {
      position: relative;
      color: white;
      font-size: 0.32em;
      user-select: text; }

.main_content {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  display: -moz-flex;
  -moz-flex-direction: row;
  -moz-justify-content: center;
  -moz-align-items: center;
  display: -ms-flex;
  -ms-flex-direction: row;
  -ms-justify-content: center;
  -ms-align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100vw;
  height: calc(100vh - 4.5em); }
  .main_content .text_content {
    position: relative;
    width: 8em;
    height: auto;
    margin-right: 0.5em;
    color: #484848; }
    .main_content .text_content .title {
      position: relative;
      margin-bottom: 0.1em;
      font-size: 0.4em;
      font-family: AppFontExtraBold;
      user-select: text; }
    .main_content .text_content .subtitle {
      position: relative;
      line-height: 1.4em;
      margin-bottom: 0.6em;
      font-size: 0.25em;
      user-select: text; }
    .main_content .text_content .quote {
      position: relative;
      margin-bottom: 1em;
      color: #3f87fb;
      font-size: 0.25em;
      font-family: AppFontBold;
      user-select: text; }
    .main_content .text_content .description {
      position: relative;
      line-height: 1.5em;
      font-size: 0.25em;
      user-select: text; }
      .main_content .text_content .description u {
        color: #3f87fb; }
  .main_content .video_content {
    position: relative;
    width: 8em;
    height: auto; }
    .main_content .video_content #video {
      width: 100%;
      height: 4.51em; }
    .main_content .video_content .play_icon {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1.4em;
      height: 1.4em;
      transform: translate(-50%, -50%);
      background-image: url(../img/play_button.png);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      transition: opacity 0.5s ease; }
    .main_content .video_content #video_cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .main_content .video_content.video_playing .play_icon {
      opacity: 0;
      pointer-events: none; }
    .main_content .video_content.video_playing #video_cover {
      display: none; }

.bodyPortrait .main_content {
  flex-direction: column;
  justify-content: flex-start; }
  .bodyPortrait .main_content .text_content {
    width: 12em;
    margin-right: 0;
    margin-bottom: 0.5em;
    margin-top: 1em; }
    .bodyPortrait .main_content .text_content .title {
      font-size: 0.6em; }
    .bodyPortrait .main_content .text_content .subtitle,
    .bodyPortrait .main_content .text_content .quote,
    .bodyPortrait .main_content .text_content .description {
      font-size: 0.4em; }
  .bodyPortrait .main_content .video_content {
    width: 12em; }
    .bodyPortrait .main_content .video_content #video {
      height: 6.71em; }
    .bodyPortrait .main_content .video_content .play_icon {
      width: 2.1em;
      height: 2.1em; }

.bodyPhone .header {
  height: 7.5em; }
  .bodyPhone .header .logo_box {
    height: 1.1em; }
    .bodyPhone .header .logo_box .logo {
      width: 4em; }
  .bodyPhone .header .title {
    font-size: 0.7em; }
  .bodyPhone .header .subtitle_container {
    width: 7.4em;
    height: 1em; }
    .bodyPhone .header .subtitle_container .subtitle {
      font-size: 0.52em; }
.bodyPhone .main_content .text_content {
  font-size: 1.35em; }
.bodyPhone .main_content .video_content {
  width: 17em; }
  .bodyPhone .main_content .video_content #video {
    height: 9.51em; }
  .bodyPhone .main_content .video_content .play_icon {
    width: 3.6em;
    height: 3.6em; }

/*# sourceMappingURL=custom.css.map */