/***************************

GRID SYSTEM

***************************/


/* Splits Up The Page Horizontally & Clears Itself */
.row {
	clear: both;
	padding: 0px;
	margin:0;
}
.row:before,
.row:after{
    content:"";
    display:table;
}
.row:after{
    clear:both;
}


/* Divides The Row Into Columns */
.col{
	display: block;
	float: left;
	margin: 0% 0 0 1.6%;
}

.col:first-child {
	margin-left:0;
}

.col:before,
.col:after {
  content:" ";
  display:table;
}

.col:after {
  clear:both;
}


/*  Remove margins as all go full width at 480 pixels */
@media only screen and (max-width: 480px) {
	.row {
		margin-left:0;
		margin-right:0;
	}
	.col {
		margin: 1% 0 1% 0%;
	}
}

/* GRID OF TWO */
.grid2-2{width: 100%;}
.grid1-2{width: 49.2%;}

/* GRID OF THREE */
.grid3-3{width: 100%;}
.grid2-3{width: 66.13%;}
.grid1-3{width: 32.26%;}

/* GRID OF FOUR */
.grid4-4{width: 100%;}
.grid3-4{width: 74.6%;}
.grid2-4{width: 49.2%;}
.grid1-4{width: 23.8%;}

/* GRID OF FIVE */
.grid5-5{width: 100%;}
.grid4-5{width: 79.68%;}
.grid3-5{width: 59.36%;}
.grid2-5{width: 39.04%;}
.grid1-5{width: 18.72%;}

/* GRID OF SIX */
.grid6-6{width: 100%;}
.grid5-6{width: 83.06%;}
.grid4-6{width: 66.13%;}
.grid3-6{width: 49.2%;}
.grid2-6{width: 32.26%;}
.grid1-6{width: 15.33%;}

/* GRID OF SEVEN */
.grid7-7{width: 100%;}
.grid6-7{width: 85.48%;}
.grid5-7{width: 70.97%;}
.grid4-7{width: 56.45%;}
.grid3-7{width: 41.94%;}
.grid2-7{width: 27.42%;}
.grid1-7{width: 12.91%;}

/* GRID OF EIGHT */
.grid8-8{width: 100%;}
.grid7-8{width: 87.3%;}
.grid6-8{width: 74.6%;}
.grid5-8{width: 61.9%;}
.grid4-8{width: 49.2%;}
.grid3-8{width: 36.5%;}
.grid2-8{width: 23.8%;}
.grid1-8{width: 11.1%;}

/* GRID OF NINE */
.grid9-9{width: 100%;}
.grid8-9{width: 88.71%;}
.grid7-9{width: 77.42%;}
.grid6-9{width: 66.13%;}
.grid5-9{width: 54.84%;}
.grid4-9{width: 43.55%;}
.grid3-9{width: 32.26%;}
.grid2-9{width: 20.97%;}
.grid1-9{width: 9.68%;}

/* GRID OF TEN */
.grid10-10{width: 100%;}
.grid9-10{width: 89.84%;}
.grid8-10{width: 79.68%;}
.grid7-10{width: 69.52%;}
.grid6-10{width: 59.36%;}
.grid5-10{width: 49.2%;}
.grid4-10{width: 39.04%;}
.grid3-10{width: 28.88%;}
.grid2-10{width: 18.72%;}
.grid1-10{width: 8.56%;}

/* GRID OF ELEVEN */
.grid11-11{width: 100%;}
.grid10-11{width: 90.76%;}
.grid9-11{width: 81.52%;}
.grid8-11{width: 72.29%;}
.grid7-11{width: 63.05%;}
.grid6-11{width: 53.81%;}
.grid5-11{width: 44.58%;}
.grid4-11{width: 35.34%;}
.grid3-11{width: 26.1%;}
.grid2-11{width: 16.87%;}
.grid1-11{width: 7.63%;}

