/*------------------------------------*\
    RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}
/* apply a natural box layout model to all elements */


html{
    height:101%;
    background-color:rgb(53,53,53); 
   	background-image: url('http://www.music-room.com/app/images/stripe8.png');
}

body{
    font-family:Raleway,Arial,Verdana,sans-serif;
    font-weight: 250;
    font-size:0.75em;
    color:#333;
    width: 100%;
}

img{
	outline: none;
	border:none;
}

a{
	text-decoration: none;
	outline: none;

}

a:hover{
	color:rgb(166,32, 111);
}
.top a{
	rgb(53,53,53);
}

hr{
	border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}


a .no_effect{
	text-decoration: none;
	border:none;

}

a .no_effect:hover{
	text-decoration: none;
	border:none;
	
}


.list_point a:hover{
background-color:rgb(166,32, 111);
color: rgb(243, 244, 245);
cursor:pointer;
}




/*------------------------------------*\
    NAVIGATION background-color: rgb(206,0, 11);
\*------------------------------------*/

	#nav{
		width: 100%;
		height:50px;
		padding-bottom: 8px;
		float: left;
		cursor: pointer;
		}

	.menu {
		margin: 0 1px 0 0;
		width: auto;
		float:right;
		border: none;
		font-size: 1.2em;
		cursor: pointer;
	}

	.parent:hover{
		background-color: rgb(166,32, 111);
	}
	
	.menu .wrapper {
		display: inline-block;
		width: auto;
		margin: 0 0 0 0;
		height: 45px;
		position: relative;
		cursor: pointer;
	}


	
	.menu .parent {
		padding: 80px 10px 0 10px;
		cursor: pointer;
		display: block;
		line-height: 15px;
		height: 30px;
		font-weight: 200;
		z-index: 2;
		font-size: 1.2em;
		position: relative;
		text-align: center;
		color:rgb(237,238,239);
	}
	
.menu .parent a{
	text-decoration: none;
	color: rgb(243, 244, 245);
	font-weight: 200;
	border: none;
	cursor: pointer;
}

.brand_width{
	width: 120px;
}

	
	.menu .content {
	position: absolute;
	top: 0;
	display: block;
	z-index: 5;
	height: 0;
	width: 200px;
	padding-top: 110px;
	-webkit-transition: height .5s ease;
	-webkit-transition-delay: .6s;
		
	}
	
	.menu .wrapper:active .content {
		height: auto;
		z-index: 15;
		-webkit-transition-delay: 0s;
	}
	
	.menu .content:hover {
		height: auto;
		z-index: 15;
		-webkit-transition-delay: 0s;
	}
	
	
	.menu .content ul {
		background: rgb(53,53,53);		
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: 100%;

	
	}
	
	.menu .content ul a {
		text-decoration: none;
		color: rgb(243, 244, 245);
		font-weight: 200;
		border: none;
	}
	
	.menu .content li:hover {
		background-color: rgb(166,32, 111);
		color: #333;
	}
	
	.menu .content li {
		list-style: none;
		color: #888;
		font-size: 1em;
		line-height: 30px;
		height: 30px;
		padding-left: 10px;
		border-top: 1px solid #ccc;
		text-align: left;
	}
	
.wide{
	width:140px;

}


.social_link{
	width: 34px;
	height: 26px;
	padding-top: 10px;
	margin-bottom: 1px;
	color: rgb(237,238,239);
	cursor:pointer;
}

.social_link a{
	color: rgb(237,238,239);;
}

.menu_social{
	width: 34px;
	margin-left: 1px;
}

/*
background-color: rgb(0,214,123); green
background-color:#A61B1B; red
color: rgb(243, 244, 245);
background-color: rgb(24,142,242);
color: rgb(237,238,239);
*/

.twitter{
background-color: rgb(24,142,242);

}

.gplus{
background-color: #A61B1B;
}

.rss{
background-color:rgb(0,214,123);

}

.social_link:hover{
background-color: rgb(166,32, 111);
cursor:pointer;
}

/*------------------------------------*\
    SECTIONS
\*------------------------------------*/

.fold{
    border-bottom: 1px solid rgba(55, 55, 55, 0.6);
    margin: 0;
}

