img {
    width: 100%;
    height: auto;
    line-height: 0;
}

span {
    font-size: 11px;
}

.credits {
    text-decoration: none;
    text-align: left;
    margin-left: 5%;
    margin-top: -3%;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  line-height: 1.5;
  background: #fcfaf8;
}

.wrapper {
  position: relative;
}

@media screen and (min-width: 600px) {
  .grid-overlay {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .grid-overlay .row,
  .grid-overlay [class^="col-"],
  .grid-overlay [class*=" col-"],
  .grid-overlay .well {
    height: 100%;
  }

  .grid-overlay .well {
    background-color: #eff6fc;
  }
}

.example {
  font-size: 11px;
}

.example .row .well {
  background-color: hsla(0, 0%, 92%, 0.6);
  text-align: center;
  padding: 12px 0;
  border: 1px solid #ccc;
}

.example .row .row .well {
  background-color: hsla(0, 0%, 87%, 0.6);
}

/**
 * Fluid grid system
 */

/* 100% width container */
.container {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}

/* Give `.wrapper` a maximum width and center it within its parent*/
.wrapper {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

[class^="col-"],
[class*=" col-"]{
    padding-top: 3%;
}


/* Don’t honor column widths until viewport is at least 600px wide */
@media (min-width: 600px) {
  .row {
    margin-right: -1.333%;
    margin-left: -1.333%;
  }

  [class^="col-"],
  [class*=" col-"]{
    position: relative;
    float: left;
    padding-right: 1.333%;
    padding-left: 1.333%;
    min-height: 1px;
    width: 100%;
  }

  /* Remove space between `.col-*` elements with `.no-gutter` class */
  .row.no-gutter {
    margin-left: 0;
    margin-right: 0;
  }

  .row.no-gutter [class^="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Column widths */
  .col-1  { width: 8.333%;  }
  .col-2  { width: 16.666%; }
  .col-3  { width: 25%;     }
  .col-4  { width: 33.333%; }
  .col-5  { width: 41.666%; }
  .col-6  { width: 50%;     }
  .col-7  { width: 58.333%; }
  .col-8  { width: 66.666%; }
  .col-9  { width: 75%;     }
  .col-10 { width: 83.333%; }
  .col-11 { width: 91.666%; }
  .col-12 { width: 100%;    }

  /* Push & pull */
  .push-1  { left: 8.333%;  }
  .push-2  { left: 16.666%; }
  .push-3  { left: 25%;     }
  .push-4  { left: 33.333%; }
  .push-5  { left: 41.666%; }
  .push-6  { left: 50%;     }
  .push-7  { left: 58.333%; }
  .push-8  { left: 66.666%; }
  .push-9  { left: 75%;     }
  .push-10 { left: 83.333%; }
  .push-11 { left: 91.666%; }
  .push-12 { left: 100%;    }

  .pull-1  { right: 8.333%;  }
  .pull-2  { right: 16.666%; }
  .pull-3  { right: 25%;     }
  .pull-4  { right: 33.333%; }
  .pull-5  { right: 41.666%; }
  .pull-6  { right: 50%;     }
  .pull-7  { right: 58.333%; }
  .pull-8  { right: 66.666%; }
  .pull-9  { right: 75%;     }
  .pull-10 { right: 83.333%; }
  .pull-11 { right: 91.666%; }
  .pull-12 { right: 100%;    }
}

/* Clear floats */
.container:before,
.container:after,
.wrapper:before,
.wrapper:after,
.row:before,
.row:after {
  display: table;
  content: " ";
}

.container:after,
.wrapper:after,
.row:after {
  clear: both;
}


/* NAV */

header {
  overflow: hidden;
  background: #fcfaf8;
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
  border-bottom: 1px #000 dotted;
}

header a, header label {
  display: block;
  padding: 20px 0;
  color: #000;
  text-decoration: none;
  line-height: 20px;
}

header a:hover, header label:hover { color: #8C003A; }

header label {
  float: right;
  padding: 18px 0px;
  cursor: pointer;
}

header label:after {
  content: "\2261";
  font-size: 1.8em;
}

.logo {
  float: left;
  font-size: 1.5em;
}
  
nav {
  float: right;
  max-height: 0;
  width: 100%;
  -webkit-transition: max-height 0.3s; 
     -moz-transition: max-height 0.3s;
       -o-transition: max-height 0.3s;
          transition: max-height 0.3s;
}

nav ul {
  margin: 0;
  padding: 0;
   padding-bottom: 10px;
}
  
nav li {
  display: block;
  text-align: center;
}
  
nav a {
  padding: 10px;
  width: 100%;
}

.last_nav {
  padding-right: 10px;
}

#nav { display: none; }

#nav:checked ~ nav {
  max-height: 200px; /* This can be anything bigger than your nav height. The transition duration works with this */
}

@media only screen and (min-width: 700px) {
  
  header label { display: none; }
  
  nav {
    width: auto;
    max-height: none;
  }
  
  nav ul {
    padding: 0;
  }
  
  nav li {
    display: inline-block;
    text-align: left;
  }
  
  header nav a {
    display: inline-block;
    padding: 20px 10px;
    width: auto;
  }
  
  .last_nav {
    padding-right: 0px;
  }
}

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: #fcfaf8;
    overflow-y: scroll;
    cursor: url(../img/cursor_close.cur);
    cursor: url(../img/cursor_close.png), auto;
    padding: 0;
}

.lightbox a a:hover, a:visited, a:link, a:active {
    text-decoration: none;
}

.close_lightbox {
    text-align: right !important;
    padding: 1% 5%;
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	height: auto;
    padding-top: 5%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}


/* PRELOADER */
.js div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #fcfaf8 url('https://media0.giphy.com/media/xUPGciElNYVE4PKc4o/giphy.webp?cid=790b76114008630fbe5e0366052269f783f1769ba0b4bae3&rid=giphy.webp') no-repeat center center;}