/*! RESET */
html, button, input, select, textarea {
  color: #222;
}

body {
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

img {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

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

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/******
  $INDEX

  $1 GENERAL STYLES

  $2 LAYOUT
    $2.1 Header
    $2.2 Menu
    $2.3 Content
    $2.4 Footer

  $MQ

******/
/**************
// $1 GENERAL STYLES
***************/
html, body {
  height: 100%;
  margin: 0;
}

html {
  box-sizing: border-box;
}

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

body {
  font-size: 100%;
  font-family: 'Lato', sans-serif;
  line-height: 1.3;
}

button {
  cursor: pointer;
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
}

ul {
  list-style: none;
  padding-left: 0;
}

h4 {
  color: #0057C3;
  font-weight: 300;
  margin: 0 0 .4em 0;
  font-size: 1.75rem;
  line-height: 1.2;
}

h5 {
  color: #2BD7DB;
  font-size: 1.75rem;
  margin: 0;
}

a {
  text-decoration: none;
  color: #2BD7DB;
}

a:hover {
  color: #20babd;
}

/**************
// $2 LAYOUT
***************/
.header-wrapper {
  position: absolute;
  width: 100%;
  display: flex;
  background: rgba(34, 37, 50, 0.58);
  z-index: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
  z-index: 2;
}

.header__inner {
  background: #222F6B;
}

.logo {
  flex-grow: 2;
  padding: 1em 5%;
}

.menu-wrapper {
  display: flex;
}

.menu-checker {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  right: 0;
}

.menu-launcher {
  display: none;
}

.logo, .nav-wrapper, .language-selector, .menu-launcher {
  align-self: center;
}

.hide-elements {
  justify-content: flex-end;
  display: flex;
  padding-right: 1.15rem;
}

.nav-wrapper {
  white-space: nowrap;
}

.nav-item {
  text-decoration: none;
  color: #fff;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

.nav-item:hover {
  color: #2BD7DB;
}

.language-selector {
  margin: 1em 0 1em 1.2em;
  position: relative;
  color: #fff;
}

.lang-selected {
  color: #fff !important;
}

.above-fold {
  background: #0247c2;
  background: -moz-linear-gradient(top, #0247c2 0%, #00dcd4 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #0247c2), color-stop(100%, #00dcd4));
  background: -webkit-linear-gradient(top, #0247c2 0%, #00dcd4 100%);
  background: -o-linear-gradient(top, #0247c2 0%, #00dcd4 100%);
  background: -ms-linear-gradient(top, #0247c2 0%, #00dcd4 100%);
  background: linear-gradient(to bottom, #0247c2 0%, #00dcd4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0247c2', endColorstr='#00dcd4', GradientType=0 );
  padding-top: 6em;
  color: #fff;
  text-align: center;
  position: relative;
}

.content-wrapper {
  max-width: 50rem;
  margin: 7em auto 0;
  position: relative;
  z-index: 1;
}

h1 {
  font-size: 3.3750rem;
  line-height: 1.05;
  margin-bottom: .8em;
  font-weight: 300;
  padding: 0 1.3em;
}

h2 {
  font-weight: normal;
  margin-bottom: .5em;
  font-size: 1.5rem;
}

.apps-list {
  color: #2BD7DB;
  font-weight: 700;
  font-size: 2.1250rem;
  counter-reset: counter;
  margin-bottom: 1.2em;
}

.app-name {
  color: #fff;
  padding: 0 .5em 0 .8em;
  position: relative;
}

.app-name::before {
  content: "0" counter(counter);
  counter-increment: counter;
  position: absolute;
  left: .1em;
  top: -.5em;
  font-weight: 300;
  opacity: .5;
  z-index: -1;
  font-size: 2.7500rem;
  color: #2BD7DB;
}

.launch-video {
  /* width: 4.5rem; */
  height: 4.5rem;
  border: 6px solid #fff;
  border-radius: 2.25rem;
  padding: 0 1em 0 2em;
  background: none;
  position: relative;
  /* overflow: hidden; */
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  /* text-indent: 40%; */
  /* white-space: nowrap; */
  margin: 1.6em 0 1.6em;
  color: #fff;
  font-size: 200%;
}

.launch-video::before {
  content: '';
  position: absolute;
  left: 1em;
  /* top: 50%; */
  /* -webkit-transform: translate(-50%, -50%) scaleY(0.8); */
  /*-moz-transform: translate(-50%, -50%) scaleY(0.8);
  -ms-transform: translate(-50%, -50%) scaleY(0.8);
  -o-transform: translate(-50%, -50%) scaleY(0.8);*/
  /* transform: translate(-50%, -50%) scaleY(0.8); */
  border: 0.6em solid transparent;
  border-left-color: #2BD7DB;
  /* margin-left: 1.3em; */
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
  display: inline-block;
}

.launch-video:hover::before {
  border-left-color: #0057C3;
}

.features {
  margin: .7em auto 7em;
  font-size: 1.2rem;
  width: 60%;
}

.features li {
  margin-bottom: .3em;
}

h3 {
  color: #404455;
  font-weight: normal;
  font-size: 1.75rem;
  position: relative;
  margin-top: 1.5em;
}

/*h3::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 1px;
  background: #404455;
  bottom: -.8em;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}*/

.early-access {
  background: #0057C3;
  position: relative;
  z-index: 1;
  padding:3em 0 4em;
}

.early-access h2 {
  margin-top: 0;
  margin-bottom: .8em;
}

.early-access p {
  max-width: 90%;
  margin: 1em auto;
}

.form-container {
  display: flex;
  justify-content: center;
  max-width: 40rem;
  margin: 0 auto;
}

.input-text {
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.25);
  padding: 0.6250rem 1.2500rem;
  font-size: 1rem;
  width: 60%;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  margin-right: .5em;
  color: #fff;
}

.input-text:hover {
  background: rgba(255, 255, 255, 0.55);
}

.input-text:focus {
  background: rgba(255, 255, 255, 0.55);
}

::-webkit-input-placeholder {
  color: #fff;
  font-style: italic;
  font-size: 1rem;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
  font-style: italic;
  font-size: 1rem;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
  font-style: italic;
  font-size: 1rem;
}

:-ms-input-placeholder {
  color: #fff;
  font-style: italic;
  font-size: 1rem;
}

.request-demo {
  padding: 0.3875rem 1.95rem;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  font-weight: bold;
  cursor: pointer;
  font-size: 35px;
  background: #fff;
  border: 2px solid #fff;
  color: #19428C;
  margin: 0 0.2em;
}

.request-demo:hover {
  background: #19428C;
  border-color: #fff;
  color: #fff;
}

.discount {
  font-size: .875rem;
  margin: .5em;
}

.social-btns {
  padding: 1em 0 1em 1em;
  display: flex;
}

.social-btns__dialog {
  padding: 0;
  margin-top: 4em;
  position: relative;
  font-size: 0.875rem;
}

.social-btns__dialog::before {
  content: '';
  position: absolute;
  width: 6em;
  height: 2px;
  background: #404455;
  top: -1.9em;
  left: 50%;
  margin-left: -3em;
  opacity: .2;
}

.social-btns__dialog .social-network {
  color: #404455;
  border-color: #404455;
}

.social-network {
  display: inline-block;
  width: 2em;
  height: 2em;
  fill: currentColor;
  border-radius: 50%;
  border: 1px solid #fff;
  padding: 5px;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  margin: 0 .2em;
  color: #fff;
}

.social-network:hover {
  opacity: .6;
  color: #fff;
}

.under-fold {
  text-align: justify;
  max-width: 53.75rem;
  margin: 0 auto;
  padding: 3em 0;
  color: #015dc4;
  font-size: 120%;
}
.under-fold ul {
    list-style: initial;
    padding-left: 1.2em;
}
.under-fold li {
    margin: 0 0 0.75em;
}

.extended-features {
  margin: 6em 0 0 0;
  counter-reset: feature-counter;
}

.extended-item {
  text-align: left;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1.125rem;
  line-height: 1.4;
  margin-bottom: 5em;
  position: relative;
  z-index: 1;
}

.extended-item::before {
  content: "0" counter(feature-counter);
  counter-increment: feature-counter;
  position: absolute;
  font-size: 6rem;
  z-index: -1;
  font-weight: 300;
  opacity: .1;
  color: #0057C3;
  left: -.4em;
  top: -.2em;
}

.extended-item:nth-child(2n) .feature-text {
  order: 2;
}

.extended-item:nth-child(2n)::before {
  left: auto;
  right: 0em;
}

.feature-icon {
  max-height: 12rem;
  fill: currentColor;
  position: relative;
}

.feature-icon::before {
  content: '';
  background: #0057C3;
  opacity: .1;
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  position: absolute;
}

#cookie-bar {
  position: fixed;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  z-index: 3;
  padding: 0 2em;
  text-align: center;
}

.cb-enable, .cb-disable {
  text-decoration: none;
  padding: .3em .8em;
  color: #2BD7DB;
  display: inline-block;
  border: 1px solid;
  margin: 0 0 0 1em;
  font-size: .875em;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

.cb-enable:hover, .cb-disable:hover {
  opacity: .7;
}

.cb-disable {
  color: #fff;
}

.footer {
  text-align: center;
  max-width: 40rem;
  padding: 2em 0 1.5em;
  margin: 0 auto;
  color: rgba(0, 0, 0, 0.7);
  font-size: .875em;
}

.video-wrapper, .video-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.video-wrapper {
  position: fixed;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9;
}

.video-overlay {
  position: absolute;
  z-index: 1;
  background: rgba(55, 58, 71, 0.9);
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-backface-visibility: hidden;
}

.visible .video-overlay {
  opacity: 1;
}

.video-content {
  position: relative;
  z-index: 5;
  opacity: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.visible .video-content {
  opacity: 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-name: anim-open;
  animation-name: anim-open;
  pointer-events: auto;
}

.hide .video-content {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-name: anim-close;
  animation-name: anim-close;
}

.video-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.visible .video-content,
.hide .video-content {
  opacity: 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.general-container {
  background: #fff;
}

.showing-video {
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: scale3d(0.95, 0.95, 1);
  transform: scale3d(0.95, 0.95, 1);
  overflow: hidden;
}

.ov-hidden {
  overflow: hidden;
}

.video-container {
  width: 90%;
  padding-bottom: 50.625%;
  height: 0;
  text-align: center;
  position: relative;
  margin: 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.video-close, .confirmation-close {
  position: fixed;
  right: 1em;
  top: 1em;
  background: none;
  border: none;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
  text-indent: 100%;
  width: 3em;
  height: 3em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.video-close::before, .video-close::after, .confirmation-close::before, .confirmation-close::after {
  content: '';
  position: absolute;
  height: 3px;
  width: 70%;
  background: #fff;
  text-indent: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.video-close::after, .confirmation-close::after {
  width: 3px;
  height: 70%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.confirmation-close {
  position: absolute;
}

.confirmation-close::before, .confirmation-close::after {
  background: #404455;
}

.confirmation-wrapper {
  position: fixed;
  top: 0;
  background: rgba(55, 58, 71, 0.9);
  width: 100%;
  height: 100%;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.confirmation-wrapper.visible {
  opacity: 1;
  pointer-events: auto;
}

.confirmation-message {
  background: #fff;
  padding: 3em;
  text-align: center;
  position: relative;
  max-width: 30rem;
}

@-webkit-keyframes anim-open {
  0% {
    -webkit-transform: translate3d(0, calc(50vh + 50%), 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-open {
  0% {
    -webkit-transform: translate3d(0, calc(50vh + 50%), 0);
    transform: translate3d(0, calc(50vh + 50%), 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes anim-close {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, calc(50vh + 50%), 0);
  }
}

@keyframes anim-close {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, calc(50vh + 50%), 0);
    transform: translate3d(0, calc(50vh + 50%), 0);
  }
}

.bg-wrapper {
  overflow: hidden;
  position: relative;
}

#clouds, #cloud-kde, #cloud-lo, #cloud-thunderbird, #cloud-1, #cloud-2, #cloud-3, #cloud-4 {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 20%;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

#clouds {
  background: url(../img/clouds.svg) no-repeat center 103%;
  width: 105%;
  left: -5%;
}

#cloud-kde {
  background: url(../img/cloud-kde.svg) no-repeat 86% 52%;
  background-size: auto 25%;
}

#cloud-lo {
  background: url(../img/cloud-lo.svg) no-repeat 13% 68%;
}

#cloud-thunderbird {
  background: url(../img/cloud-thunderbird.svg) no-repeat 12% 25%;
  background-size: auto 20%;
}

#cloud-1 {
  background: url(../img/cloud1.svg) no-repeat 89% 6%;
}

#cloud-2 {
  background: url(../img/cloud2.svg) no-repeat 7% 75%;
}

#cloud-3 {
  background: url(../img/cloud3.svg) no-repeat 37% 87%;
}

#cloud-4 {
  background: url(../img/cloud4.svg) no-repeat 74% 85%;
}

.inner-page {
  padding-top: 6em;
  width: 90%;
  max-width: 80rem;
}

.inner-page + .early-access {
  text-align: center;
  color: #fff;
}

.inner-page .feature-icon {
  width: 30%;
  margin-bottom: 1.5em;
}

.inner-title {
  color: #1953C5;
  text-align: center;
  max-width: 60rem;
  margin-top: 0;
}

.inner-subtitle {
  color: #858FA9;
  font-size: 1.125rem;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  margin-bottom: 3em;
}

.inner-subtitle::before, .inner-subtitle::after {
  content: ' ';
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #C8CDD8;
  margin-right: 1em;
}

.inner-subtitle::after {
  margin-left: 1em;
  margin-right: 0;
}

.clients {
  display: flex;
  margin-bottom: 4em;
  flex-wrap: wrap;
}

.client-item {
  text-align: center;
  padding-bottom: 2em;
}

.client-title {
  color: #1953C5;
  font-size: 1.3125rem;
  display: block;
  margin-bottom: .3em;
}

.client-feature {
  font-size: 0.8750rem;
  color: #666C81;
  display: block;
  margin-bottom: 1em;
}

.client-link {
  background: #2BD7DB;
  color: #fff;
  display: inline-block;
  padding: .4em 1.5em;
  margin-bottom: 1em;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.client-title + .client-link {
  margin-top: 0.875rem;
}

.client-link:hover {
  color: #fff;
  background: #1953C5;
}

.client-link.disabled {
  opacity: .5;
  pointer-events: none;
}

.nav-item {
  color: #fff;
  padding: .3em 1em;
  display: block;
  margin: 1em .2em .7em;
  white-space: nowrap;
}

.login-box::before {
  content: '';
  width: 100%;
}

.btn-login {
  white-space: nowrap;
  border: 1px solid #fff;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  text-decoration: none;
}

.btn-login:hover {
  background: #fff;
  color: #0057C3;
}

/*! $MQ */
@media (max-width: 37.5rem) {
  .logo {text-align:center !important;}
  .login-box {}
  .btn-login {
    margin: 0;
    font-size: 80%;
}
.launch-video{
    font-size: 100%;
}
  .logo img {
    max-width: 110px;
  }
  .clients {
    justify-content: center;
  }
  .nav-wrapper {
    padding-right: 1em;
    text-align: right;
    width: 100%;
  }
  .nav-wrapper ul {
    margin: 0;
  }
  .above-fold {
    padding-top: 4em;
  }
  h1 {
    font-size: 1.875rem;
    padding: 0 1em;
    margin-top: 1.3em;
  }
  .apps-list {
    font-size: 1.825rem;
  }
  #clouds {
    background-size: 250% auto;
    background-position: center 100%;
  }
  #cloud-thunderbird {
    background-size: auto 15%;
    background-position: 89% 40%;
  }
  #cloud-kde {
    background-size: auto 9%;
    background-position: 18% 1%;
  }
  #cloud-lo {
    background-size: auto 12%;
    background-position: 89% 78%;
  }
  #cloud-1 {
    background-position: 59% 45%;
    background-size: auto 3%;
  }
  #cloud-2 {
    background-position: 74% 33%;
    background-size: auto 4%;
  }
  #cloud-3 {
    background-position: 20% 65%;
    background-size: 13%;
  }
  #cloud-4 {
    background-position: 76% 2%;
  }
  .apps-list {
    text-align: left;
    padding-left: 1em;
    margin-bottom: .6em;
  }
  .app-name {
    margin-bottom: .5em;
    display: block;
  }
  .plus {
    display: none;
  }
  .features {
    margin-bottom: 5em;
  }
  h2 {
    font-size: 1.2rem;
  }
  .early-access {
    padding: 1.2em 1em 1.4em;
  }
  .form-container {
    flex-wrap: wrap;
  }
  .input-text {
    margin: 0 1em .7em;
    width: 100%;
  }
  .request-demo {
    padding: 0.3875rem 1.25rem;
  }
  .extended-features {
    margin: 3em 10%;
  }
  .extended-item {
    margin-bottom: 2em;
  }
  .extended-item::before {
    right: auto !important;
    top: 1.5em;
    left: -.25em !important;
  }
  .extended-item:nth-child(2n)::before {
    top: 1.8em;
  }
  .extended-item:nth-child(2n) .feature-icon {
    margin-bottom: 1.5em;
  }
  .extended-item:nth-child(3n)::before {
    top: 1.6em;
  }
  .extended-item:nth-child(3n) .feature-icon {
    margin-bottom: .5em;
  }
  .extended-item:nth-child(4n)::before {
    top: 1.4em;
  }
  .extended-item:nth-child(4n) .feature-icon {
    margin-bottom: -.5em;
  }
  .feature-text {
    order: 2;
  }
  .feature-icon {
    width: 100%;
    order: 1;
  }
}

@media (min-width: 58.75rem) {
  .hide-elements {
    padding-right: 3.125rem;
  }
  .lang-item {
    position: absolute;
    background: #fff;
    display: block;
    min-width: 100%;
    top: 100%;
    padding: .5em 1.5em;
    right: -.8em;
    margin-top: .8em;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    z-index: -1;
    opacity: 0;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  .lang-item::before {
    content: '';
    position: absolute;
    border: 7px solid transparent;
    border-bottom-color: #fff;
    top: -14px;
    right: .5em;
  }
  .language-selector:hover .lang-item {
    opacity: 1;
    z-index: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .lang-selected {
    width: 100%;
    display: block;
    cursor: pointer;
    position: relative;
    padding-right: 1em;
  }
  .lang-selected::after {
    content: ' ';
    border: 2px solid #fff;
    border-width: 0 2px 2px 0;
    width: .5em;
    height: .5em;
    display: inline-block;
    -webkit-transform: rotate(45deg) translateY(-50%);
    -moz-transform: rotate(45deg) translateY(-50%);
    -ms-transform: rotate(45deg) translateY(-50%);
    -o-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    margin-left: .2em;
    margin-top: -0.1em;
    position: absolute;
    top: 50%;
    right: 0;
  }
}

@media (max-width: 58.75rem) {
  .menu-launcher {
    color: #fff;
    cursor: pointer;
    display: block;
    padding-right: 2em;
    margin-right: 1em;
    position: relative;
  }
  .menu-launcher::before, .menu-launcher::after {
    content: '';
    background: #fff;
    box-shadow: 0 0.37rem 0 #fff;
    height: 2px;
    width: 1.3em;
    position: absolute;
    right: .2em;
    top: 0;
    margin-top: 5px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  .menu-launcher::after {
    top: .8em;
    box-shadow: none;
  }
  .hide-elements {
    max-height: 0;
    overflow: hidden;
    width: 100%;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
    flex-wrap: wrap;
  }
  .language-selector {
    margin: 0 !important;
    padding: .8em 0 1em 1em;
    text-align: right;
    width: 100%;
  }
  .lang-selected, .lang-item {
    padding: 0 .3em;
  }
  .lang-selected {
    text-decoration: line-through;
    opacity: .7;
  }
  .lang-item {
    color: #fff;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
  }
  .menu-checker:checked + label::before {
    -webkit-transform: rotate(-45deg) translate(-6px, 3px);
    -moz-transform: rotate(-45deg) translate(-6px, 3px);
    -ms-transform: rotate(-45deg) translate(-6px, 3px);
    -o-transform: rotate(-45deg) translate(-6px, 3px);
    transform: rotate(-45deg) translate(-6px, 3px);
    box-shadow: none;
  }
  .menu-checker:checked + label::after {
    -webkit-transform: rotate(45deg) translate(-6px, -3px);
    -moz-transform: rotate(45deg) translate(-6px, -3px);
    -ms-transform: rotate(45deg) translate(-6px, -3px);
    -o-transform: rotate(45deg) translate(-6px, -3px);
    transform: rotate(45deg) translate(-6px, -3px);
  }
  .menu-checker:checked ~ .hide-elements {
    max-height: 20rem;
  }
  .language-selector {
    width: auto;
    display: flex;
    position: relative;
  }
}

@media (min-width: 37.5rem) {
  .inner-title {
    font-size: 3rem;
    margin: .6em auto 1em;
  }
  .client-item {
    width: 50%;
    padding: 0 3% 2em;
  }
  .feature-icon, .feature-text {
    width: 50%;
  }
}

@media (min-width: 28.125rem) and (max-width: 37.5rem) {
  .nav-wrapper {
    width: auto;
  }
  #clouds {
    background-size: 150% auto;
  }
  #cloud-1 {
    background-position: 9% 15%;
    background-size: auto 4%;
  }
  #cloud-2 {
    background-position: 94% 33%;
  }
  #cloud-3 {
    background-position: 10% 73%;
    background-size: 9%;
  }
  #cloud-4 {
    background-position: 90% 9%;
  }
  #cloud-thunderbird {
    background-size: auto 20%;
    background-position: 12% 39.5%;
  }
  #cloud-kde {
    background-size: auto 16%;
    background-position: 95% 58%;
  }
  #cloud-lo {
    background-position: 94% 86%;
  }
  .input-text {
    width: 60%;
    margin: 0;
  }
  .apps-list {
    text-align: center;
    font-size: 2.025rem;
    margin-bottom: .6em;
  }
  .app-name::before {
    left: auto;
    margin-left: -.3em;
  }
  .features {
    margin-bottom: 5em;
    font-size: 1rem;
  }
}

