/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *




 */


::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background-color: rgba(255, 255, 255,.3); }
::-webkit-scrollbar-thumb { background-color: rgba(43, 43, 43,.2); }


html, body {
  -moz-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  }
  
  a, p, span, li, input  {
    -webkit-font-feature-settings: "kern" 1;
    }

html {
  font-size: 14px;
  line-height: 24px;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background: #fff;
  color: rgba(43, 43, 43, .8);
  font-family: "hedley-new-web",sans-serif;
  font-weight:300;
  margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	line-height: 24px;
	font-size: 14px;
  overflow-x: hidden;
  }
  
  /* AVOID TYPEKIT FLOUT */
  .wf-loading body {
      visibility: hidden;
    }
  .wf-active body {
    visibility: visible;
  }

p {
  margin: 0;
  clear: both;
  color: #777;
  }
  p.info {
    line-height:48px;
    margin-bottom:24px;
    background:rgba(247, 247, 247, 1);
    padding:0 12px;
    box-shadow: 0px 1px 0 0 rgba(43, 43, 43, .1);
    }

a {
  color:rgba(43, 43, 43,.7);
  text-decoration: none;
  }
  a:hover { color: rgba(43, 43, 43,1);     
    -webkit-transition: all 0.15s linear;
       -moz-transition: all 0.15s linear;
         -o-transition: all 0.15s linear;
            transition: all 0.15s linear; 
          }
  a:active, a.active { color: rgba(43, 43, 43,1); }

  a.btn, button {
    padding:0 24px;
    background:rgba(43, 43, 43, 0.7);
    color: #fff;
    line-height:48px;
    text-transform: uppercase;
    font-weight:300;
    font-size:0.833em;
    height:48px;
    border:0;
    box-shadow: 0 0 0 0;
    -webkit-transition: all 0.15s linear;
       -moz-transition: all 0.15s linear;
         -o-transition: all 0.15s linear;
            transition: all 0.15s linear;
    }
    a.btn:hover, button.btn:hover {
      background:rgba(43, 43, 43, 1);

      -webkit-transition: all 0.35s linear;
         -moz-transition: all 0.35s linear;
           -o-transition: all 0.35s linear;
              transition: all 0.35s linear;
      }

h2 {
  margin:0 0 0; 
  float:none; 
  line-height: 72px; 
  font-size: 1.2em;
  text-transform: uppercase;
  display:inline-block;
  font-weight: 400;
}
h3 { font-weight: 400;}

h4 {
  text-transform: uppercase;
  font-size: 1em;
  margin: 0 0 0 12px;
  line-height: 48px;
  color: rgba(43, 43, 43,.7);
}

h5 {
  margin:0; 
  line-height:24px; 
  font-weight:300; 
  font-size:1em; 
  color:rgba(43, 43, 43,.3);
}

ul {
  list-style-type: none;
  margin:0;
  padding:0;
}

i.icon { font-style: normal; }

strong { font-weight: 400;}
.light { font-weight:300; }

.pull-left  { float:left; }
.pull-right { float:right; }

.rotated {
          transform: rotate(90deg);
      -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  }

.error { color:rgba(43, 43, 43,.7); }
  .error a { font-weight: 400; }
  .error .supported, .error .supported .icon{ color:rgba(43, 43, 43,.7); }
  .error ul { line-height:48px; }

.example {
  color:rgba(43, 43, 43,.5);
  position:absolute;
  left:138px;
  }

::-webkit-input-placeholder {
   color: rgba(43, 43, 43, 0.3);
}

:-moz-placeholder { /* Firefox 18- */
   color: rgba(43, 43, 43, 0.3);
}

::-moz-placeholder {  /* Firefox 19+ */
   color: rgba(43, 43, 43, 0.3);
}

:-ms-input-placeholder {
   color: rgba(43, 43, 43, 0.3);
}


input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #fff inset;
}

input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  box-shadow: 0 0 0px 1000px #fff inset;
}

/*########################################*/

form {
  overflow:hidden;
}

form label {
  display: block;
  font-size:1.2em;
  font-weight: 400;
  text-transform: uppercase;
  line-height:72px;
  cursor:pointer;
}

