/* 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;
    }
}

/* h1, h2, h3, h4, h5, h6 {
	font: 1.9em/1em
}*/

h1 {
    padding-top: .3em;
	font-size: 1em;
    font-style: italic;
}

h2 {
	font-size: 1em;
    filter: drop-shadow(0px 1px 1px #C09C5E);
    -webkit-filter: drop-shadow(0px 1px 1px #C09C5E);
}

h3 {
	font-size: 2em;
	font-weight: bold;
	font-style: italic;
}

h4 {
	color: #BFF5FC;
	font-size: 2.5em;
	font-weight: bold;
}

h5 {
	padding-top: .5em;
	font-size: 1.1em;
	font-weight: bold;
    font-style: italic;
}

h6 {
	font-size: 1em;
	font-weight: normal;
}

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-color: #0a675e;
	margin-right: 11%;
}

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 - F */
header {
    margin-top: 2vh;
    margin-left: 2vh;
}

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: 41vw;
}

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

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

@keyframes open {
	0% {font-size: 5vh;}
    40% {font-size: 10vh;}
    80% {font-size: 5vh;}
    100% {font-size: 0vh;}
}

@-webkit-keyframes open {
	0% {font-size: 5vh;}
    40% {font-size: 10vh;}
    80% {font-size: 5vh;}
    100% {font-size: 0vh;}
}

@-moz-keyframes open {
	0% {font-size: 5vh;}
    40% {font-size: 10vh;}
    80% {font-size: 5vh;}
    100% {font-size: 0vh;}
}

@-o-keyframes open {
	0% {font-size: 5vh;}
    40% {font-size: 10vh;}
    80% {font-size: 5vh;}
    100% {font-size: 0vh;}
}

@keyframes pulse {
	0% {opacity: 0.3;}
    10% {opacity: 0.6;transform: scale(1.1);}
    20% {opacity: 0.8;}
    30% {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 0;}
    60% {opacity: 0;}
    70% {opacity: 0;}
    80% {opacity: 0;}
    80% {opacity: 0;}
    100% {opacity: 0}
}

@-webkit-keyframes pulse {
	0% {opacity: 0.3;}
    10% {opacity: 0.6;transform: scale(1.1);}
    20% {opacity: 0.8;}
    30% {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 0;}
    60% {opacity: 0;}
    70% {opacity: 0;}
    80% {opacity: 0;}
    80% {opacity: 0;}
    100% {opacity: 0}
}

@-moz-keyframes pulse {
	0% {opacity: 0.3;}
    10% {opacity: 0.6;transform: scale(1.1);}
    20% {opacity: 0.8;}
    30% {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 0;}
    60% {opacity: 0;}
    70% {opacity: 0;}
    80% {opacity: 0;}
    80% {opacity: 0;}
    100% {opacity: 0}
}

@-o-keyframes pulse {
	0% {opacity: 0.3;}
    10% {opacity: 0.6;transform: scale(1.1);}
    20% {opacity: 0.8;}
    30% {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 0;}
    60% {opacity: 0;}
    70% {opacity: 0;}
    80% {opacity: 0;}
    80% {opacity: 0;}
    100% {opacity: 0}
}

@keyframes breeze {
	0% {opacity: 0.5;}
    50% {opacity: 0.9;}
    100% {opacity: 0.5;}
}

@-webkit-keyframes breeze {
	0% {opacity: 0.5;}
    50% {opacity: 0.9;}
    100% {opacity: 0.5;}
}

@-moz-keyframes breeze {
	0% {opacity: 0.5;}
    50% {opacity: 0.9;}
    100% {opacity: 0.5;}
}

@-o-keyframes breeze {
    0% {opacity: 0.5;}
    50% {opacity: 0.9;}
    100% {opacity: 0.5;}
}

