@charset "UTF-8";
/* CSS Document */

.topButton{ position:fixed; top:80%; margin-left:1044px; background:url(images/arrow2.png); height:35px; width:35px; display:block; text-indent:-5000px; border-top-right-radius:5px; border-bottom-right-radius:5px;}

.bgStripe{ background:url(images/stripe.png); height:201px; width:100%; top:235px; position:relative; z-index:-5;}
	
#cloudbg1{z-index: -10; top:0; left:0; width:100%; height:100%; background:url(images/background/BGs1b.png) repeat 0 0; position:fixed;}
#cloudbg2{z-index: -14; top:0; left:0; width:100%; height:100%; background: url(images/background/BGs2b.png) repeat 0 0; position:fixed; }
#cloudbg3{z-index:-16; top:0; left:0; width:100%; height:100%; background:url(images/background/BGs4b.png) repeat 0 0; position:fixed; }
#bombbg{z-index: -14; top:0; left:0; width:100%; height:100%; background: url(images/background/BG_bombs.png) repeat 0 0; position:fixed; }

body {
	background: url(images/background/bgBlue3.png);
	margin: 0;
	padding: 0;
	text-align:center;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl{ /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2, h4, h5, h6{
	margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	text-align:center;
	padding-right: 100px;
	padding-left: 100px; 
}

h1{font-family:'Stardos Stencil', Helvetica, sans-serif; font-size-adjust:0.496; font-weight:700; font-style:normal; font-size:64px; letter-spacing:1px;}
.inset-text{
    /* Shadows are visible under slightly transparent text color */
    color: rgba(65, 82, 95, 0.85);
    text-shadow: 1px 2px 2px #FFF, 0 0 0 #000;
}

h2, p {font-family:Gill Sans, Verdana, san-serif; }
p{font-weight:200; font-size:18px;  color: #6D6E71; line-height:23px;}
h2{font-weight:300; background:url(images/line1.png) no-repeat center; margin:0 auto; color:rgba(109, 110, 113, 0.9);} 
h3{margin:30px 0 0 0; padding:0; font-family: 'Cabin', Charcoal, sans-serif; color:rgba(65, 82, 95, 0.85); font-size:28px; font-weight:400; letter-spacing:1px; vertical-align:middle;}

/* Don't show shadows when selecting text */
::-moz-selection { background: #B2B6BA; color: #5B5A5A; text-shadow: none; }
::selection { background: #B2B6BA; color: #5B5A5A; text-shadow: none; }

a img {border: none; margin-top:5px;}
a:link {text-decoration:none; color:rgba(65, 82, 95, 0.85);}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

a#welcomeScroll img {margin-top:0px;}

/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
	width: 1044px;
	background: url(images/background/mainTexture.png);
	margin: -200px auto;
	}

.logo{padding:97px 0 100px 0; left:-98px; position:relative;}

/* ~~ OnTap/On Deck Section ~~ */

.content{padding:100px 100px 0 100px;}

.lineGap{background:url(images/lineGap.png) no-repeat center;}

.onTap{padding:100px 0 100px 0; }
.onTap a{ display:inline-block; position:relative;}

.firstBeer{float:left; padding:0 61px 0 61px;}
.label{width:300px; height:300px;}

.firstBeer h3{opacity:0; margin-top:15px;}
.secondBeer h3{opacity:0; margin-top:15px;}
.two h3{opacity:0; margin-top:15px;}

/* ~~ List of Beers Section ~~ */
.spitfire, .weasal, .warthog, .p51, .stealth, .nighthawk, .luftwaffe, .haps{width:250px; height:250px;}

.sFire{margin-top:62px;}
.sWeas{margin-top:80px;}
.sHog{margin-top:50px;}
.sP51{margin-top:80px;}
.sChoc{margin-top:60px;}

.beers{ padding-top:100px;}

.beers div, .beers img{display:inline-block;}

.text{width:60%; height:250px; vertical-align:top; text-align:left; color: rgba(110, 121, 128, 0.8);}

.tapIcon, .deckIcon{margin-top:-10px; }
.tapIcon {float:left;}
.deckIcon{float:right;}
	
.text h3{line-height:37px;}
.text p{margin-top:5px;}

.right{margin-left:30px;}
.left{text-align:right; margin-right:30px;}

.spacer{height:50px; width:100%;}

/* ~~ About Section ~~ */
.about{padding:180px 20px 0 20px; }
.shadow{box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);}

.note{background:url(images/solid_paper.png) repeat; padding:100px 0 430px 0; z-index:2; position:relative;}
.about p{text-align:left; padding:0 130px 0 130px;}
.picture{margin:60px 170px 0 0; float:right; opacity:.8;
transform:rotate(60deg);
-ms-transform:rotate(-2deg); /* IE 9 */
-moz-transform:rotate(-2deg); /* Firefox */
-webkit-transform:rotate(-2deg); /* Safari and Chrome */
-o-transform:rotate(-2deg); /* Opera */}

.noteTwo{background-color:#F2F2EF/*EDECE6*/; width:800px; height:930px; position:relative; z-index:1; margin-top:-900px; margin-left:30px;
transform:rotate(.5deg);
-ms-transform:rotate(.5deg); /* IE 9 */
-moz-transform:rotate(.5deg); /* Firefox */
-webkit-transform:rotate(.5deg); /* Safari and Chrome */
-o-transform:rotate(.5deg); /* Opera */}

/* ~~ Contact Section ~~ */
.contact{padding:180px 0 200px 0; }
	.contact p{padding-bottom:10px;}
	.email { float:left; margin-left:338px; padding:4px 15px 0 0;}
	.eText{text-align:left;}
	.radio{margin-top:80px;} 


/* ~~ The footer ~~ */
.triangles{background:url(images/triangles.png); height:6px;}

.footer {
	padding: 10px 0 120px 0; background: url(images/footTexture.png);}

.footer p{ color:#474747; font-size:12px; font-weight:bold; float:left; margin-left:80px; background-color:#2c2c2c; line-height:35px; padding:0 15px 0 15px; border-radius: 3px;
-webkit-transition-property:color, text;
-webkit-transition-duration: .25s, .25s;
-webkit-transition-timing-function: linear, ease-out;
-moz-transition-property:color, text;
-moz-transition-duration:.25s;
-moz-transition-timing-function: linear, ease-out;
-o-transition-property:color, text;
-o-transition-duration:.25s;
-o-transition-timing-function: linear, ease-out;
}

.footer p:hover{color:#bfbfbf;}

.footer ul{ margin:5px 80px 0 0; float:right;}
.footer li{ display:inline-block; }
.footer li a {width:35px; height:35px;  display:block;  text-indent:-5000px; }

.twitter a{ background:url(images/twitzIcon.png) no-repeat; position:relative; background-position-y:0px; }
.twitter {margin-right:3px; }

.insta a{background:url(images/instaIcon.png) no-repeat; position:relative; background-position-y:0px; }