.page_top{
	float: right;
	width: 20px;
	height: 20px;
}

.reasons_why{
	width: 94%;
	margin: 3%;
	font-size: 1.2em;
	line-height: 1.3em;

}

.list_point{
font-size:0.8em;
}


.points_box{
	width: 550px;
	margin-left: 38%;
	margin-bottom: 89px;
	padding-top: 55px;
}

.location_box{
	width: 75%;
	margin-bottom: 89px;
	padding-top: 55px;
	margin-left: 8%;
	margin-top: 13%;
}

.contact{
	background-image: url('app/images/shop_images/contact_bg.jpg');
	overflow: hidden;
	min-height: 1000px;
}

.thirty{
	width: 26%;
	padding: 2%;
}

.seventy{
	width: 66%;
	padding: 2%;
}

#find_us{
	margin-top: 2%;
	height: 100%;
}



.box_30{
	display: inline;
	float: left;
	width: 30px;
	height: auto;
	margin-right: 8px;
}


.auto_box{
display: inline;
float: left;
width: auto;
height: 30px;
}

.contents{
	display: block;
	float: left;
	width: 100%;
	margin-bottom: 8px;
}

.gap{
	margin-right: 8px;
	font-size: 2.1em;

}



.section_heading{
 margin: 2%;
 width: 96%;
}

.section_heading a{
	color:rgb(237, 238, 239);
}

.section_heading a:hover{
	color:rgb(166,32, 111);
}

.feed_me{
	display: inline;
	margin:5px 13px 3px 13px;
}

section{
padding: 0 2% 0 2%;
height: auto;
}

.sectionize{
	margin:0 0 13px 0;
	width: 88%;
	
}

.content{
	
}
.text_address{
	width:80%;
	margin:1% 10% 0 10%;
}

.container{
width:1066px;
min-height:1000px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
background-color: rgb(243,244,245);
}


.row{
float:left;
width:100%;
padding: 0 0 0 0;
height: auto;
background-color: rgb(237,238,239);
}


header{
width: 100%;

padding:none;
min-height: 120px;
}

header h1{
font-size: 5em;
width:100%;
}

footer section{
float: left;
height:100%;
width:29%;
padding-right: 3.3%;
line-height: 1.5em;

}

footer{
float:left;
width: 100%;
margin:0;
margin-top: 89px;
list-style: none;
padding-bottom: 0;
}

.baseline{
	float: left;
	width:100%;
	height: 18px;
	color:rgb(212,212,212);
	text-align: center;
	font-weight: 100;
	margin: 10px 0 0 0;
}

footer li{
list-style: none;
}

footer a{
text-decoration: none;
color: red;
}

section h1{
margin-bottom: 8px;
}

.desc{
width:100%;
font-size: 1.3em;
}

.product_load{
	
	margin: 34px auto 34px auto;
	width: 89%;
}

.product_data{
float: left;
padding:20px 8px 20px 8px;
width:55%;
margin: 0 0 38px 0;
}

.product_data a{
text-decoration: none;
color: rgb(166,32, 111);
font-weight: 200;
border: none;
}

.product_logo{
padding:0 8px 20px 8px;
margin:0 8px 0 0;
width:35%;
}

.product_logo img{
	width: 100%;
}

.logo{
	width:100px;
	height: 80px;
	float: left;
	margin-top: 24px;
	margin-right: 13px;
	margin-bottom: 3px;
	margin-left: 24px;
}

.logo img{
	width: 100%;
}

.price{
	margin:10px 0 0 0;
}

/*--112358 13 21 34----------------------------------*\
    Content
\*------------------------------------*/

.quote{
	width: 45%;
	float: left;
	height: auto;
	margin: 2% 2% 2% 0;
}

.brand_quote{
	width: 80%;
	float: left;
	height: auto;
	margin: 2% 0 2% 13%;
}

.quote_box{
	width: 39%;
	float: right;
	height: auto;
	margin: 55px 0 0 0;
	overflow: hidden;
}

.brand_quote_box{
	width: 40%;
	height: auto;
	margin-top: 8px;
}

.brand_quote_words{
	font-size: 1.2em;
}

