/* ##################################################

DEFAULTS 

*/
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

* {
  margin: 0;
  padding: 0; }

body {
  position: relative;
  background: #FFF;
  font-family: "Muli", sans-serif;
  font-size: 16px;
  color: #1e2e3e; }

img {
  width: 100%;
  max-width: 100%; }

a {
  color: #0073ee;
  text-decoration: none;
  transition: all 260ms ease-in-out; }
  a:hover {
    color: #1e2e3e; }

hr {
  border: none;
  border-bottom: 1px solid rgba(30, 46, 62, 0.1);
  margin: 66px 0; }

h3 + hr {
  border-bottom: 3px solid #0073ee;
  margin: 0 0 66px; }

/* ##################################################

TYPE 

*/
h1, h2, h3, h4, h5, h6 {
  font-family: "Muli", sans-serif;
  margin: 0; }

h1 {
  font-size: 30px; }
  @media screen and (min-width: 800px) {
    h1 {
      font-size: 36px; } }

h2 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 44px; }
  @media screen and (min-width: 800px) {
    h2 {
      font-size: 28px;
      line-height: 36px; } }

h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 29.3333333333px; }

h4 {
  font-size: 18px;
  font-family: "Muli", sans-serif;
  font-weight: 900;
  margin-bottom: 22px; }
  @media screen and (min-width: 800px) {
    h4 {
      font-size: 22px; } }

p {
  margin: 0 0 44px;
  line-height: 1.5em; }

/* ##################################################

NAV 

*/
nav {
  position: sticky;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 400; }
  @media screen and (min-width: 800px) {
    nav {
      padding: 22px 44px; } }
  @media screen and (min-width: 800px) {
    nav {
      display: flex;
      align-items: center; } }
  nav .logo {
    position: relative;
    top: 16px;
    left: 22px;
    width: 188px;
    height: auto; }
    @media screen and (min-width: 800px) {
      nav .logo {
        top: 0;
        left: 0; } }
  nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end; }
    nav ul li {
      padding: 22px;
      width: 25%; }
      @media screen and (min-width: 800px) {
        nav ul li {
          width: auto; } }
      nav ul li a {
        text-decoration: none;
        font-size: 14px;
        color: rgba(30, 46, 62, 0.5);
        transition: all 260ms ease-in-out; }
        nav ul li a.on, nav ul li a:hover {
          color: #0073ee; }

/* ##################################################

LAYOUT & CLASSES 

*/
main {
  position: relative; }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    main {
      padding: 44px; } }

.container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 22px; }
  .container.offset {
    max-width: calc(1280px + 122px); }
    @media screen and (min-width: 768px) and (max-width: 1280px) {
      .container.offset {
        max-width: 100%; } }

.fancy {
  background: url("/assets/svg/lines.svg") no-repeat;
  background-position: 50% 10%;
  background-size: 600%; }
  @media screen and (min-width: 800px) {
    .fancy {
      background-size: 100%; } }

.highlight {
  background-color: rgba(0, 41, 85, 0.08);
  padding: 10vh 0; }

.hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40vh;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  overflow: hidden; }
  @media screen and (min-width: 800px) {
    .hero {
      height: 50vh; } }
  .hero > div:first-child {
    max-width: 880px;
    padding: 0 22px;
    width: 100%; }
    @media screen and (min-width: 800px) {
      .hero > div:first-child {
        padding: 22px; } }
  .hero h1, .hero .titler {
    position: relative;
    z-index: 2; }
    @media screen and (min-width: 800px) {
      .hero h1, .hero .titler {
        font-size: 44px;
        font-weight: 900; } }
  .hero h2 {
    font-weight: 400;
    margin: 22px 0 0; }
    @media screen and (min-width: 800px) {
      .hero h2 {
        font-size: 26px;
        line-height: 36px;
        color: #1e2e3e;
        font-weight: lighter; } }
  .hero video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    background-color: #FFF; }

.container + .hero {
  border-bottom: 1px solid rgba(30, 46, 62, 0.1);
  border-top: 1px solid rgba(30, 46, 62, 0.1); }

.intro {
  margin: 88px 0;
  max-width: 800px; }
  @media screen and (min-width: 800px) {
    .intro {
      margin: 176px 0; } }
  .intro h1 {
    margin-bottom: 14.6666666667px; }
  .intro h2 {
    margin-bottom: 0; }
  .intro.center {
    margin-left: auto;
    margin-right: auto; }
    @media screen and (max-width: 800px) {
      .intro.center {
        text-align: left; } }

.apps {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 44px;
  flex-wrap: wrap; }
  .apps > div {
    width: calc(50%); }
    .apps > div:first-child {
      margin: 0; }
    @media screen and (min-width: 800px) {
      .apps > div {
        width: 25%; } }

.app--card {
  position: relative;
  z-index: 0;
  transition: all 260ms ease-in-out; }
  @media screen and (min-width: 800px) {
    .app--card {
      min-height: 420px; } }
  .app--card .media {
    position: relative;
    transition: all 130ms ease-in-out; }
    @media screen and (min-width: 800px) {
      .app--card .media img {
        transform: translateY(-88px);
        transition: all 260ms ease-in-out; }
      .app--card .media.shadow:after {
        content: "";
        position: absolute;
        bottom: 10%;
        left: 15%;
        width: 60%;
        height: 18px;
        border-radius: 100%;
        background: #1e2e3e;
        filter: blur(18px);
        opacity: 0.8;
        transition: all 130ms ease-in-out; } }
  .app--card .body {
    padding: 12px;
    text-align: left;
    padding-left: 0; }
    .app--card .body p {
      margin-bottom: 0; }
    @media screen and (min-width: 1280px) {
      .app--card .body {
        padding: 0 66px 66px; } }
  @media screen and (min-width: 800px) {
    .app--card:hover .media img {
      transform: translateY(-122px); }
    .app--card:hover .media:after {
      left: 20%;
      width: 60%;
      opacity: 0.5; } }

