// Mobile Grid Fixes
//---------------------------------------------------

// Typography
//---------------------------------------------------

@media only screen and (max-width: 767px)
  h1
    +font-size(32)
    line-height: 1.3
  h2
    +font-size(28)
    line-height: 1.3
  h3
    +font-size(21)
    line-height: 1.3
  h4
    +font-size(18)
    line-height: 1.2
  h5
    +font-size(16)
    line-height: 1.2
  h6
    +font-size(15)
    line-height: 1.2
  body, p
    +font-size(15)
    line-height: 1.4

@media only screen and (max-width: 767px)
  body
    -webkit-text-size-adjust: none
    -ms-text-size-adjust: none
    width: 100%
    min-width: 0
    margin-left: 0
    margin-right: 0
    padding-left: 0
    padding-right: 0
  .container
    min-width: 0
    margin-left: 0
    margin-right: 0
  .row
    width: 100%
    min-width: 0
    margin-left: 0 
    margin-right: 0
  .row .row .column, .row .row .columns
    padding: 0
  .column, .columns
    width: auto !important
    float: none
    margin-left: 0
    margin-right: 0
  .column:last-child, .columns:last-child
    margin-right: 0
  .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered
    margin-left: 0% !important
  .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten
    left: none
  .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten
    right: none
// Mobile 4-column Grid
//----------------------------------------------------------------------------------------------------
.row
  .phone-one.column:first-child, .phone-two.column:first-child, .phone-three.column:first-child, .phone-four.column:first-child, .phone-one.columns:first-child, .phone-two.columns:first-child, .phone-three.columns:first-child, .phone-four.columns:first-child
    margin-left: 0
  .phone-one.column, .phone-two.column, .phone-three.column, .phone-four.column, .phone-one.columns, .phone-two.columns, .phone-three.columns, .phone-four.columns
    margin-left: 4.4%
    float: left
    min-height: 1px
    position: relative
    padding: 0
  .phone-one.columns
    width: 21.68% !important
  .phone-two.columns
    width: 47.8% !important
  .phone-three.columns
    width: 73.9% !important
  .phone-four.columns
    width: 100% !important
    
  .columns.push-one-phone
    left: 26.08%
  .columns.push-two-phone
    left: 52.2%
  .columns.push-three-phone
    left: 78.3%

  .columns.pull-one-phone
    right: 26.08%
  .columns.pull-two-phone
    right: 52.2%
  .columns.pull-three-phone
    right: 78.3%
// Block Grid
//----------------------------------------------------------------------------------------------------
@media only screen and (max-width: 767px)
  .block-grid.mobile
    margin-left: 0%
    &>li
      float: none
      width: 100%
      margin-left: 0%

// Mobile Visibility Affordances
//----------------------------------------------------------------------------------------------------
.show-on-phones
  display: none !important
.show-on-tablets
  display: none !important
.show-on-desktops
  display: block !important

.hide-on-phones
  display: block !important
.hide-on-tablets
  display: block !important
.hide-on-desktops
  display: none !important

@media only screen and (max-device-width: 800), only screen and (device-width: 1024px) and (device-width: 600), only screen and (width: 1280) and (orientation: landscape), only screen and (device-width: 800)
  .hide-on-phones
    display: block !important
  .hide-on-tablets
    display: none !important
  .hide-on-desktops
    display: block !important
  
  .show-on-phones
    display: none !important
  .show-on-tablets
    display: block !important
  .show-on-desktops
    display: none !important

// Modernizr-enabled tablet targeting
//-------------------------------------------------

@media only screen and (max-width: 1280px) and (min-width: 768px)
  .touch
    .hide-on-phones
      display: block !important
    .hide-on-tablets
      display: none !important
    .hide-on-desktops
      display: block !important
    .show-on-phones
      display: none !important
    .show-on-tablets
      display: block !important
    .show-on-desktops
      display: none !important
  
@media only screen and (max-width: 767px)
  .hide-on-phones
    display: none !important
  .hide-on-tablets
    display: block !important
  .hide-on-desktops
    display: block !important
  
  .show-on-phones
    display: block !important
  .show-on-tablets
    display: none !important
  .show-on-desktops
    display: none !important 

