/* ************************************************************************************************
GLOBAL + TRANSITIONS + SECTIONS / CONTAINERS + REPEATING ELEMENTS
*************************************************************************************************** */

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
.ScrollSceneIndicators { z-index: 9999999 !important; }
html, body {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	overflow-x:hidden;
}
body { overflow: hidden; height: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}
.fix-it {
	position: fixed;
}

.long-shadow {
	  text-shadow: 0px 0px 0 #097EB9,-1px 1px 0 #097EB9,-2px 2px 0 #097EB9,-3px 3px 0 #097EB9,-4px 4px 0 #097EB9,-5px 5px 0 #097EB9,-6px 6px 0 #097EB9,-7px 7px 0 #097EB9,-8px 8px 0 #097EB9,-9px 9px 0 #097EB9,-10px 10px 0 #097EB9,-11px 11px 0 #097EB9,-12px 12px 0 #097EB9,-13px 13px 0 #097EB9,-14px 14px 0 #097EB9,-15px 15px 0 #097EB9,-16px 16px 0 #097EB9,-17px 17px 0 #097EB9,-18px 18px 0 #097EB9,-19px 19px 0 #097EB9,-20px 20px 0 #097EB9,-21px 21px 0 #097EB9,-22px 22px 0  transparent;
}
.darken { background: #000; }

/* ************************************************************************************************
HEADER + NAV
*************************************************************************************************** */

header {position:relative; z-index: 1; width: 100%;}
nav {
	position: fixed;
	top: 10px;
	width: 100%;
	float: none;
	margin: auto;
	padding: 0;
	list-style: none;
	text-align:center; 
	}
.nav-primary li {
	display: inline-block;
	overflow: visible;
	margin-right: 10px;
	width: 100px;
	height: 50px;
}
.nav-primary li:last-child {
	margin-right: 0;
}
nav ul {margin-bottom: 0;}

.nav-primary a {
	display: inline-block;
	line-height: 50px;
	position: relative;
	width: auto;
	vertical-align: middle;
	font-family: 'Oswald', sans-serif;
	color: #097eb9;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 600;	
	width: 100%;
	text-align: center;
}
.nav-primary a text {z-index: 9}

.nav-primary a:active, .nav-primary a:hover {
	text-decoration: underline;
}
.active { background: #097eb9;}

li.nav-hold .cloudy {
	position: absolute;
	display: inline-block;
	width: 100%;
	top: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: -1;
	
}

/* ************************************************************************************************
SVG LOGO and LOGO ANIMATION 
*************************************************************************************************** */

.inbound-logo { 
	position: absolute;
	top: 100px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}
svg#inbound-found-logo {
  width: 225px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
svg#inbound-found-logo path {
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  stroke-width: 3;
  stroke: #1B75BA; /* this was not declared for original animation but without it leaves logo tag black by user agent */
  animation-name: draw;
  animation-timing-funtion: linear;
}
svg#inbound-found-logo polyline {
  fill-opacity: 0;
  stroke: #1B75BA; */
  stroke-width: 1.5;
  stroke-dasharray: 7150;
  stroke-dashoffset: 7150;
  animation: draw 5s infinite linear;
  animation-delay: 0s;
  animation-fill-mode: forwards; // Stay on the last frame
  animation-iteration-count: 1; // Run only once
  animation-timing-function: linear;
}


/* ************************************************************************************************
HOME SECTION CSS
*************************************************************************************************** */
section.scene { position: relative; width: 100%; }
.spacer.s1, .spacer.s2, .spacer.s3, .spacer.s4 { height: 0px; background: rgba(255,255,255,0); }
.spacer.s2 {  width: 100%; }

/* TEXT BOXES */
.simple-box { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }
.simple-box h1 {
	color: #F9DCA7;
	font-weight: 700;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 2px;
}
#sb-1 { bottom: 15%; top: auto;}
#sb-2, #sb-3, #sb-4, #sb-5 { opacity: 0; z-index: 1; height: 15%;}
/* ************************************************************************************************
SECTION 1 : MOUNTAIN LAYERS
*************************************************************************************************** */
svg#forest-brush-l, svg#forest-brush-r { width: auto; height: 100vh; bottom: 0; position: absolute; }
svg#forest-brush-l {left: 0;}
svg#forest-brush-r {right: 0;}

body {min-height: 300vh;}

section.scene.if-landscape {
	position: relative; 
	/*border-top: 5px dashed blue; border-bottom: 5px dashed blue;*/
	width: 100%; 
	height: 250vh;
}

