/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #00449e;
  font-family: neue-haas-grotesk-display,"HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  font-size: 1rem;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #ffa124;
  text-shadow: none;
}

::selection {
  background: #ffa124;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
  font-size: 1rem;
  line-height: 1.25;
}

@media (min-width: 768px) {/*LARGER SCREENS*/
  body {
    font-size: 1.25rem;
    line-height: 1.5;

  }
}

h1, h2 {
  margin: 0;
  padding: 0;
}

b {
  font-weight: 600;
}

a {
  color: #00449e;
}

a:link,
a:visited {
  transition: color .15s ease-in;
  opacity: 1;
  transition: opacity .15s ease-in;
}
a:hover {
  transition: color .15s ease-in;
  opacity: .90;
  transition: opacity .15s ease-in;
}
/*a:active {
  transition: color .15s ease-in;
  opacity: .85;
  transition: opacity .15s ease-in;
}*/
a:focus {
  transition: color .15s ease-in;
  outline: 1px dotted currentColor;
  /*opacity: .85;
  transition: opacity .15s ease-in;*/
}

.logo {
  width: 100%;

  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;

  position: fixed;
  top: 0;
  z-index: 700;
}

/**UNIQUE USE CASE where logo becomes too big due to aspect-ratio (below square)**/
@media (max-width: 768px) and (min-aspect-ratio: 11/10) {
  .logo {
    width: 50%;
  }
}

@media (min-width: 768px) {/*LARGER SCREENS*/
  .logo {
    width: 43%;

    padding-left: 1.5rem;
    padding-right: 2.5rem;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }
}

.main {
  padding: 1rem;
}

@media (min-width: 768px) {/*LARGER SCREENS*/
  .main {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }
}

.info {
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: 500;

  cursor: pointer;
}

.mobile-spacer{
  display: block;
  height: calc(100vw/3);
}

@media (min-width: 768px) { /* or 301 if you want really the same as previously.  */

    .mobile-spacer{
      display: none;
    }

}

.footer{
  height: 100vh;

  padding-left: 1rem;
  padding-right: 1rem;
}

.logotype {
  height: calc( 0.75 * calc( 100vh - calc( calc( 100vw / 3 ) + 2rem )));

  padding-top: calc(calc(100vw/3) + 1rem);
  margin: 0 auto;
  display: block;
}

.toTop {
  margin-top: 1rem;
  text-align: center;
}

.toTop > a > img {
  height: calc( 0.25 * calc( 100vh - calc( calc( 100vw / 3 ) + 2rem )));
}

/**UNIQUE USE CASE where logo becomes too big due to aspect-ratio (below square) PADDING-TOP needs to adjust**/
@media (max-width: 768px) and (min-aspect-ratio: 11/10) {

  .footer {
    position: absolute;
    right: 0;
    margin-bottom: 1.5rem;
  }

  .logotype {
    height: calc( 0.75 * calc( 100vh - calc( calc( 50vw / 3 ) + 2rem )));;

    padding-top: calc( calc(50vw/3) + 1em);
    margin: 0 auto 0 0;
  }

  .toTop {
    text-align: center;
  }

  .toTop > a > img {
    height: calc( 0.25 * calc( 100vh - calc( calc( 50vw / 3 ) + 2rem )));
  }

}

@media (min-width: 768px) { /* LARGER SCREENS  */

    .footer {
      position: absolute;
      right: 0;
      margin-bottom: 2.2rem;
    }
    .column {
    }

    .logotype {
      height: calc(calc(75vh - calc( calc(50vw/3) + 1em)) - 2rem);

      padding-top: calc( calc(50vw/3) + 1em);
    }


    .toTop > a > img {
      height: calc(calc(calc(100vh - calc( calc(50vw/3) + 1em)) - 2rem) * 0.25)
    }
}

/* ==========================================================================
   NO JAVASCRIPT WARNING
   ========================================================================== */

.noJava-warning {
 margin: 1rem;
 padding: 1rem;
 background: rgba(255,0,8,0.75);
 border-radius: 5px;

 position: relative;
 top: 0;
 z-index:2000;

 color: white;
}

