@import url('https://fonts.googleapis.com/css?family=Fontdiner+Swanky|Limelight|Londrina+Solid|Slackey');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/*
font-family: 'Limelight', cursive;
font-family: 'Londrina Solid', cursive;
font-family: 'Fontdiner Swanky', cursive;
font-family: 'Slackey', cursive; 
*/

html{width:100%; height:100%}
body{font-family: 'Open Sans', sans-serif; font-size:18px; width:100%; height:100%; background-color:#000; color:#fff;  cursive; background-image:url(../images/background.jpg); background-size:cover; background-position:top center; padding:0px; margin:0px}

h1, h2, h3, h4, h5{margin:0px; padding:10px 0; font-weight:normal; font-family: 'Londrina Solid', cursive;}
h1{font-size:42px; padding:0 0 25px}
h2{font-size:27px; padding:25px 0 15px}
h3{font-size:18px; }

textarea{width:80%}

#gotop{z-index:1000}

input[type=text],input[type=password], select, textarea{border:1px solid #999; padding:5px; font-size:16px; font-family: 'Open Sans', sans-serif; box-sizing:border-box}
input[type=submit],input[type=reset]{border:1px solid #999; padding:5px 15px; border-radius:4px}
div{box-sizing:border-box; position:relative; background-position:center; background-repeat:no-repeat; background-size:cover}
p{margin:0px; padding:0 0 20px 0;}
td{vertical-align:top}
a{color:#fff; text-decoration:none}
a:hover{opacity:0.6}
img{border:0px}

.flex{display:-webkit-flex; display:flex; -webkit-align-items:stretch; align-items:stretch}
.flex > div{-webkit-flex-grow:1; flex-grow:1}

#hp{padding:0px; background-image:url(../images/tom-cutout.png); background-size:contain; height:180px; background-position:left; border-bottom:1px solid #666}

.sig{font-family: 'Slackey', cursive; font-size:60px; position:absolute; right:40px; top:36px; text-shadow:2px 2px 5px #000}
.strap{font-family: 'Londrina Solid', cursive; font-size:19px; position:absolute; right:40px; top:106px; text-shadow:2px 2px 5px #000; text-align:right}

#container{max-width:100%; width:100%; min-width:300px; min-height:600px; margin:0px auto; position:relative}

#photostrip{height:220px; background-image:url(../images/photostrip.jpg); background-size:cover}

#searchbox{position:absolute; top:20px; right:5px; width:300px}
#searchbox input{ background-image:url(../images/search.png); background-repeat:no-repeat; background-position:center right 5px; background-size:20px; border:2px solid #ccc; width:100%; outline:none}

#masthead{height:90px}
#masthead #hpLogo1, #masthead #hpLogo2{color:#1d1d1d; top:0px}
#masthead #hpLogo2{top:50px}

#mobnavButton{border:2px solid #ccc; width:40px; height:40px; padding-top:1px; position:absolute; top:6px; right:10px; display:none; cursor:pointer}
#mobnavButton:hover{opacity:0.8; cursor:pointer}
#mobnavButton > div{border:1px solid #ccc; margin:7px 6px 7px}

#mobnav{position:absolute; top:155px; left:0px; z-index:1000; display:none; width:100%}
#mobnav a{padding:10px; background-color:#000; color:#fff; display:block; border-bottom:1px solid #ccc}
#mobnav a:hover{ background-color:purple; opacity:1}

#logo img{max-width:220px; margin:5px 0 15px 0}

#hpNav{font-family: 'Londrina Solid', cursive; text-align:center; background-image:url(../images/trans-black.png); border-bottom:1px solid #666}
#hpNav a{color:#fff; padding:10px 33px; font-size:26px; display:inline-block}
#hpNav a:hover{opacity:1}

.socials{position:absolute; top:4px; right:0px; width:auto !important}
.socials > div{padding:5px 10px}
.socials img{width:30px}

#content{min-height:600px; max-width:900px; margin:15px auto 30px; padding:15px 5px; font-size:16px; line-height:30px; background-image:url(../images/trans-black.png)}
#content img{max-width:100%}

.grey{color:#666666}
.red{color:#FF0000}
.small{font-size:10px}
.shadow{box-shadow:0px 0px 5px #573485}
.table{display:table}
.row{display:table-row}
.cell{display:table-cell;}
.readmore{font-size:14px; padding:10px; text-align:right}
.floatright{float:right; margin:0 10px 15px 15px; max-width:100%; max-width:460px; border-top-left-radius:40px; border-bottom-right-radius:40px}

.hpIcons{}
.hpIcons > div{text-align:center;}
.hpIcons a{display:block; border:1px solid #666; height:160px; min-height:160px; max-height:160px; width:160px; min-width:160px; max-width:160px; text-align:center; font-size:11px; margin: 0 auto 40px; background-size:80px; background-position:center; background-repeat:no-repeat; transition:all 300ms ease}
.hpIcons a:hover{opacity:1; border:1px solid #fff; transform:scale(1.2)}

.hpbox{background-color:#FFFFFF; background-image:url(../images/torn-paper.png); background-repeat:no-repeat; background-size:contain; background-position:0px -12px; padding:0 15px 15px 15px; margin:10px 10px 10px 0; width:283px; min-height:200px; position:relative}
.hpbox h2{font-size:24px; padding:10px 0 35px 0; margin:0px;}

.vidList{list-style:none; padding:15px 0; margin:0px}
.vidList li{width:300px; display:inline-block; text-align:center; padding:0 0 10px}
.vidList li p{background-color:#ffa36e; padding:10px 4px; font-size:18px}

.galleryitem{display:block; background-color:#ccc; border-radius:3px; padding:0px 15px; margin:10px; width:200px; min-height:210px; text-align:center}
.galleryitem p{background-color:#666; padding:10px 4px; font-size:18px}
.galleryitem:hover{opacity:0.8}

.gallthumb{max-width:200px; max-height:140px; padding:5px 0px; margin:0px auto; line-height:140px; text-align:center; display:block;}
.gallthumb img{max-height:180px; max-width:200px; vertical-align:middle}

.gallthumb2{width:180px; height:200px; float:left; padding:5px; margin:5px 10px 5px 0; line-height:200px; text-align:center; display:block; background-color:#ffa36e; padding:10px; position:relative}
.gallthumb2 img{max-height:180px; max-width:180px; vertical-align:middle}

#mask{width:100%; height:1000px; background-color:#000; opacity:0.9; z-index:1000; display:none; position: fixed; top:0px; left:0px}

#photo{display:none; z-index:1001; width:100%; max-width:800px; height:80%; position:absolute; cursor:pointer; top:40px; text-align:center; position:fixed; background-size:contain !important}

.caption{text-align:center; color:#fff; position:absolute; bottom:-30px; width:100%; background-image:url(../images/trans-black.png); display:none}
.credit{font-size:11px}

.catFlex > div{border:1px solid #ccc; text-align:center; padding:15px; max-width:300px; margin:5px; cursor:pointer}
.catFlex > div:hover{opacity:0.8}

.flexItems{}
.flexItems > div{border:1px solid #ccc; padding:15px; margin:5px}
.flexItems h2{padding:0px; margin:0px}

#justifiedGallery img{ z-index:1}
#justifiedGallery img:hover{opacity:0.6}
#justifiedGallery p{z-index:2; position:absolute; bottom:2px; font-size:11px; opacity:0}
#justifiedGallery p:hover{opacity:1}

.newsbox{margin:0px 0 5px; padding-bottom:10px}
.newsbox h2{padding:0 0 10px; margin:0px}
.newsbox .flex > div:first-of-type{width:220px; max-width:260px; min-width:260px}
.newsbox .flex > div:last-of-type{border-bottom:1px dotted #666}

.newsthumb{width:240px; height:240px; background-position:center; background-size:cover; border-top-left-radius:60px; border-bottom-right-radius:60px}

#footer{text-align:center; padding:60px 0; background-image:url(../images/trans-black.png); font-size:12px}

.vidwrapper {
	position: relative;
	padding-bottom: 48%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.vidwrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 965px){
	#hpNav a{padding:10px 18px}
}

@media (max-width: 767px){
	#hpNav{display:none}
	#logo img{max-width:160px}
	#photostrip{height:200px}
	#container{padding:5px}
	#mobnavButton{display:block}
	#mobnav{display:block}
	.socials{top:10px; right:70px}
	.socials a{padding:0 0 0 15px}
	.socials img{ width:20px}
	.sig{font-size:30px; right:10px; top:50px}
	.strap{font-size:16px; top:100px; right:10px}
	#hp{height:150px}
	.newsthumb{width:120px; height:120px}
	.newsbox .flex > div:first-of-type{width:130px; max-width:130px; min-width:130px}
	
	.hpIcons a{height:100px; min-height:100px; max-height:100px; width:100px; min-width:100px; max-width:100px; background-size:50px}
	.newsthumb{border-top-left-radius:30px; border-bottom-right-radius:30px}
	#photostrip{height:100px}
}

@media (max-width: 567px){
	#content{min-height:200px} 
	.sig{font-size:24px; top:50px}
	.strap{font-size:14px}
	.floatright{float:none; margin:15px auto; display:block}
	.newsthumb{width:90px; height:90px}
	.newsbox .flex > div:first-of-type{width:100px; max-width:100px; min-width:100px}
	
}

@media (max-width: 399px){
	h1{font-size:28px}
	.floatright{max-width:80%}
	.hpIcons a{height:80px; min-height:80px; max-height:80px; width:80px; min-width:80px; max-width:80px; background-size:40px}
	#photostrip{height:60px}
	.newsthumb{border-top-left-radius:20px; border-bottom-right-radius:20px}
	.newsbox .flex{display:block;}
	.newsbox .flex div:first-of-type{width:100%; max-width:100%; min-width:100%}
	.newsbox .flex div:first-of-type .newsthumb{min-height:200px; margin-bottom:20px}
}