[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

.brush {
  display: none !important;
}

.data-set-container:hover .brush {
  display: block !important;
}

.unsupported {
  font-size: 20px;
  color: #eee;
  text-align: center;
  padding: 20px 0;

  .logo {
      margin-bottom: 50px;
  }
}

.hero {
    background: url('/images/burner.jpg');
    background-size: cover;
    background-position: 50% 50%;
    height: 100%;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 22px;
    .banner {
        position: absolute;
        width: 100%;
        top: 50%;
        margin-top: -150px;
        background: rgba(0, 0, 0, 0.6);
        padding: 50px 0;
    }
    .logo {
        h1 {
            display: inline-block;
            padding-bottom: 15px;
            margin: 0;
            margin-left: 10px;
        }
        img {
            vertical-align: bottom;
        }
    }
    .message {
        margin-top: 50px;
    }
}


/*
  COLORS
  Contains
    - Blues
    - Greyscale
    - Grey Blues
    - FAQ Text
    - Buttons
*/

@cloudspace: #1861b2;
@bright-blue: #60beff;
@pale-blue: #cdebff;
@deep-blue: #1961b2;
@transparent-blue: rgba(70, 84, 93, 0.5);

@dark-grey: #3d3d3d;
@dark-grey2: #3f4143;
@medium-grey: #5e5e5e;
@medium-grey2: #4a4b50;
@medium-grey3: #54575c;
@light-grey: #959597;
@light-grey2: #ededed;
@white: #ffffff;

@faq-text: #AFAFAF;

@dark-grey-blue: #41484C;
@dark-grey-blue2: #404041;
@dark-grey-blue3: #27292d;

@active-container-blue: #2b8fff;

@button-yellow: #f6d64f;
@button-green: #1AC26A;
@button-blue: #00BFFA;


/*
  FONTS
  Contains
    - Proxima Nova ( Loaded via Typekit )
    - Futura ( Loaded via Typekit )
*/

@font-proxima-nova: "proxima-nova-1", "proxima-nova-2", sans-serif;
@font-futura: "futura-pt-1", "futura-pt-2", Arial, sans-serif;


/*
  Centers a container
*/
.CenterContainer(){
  margin-left: auto;
  margin-right: auto;
}


/*
  Applies a light grey box shadow to an element
*/
.LightBoxShadow(){
  box-shadow: @light-grey2 0px 2px 4px 0px;
}


/*
  Remove default styling from an anchor tag
  @param color    Replacement text color for the anchor
*/
.ResetAnchor(@color){
  color: @color;
  text-decoration: none;
}


/*
  Applies absolute positioning with top and left arguments
  @param top    vertical displacement in pixels
  @param left   horizontal displacement in pixels
*/
.PositionAbsolute(@top, @left){
  position: absolute;
  top: @top;
  left: @left;
}


/*
  Base style template for text
  @param color    text color
  @param size     font's size with a default of 16px
  @param weight   font's weight with a default of normal
*/
.SetText(@color, @size: 16px, @weight: normal){
  color: @color;
  font-size: @size;
  font-weight: @weight;
}


/*
  Basic flat button
  @param background     background color for the button
  @param color          font color for button text
  @param padding        typically only vertical, but left open ended for edge cases
  @param border-radius  rounded corners on the button container
  @param width          Using width to ensure uniformatiy in size
*/
.Button(@background, @color, @padding, @border-radius, @width){
  background-color: @background;
  color: @color;
  padding: @padding;
  border-radius: @border-radius;
  width: @width;
  border: none;
}


/*
  Toggles between two display states based on screen size
  @param @base  The starting point to base the toggle off of
*/
.DisplayToggle(@base, @response, @size){
  display: @base;

  @media screen and (max-width: @size){
    display: @response;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

.Animation(@animation) {
  -webkit-animation: @animation;
  -moz-animation: @animation;
  -ms-animation: @animation;
  animation: @animation;
}

/*
  Global Components
*/
@-webkit-keyframes bounce {
    0%, 2%, 5%, 8%, 100%  { top: 0; }
	4% { top: -12px; }
    6% { top: -6px; }
}

.bounce {
    position: relative;
    .Animation(bounce 20s infinite 1s);
}

.brush .resize .limit {
  fill: @bright-blue;
}

.brush .resize .range {
  fill: @bright-blue;
  stroke: white;
  stroke-width: 2px;
}

.brush .resize .range_text {
  fill: white;
  font-size: 12px;
  text-align: center;
  text-anchor: middle;
}

.selected {
  fill: brown;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: @dark-grey;
  background-image: url('/images/background-noise.png');
  height: 100%;
  overflow: hidden;
}

/* Space out content a bit */
.spacing-med {
  margin-top: 10px;
  margin-bottom: 10px;
}

.clear-both {
  clear: both;
}


/*
  Drag and Drop Components
*/

.drag-contain {
  position: relative;
}

.drag-contain > div {
  height: 390px;
  width: 390px;
  position: absolute;
}

.drag-contain .ss-dragged-child {
    background: none;
}

.drag-contain .ss-placeholder-child {
    background: none;
    border: 1px dashed gray;
}

.brush .extent {
  fill-opacity: 0;
}

.data-set-container .placeholder {
    text-align: center;
    line-height: 270px;
    font-size: 55px;
    background: #666;
    margin: 0;
}

#main {
  position: relative;
  min-height: 300px;

  .continue {
    text-align: center;
    color: #fff;
    line-height: 300px;
    padding-bottom: 0;
    font-size: 22px;
    color: @pale-blue;
  }
}

header{

  /*background-image: url('/images/cloud.png');*/
  padding-bottom: 15px;

  .row{
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid @bright-blue;
  }

  img{
    display: inline;
    float: left;
  }

  .header-text{
    margin-left: 30px;
    float: left;
    h1{
        margin-top: 0px;
        margin-bottom: 0px;
        font-family: 'BebasNeue';
        font-size: 68px;

        a{
          color: @pale-blue;

          span{
            color: @white;
          }
        }
    }

    h2{
      margin-top: 0px;
      font-size: 13px;
      color: @white;
    }
  }
}

.brush .resize .handle {
  fill: @bright-blue;
  stroke: white;
  stroke-width: 2px;
}


/*
  Data Containers
*/

.count {
  margin-top: 25px;
  display: none;
}

.hq-map {
  width: 100%;
  height: 100%;
  min-height: 360px;
}

.data-set-container{
  background-color: #2c3136;
  padding-bottom: 15px;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 7px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.30);

  .head {
    overflow: auto;
    padding: 0 15px;
    background: #343a40;
    border-bottom: 1px inset #272b30;
    cursor: move;
  }

  .drag-handle, .settings-button {
    height: 15px;
    margin-bottom: 0;
    background: #343a40;
    display: none;
    position: absolute;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    top: 7px;
  }

  .drag-handle {
    background-image: url('/images/drag-n-drop-handle.png');
    left: 6px;
  }

  .settings-button {
    background-image: url('/images/settings-gear.png');
    background-image: url('/images/drag-n-drop-handle.png');
    right: 6px;
  }

  h3{
    font-family: @font-proxima-nova;
    font-size: 16px;
    font-weight: 400;
    color: @white;
    vertical-align: bottom;
    text-align: center;
    padding: 16px 0;
    margin: 0;
  }

  p{
    color: @white;
  }

  .textlist{
    margin: 0 15px;
  }

  .form-group{
    margin: 10px 0;
  }

  .dataset {
    overflow-y: scroll;
    background-color: transparent;
    color: #d5d5d5;
    font-family: @font-proxima-nova;
    font-weight: 600;
  }

  .textlist tr td{
    position: relative;
    padding: 0;
    border-top: none;
    font-size: 15px;
  }

  .textlist .permalink {
    display: none;
    color: #bbb;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
    right: 40px;
    top: 12px;
  }

  .textlist tr:hover .permalink {
    display: inline;
  }

  .textlist a:hover {
    color: #eee;
  }

  .textlist tr:hover {
    color: #fff;
  }

  .textlist .dataset tr.selected {
    color: #67BEFD;
  }

  .input-group {
    display: block;
  }

  input{
    border: none;
    width: 100%;
    background-color: #343a40;
    color: #5f6973;
    font-family: @font-proxima-nova;
    font-weight: 600;
    border-radius: 6px;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    font-size: 15px !important;
  }

  ::-webkit-scrollbar {
    display: none;
  }
}

.data-set-container:hover {
  .drag-handle, .settings-button {
    display: block;
  }
}
.remove-selected {
  text-align: right;
}


/*
  Chart Axis styles
*/

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  shape-rendering: crispEdges;
}