@media (min-width: 768px) { /* LARGER SCREENS  */
    .noJava-warning {
        max-width: 400px;
        display: block;
        margin: 1.5rem auto;
        padding: 1.5rem;
    }
}

/* ==========================================================================
   MOBILE ABOUT OVERLAY CLASSES
   ========================================================================== */
.about {
  display: block;
  background-color: rgba(255,255,255,0.95);
  min-height: 100vh;
  width: 100%;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 800;

  overflow: auto;

}

@media (min-width: 768px) { /* LARGER SCREENS  */
    .about {
        display: none;
    }
}

.about-text {
  position: relative;
  font-weight: 500;

  padding-top: calc(100vw/3);
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1.5em;

  max-width: 20em;

  white-space: normal;
  overflow: auto;

}

/**UNIQUE USE CASE where logo becomes too big due to aspect-ratio (below square) PADDING-TOP needs to adjust**/
@media (max-width: 768px) and (min-aspect-ratio: 11/10) {

  .about-text {
    padding-top: calc( calc(50vw/3) + 1em);
  }

}

.about-off {
  display: none;
}

.about-button {
  display: block;

  position: fixed;
  top:0rem;
  right:0.5rem;
  z-index: 801;
}

@media (min-width: 768px) { /* LARGER SCREENS  */
  .about-button {
      display: none;
    }
}

.plus {
  font-size: 6rem;
  font-weight: 400;
  line-height: 1;
  color: #00449e;
  text-decoration: none;
  transition: color .15s ease-in;
}

.plus:link,
.plus:visited {
  transition: color .15s ease-in;
  opacity: 1;
  transition: opacity .15s ease-in;
}
.plus:hover   {
  transition: color .15s ease-in;
  opacity: .90;
  transition: opacity .15s ease-in;
}
/*.plus:active  {
  transition: color .15s ease-in;
  opacity: .85;
  transition: opacity .15s ease-in;
}*/
.plus:focus   {
  transition: color .15s ease-in;
  outline: 1px dotted currentColor;
  /*opacity: .85;
  transition: opacity .15s ease-in;*/
}

.about-button-pressed {
  display: block;

  position: absolute;
  top:0rem;
  right:0.5rem;
  z-index: 801;
}

@media (min-width: 768px) { /* LARGER SCREENS  */
    .about-button-pressed {
      display: none;
    }
}

/* ==========================================================================
   LARGE SCREENS ABOUT OVERLAY CLASSES
   ========================================================================== */

   /*hide the fixed about for mobile*/
   @media (max-width: 767px) {
     .about-fixed {
       display: none;
     }
   }

   @media (min-width: 767px) {
     .about-fixed {
       display: block;

       width: 25vw;
       min-width: 20em;

       margin-left: 1.5rem;
       margin-bottom: 1.5rem;

       position: fixed;
       left: 0;
       bottom:0;

       font-weight: 500;
       font-size: 1.25rem;
       line-height: 1.2;
     }
   }
   /*hide the about slider for mobile*/
   @media (max-width: 767px) {
     .slider {
       display: none;
     }
   }

   /*restrict width of About header on medium screens & float so we can align contact email*/
   @media (min-width: 768px) and (max-width: 1280px) {
     .slider-spacer{ /*spacer to push text below logo*/
       height: 1.5em;
     }

     .slider-about {
       width: 33vw;

       float: left;
     }
   }

   /*set max width of About header on large screens & float so we can align contact email*/
   @media (min-width: 1280px) {
     .slider-spacer{ /*spacer to push text below logo*/
       height: calc( calc(43vw / 3) + 1.5em);
     }

     .slider-about {
       width: 20em;

       float: left;
       margin-right: 1.5em;
     }
   }

   /*Slider classes for non-small screens*/
   @media (min-width: 768px) {
     .slider { /*open slider, obscures whole page*/
       position: fixed;
       z-index: 800;
       width: 100%;
       height: 100%;
       top: 0;
       background-color: rgba(255,255,255,0.95);
       transition: all 1s;

       overflow: auto;

       font-size: 1.875rem;
       line-height: 1.2;

       padding-left: 1em;
       padding-right: 1em;
       padding-bottom: 1.5em;
     }

     .slider.close { /*closed slider, only visible at bottom of page, fixed (inherited)*/
       top: calc(100vh - calc(2.2rem + 1.5vh));
       height: calc(2.2rem + 1.5vh);
       overflow: hidden;
     }

     .slider-spacer.close{
       height: 0;
     }

     .slider-contact { /*padding for contact info span*/
       padding-left: 1.5rem;
     }

     .slider-column {
       float: left;
       max-width: 20em;
       margin-right: 1.5em;
       padding-top: 1em;
     }

     /* Clear floats after the columns */
     .slider-row:after {
       content: "";
       display: table;
       clear: both;
     }
   }

