* {
	margin: 0;
	padding: 0;
	border: 0;
}
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
    display:block;
}
header {
	background-image: url('images/demogorgon_header.jpg');
	background-size: cover;
	height: 250px;
	margin-top: 30px;
	margin-bottom: 30px;
	background-color: white;
	color: black;
	text-align: center;
}
#index_body {
	background: #d5d1a7;
	background-image: url('images/wallpaper.jpg');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
body.transform {
  transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
}
.history {
	background: white;
	text-align: center;
}
.history_nav {
	margin-top: 25px;
}
.history_h {
	margin-top: 0;
	margin-bottom: 35px;
}
.element {
	padding-bottom: 30px;
}
.history_stranger {
	margin-top: 30px;
}
.h_border {
	border-top: #8fbaa9 4px solid;
	padding-top: 5px;
}	
.top_border {
	border-top: #808080 4px solid;
	padding-top: 5px;
}
.realm {
	border-top: #8fbaa9 4px solid;
	padding-top: 5px;
	margin-top: 35px;	
}
.relationships {
	border-top: #808080 4px solid;
	padding-top: 5px;
	margin-top: 35px;
}
figcaption {
	font-family: 'Open Sans', sans-serif;
	padding-bottom: 20px;
}	
@font-face {
	font-family:'KGLifeisMessy';
	src: url('./fonts/KGLifeisMessy.ttf') format('truetype');
}
h1 {
	padding-top: 40px;
	font-family: 'KGLifeisMessy';
	color: #d5d1a7;
	margin: 3%;
	font-size: 2.5rem;
}
.sightings_h1 {
	font-family: 'KGLifeisMessy';
}
.sightings_rounded {
	width: 100%; 
	max-width: 550px;
	margin-top: 11px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}	
#sightings_body {
	background: #d5d1a7;
	background-image: url('images/sightings_background.jpg');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	overflow-y: hidden;
}
#sightings_container {
	max-width: 1340px;
	margin: auto;
}
#img:hover {
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	transform-style: preserve-3d;
	transition: 1s ease-in-out;
}
h2 {
	color: #d5d1a7;
	font-size: 1.5rem;
	font-family: 'Open Sans', sans-serif;
}
a:link, a:visited {
	color: white;
	text-decoration: none;
}	

nav ul li a:link, nav ul li a:visited {
	color: black;
	text-decoration: none;
}
a:hover, a:active {
	color: #808080;
}
nav ul li a:hover, nav ul li a:active {
	color: #d5d1a7;
	text-decoration: none;
}
nav {
	font-size: 1.1rem;
}
ul {
	text-align: center;
}
li {
	background-color: #808080;
	font-family: 'Open Sans', sans-serif;
	padding: 2%;
	margin: 2%;
	text-align: center;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	width: 30%;
}
section {
	margin-top: 25px;
	text-align: center;
}
article {
	text-align: center;
	margin: 25px 2%;
}
h3 {
	font-family: 'KGLifeisMessy';
	font-size: 1.5rem;
}
h3::first-letter {
    font-size: 1.8rem;
}
p {
	font-family: 'Open Sans', sans-serif;
	margin: 2%;
	padding: 2%;
}
.gray_background_fill {
	background-color: #808080;
}
.green_background_fill {
	background-color: #8fbaa9;
}
footer {
	background-color: #000000;
	color: #ffffff;
	padding-bottom: 25px;
}
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.Site-content {
  flex: 1;
}
figure {
	padding-top: 15px;
}
#footer_top {
	display: flex;
	justify-content: center;
}
#footer_bottom {
	display: flex;
	justify-content: center;
}
.sources_borders {
	border-top: white solid 4px;
	border-bottom: white solid 4px;
	width: 20%;
	margin: auto;
	padding: 8px;
}
.btn {
	background: #80a798;
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	font-size: 1rem;
	padding: 9px;
	width: 15%;
	margin: auto;
	margin-top: 30px;
}
button {
	background: #80a798;
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	font-size: 1rem;
	padding: 9px;
	width: 22%;
	margin-bottom: 25px;
}
#say_hi {
	color: #ffffff;
	font-size: 1.3rem;
	text-align: center;
	margin: 10px 0 10px 0;
	padding: none;
}