@keyframes heartPulse {
	0% { 
        filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
    }
    50% { 
        filter: saturate(2) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(2) drop-shadow(1px 0px 0px #6F4006);
    }
    100% { 
        filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
    }
}

@-webkit-keyframes heartPulse {
	0% { 
        filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
    }
    50% { 
        filter: saturate(2) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(2) drop-shadow(1px 0px 0px #6F4006);
    }
    100% { 
        filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
    }
}

@-moz-keyframes heartPulse {
	0% { 
        filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
    }
    50% { 
        filter: saturate(2) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(2) drop-shadow(1px 0px 0px #6F4006);
    }
    100% { 
        filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
    }
}

@-o-keyframes heartPulse {
	0% { 
        filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
    }
    50% { 
        filter: saturate(2) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(2) drop-shadow(1px 0px 0px #6F4006);
    }
    100% { 
        filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
        -webkit-filter: saturate(1) drop-shadow(1px 0px 0px #6F4006);
    }
}

.Expand {
    display: none;
}

.imgFrameLeft {
    float: left;
	margin-right: 2vw;
    margin-bottom: 2vw;
    border-radius: 4vw 3vw 4vw 3vw;
    -webkit-border-radius: 4vw 3vw 4vw 3vw;
}

.imgFrameRight {
    float: right;
    margin-right: 2vw;
	margin-left: 2vw;
    margin-bottom: 2vw;
    border-radius: 4vw 3vw 4vw 3vw;
    -webkit-border-radius: 4vw 3vw 4vw 3vw;
}

.subList {
    list-style-type: circle;
}

.centerText {
    text-align: center;
}

/* Opening message */
.openingMessage1 {
    position: absolute;
    top: 30vh;
    left: 20vw;
    font-size: 0vh;
    font-style: italic;
    color: #4c1d13;
    text-shadow: 3px 2px #fcf7e2;
    filter: drop-shadow(1px 1px 3px #fdeda5);
    -webkit-filter:  drop-shadow(1px 1px 3px #fdeda5);
    animation: open 2s ease-in 1;
	-webkit-animation: open 2s ease-in 1;
	-moz-animation: open 2s ease-in 1;
	-o-animation: open 2s ease-in 1;
    z-index: 1;
}

/* Opening message */
.openingMessage2 {
    position: absolute;
    bottom: 20vh;
    right: 20vw;
    font-size: 0vh;
    font-style: italic;
    color: #4c1d13;
    text-shadow: 3px 2px #fcf7e2;
    filter: drop-shadow(1px 1px 3px #fdeda5);
    -webkit-filter:  drop-shadow(1px 1px 3px #fdeda5);
    animation: open 2s ease-in 1s 1;
	-webkit-animation: open 2s ease-in 1s 1;
	-moz-animation: open 2s ease-in 1s 1;
	-o-animation: open 2s ease-in 1s 1;
    z-index: 1;
}

/* Opening message */
.openingMessage3 {
    position: absolute;
    top: 30vh;
    right: 42vw;
    font-size: 0vh;
    font-style: italic;
    color: #4c1d13;
    text-shadow: 3px 2px #fcf7e2;
    filter: drop-shadow(1px 1px 3px #fdeda5);
    -webkit-filter:  drop-shadow(1px 1px 3px #fdeda5);
    animation: open 2s ease-in 2s 1;
	-webkit-animation: open 2s ease-in 2s 1;
	-moz-animation: open 2s ease-in 2s 1;
	-o-animation: open 2s ease-in 2s 1;
    z-index: 1;
}

/* Inspire label - Landscape */
.direction {
    position: absolute;
    top: 19vh;
    left: 25vw;
	font-size: 3vw;
    font-style: italic;
    color: #FFF1F1;
    text-shadow: 3px 2px #000000;
    filter: drop-shadow(1px 1px 3px #614A3D);
    -webkit-filter:  drop-shadow(1px 1px 3px #614A3D);
    animation: breeze 15s ease-out infinite alternate;
	-webkit-animation: breeze 10s ease-out infinite alternate;
	-moz-animation: breeze 10s ease-out infinite alternate;
	-o-animation: breeze 10s ease-out infinite alternate;
}

/* Meaning label - Landscape */
.meaning {
    position: absolute;
    bottom: 47vh;
    right: 11vw;
	font-size: 3vw;
    font-style: italic;
    color: #FFF1F1;
    text-shadow: 3px 2px #000000;
    filter: drop-shadow(1px 1px 3px #614A3D);
    -webkit-filter:  drop-shadow(1px 1px 3px #614A3D);
    animation: breeze 15s ease-out infinite alternate;
	-webkit-animation: breeze 10s ease-out -5s infinite alternate;
	-moz-animation: breeze 10s ease-out -5s infinite alternate;
	-o-animation: breeze 10s ease-out -5s infinite alternate;
}

/* Transform label - Landscape */
.empowerment {
    position: absolute;
    bottom: 13vh;
    left: 3vw;
	font-size: 3vw;
    font-style: italic;
    color: #FFF1F1;
    text-shadow: 3px 2px #000000;
    filter: drop-shadow(1px 1px 3px #614A3D);
    -webkit-filter:  drop-shadow(1px 1px 3px #614A3D);
    animation: breeze 15s ease-out infinite alternate;
	-webkit-animation: breeze 10s ease-out -10s infinite alternate;
	-moz-animation: breeze 10s ease-out -10s infinite alternate;
	-o-animation: breeze 10s ease-out -10s infinite alternate;
}

/* Word labels - small landscape */
@media only screen and (max-width: 400px) {
    .inspire, .meaning, .transform {
        font-size: 4.5vw;
    }
}

/* Hawk size/placement landscape*/
#sizeHawk {
    width: 32vh;
}

.hawk label {
    position: absolute;
    cursor: pointer;
    top: 15vh;
    left: 4vh;
    filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
    -webkit-filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
}

.hawk:hover label {
    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); 
}

/* Hawk thought placement landscape*/
.hawkSpeak {
    display: block;
    position: absolute;
    list-style: none;
    overflow: hidden;
    max-height: 0;
    left: 19vh;
    top: 18vh;
}

/* Hawk thought bubble landscape*/
.hawkSpeak p {
    padding-top: 2.5vh;
    padding-bottom: 2vh;
    width: 13vw;
    background: rgba(184, 255, 203, .7);
    border-radius: 50%;
    text-align: center;
    font-size: 3vh;
    font-family: fantasy;
    color: #014012;
}

/* Don't display the check box */
#hawk-toggle {
   display: none;
}

/* Display hawk thought */
#hawk-toggle:checked + .hawkSpeak {
    max-height: 14.5vh;
}

/* Hawk speak - Landscape - low/mid ratio */
@media only screen and (max-aspect-ratio: 170/100) {
     .hawkSpeak p {
        width: 20vh;
    }
}

/* Hawk placement - Landscape - high ratio */
@media only screen and (min-aspect-ratio: 2/1) {
    #sizeHawk {
        width: 42vh;
    }
    .hawkSpeak {
        left: 24vh;
        top: 20vh;
    }
     .hawkSpeak p {
        width: 30vh;
        font-size: 4vh;
        padding-top: 3vh;
        padding-bottom: 2.5vh;
    }
    #hawk-toggle:checked + .hawkSpeak {
        max-height: 17vh;
    }
}

/* Connect size/placement landscape */
#sizeConnect {
    height: 14vh;
}

.connect label {
    position: absolute;
    cursor: pointer;
    right: 10vw;
    top: 9vh;
    filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
    -webkit-filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
    z-index: 2;
}

.connect:hover label {
    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); 
}

/* Connect Window Placement */
.connectDisplay {
    position: absolute;
    overflow: scroll;
    max-height: 0;
    width: 52vw;
    top: 13vh;
    right: 13vw;
    border-style: outset;
    border-color: #6F4006;
    border-width: 2px;
	background: rgba(182, 254, 223, .9);
    border-radius: 5vw 2vw 2vw 2vw;
    -webkit-border-radius: 5vw 2vw 2vw 2vw;
    z-index: 2;
}

/* Connect window close image placement */
.connectDisplay div label {
    position: fixed;
    right: 14vw;
    top: 15vh;
    filter: drop-shadow(1px 0px 0px #6F4006);
    -webkit-filter: drop-shadow(1px 0px 0px #6F4006);
}

/* Connect window content placement */
.connectContent {
     padding: 5%;
}

/* Don't display the check box */
#connect-toggle {
    display: none;
}

/* Close connection window */
#connect-toggle:not(:checked) + .connectDisplay {
    display: none;
}

/* Display connection window */
#connect-toggle:checked + .connectDisplay {
    max-height: 70vh;
}

/* Connect content attributes */
#social {
    width: 4vw;
    padding-right: 2vw;
    padding-left: 1vw;
}

.imgSelf {
    float: left;
    margin-right: 2.5vw;
    width: 18vw;
    border-radius: 3vw 3vw 3vw 3vw;
    -webkit-border-radius: 3vw 3vw 3vw 3vw;
}

.imgCedarPathways {
    width: 45vw;
    border-style: solid;
    border-width: 0.5vw;
    border-radius: 3vw 3vw 3vw 3vw;
    -webkit-border-radius: 3vw 3vw 3vw 3vw;
}

/* Connect label - small landscape */
@media only screen and (max-width: 500px) {
    .connect label {
        right: 7vh;
        top: 8vh;
    }
}

/* Connect label - tablet landscape */
@media only screen and (min-aspect-ratio: 130/100) and (max-aspect-ratio: 150/100) {
    .connect label {
        right: 8vh;
        top: 8vh;
    }
    .connectDisplay div label {
        right: 15vw;
        top: 15vh;
    }
}

/* Connect content - small landscape */
@media only screen and (max-width: 400px) {
    .connectDisplay {
        width: 90vw;
        top: 10vh;
        left: 5vw;
        border-radius: 8vw 3vw 3vw 3vw;
        -webkit-border-radius: 8vw 3vw 3vw 3vw;
    }
    .connectDisplay div label {
        right: 7vw;
        top: 15vh;
    }
    #connect-toggle:checked + .connectDisplay {
        max-height: 80vh;
    }
    .connectContent {
        padding-top: 0%;
    }
    .imgSelf {
        width: 61vw;
        margin: 10vw 10vw 10vw 10vw;
    }
    #social {
        width: 17vw;
        padding: 4vw;
    }
    .imgCedarPathways {
        width: 79vw;
        margin: 0;
    }
}

/* Connect content - medium screen width */
@media only screen and (min-width: 401px) and (max-width: 600px){
    .connectDisplay {
        width: 90vw;
        top: 10vh;
        left: 5vw;
        border-radius: 8vw 3vw 3vw 3vw;
        -webkit-border-radius: 8vw 3vw 3vw 3vw;
    }
    .connectDisplay div label {
        right: 7vw;
        top: 14vh;
    }
    .imgSelf {
        width: 27vw;
    }
    .imgCedarPathways {
        width: 80vw;
    }
    #social {
        width: 8vw;
    }
}

/* Connect content - medium+ screen width */
@media only screen and (min-width: 601px) and (max-width: 900px){
    .connectDisplay div label {
        top: 16vh;
        right: 7vw;
    }
    .connectDisplay {
        width: 75vw;
        left: 19vw;
    }
    .connectContent {
        padding-top: 5%;
    }
    .imgSelf {
        width: 26vw;
        margin: 0vw 3vw 0 0;
    }
    .imgCedarPathways {
        width: 66vw;
    }
    #social {
        width: 6vw;
    }
}

/* Eagle size */
#sizeEagle {
    width: 32vh;
}

/* Eagle image placement - landscape */
.eagle label {
    position: absolute;
    cursor: pointer;
    top: 7vh;
    right: 49vh;
    filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
    -webkit-filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
    z-index: 1;
}

.eagle:hover label {
    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); 
}

/* Eagle thought placement - landscape */
.eagleSpeak {
    display: block;
    list-style: none;
    position: absolute;
    overflow: hidden;
    max-height: 0;
    right: 66vh;
    top: 18vh;
    z-index: 1;
}

/* Eagle thought display large bubble*/
.eagleSpeak p {
    padding-top: 3vh;
    width: 11vw;
    background: rgba(184, 255, 203, .7);
    border-radius: 50%;
    text-align: center;
    font-size: 3vh;
    font-family: fantasy;
    color: #014012;
}

/* Don't display the check box */
#eagle-toggle {
   display: none;
}

