
.hide-on-computer
  display: none

html, body, .row, .side-bar, header
  height: 100%

/* SIDEBAR */
.side-bar
  padding: 0 !important
  header
    overflow-x: hidden
    overflow-y: auto
    width: inherit
    @media (min-width: 601px)
      position: fixed
    .card
      background: inherit
      margin: 0
      .card-image .profile-pic
        width: 100%
    .contact-container, .links-container
      .row
        margin: 15px 0
        .col img
          width: 25px
    .bio-container
      padding: 20px 0
      background: rgba(255, 255, 255, 0.4)
    .skills-container
      padding: 20px 0
      margin-bottom: 20px
      background: rgba(255,255,255,0.25)

/* MAIN CONTENT */
.main-content
  margin: 20px auto
  width: 90%
  p:not(:last-child)
    padding-bottom: 15px
    border-bottom: 1px solid #e2e2e2

.pad
  padding: 1em !important


/* TEXT */
a
  color: #008ece

a:hover
  text-decoration: underline


h1
  background: rgba(0,0,0,0.6)
h2
  font-size: 1.8em
  font-weight: 200
  color: #FFFFFF
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3)
  margin: 0.5em 0  0 1em

h4
  font-weight: 400
  color: #9e9e9e

h5
  margin-bottom: 0


/* OVERIDING STYLES FOR THE PRINTER VERSION*/
@media print
  .hide-on-computer
    display: block

  .main-content
    width: 100%
    margin: 0

  .col
    border-bottom: 1px solid grey

  .pad
    padding: 0 !important

  .side-bar, i
    display: none !important

  p, b, span, a, div, h1, h2, h3, h4, h5, h6
    color: #000000 !important

  b, span
    display: inline

  div
    box-shadow: none !important

  p, span
    font-size: 0.9em
    line-height: 1

  h1
    background: none
    text-align: center
    font-size: 1.8em
    margin: 0
    padding: 0

  h4
    font-size: 1.6em
    margin: 0
    padding: 0

  h5
    font-size: 1.1em
    font-weight: normal
