@font-face {
  font-family: 'ff-clan-web-pro';
  src: url('https://d1a3f4spazzrp4.cloudfront.net/uber-com/1.3.8/d1a3f4spazzrp4.cloudfront.net/fonts/ClanPro-Thin-03b64805a8.woff2') format('woff2'),
    url('https://d1a3f4spazzrp4.cloudfront.net/uber-com/1.3.8/d1a3f4spazzrp4.cloudfront.net/fonts/ClanPro-Thin-341462317d.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
font-family: 'ff-clan-web-pro';
  src: url('https://d1a3f4spazzrp4.cloudfront.net/uber-com/1.3.8/d1a3f4spazzrp4.cloudfront.net/fonts/ClanPro-Book-ca614426b5.woff2') format('woff2'),
    url('https://d1a3f4spazzrp4.cloudfront.net/uber-com/1.3.8/d1a3f4spazzrp4.cloudfront.net/fonts/ClanPro-Book-a9e3935663.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ff-clan-web-pro';
  src: url('https://d1a3f4spazzrp4.cloudfront.net/uber-com/1.3.8/d1a3f4spazzrp4.cloudfront.net/fonts/ClanPro-News-ca104da8af.woff2') format('woff2'),
    url('https://d1a3f4spazzrp4.cloudfront.net/uber-com/1.3.8/d1a3f4spazzrp4.cloudfront.net/fonts/ClanPro-News-f39b50d5fd.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ff-clan-web-pro';
  src: url('https://d1a3f4spazzrp4.cloudfront.net/uber-com/1.3.8/d1a3f4spazzrp4.cloudfront.net/fonts/ClanPro-Medium-ad875b9818.woff2') format('woff2'),
    url('https://d1a3f4spazzrp4.cloudfront.net/uber-com/1.3.8/d1a3f4spazzrp4.cloudfront.net/fonts/ClanPro-Medium-49e5932ee0.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


body {
  font-family: ff-clan-web-pro;
  font-weight: 200;
  color:white;
  margin:0px;
  /*background-color:#00faff;*/
  background-color: black;
  width:100%;
  margin:0 auto;
}
strong{
  font-weight: 500;
}

.container{
  width:768px;
  margin: 0 auto;
}

/**first Section*/

#home{
  
}
#home .header{
  height:65%;
  
  background-color: black;
  text-align: center;
  position:relative;
}

#home .header .changeLang{
  padding:14px;
}

#home .logo{
  margin-top:171px;
}

#home .logo img{
  width:303px;
}

#home .headline{
  font-size:48px;
  margin-top:60px;
  text-align: center;
}



#home .headline p{
  width:364px;
  text-align: center;
  margin: 0 auto;
}

#home .searchbox{
  position:absolute;
  bottom:42px;
  margin:0 auto;
  width:100%;
}

#home .searchbox input{
    background: black;
    border: none;
    color: #409198;
    font-size:35px;
    text-align: center;
}

#home .footer{
  color:black;
  width:100%;
  height:35%;
  background-color: white;
}

#home .footer .main{
  width:100%;
}


#home .footer .left{
    width: 45%;
    padding-left: 0px;
    padding-top: 42px;
    float: left;
    padding-right: 16px;
  
}

#home .footer .left .text{
  
  font-size:48px;
  font-weight: 500;
}
#home .footer .right{
  width:50%;
  padding-top:42px;
  float:left;
}

#home .footer .right .text{
  font-size: 22px;
  font-weight: 200;
  line-height: 36px;
}

.copywrite{
  width: 100%;
    position: absolute;
    bottom: 10px;
    margin: 0 auto;
    text-align: center;
}

.results_number{
  margin-left: 70px;
  padding-top:30px;
}

.results_container{
    padding-top: 30px;
    display: -webkit-inline-box;
    margin-left: 50px;
    
    width: 100%;
      /* Make this scrollable when needed */
  overflow-x: auto;
  /* We don't want vertical scrolling */
  overflow-y: hidden;
  /* Make an auto-hiding scroller for the 3 people using a IE */
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* For WebKit implementations, provide inertia scrolling */
  -webkit-overflow-scrolling: touch;
  /* We don't want internal inline elements to wrap */
  white-space: nowrap;
  /* Remove the default scrollbar for WebKit implementations */
}

