/*
A submission for Shane Howell's Grid System Project
	My Name is: Tiffany Hudgins
	My Design is titled: 1350 Grid System
	1350 Grid System is based on the original 960 Grid System.
	Learn more ~ http://960.gs/
	Licensed under GPL and MIT.
*/

/* 	CSS CITATIONS */
/* The 960 Grid System code, on which my 1350 Grid System is based, Nathan Smith's 960 Grid System.*/

/* The  "Single Div CSS Book Search" animation code by Lynn Fisher is used under a MIT License. The code can be found on codepen.io.  */
			
/* 	FONT CITATIONS */
/*  The fonts used on this site are hosted by Google Fonts. */

/* All licenses can be found in "Licenses" folder in the "Root" directory.*/

header {
  width: 100vw;
  height: 450px;
  min-height: 350px;
  margin: 0;
  position: relative;
  background-color: #111;
  background-image: linear-gradient(to top, #222 5%, #111 6%, #111 7%, transparent 7%), linear-gradient(to bottom, #111 30%, transparent 30%), linear-gradient(to right, #222, #2e2e2e 5%, transparent 5%), linear-gradient(to right, transparent 6%, #222 6%, #2e2e2e 9%, transparent 9%), linear-gradient(to right, transparent 27%, #222 27%, #2e2e2e 34%, transparent 34%), linear-gradient(to right, transparent 51%, #222 51%, #2e2e2e 57%, transparent 57%), linear-gradient(to bottom, #111 35%, transparent 35%), linear-gradient(to right, transparent 42%, #222 42%, #2e2e2e 44%, transparent 44%), linear-gradient(to right, transparent 45%, #222 45%, #2e2e2e 47%, transparent 47%), linear-gradient(to right, transparent 48%, #222 48%, #2e2e2e 50%, transparent 50%), linear-gradient(to right, transparent 87%, #222 87%, #2e2e2e 91%, transparent 91%), linear-gradient(to bottom, #111 37.5%, transparent 37.5%), linear-gradient(to right, transparent 14%, #222 14%, #2e2e2e 20%, transparent 20%), linear-gradient(to bottom, #111 40%, transparent 40%), linear-gradient(to right, transparent 10%, #222 10%, #2e2e2e 13%, transparent 13%), linear-gradient(to right, transparent 21%, #222 21%, #1a1a1a 25%, transparent 25%), linear-gradient(to right, transparent 58%, #222 58%, #2e2e2e 64%, transparent 64%), linear-gradient(to right, transparent 92%, #222 92%, #2e2e2e 95%, transparent 95%), linear-gradient(to bottom, #111 48%, transparent 48%), linear-gradient(to right, transparent 96%, #222 96%, #1a1a1a 99%, transparent 99%), linear-gradient(to bottom, transparent 68.5%, transparent 76%, #111 76%, #111 77.5%, transparent 77.5%, transparent 86%, #111 86%, #111 87.5%, transparent 87.5%), linear-gradient(to right, transparent 35%, #222 35%, #2e2e2e 41%, transparent 41%), linear-gradient(to bottom, #111 68%, transparent 68%), linear-gradient(to right, transparent 78%, #333 78%, #333 80%, transparent 80%, transparent 82%, #333 82%, #333 83%, transparent 83%), linear-gradient(to right, transparent 66%, #222 66%, #2e2e2e 85%, transparent 85%);
  background-size: 300px 150px;
  background-position: center bottom;
}
header:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #111;
  background-image: linear-gradient(to top, #d2b48c 5%, #111 6%, #111 7%, transparent 7%), linear-gradient(to bottom, #111 30%, transparent 30%), linear-gradient(to right, #b22222, #871a1a 5%, transparent 5%), linear-gradient(to right, transparent 6%, #ff6347 6%, #ff3814 9%, transparent 9%), linear-gradient(to right, transparent 27%, #556b2f 27%, #39481f 34%, transparent 34%), linear-gradient(to right, transparent 51%, #fa8072 51%, #f85441 57%, transparent 57%), linear-gradient(to bottom, #111 35%, transparent 35%), linear-gradient(to right, transparent 42%, #008080 42%, #004d4d 44%, transparent 44%), linear-gradient(to right, transparent 45%, #008080 45%, #004d4d 47%, transparent 47%), linear-gradient(to right, transparent 48%, #008080 48%, #004d4d 50%, transparent 50%), linear-gradient(to right, transparent 87%, #789 87%, #4f5d6a 91%, transparent 91%), linear-gradient(to bottom, #111 37.5%, transparent 37.5%), linear-gradient(to right, transparent 14%, #bdb76b 14%, #989244 20%, transparent 20%), linear-gradient(to bottom, #111 40%, transparent 40%), linear-gradient(to right, transparent 10%, #808000 10%, #4d4d00 13%, transparent 13%), linear-gradient(to right, transparent 21%, #8b4513 21%, #5e2f0d 25%, transparent 25%), linear-gradient(to right, transparent 58%, #8b4513 58%, #5e2f0d 64%, transparent 64%), linear-gradient(to right, transparent 92%, #2f4f4f 92%, #1c2f2f 95%, transparent 95%), linear-gradient(to bottom, #111 48%, transparent 48%), linear-gradient(to right, transparent 96%, #2f4f4f 96%, #1c2f2f 99%, transparent 99%), linear-gradient(to bottom, transparent 68.5%, transparent 76%, #111 76%, #111 77.5%, transparent 77.5%, transparent 86%, #111 86%, #111 87.5%, transparent 87.5%), linear-gradient(to right, transparent 35%, #cd5c5c 35%, #bc3a3a 41%, transparent 41%), linear-gradient(to bottom, #111 68%, transparent 68%), linear-gradient(to right, transparent 78%, #bc8f8f 78%, #bc8f8f 80%, transparent 80%, transparent 82%, #bc8f8f 82%, #bc8f8f 83%, transparent 83%), linear-gradient(to right, transparent 66%, #a52a2a 66%, #7c2020 85%, transparent 85%);
  background-size: 300px 150px;
  background-position: center bottom;
  clip-path: circle(150px at center center);
  animation: flashlight 5000ms infinite;
}
header:after {
  content: '';
  width: 25px;
  height: 10px;
  position: absolute;
  left: calc(50% + 59px);
  bottom: 100px;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #fff 50%, transparent 50%), radial-gradient(circle, #fff 50%, transparent 50%);
  background-size: 10px 10px;
  background-position: left center, right center;
  animation: eyes 5000ms infinite;
}
@-moz-keyframes flashlight {
  0%, 9% {
    opacity: 0;
    clip-path: circle(150px at 45% 10%);
  }
  10%, 15%, 85% {
    opacity: 1;
  }
  50% {
    clip-path: circle(150px at 60% 20%);
  }
  54%, 100% {
    clip-path: circle(150px at 55% 92%);
  }
  88%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes flashlight {
  0%, 9% {
    opacity: 0;
    clip-path: circle(150px at 45% 10%);
  }
  10%, 15%, 85% {
    opacity: 1;
  }
  50% {
    clip-path: circle(150px at 60% 20%);
  }
  54%, 100% {
    clip-path: circle(150px at 55% 92%);
  }
  88%, 100% {
    opacity: 0;
  }
}
@-o-keyframes flashlight {
  0%, 9% {
    opacity: 0;
    clip-path: circle(150px at 45% 10%);
  }
  10%, 15%, 85% {
    opacity: 1;
  }
  50% {
    clip-path: circle(150px at 60% 20%);
  }
  54%, 100% {
    clip-path: circle(150px at 55% 92%);
  }
  88%, 100% {
    opacity: 0;
  }
}
@keyframes flashlight {
  0%, 9% {
    opacity: 0;
    clip-path: circle(150px at 45% 10%);
  }
  10%, 15%, 85% {
    opacity: 1;
  }
  50% {
    clip-path: circle(150px at 60% 20%);
  }
  54%, 100% {
    clip-path: circle(150px at 55% 92%);
  }
  88%, 100% {
    opacity: 0;
  }
}
@-moz-keyframes eyes {
  0%, 52% {
    opacity: 0;
  }
  53%, 87% {
    opacity: 1;
  }
  64% {
    transform: scaleY(1);
  }
  67% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1);
  }
  88%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes eyes {
  0%, 52% {
    opacity: 0;
  }
  53%, 87% {
    opacity: 1;
  }
  64% {
    transform: scaleY(1);
  }
  67% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1);
  }
  88%, 100% {
    opacity: 0;
  }
}
@-o-keyframes eyes {
  0%, 52% {
    opacity: 0;
  }
  53%, 87% {
    opacity: 1;
  }
  64% {
    transform: scaleY(1);
  }
  67% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1);
  }
  88%, 100% {
    opacity: 0;
  }
}
@keyframes eyes {
  0%, 52% {
    opacity: 0;
  }
  53%, 87% {
    opacity: 1;
  }
  64% {
    transform: scaleY(1);
  }
  67% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1);
  }
  88%, 100% {
    opacity: 0;
  }
}
@media (min-width: 1366px) {
.container_15 {
	padding-bottom: 50px;
    background-image: url("../img/background_tile_wide.gif");
    background-repeat: repeat;
    background-position: center top;
    background-clip: border-box;
  }
}
  @media (max-width: 1365px) {
  .container_15 {
    padding-bottom: 50px;
	background-image: url("../img/background_tile_narrow.gif");
    background-repeat: repeat;
    background-position: 2px 0px;
    background-clip: border-box;
  }
}
nav {
  background-color: rgba(248, 106, 90, .8);
  ;
  padding: 28px 0;
  margin-top: -285px;
  z-index: 1000;
  position: relative;
  border-radius: 20px;
}
nav ul {
  list-style: none;
  text-align: center;
  padding: 8px 0 15px 0;
}
nav ul li {
  display: inline-block;
  font-family: 'Abril Fatface', serif;
  font-size: 22pt;
  text-align: center;
}
nav a {
  color: rgba(69, 79, 115, 1.00);
  text-decoration: none;
}
nav a:hover {
  color: rgba(163, 183, 204, 1.00);
  text-decoration: underline;
}
nav p a:visited {
  color: rgba(130, 130, 130, 1.00);
  text-decoration: none;
}
h1 {
  margin: 94px 0 0;
  height: 50px;
  background-color: #111;
  padding-top: 45px;
  color: rgba(249, 126, 112, 1.00);
  font-family: 'Abril Fatface', serif;
  font-size: 38pt;
  text-align: center;
}
h2 {
  padding: 15px 30px;
  color: rgba(249, 126, 112, 1.00);
  font-family: 'Playfair Display', serif;
  font-size: 18pt;
  font-weight: 400;
  text-decoration: underline
}
div {
  margin-top: 65px;
  background-color: rgba(0, 0, 0, .6);
  padding: 30px;
  border-radius: 20px;
}
article p {
  box-sizing: border-box;
  padding-bottom: 15px;
  color: rgba(248, 106, 90, 1.00);
  font-family: 'Playfair Display', serif;
  font-size: 16pt;
  font-weight: 200;
  line-height: 25px;
}
article p a {
  color: rgba(105, 133, 57, 1.00);
}
article p a:hover {
  color: rgba(160, 190, 107, 1.00);
  text-decoration: none;
}
article p a:visited {
  color: rgba(130, 130, 130, 1.00);
}
button {
  display: block;
  background-color: rgba(248, 106, 90, .8);
  margin-top: 25px;
  height: 100px;
  border-radius: 6px;
  box-shadow: 0;
  transition:
    background 3s, height 3s, border-radius 2s, box-shadow 4s, margin-top 3s;
}
button:hover {
  background-color: rgba(248, 106, 90, 1.0);
  color: rgba(163, 183, 204, 1.00);
  font-size: 38pt;
  margin-top: 0;
  height: 150px;
  border-radius: 50px;
  box-shadow: 0 0 50px rgba(215, 40, 40, 1.00);
}
button a {
  font-family: 'Abril Fatface', serif;
  font-size: 30pt;
  color: rgba(64, 89, 115, 1.00);
	transition:
		color 3s, font-size 3s;
}
button a:hover {
  color: rgba(163, 183, 204, 1.00);
  font-size: 38pt;
}

.download {
  height: 400px;
}

.aifabshadowroot {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}