@font-face {
  font-family:SF Compact Bold;
  font-weight: bold;
  src: local("SF Compact Rounded Bold"),
       local("SFCompactRounded-Bold"),
       url('fonts/SF-Compact-Rounded-Bold.woff');
}

@font-face {
  font-family:SF Compact Light;
  src: local("SF Compact Rounded Light"),
       local("SFCompactRounded-Light"),
       url('fonts/SF-Compact-Rounded-Light.woff');
}

@font-face {
  font-family:SF Compact Regular;
  src: local("SF Compact Rounded Regular"),
       local("SFCompactRounded-Regular"),
       url('fonts/SF-Compact-Rounded-Regular.woff');
}

body {
    background: linear-gradient(180deg, rgba(8,7,27,1) 0%, rgba(13,24,38,1) 100%);
    color: white;
}

#apps-wall {
   left: 0;
   margin: 0;
   min-width:100%;
   height: 533px;
   padding: 0;
   position: absolute;
   top: 0;
   z-index: -1;
   background-repeat: repeat-x;
   background-image: url("images/apps_wall.png");
   background-size: 1220px 500px;
   -webkit-filter: blur(20px);
   -moz-filter: blur(20px);
   -o-filter: blur(20px);
   -ms-filter: blur(20px);
   filter: blur(20px);
   opacity: 80%;
}

#big-text {
    height:100em;
    display:block;
}

.header {
    height:380px;
    width:100%;
    -webkit-filter: drop-shadow(0px 0px 30px rgba(0,0,0,0.8));
    filter: drop-shadow(0px 0px 30px rgba(0,0,0,0.8));
}

#logo {
    width:89px;
    height:auto;
    margin-top:130px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    width:100%;
    text-align:center;
    font-size:30px;
    font-family:"SF Compact Light";
    color: white;
    font-weight:normal;
    -webkit-font-smoothing:antialiased;
}

h3 {
  font-size:28px;
  font-family:"SF Compact Bold";
  -webkit-font-smoothing:antialiased;
  margin-top:16px;
  margin-bottom:16px;
}

p {
  font-size:19px;
  font-family:"SF Compact Regular";
  -webkit-font-smoothing:antialiased;
  margin-top:16px;
  margin-bottom:28px;
}

b {
    font-family:"SF Compact Bold";
}

a {
    color: white;
    font-family:"SF Compact Regular";
    font-size: 19px;
    -webkit-font-smoothing:antialiased;
}

a:hover {
    color: rgba(255,255,255,0.7);
}

#header-text {
    margin-top:40px;
}

#section-header-text {
    margin-top:150px;
    margin-bottom:120px;
}

.section {
    height:700px;
    display:block;
}

.audiotune-centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:1033px;
    height:321px;
}

.audiotune-info {
    width:315px;
    float:right;
    position: relative;
    top: 0%;
}

.audiotune-hero {
    width:640px;
    float:left;
    position: relative;
    top: 0%;
}

.app-icon {
    width:80px;
    height:80px;
    -webkit-filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.5));
    filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.5));
}

.audiotune-info .app-icon {
    margin-top:20px;
}

.white-button {
    background-color: rgba(255,255,255,0.3);
    border-radius: 10px;
    text-align: center;
    color: white;
    font-size: 19px;
    font-family: "SF Compact Bold";
    -webkit-font-smoothing:antialiased;
    text-decoration: none;
    padding: 8px 20px;
}

.white-button:hover {
    background-color: rgba(255,255,255,0.4);
}

.carousel {
    height: 402px;
    width: 100%;
}

.carousel-item {
    width:500px;
    height:401px;
    margin: 0 20px;
}

.slick-slide {
  opacity: 0.2;
  transition: opacity .9s cubic-bezier(.4,0,.2,1);
}

.slick-center {
  opacity: 1.0;
}

.slick-prev {
    left: 100px !important;;
    z-index: 1;
}

.slick-next {
    right: 100px !important;;
    z-index: 1;
}

.left-image {
    display:block;
    height:400px;
    width:200px;
    float:left;
}

.right-info {
    width:260px;
    float:right;
    position: relative;
    margin-top: 40px;
}

.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:655px;
    height:312px;
}

.left-avatar {
    display:block;
    height:180px;
    width:auto;
    float:left;
    margin-top: 40px;
}

.right-bio {
    display:block;
    height:312px;
    width:400px;
    float:right;
}

.right-bio p {
    margin-top: 0px;
}

#support-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 130px;
}

#copyright {
    width:100%;
    text-align: center;
}

/* ---------------------- MOBILE ---------------------- */

@media only screen and (max-width: 1080px) {
  /* For mobile phones: */

  #apps-wall {
      height:357px;
      background-size: 976px 400px;
  }

  .header {
      height:270px;
  }

  #logo {
      width:60px;
      height:auto;
      margin-top:104px;
  }

  h1 {
      font-size:23px;
      text-align: center;
  }

  h3 {
      font-size:18px;
      text-align: center;
  }

  p {
      font-size:15px;
  }

  a {
      font-size: 15px;
      width: 80px;
      display:block;
      margin-left: auto;
      margin-right: auto;
  }

  #header-text {
      margin-top:37px;
  }

  #section-header-text {
      margin-top:80px;
      margin-bottom:50px;
      width:90%;
      display:block;
      margin-left: auto;
      margin-right: auto;
  }

  .audiotune-centered {
      width:100%;
      height:auto;
  }

  .audiotune-hero {
      width:80%;
      max-width:400px;
      display:block;
      margin-left: auto;
      margin-right: auto;
      float:none;
  }

  .audiotune-info {
      width:90%;
      display:block;
      margin-left: auto;
      margin-right: auto;
      float:none;
  }

  .audiotune-info p {
      text-align:center;
  }

  .app-icon {
      width:50px;
      height:50px;
      display:block;
      margin-left: auto;
      margin-right: auto;
  }

  .white-button {
      font-size: 14px;
      padding: 6px 16px;
      border-radius: 7px;
  }

  .carousel {
      height: 580px;
  }

  .carousel-item {
      width:200px;
      height:700px;
      margin: 0 20px;
  }

  .slick-prev {
      left: 10px !important;
      top: 140px !important;
  }

  .slick-next {
      right: 10px !important;
      top: 140px !important;
  }

  .left-image {
      display:block;
      margin-left: auto;
      margin-right: auto;
      height:300px;
      width:150px;
      float:none;
  }

  .right-info {
      width:100%;
      float:none;
      margin-top: 40px;
  }

  .right-info p {
      text-align: center;
  }

  .centered {
      width:100%;
      height:auto;
  }

  .left-avatar {
      height:100px;
      width:auto;
      display:block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom:30px;
      float:none;
  }

  .right-bio {
      height:auto;
      width:90%;
      display:block;
      margin-left: auto;
      margin-right: auto;
      float:none;
  }

  .right-bio a {
      margin:none;
      width:auto;
  }

  #support-button {
      width: 100px;
  }
}