body
{ background-color: #486344 !important; }

.lp_cont
{ padding: 60px 20px;
margin-top: -38px;
width: 1120px;
background-color: #486344;} 

/*################################################################################################################################################
################################################################### Parallax header images ###################################################################### */
#lp_par_cont {
   display: block;
   width: 100%;
   height: 96%;
   overflow: hidden;
   text-align: center;
   clear: both;
}

#lp_par_cont div {
   position: fixed;
   top: 0;
   opacity: 0;
   z-index: -1;
   background-position: center !important;
   background-size: cover;
   background-repeat: none;
   transform: translateY(0px);
   height: 108%;
   width: 100%;
   animation: animatePar2 1.5s ease-out 0s 1;
   animation-fill-mode: forwards;
   clear: both;
}

@keyframes animatePar2 {
	0% { margin-top: -4%;
				opacity: 0;
	}
	100% { margin-top: -5%;
				opacity: 1;
	}
}

@keyframes animatePar3 {
	0% { margin-top: -2%;
				opacity: 0;
	}
	100% { margin-top: -5%;
				opacity: 1;
	}
}

@keyframes animatePar4 {
	0% { margin-top: 0%;
				opacity: 0;
	}
	100% { margin-top: -5%;
				opacity: 1;
	}
}

/*################################################################################################################################################
################################################################### Pine logo animation ################################################################## */
#pinelogo_static
{ display: block;
background-position: 50% 50%;
background-image: url('../images/lp_logo.png');
background-size: contain;
height: 50%;
max-height: 50%;
width: auto;
max-width: 80%;
background-repeat: no-repeat;
margin: 9% auto 0px;
-webkit-filter: drop-shadow(0px 4px 8px #000 );
  filter: drop-shadow(0px 4px 8px #000); }

#pinelogo
{ display: block;
position: relative;
z-index: 100;
opacity: 0;
animation-name: fademove; 
animation-duration: 1.0s;
animation-iteration-count: once;
animation-fill-mode: forwards;
animation-delay: 1s; 
max-height: 70%;
transform: scale(0.85);
margin-top: 5%; }

#logocontainer
{ height: 100% !important;
max-height: 100% !important; }

#logocontainer p
{ text-align: center; 
display: inline-block;
margin: 20px auto;
width: 745px;
max-width: 85%;
height: 25%;
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size: 16pt;
text-shadow: 0px 3px 3px #000;
color: #fff;
opacity: 0;
animation: fademove 1s ease-in 2.5s 1;
animation-fill-mode: forwards;}

.platform_image
{ display: inline-block;
z-index: 101;
width: 112px;
height: 50%; 
opacity: 0;
margin: 0 15px;
background-size: contain;
background-repeat: no-repeat;
animation: fademove 1s ease-in 3s 1;
background-position: center;
animation-fill-mode: forwards;}

.platform_image:hover
{ position: relative;
top: -2px;}

.platform_image:active
{ position: relative;
top: 2px; }
	
@keyframes fademove {
	0%   	{	
					opacity: 0;		}
	100%  {	
					opacity: 1.0;		}
}

.pinebranch
{ animation-name: shrink; 
animation-iteration-count: once;
animation-fill-mode: forwards; 
-webkit-filter: drop-shadow(0px 4px 8px #000 );
  filter: drop-shadow(0px 4px 8px #000);
  max-height: 25%;
  max-width: 30%;
}
 
@keyframes shrink {
    0%   {		-ms-transform: 		scale(100%,1.05); /* IE 9 */
					-webkit-transform: scale(100%,1.05); /* Safari */
					transform:				scale(100%,1.05);	}
    100%  {	-ms-transform: 		scale(1.0,1.0); /* IE 9 */
					-webkit-transform: scale(1.0,1.0); /* Safari */
					transform: 				scale(1.0,1.0);	}
}

#pine05
{ -ms-transform: 		scale(1.7,1.0); /* IE 9 */
	-webkit-transform: scale(1.7,1.0); /* Safari */
	transform: 				scale(1.7,1.0);
	animation-duration: 0.5s;
	-webkit-animation-delay: 	1.0s; /* Chrome, Safari, Opera */
    animation-delay: 				1.0s; }
	
#pine04
{ -ms-transform: 		scale(1.5, 1.0); /* IE 9 */
	-webkit-transform: scale(1.5, 1.0); /* Safari */
	transform: 				scale(1.5, 1.0);
	animation-duration: 0.5s;
-webkit-animation-delay: 		1.2s; /* Chrome, Safari, Opera */
    animation-delay: 				1.2s; }
	
#pine03 
{ -ms-transform: 		scale(1.3,1.0); /* IE 9 */
	-webkit-transform: scale(1.3,1.0); /* Safari */
	transform: 				scale(1.3,1.0);
	animation-duration: 0.6s;
-webkit-animation-delay:		1.4s; /* Chrome, Safari, Opera */
    animation-delay: 				1.4s; }
	
#pine02
{ -ms-transform: 		scale(1.1,1.0); /* IE 9 */
	-webkit-transform: scale(1.1,1.0); /* Safari */
	transform: 				scale(1.1,1.0);
	animation-duration: 0.5s;
-webkit-animation-delay:		1.7s; /* Chrome, Safari, Opera */
    animation-delay: 				1.7s; }

#trunk
{ margin-top: -5px;
  max-height: 25%;
  max-width: 30%; }

#pinetxt
{ margin-top: 20px; 
opacity: 0.0;
animation-name: fadetxt; 
animation-duration: 1.8s;
animation-iteration-count: once;
animation-fill-mode: forwards;
-webkit-animation-delay:		2.3s; /* Chrome, Safari, Opera */
    animation-delay: 				2.3s;
  max-height: 25%;
  max-width: 30%;	}
	
@keyframes fadetxt {
    0%   {		opacity: 0.0; }

    100%  {	opacity: 1.0; }
}

#bird
{ width: 28px;
height: 28px; 
display: block;
position: absolute;
z-index: 1;
opacity: 0.0;
-webkit-animation-delay:		2.1s; /* Chrome, Safari, Opera */
animation-delay: 					2.1s;
animation-name: birdmove;
animation-duration: 3.4s;
animation-iteration-count: once;
animation-fill-mode: forwards;
overflow: hidden;
-webkit-animation-timing-function: 	ease-in; /* Chrome, Safari, Opera */
 animation-timing-function:				ease-in; }

.birdimg
{  width: 28px;
display: block;
height: 28px;
background-image: url('../images/birdframes.png' ); 
animation: birdplay .6s steps(9) infinite; }

@keyframes birdplay {
    from   {		background-position: 0px; }
    to  {			background-position: 252px; }
}

@keyframes birdmove {
    0%   {		opacity: 0.0;
						left: 50%; 
						top: 20%; }
	10% { 	opacity: 1.0; }
	60% { 	opacity: 1.0; }
   100%  {		opacity: 0.0;
						left: 96%; 
						top: 10%; } 
}

/*################################################################################################################################################
############################################################### Landing page main body ###################################################################### */
#lp_main
{ padding-top: 38px;
z-index: 100;
width: 100%;
margin: 0 auto;
background-color: #334830;
background-image: url('../images/backpattern.png');
border-top: 10px solid #fff;
position: absolute; }

.lp_cont
{ max-width: 1100px;
height: 100%; 
width: 100%;
padding: 30px 0px 0px; }

#discordlink
{ text-align: center;
height: 40px;
display: block;
width: 55%;
font-family: 'Roboto Slab', serif;
font-size:20pt;
color: #fff;
text-decoration: none;
border-radius:6px;
padding: 10px;
margin: 0 auto;
background-color: #26262b; }

#discordlink:hover
{ background-color: #3e3e46;}

#discordlink:active
{ background-color: #1d1d20;
position: relative;
bottom: -2px;}

#pagelinks
{ text-align: center;
margin: 10px auto;
display: block;
width: 55%;}

#pagelinks:after
{ clear: both; }

#pagelinks:before
{ clear: both; }

.pagelink
{ text-align: center;
display: inline-block;
font-family: 'Roboto Slab', serif;
font-size:15pt;
color: #fff;
text-decoration: none !important;
border-radius:6px;
padding: 5px 20px;
background-color: #658860; }

.pagelink:hover
{ background-color: #83ab7d; }

.pagelink:active
{ background-color: #546f50; }

.trailervideo
{ max-width: 1160px;
max-height: 580px;
width: 96%;
height: 580px;
display: block;
padding: 0px 20px;
margin: 20px auto;}

/*#########################################################################################################
########################### social  ######################################################################## */
#lp_social
{ margin: 30px auto 0px auto; 
width:56%; 
height:100% }

#lp_social a, #lp_social iframe
{ float:left; 
margin: 0px 10px;}

#redditbutton
{ padding: 3px;
border-radius: 4px;
background-color: #ff4500;
text-align: center;
margin-left: 10px;
color: #fff;
text-decoration: none;}

#lp_likefooter
{ float:left; 
margin-right: 10px; margin-top: -1px;}

#lp_subfooter
{ margin-right:0px;
margin-left:10px;
float:left; }

#updateslink
{ text-decoration: none !important;}

#updateslink:hover
{ opacity: 0.8 !important; }

#updateslink:active
{ opacity: 1.0 !important; }

/*#########################################################################################################
########################### text part  ######################################################################## */

#lp_text
{ display: block;
background-color: #62845d;
padding: 20px 0px; }

#lp_text table h2
{ color: #e4d1a3;
font-family: 'Roboto Slab', serif; }

#lp_text table p, #lp_text table ul
{ float: left;
font-size: 15pt !important;
color: #fff;}

#lp_text table ul
{ margin-left: 20px;}

#screenshotlightboxes a
{ text-decoration: none;
margin-right: 2%;
text-align: center;}

#screenshotlightboxes img:last-child
{ margin-right: 0 !important;}

.screen_thumb {
  max-width: 30%;
  border: 2px solid #fff;
}

.screen_thumb:hover {
	opacity: 0.8
}

.screen_thumb:active {
	opacity: 1.0;
	position: relative;
	bottom: -2px;
}

.screenbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.screenbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}

.screenbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

/*#####################################################################################################################
####################################### actions  ######################################################################## */
#lp_actions
{ display: block;
background-color: #526345;
padding: 20px 0px 0px; }

/*#######################################################################################################################
######################################### end  ######################################################################## */
#lp_end
{ display: block;
background-color: #404c37;
padding: 20px 0px; 
text-align: center;}

#lp_end table
{ width: 80%;
margin: 0 auto;}

#lp_end table a
{ width: 100%; 
display: block;
height: 100px;
background-repeat: no-repeat;
background-position: center !important;
background-size: contain; }

#lp_end table a:hover
{ opacity: 0.6; }

#lp_end table a:active
{ opacity: 1.0;
position: relative;
bottom: -2px; }

#creativeoverride
{ background-size: 54% 60%;
pointer-events: none;}

#lp_end table td
{ padding: 4px 20px; }