/* MEGA LAYOUT 
----------------------------------------------- */

@media only screen and (min-width: 1600px) {
	.headerFrame {
		width:1350px;
	}
	.contentFrame {
		width:1100px;
	}	
	.thumbnail {
	  width: 250px;
	  height: 250px;
	}
	.overlay_hg {
		padding: 0 0 400px 0;
	}
	iframe {
		width: 100%;
		height: 600px;
		margin: 0;
	}	
}

/* WIDE DESKTOP LAYOUT 
----------------------------------------------- */

@media only screen and (min-width: 1176px) and (max-width: 1599px) {
	.headerFrame,
	.contentFrame {
		width:1100px;
	}
	.thumbnail {
	  width: 250px;
	  height: 250px;
	}	
}

/* TABLET LAYOUT
----------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.headerFrame,
	.contentFrame {
		width: 748px;
	}
	.header_home h1,
	.header_home span    {
		margin: 20px 0 0 0;
		padding: 0;
		width: 300px;
		height: 120px;
		text-indent: -999em;
		background-position: 0 0;
		background-size: contain;
		background-repeat: no-repeat;
		float: left;
		background-image: url(../img/logo.png);
	}
	.header_scroll h1,
	.header_scroll span    {
		margin: 5px 0 0 0;
		padding: 0 0 0 10px;
		width: 100px;
		height: 55px;
		text-indent: -999em;
		background-position: 0 0;
		background-size: contain;
		background-repeat: no-repeat;
		float: left;
		background-image: url(../img/logo.png);
	}	
	.header_home  #navigation ul li a,
	.header_scroll  #navigation ul li a  {	
		padding: 0 13px 0 13px;
		font-size: 16px;
		line-height: 70px;
	}
	.thumbnail {
	  width: 170px;
	  height: 170px;
	}			
}

/* MOBILE LAYOUT (PORTRAIT/320PX)
----------------------------------------------- */
@media only screen and (max-width: 767px) {
	.headerFrame,	
	.contentFrame {
		width: 300px;
	}		
	.dropbox {
		margin: 10px 0 0 0;
		padding: 0;
		overflow: hidden;
		width: 50px;
		height: 50px;
		display: block;
		float: right;
	}	
	.dropbox a {
		float: right;
		margin: 0;
		padding: 0;
		overflow: hidden;
		width: 50px;
		height: 50px;
		display: block;
		line-height: 50px;
		text-align:center;
		font-size: 21px;
		outline: 0 none;
		text-decoration: none;
	}
	.header_home,	
	.header_scroll {
		width: 100%;
		height: 70px;
		margin: 0;
		padding: 0;
		position: fixed;
		z-index: 1000;
		top:0;
		background: #222;
		z-index: 1000;
	}	
	.header_home h1, 
	.header_home span, 	
	.header_scroll h1,
	.header_scroll span    {
		margin: 5px 0 0 0;
		padding: 0 0 0 10px;
		width: 100px;
		height: 55px;
		text-indent: -999em;
		background-position: 0 0;
		background-size: contain;
		background-repeat: no-repeat;
		float: left;
		background-image: url(../img/logo.png);
	}
	.header_home  #navigation,
	.header_scroll #navigation {
		position: relative;
		width: 100%;
		margin: 10px 0 0 0;
		padding: 0;
		display: none;
		background: #222;
		overflow: hidden;
	}
	#navigation  ul li {
		margin: 0;
		padding: 0;
		display: block;
	}	
	.header_home  #navigation ul li a,
	.header_scroll  #navigation ul li a  {	
		float: none;
		font-size: 18px;
		line-height: 50px;
		text-align: center;
	}	
	iframe {
		width: 300px;
		margin: 0 0 25px 0;
	}
	.thumbnail {
	  width: 140px;
	  height: 140px;
	}
	.intro {	
		background-attachment: scroll;
	}
	.intro_vid {	
		background-attachment: scroll;
	}
	#info {	
		background-attachment: scroll;
		/*-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;*/
		background-position:center top;
	}
	.socialmedia {
	   bottom: 20px;
	}	
	.overlay {
		background: rgba(0,0,0,0.4);
	}	
	.overlay_hg {
		background: rgba(0,0,0,0.7);
	}	
	.ep_promo {
		position: absolute;
		left: auto;
		right: 10px;
		bottom: 160px;
		margin: 0;
		padding: 0;
		width: 100px;
		height: 100px;
		text-align: center;
	}
	.album_promo {
		position: absolute;
		left: 50%;
		bottom: 160px;
		margin: 0;
		padding: 0;
		width: 100px;
		height: 100px;
		margin-left: -50px;
		text-align: center;
	}	
	.ep_promo p,
	.album_promo p {
		line-height: normal;
		font-weight: bold;
		font-size: 80%;
	}	
	.thumbnail_cover {
	  width: 100px;
	  height: 100px;
	}	
	#info_album {	
		min-height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: #000 url(../img/info_album.jpg) no-repeat;
		background-attachment: scroll;
		-webkit-background-size: initial;
		-moz-background-size: initial;
		-o-background-size: initial;
		background-size: initial;
		background-position:50% 0;
	}
	#download_album {	
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: #000 url(../img/svn16_jume_promo_319.jpg) no-repeat;
		background-attachment: scroll;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-position:50% 0;
	}
}

/* WIDE MOBILE LAYOUT (LANDSCAPE/480PX)
----------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.headerFrame,
	.contentFrame {
		width: 460px;
	}
	iframe {
		width: 460px;
		margin: 0 0 25px 0;
	}	
	.thumbnail {
	  width: 210px;
	  height: 210px;
	}	
	.ep_promo,
	.album_promo {
		position: absolute;
		left: auto;
		right: 50px;
		bottom: 100px;
		margin: 0;
		padding: 0;
		width: 100px;
		height: 100px;
		text-align: center;
	}
}