@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,400,700");
body {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(81, 192, 255, 0.15) 49%, rgba(255, 255, 255, 0.05));
  font-family: 'Open Sans', sans-serif;
  color: #333;
  overflow-x: hidden;
  margin: 0;
  padding: 0; }

#home {
  background-image: url("/assets-dk/img/hero-pattern.02f57cc92.svg");
  background-repeat: no-repeat;
  background-position: center top; }

.button-1 {
  display: inline-block;
  border: 2px solid #00A0FB;
  border-radius: 30px;
  background: transparent;
  padding: 15px 30px;
  color: #00A0FB;
  text-decoration: none;
  font-size: 1.2rem;
  transition: all 150ms ease-in-out; }
  .button-1:hover {
    background: #00A0FB;
    color: white; }

.button-2 {
  display: inline-block;
  border: 2px solid white;
  border-radius: 30px;
  background: transparent;
  padding: 15px 30px;
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  transition: all 150ms ease-in-out; }
  .button-2:hover {
    background: white;
    color: #00A0FB; }

.button-3 {
  margin-right: 0;
  background: #00A0FB;
  color: white !important;
  padding: 10px 15px;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  transform: translateY(0px);
  transition: all 250ms ease-in-out;
  position: relative; }
  .button-3:after {
    display: none; }
  .button-3:hover {
    background: #0090e2;
    transform: translateY(2px);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.1); }

#navigation {
  margin: 50px 0 150px 0; }
  #navigation a {
    font-weight: normal;
    margin-right: 25px;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 150ms ease-in-out;
    position: relative; }
    #navigation a:after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 0;
      height: 3px;
      background: #00A0FB;
      transition: all 150ms ease-in-out; }
    #navigation a:hover:after {
      width: 100%; }
    #navigation a.highlight:after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 100%;
      height: 3px;
      background: #00A0FB; }

#hero h2 {
  font-size: 3rem;
  font-weight: 700;
  display: block; }
  @media (max-width: 42rem) {
    #hero h2 {
      font-size: 1.7rem; } }
  #hero h2 span {
    display: inline;
    color: #00A0FB; }

#hero .description {
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 100;
  color: #807f7f; }

#hero #browser {
  border-radius: 4px;
  box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.1), 0 0 85px rgba(0, 0, 0, 0.12); }
  @media (max-width: 42rem) {
    #hero #browser {
      width: 100%;
      height: auto;
      margin-top: 30px; } }

.typed-cursor {
  -webkit-animation: blinker 1s linear infinite;
  animation: blinker 1s linear infinite; }

@-webkit-keyframes blinker {
  50% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }

@keyframes blinker {
  50% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }

#services {
  margin-top: 200px; }
  #services h3 {
    font-size: 2.5rem;
    line-height: 3.2rem;
    margin: 0; }
    @media (max-width: 42rem) {
      #services h3 {
        font-size: 1.7rem; } }
    #services h3 span {
      color: #00A0FB; }
  #services .description {
    font-size: 1.2rem;
    line-height: 2rem;
    color: #807f7f;
    margin-bottom: 100px; }
  #services .card {
    margin-bottom: 30px;
    padding: 50px 0;
    border-radius: 4px;
    border-bottom: 5px solid transparent;
    transition: all 150ms ease-in-out; }
    #services .card img {
      filter: grayscale(100%);
      transition: all 150ms ease-in-out;
      margin-bottom: 20px; }
    #services .card .title {
      margin: 0;
      font-size: 1.2rem; }
    #services .card .description {
      font-size: 0.8rem;
      margin: 0; }
    #services .card .button {
      margin-top: 1rem;
      border: 2px solid #00A0FB;
      color: #00A0FB;
      text-decoration: none;
      border-radius: 20px;
      padding: 10px 20px;
      display: inline-block;
      visibility: hidden;
      opacity: 0;
      transition: all 150ms ease-in-out; }
      #services .card .button:hover {
        background: #00A0FB;
        color: white; }
    #services .card:hover {
      background: white;
      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.1);
      border-bottom: 5px solid #00A0FB; }
      #services .card:hover img {
        filter: grayscale(0%); }
      #services .card:hover .button {
        visibility: visible;
        opacity: 1; }

#signup {
  margin-top: 70px;
  padding: 125px 0;
  background: linear-gradient(104deg, #00a0fb, #b7bdff);
  color: white;
  position: relative; }
  #signup h3 {
    font-weight: 400;
    margin: 0;
    font-size: 1.4rem;
    margin-bottom: 1rem; }
  #signup p {
    font-weight: 100;
    margin: 0;
    margin-bottom: 1rem; }
  #signup .cloud {
    position: absolute; }
    @media (max-width: 42rem) {
      #signup .cloud {
        display: none; } }
    #signup .cloud.cloud-1 {
      left: 15%;
      top: 15%; }
    #signup .cloud.cloud-2 {
      left: 5%;
      top: 60%; }
    #signup .cloud.cloud-3 {
      right: 5%;
      top: 15%; }
    #signup .cloud.cloud-4 {
      right: 15%;
      top: 60%; }

footer {
  padding: 50px 0; }
  footer img {
    margin-bottom: 0.5rem; }
  footer a {
    margin-bottom: 3rem;
    display: block;
    color: #00A0FB;
    text-decoration: none; }
    footer a:hover {
      text-decoration: underline; }
  footer p {
    color: #999999;
    margin: 0;
    font-size: 0.8rem; }