/*  GRID OF TWELVE */
.grid12-12{width: 100%;}
.grid11-12{width: 91.53%;}
.grid10-12{width: 83.06%;}
.grid9-12{width: 74.6%;}
.grid8-12{width: 66.13%;}
.grid7-12{width: 57.66%;}
.grid6-12{width: 49.2%;}
.grid5-12{width: 40.73%;}
.grid4-12{width: 32.26%;}
.grid3-12{width: 23.8%;}
.grid2-12{width: 15.33%;}
.grid1-12{width: 6.86%;}


/*  Go Full Width At Less Than 480 Pixels */
@media (max-width : 480px) {
	div[class*='grid'] {
		width:100%;
		margin-right: 0px;
		margin-left: 0px;
	}

	.respond{
		width: 100%;
		margin-right: 0px;
		margin-left: 0px;
	}
	
	.respond-half{
		width: 49%;
		margin-left:2%;
		margin-right:0;
	}

	.respond-half:first-child {
		margin-left:0;
	}
}

/* Responsive Media Container */
.embed-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    height: 0;
    overflow: hidden;
}
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Horizontal Tablet Show / Hide Classes */
@media only screen and (max-width: 1024px) {
	.hide-htablet{
		display: none !important;
	}
	.show-htablet{
		display: block !important;
	}
}

/* Vertical Tablet Show / Hide Classes */
@media only screen and (max-width: 768px) {
	.hide-vtablet{
		display: none !important;
	}
	.show-vtablet{
		display: block !important;
	}
}

/* Mobile Show / Hide Classes */
@media only screen and (max-width: 480px) {
	.hide-mobile{
		display: none !important;
	}
	.show-mobile{
		display: block !important;
	}
}


/* Reponsive Images */
img {
  /* Ensure images don't scale beyond their parents */
  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */
  width: auto\9;
  /* IE7-8 need help adjusting responsive images */
  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic; 
}

/* Make image not responsive */
img.not-responsive {
	max-width:none;		
}


@media only screen and (max-width: 1219px){
	.setcontainer{padding: 0 10px;}
	#header nav{width: 56%;}
	.description{padding-top: 0;}
	.artist .setcontainer{padding-left: 10px;}
}


@media only screen and (min-width: 1024px) and (max-width: 1162px){		
	.banner-inner h1{width: 86%;}
	.policies{width: 28%;}
	#header nav{width: 58%;}
	.video-block span, .video-block ul.category li a{font-size: 14px;}
	.hashtext{font-size: 20px;}
	.hashcode{font-size: 35px;}	
	.btn-wrap{width: 16%;}
}

@media only screen and (max-width: 1023px){
	p{font-size: 14px;}
	.btn{font-size: 16px;}	
	.review-inner{width: 100%;}
	.review-block p, .video-gallery-block h3{font-size: 16px;}
	.author, .review-block cite, .description ul li, .customer-review-body blockquote p{font-size: 14px;}
	.content-inner figure{margin-bottom: 20px;}
	.description .btn{width: 55%;}
	.description ul li{background-position: 24px 10px;}
	
}

@media only screen and (min-width: 768px) and (max-width: 1023px){
	.logo{margin-top: 5px;}
	#header nav li{padding-left: 2%; padding-right: 2%;}
	#header nav li a, .signup-form p, .footer-links li a{font-size: 13px;}
	h2, h2 small{font-size: 30px;}
	.banner-inner h1{width: 85%; font-size: 40px;}	
	.banner-section .btn{width: 32%;}
	.magazine-quotes .tab-container ul li{padding: 0 20px;}
	.tab-content .tab-section p, .gizmotron-text, .hashtext{font-size: 18px;}
	.about p{width: 85%;}
	.video-gallery-block h3{padding: 12px;}
	.policies{width: 30%;}
	.copyright, .policies ul.services li a{font-size: 12px;}
	.content{width: 65%;}
	#latest-buzz{width: 31%;}
	.video-head{width: 65%;}
	.video-hashblock{padding: 25px;}
	.hashcode{font-size: 26px;}
	
	
	.customer-review-head .rating{width: 75%;}
	.btn-wrap{width: 22%;}
	
	
}
@media only screen and (min-width: 926px) and (max-width: 1030px){
	/*.video-block{min-height: 425px;}*/
}

