/* Copyright ® 2015 Candylabs GmbH */
/* @ Rafael Mäuer */

/* ==========================================================================
   LaunchKit
   ========================================================================== */

#public-landing-page .container {
  font-family: 'Raleway', sans-serif !important;
}
#public-landing-page.template-1 .hero,
#public-landing-page.template-2 .hero,
#public-landing-page.template-3 .hero,
#public-landing-page.template-4 .hero,
#public-landing-page.template-7 .hero,
#public-landing-page .store-badge-white-text,
#public-landing-page.template-1color .hero,
#public-landing-page.template-2color .hero {
  background: #000000;
}
#public-landing-page.template-5 .hero h2,
#public-landing-page.template-6 .hero h1,
#public-landing-page .navbar .btn,
#public-landing-page .navbar.invert-navbar a,
#public-landing-page footer a,
#public-landing-page .benefit-header {
  color: #000000;
}
#public-landing-page .navbar.invert-navbar .btn.btn-primary,
#public-landing-page .navbar .navbar-collapse.in .btn.btn-primary,
#public-landing-page .navbar .navbar-toggle .icon-bar,
#public-landing-page .download-text {
  color: white;
  background-color: #000000;
}

#public-landing-page.template-1 .hero,
#public-landing-page.template-2 .hero,
#public-landing-page.template-4 .hero {
  overflow: hidden;
}
#public-landing-page .hero .blurred-cover {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1px;
  /*background-image: url('https://lh3.googleusercontent.com/A60rz3HCRIobyvv4DIWs0ANaZ02LptSL2pZ8rK2lCV9MBwQ0VW2AHIGFAbQkNGxYY1ZK5Ox0gniMDg-a7xnJkUkZrn2Cvw');*/
  background-image: url('screen1.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-filter: blur(50px);
  -moz-filter: blur(50px);
  -o-filter: blur(50px);
  -ms-filter: blur(50px);
  filter: blur(50px);
  margin: -60% -40% -40%;
}
#public-landing-page .hero .blurred-cover .darken {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2px;
  background: rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
     Basics
   ========================================================================== */

.link {
  text-decoration: underline;
}
.nolink {
  text-decoration: none;
  cursor: default;
}
.logo {
  width: 35%;
  margin-top: 25%;
  margin-left: -3%;
  margin-bottom: 0;
}
.text {
  margin-top: 15%;
}
.buttons {
  margin-top: 5%;
}
#video {
  width: 300px;
  height: 609.6px;
  margin-top: -484px;
  margin-bottom: -100px;
}
#video-background {
  width: 150%;
  margin-top: -800px;
  margin-bottom: -1200px;
  margin-left: 200px;
  margin-right: -200px;
  -webkit-filter: blur(50px);
  -moz-filter: blur(50px);
  -o-filter: blur(50px);
  -ms-filter: blur(50px);
  filter: blur(50px);
}

/* ==========================================================================
   App-Store Button
   ========================================================================== */

.appstore-top {
  position: relative;
  float: left;
}

.appstore {
  margin-left: 20%;
  position: relative;
  float: left;
}

.badge {
  width: 100%;
}

#public-landing-page.template-3 .hero .app-store-badge img,
#public-landing-page.template-3 .hero .google-play-badge img {
  max-width: 220px;
}

/* ==========================================================================
   uiFaces
   ========================================================================== */

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.left {
  position: relative;
  float: left;
}

.right {
  position: relative;
  float: right;
}
.middle {
  position: relative;
  float: inherit;
  margin-left: 35%;
}

.profile {
  margin: 66px 0;
  width: 33%;
  display: inline-block;
  text-align: center;
  font-style: italic;
}

.profile img {
  width: 33%;
  margin-bottom: 8px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  /*border:solid 3px #FFF;*/
  display: inline-block;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
}

.profile-text {
  margin: auto;
  max-width: 250px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: #e0e0e0;
  }

  .description {
    background-color: #151515;
  }

  #public-landing-page section {
    border-bottom: 1px solid #212121;
  }

  footer {
    background-color: #151515 !important;
  }

  a {
    color: #e0e0e0 !important;
  }
}

/* ===== SMALLEST ===== */
@media (max-width: 499px) {
  #video {
    display: none;
  }

  .appstore {
    width: 80%;
    display: block;
    margin-left: 10%;
    text-align: center;
    float: none;
  }
}

.appstore-top {
  position: relative;
  float: none;
  margin-top: 20px;
}

/* ===== SMALL ===== */
@media (max-width: 767px && min-width: 500px) {
  #video {
    display: none;
  }

  .appstore {
    margin-left: 12.5%;
  }
}

/* ===== MEDIUM ===== */
@media (max-width: 767px) {
  #video {
    display: none;
    /*
    position: relative;
    width: 56%;
    margin-top: -77%;
    margin-bottom: -58%;
    margin-bottom: 0;
    */
  }

  .left {
    width: 200%;
    margin-left: 70%;
    float: left;
    text-align: center;
  }

  .right {
    width: 200%;
    margin-left: 65%;
    float: left;
    text-align: center;
  }
  .middle {
    width: 200%;
    margin-left: 65%;
    float: left;
    text-align: center;
  }

  .profile {
    width: 80%;
    display: block;
    margin-left: 10%;
    margin-top: 25px;
  }

  .profile img {
    width: 25%;
  }

  .text {
    width: 90%;
    margin-left: 5%;
    margin-top: 10px;
    float: left;
  }

  .logo {
    width: 35%;
    min-width: 150px;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
  }

  #public-landing-page.template-3 .hero h2 {
    font-size: 30px !important;
  }

  #public-landing-page .hero {
    padding-top: 0 !important;
  }

  #public-landing-page {
    padding: 0 0 0 0;
  }
}

/* ===== NORMAL ===== */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  .middle {
    margin-left: 22%;
  }
}

/* ===== LARGE ===== */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
  .middle {
    margin-left: 28%;
  }
}

/* ===== WIDE ===== */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
  .middle {
    margin-left: 32%;
  }
}