.apps {
  margin-top: 5em;
}

.app-icon {
  max-width: 50%;
  display: block;
  margin: 3em auto 0.1em;
  max-height: 9em;
}

.app-item:first-child .app-icon {
  max-width: 35%;
  margin-bottom: 1em;
}

.text {
  font-weight: bold;
  color: #404455;
}

@media (min-width: 28.125rem) {
  .apps {
    display: flex;
    flex-wrap: wrap;
  }
  .apps {
    margin-top: 4em;
  }
  .app-item {
    width: 50%;
    vertical-align: top;
    margin-bottom: 3em;
  }
  .app-item:first-child {
    padding-top: 1.2em;
  }
  .app-icon {
    margin-top: 0;
  }
}

@media (min-width: 34.375rem) {
  .app-item:first-child {
    padding-top: 1.4em;
  }
}

@media (min-width: 40.625rem) {
  .app-item {
    width: 33.3%;
  }
  .app-item:first-child {
    padding-top: .9em;
  }
}

@media (min-width: 46.875rem) {
  .app-item:first-child {
    padding-top: 1.2em;
  }
}

@media (min-width: 37.5rem) and (max-width: 55rem) {
  #cloud-lo {
    background-position: 17% 92%;
  }
  #cloud-kde {
    background-position: 92% 52%;
    background-size: auto 18%;
  }
  #cloud-thunderbird {
    background-position: 8% 14%;
    background-size: auto 11%;
  }
  #cloud-1 {
    background-position: 95% 2%;
  }
  #cloud-2 {
    background-position: 7% 60%;
  }
  #cloud-3 {
    background-position: 47% 87%;
  }
  #cloud-4 {
    background-position: 84% 89%;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.5rem) {
  #cloud-thunderbird {
    background: url(../img/cloud-thunderbird.svg) no-repeat 8% 23%;
    background-size: auto 16%;
  }
  #cloud-1 {
    background: url(../img/cloud1.svg) no-repeat 95% 6%;
  }
  #cloud-lo {
    background: url(../img/cloud-lo.svg) no-repeat 17% 56%;
  }
}

@media (max-width: 62.5rem) {
  .under-fold {
    margin: 0 8% 0 10%;
  }
}

@media (min-width: 55rem) {
  .client-item {
    width: 33.3%;
    padding: 0 3% 2em;
  }
}

@media (min-width: 62.5rem) {
  #cloud-thunderbird {
    background-position: 7% 19%;
  }
  #cloud-2 {
    background-position: 37% 88%;
  }
  #cloud-3 {
    background-position: 21% 2%;
  }
  .app-item {
    width: 20%;
  }
  .app-item:first-child {
    padding-top: .7em;
  }
}

@media (max-width: 43.75rem) {
  .menu-wrapper {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .menu-wrapper a {
    margin-left: .4em;
    margin-right: 0;
    padding-left: 2em;
    padding-right: 0;
  }
  .cb-enable, .cb-disable {
    display: block;
    margin-top: 10px;
  }
}

.community-container {
  background: rgba(27, 38, 85, 0.58);
  padding: 2em 2em 0em 2em;
}

.community-container .last {
  padding-bottom: 2em;
}