/* Display eagle thought */
#eagle-toggle:checked + .eagleSpeak {
    max-height: 13vh;
}

/* Eagle speak - Landscape - low ratio */
@media only screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 130/100) {
    .eagle label {
        top: 6vw;
        right: 17vh;
    }
    .eagleSpeak {
        top: 17vw;
        right: 35vh;
    }
    .eagleSpeak p {
        width: 20vh;
    }
}

/* Eagle speak - Landscape - mid ratio */
@media only screen and (min-aspect-ratio:131/100) and (max-aspect-ratio: 140/100) {
    .eagle label {
        top: 6vw;
        right: 25vh;
    }
    .eagleSpeak {
        top: 14vw;
        right: 42vh;
    }
    .eagleSpeak p {
        width: 19vh;
    }
}

/* Eagle speak - Landscape - mid ratio */
@media only screen and (min-aspect-ratio:141/100) and (max-aspect-ratio: 171/100) {
    .eagle label {
        top: 5vw;
        right: 36vh;
    }
    .eagleSpeak {
        top: 12vw;
        right: 53vh;
    }
    .eagleSpeak p {
        width: 20vh;
    }
}

/* Eagle speak - Landscape - mid ratio */
@media only screen and (min-aspect-ratio:172/100) and (max-aspect-ratio: 180/100) {
    .eagle label {
        top: 4vw;
        right: 40vh;
    }
    .eagleSpeak {
        top: 10vw;
        right: 57vh;
    }
    .eagleSpeak p {
        width: 20vh;
    }
}

