@import "../_constants/_mixins.sass"

// bootstrap override



@include maxWidthResponsive(1920px)
  .row
    margin: 0

@include minWidthResponsive(1921px)
  .row
    margin: 0

// max-width

@include maxWidthResponsive(867px)
  .header__select-icon
    display: none
  .main__fetcherror
    width: 800px
  .main__pic_image
    width: 70%
  .main__step_pic
    width: 400px
  .footer__block_socialbuttons
    display: inline
    margin-bottom: 2px

@include maxWidthResponsive(780px)
  .header__nav
    margin-right: 0
  .main__pic
    display: none
  .main__header, .main__subheader
    line-height: 45px

  .footer__block_socialbuttons
    display: inline
    margin-bottom: 2px
  .footer__title, .footer__link, .footer__text
    font-size: 15px


@include maxWidthResponsive(475px)
  .header__nav
    margin-right: 0
  .main__articles_article
    width: 445px
  .main__header
    font-size: 30px
  .main__subheader
    font-size: 90%
    text-align: center
  .main__description
    margin-top: 20px
  .main__step_pic
    display: none
  .main__useful_title
    font-size: 32px
    margin-top: 15px
  .footer__title, .footer__link, .footer__text
    font-size: 15px

@include maxWidthResponsive(412px) // phone
  .row // bootstrap override
    margin: 0
  .header__logo
    margin-bottom: 15px
  .header__nav
    display: block
  .main__fetcherror
    width: 400px
  .main__articles_article
    width: 365px
  .main__passwordsecure
    margin-left: 5px
  .footer__title, .footer__link, .footer__text
    font-size: 12px

@include maxWidthResponsive(370px)
  .header__nav
    margin-right: 0
  .header__search_wrapper
    width: 430px
  .header__search_input
    width: 390px
  .main__useful_title
    font-size: 32px
    margin-top: 15px
    line-height: 30px
  .main__step
    margin-left: 40px
  .footer__title, .footer__link
    font-size: 15px