.app--detail {
  position: relative; }
  @media screen and (min-width: 800px) {
    .app--detail {
      display: flex;
      align-items: center;
      padding: 0;
      margin: 0; }
      .app--detail > div:first-child {
        width: 50%; }
      .app--detail > div:last-child {
        width: 50%; } }
  .app--detail > div img {
    object-fit: cover;
    object-position: 50% 50%;
    height: 100%; }
  .app--detail > div *:last-child {
    margin-bottom: 0; }

.container:nth-of-type(2n) > .app--detail {
  flex-direction: row-reverse; }

.ratings {
  font-family: "material icons";
  text-transform: none;
  margin: 0; }
  .ratings [class*="star"] {
    color: #0073ee;
    font-size: 48px; }
    @media screen and (min-width: 800px) {
      .ratings [class*="star"] {
        font-size: 66px; } }
    .ratings [class*="star"]:after {
      content: "\e838"; }
  .ratings .star--half::after {
    content: "\e839"; }
  .ratings.ratings__small {
    text-align: center;
    max-width: 280px;
    margin: 0 auto 5.5px; }
    .ratings.ratings__small [class*="star"] {
      font-size: 24px; }
    .ratings.ratings__small + p {
      text-align: center;
      max-width: 280px;
      margin: 0 auto;
      font-size: 12px;
      line-height: 14px;
      padding: 0 12px; }
      @media screen and (min-width: 800px) {
        .ratings.ratings__small + p {
          font-style: italic;
          font-size: 14px;
          line-height: 18px; } }

.ratings + h2 {
  margin: 0 auto 11px; }

.ratings + h2 + h3 {
  margin: 0;
  font-size: 18px;
  font-style: italic;
  display: block; }

.columns > div {
  position: relative;
  margin-bottom: 132px; }
@media screen and (min-width: 800px) {
  .columns {
    display: flex; }
    .columns > div {
      width: 50%;
      margin-left: 44px; }
      .columns > div:first-child {
        margin: 0; } }
.columns.center {
  display: flex; }
  .columns.center > div {
    margin: 0;
    width: 50%; }
    .columns.center > div img {
      max-width: 66px; }
.columns video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF; }
.columns.home {
  align-items: center;
  margin: 132px 0 44px; }
  .columns.home > div {
    margin-bottom: 0; }
  .columns.home > div:last-child {
    border: 1px solid rgba(30, 46, 62, 0.2);
    overflow: hidden;
    align-self: center;
    width: 100%;
    height: 0;
    padding-top: calc(56.25%);
    margin-top: 44px; }
    @media screen and (min-width: 800px) {
      .columns.home > div:last-child {
        width: 66%;
        padding-top: calc(56.25% / 1.825);
        border: none;
        box-shadow: 0px 20px 84px 4px rgba(30, 46, 62, 0.2);
        margin-top: 0; } }

@media screen and (min-width: 800px) {
  .ui--toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 22px; } }
@media screen and (min-width: 800px) {
  .ui--toolbar > div {
    width: 50%; } }
@media screen and (max-width: 799px) {
  .ui--toolbar > div .ui--button {
    max-width: 100%;
    width: 100%;
    margin-bottom: 22px; } }

/* ##################################################

UI (BUTTONS, ETC) 

*/
.ui--button {
  position: relative;
  color: #0073ee;
  border: 2px solid #0073ee;
  border-radius: 100px;
  padding: 0 14.6666666667px;
  line-height: 44px;
  display: inline-block;
  min-width: 166px;
  text-align: center;
  text-decoration: none;
  transition: all 260ms ease-in-out; }
  .ui--button:hover {
    background: #0073ee;
    color: #FFF;
    border-color: #FFF; }

.ui--icon {
  display: block;
  padding: 0; }
  .ui--icon img {
    padding: 0;
    border: 1px solid #0073ee;
    border-radius: 100%;
    transition: all 260ms ease-in-out; }
  .ui--icon:hover img {
    border: 6px solid rgba(0, 115, 238, 0.24);
    transform: scale(1.35); }

/* ##################################################

UTILITIES

*/
.center {
  text-align: center; }

/* ##################################################

FOOTER 

*/
main + footer {
  position: relative;
  border-top: 1px solid rgba(30, 46, 62, 0.1);
  margin-top: 88px; }
  @media screen and (min-width: 800px) {
    main + footer {
      margin-top: 166px; } }
  main + footer .footer--body {
    padding: 88px 0;
    text-align: center; }
    @media screen and (min-width: 800px) {
      main + footer .footer--body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        height: 222px; } }
  main + footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none; }
    main + footer ul li {
      margin: 0;
      display: inline; }
      main + footer ul li a {
        padding: 11px; }
  main + footer ul li, main + footer p {
    font-size: 14px;
    margin: 0; }
  main + footer a {
    text-decoration: none; }

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