/* Eagle placement - Landscape - high ratio */
@media only screen and (min-aspect-ratio: 2/1) {
    #sizeEagle {
        width: 40vh;
    }
    *.eagle label {
        top: 1vw;
        right: 48vh;
    }
    .eagleSpeak {
        top: 17vh;
        right: 70vh;
    }
     .eagleSpeak p {
        width: 28vh;
        font-size: 4vh;
    }
    #eagle-toggle:checked + .eagleSpeak {
        max-height: 17vh;
    }
}

/* Heart size */
#sizeHeart {
    height: 14vh;
}

.underHeart {
    position: absolute;
    top: 43vh;
    right: 51vw;
    filter: drop-shadow(0px 0px 5px #FFFFFF) drop-shadow(0px 0px 7px #46E371);
    -webkit-filter: drop-shadow(0px 0px 5px #FFFFFF) drop-shadow(0px 0px 7px #46E371);
}

/* Heart placement landscape */
.heart label {
    position: absolute;
    cursor: pointer;
    top: 43vh;
    right: 51vw;
    animation: heartPulse 1.5s infinite alternate;
	-webkit-animation: heartPulse 1.5s infinite alternate;
	-moz-animation: heartPulse 1.5s infinite alternate;
	-o-animation: heartPulse 1.5s infinite alternate;
}

.heart:hover label {
    animation: heartPulse 0s;
	-webkit-animation: heartPulse 0s;
	-moz-animation: heartPulse 0s;
	-o-animation: heartPulse 0s;
    filter: drop-shadow(0px 0px 5px #d1bbfa) drop-shadow(0px 0px 10px #64F5F1);
    -webkit-filter: drop-shadow(0px 0px 5px #d1bbfa) drop-shadow(0px 0px 10px #64F5F1); 
}

/* Heart Window Placement */
.heartDisplay {
    position: absolute;
    overflow: scroll;
	max-height: 0;
    width: 65vw;
    top: 17vh;
    right: 18vw;
    border-style: outset;
    border-color: #6F4006;
    border-width: 2px;
	background: rgba(182, 254, 223, .9);
    border-radius: 55px 15px 15px 15px;
    -webkit-border-radius: 55px 15px 15px 15px;
    z-index: 3;
}

/* Heart window close image placement */
.heartDisplay div label {
    position: fixed;
    right: 19vw;
    top: 19vh;
}

/* heart content placement */
.heartContent {
    padding: 2% 6% 3% 2.5%;
}

/* Don't display the check box */
#heart-toggle {
    display: none;
}

/* Close heart window */
#heart-toggle:not(:checked) + .heartDisplay {
    display: none;
}

/* Display heart window */
#heart-toggle:checked + .heartDisplay {
    max-height: 70vh;
}

.imgArtTherapy {
    float: right;
    margin: 0vw 1vw 3vw 2vw;
    width: 22vw;
    border-radius: 3vw 3vw 3vw 3vw;
    -webkit-border-radius: 3vw 3vw 3vw 3vw;
}

.imgBodyMap {
    float: left;
    margin: 2vw 4.5vw 4vw 0vw;
    width: 24vw;
    border-radius: 3vw 3vw 3vw 3vw;
    -webkit-border-radius: 3vw 3vw 3vw 3vw;
}

.imgResoundingLife {
    float: right;
    margin: 1vw 1vw 1vw 2vw;
    width: 25vw;
    border-radius: 3vw 3vw 3vw 3vw;
    -webkit-border-radius: 3vw 3vw 3vw 3vw;
}

.imgCedarLayers {
    float: right;
    margin-right: 13vw;
    width: 18vw;
    border-radius: 3vw 3vw 3vw 3vw;
    -webkit-border-radius: 3vw 3vw 3vw 3vw;
}

.poem {
    margin-left: 16%;
    color: #8D5817;
}

.heartListDisplay {
    display:inline-block;
}

.heartSubList {
    list-style-type: circle;
    margin-top: 2vw;
}

/* Body Map image - small landscape */
@media only screen and (max-width: 400px) {
    .imgArtTherapy {
        width: 29vw;
    }  
    .imgBodyMap {
        margin: 1vw 10vw 1vw 0vw;
        width: 24vw;
    }
    .imgResoundingLife {
        width: 30vw;
    }
    .heartSubList {
        margin-top: 1vw;
    }
    .poem {
        margin-left: 12%;
    }
    .imgCedarLayers {
        width: 40vw;
        margin-right: 0vw;
        margin-top: -6vw;
    }
}

/* Body Map image - small landscape */
@media only screen and (min-width: 401px) and (max-width: 600px) {
    .imgArtTherapy {
        width: 26vw;
    }  
    .imgBodyMap {
        margin: 1vw 6vw 0vw 0vw;
        width: 20vw;
    }
    .imgResoundingLife {
        width: 29vw;
    }  
    .heartSubList {
        margin-top: 1vw;
    }
}

/* Body Map image - small landscape */
@media only screen and (min-width: 601px) and (max-width: 900px) {
    .imgBodyMap {
        margin: 0vw 6vw 0vw 0vw;
    }
    .heartSubList {
        margin-top: 1vw;
    }
}

/* Body Map image - small landscape */
@media only screen and (min-width: 901px) and (max-width: 950px) {
    .imgBodyMap {
        margin: -3vw 5vw 0vw 0vw;
    }
}

/* Body Map image - small landscape */
@media only screen and (min-width: 951px) and (max-width: 1000px) {
    .imgBodyMap {
        margin: -2vw 5vw 0vw 0vw;
    }
}

/* Body Map image - small landscape */
@media only screen and (min-width: 1000px) and (max-aspect-ratio: 150/100){
    .imgBodyMap {
        margin: -0.5vw 4vw 0vw 0vw;
    }
}

/* Heart label - small landscape */
@media only screen and (max-width: 350px) {
    .heart label {
        top: 42vh;
        right: 49vw;
    }
    .underHeart {
        top: 42vh;
        right: 49vw;
    }
}

/* Heart content - small screen width */
@media only screen and (max-width: 400px) {
    .heartDisplay div label {
        top: 21vh;
        right: 7vw;
    }
    .heartDisplay {
        width: 90vw;
        left: 5vw;
        border-radius: 8vw 3vw 3vw 3vw;
        -webkit-border-radius: 8vw 3vw 3vw 3vw;
    }
    .heartContent {
        padding: 4% 15% 5% 5%;
    }
}

/* Heart content - medium screen width */
@media only screen and (min-width: 401px) and (max-width: 600px){
    .heartDisplay {
        width: 83vw;
        right: 11vw;
    }
    .heartDisplay div label {
        top: 20vh;
        right: 13vw;
    }
    .heartContent {
        padding: 3% 8% 4% 4%;
    }
    .imgCedarLayers {
        width: 30vw;
    }
}

/* Heart content - medium+ screen width */
@media only screen and (min-width: 601px) and (max-width: 900px){
    .heartDisplay {
        width: 73vw;
        top: 19vh;
        right: 11vw;
    }
    .heartDisplay div label {
        top: 23vh;
        right: 13vw;
    }
    .heartContent {
        padding: 3% 8% 5% 5%;
    }
    .imgCedarLayers {
        width: 25vw;
    }
}

/* Heart content - medium+ screen width */
@media only screen and (min-width: 901px) and (max-width: 950px){
    .heartDisplay {
        width: 73vw;
        top: 19vh;
        right: 11vw;
    }
    .heartDisplay div label {
        top: 23vh;
        right: 13vw;
    }
    .heartContent {
        padding: 3% 7% 5% 4%;
    }
    .imgCedarLayers {
        width: 25vw;
    }
}

/* Art size */
#sizeArt {
    height: 30vh;
}