.quote_box a{
	text-decoration: none;
}

.quote_box h2{

}


.brand_quote_box a{
	text-decoration: none;
}


.attr{
margin-top:5px;
}

.center{
	text-align: center;
}

.four_col{
	width:31.33333333%;
	float: left;
	margin-right: 2%;
	margin-top: 5%;
}

.four_col:hover{
color:#A61B1B !important;
}

.br{
	color:#A61B1B;
	font-weight: 400;
}

.other_products_grid_item{
width:133px;
height: 100px;
float: left;
z-index: 0;
margin:0 8px 12px 5px;
}

.name_pop{
opacity: 0;
transition:opacity 2s;
-webkit-transition:opacity 2s;
float: left;
width:133px;
height: 50px;
margin: 50px 0 0 0;
z-index: 5;
clear: both;
text-align: center;
background-color: rgb(211,211,211);
color: rgb(53,53,53);
}

.other_products_grid_item:hover .name_pop{
opacity: 1;
}

.image_holder{
overflow: hidden;
width:1000px;
height:650px;

}

.overlay{
float: left;
top:250px;
max-width: 748px;
opacity:1;
transition:opacity 2s;
-webkit-transition:opacity 2s;
background-color: rgb(244,244,244);
padding: 28px 28px 28px 18px;
}

.overlay span{
	margin: 10px 0 0 0;
}

.low{
top:300px;
}

.image_head{
float: left;
display: block;
width: 100%;
margin:30px 0 0 0;
}


.image_holder:hover .overlay{
opacity: 1;
}

.eightpad{
	padding-left: 8px;
}

.narrow{
max-width: 578px;
line-height: 1.1;
}

.right{
float: right;
}
.left{
	float: none;
}

.full{
width: 97%;
height: auto;
float: left;
}

.brand_full{
width: 100%;
height: auto;
float: left;
}


.full_head{
	width:86%;
	margin-left: auto;
	margin-right: auto;
}


	


.ten_left{
	margin-left: 10px;
}

.twenty_left{
	margin-left: 20px;
}

.other_products{
width: 94%;
height: auto;
float: left;	
}

.almost_full{
width: 98%;
height: auto;
float: left;
}


.product_array{
width: auto;
height: auto;
position: relative;
margin: 13px 0 0 0;
}

.product_internal{
	margin-left: auto;
margin-right: auto;
}


.thumb{
margin:2px;
z-index: 2;
}

address{
margin: 100px 0 0 0;
text-align: center;
padding: 0;
}

.feedpic{
width:200px;
height: 200px;
overflow: hidden;
float: left;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}



.aboutpic{
width:200px;
height: 200px;
overflow: hidden;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
display: block;
margin: 8px 0 21px 0;
}

.aboutpic img{
	width: 200%;
}


.image_center{
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 8px;
}

.feedcopy{
	width: 380px;
	float: left;
	margin: 0 0 0 18px;
	font-size: 1.1em;
}

.feed_entry{
	width: 42%;
	margin:1%;
	padding: 1%;
	height:500px;
	overflow: hidden;
}

.feed_entry:hover .entry_head:hover{
	color: rgba(166,0, 21, 0.8);

}

.press_entry{
width: 42%;
margin:21px 34px 21px 21px;
padding: 18px 8px 0 8px;
height:210px;
overflow: hidden;
}

.press_entry h2{
font-weight: 400;
margin-bottom: 13px;
width: 90%;
}

.press_pic{
width:200px;
height: 200px;
float: left;
overflow: hidden;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
margin: 8px 21px 21px 8px;
}


.press_pic img{
width: 180%;
}
.press_text{
	padding-left: 13px;
	border-left: 1px solid #353535;
	float: left;
	height: 100%;
	width:200px;
}

.press_intro{
	float: left;
	font-size: 1.1em;
	height: 70%;
	width: 200px;
	
	overflow: hidden;
}

.three_cols{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:21px; /* Firefox */
-webkit-column-gap:21px; /* Safari and Chrome */
column-gap:21px;

}

.top{
height: 100px;
width: 100%;
vertical-align: bottom;
display:table-cell;
}

