/*#################################################################################################################################################
################################################################### 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
{ background-color: #353e25;
background-image: url('../images/backpattern.png'); 
font-family: 'PT Sans', sans-serif;
font-weight: 400;
-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; }

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

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

#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: 330px; 
text-align: center;
color: #f2fff0;
font-family: 'Roboto Slab', 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;}

/*#################################################################################################################################################
################################################################### MAIN ######################################################################## */
#main
{ padding-top: 40px;
padding-bottom: 50px;  
width: 1020px;
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('../../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; }

/*#################################################################################################################################################
################################################################### logo anim ######################################################################## */
.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);
}
 
@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('../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%; } 
}