/*
==================
1. General stuff
1a. Logo
2. Header
3. Main section
4. Media queries
==================
*/

/* === 1. General stuff === */
@charset "utf-8";
@import url(../icons/stylesheet.css);
html { height:100%; position:relative; }
body { background:#000; font-family:Arial, Helvetica, sans-serif; margin:0; min-height:100%; padding:0; }
h2 { letter-spacing:0px; font-family:Segoe Script }
h3 { font-weight:400; letter-spacing:1px; }
h1 { letter-spacing:2px; }
.light { background:rgba(255,255,200, 1); border-radius:500%; box-shadow:rgba(255,255,200,1) 0px 0px 2px 2px; display:none; height:1px; opacity:0.4; position:absolute; width:1px; z-index:-1; }
#bg { list-style:none; margin:0; padding:0; }
#bg li { bottom:0; display:none; left:0; overflow:hidden; position:absolute; right:0; top:0; z-index:-1; }
#bg li.o { display:block; }
#bg li img { width:100%; }
#sliderbar { background:rgba(0,0,0,0.75); height:5px; left:0; position:absolute; right:0; top:0; }
#sliderbarin { background:#33cc00; height:5px; width:0; }
::selection { background:rgba(255,255,255,0.15); }
::-moz-selection { background:rgba(255,255,255,0.15); }
.clear { clear:both; display:block; }
.highlight { color:#33cc00; }
a { color:#33cc00; text-decoration:none; }
a:hover { color:#99cc99; }

/* === 1a. Logo === */
logo { background:rgba(0,0,0,0.75); color:#FFF; margin-top:2%; padding:0 5% 0 10%; position:absolute; }
/* logo img { float:left; margin:0; position:relative; width:100% }

/* === 2. Header === */
header { background:rgba(0,0,0,0); color:#FFF; height:40px; line-height:40px; margin-top:40%; padding:0 10%; position:absolute; width:80%; }
headershop { background:rgba(0,0,0,0); color:#FFF; height:40px; line-height:40px; margin-top:20%; padding:0 10%; position:absolute; width:80%; }
header img { float:left; }
/* #music { cursor:pointer; float:right; } */
#tweet { background:rgba(0,0,0,0.75); color:#FFF; float:left; font-size:11px; line-height:11px; margin:0; padding:1px; }
.tweet_time:before { content:' — '; }
.tweet_time { color:#555; float:right; font-size:10px; margin-left:5px; }
.tweet_time a { color:#555; }

/* === 3. Main section === */
#main { background:rgba(0,0,0,0.75); border-bottom:5px #33cc00 solid; border-top:5px #33cc00 solid; color:#FFF; padding:10px 10%; position:absolute; margin-top:14%; width:80%; }
#left { float:left; margin:0; position:relative; width:40%; }
#right { float:left; margin:0; padding:0 0 0 5%; position:relative; width:50%; }
#leftshop { float:left; margin:0; position:relative; width:100%; }
#rightshop { float:right; margin:0; padding:0 0 0 0%; position:relative; width:10%; }
p.notification { color:#999; font-family:Arial, Helvetica, sans-serif !important; font-size:11px; margin-bottom:5px; text-align:right; }
form input { border:none; box-sizing:border-box; color:#777; float:left; height:40px; moz-box-sizing:border-box; padding:12px; webkit-box-sizing:border-box; }
form input[type="email"] { box-shadow:#CCC -1px 0px 0px inset; width:70%; }
form input[type="submit"] { background:#33cc00; color:#FFF; width:30%; }
/*#mc-embedded-subscribe-form{border:none; box-sizing:border-box; color:#777; float:left; height:40px; moz-box-sizing:border-box; padding:12px; webkit-box-sizing:border-box;}
#mc_embed_signup{background:#fff; clear:left; font:11px Helvetica,Arial,sans-serif;} */
#mce-responses{color:#999; font-family:Arial, Helvetica, sans-serif !important; font-size:11px; margin-bottom:5px; text-align:right;}
/*#mc-field-group{box-shadow:#CCC -1px 0px 0px inset; width:70%;} */
/*#mc-embedded-subscribe{background:#33cc00; color:#FFF; width:30%;} */
#social_icons { float:left; margin:10px 0; margin-bottom:20px; }
#social_icons ul { list-style:none; margin:0; padding:0; }
#social_icons ul li { background:#33cc00; border-radius:50%; box-shadow:rgba(255,255,255,0.1) 0px 0px 0px 4px; display:inline-block; height:40px; line-height:40px; margin-right:15px; text-align:center; width:40px; }
#social_icons ul li:hover { background:#99cc99; }
#social_icons ul li a { color:#336633; text-shadow:rgba(255,255,255,0.1) 0px 1px 0px; }
#counter { float:right; margin:10px 0; margin-bottom:20px; }
#counter > div { display:inline-block; margin-left:50px; }
#counter div h1 { color:#FFF; margin:0; text-align:right; }
label.error { bottom:44px; color:#999; font-size:11px; left:0; position:absolute; }
#map { bottom:0; left:0; position:absolute; right:0; top:0; z-index:-1; }



/* === 4. Media queries === */
@media(max-width:1800px) {
	#social_icons, #counter { float:right; margin:10px auto; text-align:right; width:100%; }
	#social_icons ul li { margin-left:15px; margin-right:0; }
}
@media(max-width:1350px) {
	#bg li img { height:100%; width:auto; }
}
@media(max-width:768px) {
	#left, #right { float:none; width:100%; }
	#main { top:100px; }
	#social_icons { float:left; width:50%; }
	#social_icons ul li { margin-left:0; margin-right:15px; }
	#counter { float:left; width:50%; }
	#counter > div { margin-left:28px; }
	h1 { font-size:30px; }
	h2 { font-size:24px; }
	h3 { font-size:18px; }
	label.error { bottom:0; }
}
@media(max-width:320px) {
	#main { font-size:12px; padding:10px 5%; top:40px; width:90%; }
	#social_icons, #counter { float:none; width:100%; }
	#social_icons { margin:auto; text-align:center; }
	#social_icons ul li { margin:0 7px; }
	#counter { margin:10px auto; text-align:center !important; }
	#counter > div { margin:0 10px; text-align:center !important; }
    #counter > div h1 { text-align:center; }
	header { padding:0 5%; width:90%; }
	#tweet { display:none; font-size:11px; }
	#header_twitter { display:none; }
}
@media(max-width:1024px) and (max-height:768px) and (min-width:768px) {
	#main { padding:25px 5%; width:90%; }
	#social_icons, #counter { float:right; margin:10px auto; text-align:right; width:100%; }
	#social_icons ul li { margin-left:15px; margin-right:0; }
}
@media(max-width:480px) and (max-height:320px) {
	header { display:none; }
	#tweet { display:none; font-size:11px; }
	#header_twitter { display:none; }
	#sliderbar { height:5px; }
	#main { border-top:none; font-size:12px; padding:0 5%; padding-bottom:20px; top:5px; width:90%; }
	h1 { font-size:18px; }
	h2 { font-size:24px; }
	h3 { font-size:14px; }
	#bg li img { height:100% !important; width:auto !important; }
	#right, #left { float:none; width:100%; }
	#social_icons ul li { height:25px; line-height:25px; margin:0 6px; width:25px; }
	#counter > div { margin-left:13px; }
	#counter { margin-bottom:0px; }
}