.scene-a {
	height: 100vh;
 	position: absolute;
 	width: 100%; 
	margin: auto;
 /* border-top: 5px dashed #31a4eb; border-bottom: 5px dashed #2fccda; */
}

svg#scene-a {
	border-top: 5px dashed green; border-bottom: 5px dashed green;
	position: absolute;
	width: auto;
	min-height: 100vh;
	top: 0; bottom: 0; right: 0; left: 0;
	margin: auto;
	min-width: 100%;
}
svg#terrain-ttl, svg#terrain-ttr { top: 100%; width: 53%; position: absolute;}
svg#terrain-ttr { right: 0; }

#sb-2 {position:absolute; bottom: 0;}

.scene-b {
	border-top: 5px dashed rgba(202, 29, 255, 1); border-bottom: 5px dashed #ee359e;
	height: 100vh;
	position: relative;
 	min-width: 100%; 
	margin: auto;
	overflow: hidden;
}
svg#scene-b {
	border-top: 5px dashed green; border-bottom: 5px dashed green;
	position: absolute;
	height: auto;
	bottom: 0; right: 0; left: 0; 
	margin: auto;
	min-width: 100%;	
	min-height: 100vh;
}

.jim-walk img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; -webkit-filter: grayscale(1);
  filter: grayscale(1);}
.jim-walk {position: absolute;  top: 0; right: 0; bottom: 0; left: 0;}


/* ************************************************************************************************
SECTION 3 : WOODS VIEW LAYERS
*************************************************************************************************** */

/* ************************************************************************************************
MOUNTAIN LAYERS
*************************************************************************************************** */

/* ==============================================
floating
============================================== */
.floating-up, .floating-down {
	animation-name: floating-up;
	-webkit-animation-name: floating-up;
	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
.floating-down {
	animation-name: floating-down;
	-webkit-animation-name: floating-down;
	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
@keyframes floating-up {
	0% {transform: translateY(0%);}
	50% {transform: translateY(1%);}	
	100% {transform: translateY(0%);}			
}
@-webkit-keyframes floating-up {
	0% {-webkit-transform: translateY(0%);}
	50% {-webkit-transform: translateY(1%);}	
	100% {-webkit-transform: translateY(0%);}			
}
@keyframes floating-down {
	0% {transform: translateY(0%);}
	50% {transform: translateY(-1%);}	
	100% {transform: translateY(0%);}			
}
@-webkit-keyframes floating-down {
	0% {-webkit-transform: translateY(0%);}
	50% {-webkit-transform: translateY(-1%);}	
	100% {-webkit-transform: translateY(0%);}			
}
/* ==============================================
tossing
============================================== */
.tossing-right {
	animation-name: tossing-right;
	-webkit-animation-name: tossing-right;	
	animation-duration: 3.5s;	
	-webkit-animation-duration: 3.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
.tossing-left {
	animation-name: tossing-left;
	-webkit-animation-name: tossing-left;	

	animation-duration: 3.5s;	
	-webkit-animation-duration: 3.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
@keyframes tossing-left {
	0% {transform: rotate(-1deg);}
	50% {transform: rotate(0deg);}
	100% {transform: rotate(-1deg);}						
}

@-webkit-keyframes tossing-left {
	0% {-webkit-transform: rotate(-1deg);}
	50% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(-1deg);}				
}

@keyframes tossing-right {
	0% {transform: rotate(1deg);}
	50% {transform: rotate(0deg);}
	100% {transform: rotate(1deg);}						
}

@-webkit-keyframes tossing-right {
	0% {-webkit-transform: rotate(1deg);}
	50% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(1deg);}				
}




/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1140px) { }
@media only screen and (max-width : 1024px) { }
@media only screen and (max-width: 768px) { }
@media only screen and (max-width: 480px) { }
@media screen and (min-aspect-ratio: 9/5) { 
	
	svg#inbound-found-logo {
	  width: 200px;
	  height: auto;
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  margin-left: auto;
	  margin-right: auto;
	}

}

@media screen and (max-aspect-ratio: 1/1) { 
	
	.scene-a, .scene-b {
		width: 100%;
		height: 100vh;
	}
			
	svg#scene-a, svg#scene-b {
		
		margin: auto -50%;
		width: 200%;
	}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

/*
@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}*/


@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{ body{
    -webkit-font-smoothing: subpixel-antialiased;
}
}




/*
	svg#woods-scene3 {
	min-width: 100%;
	position: absolute;
	width: auto;
	min-height: 150vh;
}






*/