codecombat/app/styles/home-view.sass

@import "app/styles/bootstrap/variables"
@import "app/styles/mixins"
@import "app/styles/style-flat-variables"

#home-view
  
  overflow: hidden
  
  #jumbotron-container-fluid
    background-image: url("/images/pages/home/character_jumbotron.png")
    background-position: 50% 55%
    
    @media (min-width : 1200px)
      background-size: 100% auto
      
    @media (max-width : 1200px)
      background-size: 1200px auto
      
    .container
      background-repeat: no-repeat
      
      .btn
        margin: 10px 0
        
      h1
        color: white
        @media (max-width: $screen-md-min)
          margin-top: 60px
          font-size: 33px
          line-height: 45px
        
      .well
        border: none
        border-radius: 8px
        background: rgba(255, 255, 255, 0.5)
        margin-top: 10px
        #classroom-edition-header
          margin-top: 10px
        #educator-header
          white-space: nowrap
        #students-header
          line-height: 25px
          margin-top: 40px
          margin-bottom: -5px
        #learn-to-code-header
          margin-top: 80px
        &#ideal-tickets-well
          margin-top: 20px
        .form-group
          text-align: left
          label
            line-height: 14px
            font-size: 12px
        @media (max-width: $screen-md-min)
          margin-top: 320px

      #learn-more-row
        margin-top: 80px
        @media (max-height: 700px)
          margin-top: 10px
        h2, h6
          color: white
        h6
          margin-top: 10px
        a:hover
          text-decoration: none
        @media (max-width: $screen-md-min)
          margin-top: 10px
      
    &.alt-image
      background-image: url("/images/pages/home/student_jumbotron.jpg")
      background-position: 60% 35%
      
      .well
        @media (max-width: $screen-md-min)
          margin-top: 0px

      .container h1
        margin-top: 260px
        margin-bottom: 20px
        @media (max-width: $screen-md-min)
          margin-top: 60px
          margin-bottom: 60px
        @media (max-width: $screen-sm-min)
          margin-top: 60px
  
  #classroom-in-box-row
    margin: 40px 0

  .top-screenshots
    margin-bottom: 100px
    margin-top: 50px
    .label
      color: black
      display: block
    .screenshots
      text-align: center
      .screenshot-grid
        img
          display: inline-block
          margin: 6.5px
          width: 800px
          border-radius: 8px

  .teacher-screenshots
    padding: 10px
    .label
      color: black
      display: block
    .screenshots
      text-align: center
      .screenshot-grid
        img
          display: inline-block
          margin: 6.5px
          width: 300px
          border-radius: 4px

  #screenshot-lightbox
    .modal-dialog
      width: auto
      max-width: 1024px

  #feature-spread-row
    .col-sm-4
      padding: 40px
      
    img
      margin-bottom: 20px
      
  .testimonials-rows
    background: $navy
    color: white
    position: relative
    padding: 60px 0 40px
    margin: 100px 0
    
    h3, h6
      color: white
      
    .testimonials-filler-left
      position: absolute
      width: 2000px
      left: -2000px
      top: 0px
      background: $navy
      height: 100%
      
    .testimonials-filler-right
      position: absolute
      width: 2000px
      right: -2000px
      top: 0px
      background: $navy
      height: 100%
      
    img
      margin: 0 auto 10px
      
    .row
      margin: 20px 0
      
  #benefit-row-1, #benefit-row-2, #benefit-row-3
    margin: 50px 0
    
  #benefit-graphic-1, #benefit-graphic-2, #benefit-graphic-3
    padding: 30px 40px
    position: relative
    min-height: 250px
    margin-bottom: 20px

    h2
      color: white
      width: 50%


  #benefit-graphic-1
    background: $burgandy
      
    img
      position: absolute
      right: 0
      bottom: 0
      
    #benefit-graphic-1-filler
      background: $burgandy
      height: 100%
      width: 2000px
      position: absolute
      left: 100%
      top: 0
      
  #benefit-graphic-2
    background: $navy

    h2
      float: right

    img
      position: absolute
      left: 0
      bottom: 0

    #benefit-graphic-2-filler
      background: $navy
      height: 100%
      width: 2000px
      position: absolute
      right: 100%
      top: 0
      
  #benefit-graphic-3
    background: $forest

    img
      position: absolute
      right: 0
      bottom: 0

    #benefit-graphic-3-filler
      background: $forest
      height: 100%
      width: 2000px
      position: absolute
      left: 100%
      top: 0

  .have-an-account
    font-size: 10pt

  #school-level-label
    margin: 15px 15px 0 0
    display: inline-block

  #school-level-dropdown
    display: inline-block
    width: 250px

  .request-demo-row
    margin: 100px 0

    .btn
      margin: 20px 10px
      
  #total-hours-header
    margin-top: 10px
    
  #courses-row
    .media
      width: 222px
      margin: 20px auto 0
      border: 1px solid $navy
      border-radius: 8px
      padding: 50px 15px 0
      text-align: center
      position: relative
      height: 350px
      color: $navy

      &:first-child
        border-color: $forest
        color: $forest
        h6
          color: $forest

      &.disabled
        $disabled-color: rgb(155, 155, 155)
        border-color: $disabled-color
        color: $disabled-color
        h6
          color: $disabled-color
        .media-object
          @include filter(grayscale(100%))

      h6
        padding: 0 5px
        color: $navy

      .media-object
        width: 147px
        height: 147px
        border-radius: 74px
        background-position: -30px -26px
        background-repeat: no-repeat
        background-size: 312px auto
        margin: 15px auto
        position: absolute
        left: 38px
        left: calc((100% - 147px) / 2)
        bottom: 50px

      .course-duration
        position: absolute
        bottom: 25px
        width: 192px
        width: calc(100% - 30px)
        padding: 0

      .free-course
        background-color: $forest
        width: 100%
        height: 33px
        position: absolute
        top: 0
        left: 0px
        border-top-left-radius: 7px
        border-top-right-radius: 7px

        h6
          margin-top: 6px
          color: white
          
    .text-center
      width: 100%
      margin-top: 30px
      img
        margin-bottom: 20px