.value {
  font: 10px sans-serif;
  color: @white;
}

.x.axis path {
  height: 0;
}

.state {
  cursor: pointer;
}
.overlay {
  fill: none;
  pointer-events: all;
}
.state-boundary, .county-boundary {
  fill: none;
  stroke: #41484C;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.alert-scream {
  background-color: #ff0;
}

.dataset td>div {
  padding: 4px;
}

.dataset td>a, .dataset .model-count {
  position: absolute;
  right: 14px;
  top: 9px;
}


.list-item {
  cursor: pointer;
}

#splash,
#about {
  display: block;
  width: 100%;
  background: @white;
  position: relative;
  font-family: @font-proxima-nova;
}

/*
  ABOUT SECTION
  Contains
    - Pop Quiz
    - About Text
    - Contact Us
    - FAQ
*/

#about {
  .about-contain {
    height: 135px;
  }
  #about-header {
    width: 100%;
    background: #fff;
    z-index: 100;

    .forkme {
      right: 0;
      position: absolute;
    }

    .header-text {
      margin: 0 auto;
      max-width: 1080px;
      overflow: auto;
      overflow-y: visible;
      padding: 10px 0;
    }

    nav, ul, li { display: inline; }
    ul { float: right; }

    li {
      list-style-type: none;
      margin-left: 20px;

      a { .ResetAnchor(@dark-grey2); }
    }
    li.active {
      a { .ResetAnchor(#fff); }
    }

    @media screen and (max-width: 800px){
      padding: 30px 20px 30px 20px;
    }
  }
  #about-header.affix {
    position: fixed;
    top: 0;
    box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.35);
  }


  #contact-us {
    p {
      .SetText(@white, 30px, 200);
      margin-bottom: 30px;
      padding: 0px 20px 0px 20px;
    }

    a {
      padding: 10px 40px 10px 40px;
      border-radius: 40px;
      background-color: @button-yellow;
      display: inline-block;
      .ResetAnchor(@dark-grey-blue2);
    }

    padding-top: 50px;
    padding-bottom: 50px;
    background-color: @dark-grey-blue3;
  }


  #pop-quiz {

    h3 {
      font-family: @font-proxima-nova;
      font-weight: 600;
    }

    .ellipsis { display: inline; }
    .continuation, button { display: none; }
    .triangle {
        .PositionAbsolute(50%, -13px);
        background: url("/images/triangle_white.png") no-repeat;
        height: 25px;
        width: 13px;
        margin-top: -13px;
    }

    ul {
      .CenterContainer();
      display: inline-block;
      border-left: solid 5px @light-grey2;
      max-width: 800px;

      li {
        .LightBoxShadow();
        color: @light-grey;
        text-align: left;
        padding: 70px 40px 70px 135px;
        margin: 10px 0 10px 0px;
        border: solid 1px @light-grey2;
        border-radius: 5px;
        box-sizing: border-box;
        list-style-type: none;
        position: relative;

        background: white 20px center no-repeat;


        -webkit-transition: color 1s, background-color 1s;
      }


      li:before{
        .LightBoxShadow();
        content: " ";
        padding: 10px;
        border-radius: 10px;
        background-color: @light-grey2;
        .PositionAbsolute(50%, -54px);
        margin-top: -10px;
      }

      li.active:before{

        background-color: @active-container-blue;
      }

      li.active {

        background-color: @active-container-blue;
        background-image: url('/images/check_mark.png');
        color: @white;

        .triangle{
          background: url("/images/triangle_blue.png") no-repeat;
        }

        .ellipsis { display: none; }
        .continuation, button { display: inline; }

        button {
          .Button(@white, @active-container-blue, 5px 30px 5px 30px, 5px, auto);
          margin: 50px 0px 10px 0px;
        }
      }
    }
  }

  #faq {
    font-family: @font-proxima-nova;

    h4 {
      text-align: center;
      font-size: 20px;
      color: @dark-grey2;
      margin-bottom: 80px;
      font-family: @font-proxima-nova;
    }

    p{ padding: 0px; }

    h5{
      font-size: 16px;
      color: @dark-grey2;
      margin-bottom: 30px;
      font-family: @font-proxima-nova;
    }

    ul {
      .CenterContainer();
      margin-bottom: 50px;
      padding: 0px;
      text-align: center;

      li {
        list-style-type: none;
        text-align: center;
        .DisplayToggle(inline, block, 800px);
        margin: 0px 5px 0px 5px;
      }
    }

    hr{
      width: 400px;
      margin-bottom: 70px;
    }

    button {
      .Button(@button-green, @white, 20px 0px 20px 0px, 5px, 320px);
      font-size: 20px;
      border-radius: 5px;
    }

    button:focus {
      border: none;
    }

    button.blue {
      background-color: @button-blue;
    }

    p {
      .SetText(@faq-text, 16px, normal);
      text-align: left;
      line-height: 32px;
    }
  }

  h3, p, #contact-us, #pop-quiz {
    .CenterContainer();
    text-align: center;
    margin-bottom: 70px;
  }

  h2 {
    .SetText(@cloudspace, 26px, normal);
    float: left;
    font-family: @font-futura;
    letter-spacing: 1px;
    background: url('/images/cloudspace-logo-blue-and-white.png') 0 0 no-repeat;
    padding: 5px 0 0 95px;
    margin: 0;
    line-height: 45px;
  }

  h3 {
    .SetText(@medium-grey3, 32px, 200);
    max-width: 780px;
    font-family: @font-proxima-nova;
  }

  p {
    .SetText(@medium-grey, 24px);
    max-width: 865px;
    padding: 0px 20px 0px 20px;
  }

  em {
    .SetText(@deep-blue, inherit, 900);
    font-style: normal;
  }

  strong { .SetText(@medium-grey2, inherit, 900); }

  font-size: 24px;
}


