/* Copyright (c) 2020 Jamie Rogers
----------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Reset for HTML 5 Elements
----------------------------------------------------------------------------------------------------*/

/* tells browsers that don't read html 5 tags to render like divs */
header, footer, aside, nav, article, section {
	display: block;
	margin: 0;
	padding: 0;
}

/* clears containers with floated elements, no need for extra markup! */
.clear:after {
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Type
----------------------------------------------------------------------------------------------------*/

html, body {
    height: 100vh;
    width: 100vw;
}

body {
	font-size: 1.75vw;
	color: #6F4006;
	font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
}

/* font size - ex-small width */
@media only screen and (max-width: 400px) {
    body {
       font-size: 5vw;
    }
}

/* font size - small width */
@media only screen and (min-width: 401px) and (max-width: 600px) {
    body {
       font-size: 3.5vw;
    }
}

/* font size - medium+ width */
@media only screen and (min-width: 601px) and (max-width: 750px) {
    body {
       font-size: 2.75vw;
    }
}

/* font size - medium+ width */
@media only screen and (min-width: 751px) and (max-width: 900px) {
    body {
       font-size: 2.5vw;
    }
}

/* font size - small height width */
@media only screen and (max-height: 500px) {
  body {
     font-size: 4vw;
  }
}

h1 {
	font-size: 1.5em;
  font-style: italic;
}

h2 {
  font-size: 1.2em;
  font-style: italic;
  padding-left: 7vw;
  line-height: 1.3em;
}

h3 {
  font-size: 1.5em;
  font-style: italic;
  color: #176128;
  text-align: center;
}

p {
	font-size: 1em;
	line-height: 1.3em;
	text-align: left;
}

ul {
	list-style: disc;
	color: #6F4006;
	font-size: 1.0em;
	font-weight: normal;
	line-height: 1.3em;
}

ol, ol.lowerRoman, ol.upperAlpha {
	list-style: decimal;
	color: #FFF;
	font-size: 1.0em;
	font-weight: normal;
	line-height: 1.3em;
}

ol.lowerRoman {
	list-style: lower-roman;
}

ol.upperAlpha {
	list-style: upper-alpha;
}

strong {
	font-weight: bold;
	color: red;
}

a {
	color: #0A673F;
	text-decoration: none;
    font-style: italic;
}

a:hover {
	color: #FFFFFF;
    text-shadow: 0px 5px 10px #000000;
}

a:active {
	color: #FFF;
}

.more {
	text-decoration: underline !important;
}

/* Spacing
----------------------------------------------------------------------------------------------------*/

hr {
	clear: both;
	border: 1px dashed brown;
	margin-right: 5%;
  margin-left: 5%;
}

p {
	padding: 1vh;
}

i {
	font-size: 0.9em;
	font-style: italic;
}

ul, ol {
	margin-left: 1.5vw;
	padding-left: 0;
}

li {
	margin-bottom: 1vh;
	margin-left: 1vw;
}

/* small screen width */
@media only screen and (max-width: 400px) {
    ul, ol {
	   margin-left: 5vw;
    }

    li {
	   margin-left: 2vw;
    }
}

/* medium screen width */
@media only screen and (min-width: 401px) and (max-width: 600px){
    ul, ol {
	   margin-left: 4vw;
    }
}

/* Connect content - medium+ screen width */
@media only screen and (min-width: 601px) and (max-width: 725px){
    ul, ol {
	   margin-left: 3vw;
    }
}

/* Connect content - medium+ screen width */
@media only screen and (min-width: 726px) and (max-width: 900px){
    ul, ol {
	   margin-left: 2vw;
    }
}

p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
	margin-bottom: 1vh;
}

/* Layout
----------------------------------------------------------------------------------------------------*/

/* title placement/size - landscape */
header {
    margin-top: 1vh;
    margin-left: 1vh;
}

header:hover {
    filter: drop-shadow(0px 0px 2px #d1bbfa) drop-shadow(0px 0px 10px #64F5F1);
    -webkit-filter: drop-shadow(0px 0px 2px #d1bbfa) drop-shadow(0px 0px 10px #64F5F1); 
}

#titleSize {
  width: 75vw;
}

/* title size - small landscape */
@media only screen and (max-width: 400px) {
    #titleSize {
       width: 50vw;
    }
}

/* title size - large portrait */
@media only screen and (min-width: 600px) {
    #titleSize {
         width: 55vw; 
    }
}

#main {
  position: absolute;
	background: #000000 url(../images/PathwayPortrait.jpg) no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.Expand {
  display: block;
  background-color: rgba(182, 254, 223, .9);
  opacity: 80%;
  margin: 1vh 8vw;
  padding: 0vh 3vw;
  border: 1vw ridge #6f4006;
  border-radius: 15px;
  -webkit-border-radius: 15px;
}

.image1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 8vh;
}

@media only screen and (max-width: 500px) {

}

.inspire {
  display: none;
}

.meaning {
  display: none;
}

.life {
  display: none;
}

.transform {
  display: none;
}

.hawk {
  display: none;
}

.connect {
  display: none;
}

.eagle {
  display: none;
}

.underHeart {
  display: none;
}

.heart {
  display: none;
}

.resoundingPresence {
  display: none;
}

.art {
  display: none;
}

.video {
  display: none;
}

.book {
  display: none;
}

.bottomCopy {
  position: absolute;
  right: 0vw;
  bottom: 0vh;
  font-size: 2vh;
  color: #64F5F1;
}