* {
  /*
    This box-sizing rule changes the behavior of the box model
    for the better. Keep it in the stylesheet. It should be default,
    but you know, browsers and their pride...
  */
  box-sizing: border-box;
  /*
    I've set a comprehensive font stack to try and assure maximum
    coverage for available fonts. The 'Source Sans Pro' is the default imported
    above through Google Fonts. This can be updated to another at the top and
    will cascade through the remaining stylesheet
  */
  font-family: "proxima-nova";
}

/*
  This section is primarily resets to assure
  maximum browser compatibility

  Styles begin on line: 84
*/
html {
  color: #222;
  font-size: 1em;
  line-height: 1.8}
body {
  background-image: url(paper.jpg);
  background-repeat: repeat;
  background-color: #FFF;
  font-size: 16px;
  color: rgb(15, 15, 20)};
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none}
::selection {
  background: #b3d4fc;
  text-shadow: none}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0}
audio, canvas, iframe, img, svg, video {
  vertical-align: middle}
fieldset {
  border: 0;
  margin: 0;
  padding: 0}
textarea {
  resize: vertical}
.hidden {
  display: none!important}
@media print {
  *, :after, :before, :first-letter, :first-line {
    background: transparent!important;
    color: #000!important;
    box-shadow: none!important;
    text-shadow: none!important}
  a, a:visited {
    text-decoration: underline}
  a[href]:after {
    content: " (" attr(href) ")"}
  abbr[title]:after {
    content: " (" attr(title) ")"}
  a[href^="#"]:after, a[href^="javascript:"]:after {
    content: ""}
  blockquote, pre {
    border: 1px solid #999;
    page-break-inside: avoid}
  thead {
    display: table-header-group}
  img, tr {
    page-break-inside: avoid}
  img {
    max-width: 100%!important}
  h2, h3, p {
    orphans: 3;
    widows: 3}
  h2, h3 {
    page-break-after: avoid}
}

/* BASE FONT STYLES */
p, ol, ul, li, dd, dt {
  font-size: 1em;
  line-height: 1.8;
}
a {
  color: #0f0f14;
  text-decoration: none
}
a:hover {
  color: #FFFFFF;
}

h1 {
  font-weight: 800;
}

h2 {
  font-weight: 700;
}

b {
  font-weight: 700;
}

/* BEGIN STYLES */
.primary-navigation .nav__wrapper {
  width: calc(80% - 0.6rem);
  margin: 0 auto;
  max-width: 1200px;
}

.primary-navigation .links {
  width: auto;
  display: inline-block;
  margin: 20px 0px 30px 50px;
  font-weight: 700;
  font-size: 1.4em;
}

.primary-navigation .links a {
  display: inline-block;
  margin: 0 3rem;
  padding: 2rem 0 2rem
}

.primary-navigation .space--left a {
  margin-left: 0
}

.primary-navigation .space--right a {
  margin-right: 0
}

/*
  LOGO WIDTH

  These containers (space--left, space--right) are set to 50% of total width minus half the
  width of the logo. If the width of the logo changes, these widths should change as well
  to assure proper spacing.

  Reads as 'width: calc(50% - half the image width)'
*/
.primary-navigation .logo {
  display: inline-block;
  width: 204px;
}

.logo:hover svg {
  fill:hsl(60, 0%, 66%);
}

.white-fill {
  fill: #FFFFFF;
}

/* Main Body Section following Navigation */

.container {
  width: 80%;
  margin: 0 auto;
  max-width: 1200px;
}

.text-col {
  /* Max-wdith of the text column, to be increased/decreased as needed */
  max-width: 1000px;
  margin: 5vh auto
}

.text-col.compressed {
  /* Compressed sections are 'callouts' that aren't headers */
  max-width: 50rem;
}

.text-col p.colum {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

.center {
  text-align: center;
}

.col__wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: auto
}

.col__wrapper>div {
  /* Border size here determines the white-space surrounding the blocks */
  border: .3rem solid rgba(0, 0, 0, 0);
}

.video {
  /* Border size here determines the white-space surrounding the blocks */
  border: .15rem solid rgba(0, 0, 0, 0);
}

.col__wrapper.compressed {
  /* Compressed sections are 'callouts' that aren't headers */
  max-width: 50rem
}

/* Each block is wrapped as a panel, position set to allow overlay */
.panel__wrapper {
  position: relative;
}

.panel__wrapper img {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0
}

.panel__wrapper .panel__overlay {
  /* Background-color of overlay, if change is needed */
  display:none;
  opacity:0;
  background-color: rgba(0,0,0,0.6);

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease
}

.panel__wrapper .panel__overlay .panel__overlay__content {
  position: relative;
  top: 100%;
  text-align: center;

}

.panel__wrapper .panel__overlay .panel__overlay__content p{
  font-size: 3em;
  line-height: 1em;
  font-weight: 700;
}

.panel__wrapper .panel__overlay .panel__overlay__content h1, .panel__wrapper .panel__overlay .panel__overlay__content h2, .panel__wrapper .panel__overlay .panel__overlay__content h3, .panel__wrapper .panel__overlay .panel__overlay__content p {
  margin: 0
}

.panel__wrapper:hover .panel__overlay {
  opacity: 1;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease
}

.panel__wrapper:hover .panel__overlay .panel__overlay__content {
  top: 0;
}

.video iframe, .video img {
  width: 100%;
  height: 100%
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0
}


/*
  COLUMN CONTROLS

  These columns are set here at the default widths
  Flexbox will take care of the spacing issues that usually comes from
  having multi-column layouts. Simply add each to 100% and they will fit
  into the required space.

  One thing I have not included since it will be best set either on a per-page
  basis, or through testing of fonts and font-sizes, and content, is the media queries.

  Media Queries
  If you haven't used these much, they allow you to set the breakdown of the columns as
  needed. All you need to do is the set:

  Container element (col__wrapper) to 'flex-wrap: wrap'
  Then set the .one-col div, .two-col div or .three-col-div to the desired width based
  on the media query

  I set a small one below that allows all columns to be single at 450px viewing width
*/
.one-col div {
  width: 100%
}

.two-col div {
  width: 50%
}

.three-col div {
  width: 33.333333%
}

@media screen and (max-width: 450px) {
  .col__wrapper {
    flex-wrap: wrap;
  }

 .container {
   width: 100%;
 }

 .text-col p.colum {
   -webkit-column-count: 1; /* Chrome, Safari, Opera */
   -moz-column-count: 1; /* Firefox */
   column-count: 1;
 }

  .one-col div {
    width: 100%
  }

  .two-col div {
    width: 100%
  }

  .three-col div {
    width: 100%
  }
}

@media screen and (max-width: 810px) {
  .primary-navigation .links a {
    margin: 0 1rem 0 0;
  }
  .panel__overlay__content {
    font-size: 10px;
  }
}
@media screen and (max-width: 700px) {
  .primary-navigation .logo {
    display: block;
    margin: 2rem auto 0;
  }
  .primary-navigation .links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin: 0 auto;
    width: 100%;
  }
  .primary-navigation .links a {
    -ms-flex-preferred-size: 33.3333%;
        flex-basis: 33.3333%;
    margin: 0 auto;
    text-align: center;
  }
  .primary-navigation .space--left a {
    margin: 0 auto;
  }
}
@media screen and (max-width: 500px) {
  .primary-navigation .links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 1.5rem auto;
  }
  .primary-navigation .links a {
    padding: 0;
  }
}