html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
::-webkit-scrollbar {
  /* Webkit */
  width: 0;
  height: 0;
}
body {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image {
  /* The image used */
  position: absolute;
  top: 0;
  left: 0;
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  /* Full height */
  height: 100%;
  width: 100%;
  /* Center and scale the image nicely */


}

.landing {
  padding: 0 1.5em;
}

.landingLogo{
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 80px;
  margin: 0 auto;

  z-index: 9;
}

.landing__content {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 8em auto;
  z-index: 20;
}

.landing__profilePhoto {
  position: relative;
  width: 200px;
  margin: 0 auto;
  height: 200px !important;
  border-radius: 50%;
}

.landing__profilePhoto .roller{
  top: -40px;
  left: -40px;
  width:280px;
  height:280px;
}

.landing__profilePhoto .over-roller{
  top: -40px;
  left: -40px;
  width:280px;
  height:280px;
}



h3 {
  font-weight: normal;
}

.landing__text {
  background: rgba(0, 0, 0, 0.2);
  margin: 0;
  margin-bottom: 25px;
  margin-top: 45px;
  padding: 1em;
  color: white;
  border-radius: 15px;
}

.landing__links {
  background: white;
  padding: 2em 0;
  border-radius: 15px;  
}

.landing__follow {
  margin-top: 2em;
}

.btn {
  display: block;
  padding: 1em;
  border-radius: 50px;
  max-width: 50%;
  margin: 1em auto;
  color: white;
  text-decoration: none;
}

.amazon {
  background: #f90;
}

.itunes {
  background: #dc2424;
  background: -moz-linear-gradient(left, #dc2424 0%, #4a569d 100%);
  background: -webkit-linear-gradient(left, #dc2424 0%, #4a569d 100%);
  background: linear-gradient(to right, #dc2424 0%, #4a569d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#DC2424", endColorstr="#4A569D", GradientType=1 );
}

.apple {
  background: #a34c91;
  background: -moz-linear-gradient(left, #a34c91 0%, #6abac3 100%);
  background: -webkit-linear-gradient(left, #a34c91 0%, #6abac3 100%);
  background: linear-gradient(to right, #a34c91 0%, #6abac3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a34c91', endColorstr='#6abac3',GradientType=1 );
}

.play {
  background: #2aa3b3;
  background: -moz-linear-gradient(45deg, #2aa3b3 0%, #8dd9aa 53%, #b0377c 53%, #fdcd79 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, #2aa3b3), color-stop(53%, #8dd9aa), color-stop(53%, #b0377c), color-stop(100%, #fdcd79));
  background: -webkit-linear-gradient(45deg, #2aa3b3 0%, #8dd9aa 53%, #b0377c 53%, #fdcd79 100%);
  background: -o-linear-gradient(45deg, #2aa3b3 0%, #8dd9aa 53%, #b0377c 53%, #fdcd79 100%);
  background: -ms-linear-gradient(45deg, #2aa3b3 0%, #8dd9aa 53%, #b0377c 53%, #fdcd79 100%);
  background: linear-gradient(45deg, #2aa3b3 0%, #8dd9aa 53%, #b0377c 53%, #fdcd79 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2aa3b3', endColorstr='#fdcd79', GradientType=1 );
}

.spotify {
  background: #24cf5f;
}

.facebook {
  background: #3b5998;
}

.swissbeatbox {
  background: black;
}

#preloader-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  /* change if the mask should have another color then white */
  z-index: 9999 !important;
  /* makes sure it stays on top */
}

#preloader {
  height: 80px;
  width: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
}

#preloader > .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 56px;
  width: 56px;
  margin-top: -28px;
  margin-left: -28px;
  -webkit-animation: wink 1s ease-in-out infinite alternate;
          animation: wink 1s ease-in-out infinite alternate;
}
@media only screen and (min-width: 768px) {
  #preloader {
    height: 120px;
    width: 120px;
    margin-top: -60px;
    margin-left: -60px;
  }
  #preloader:before {
    left: -2px;
    top: -2px;
    border-top-width: 2px;
    border-left-width: 2px;
    border-bottom-width: 2px;
    border-right-width: 2px;
  }
  #preloader > .icon {
    height: 54px;
    width: 54px;
    margin-top: -26.5px;
    margin-left: -26.5px;
  }
}
@media only screen and (min-width: 1200px) {
  #preloader {
    height: 160px;
    width: 160px;
    margin-top: -80px;
    margin-left: -80px;
  }
  #preloader > .icon {
    height: 72px;
    width: 72px;
    margin-top: -36px;
    margin-left: -36px;
  }
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@-webkit-keyframes wink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}