.result_wrapper{
  margin:20px;
}
.result_wrapper img{
  width:159px;
}

.result_text{
    text-align: center;
    line-height: 6px;
    font-size: 16px;
    width: 159px;
    overflow: hidden;
    word-wrap: break-word;
}

.music_text
{
  font-size:12px;
}

/**Second Section*/

#message{
  
}
#message .header{
  height:40%;
  
  background-color: black;
  text-align: center;
  position:relative;
}

#message .header .changeLang{
  padding:14px;
}

#message .logo{
  margin-top:171px;
}

#message .logo img{
  width:303px;
}

#message .headline{
  font-size:48px;
  margin-top:60px;
  text-align: center;
}



#message .headline p{
  width:364px;
  text-align: center;
  margin: 0 auto;
}

#message .searchbox{
  position:absolute;
  bottom:42px;
  margin:0 auto;
  width:100%;
}

#message .searchbox input{
    background: black;
    border: none;
    color: #409198;
    font-size:35px;
    text-align: center;
}

#message .footer{
  color:black;
  width:100%;
  height:60%;
  background-color: white;
}

#message .footer .main{
  width:100%;
}


#message .footer .left{
    width: 45%;
    padding-left: 0px;
    padding-top: 42px;
    float: left;
    padding-right: 16px;
  
}

#message .footer .left .text{
  
  font-size:48px;
  font-weight: 500;
}
#message .footer .right{
  width:50%;
  padding-top:42px;
  float:left;
}

#message .footer .right .text{
  font-size: 22px;
  font-weight: 200;
  line-height: 36px;
}

#message #albumPhoto
{
  width:156px;
}

#message .album_photo
{
  margin-top:140px;
}

#message #header .songText{
  font-size: 24px;
  text-align: center;
}

#message .header .body .songText{
  font-size: 24px;
  text-align: center;
}

#message .header .body .songText .music_text{
  font-size: 14px;
  
}

#message textarea
{
  border: solid 1px #979797;
  width:100%;
  font-size:34px;
  margin-top:60px;
}

#message .footer{
  text-align: center;
}

#message .chars{
  font-size:12px;
}

#message .footer button{
  margin-top:37px;
  width: 188px;
  height:55px;
  background-color: #44b18d;
  color:white;
  font-size:18px;
  font-weight: 200;
  font-family: ff-clan-web-pro;
  letter-spacing: 4px;
}

#message .footer a{
  color: #44b18d;
  font-size:18px;
  font-weight: 200;
  font-family: ff-clan-web-pro;
  letter-spacing: 4px;
  text-decoration: underline;
}

/**Thirs Section*/

#success{
  
}
#success .header{
  height:100%;
  
  background-color: black;
  text-align: center;
  position:relative;
}

#success .header .changeLang{
  padding:14px;
}

#success .logo{
  margin-top:171px;
}

#success .logo img{
  width:303px;
}

#success .headline{
  font-size:48px;
  margin-top:60px;
  text-align: center;
}

#success .body{
    width: 415px;
    margin: 0 auto;
}

#success .headline p{
  width:364px;
  text-align: center;
  margin: 0 auto;
}
#success #successPhoto
{
  width:156px;
}

#success .album_photo
{
  margin-top:140px;
}

#success #header .successSongText{
  font-size: 24px;
  text-align: center;
}

#success .header .body .successSongText{
  font-size: 24px;
  text-align: center;
  line-height: 8px;
}

#success .header .body .successSongText .music_text{
  font-size: 14px;
  
}
#success .header .body .successHeadline{
  font-size: 48px;
  color: #44b18d;
  font-weight: 500;
  
}
#success .header .body .successBody{
      font-size: 22px;
    color: white;
    font-weight: 200;
  
}

#success .header .body .userMessage{
      font-size: 22px;
    color: white;
    font-weight: 200;
    margin-top:130px;
  
}

#success .header  button{
  margin-top:37px;
  width: 188px;
  height:55px;
  background-color: #44b18d;
  color:white;
  font-size:18px;
  font-weight: 200;
  font-family: ff-clan-web-pro;
  letter-spacing: 4px;
}

#success .copywrite{
    width: 100%;
    position: absolute;
    bottom: 10px;
    margin: 0 auto;
    text-align: center;
    color:white;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #409198;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #409198;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #409198;
}