/* ==========================================================================
   PROJECT CLASSES
   ========================================================================== */

   .project {
     text-align: right;
     width: 100%;
   }

   .project-title {
     font-size: 1.5rem;
     line-height: 1.25;
     font-weight: 500;
   }

   .project-category {
     font-size: 1.5rem;
     line-height: 1.25;
     font-weight: 200;
   }

   .project-arrow {
     cursor: pointer;
   }

   .project-arrow:hover {
     transition: color .15s ease-in;
     opacity: .85;
     transition: opacity .15s ease-in;
   }

   .project-text {
     display: none;
   }

   .project-row {
   }

   /* Clear floats after the columns */
   .project-row:after {
     content: "";
     display: table;
     clear: both;
   }

   .project-column {
     float: right;
     padding-top: 1em;
     padding-bottom: 1em;

     text-align: left;

     max-width: 20em;
   }

   .caption {
     text-align: left;
     font-size: .875rem;
     line-height: 1.5;

     font-weight: 500;
   }

   .project-gallery {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     grid-row-gap: 0.8rem;

     margin-bottom: 0.8rem;
   }

   .fit-height {
     /*CANCEL FOR SMALLER SCREENS*/
     width: 100%;
     height: auto;
   }

   .fit-width {
     width: 100%;
     height: auto;
   }

   .start-vert-left {}
   .start-vert-1 {}
   .start-vert-2 {}
   .start-vert-3 {}
   .start-vert-4 {}
   .start-vert-5 {}

   .end-vert-1 {}
   .end-vert-2 {}
   .end-vert-3 {}
   .end-vert-4 {}
   .end-vert-5 {}
   .end-vert-right {}

   .start-hor-top {}
   .start-hor-1 {}
   .start-hor-2 {}
   .start-hor-3 {}
   .start-hor-4 {}
   .start-hor-5 {}
   .start-hor-6 {}
   .start-hor-7 {}
   .start-hor-8 {}
   .start-hor-9 {}
   .start-hor-10 {}
   .start-hor-11 {}
   .start-hor-12 {}

   .end-hor-1 {}
   .end-hor-2 {}
   .end-hor-3 {}
   .end-hor-4 {}
   .end-hor-5 {}
   .end-hor-6 {}
   .end-hor-7 {}
   .end-hor-8 {}
   .end-hor-9 {}
   .end-hor-10 {}
   .end-hor-11 {}
   .end-hor-12 {}
   .end-hor-bottom {}

   .align-top {
   }
   .align-bottom {
   }
   .align-left {
   }
   .align-right {
   }

   /*LARGER SCREENS*/
   @media (min-width: 768px) {

     .project {
       position: relative;
       width: 80%; /*REMINDER: if you change this UPDATE THE GRID ROWS*/
       left: 20%;
     }

     .project-title {
       font-size: 1.875rem;
       line-height: 1.25;
       font-weight: 500;
     }

     .project-category {
       font-size: 1.875rem;
       line-height: 1.25;
       font-weight: 200;
     }

     .project-column {
       max-width: 36vw;
       min-width: 20em;

       padding-left: 1.5em;
       padding-top: 1.5em;
       padding-bottom: 1.5em;
     }

     .project-gallery {
       grid-template-columns: [left] 3fr [col1] 1fr [col2] 2fr [col3] 2fr [col4] 1fr [col5] 3fr [right];
       /*grid-template-rows: [top] calc( calc(90vw - 6.25rem) / 10)
       [row1] calc( calc( calc(90vw - 6.25rem) / 10) - 1.25rem)
       [row2] calc( calc( calc(90vw - 6.25rem) / 10) - 1.25rem)
       [row3] calc( calc(90vw - 6.25rem) / 10)
       [row4] calc( calc( calc(90vw - 6.25rem) / 10) - 1.25rem)
       [row5] calc( calc( calc(90vw - 6.25rem) / 10) - 1.25rem)
       [row6] calc( calc(90vw - 6.25rem) / 10)
       [row7] calc( calc( calc(90vw - 6.25rem) / 10) - 1.25rem)
       [row8] calc( calc( calc(90vw - 6.25rem) / 10) - 1.25rem)
       [row9] calc( calc(90vw - 6.25rem) / 10)
       [row10] calc( calc( calc(90vw - 6.25rem) / 10) - 1.25rem)
       [row11] calc( calc( calc(90vw - 6.25rem) / 10) - 1.25rem)
       [row12] calc( calc(90vw - 6.25rem) / 10) [bottom];*/
       grid-template-rows: [top] calc( calc(90vw - 6.25rem) / 10);
       grid-auto-rows: calc( calc(80vw - 6.25rem) / 10);
       grid-column-gap: 1.25rem;
       grid-row-gap: 1.25rem;

       margin-bottom: 2rem;
     }

     .fit-height {
       height: 100%;
       width: auto;
     }

     .fit-width {
       width: 100%;
       height: auto;
     }

     .start-vert-left {
       grid-column-start: left;
     }
     .start-vert-1 {
       grid-column-start: col1;
     }
     .start-vert-2 {
       grid-column-start: col2;
     }
     .start-vert-3 {
       grid-column-start: col3;
     }
     .start-vert-4 {
       grid-column-start: col4;
     }
     .start-vert-5 {
       grid-column-start: col5;
     }

     .end-vert-1 {
       grid-column-end: col1;
     }
     .end-vert-2 {
       grid-column-end: col2;
     }
     .end-vert-3 {
       grid-column-end: col3;
     }
     .end-vert-4 {
       grid-column-end: col4;
     }
     .end-vert-5 {
       grid-column-end: col5;
     }
     .end-vert-right {
       grid-column-end: right;
     }

     .start-hor-top {
       grid-row-start: 1;
     }
     .start-hor-1 {
       grid-row-start: 2;
     }
     .start-hor-2 {
       grid-row-start: 3;
     }
     .start-hor-3 {
       grid-row-start: 4;
     }
     .start-hor-4 {
       grid-row-start: 5;
     }
     .start-hor-5 {
       grid-row-start: 6;
     }
     .start-hor-6 {
       grid-row-start: 7;
     }
     .start-hor-7 {
       grid-row-start: 8;
     }
     .start-hor-8 {
       grid-row-start: 9;
     }
     .start-hor-9 {
       grid-row-start: 10;
     }
     .start-hor-10 {
       grid-row-start: 11;
     }
     .start-hor-11 {
       grid-row-start: 12;
     }
     .start-hor-12 {
       grid-row-start: 13;
     }

     .end-hor-1 {
       grid-row-end: 2;
     }
     .end-hor-2 {
       grid-row-end: 3;
     }
     .end-hor-3 {
       grid-row-end: 4;
     }
     .end-hor-4 {
       grid-row-end: 5;
     }
     .end-hor-5 {
       grid-row-end: 6;
     }
     .end-hor-6 {
       grid-row-end: 7;
     }
     .end-hor-7 {
       grid-row-end: 8;
     }
     .end-hor-8 {
       grid-row-end: 9;
     }
     .end-hor-9 {
       grid-row-end: 10;
     }
     .end-hor-10 {
       grid-row-end: 11;
     }
     .end-hor-11 {
       grid-row-end: 12;
     }
     .end-hor-12 {
       grid-row-end: 13;
     }
     .end-hor-bottom {
       grid-row-end: 14;
     }

     .align-top {
       align-self: start;
     }
     .align-bottom {
       align-self: end;
     }
     .align-left {
       justify-self: start;
     }
     .align-right {
       justify-self: end;
     }
   }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #00449e !important;
    /* Black prints faster */
    -webkit-box-shadow: none !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) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}