html,body{
    height:100%;
}
body{
    overflow:hidden;    
    background-image:url(/Sylvee-bg.jpg);
    background-size: cover;
    background-position: center center;
}
#gradient{
    position: fixed;
    height:145px;
    width:100%;
    bottom:0;
    background-image:url(/gradient_bg_small.png);
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #ebebea;
    text-align: center;
    overflow:hidden;
    font-family: "futura-pt",sans-serif;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}
#content .top, #content .bottom{    
    position: absolute;
    width: 100%;
}
#mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
.top{    
    top: 20%;
}
.bottom{
    bottom:10%;
}
.title {
    font-size: 90px;
    letter-spacing: 4px;
}

.subtitle {
    font-size: 60px;
    letter-spacing: 4px;
    line-height: 0.8em;
}
.tracks {
    margin-top: 20px;
    font-size: 13px;
}
.links{
    font-size:0;
    margin-top: 30px;
}
.link {
    width: 39px;
    height: 39px;
    display: inline-block;
    margin: 0 8px;
    background-position: center top;
    cursor: pointer;
}
.subscribe {
    width: 250px;
    height: 39px;
    display: inline-block;
    margin: 0 8px;
    background-position: center top;
    cursor: pointer;
    border-style: 10px solid #fff !important; 
}

.link:hover{
    background-position: center bottom;
}
.link.subscribe{background-image:url(/subscribe-sprite-light.png);}
.link.itunes{
    background-image:url(/icon_apple.png);
}

.link.mail{
    background-image:url(/icon_mail.png);
}
.link.facebook{
    background-image:url(/icon_facebook.png);
}
.link.instagram{
    background-image:url(/icon_instagram.png);
}
.link.twitter{
    background-image:url(/icon_twitter.png);
}
.link.spotify{
    background-image:url(/icon_spotify.png);
}
.link.soundcloud{
    background-image:url(/icon_soundcloud.png);
}
.link.youtube{
    background-image:url(/icon_youtube.png);
}
/*

   Styles for animated modal
   =========================

*/

/* Start state */
.animated-modal {
  max-width: 550px;
  border-radius: 4px;
  overflow: hidden;
  
  transform: translateY(-50px);
  transition: all .7s;
}

.animated-modal h2,
.animated-modal p {
  transform: translateY(-50px);
  opacity: 0;
  
  transition-property: transform, opacity;
  transition-duration: .4s;
}

/* Final state */
.fancybox-slide--current .animated-modal,
.fancybox-slide--current .animated-modal h2,
.fancybox-slide--current .animated-modal p {
  transform: translateY(0);
  opacity: 1;
}

/* Reveal content with different delays */
.fancybox-slide--current .animated-modal h2 {
  transition-delay: .1s;
}

.fancybox-slide--current .animated-modal p {
  transition-delay: .3s;
}