/* Art image placement */
.art label {
    position: absolute;
    cursor: pointer;
    right: 32vw;
    bottom: 17vh;
    filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
    -webkit-filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
}

.art:hover label {
    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); 
}

/* Art Note Placement */
.artNote {
    position: absolute;
    overflow: scroll;
    max-height: 0;
    width: 25vw;
    left: 40vw;
    bottom: 9vh;
    border-style: outset;
    border-color: #6F4006;
    border-width: 2px;
    background: rgba(153, 244, 250, .9);
    border-radius: 55px 15px 15px 15px;
    -webkit-border-radius: 55px 15px 15px 15px;
    z-index: 5;
}

/* "X" Placement */
.artNote label {
    filter: drop-shadow(1px 0px 0px #6F4006);
    -webkit-filter: drop-shadow(1px 0px 0px #6F4006);
    right: 1vw;
    top: 2vh;
    float: right;
}

.artNote p {
    margin: 5% 14% 2% 8%;
}

/* Don't display the check box */
#art-toggle {
    display: none;
}

/* Don't display the check box */
#art-toggle:not(:checked) + .artNote {
   display: none;
}

/* Display Art Window */
#art-toggle:checked + .artNote {
    max-height: 50vh;
}

/* Art label - small landscape */
@media only screen and (max-width: 350px) {
    .art label {
        right: 27vw;
        bottom: 14vh; 
    }
    .artNote {
        width: 68vw;
        left: 22vw;
        bottom: 20vh;
    }
    .artNote label {
        right: 3vw;
        top: 3vh;
    }
    .artNote p {
        margin: 7% 14% 3% 10%;
    }
    #art-toggle:checked + .artNote {
        max-height: 80vh;
    }
}