@media only screen and (max-width: 767px){
	
	body{overflow-x: hidden;}
	.toggle-menu{display: block;}
	#header .btn, .member-login{display: none;}
	#header{padding: 15px 0;}
	.logo{width: 201px; margin-right: 0;}
	#header nav{display: none; position: absolute; top:63px; width: 100%; left:0; background-color: #2c3034; z-index: 100;}
	#header nav li{float: none; display: block; width: 100%; padding: 18px;}
	h2, h2 small{font-size: 22px;}
	.banner-inner{padding: 50px 0;}
	.banner-inner h1{width: 100%; font-size: 25px;}
	.banner-section .btn{width: 80%;}
	.btn-seperator{margin: 22px; display: block;}
	.btn-seperator:before, .btn-seperator:after{background: transparent;}
	.tab-content .tab-section p{font-size: 16px;}
	.magazine-quotes .tab-section, .video-hashblock{padding: 20px;}
	.author{line-height: 1.2; }
	.review-block, .video-gallery-block, .signup-form, .footer-links, .policies, .content, #latest-buzz, .product-detail-left, .product-detail-right, .customer-review-head .rating{width: 100%; margin-right: 0; margin-bottom: 30px; float: none;}
	.reviews .btn-video{padding: 17px;}
	.about p, .video-gallery-block img, .video-head, .content-inner p{width: 100%;}
	
	.about-image img, .artist, .banner-section{height: auto;}
	.reference{font-size: 20px;}
	.artist strong.title{font-size: 28px;}
	.release-row label, .release-row small, .customer-review-body strong{font-size: 14px;}
	.release{padding: 15px; max-width: 250px;}
	.gizmotron-text{float: none; width: 100%; text-align:center; font-size: 18px; margin-bottom: 20px;}
	.gizmotron-btn{float: none; width: 100%; text-align: center;}
	
	.magazine-quotes .tab-container ul li{padding: 0 2%;}
	.magazine-quotes .tab-container ul li a img{width: 100%; max-width: 170px; height: 60px;}
	
	.content-outer{padding-top: 30px;}
	.video-content p{font-size: 18px;}
	
	.video-block:nth-child(2n) {float:none;}
	.video-block,  .btn-wrap{float: none; width: 100%;}
	.hashtext{width: 100%; font-size: 18px; margin-bottom: 30px; float: none; display: block;}
	.hashcode{width: 100%; font-size: 22px; float: none; display: block;}
	.customer-reviews h4{font-size: 25px;}
	.customer-review-head .rating small, .customer-review-head .rating .active-star i.fa-star:before{font-size: 16px;}
	.customer-review-middle .breadcrumb li{padding-left: 5px; padding-right: 5px;}
	.customer-review-body blockquote p{padding: 0 20px;}
	.about:before{background-image: none; width: 0; height: 0;}
	
	.artist{background: url(../images/artist-mobile-bg.jpg) left top no-repeat;background-size: cover;}
	
}

@media only screen and (max-width: 585px){
	.magazine-quotes .tab-container ul li{padding: 0 1%;}
	.magazine-quotes .tab-container ul li a img{ max-width: 145px;}
	.about-image{bottom: -170px;}
	.about{padding-bottom: 200px;}
}

@media only screen and (max-width: 479px){
	.magazine-quotes .tab-container ul li{padding: 0 1%;}
	.magazine-quotes .tab-container ul li a img{ max-width: 100px; height: 45px;}
	.video-head ul li a{font-size: 11px;}
	.about-image{bottom: -125px;}
}

@media only screen and (max-width: 359px){
	.magazine-quotes .tab-container ul li{padding: 0 1%;}
	.magazine-quotes .tab-container ul li a img{ max-width: 85px; height: 40px;}
	.about-image{bottom: -100px;}
}

@media only screen and (min-width: 601px) and (max-width: 767px){
	/*.video-block iframe{max-width: 100%;}*/
}

@media all and (max-width: 768px) and (orientation:portrait){
	.wrapper{
	display:inline-table;
	width:100%;
	overflow-x: hidden;}
}