/**************************************************************************
MEDIA QUERIES
***************************************************************************/
@media only screen and (max-width: 1230px), 
only screen and (max-device-width: 1230px) {
header[role="banner"], #bar, footer[role="footer"] {
	margin: 0 auto;
	padding: 0 1%;
	width: 98%;
	}

#bar h1, #bar h2 {
	margin: 0 0 0 15px !important;
	}

#content {
	padding: 20px 0;
	width: 100%;
	}
main, .col1 main {
	width: 100%;
	}
.col2 main {
	float: left;
	margin: 0 1.667%;
	width: 68.333%;
	}
#sidebar {
	margin: 0 1.667%;
	width: 25%;
	overflow: hidden;
	}

.single article .post-thumb {
	max-width: 98%;
	}
.single article .post-thumb img {
	max-width: 100%;
	}
	
footer[role="footer"] {
	padding: 20px 0;
	}

body.discography main .ngg-gallery-thumbnail-box, body.artwork main .ngg-gallery-thumbnail-box {
  margin: 2.83% 2.5%;
	}

#banner {
	width: 100%;
	max-width: 1200px;
	height: auto;
	}
}


@media only screen and (max-width: 1100px), 
only screen and (max-device-width: 1100px) {
header nav, .submenu {
	display: none;
	}
.slicknav_menu {
	display: block;
	}
.slicknav_menu:nth-of-type(2) {
	display: none;
	}

.header {
	position: relative;
	}
.header .slicknav_menu {
	position: absolute;
	z-index: 101;
	top: 0;
	right: 0;
	width: 100%;
	}
#bar {
	position: relative;
	}
#bar .slicknav_menu {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	}

header .social-wrapper {
	float: left;
	margin: 10px 110px 0 5px;
}
header .social-item {
	margin: 0 .6em 0 0 !important;
	font-size: 1em;
}

/* BOOK ANIMATION - for mobile */
#sidebar #video {
	display: none;
	}
#sidebar #fade {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 437px;
	}
#sidebar #fade img {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 437px;
	}
#sidebar #fade img.active {
	z-index: 30;
	}

}


@media only screen and (max-width: 880px), 
only screen and (max-device-width: 880px) {
#bar {
	height: 40px;
	}

#feature {
	position: absolute;
	top: 250px;
	right: 0;
	bottom: auto;
	display: table;
	width: 60%;
	height: auto;
	color: #fff;
	overflow: visible;
	}
#feature p {
	font-size: 1.4em;
	line-height: 1.4;
	}

footer nav, footer .subnav {
	display: none;
	}
}

/* 1 column layout for iPad Portrait and iPhone */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
only screen and (min-device-width: 320px) and (max-device-width: 736px),
only screen and (max-width: 880px) {
main, .col1 main, .col2 main {
	float: none;
	margin: 0 1.667%;
	width: 96.667%;
	}
ul.post-nav {
	margin: 0 0 30px;
	}
#sidebar {
	float: none;
	margin: 30px 0 0;
	padding: 0 5%;
	width: 90%;
	}
#sidebar .mod {
	text-align: center;
	}
.letterbtn {
	display:  none;
	}
.elist input {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
	}

#sidebar #cover {
	margin: 0 auto;
	}
}

/* iPad & iPhone */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), 
only screen and (min-device-width: 320px) and (max-device-width: 736px) {
.header {
	background-position: 50% 0;
	-webkit-background-size: 100% auto !important;
  -moz-background-size: 100% auto !important;
  background-size: 100% auto !important;
	}
body.artwork .header {
	-webkit-background-size: 130% auto !important;
  -moz-background-size: 130% auto !important;
  background-size: 130% auto !important;
	}
header[role="banner"] {
	min-height: 0;
	}
}

/* iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
header[role="banner"] {
	height: 520px;
	}
.home header[role="banner"] {
	height: auto;
	}

body.home #logo {
	display: none;
	}

.single article img.alignleft, .single article img.alignright {
	float: none;
	display: block;
	margin: 0 auto;
	width: 80%;
	max-width: 80%;
	height: auto;
	max-height: none;
	}

body.artwork main .ngg-gallery-thumbnail-box {
  margin: 2.83% 2.5%;
	}
}

/* iPad Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
header[role="banner"] {
	height: 390px;
	}
.home header[role="banner"] {
	height: auto;
	}
#logo, body.int #logo {
	position: absolute;
	z-index: 1;
	right: 15px;
	bottom: 10px;
	width: 355px;
	height: 245px;
	background: url(../img/ps-sprite.png) no-repeat 0 0;
	text-indent: -999em;
	overflow: hidden;
	}
body.home #logo {
	display: none;
	}

#feature {
	top: 170px;
	}
#feature h2, #feature h3 {
	font-size: 1.875em;
	line-height: 1;
	}
#feature p {
	margin: .2em 0 .6em;
	font-size: 1.2em;
	line-height: 1.2;
	}

.blog article .post-thumb img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 350px;
	}
.blog article .post-video iframe {
	max-width: 400px;
	}
}


@media only screen and (max-width: 1024px), 
only screen and (max-device-width: 1024px) {
.page article {
	padding: 20px;
	}
body.soulstation img.alignleft {
	float: none;
	display: block;
	margin: 0 auto 60px;
	}
body.soulstation .tbl-wrap table {
	width: 100%;
	border-width: 10px 0;
	}
body.soulstation table td {
	font-size: 1.2em;
	}
}


@media only screen and (max-width: 736px), 
only screen and (max-device-width: 736px) {
body.soulstation .tbl-wrap h2 {
	font-size: 2em;
	}
}


@media only screen and (max-width: 667px), 
only screen and (max-device-width: 667px) {
	.field-wrap span.ninja-forms-req-symbol {
		left: -.7em;
	}
	.field-wrap .nf-field-label label  {
		padding-left: 0 !important;
	}
	.label-left .nf-field-label, .label-left .nf-field-element {
		width: 100% !important;
	}
	.label-left input.ninja-forms-field, .label-left textarea, .label-left select {
		margin: .4em 0 0 !important;
	}
	.label-left .nf-field-description {
		margin-left: 0 !important;
		font-style: italic;
	}
	.label-left .nf-after-field {
		margin-left: 0 !important;
	}
	.submit-wrap  {
		text-align: center;
	}
	.submit-wrap input {
		margin: 1em 0 0;
	}
}


@media only screen and (max-width: 480px), 
only screen and (max-device-width: 480px) {
body.soulstation article p {
	line-height: 1.3;
	}
.page article {
	padding: 20px 10px;
	}
body.soulstation .tbl-wrap h2 {
	font-size: 2.8em;
	}
}


@media only screen and (max-width: 439px), 
only screen and (max-device-width: 439px) {
body.soulstation .tbl-wrap h2 {
	font-size: 2.2em;
	}

body.soulstation table, body.soulstation thead, body.soulstation tbody, body.soulstation th, body.soulstation td, body.soulstation tr { 
	display: block; 
	}
body.soulstation .tbl-wrap table {
	border: 0;
	}
body.soulstation table tr {
	border-bottom: 1px solid #ccc;
	}
body.soulstation table tr:last-of-type {
	border: 0;
	}
body.soulstation table td, body.soulstation table td:nth-of-type(3n+1), body.soulstation table td:nth-of-type(3n+2), body.soulstation table td:nth-of-type(3n+3) {
	padding: .3em 5%;
	width: 90% !important;
	border: 0;
	text-align: center;
	}
body.soulstation table td:nth-of-type(3n+1) {
	padding-top: 1em;
	}
body.soulstation table td:nth-of-type(3n+3) {
	padding-bottom: 1em;
	}

body.soulstation table p {
	margin-bottom: .5em;
	}
body.soulstation table td img {
	margin-bottom: 1em;
	}
}



/* iPhone */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) {
header .social-wrapper, #feature {
	display: none;
	}
body.int #logo {
	position: absolute;
	z-index: 1;
	right: 15px;
	bottom: 10px;
	width: 355px;
	height: 245px;
	background: url(../img/ps-sprite.png) no-repeat 0 0;
	text-indent: -999em;
	overflow: hidden;
	}
header nav {
	top: 5px;
	right: 10px;
	}
#bar {
	min-height: 0;
	}
#bar h1, #bar h2 {
	font-size: 2.5em;
	}
.submenu {
	top: 4px;
	right: 10px;
	}
#sidebar h3 {
	font-size: 1.6em;
	}

/* img */
main article img {
	max-width: 100% !important;
	height: auto !important;
	}

/* POST WALL (home) & SINGLE POSTS */
.blog article, .single article {
	margin: 0 0 20px;
	padding: 0 15px 45px;
	}
.blog article header, .single article header {
	margin: 0 -15px 15px -15px;
	padding: .1em 15px .1em 15px;
	}
.blog article header .share {
	right: 5px;
	}
.single article h1 {
	margin: 0 0 .8em;
	font-size: 1.8em;
	line-height: 1;
	}
.blog article p, .single article p {
	line-height: 1.3;
	}
.blog article .post-thumb img, .single article img.alignleft, .single article img.alignright {
	float: none;
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: none;
	}
.blog article .post-video {
	float: none;
	margin: 0
	}
.blog article .post-video iframe {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	}
.blog article footer, .single article footer {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0 5%;
	width: 90%;
	text-align: right;
	}
.single article footer {
	bottom: 15px;
	}

/* PAGES */
.page article {
	padding: 20px 4%;
	}
}

/* iPhone Landscape */
@media only screen and (min-width: 321px) and (max-device-width: 736px) {
header[role="banner"] {
	height: 285px;
	}
.home header[role="banner"] {
	height: auto;
	}
body.int #logo {
	right: 15px;
	bottom: 25px;
	width: 250px;
	height: 170px;
	-webkit-background-size: 245% auto !important;
  -moz-background-size: 245% auto !important;
  background-size: 245% auto !important;
	}

header nav li, ul.subnav li {
	font-size: 1.25em;
	}
}

/* iPhone Portrait - 375px */
@media only screen and (max-width: 23.4375em) {
header[role="banner"] {
	height: 162px;
	}
.home header[role="banner"] {
	height: auto;
	}
body.home #logo {
	left: 10px;
	bottom: -70px;
	width: 160px;
	height: 110px;
	background: url(../img/ps-sprite.png) no-repeat 100% 100%;
	-webkit-background-size: 165% auto !important;
  -moz-background-size: 165% auto !important;
  background-size: 165% auto !important;
	}
body.int #logo {
	right: 5px;
	bottom: 10px;
	width: 150px;
	height: 105px;
	-webkit-background-size: 245% auto !important;
  -moz-background-size: 245% auto !important;
  background-size: 245% auto !important;
	}
#sitename {
	font-size: 1.8em;
	}

body.home #bar {
	height: 25px;
	}

/* MENUS */
.header .slicknav_btn {
	margin: 8px 5px !important;
	}
#bar .slicknav_menu {
	top: -5px;
	}
#bar .slicknav_btn {
	margin: 5px !important;
	}

.blog article header h4 {
	margin: .4em 160px .4em 0;
	font-size: 1.5em;
	}
}


@media only screen and (max-width: 568px), 
only screen and (max-device-width: 568px) {
body.soulstation #logo {
	top: 0;
	left: 10px;
	width: 120px;
	height: 152px;
	background: url(../img/soulstation-logo.png) no-repeat 0 0;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	background-size: cover !important;
	}
}