.bottom{
height: auto;
width: 100%;
padding-top: 13px;
border-top: solid;
border-width:1px; 
border-color: rgb(51,53, 134);
}

.underline{
border-bottom: solid;
border-width:1px; 
border-color: rgb(51,53, 134);
}

.feed_entry h2{
font-weight: 400;
font-size: 1.8em;
font-family: 'Arvo', serif;
margin-bottom: 8px;
}

a{
text-decoration: none;
border:none;
}

.newsfeed{
	margin:13px 2% 21px 2%;
}
.big_headroom{
	padding-top: 89px;
}
.headroom{
	padding-top: 1px;
}

.bottomroom{
	padding-bottom: 34px;
}

.bottom_margin{
	margin-bottom: 34px;
}

.big_bottomroom{
	padding-bottom: 144px;
}

.iconize{
	margin-right: 8%;
	cursor:pointer;
}

.iconic:hover{
	color: rgb(166,32, 111);
}

.iconize:hover{
	color:#A61B1B;
	cursor:pointer;
}

.icon_box{
	margin-top: 21px;
}

.red_text{
	color:#A61B1B;
}


/*------------------------------------*\
    Colour 1 1 2 3 5 8 13 21 34 55 89 144
\*------------------------------------*/

.fade{	
	-webkit-transition: all 300ms ease-in-out 100ms;
	-moz-transition: all 300ms ease-in-out 100ms;
	-ms-transition: all 300ms ease-in-out 100ms;
	-o-transition: all 300ms ease-in-out 100ms;
	transition: all 300ms ease-in-out 100ms;
}

.fast_in{

	-webkit-transition: all 100ms ease-in-out 600ms;
	-moz-transition: all 100ms ease-in-out 600ms;
	-ms-transition: all 100ms ease-in-out 600ms;
	-o-transition: all 100ms ease-in-out 600ms;
	transition: all 100ms ease-in-out 600ms;

}


.slowfade{	
	-webkit-transition: all 500ms ease-in-out 100ms;
	-moz-transition: all 500ms ease-in-out 100ms;
	-ms-transition: all 500ms ease-in-out 100ms;
	-o-transition: all 500ms ease-in-out 100ms;
	transition: all 500ms ease-in-out 100ms;
}


.fatpad{
	padding: 0 18% 0 18%;
}

.fatpad_right{
	padding: 0 34% 0 13px;
}


.fat{
	padding:13px 0 20px 0;
}

.tenpad{
padding: 0 13px 0 8px;
}

.nopad{
	padding-bottom: 0;
}

.yellow{
background-color: rgb(239,242,24);
padding: 0 8px 0 8px;
}

.padtextyellow{
background:#eff218;
box-shadow:0.2em 0 0 #eff218,-0.2em 0 0 #eff218;
-moz-box-shadow:0.2em 0 0 #eff218,-0.2em 0 0 #eff218;
-webkit-box-shadow:0.2em 0 0 #eff218,-0.2em 0 0 #eff218;
margin-left: 0.2em;
}

.red{
background-color:#A61B1B;
color: rgb(243, 244, 245);
}

.beige{
background-color: rgb(237,238,239);
color: rgb(53,53,53);
}

.padtextbeige{
background:#edeeef;
box-shadow:0.2em 0 0 #edeeef,-0.2em 0 0 #edeeef;
-moz-box-shadow:0.2em 0 0 #edeeef,-0.2em 0 0 #edeeef;
-webkit-box-shadow:0.2em 0 0 #edeeef,-0.2em 0 0 #edeeef;
margin-left: 0.2em;
}


.blue{
background-color: rgb(24,142,242);
color: rgb(237,238,239);
}

.blue_text{
color: rgb(24,142,242);
}

.dark_blue_text{
	color: rgb(166,32, 111);
}


.green{
background-color: rgb(0,214,123);
}

.padtextgreen{
background:#00d67b;
box-shadow:0.2em 0 0 #00d67b,-0.2em 0 0 #00d67b;
-moz-box-shadow:0.2em 0 0 #00d67b,-0.2em 0 0 #00d67b;
-webkit-box-shadow:0.2em 0 0 #00d67b,-0.2em 0 0 #00d67b;
margin-left: 0.2em;
}