/* Art content - small screen width */
@media only screen and (min-width: 351px) and (max-width: 400px) {
    .art label {
        right: 32vw;
        bottom: 16vh; 
    }
    .artNote {
        width: 68vw;
        left: 22vw;
        bottom: 20vh;
    }
    .artNote label {
        right: 3vw;
        top: 3vh;
    }
    .artNote p {
        margin: 7% 14% 3% 10%;
    }
    #art-toggle:checked + .artNote {
        max-height: 70vh;
    }
}

/* Art content - medium screen width */
@media only screen and (min-width: 401px) and (max-width: 600px){
    .art label {
        right: 31vw;
        bottom: 16vh; 
    }
    .artNote {
        width: 47vw;
        left: 35vw;
        bottom: 19vh;
    }
    .artNote label {
        right: 2vw;
        top: 3vh;
    }
    #art-toggle:checked + .artNote {
        max-height: 65vh;
    }
}

/* Art content - medium+ screen width */
@media only screen and (min-width: 601px) and (max-width: 900px){
    .art label {
        right: 28vw;
        bottom: 20vh; 
    }
    .artNote {
        width: 42vw;
        left: 35vw;
        bottom: 26vh;
    }
    .artNote label {
        right: 1vw;
        top: 3vh;
    }
    #art-toggle:checked + .artNote {
        max-height: 65vh;
    }
}