/* ----------- Sightings article images ------------ */
.article_container {
	position: relative;
  	width: 100%;
}
.article_image {
  	display: block;
  	width: 100%;
	max-width: 550px;
}
.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #808080;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.article_container:hover .overlay {
	opacity: 1;
}
.text {
	font-family: 'Open Sans', sans-serif;
  	color: #0f2e60;
  	font-size: 1rem;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	text-align: center;
}

/* ----------- END Sightings article images ------------ */

/* ----------- Text FILL effect ------ */
.title {
	letter-spacing: 3px;
}
h1 {
	background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
	background-size: cover;
	color: transparent;
	-moz-background-clip: text;
	-webkit-background-clip: text;
	text-transform: uppercase;
	line-height: 1;
	margin: 10px 0;
}
/* ----------- END Text FILL effect --- */

/* ----------- Browser bar ----------- */
html, body {
  overflow-x: hidden;
}
.full-width-bar {
  margin: 0 -9999rem;
  padding: 0.25rem 9999rem;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
}

/* ----------- END Browser bar -------- */

/* ----------- Nav BOB  ------------- */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}
/* ------- END nav BOB -------- */

/* -------- Christmas Lights ------------------ */
.strand{
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	margin: -15px 0 0 0;
	padding: 0;
	pointer-events: none;
	width: 100%;
}
.strand li{
	position: relative;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	width: 12px;
	height: 28px;
	border-radius: 50%;
	margin: 20px;
	display: inline-block;
	background:#f02241;
	box-shadow: 0px 4.66667px 24px 3px #f02241;
	-webkit-animation-name: flash-1;
	animation-name: flash-1;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}
.strand li:nth-child(2n+1){
	background: #42b261;
	box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.5);
	-webkit-animation-name: flash-2;
	animation-name: flash-2;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}
