@charset "UTF-8"
@import "constant"

//

*
  box-sizing: border-box
  position: relative
  margin: 0
  padding: 0

html
  height: 100%

body
  background: #f4f4f4
  position: relative
  min-height: 100%

.wrapper
  width: 1280px
  margin: auto

header
  background: #2a3036
  background: linear-gradient( #2a3036, #1a1a1a )
  box-shadow: #e1e1e3 0 0 3px 0
  position: relative
  height: 80px
  line-height: 80px

.title-wrapper
  float: left
  padding: 20px 0 0 0
.metrc-logo
  float: left
  @extend .sprite-metrc
  width: 83px
  height: 80px
  margin: 0 3px 0 55px
.title, .tagline
  float: left
  margin: 0
  line-height: 1.0em
.title
  color: #fcfcfc
.tagline
  color: #ccc
  clear: both
  font-size: 1.4em

section
  padding: 40px 60px
  background: #fff
  box-shadow: #e1e1e3 0 0 3px 0
  border-bottom-radius: 3px
  min-height: 440px
  position: relative

// REMOVE FROM THIS STYLESHEET

.notification
  position: absolute
  top: 0
  left: 0
  right: 0
  background: $primaryColor
  background-image: linear-gradient( darken( $primaryColor, 6% ), $primaryColor )
  color: #fff
  font: bold 1.2em $default
  line-height: 1.8em
  width: 100%
  text-align: center
  z-index: 2
  padding: 0 20px
  &.alert
    background: #D80707
    background-image: linear-gradient( darken( #D80707, 6% ), #D80707 )

#questions
  .submit
    display: none

//

footer
  padding: 25px 30px 0
  p
    text-align: right
    font-size: 1.2em
    color: #a7a9aa

//

@media screen and (max-device-width: 1024px), (max-width: 1024px)
  @import "tablet"

@media screen and (max-device-width: 800px), (max-width: 800px)
  @import "mobile"