.dark{
background-color: rgb(53,53,53);
color: rgb(243, 244, 245);
}

.reverse{
color: rgb(53,53,53);

}

.lightgrey{
background-color: rgb(224,224,224);
}

.darkgrey{
background-color: rgb(105,105,105);
}


/*------------------------------------*\
    Type
\*------------------------------------*/

.ital{
font-style: italic;
}

.big{
font-size: 3em;
font-weight: 400;
}

.big_n_pretty{
	font-size: 3em;
	font-weight: 100;
}

.massive_n_pretty{
	font-size: 4.3em;
	font-weight: 100;
}


.massive_n_mild{
	font-size: 3.4em;
	font-weight: 200;
}

.big_n_tough{
	font-size: 3em;
	font-weight: 700;
}

.medium_n_pretty{
	font-size: 2.3em;
	font-weight: 100;
}
.small_n_pretty{
	font-size: 1.3em;
	font-weight: 100;
}
.tiny_n_pretty{
	font-size: 1em;
	font-weight: 200;
}

.big_n_athletic{
	font-size: 2.1em;
	font-weight: 200;
}

.medium_n_athletic{
	font-size: 1.3em;
	font-weight: 400;
}

.small_n_chubby{
	font-size: 2em;
	font-weight: 400;
}

.medium{
font-size: 1.3em;
font-weight: 400;
margin: 5px 0 8px 0;
}

.bod{
font-size: 1.1em;
font-weight: 400;
}

.phone{
font-weight: 200;
font-size: 0.8em;
color: rgb(53,53,53);
margin: 3px 0 0 0;
}

.phone a{
text-decoration: none;
color: rgb(53,53,53);
}

.light{
	font-weight: 100;
}

.arv{
font-family:'Arvo', Helvetica Neue, Helvetica, Arial, sans-serif;
}

.lato{
font-family:'Lato', Helvetica Neue, Helvetica, Arial, sans-serif;
}

.med_opacity{
	opacity: 0.5;
}

.cross_out{
	float: right;
	background-color: rgba(222,222,222,0.7);
	width: 10px;
	height: 10px;
	color: rgba(53,53,53,0.7);
	margin:  -10px -10px 0 0;
	text-align: center;
	font-size: 0.7em;
	
}

.cross_out:hover{
	background-color: rgba(53,53,53,0.7);
	color: rgba(222,222,222,0.7);
	cursor:pointer;

}

.hidden{
	display: none;
}


.brand{background-color: none;}




.brandoverlay{
float: left;
top:250px;
max-width: 548px;
opacity:1;
transition:opacity 2s;
-webkit-transition:opacity 2s;
padding: 28px 28px 28px 18px;
}


.slider{
	width: 100%;
	height: 328px;
	overflow: hidden;
}



.slide_info{
	width: 65%;
	margin:13px 16% 0 1%;
    
}

.tawny{
	background-color: rgb(221, 222, 223);
}

.slide_pic{
	height: 328px;
	float: left;
	display: inline;
	margin:0 2px 0 0;
}


.image_slider_cassette{
	height: 328px;
	margin-left: -750px;
}

.shuttle{
	height: 50px;
	width: 100%
}

.pause{
	font-size: 1.8em;
	font-weight: 100;
	padding-top: 8px;
	padding-bottom: 2px;
	width: 32%;
	height: 24px;
	z-index: 3;
	margin: 8px 1px 0 0;
	text-align: center;
	padding-bottom: 13px;
	cursor:pointer;
}


.ctrl{
	width: 33%;
	height: 24px;
	z-index: 3;
	margin: 8px 0 0 0;
	text-align: center;
	padding-bottom: 21px;
	margin-right: 1px;
	cursor:pointer;
}

.trans{

}

.transport{
	width:15%;
}


.ctrl:hover{
	background-color: rgb(166,32, 111);
}

.pause:hover{
	background-color: rgb(166,32, 111);
}
#next{

}


#last{
}

#pause{
	float: left;
}

.top_line{
	padding:32px 28px 8px 28px;
}

.top_n_tail{
	margin:12px 0 12px 0;
}