/* Art content - medium+ screen width */
@media only screen and (min-width: 901px) and (max-width: 1000px){
    .art label {
        right: 30vw;
        bottom: 18vh; 
    }
    .artNote {
        left: 42vw;
        bottom: 20vh;
    }
    .artNote label {
        right: 1vw;
        top: 2vh;
    }
}

/* Video size */
#sizeVideo {
    height: 20vh;
}

/* Video placement */
.video label {
    position: absolute;
    cursor: pointer;
    bottom: 2vh;
    left: 40vw;
    filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
    -webkit-filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
}

.video:hover label {
    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); 
}

/* Video Window Placement */
.videoDisplay {
    position: absolute;
    overflow: scroll;
    max-height: 0;
    width: 27vw;
    bottom: 12vh;
    left: 19vw;
    border-style: outset;
    border-color: #6F4006;
    border-width: 2px;
    background: rgba(153, 244, 250, .9);
    border-radius: 55px 15px 15px 15px;
    -webkit-border-radius: 55px 15px 15px 15px;
    z-index: 4;
}

/* Video window close image placement */
.videoDisplay label {
    filter: drop-shadow(1px 0px 0px #6F4006);
    -webkit-filter: drop-shadow(1px 0px 0px #6F4006);
    left: 23vw;
    top: 2vh;
    float: right;
}

/* Video window content placement */
.videoDisplay p {
    margin: 5% 10% 2% 8%;
}

/* Don't display the check box */
#video-toggle {
    display: none;
}

/* Don't display the check box */
#video-toggle:not(:checked) + .videoDisplay {
    display: none;
}

/* Display video window */
#video-toggle:checked + .videoDisplay {
    max-height: 50vh;
}

/* Video label - small landscape */
@media only screen and (max-width: 400px) {
    .video label {
        left: 40vw;
        bottom: 4vh; 
    }
    .videoDisplay {
        width: 68vw;
        left: 5vw;
        bottom: 11vh;
    }
    .videoDisplay label {
        left: 56vw;
        top: 4vh;
    }
    .videoDisplay p {
        margin: 8% 13% 3% 10%;
    }
    #video-toggle:checked + .videoDisplay {
        max-height: 73vh;
    }
}

/* Video content - small screen width */
@media only screen and (min-width: 401px) and (max-width: 500px) {
    .videoDisplay {
        width: 55vw;
        left: 5vw;
        bottom: 11vh;
    }
    .videoDisplay label {
        left: 46vw;
        top: 3vh;
    }
    .videoDisplay p {
        margin: 6% 13% 3% 8%;
    }
    #video-toggle:checked + .videoDisplay {
        max-height: 75vh;
    }
}

/* Video content - medium screen width */
@media only screen and (min-width: 501px) and (max-width: 600px){
    .videoDisplay {
        width: 47vw;
        left: 10vw;
        bottom: 12vh;
    }
    .videoDisplay label {
        left: 40vw;
        top: 3vh;
    }
    .videoDisplay p {
        margin: 7% 13% 3% 9%;
    }
    #video-toggle:checked + .videoDisplay {
        max-height: 75vh;
    }
}

/* Video content - medium+ screen width */
@media only screen and (min-width: 601px) and (max-width: 750px){
    .videoDisplay {
        width: 37vw;
        left: 8vw;
        bottom: 15vh;
    }
    .videoDisplay label {
        left: 30vw;
        top: 3vh;
    }
    .videoDisplay p {
        margin: 5% 14% 2% 8%;
    }
    #video-toggle:checked + .videoDisplay {
        max-height: 67vh;
    }
}

