@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,700');

form .website {
	display:none;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

html,body {
  background:#16111C;
  font-family: 'Rubik', sans-serif;
  color:white;
  margin:0px;
  padding-bottom: 64px;
}

::selection {
  background:#8315F8;
  color: white; /* WebKit/Blink Browsers */
}

#wrapper {
  width:700px;
  margin-left:auto;
  margin-right:auto;
  overflow: visible;
}

#header {
  margin-top:60px;
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
}

#header a {
  display:block;
  margin-left:10%;
  margin-right:10%;
}

a {
  transition: 0.15s ease-out;
  color: #FFF;
  text-decoration: none;
  font-weight:500;
}

.prominent {
  transition: 0.15s ease-out;
  color: #8d8df3;
  text-decoration: none;
  font-weight:500;
}

a:hover {
    transform: scale(1.15,1.15);
    color:#FF03DA;
}

#logo {
  width:50px;
}

.bar {
  width:10%;
  height:8px;
  border-radius:20px;
  background:white;
}

#bar-left {
  background: linear-gradient(to left, #CE00FF, #3E2AFF);
}

#bar-right {
  background: linear-gradient(to right, #30D4FF, #00FF72);
}


#footer {
  margin-top:100px;
}

#copyright {
  margin-top:30px;
  text-align:center;
  font-size:14px;
  letter-spacing: 0.1em;
  color:#bbb;
}

#links {
  display:flex;
  justify-content: center;
}

#links a {
  margin-left: 16px;
  margin-right: 16px;
  font-size:14px;
}

h1 {
  font-size:45px;
  margin-bottom: 0px;
}

h2 {
  font-size:35px;
  margin-bottom: 0px;
}

h3 {
  font-weight:500;
  margin-top:10px;
  font-size:16px;
  letter-spacing: 0.02em;
}

#content {
  margin-top:40px;
  overflow:visible;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}

#phone {
  width:40%;
  overflow:visible;
}

#text {
  width:50%;
}

#text2 {
  width:100%;
}

#text p {
  margin-top: 30px;
  line-height:1.8em;
  font-size:14px;
  color:#bbb;
}

#text ul {
  margin-top: 30px;
  line-height:1.8em;
  font-size:14px;
  color:#bbb;
  padding-left: 16px;
}

#iphone {
  background: linear-gradient(to bottom, #8315F8, #E806E0);
  background-image: url(images/wallpaper.jpg);
  background-size: 100%;
  height:606px;
  width:100%;
  overflow:hidden;
  border-radius:30px;
  position:relative;
  display:block;
}

#iphone img {
  transition: 0.5s;
  width:100%;
  border-radius:26px;
}

.iphone-old {
  border-radius:14px !important;
  height:495px !important;
}

.iphone-old img {
  border-radius:10px !important;
}

.sliding-shot > img {
  transform:scale(0.8,0.8);
  filter:blur(3px);
}

.dismiss-shot > img {
  transform:scale(0.65,0.65);
  filter:blur(15px);
}

.shot {
  transition: 0.4s;
  width:100%;
  position:absolute;
}

#chin {
  width:36%;
  margin-left:-18%;
  height:6px;
  background-color:white;
  border-radius:50px;
  left:50%;
  position: absolute;
  bottom:15px;
}

#apps {
  display:grid;
  grid-template-columns: auto auto;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  margin-top: 70px;
}

.app {
  transform: none;
  outline: none;
  border-radius:20px;
  cursor:pointer;
  overflow: hidden;
  padding:18px;
  width:calc(100% - 42px);
  background: rgba(255,255,255,0.06);
}

.app:hover,.app:focus {
  background-color:#FFF;
  color:#000;
  transform: scale(1.04,1.04);
}

.app-icon {
  float:left;
  width:23%;
  overflow: hidden;
}

.app-icon img {
  width:100%;
  display:block;
}

.app-text {
  float:left;
  margin-left:18px;
}

.app-title {
  margin-top:15px;
  font-size:17px;
  font-weight:500;
}

.app-description {
  font-size:14px;
  opacity: 0.6;
  margin-top:4px;
}

#buttons {
  margin-top: 10px;
  overflow: hidden;
}

#buttons a {
  display:inline-block;
  margin-top:20px;
  margin-right:12px;
}

#buttons a:hover {
  transform: none;
}

#buttons a img {
  width:160px;
}

#buttons a .play-button {
  width:156px;
}

#large-icon {
  width:100px;
}

#contact-form {
  width:400px;
  margin:auto;
}

input[type=text],input[type=email],textarea {
  width:calc(100% - 24px);
  border:0px;
  border-radius:4px;
  padding:12px;
  font-size:15px;
}

textarea {
  min-height:150px;
}

input[type=submit] {
  transition:0.2s;
  width:100%;
  border:0px;
  background: linear-gradient(to left, #8315F8, #E806E0);
  color:#FFF;
  border-radius:6px;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  margin-top: 20px;
  padding-top:16px;
  padding-bottom:16px;
}

input[type=submit]:hover {
  transform: scale(1.04,1.04);
}

.contact-title {
  font-weight:500;
}

.contact-input {
  margin-top: 12px;
}

.g-recaptcha,.contact-item {
  margin-top:20px;
}

.alert {
  width:100%;
  font-weight:500;
  font-size:15px;
  padding-top:18px;
  padding-bottom:18px;
  background: linear-gradient(to right, #5BD4FF, #00FFC6);
  color:black;
  text-align:center;
}

@media only all and (max-width: 700px) {
    #wrapper {
      width:100%;
    }
    #links {
      flex-direction: column;
    }

    #links a {
      width:100%;
      text-align: center;
      font-size:20px;
      margin-top:20px;
      margin-left:0px;
      margin-right:0px;
    }

    #apps {
      margin-left: 30px;
      margin-right:30px;
    }

    .app {
      display:flex;
      padding:24px;
      width:calc(100% - 48px);
      flex-direction: column;
    }

    .app-icon {
      float:none;
      width:50%;
    }

    #phone {
        display:none;
    }

    .app-text {
      margin-top:6px;
      float:none;
      margin-left:0px;
    }

    .app-title {
      font-size:14px;
    }

    .app-description {
      font-size:12px;
    }

    #footer {
      margin-top:20px;
    }

    #content {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
    }

    #text {
      margin-top: 40px;
      width:80vw;
      text-align: center;
    }
    
    #text2 {
      margin-top: 40px;
      width:80vw;
      text-align: center;
    }

    #buttons a {
      display:block;
    }

    #buttons a img,#buttons a .play-button {
      width:200px;
    }

    #text p {
      text-align:left;
      font-size:18px;
    }

    #text ul {
      text-align:left;
      margin-top: 0px;
      font-size:18px;
    }

    #apps {
      margin-top:30px;
    }
}