input, textarea {
  font-weight:300;
  outline: none;
  border: 1px solid rgba(43, 43, 43, .1);
  background: rgba(43, 43, 43, .01);
  box-shadow: 0 0 3px rgba(43, 43, 43, .1) inset;
  width: 100%;
  padding: 0 12px;
  font-size: 1.2em;
  }
  input {
    display: block;
    height: 72px;
    }

  input:hover, input:focus, textarea:hover, textarea:focus {
    background: rgba(255,255,255,1);
    border-color:rgba(43, 43, 43, .3);
    box-shadow: 0 0 3px rgba(43, 43, 43, .2) inset;
  }

  input:focus {
    outline: 0 none;
    border-color:#60d568;
  }

input[type="submit"] {
  cursor:pointer;
  color:#fff;
  font-weight:300;
  line-height:72px;
  height:72px;
  border:0;
  box-shadow:0 0 0 0;
  padding:0;
  margin-bottom:0;
  font-size:1.2em;
  text-transform:uppercase;
  display:block;
  clear:both;
  background: #53e072;
    box-shadow:0 0 0 0;
    }
  input[type="submit"]:focus {
    background: #60d568;
    box-shadow: 0 0 0 0;
  }
@font-face {
    font-family: 'discoregular';
    src: url('/assets/disco-regular-webfont-5202e2ad47e8845c633f464dfaed1fd2.eot');
    src: url('/assets/disco-regular-webfont-5202e2ad47e8845c633f464dfaed1fd2.eot?#iefix') format('embedded-opentype'),
         url('/assets/disco-regular-webfont-a6bd4e11a04fdc9126d7b3eb61deaeca.woff') format('woff'),
         url('/assets/disco-regular-webfont-1f9a5f165f76d6ba2cb8094d281cc902.ttf') format('truetype');
}


@-webkit-keyframes spin {
  0%   { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(359deg); }
}
@-moz-keyframes spin {
  0%   { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(359deg); }
}
@-o-keyframes spin {
  0%   { -o-transform: rotate(0); }
  100% { -o-transform: rotate(359deg); }
}
@keyframes spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(359deg); }
}

i { font-weight: normal; }

.icon {
  display:inline-block;
  font-family: 'discoregular';
  font-size:24px;
  text-transform: none;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}
.icon.large { font-size:72px; }
.icon.first {
  transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg); 
}

.icon.ajax-spinner:before { content: 'g'; }
.icon.play:before         { content: 'B'; }
.icon.first:before        { content: 'D'; }
.icon.last:before         { content: 'D'; }
.icon.pause:before        { content: 'E'; }
.icon.plus:before         { content: 'F'; }
.icon.delete:before       { content: 'G'; }
.icon.arrow_right:before  { content: 'H'; }
.icon.logout:before       { content: 'I'; }
.icon.menu:before         { content: 'J'; }
.icon.latest:before       { content: 'K'; }
.icon.artists:before      { content: 'L'; }
.icon.check:before        { content: 'M'; }
.icon.random:before       { content: 'N'; }
.icon.minus:before        { content: 'O'; }
.icon.flag:before         { content: 'P'; }
.icon.settings:before     { content: 'Q'; }
.icon.fullscreen:before   { content: 'R'; }
.icon.plist:before        { content: 'S'; }
.icon.burger:before       { content: 'T'; }
.icon.enter:before        { content: 'U'; }
.icon.feedback:before     { content: 'V'; }
.icon.edit:before         { content: 'W'; }
.icon.search:before       { content: 'X'; }
.icon.love:before         { content: 'Y'; }
.icon.addplaylist:before  { content: 'Z'; }
.icon.share:before        { content: 'z'; }

.icon.logo:before         { content: '1'; }
.icon.disco:before        { content: 'A'; }
.icon.soundcloud:before   { content: 'a'; }
.icon.youtube:before      { content: 'b'; }
.icon.officialfm:before   { content: 'c'; }
.icon.itunes:before       { content: 'd'; }
.icon.rdio:before         { content: 'e'; }
.icon.deezer:before       { content: 'f'; }
.icon.discosmall:before   { content: 'g'; }
.icon.twitter:before      { content: 'h'; }
.icon.facebook:before     { content: 'i'; }
.icon.spotify:before      { content: 'j'; }