// Specific overrides
//----------------------------------------------------------------------------------------------------

//
// For elements that require something other than display: block
//

table
  &.show-on-desktops
    display: table !important
  &.hide-on-phones
    display: table !important
  &.hide-on-tablets
    display: table !important
    
@media only screen and (max-device-width: 800), only screen and (device-width: 1024px) and (device-height: 600), only screen and (width: 1280) and (orientation: landscape), only screen and (device-width: 800)
  table
    &.hide-on-phones
      display: block !important
    &.hide-on-desktops
      display: block !important
    &.show-on-tablets
      display: block !important

@media only screen and (max-width: 767px)
  table
    &.hide-on-tablets
      display: block !important
    &.hide-on-desktops
      display: block !important
    &.show-on-phones
      display: block !important

// Forms
//----------------------------------------------------------------------------------------------------

@media only screen and (max-width: 767px)
  input.input-text, input.input-text.oversize, textarea, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea
    display: block
    width: 96%
    padding: 6px 2% 4px
    +font-size(18)
  form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea
    +border-radius(2px)
  form.nice small.error
    padding: 6px 2%
    display: block
  form.nice .small+.error, form.nice .medium+.error, form.nice .large+.error
    width: auto

// Buttons
//----------------------------------------------------------------------------------------------------

@media only screen and (max-width: 767px)
  .button
    display: block
  button.button
    width: 100%
    padding-left: 0
    padding-right: 0
    
// Tabs
//----------------------------------------------------------------------------------------------------

@media only screen and (max-width: 767px)
  dl.tabs.mobile, dl.nice.tabs.mobile
    width: auto
    margin: 20px -20px 40px
    height: auto
  dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd
    float: none
    height: auto
  
  dl.tabs.mobile dd a
    display: block 
    width: auto
    height: auto
    padding: 18px 20px
    line-height: 1
    border: solid 0 #ccc
    border-width: 1px 0 0
    margin: 0
    color: #555
    background: #eee
    +font-size(15)
  dl.tabs.mobile dd a.active
    height: auto
    margin: 0
    border-width: 1px 0 0
  
  .nice.tabs.mobile
    border-bottom: solid 1px #ccc
    height: auto
  .nice.tabs.mobile dd a
    padding: 18px 20px
    border: none
    border-left: none
    border-right: none
    border-top: solid 1px #ccc
    background: #fff
    &.active
      border: none
      background: #00a6fc
      color: #fff
      margin: 0
      position: static
      top: 0
      height: auto
  .nice.tabs.mobile dd:first-child a.active
    margin-bottom: 0
  
  dl.contained.mobile, dl.nice.contained.mobile
    margin-bottom: 0
  dl.contained.tabs.mobile dd a
    padding: 18px 20px
  dl.nice.contained.tabs.mobile dd a
    padding: 18px 20px

  // Nav Bar with Dropdowns
  .nav-bar
    height: auto
    & > li
      float: none
      display: block
      border-right: none
      & > a.main
        text-align: left
        border-top: 1px solid #ddd
        border-right: none
      &.has-flyout
        & > a.main
          &:after
            display: none
        a.flyout-toggle
          position: absolute
          right: 0
          top: 0
          padding: 22px
          z-index: 2
          border-left: 1px dashed #eee
          display: block
          span
            content: ""
            width: 0
            height: 0
            border: 4px solid
            border-color: #2a85e8 transparent transparent transparent
            display: block
          &:hover
            span
              border-top-color: #141414
      &:first-child
        & > a.main
          border-top: none
      &:hover
        & > a.main
          font-weight: bold
        ul
          position: relative
  .flyout
    position: relative
    width: auto
    top: auto
    margin-right: -2px
    border-width: 1px 1px 0px 1px
    &.right
      float: none
      right: auto
      left: -1px
    &.small, &.large
      width: auto
    p.last-child
      margin-bottom: 18px
  .nav-bar>li:hover .flyout
    display: none
  
// Video
//----------------------------------------------------------------------------------------------------

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px)
  .video
    padding-top: 0