/*
  FOOTER
  Contains
    - Footer Text
    - Contact Info
*/

footer {
  text-align: center;
  background: @cloudspace url('/images/large-cloudspace-logo-blue.png') right top no-repeat;
  background-position: right 65px;
  color: @white;
  margin: 0px;

  ul, p { .CenterContainer(); }
  a, a:hover {
    color: white;
  }
  p {
    max-width: 800px;
    font-size: 48px;
    font-family: @font-proxima-nova;
    font-weight: 600;
    line-height: 48px;
    padding-top: 90px;
  }
  ul {
    li {
      font-family: @font-proxima-nova;
      font-size: 30px;
      list-style-type: none;
      padding: 0px 15px 0px 15px;
      .DisplayToggle(inline, block, 700px);
    }

    li:last-of-type {
      @media screen and (max-width: 700px){
        border: none;
      }
      border-left:          solid 3px @white;
    }

    display: inline-block;
    padding: 40px 0px 60px 0px;
  }
}


/*
  Splash Page
*/

#splash {
  background: url('/images/burner.jpg');
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
  overflow: hidden;
  margin-bottom: -64px;
  text-align: center;

  .forkme {
    position: absolute;
    right: 0;
    z-index: 100;
  }

  .initializing {
      width: 100%;
      position: absolute;
      top: 50%;
      margin-top: -345px;
  }

  .header-text {
    color: white;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 42px;
    line-height: 37px;
    font-family: @font-proxima-nova;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 600;
  }
}