/* Video content - medium+ screen width */
@media only screen and (min-width: 751px) and (max-width: 900px){
    .videoDisplay {
        width: 34vw;
        left: 8vw;
        bottom: 15vh;
    }
    .videoDisplay label {
        left: 27vw;
        top: 3vh;
    }
    .videoDisplay p {
        margin: 5% 14% 2% 8%;
    }
    #video-toggle:checked + .videoDisplay {
        max-height: 67vh;
    }
}

/* Book size */
#sizeBook {
    height: 15vh;
}

/* Book image Placement */
.book label {
    position: absolute;
    cursor: pointer;
    right: 11vw;
    bottom: 5vh;
    filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
    -webkit-filter: drop-shadow(0px 0px 3px #FFFFFF) drop-shadow(0px 0px 4px #46E371);
}

.book:hover label {
    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); 
}

/* Book Menu Placement */
.bookMenu {
    position: absolute;
    overflow: scroll;
    max-height: 0;
    width: 23vw;
    right: 3vw;
    bottom: 15vh;
    border-style: outset;
    border-color: #6F4006;
    border-width: 2px;
    background: rgba(153, 244, 250, .9);
    border-radius: 55px 15px 15px 15px;
    -webkit-border-radius: 55px 15px 15px 15px;
    z-index: 6;
}

/* "X" Placement */
.bookMenu label {
    filter: drop-shadow(1px 0px 0px #6F4006);
    -webkit-filter: drop-shadow(1px 0px 0px #6F4006);
    top: 2vh;
    right: 1vw;
    float: right;
}

.bookMenu ul {
    margin: 6% 15% 5% 4%;
    list-style: none;
}

/* Don't display the check box */
#book-toggle {
    display: none;
}
 
/* Don't display the check box */
#book-toggle:not(:checked) + .bookMenu {
   display: none;
}

/* Display Book Menu */
#book-toggle:checked + .bookMenu {
    max-height: 50vh;
}

/* Book label - tablet landscape */
@media only screen and (min-aspect-ratio: 130/100) and (max-aspect-ratio: 140/100) {
    .book label {
        right: 7vw;
        bottom: 4vh;
    }
    .bookMenu label {
        top: 1vh;
        right: 1vw;
    }
}

/* Book label - small landscape */
@media only screen and (max-width: 350px) {
    .book label {
        right: 4vw;
        bottom: 3vh;
    }
}

/* Book content - small screen width */
@media only screen and (max-width: 400px) {
    .bookMenu {
        width: 49vw;
        right: 4vw;
        bottom: 12vh;
    }
    .bookMenu label {
        top: 3vh;
        right: 2vw;
    }
    .bookMenu ul {
        margin: 11% 15% 5% 11%;
    }
    #book-toggle:checked + .bookMenu {
        max-height: 66vh;
    }
}

/* Book content - medium screen width */
@media only screen and (min-width: 401px) and (max-width: 600px){
    .bookMenu {
        width: 44vw;
        right: 4vw;
        bottom: 10vh;
    }
    .bookMenu label {
        top: 3vh;
        right: 2vw;
    }
    .bookMenu ul {
        margin: 8% 15% 5% 10%;
    }
}

/* Book content - medium+ screen width */
@media only screen and (min-width: 601px) and (max-width: 750px){
    .bookMenu {
        width: 35vw;
        right: 11vw;
        bottom: 10vh;
    }
    .bookMenu ul {
        margin: 7% 15% 5% 7%;
    }
}

/* Book content - medium+ screen width */
@media only screen and (min-width: 751px) and (max-width: 900px){
    .bookMenu {
        width: 32vw;
        right: 11vw;
        bottom: 10vh;
    }
    .bookMenu ul {
        margin: 6% 15% 5% 7%;
    }
}

/* Book content - medium+ screen width */
@media only screen and (min-width: 901px) and (max-width: 1150px){
    .bookMenu {
        width: 23vw;
        right: 11vw;
        bottom: 10vh;
    }
    .bookMenu ul {
        margin: 7% 15% 5% 7%;
    }
}

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

#sizeClose {
    width: 3vw;
}

/* Close Size - small */
@media only screen and (max-width: 400px) {
    #sizeClose {
        width: 9vw;
    }
}

/* Close Size - medium */
@media only screen and (min-width: 401px) and (max-width: 500px) {
    #sizeClose {
        width: 7vw;
    }
}

/* Close Size - large */
@media only screen and (min-width: 501px) and (max-width: 900px) {
    #sizeClose {
        width: 5vw;
    }
}

.imgSelfFree {
    float: left;
    margin: 0 0 2vw 2vw;
    width: 18vw;
    border-radius: 3vw 3vw 3vw 3vw;
    -webkit-border-radius: 3vw 3vw 3vw 3vw;
}