.home h1 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
  -moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
  /* 1. */ }

  input:-webkit-autofill {
     box-shadow: 0 0 0px 1000px #f3f3f3 inset !important;
  }

  .home .notice, .home .alert {
    position: fixed;
    width: 100%;
    line-height: 48px;
    background: #60d568;
    color: #fff;
    font-weight: 400;
    z-index:20;
    text-align: center;
    font-size:1em;
    }

  .home header {
    padding: 0;
    width: 100%;
    height: 48px;
    line-height: 48px;
    position: fixed;
    z-index:30;
    }
    .home header .btn { display: inline-block; }
      .home header .btn .icon {
        float:left;
        margin-right:6px;
        }
    .home .btn.main { background :#60d568; cursor: pointer; }
      .home .btn.main:hover { background :#53e072; }
    
  .home h1 {
    line-height: 72px;
    margin: 72px 0 24px;
    font-weight:300;
    font-size:4.3rem;
    font-size:3.583rem;
    letter-spacing: -2px;
    }
     
  .home h2 { 
    text-transform: none;
    line-height:48px; margin-bottom:24px;
    font-weight:300;
    letter-spacing: -1px;
    font-size:3.583em;
    font-size:2.986rem;
     }
     .home .first h2 { color:rgba(255,255,255,.9); }

  .home p { font-size:1.2em; }
  
  .home .loginpage { 
    position: absolute; 
    background:#fff; 
    overflow-y: auto; 
    width:100%; 
    height:100%;
    padding: 72px 48px;
    }

    .home .screenshot {
      margin-top:96px;
      box-shadow:0px 1px 3px 0px rgba(43, 43, 43, .1);
      width:100%;
      max-width:1200px;
    }

  .home .logo, .home .section .logo {
    padding: 0;
    }
    .home .logo a, .home .first .logo a {
      margin: 48px 0;
      display: block;
      }
    .home .logo .icon {
      font-size: 72px;
      line-height: 72px;
      }

  .home .section { 
    padding: 48px 24px; 
    width:100%; 
    height:100%;
    overflow: hidden;
    position:relative;
    z-index:0;
    box-shadow:0px 1px 0px 0px rgba(43, 43, 43, .05);
    }
  
  .homebg {
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    background-position:center;
    width:100%;
    height:100%;
    z-index:-20;
    opacity:1;
    }
    
    .bg { position: absolute;
    width: 100%; }
    .bg img { width:150px; height:150px; display:block; position: absolute; }
    .bg .rdio { top: 480px;
      -webkit-animation: rdiocloud 400s infinite; /* Safari 4+ */
        -moz-animation: rdiocloud 400s infinite; /* Fx 5+ */
        -o-animation: rdiocloud 400s infinite; /* Opera 12+ */
        animation: rdiocloud 400s infinite;
     }
    .bg .deezer { top: 360px;
      -webkit-animation: deezercloud 400s infinite; /* Safari 4+ */
        -moz-animation: deezercloud 400s infinite; /* Fx 5+ */
        -o-animation: deezercloud 400s infinite; /* Opera 12+ */
        animation: deezercloud 400s infinite;
       }
    .bg .youtube { top: 120px;
      -webkit-animation: youtubecloud 400s infinite; /* Safari 4+ */
        -moz-animation: youtubecloud 400s infinite; /* Fx 5+ */
        -o-animation: youtubecloud 400s infinite; /* Opera 12+ */
        animation: youtubecloud 400s infinite; }
    .bg .itunes { top: 240px;
      -webkit-animation: itunescloud 400s infinite; /* Safari 4+ */
        -moz-animation: itunescloud 400s infinite; /* Fx 5+ */
        -o-animation: itunescloud 400s infinite; /* Opera 12+ */
        animation: itunescloud 400s infinite; }
    .bg .soundcloud { top: 20px;
      -webkit-animation: soundcloudcloud 400s infinite; /* Safari 4+ */
        -moz-animation: soundcloudcloud 400s infinite; /* Fx 5+ */
        -o-animation: soundcloudcloud 400s infinite; /* Opera 12+ */
        animation: soundcloudcloud 400s infinite; }
        
      /*  
    125 -> 0.8 = 10% distance pour 8% temps
    125% distance = 100% temps
    100% distance = 80% temps
      
      85 = 69
      80 = 64
      10 = 8
      5 = 4
      1.25 = 1
    */

      
    @-webkit-keyframes rdiocloud {
      0% { left: 25%; }
      59% { left: 100%; opacity:1; }
      60% { opacity:0; left: 100%; }
      64% { left: -20%; opacity:0; }
      65% { opacity: 1; }
      100% { left: 23.75%; }
    }   
    @-moz-keyframes rdiocloud {
      0% { left: 25%; }
      59% { left: 100%; opacity:1; }
      60% { opacity:0; left: 100%; }
      64% { left: -20%; opacity:0; }
      65% { opacity: 1; }
      100% { left: 23.75%; }
    }
    @keyframes rdiocloud {
      0% { left: 25%; }
      59% { left: 100%; opacity:1; }
      60% { opacity:0; left: 100%; }
      64% { left: -20%; opacity:0; }
      65% { opacity: 1; }
      100% { left: 23.75%; }
    }
    @-webkit-keyframes deezercloud {
      0% { left: 80%; }
      16% { left: 100%; opacity:1; }
      17% { opacity:0; left: 100%; }
      20% { left: -20%; opacity:0; }
      21% { opacity: 1; }
      100% { left: 78.75%;}
    }
    @-moz-keyframes deezercloud {
      0% { left: 80%; }
      16% { left: 100%; opacity:1; }
      17% { opacity:0; left: 100%; }
      20% { left: -20%; opacity:0; }
      21% { opacity: 1; }
      100% { left: 78.75%;}
    }
    @keyframes deezercloud {
      0% { left: 80%; }
      16% { left: 100%; opacity:1; }
      17% { opacity:0; left: 100%; }
      20% { left: -20%; opacity:0; }
      21% { opacity: 1; }
      100% { left: 78.75%;}
    }
    
    @-webkit-keyframes youtubecloud {
      0% { left: 65%; }
      29% { left: 100%; opacity:1; }
      30% { opacity:0; left: 100%; }
      33% { left: -20%; opacity:0; }
      34% { opacity: 1; }
      100% { left: 63.75%; }
    }
    @-moz-keyframes youtubecloud {
      0% { left: 65%; }
      29% { left: 100%; opacity:1; }
      30% { opacity:0; left: 100%; }
      33% { left: -20%; opacity:0; }
      34% { opacity: 1; }
      100% { left: 63.75%; }
    }
    @keyframes youtubecloud {
      0% { left: 65%; }
      29% { left: 100%; opacity:1; }
      30% { opacity:0; left: 100%; }
      33% { left: -20%; opacity:0; }
      34% { opacity: 1; }
      100% { left: 63.75%; }
    }
    
    @-webkit-keyframes itunescloud {
      0% { left: 0%; }
      80% { left: 100%; opacity:1; }
      81% { left: 100%; opacity:0; }
      84% { left: -20%; opacity:0; }
      85% { opacity: 1; }
      100% { left: -1.25%; }
    }
    @-moz-keyframes itunescloud {
      0% { left: 0%; }
      80% { left: 100%; opacity:1; }
      81% { left: 100%; opacity:0; }
      84% { left: -20%; opacity:0; }
      85% { opacity: 1; }
      100% { left: -1.25%; }
    }
    @keyframes itunescloud {
      0% { left: 0%;}
      80% { left: 100%; opacity:1; }
      81% { left: 100%; opacity:0; }
      84% { left: -20%; opacity:0; }
      85% { opacity: 1; }
      100% { left: -1.25%; }
    }
    
    @-webkit-keyframes soundcloudcloud {
      0% { left: 40%; }
      48% { left: 100%; opacity:1; }
      49% { left: 100%; opacity:0; }
      52% { left: -20%; opacity:0; }
      53% { opacity: 1; }
      100% { left: 38.75%; }
    }
    @-moz-keyframes soundcloudcloud {
      0% { left: 40%; }
      48% { left: 100%; opacity:1; }
      49% { left: 100%; opacity:0; }
      52% { left: -20%; opacity:0; }
      53% { opacity: 1; }
      100% { left: 38.75%; }
    }
    @keyframes soundcloudcloud {
      0% { left: 40%; }
      48% { left: 100%; opacity:1; }
      49% { left: 100%; opacity:0; }
      52% { left: -20%; opacity:0; }
      53% { opacity: 1; }
      100% { left: 38.75%; }
    }
      
  .home .first {
    text-align:center;
    padding:72px 24px 96px;
    background: transparent;
    font-size:1rem;
    box-shadow:0 0 0 0;
    }
    
    .home .first p { font-size: 2.074em; font-size:1.728rem;  line-height:36px;  }
    
    .home .first p.pwd { font-size:1em; margin-top:24px; }

    .home .first p.pwd a { background:rgba(43, 43, 43,.05); padding:0 3px;}
      .home .first p.pwd a:hover {  }      
    

/*FEATURED TRACK*/
  .home .featured {
    position: absolute;
    top:0;
    left:0;
    height:48px;
    display:block;
    width:50%;
    overflow: hidden;
    text-align: left;
    line-height:24px;
    z-index:40;
  }
  .home .featured a {
    width:100%;
    height:100%;
    display:block;
    }
    .home .featured a:hover { }
  
  .home .featured img {
    float:left;
    height:48px;
    margin-right: 6px;
  }
  .home .featured span { display:block; }
  .home .featured span.title { font-weight: 400; }
  
  .home img { display:block; }
    .home .second img, .home .third img, .home .fourth img { 
      position: relative; 
      opacity:1;
      width:100%;
      z-index:-10;
      margin:0;
      box-shadow:0 1px 2px 0 rgba(43, 43, 43,.2);
      }
      
    .home .third img { left:auto; box-shadow:0 0 0 0;  }
    
  .home .section.signup { padding:144px 24px 96px; box-shadow:0 0 0 0; }
  .home .section.signup h2 { text-align:center; display:block; margin-bottom:72px; }
  .home .section.signup .login  /* LOL */  { padding:0; margin:0 auto; }  
  
  .home .text { 
    width: 100%; 
    z-index:20; 
    opacity:1; 
    margin:48px 0;
    display:inline-block;
    }
    .home .text a { font-weight: 400; }
      .home .text a i { margin:0 0px; position: relative; top:1px;}
      
      
    .home .second .text { padding-bottom:0; }  
    .home .second .text a {  word-wrap: nowrap; display:inline-block;  }
    
    .home .second .services { 
      position:relative;
      width:100%;
      margin-top:48px;
      display: inline-block;
      overflow:visible;
      line-height: 24px;
      text-align:center;
      padding: 24px 0;
      background:#fff;
      border:1px solid rgba(43, 43, 43,.1);
      
    
    }

    .home .second .services:after, .home .second .services:before 
      { left: 50%; top: 100%; 
        border: solid transparent; 
        content: " "; height: 0; width: 0; 
        position: absolute; pointer-events: none; } 
    
    .home .second .services:after { 
      border-color: transparent; 
      border-top-color: #fff; 
      border-width: 23px;
      margin-top: 0; 
      margin-left: -23px;  
     } 
    .home .second .services:before { 
      border-color:transparent; 
      border-top-color: rgba(43, 43, 43,.2); 
      border-width: 24px; 
      margin-top: 0; 
      margin-left: -24px; }
    
    
    .home .second .services a { font-size:.694em; 
      width:48px; margin:0 12px; 
      padding:0;
     }
    .home .second .services a i {
      font-size: 48px;
      line-height:48px;
      height:48px;
      display:block;
    
    }
    
    
    
  .home .invite { margin:48px 0 0; }
    
  .home .disco { position: absolute; top:0; font-size:96px; line-height:96px; background:#fff; z-index:100; display:none; }
    .home .disco { position:fixed;  }
      
  .home input { margin-bottom: 24px; }

  .home section.feat { text-align: left; padding: 48px; background:#f4f1e9; }
  .home section.feat.right { padding: 48px; background:#cbc8c1; }
  

  .home footer {
    color:#777;
    line-height:72px;
    text-align:center;
    }
    .home .fourth footer { margin-top:72px; }
    
    .home footer a {
      
      background: transparent;
      border:1px solid rgba(43, 43, 43,.4);
      width: 48px;
      height: 48px;
      line-height: 44px;
      border-radius: 50%;
      display: inline-block;
      margin: 0 3px;
      -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;
              transition: all 0.2s ease-in-out;
      }
      .home footer a:hover {
        border-color:rgba(43, 43, 43,.8);
        -webkit-transition: all 0.2s ease-in-out;
           -moz-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
        }

 
  .login {
    padding: 24px 0;
    max-width: 400px;
    margin: 0 auto 24px;
    }
    .login label { display:none; }

    .login .field_with_errors label {
      display: block;
      font-weight: lighter;
      line-height: 24px;
      padding: 0 12px;
      text-align: left;
      text-transform: none;
      background: #EF6F6C;
      color: #FFFFFF;
    }
    input { display:inline; }
  input[type="submit"],.home .section .submit {
    cursor:pointer;
    background: #60d568;
    color:#fff;
    font-weight:300;
    line-height:72px;
    height: 72px;
    border: 0;
    box-shadow: 0 0 0 0;
    padding: 0;
    margin-bottom: 0;
    font-size:1.2em;
    text-transform: uppercase;
    clear: both;
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
    letter-spacing:1px;
    -webkit-appearance: none;
    }
    
    .home .section .submit {
      width: 100%;
      text-align:center;
      }
    
      .home .homefooter {
        position:relative;
        padding:0 0 96px;
        background: transparent;
        color:rgba(255,255,255,.8);
      }
      .home .built p { text-align:center; font-size:.833em; margin-top:12px;  }
      .home .built a { text-decoration: underline;  }
 

    
    
@media (min-width: 600px) {
  
  .home img  { display:inline-block; }
  .home .first p { display: block; }
  .home .text { width: 40%;  margin:120px 0; }
  
  .home .section { padding: 48px; }   
    .home .second .text { margin-right:60%; }
    .home .third .text { margin-left:60%; }
    
     .home .second img, .home .third img, .home .fourth img {           
       position: absolute;    
       width:auto;
       margin:0;
       top:48px;
       height:calc(100% - 48px);
       }  
    .home .second .text { padding-bottom:72px; }     
    .home .second .services { 
       position:absolute;
       width:auto;
       min-width:50%;
       height:120px;
       left:0;
       border-left:0;
       }

       .home .second .services:after, .home .second .services:before 
         { left: 100%; top: 50%; 
           border: solid transparent; 
           content: " "; height: 0; width: 0; 
           position: absolute; pointer-events: none; } 
    
       .home .second .services:after { border-color: transparent; 
         border-left-color: #fff; border-width: 59px;
          margin-top: -59px; margin-left:auto; } 
       .home .second .services:before { border-color:transparent; border-left-color: rgba(43, 43, 43,.2); 
         border-width: 60px; margin-top: -60px; margin-left:auto;  }
       .home .second .services a { font-size:.694em; 
         width:72px; margin:0 12px; 
         padding:0; }
       .home .second .services a i {
         font-size: 72px;
         line-height:48px;
         height:48px;
         display:block;
       }
        
       .home .third img { left:auto; height:calc(100% - 300px); margin-top:96px; }      
       #getit, #share { left:50%; }    
       #available { right:50%; }

       .home .tracks { display:block; }  
  }        
   
  @media (min-width: 1000px) {
    
    .home .text { width: 40%;  margin:138px 0; }
    .home .third .text { margin-left:60%; }
   
    .home .second img, .home .fourth img { margin:0;}
    
    .home .section { padding: 144px; }   
    .home .first { padding:120px 0 72px; }
    
    #getit, #share { left:50%;  }    
    #available { right:55%; }
    
    } 
   
  @media (min-width: 1800px) {
  
    body { font-size:18px; line-height:30px; }
    a.btn { line-height:60px; height:60px; padding:0 30px;}
    
    .home h2 {
      line-height: 60px;
      margin-bottom: 30px;
      }
    .home input, input[type="submit"], .home .section .submit { height:90px; line-height:90px; }
    .home .invite { margin: 60px 0 0; }
    .home .logo { padding: 30px 0 0; }
    .home .logo a { margin: 60px 0; }
    
    .home .disco {
      font-size: 120px;
      line-height: 120px;
      }
    .home .text { margin:253px 0; }
    .home .text.active { margin-top: 180px; }  
   
   
    .home footer a {
      width: 60px;
      height: 60px;
      line-height: 58px;
      }
    .home .fourth footer { margin-top: 90px; } 
    .login {
      padding: 30px;
      max-width: 600px;
      margin: 0 auto 30px;
      }
    }