/*#################################################################################################################################################
################################################################### CSS RESET ######################################################################## */

html, body, div, p, a, h1,
h2, h3, h4, table, th, td, tr, ul,
li, img, span, hr, button
{ padding: 0;
margin: 0; }

img, button
{ border-style: none; }

.clear
{ clear: both; }
	
/*#################################################################################################################################################
################################################################### BASICS ######################################################################## */

html
{ overflow-y: scroll;
overflow: -moz-scrollbars-vertical; }

html, body
{ height: 98%; }

body
{ font-family: 'PT Sans', sans-serif;
font-weight: 400;
background-color: #334830;
background-image: url('https://twirlbound.com/pine/images/backpattern.png'); 
-webkit-tap-highlight-color: #efefef; 
text-rendering: optimizeLegibility; }

::selection {
	background: #212327; /* Safari */
	color: #e7e7e7;}
::-moz-selection {
	background: #212327; /* Firefox */
	color: #e7e7e7;}

.container
{ width: 1020px;
margin: 0 auto; }

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

h1
{ font-family: 'Source Sans Pro', sans-serif;
font-weight: 700; }

h2
{ font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 24pt;
margin-bottom: 4px;
letter-spacing: 2px;
text-transform: uppercase;
color: #f1f2f2;
width: 100%; }

h3
{ font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 20pt;
letter-spacing: 2px;
text-transform: uppercase;
color: #f1f2f2;
padding-bottom: 11px;
width: 100%;
border-bottom: 2px dotted #fefefe;
margin-bottom: 12px; }

h4
{ font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 20pt;
letter-spacing: 2px;
text-transform: uppercase;
color: #f1f2f2;
width: 100%;
margin-bottom: -18px;
margin-top: 0px; }

hr
{ margin: 50px 0px;
box-shadow: none; 
border-style: none !important;}

.fat
{ font-weight: 700;}

/*################################################################################################################################################
################################################################### LP_HEADER ###################################################################### */
#lp_header
{ height: 100%;
background-position: 50% 20%;
background-repeat: no-repeat;
width: 100%;
padding-top: 15px;
position: relative;
text-align: center; }

.lp_header_par
{ background: transparent;
position: absolute;
z-index: 5;
top: 0; 
left: 0; 
margin: 0 auto;
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;}

/*#################################################################################################################################################
################################################################### HEADER ######################################################################## */
#header
{ height: 500px; 
width: 100%;
padding-top: 30px;
position: relative;
text-align: center;
background-image: url('https://twirlbound.com/pine/images/back.jpg' );
background-position: center bottom; }

#pinelogo
{ display: block;
position: relative;
z-index: 6;
opacity: 0;
animation-name: logofademove; 
animation-duration: 1.0s;
animation-iteration-count: once;
animation-fill-mode: forwards;
-webkit-animation-delay:		0.3s; /* Chrome, Safari, Opera */
    animation-delay: 				0.3s; 
height: 500px !important;
}
	
@keyframes logofademove {
	0%   	{	
					opacity: 0;		}
	100%  {	
					opacity: 1.0;		}
}

.pinebranch
{ animation-name: shrink; 
animation-iteration-count: once;
animation-fill-mode: forwards; }
 
@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; }

#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; }
	
@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('https://twirlbound.com/pine/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%; } 
}

#signupheader
{ float: right;
padding: 10px;
width: 300px;
color: white;
z-index: 10;
overflow: hidden;
text-align: center;
background-color: rgba(255,255,255,0.2);
border-radius: 4px;
position: absolute;
bottom: 0;
right: 0;
margin-right: 20px;
margin-bottom: 10px;}

#donateheader
{ float: left;
padding: 10px;
width: 240px;
color: white;
z-index: 10;
overflow: hidden;
text-align: center;
background-color: rgba(255,255,255,0.2);
border-radius: 4px;
position: absolute;
bottom: 0;
left: 20px;
margin-right: 20px;
margin-bottom: 10px;}

#mainnav
{ width: 100%;
background-color: #95b45a;
height: 40px;
text-align: left;
margin-top: 30px;
position: absolute; 
z-index: 100;
top: 500px;
box-shadow: 0px 5px 0px rgba(45,50,35,0.4); }

#mainnav a
{ display: block; 
float: left;
text-decoration: none;
padding-top: 9px;
height: 31px;
background-color: #809b4c;
text-transform: uppercase;
width: 306px;
text-align: center;
color: #f2fff0;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14pt;
font-weight: 400;
 letter-spacing: 2px;
-webkit-transition: 	background-color 0.9s; /* Safari */
    transition: 				background-color 0.9s; }
 
 #mainnav a:hover
 { background-color: #aaca6d; }
 
  #mainnav a:active
 { background-color: #2a4027;
-webkit-transition: 	background-color 0.23s; /* Safari */
    transition: 				background-color 0.23s; }
	
.navselected
{ background-color: #aaca6d !important;}

.navselected:hover
{ background-color: #d8f89a !important; }

.navselected:hover
{ background-color: #a2c266 !important; }

#menumobile
{ display: none !important; }

#mobileoverlay
{ display: none;}

/*#################################################################################################################################################
################################################################### landingpage  ######################################################################## */
#backimg
{ width: 100%;
margin: 0 auto;
max-width: 2000px;
overflow: hidden; }

.lp_nav
{ margin-top: 0px  !important;
position: fixed       !important;
top: 0			!important;}

.lp_logo
{ top: 120px;
background-image: url('https://twirlbound.com/pine/images/pineshadow.png');
background-repeat: no-repeat;
background-position: 50% 5px;
-webkit-transition: background-image 0.3s ease-in-out;
transition: background-image 0.3s ease-in-out; }

#pine_headervideo
{ overflow: hidden;
max-width: 100%;
left: 0%; }

#lp_footer
{ position: inherit;
bottom: 0;
height: 450px;
padding-top: 14px; 
width: 100%; 
text-align: center;
background-color: #1B1815; }

#footerdivision
{ opacity: 0.8;
height:35px;
width:100%;
margin: 0 auto; 
background-image: url("https://twirlbound.com/pine/images/Greenlight_Division.png"); 
background-position: 50%;
background-repeat: no-repeat; }

#headerseparation
{ height: 10px;
display: block;
width: 100%;
margin-top: 40px;
background: #fff;
text-align: center;
position: absolute;
z-index: 7;
bottom:0;}

#headerseparation img 
{ margin-top: -20px; }
 
#kickstarterbutton
{ display: block;
margin: 0px auto 0px;
max-height: 70px;
max-width: 400px;
height: 15vw;
width: 95vw;
background-image: url('https://twirlbound.com/pine/images/backus_onKickstarter.png');
background-position: 0px 0px;
background-repeat: no-repeat;}

#kickstarterbutton:hover
{ opacity: 0.8;}

#kickstarterbutton:active
{ opacity: 1.0;
position: relative;
bottom: -2px;}

#logocontainer
{ height: 620px; }

.kickstarterContainer
{ margin-bottom: 40px; margin-top: 40px; }

#lp_content
{ margin-bottom: 40px;}

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

.lp_contentimg
{ max-width: 48%;
float: left;
display: block;}

.lp_contentblock
{ 
max-width: 1160px;
height: 100%;
margin: 0 auto;
background-color: #678063;
background-size: 100% auto;
background-repeat: no-repeat;
position: relative;
}

.trailervideo
{
max-width: 1160px;
max-height: 580px;
width: 94%;
height: 574px;
margin: 40px 3% 20px 3%;
}

.lp_contentblock:after
{ clear: both;}

.lp_contenttext
{ 
display: block;
position: absolute;
bottom: 0px;
z-index: 2;
padding: 30px 30px 25px 30px;
width: 75%; 
}

.lp_contenttext p, #mc_embed_signup_scroll
{ margin-top: 20px;
color: #f9edc1;
font-size: 16pt;
font-family: 'PT Sans', sans-serif;}

#lp_c_1
{ background-image: url('https://twirlbound.com/presskit/pine/images/Pine_Screenshot5.png');}

#lp_c_2
{ background-image: url('https://twirlbound.com/presskit/pine/images/Pine_Screenshot4.png');}

#lp_c_3
{ background-image: url('https://twirlbound.com/presskit/pine/images/Pine_Screenshot2.png');}

#lp_c_4
{ background-image: url('https://twirlbound.com/presskit/pine/images/Pine_Screenshot3.png');}

/*
#lp_c_1 .lp_contenttext
{ position: relative;
top: 440px;
left: 20px;}

#lp_c_2 .lp_contenttext
{ position: relative;
top: 350px;
left: 573px;
width: 60%;
text-align: right;}

#lp_c_3 .lp_contenttext
{ position: relative;
top: 400px;
left: 20px;
width: 48%;}

#lp_c_4 .lp_contenttext
{ position: relative;
top: 365px;
left: 20px;
text-align: right;
width: 65%;
left: 600px;}
*/
#lp_footer #mc_embed_signup_scroll label
{ font-size: 24pt !important;
text-align: center;}

#lp_footer #mc_embed_signup input.email
{ width: 100% !important; }

#lp_signupfooter
{ max-width: 440px;
margin: 0 auto;}

#lp_signupfooter input.button
{ margin: 0 auto !important; }
#lp_signupfooter input.email
{ max-width:86% !important; 
margin: 0 4% 10px 4% !important; }
#lp_signupfooter form
{ padding: 10px 3% 10px 3% !important; }

#lp_socialfooter
{margin: 30px auto 15px auto; width:565px; height:100% }
#lp_socialfooter a, #lp_socialfooter iframe
{ float:left; }
#lp_subfooter
{ margin-right:0px;
margin-left:10px;
float:left; }
#lp_likefooter
{ float:left; 
margin-right: 10px; margin-top: -1px;}

/* Video Players */
.vidwrap
{ width: 100%;
position: relative;
z-index: 1;
float: left; }

.playmobile
{ position: absolute;
margin: auto auto;
right: 0;
bottom: 0;
z-index: 10;
display: none;
width: 100%; 
height: 100%;}

.show_play
{ display: block; }

.videoplayer
{ width:100%; margin-bottom:-5px;}

/*#################################################################################################################################################
################################################################### MAIN ######################################################################## */
#main
{ padding-top: 40px;
padding-bottom: 50px;  
width: 1020px;
margin: 0 auto;}

#lp_main
{ padding-top: 40px;
width: 90%;
margin: 0 auto;}

.container p, .container ul
{ color: #d1e5cf;
font-size: 12pt; }

/*#################################################################################################################################################
################################################################### ABOUT ######################################################################## */

#teammembers
{ color: #e7f8e6;
font-size: 12pt;
max-width: 1020px;
padding-top: 30px;
text-align: center; }

#teammembers img
{ max-width: 160px;}

#teammembers a
{ color: #e6c1b8;
font-size: 9pt; }

#teammembers tr
{ max-width: 18%; }

#teammembers a:hover
{ color: #fadfd9; }

#teammembers a:active
{ color: #d2aca3; }

/*#################################################################################################################################################
################################################################### BLOG ######################################################################## */
#blogside
{ width: 820px; 
float: left; }

.blogentry
{ padding: 20px 40px 60px;
color: #e7f8e6;
font-size: 12pt; }

.blogentry p
{ line-height: 1.4;}

.blogentry .container
{ margin-left: 50px;
padding-bottom: 20px;}

.blogentry img
{ max-width: 100%; }

.blogentry ul
{ margin-left: 25px;}

.blogentry a, .container a
{ color: #c8fbc3;
text-decoration: underline; }

.blogentry a:hover, .container a:hover
{ color: #e5ffe2;
text-decoration: underline;  }

.blogentry a:active, .container a:active
{ color: #b0daac;
text-decoration: underline; }

.blogentry iframe
{ max-width: 100% !important;}

.titlerow
{ border-bottom: 2px dotted #fefefe;
padding-bottom: 8px;
margin-bottom: 20px;  
height: auto; }

.titlerow:after, .blogentry img:after
{ clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden; }

.date
{ margin-right: 20px; }

.date, .category
{ font-size: 12pt; 
float: left;
color: #e6e6e6;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase; 
width: 100%;}

.fa-calendar, .fa-folder
{ margin-right: 6px; }

#sidebar
{ width: 170px;
margin-left: 850px;
position: absolute;
margin-top:20px;
text-transform: lowercase;
height: 800px; }

#sidebar h3, #mobileoverlay h3
{ color: #DED099;
padding-bottom: 6px;
font-size: 14pt;
border-bottom: 2px dotted #DED099;}

#sidebar a
{ color: #D2C9AF;
font-size: 11pt;
text-transform: capitalize;
line-height: 1.3;
text-decoration: none; }

#sidebar a:hover
{ color: #fefefe;
text-decoration: underline; }

#sidebar a:active
{ color: #95b691;
text-decoration: underline; }

#sidebar ol, #sidebar ul
{ color: #A09576;
font-size: 10pt; }

#sidebar ol
{ margin-left: -25px;}

#sidebar ol li, #sidebar ul li
{ margin-bottom: 10px;}

#sidebar ul
{ list-style: square;
margin-left: 20px;}

.twittershare, .fbshare
{ float: left;
margin-top: 10px; }

#blogfbshare
{ display: inline-block;
margin-left: 15px;}

#pagebuttons
{ width: 100%;
height: 30px;
margin: 20px 0px 60px;}

#pagebuttons a
{ margin-right: 20px;
float: left;
display: block;
height: 30px;
width: 140px;
background-color: #bd9849;
line-height: 30px;
text-decoration: none;
color: #efefef;
text-align: center;}

#pagebuttons a:hover
{ background-color: #dab158; }

#pagebuttons a:active
{ position: relative;
bottom: -1px;
color: #b59041; }

/*#################################################################################################################################################
################################################################### TESTING ######################################################################## */

::-webkit-input-placeholder {
   color: #1F7B56;
   text-transform: uppercase;  
}

:-moz-placeholder { /* Firefox 18- */
   color: #1F7B56;  
   text-transform: uppercase;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #1F7B56;
text-transform: uppercase;     
}

:-ms-input-placeholder {  
color: #794d39;
text-transform: uppercase;  
}

.container form
{ text-align: center;
width: 100%; }

.buildversion
{ text-align: center;
font-size: 18pt;
margin-top: 20px;
text-transform: uppercase;
color: #E08659 !important;
animation-duration: 3000ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes blink {
   from {
      opacity: 1;
   }
   to {
      opacity: 0.3;
   }
 }

input[type=text]
{ border: 5px solid white; 
width: 40%; 
-webkit-box-shadow: inset 0 0 8px  rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 0 8px  rgba(0,0,0,0.1);
box-shadow: inset 0 0 8px  rgba(0,0,0,0.1);
padding: 15px; 
background-color: #ABD2A5;
margin: 0 0 20px 0;
color: #1F7B56; 
font-size: 16pt;
font-weight: 700; }

input[type=submit]:disabled
{ background: #e0e0e0; }

input[type=submit]
{ width: 30%; 
padding: 10px;
background: #849d52;
background: -moz-linear-gradient(top,  #95b45a 0%, #809b4c 100%);
background: -webkit-linear-gradient(top,  #95b45a 0%,#809b4c 100%);
background: linear-gradient(to bottom,  #95b45a 0%,#809b4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95b45a', endColorstr='#809b4c',GradientType=0 );
border-style: none; 
color: #e5ffe1;
font-size: 14pt;
text-transform: uppercase;
font-family: 'Source Sans Pro', sans-serif;
border-radius: 2px; }

input[type=submit]:hover
{ background: #99b267;
background: -moz-linear-gradient(top,  #99b267 0%, #84995b 100%);
background: -webkit-linear-gradient(top,  #99b267 0%,#84995b 100%);
background: linear-gradient(to bottom,  #99b267 0%,#84995b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99b267', endColorstr='#84995b',GradientType=0 ); }

input[type=submit]:active
{ background: #50752d;
background: -moz-linear-gradient(top,  #50752d 0%, #6d9934 100%);
background: -webkit-linear-gradient(top,  #50752d 0%,#6d9934 100%);
background: linear-gradient(to bottom,  #50752d 0%,#6d9934 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50752d', endColorstr='#6d9934',GradientType=0 ); }

input[type=submit]:disabled
{ background: #b9b9b9; }

.radiolist
{ color: #f6d5c5;
font-size: 14pt; }

#testingseparation
{ height: 35px;
border-bottom: 2px solid #4b6c46;
margin-bottom: 35px;}

.questionnaireform
{ text-align: left !important; }

.questionnaireform input[type=text]
{ width: 100% !important; 
margin-top: 6px;
background-color: #f6d5c5;}

.questionnaireform input[type=submit]
{ margin-bottom: 20px;}

input[type=range]
{ width: 500px; 
margin-bottom: 20px;}

input[type=textarea]
{ resize: vertical;}

/*#################################################################################################################################################
################################################################### DOWNLOADS ######################################################################## */
#downloadsul
{ font-size: 16pt; 
padding-top: 10px;
width: 100%;
color: #e7f8e6;
text-align: center; }

#downloadsul a
{ color: #c8fbc3; }

#downloadsul a:hover, #presskitbutton:hover
{ color: #e5ffe3;
opacity: 0.9; }

#downloadsul a:active, #presskitbutton:active
{ color: #a1e79a;
position: relative;
bottom: -2px; }

#presskitbutton
{ margin-left: 19px; }

/*#################################################################################################################################################
################################################################### FOOTER ######################################################################## */
#footer
{ position: fixed;
bottom: 0;
height: 28px;
padding-top: 14px; 
width: 100%; 
background-color: #1B1815; }

#footer p
{ color: #fff8bf;
font-size: 11pt;
padding: 0;
margin-left: 30px;
width: 100%; } 

#footer a
{ color: #fff8bf;}

#footer a:hover
{ color: #fffded; }

#footer a:active
{ position: relative;
bottom: -1px;
color: #b5ad6a; }

#socialfooter
{ float: right;
margin-right: 34px;
margin-top: -21px; }

.emptyfooter
{ width: 10px;
display: inline-block;}

.m_socialfooter
{ display: none; }

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

#subfooter
{ float:left; 
margin-top: -2px; 
margin-right: 10px; }

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

/*#################################################################################################################################################
################################################################### Stay in touch! ######################################################################## */

#stayintouchbody
{ display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
max-height: 100% !important;
margin: 0;
background-image: url('https://twirlbound.com/pine/images/stayintouch_back.jpg');
background-position: 50% 50%;
overflow: hidden; }

#sit_container
{ display: flex;
height: 33.3rem;
flex-direction: column;
display: flex;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
margin-top: 22%;}

.container_fill
{ -webkit-box-flex: 1;
overflow: hidden;
flex: 1 1 auto;}

.container_fill a
{ color: #fff;
font-size: 24pt;
text-decoration: none; }

.container_fill a:hover
{ transition: all 0.2ms;
position: relative;
bottom: 2px; }

.container_fill a:active
{ transition: all 0.2ms;
position: relative;
bottom: -4px; }

#mc_embed_signup
{ background: none !important;}

#aboutdonate
{float: right;
margin: 20px 0px 20px 5px;}

#aboutdonate:hover
{ opacity: 0.8;}

#aboutdonate:active
{ opacity: 1.0; }

#donateheader a
{ text-decoration: none;
border-bottom: 1px white dotted;
color: #eeefd1;}

#donateheader a:hover
{ color: white;}

#donateheader a:active
{ position: relative;
bottom: -1px;
color: #eeefd1;}

#gamepediafooter
{ margin: 3px 0px 0px 2px;
float:right;  }

#gamepediafooter:hover
{ opacity: 0.8;}

#gamepediafooter:active
{ opacity: 1.0;}

.privy-tab-container
{ margin-bottom: 40px; }