/*
  Nav Bar
*/

#nav {
  display: block;
  width: 100%;
  height: 103px;
  overflow: visible;
  color: @white;
  font-family: @font-proxima-nova;
  margin-bottom: 20px;

  .movable {
    box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.35);
    width: 100%;
    z-index: 100;
  }
  .movable.affix-top {
    position: relative;
  }
  .movable.affix {
    position: fixed;
    top: 1px;
    .back {
      margin-top: -1px;
    }
  }
  .movable.affix-bottom {
    position: absolute;
  }

  .back {
    background: #232528;
  }
  nav {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 11px 0;
    position: relative;
  }

  i.fa-angle-double-down {
    font-size: 44px;
    margin: 0 40px;
    vertical-align: top;
  }

  .movealong {
      font-size: 35px;
      line-height: 44px;
  }

  a {
      text-decoration: none;
  }

  .logo {
    position: absolute;
    left: 0;
    img {
      width: 54px;
      height: 39px;
      cursor: pointer;
      vertical-align: top;
    }
    h1 {
      font-family: @font-proxima-nova;
      font-weight: 600;
      margin: 0;
      margin-left: 15px;
      display: inline;

      a:link,
      a:visited,
      a:active,
      a:hover {
        color: @white;
        font-size: 24px;
        text-decoration: none;
      }
    }
  }

  .status, .share {
      ul {
        margin: 0;
        padding: 0;
      }
      li {
        list-style-type: none;
        display: inline-block;
      }
  }

  .status {
      text-align: center;
      width: 600px;
      margin-left: 225px;
      .amount-counter li {
          padding: 0 20px;
      }
  }



  .share {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -14px;
    font-size: 16px;
    font-weight: 600;
    color: #abacb5;
    p {
        display: inline;
    }

    ul {
      padding-left: 5px;
      display: inline;
    }

    li {
      padding-left: 7px;
      padding-top: 2px;

      button {
        padding: 4px 10px;
        border-radius: 3px;
        font-size: 13px;
        width: 75px;
        text-align: right;
        display: inline-block;
        text-shadow: 0px 1px 0 rgba(0, 0, 0, .35);
        color: @white;
        padding-left: 10px;
        white-space: nowrap;
        border: 0;

        i {
          padding-right:5px;
          font-weight: 100;
        }
      }
      &.facebook button {
        background: #2a508a;
        background: -moz-linear-gradient(top, #5078b3 0%, #385f99 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5078b3), color-stop(100%,#385f99)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #5078b3 0%,#385f99 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #5078b3 0%,#385f99 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #5078b3 0%,#385f99 100%); /* IE10+ */
        background: linear-gradient(to bottom, #5078b3 0%,#385f99 100%); /* W3C */

        &:hover {
          opacity: 0.90;
          text-decoration: none;
        }
      }
      &.twitter button {
        background: #1ec6f8;
        background: -moz-linear-gradient(top, #70d9f8 0%, #1cc6f8 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70d9f8), color-stop(100%,#1cc6f8)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #70d9f8 0%,#1cc6f8 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #70d9f8 0%,#1cc6f8 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #70d9f8 0%,#1cc6f8 100%); /* IE10+ */
        background: linear-gradient(to bottom, #70d9f8 0%,#1cc6f8 100%); /* W3C */

        &:hover {
          opacity: 0.90;
          text-decoration: none;
        }
      }
      &.email button {
        background: #383d44;
        background: -moz-linear-gradient(top, #494b58 0%, #343a40 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#494b58), color-stop(100%,#343a40)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #494b58 0%,#343a40 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #494b58 0%,#343a40 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #494b58 0%,#343a40 100%); /* IE10+ */
        background: linear-gradient(to bottom, #494b58 0%,#343a40 100%); /* W3C */

        &:hover {
          opacity: 0.90;
          text-decoration: none;
        }
      }
    }
  }

  .amount-counter {
    color: #abacb5;
    font-size: 16px;
    font-weight: 600;
  }

  .amount-count {
    font-size: 30px;
    font-weight: 600;
    color: @white;
    vertical-align: middle;
    padding-right: 10px;
  }
}


/*
  Filters
*/

#filters {
  width: 100%;
  background: #2d2f33;

  ul {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
  li {
    list-style-type: none;
    display: inline-block;
    min-width: 150px;
    margin-right: 40px;


    position: relative;
    font-family: @font-proxima-nova;
    font-size: 16px;
    font-weight: 800;
    color: @white;
    padding: 8px 0;
    margin: 0;

    .filter_type {
      color: #5d6065;
      background: url('/images/filter-type.png');
      background-position: 5px 50%;
      background-repeat: no-repeat;
      padding-left: 30px;
      padding-right: 2px;
    }
    .filter_name {
      color: #b4b5be;
    }
    .filter_remove {
      background: url('/images/filter-remove-sprite.png');
      background-repeat: no-repeat;
      width: 20px;
      height: 0;
      overflow: hidden;
      padding-top: 20px;
      display: inline-block;
      vertical-align: middle;
      margin-top: -3px;

      &:hover {
        background-position: 0 -20px;
      }
    }
  }
}

.loading {
  font-size: 30px;
  font-weight: 600;
  margin: 0;
  text-align: center;
  color: @bright-blue;
  line-height: 42px;

  text-shadow: 0 0 20px rgba(200, 200, 200, .5);
  -webkit-animation: opacity-pulsate 2s linear;
  -webkit-animation-iteration-count: infinite;

}

@-webkit-keyframes pulsate {
    0% {text-shadow: 0 0 20px rgba(255, 255, 255, 1);}
    50%   {text-shadow: 0 0 0px rgba(255, 255, 255, 0.5);}
    100% {text-shadow: 0 0 20px rgba(255, 255, 255, 1);}
}

@-webkit-keyframes opacity-pulsate {
    0% {opacity: 0.5;}
    50%   {opacity: 1;}
    100% {opacity: 0.5;}
}

.special {
    .head, .drag-handle {
        background-color: #5a83a0;
    }
}
