/**
*------------------------------------*
#CONTENTS
*------------------------------------*
*
* SETTINGS
*
* GENERAL
*
* HEADER
*
* MAIN
*
* FOOTER
*/
/*------------------------------------*\
  #SETTINGS
\*------------------------------------*/
/*------------------------------------*\
  #GENERAL
\*------------------------------------*/
body {
  margin: 0;
  font-family: "Open Sans", helvetica, arial, sans-serif;
  text-align: left;
  color: #666;
  width: 100%;
  background: white;
  font-size: 10px; }

p {
  margin: 0; }

a,
a:visited {
  color: #BF2929;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

strong {
  font-weight: 700;
  color: #333; }

ul {
  list-style-type: none;
  display: flex;
  padding: 0; }

.weighted {
  font-weight: 800;
  font-size: 2.2em;
  padding: 0;
  color: #333; }

.accented {
  color: #BF2929; }

.background-container {
  height: auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex; }
  @media only screen and (max-width: 425px) {
    .background-container {
      justify-content: center; } }

.content-container {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  padding: 100px 0 100px 20%;
  width: 100%; }
  @media only screen and (max-width: 425px) {
    .content-container {
      padding: 50px 0;
      max-width: 80%; } }

/*------------------------------------*\
  #HEADER
\*------------------------------------*/
header {
  min-height: 800px;
  background-position: top;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(rgba(255, 255, 255, 0.6), white), url("../assets/images/shenandoah/shenandoah-1200.jpg"); }
  @media only screen and (min-width: 1500px) {
    header {
      background: linear-gradient(rgba(255, 255, 255, 0.6), white), url("../assets/images/shenandoah/shenandoah-3000.jpg");
      min-height: 1300px; } }
  @media only screen and (min-width: 1200px) and (max-width: 1500px) {
    header {
      background: linear-gradient(rgba(255, 255, 255, 0.6), white), url("../assets/images/shenandoah/shenandoah-2400.jpg"); } }
  @media only screen and (min-width: 900px) and (max-width: 1200px) {
    header {
      background: linear-gradient(rgba(255, 255, 255, 0.6), white), url("../assets/images/shenandoah/shenandoah-1800.jpg"); } }
  @media only screen and (min-width: 600px) and (max-width: 900px) {
    header {
      background: linear-gradient(rgba(255, 255, 255, 0.6), white), url("../assets/images/shenandoah/shenandoah-1200.jpg"); } }
  @media only screen and (max-width: 425px) {
    header {
      background: none;
      min-height: 300px; } }

@media only screen and (max-width: 425px) {
  header.background-container {
    flex-direction: column;
    justify-content: center; } }

.mobile-background img {
  display: none; }
  @media only screen and (max-width: 425px) {
    .mobile-background img {
      display: block;
      width: 100%; } }

@media only screen and (max-width: 425px) {
  header .content-container {
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px; } }

header p {
  font-weight: 400;
  font-size: 1.8em;
  margin: 0 0 20px; }

/*------------------------------------*\
  #MAIN
\*------------------------------------*/
main {
  background-position: center;
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (min-width: 1500px) {
    main {
      background: linear-gradient(white, rgba(255, 255, 255, 0.85), white), url("../assets/images/great-falls/great-falls-3000.jpg");
      min-height: 2000px;
      align-items: center; } }
  @media only screen and (min-width: 1200px) and (max-width: 1500px) {
    main {
      background: linear-gradient(white, rgba(255, 255, 255, 0.85), white), url("../assets/images/great-falls/great-falls-2400.jpg"); } }
  @media only screen and (min-width: 900px) and (max-width: 1200px) {
    main {
      background: linear-gradient(white, rgba(255, 255, 255, 0.85), white), url("../assets/images/great-falls/great-falls-1800.jpg"); } }
  @media only screen and (min-width: 600px) and (max-width: 900px) {
    main {
      background: linear-gradient(white, rgba(255, 255, 255, 0.85), white), url("../assets/images/great-falls/great-falls-1200.jpg"); } }
  @media only screen and (max-width: 768px) {
    main {
      background: none !important; } }

main .content-container {
  padding: 0 0 50px 20%;
  display: inline-block;
  width: 100%; }
  @media only screen and (max-width: 425px) {
    main .content-container {
      padding-top: 50px;
      padding-right: 0;
      padding-left: 0;
      max-width: 80%; } }

main p {
  margin: 5px 0 10px; }

main ul {
  /* portfolio list */
  display: block; }

main ul li {
  /* portfolio list item */
  margin-bottom: 50px; }

ul.portfolio-item-type {
  display: flex; }
  ul.portfolio-item-type li {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.2em;
    margin: 0;
    color: #333; }
    ul.portfolio-item-type li:not(:first-child):before {
      content: '/';
      padding: 0 10px 0 0; }

p.portfolio-item-head a {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.8em;
  text-decoration: none;
  position: relative;
  display: inline-block;
  line-height: 1.3em;
  z-index: 2; }
  p.portfolio-item-head a span {
    cursor: pointer;
    width: calc(100%);
    background-image: linear-gradient(transparent calc(100% - 2px), black 10px);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size 1s, color 1s;
    color: #BF2929;
    z-index: 1; }
    p.portfolio-item-head a span:hover {
      cursor: pointer;
      background-size: 100% 100%;
      background-image: linear-gradient(transparent calc(100% - 2px), black 10px); }
  p.portfolio-item-head a:visited {
    color: inherit; }

.portfolio-item-head:hover a::after {
  width: 90%;
  transition: 0.3s ease all; }

p.portfolio-item-sub {
  font-weight: 400;
  font-size: 1.6em;
  margin: 0 0 20px;
  line-height: 1.3em; }

/*------------------------------------*\
  #FOOTER
\*------------------------------------*/
footer {
  min-height: 600px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(white, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("../assets/images/canyonlands/canyonlands-1200.jpg"); }
  @media only screen and (min-width: 1500px) {
    footer {
      background: linear-gradient(white, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("../assets/images/canyonlands/canyonlands-3000.jpg");
      min-height: 800px; } }
  @media only screen and (min-width: 1200px) and (max-width: 1500px) {
    footer {
      background: linear-gradient(white, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("../assets/images/canyonlands/canyonlands-2400.jpg"); } }
  @media only screen and (min-width: 900px) and (max-width: 1200px) {
    footer {
      background: linear-gradient(white, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("../assets/images/canyonlands/canyonlands-1800.jpg"); } }
  @media only screen and (min-width: 600px) and (max-width: 900px) {
    footer {
      background: linear-gradient(white, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("../assets/images/canyonlands/canyonlands-1200.jpg"); } }

@media only screen and (max-width: 768px) {
  footer.background-container {
    background-position: left; } }

footer ul {
  /* social list */
  width: 100%;
  max-width: 360px; }

footer ul li {
  /* each social list item */
  list-style-type: none;
  display: flex;
  flex-direction: row;
  padding: 0; }

/* social icons */
footer ul li svg {
  fill: #666;
  width: 20px;
  margin-right: 30px; }
  footer ul li svg:hover {
    z-index: 2;
    cursor: pointer;
    fill: #BF2929;
    transition: 0.3s ease all; }