.strand li:nth-child(4n+2){
	background: #f9fbee;
	box-shadow: 0px 4.66667px 24px 3px #f9fbee;
	-webkit-animation-name: flash-3;
	animation-name: flash-3;
	-webkit-animation-duration: 1.1s;
	animation-duration: 1.1s;
}
.strand li:nth-child(odd){
	-webkit-animation-duration: 1.8s;
	animation-duration: 1.8s;
}
.strand li:nth-child(3n+1){
	-webkit-animation: 1.4s;
	animation-duration: 1.4s;
}
.strand li:before{
	content: "";
	position: absolute;
	background: #222;
	width: 10px;
	height: 9.33333px;
	border-radius: 3px;
	top: -4.66667px;
	left: 1px;
}
.strand li:after{
	content: "";
	top: -14px;
	left: 9px;
	position: absolute;
	width: 52px;
	height: 18.66667px;
	border-bottom: solid #222 2px;
	border-radius: 50%;
}
.strand li:last-child:after{
	content: none;
}
.strand li:first-child{
	margin-left: 40px;
}
@-webkit-keyframes flash-1{
	0%, 100%{
		background: #f02241;
		box-shadow: 0px 4.66667px 24px 3px #f02241;
	}
	50%{
		background: rgba(240, 34, 65, 0.4);
		box-shadow: 0px 4.66667px 24px 3px rgba(240, 35, 65, .02);
	}
}
@keyframes flash-1{
	0%,
  100% {
    background: #f02241;
    box-shadow: 0px 4.66667px 24px 3px #f02241;
  }
  50% {
    background: rgba(240, 34, 65, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(240, 35, 65, 0.2);
  }
}
@-webkit-keyframes flash-2{
	0,
	100%{
		background: #42b261;
		box-shadow: 0px 4.66667px 24px 3px #42b261;
	}
	50%{
		background: rgba(66, 178, 97, 0.4);
		box-shadow: 0px 4.6667px 24px 3px rgba(66, 178, 97, 0.2);
	}
}
@keyframes flash-2{
	0%,
  100% {
    background: #42b261;
    box-shadow: 0px 4.66667px 24px 3px #42b261;
  }
  50% {
    background: rgba(66, 178, 97, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(66, 178, 97, 0.2);
  }
}
@-webkit-keyframes flash-3{
	0%,
	100%{
		background: #f9fbee;
		box-shadow: 0px 4.6667px 24px 3px #f9fbee;
	}
	50%{
		background: rgba(249, 251, 238, .4);
		box-shadow: 0px 4.66667px 24px 3px rgba(249, 251, 238, .2);
	}
	@keyframes flash-3{
		0%,
  100% {
    background: #F9FBEE;
    box-shadow: 0px 4.66667px 24px 3px #F9FBEE;
  }
  50% {
    background: rgba(249, 251, 238, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(249, 251, 238, 0.2);
  }
	}
}
/*------------ END Christmas Lights ------------- */

.right {
	float: right;
}

/* ------------ Sparkle on SITINGS -------------- */
.sparkle{
width:20px;
height:20px;
position:relative;
margin:20%;
background:url(http://i.imgur.com/2T5M8.png?1);
 -webkit-animation:
 	sparkle .5s infinite steps(1),
 	movetop 2.5s infinite steps(1),
 	moveleft 3.5s infinite steps(1)	 
}
@keyframes sparkle {
  0%, 100%{background-position:0px 0}
  20%{background-position:20px 0}
  40%{background-position:40px 0}  
  60%{background-position:60px 0}
  80%{background-position:80px 0}
}
@keyframes movetop {
  0%, 100%{top:0;}
  20%{top:75px;} 
  40%{top:30px;}  
  60%{top:100px;}
  80%{top:10px}
}
@keyframes moveleft {
  0%, 100%{left:50px}
  14.28%{ left:10px}
  28.57%{ left:90px}  
  42.85%{ left:35px}
  57.14%{ left:20px}
  71.42%{ left:60px}
  85.71%{ left:80px}
}
/* ------------------ END Sparkle --------------------- */

/* ------- Media 460px -------- */
@media (min-width: 460px) {
  header {
	background-image: url('images/demogorgon_header.jpg');
	background-size: cover;
	height: 350px;
	}
  article {
	width: 450px;
  	display: inline-block;
  	}
  main {
	text-align: center;
	}
}
/* ----- END Media 460px ------ */

/* ------- Media 560px -------- */
@media (min-width: 560px) {
  li {
	width: 20%;
	}
}
/* ----- END Media 560px ------ */

/* ------- Media 615px -------- */
@media (min-width: 615px) {
  li {
	width: 20%;
	padding: 1% .3%;
	margin: 1%;
	}
}
/* ----- END Media 615px ------ */

/* ------- Media 670px -------- */
@media (min-width: 670px) {
  h1 {
  	font-size: 4.5rem;
  }
}
/* ----- END Media 670px ------ */

/* ----- Media 700px ---------- */
@media (min-width: 700px) {
	.demogorgon_left_text {
	float: left;
	margin-left: 6.5%;
	margin-top: 2%;
	}
}
/* ------- Shape Text Wrapping ---------------------- */
.green_background_fill {
	text-align: justify;
}
.floated{
	float:left;
	width:100px;
	height:200px;
	margin-top: 300px;
	margin-left: 3%;
	/*background-color: DarkTurquoise;*/

	-webkit-clip-path: polygon(0 11%, 100% 50%, 4% 100%, 64% 47%);
	clip-path: polygon(0 11%, 100% 50%, 4% 100%, 64% 47%);

	-webkit-shape-outside: polygon(0 11%, 100% 50%, 4% 100%, 64% 47%);
	shape-outside: polygon(0 11%, 100% 50%, 4% 100%, 64% 47%);
} 
/* ------------ END Shape Text Wrapping ------------- */

/* ------ END Media 700px -------- */

/* ------- Media 790px -------- */
@media (min-width: 790px) {
  li {
	width: 15%;
	padding: 1% .1%;
	}	
}
/* ----- END Media 790px ------ */

/* ------- Media 1000px -------- */
@media (min-width: 1000px) {
  li {
	width: 13%;
	padding: 1% 0%;
	}
	button {
		width: 15%;
	}
}
/* ----- END Media 1000px ------ */