@import "mixins";
@import "variables";

$sidebarWidth: 400px;
$sidebarHeight: 1377px;
$homeBreakPoint: 900px;

.home-wrapper {
  @include clearfix();
}

.home-sidebar {
  position: relative;
  width: $sidebarWidth;
  float: left;  
  background: $dark;
  color: $white;
  min-height: $sidebarHeight;
  h1, h2 {
    color: $light;
  }
  h1 {
    line-height: 1.6em;
  }
  a {
    color: $secondaryLight;
    &:hover {
      color: lighten($secondaryLight, 10%);
    }
    &.button {
      color: $white;
    }
  }
  @include box-sizing();
}

.home-main {
  position: relative;
  margin-left: $sidebarWidth;
  min-height: $sidebarHeight;
}

.container {
  padding: 20px;
}

.svg-wrapper.home {
  z-index: 0;
  position: absolute;
}

.home-description {
  background: lighten($dark, 4%);
  h1, h3 {
    margin: 0;
  }
  h3 {
    margin-top: 10px;
    font-size: 1.4em;
  }
}

.step {
  background: lighten($light, 5%);
  margin-bottom: 12px;
  padding-left: 25px ;
  @include clearfix();
  h4,
  img {
    display: block;
    width: 50%;
    @include box-sizing();
  }
  h4 {    
    padding: 10px 20px;    
    float: left;
    color: $dark;
    font-size: 0.8em;
    letter-spacing: 1px;
    .circle {
      margin-left: -25px;
    } 
  }
  img {
    display: block;
    float: right;
    border-left: 1px solid $tanLight;
    margin-left: -1px;
  }
}


@media (max-width: $homeBreakPoint) {
  .home-sidebar {
    float: none;
    margin: 0 auto;
    background: rgba($dark, 0.9);
  }
  .home-description {
    background: rgba($dark, 0.5);
  }
  .home-main {
    z-index: -1;
    margin-left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
}

@media (max-width: $sidebarWidth) {
  .home-sidebar {
    width: auto;
  }
}

