styles.sass

// http://meyerweb.com/eric/tools/css/reset/
// v2.0 | 20110126
// License: none (public domain)

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
  margin: 0
  padding: 0
  border: 0
  font-size: 100%
  font: inherit
  vertical-align: baseline

// HTML5 display-role reset for older browsers

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
  display: block

body
  line-height: 1

ol, ul
  list-style: none

blockquote, q
  quotes: none

blockquote
  &:before, &:after
    content: ''
    content: none

q
  &:before, &:after
    content: ''
    content: none

table
  border-collapse: collapse
  border-spacing: 0

// END CSS RESET

// BEGIN MY PAGE STYLING

$font-headers-titles: Raleway, Arial, Helvetica, sans-serif
$font-content: Open Sans, Arial, Helvetica, sans-serif

@import word-cloud

nav
  display: flex
  justify-content: space-between
  align-items: center
  height: 115px
  margin-bottom: 35px

#navStandardStyles
  padding: 40px 0
  font-family: $font-headers-titles
  font-size: 1.9rem
  text-transform: uppercase

#page-title-nav
  @extend #navStandardStyles
  padding-left: 6%

#contact-nav
  @extend #navStandardStyles
  font-size: 1.25rem
  padding-right: 6%

h2 > a
  text-decoration: none
  color: #444

  &:hover
    font-size: 103%
    color: #999

.parallax_section
  height: 92vh
  background-repeat: no-repeat
  background-attachment: fixed
  background-size: cover
  background-position: center top
  position: relative
  transform: translateZ(1px) scale(1.08)
  transform-origin: bottom

  // prevents white space from showing above the image when it's ~98%
  // off-screen
.text_on_image, .content_block_wrapper
  display: flex
  justify-content: center
  flex-direction: column

.images
  opacity: 0.7
  max-width: 100%

.text_on_image
  font-size: 5rem
  text-align: center
  font-family: $font-headers-titles
  font-weight: 500
  letter-spacing: 0.5rem

.content_block_wrapper
  padding: 15% 10%
  font-family: $font-content
  line-height: 1.5

.content_block_heading
  text-align: center
  font-weight: 600
  font-size: 2rem
  margin-bottom: 2.5rem

.content_block_content
  font-weight: 400
  letter-spacing: 1.75
  font-family: $font-content
  line-height: 1.5
  text-align: justify
  font-size: 1.5rem

.content_block_content img
  width: 36px
  vertical-align: bottom

#email-and-cloud-wrapper
  display: flex
  justify-content: space-around
  align-items: baseline
  padding: 10% 0

@media only screen and (max-width: 792px)
  .content_block_wrapper
    padding: 20% 5%

  #email-and-cloud-wrapper
    flex-direction: column
    align-items: center
    margin: 15% 5%

  #email-wrapper
    margin-top: 15%

#email-wrapper
  display: flex
  flex-direction: column
  max-width: 350px

#email-wrapper .content_block_content
  font-size: 1.2rem

#email
  margin: 10px auto

.bottom-section-titles
  font-family: $font-headers-titles
  font-size: 2.5rem
  text-align: center
  padding: 10px 0
  color: #333
  margin-bottom: 1rem

#icon-wrapper
  display: flex
  justify-content: space-around
  margin-bottom: 60px
  flex-wrap: wrap

.icon
  max-width: 75px
  padding: 10%

  &:hover
    transform: scale(1.1)

footer
  font-style: italic
  font-family: 'Open Sans', sans-serif
  font-size: 0.9rem
  text-align: center
  padding: 5vh
  color: #111
  background-color: #eee

  > a
    color: #111

.parallax_image_second
  background-image: url("./images/brick_wall_tinyjpg.JPG")
  background-position: center right

.parallax_image_third
  background-image: url("./images/Hagood_sunset_tinyjpg.JPG")
  background-position: 75%

.parallax_image_fourth
  background-image: url("./images/Caesar's_head_tinyjpg.JPG")

.lazyImage
  background-color: grey

// A3-TP4WFB-2763K8-M3ETC-J7QNM-ZYNG3-AAYRA