@import url('https://fonts.googleapis.com/css?family=PT+Serif:400|Raleway:400,700|Roboto');
/*
Dark Blue #196390
Light blue: #4585ad
background #dde2e2
*/

html, body{width:100%; height:100%; padding: 0px; margin: 0px}

body{background-color:#fffffc; font-family: 'Roboto', sans-serif; font-size:18px; font-weight:400; color:#666666; margin:0px; background-attachment: fixed; background-size: cover}

img{border:0px}

div{background-repeat:no-repeat; background-position:center; background-size:contain; box-sizing:border-box; position:relative}

h1, h2, h3{margin:0px;font-family: 'Raleway', sans-serif; text-transform:uppercase; font-weight:400; margin:15px 0}
h1{font-size:32px;}
h2{font-size:24px; font-weight:700px}
h3{font-size:18px}
form{padding:0px; margin:0px}
hr{margin-top:20px; margin-bottom:20px; border:0px; border-bottom:1px dotted #4585ad}

a{color:#196390; text-decoration:none}
a:hover{color:#4585ad}

section{max-width:1000px; margin:0 auto; line-height:30px; background-color: #fff; box-sizing: border-box}

#logo{font-family: 'Raleway', sans-serif; font-weight:400; font-size: 38px}

.small{font-size:11px}
.blue{color:#196390}
.lightblue{color:#4585ad}
.floatleft{float:left; margin-right:15px; margin-bottom:10px}
.center{text-align:center}
.pad20{padding:20px}
.subfooter{font-size:11px; opacity:0.6}
.socials a{transition:all 300ms ease}
.socials a:hover{transform:scale(0.9)}

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

.content{padding:20px}

.nav{font-size:14px; -webkit-align-items:center; align-items:center; margin:20px 0; padding:20px 0; font-family: 'Raleway', sans-serif; font-weight:400}
.nav > div{text-align:center; width:33%}
.nav > div:nth-of-type(2){width:auto}
.nav img{max-width:260px}
.nav a{display:inline-block; color:#4585ad; padding:0 10px}

.discogitem{border-bottom:1px dotted #a07f09; padding-bottom:15px; padding-top:15px; min-height:160px; clear:left}
.discogitem:first-of-type{padding-top:0px}
.discogitem img{float:right; margin-left:20px}

.hpSkitter{background-color:black; text-align:center; max-width:1600px; margin:0 auto; padding:0px}

.albumPreview{background-color: #dde2e2; color: #196390; text-align: center; margin: 0 auto 30px; padding: 10px 15px 30px}

.albumPreview{border-top:5px solid #196390;border-bottom:5px solid #196390}
.albumflex > div:last-of-type img{max-width:260px}

#container{max-width:100%}

#mobnavbutton{width:30px; height: 30px; position: absolute; top:20px; right:26px; cursor:pointer; z-index: 1000; display:none}
#mobnavbutton:hover{opacity:0.8}
#mobnavbutton > div{height:4px; background-color: #196390; margin: 6px 0}

#mobnav{width:100%; max-width:400px; background-color: #fff; margin: 0 auto; position: fixed; top:100px; z-index: 1000; border:1px solid #ccc; box-shadow:0px 0px 20px #666; display:none}
#mobnav a{display:block; padding: 15px 10px; text-align: center; border-bottom:1px dashed #ccc}
#mobnav a:hover{ background-color: #EFEFEF}

#footer{background-color:#196390; color:#fff; text-align:center; margin:30px auto 0; padding:20px 10px; box-sizing: border-box;}
#footer a{color:#fff}
#subfooter{opacity:0.6; padding: 15px 0 0}
#dalogo{max-width:120px}

#socials{text-align:center; background-image:url(../images/strip-01.jpg); background-size:cover; position: relative; padding: 80px 10px}
#socials a{display:inline-block; margin: 0 10px;}

#scStrip{margin:0px auto 20px}

#membermenu{font-size:11px; max-width:1000px; text-align: right; padding:4px; margin: 0 auto}

.storeFlex{margin:20px auto; max-width: 660px}
.storeFlex > div{ width:50%; text-align: center !important}

#slideshow{max-width:100%eight: 760px; position: relative; margin: 0 auto; background-color: #000}
#slideshow > div{width:100%; height: 100%; position: absolute; top:0px; left:0px; background-size: cover; background-position: center; display: none}
#slideshow a{display:block; width:100%; height: 100%}

@media only screen and (max-width : 1200px) {

}
@media only screen and (max-width : 1000px) {
	section{padding:0 15px}
	#mobnavbutton{display:block}
	.nav{display:block;}
	.nav > div{width:100%}
	.nav > div:first-of-type{display:none}
	.nav > div:last-of-type{display:none}
	.storeFlex{display:block}
	.storeFlex > div{width:100%}
}
@media only screen and (max-width : 950px) {
px}
}
@media only screen and (max-width : 850px) {

}
@media only screen and (max-width : 700px) {
	.albumflex{display:block}
}

@media only screen and (max-width : 500px) {
	.nav img{max-width:200px}

	#logo{font-size: 29px; }
	#mobnavbutton{top:-10px; right:16px; opacity:0.3}
	#mobnavbutton:hover{opacity:1}
}
@media only screen and (max-width : 400px) {

}