@import buttons

$contentGrid : 100vw / 12

*
  box-sizing: border-box

body
  margin: 0
  padding: 0

  font-family: 'Muli', sans-serif
  font-size: 16px
  font-weight: 400
  line-height: 24px
  width: 100%
  min-height: 100vh
  background: url('../images/dale_pattern.jpg')
  display: flex
  flex-direction: column
  justify-content: space-between
  align-items: center
  color: rgba(51, 51, 51, 1)

.container
  display: flex
  flex-direction: column
  a
    color: #2889DA
    transition: all ease 0.4s
    &:hover
      color: rgba(51, 51, 51, 1)

  h1
    font-size: 22px
    line-height: 26px

  h2
    color: #216AB1
    font-size: 20px
    line-height: 26px

  width: $contentGrid * 10

  .header
    width: 100%
    display: flex
    align-items: center
    justify-content: space-between

  .login
    border: 0px !important
    text-align: center
    color: white

  .logo
    padding: 50px 0
    width: 300px
    img
      width: 100%

  .main-panel
    margin-bottom: 50px
    padding: 75px
    background: white
    display: flex

    -webkit-box-shadow: 0px 34px 76px -47px rgba(0,0,0,0.50)
    -moz-box-shadow: 0px 34px 76px -47px rgba(0,0,0,0.50)
    box-shadow: 0px 34px 76px -47px rgba(0,0,0,0.50)

    .col-first
      width: $contentGrid * 5
      display: flex
      justify-content: flex-start
      align-items: center
      flex-direction: column
      .content
        width: $contentGrid * 4
        h1
          margin-top: 20px
        p
          margin-top: 20px
          padding: 25px 0
        .profile-picture
          width: 150px
          img
            width: 100%
        .profile-content
          p
            padding: 0

    .col-second
      width: $contentGrid * 1
      display: flex
      justify-content: center
      align-items: center
    .col-third
      width: $contentGrid * 4
      display: flex
      justify-content: flex-start
      align-items: center
      flex-direction: column
      .content
        width: $contentGrid * 3
        h1
          margin-top: 20px
        p
          padding: 25px 0
          margin-top: 20px
        .primary-button
          margin: 20px 0

  .vertical-seperator
    transition: all ease 0.4s
    height: 170px
    img
      height: 100%

.profile
  margin-top: 50px
  display: flex
  align-items: center

  .profile-content
    padding-left: 30px

.footer
  height: 50px
  width: 100%
  background-color: white

  display: flex
  justify-content: center
  align-items: center

  text-align: center


@import responsive