.header {
    background-color: #000;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: auto;
	height:102px;
	z-index:9999;
	transform-style: preserve-3d;

}

.content {
    height: 100%;
	min-height:100%;
    background-color: #f2f2f2;
	padding-left:10%;
	padding-right:10%;
	padding-top: 40px;
	padding-bottom: 40px;
}

.banner {
	width:100%;
    height: 500px;
    background-color: #afccab;
    margin-top: 102px;
	z-index:99;
	position: relative;
}

.carousel {
    height: 260px;
    background-color: #fff;
    margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 10%;
	padding-right: 10%;  cursor: pointer;
}

.container{  margin-left: auto ; 
  margin-right: auto ; width: 100% ; text-align: center;}

 #carousel .item{
       margin: 3px;
    }
    #carousel .item img{
        display: block;
        width: 100%;
		max-width: 321px;
        height: auto;
		max-height:240px;
    }
	
	
#icons{	 padding-top: 60px; width: 100% ; text-align: center; padding-bottom: 80px;
  margin-left: auto ; 
  margin-right: auto ;
 }
 
* {
  margin: 0;
}
html {
    position: relative;
    min-height: 100%;
    max-width: 100%;
    overflow-x: hidden;
	overflow-y: scroll;
}

body {
    margin: 0 0 160px; /* bottom = footer height */
	background-color: #f2f2f2;
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 160px;
	width:100%;}

.footer-text{color: #fff; text-align:center; font-size: 16px; line-height:25px; font-family: 'times new roman', serif; padding-left:40px; padding-right:40px;}

.logo {width: 240px; height: 39px; 	margin-left: auto ;
  	margin-right: auto ; padding-top:8px;}
	
	
H1 {color:#a38757; font-size:32px;  line-height:72px; font-weight: bold;
	font-family: 'times new roman', serif; text-align:left;}
	
.quote {color:#a38757; font-size:32px;  line-height:34px;font-weight:bold; margin-top: 100px; padding-top: 25px; padding-bottom: 25px;
	font-family: 'times new roman', serif; text-align:left;border-left: 2px solid #a38757; padding-left: 45px;}

.quote-name {color:#a38757; font-size:18px;  line-height:12px; font-weight:bold;
	font-family: 'times new roman', serif; text-align:left;}
	
.quote-title {color:#a38757; font-size:18px;  line-height:12px; font-style:italic; font-weight:normal;
	font-family: 'times new roman', serif; text-align:left;}

p{color:#000; font-size: 17px; line-height: 28px; padding-right:85px;
	font-family: 'arial', serif; text-align:left; margin-bottom:20px;}

  @media screen and (min-width: 0px) and (max-width: 321px) {
	H1 {color:#a38757; font-size:32px;  line-height:36px; font-weight: bold; padding-bottom: 20px;
	font-family: 'times new roman', serif; text-align:left;}
	
	.quote {color:#a38757; font-size:17px;  line-height:20px;font-weight:bold; margin-top: 100px; padding-top: 25px; padding-bottom: 25px;
	font-family: 'times new roman', serif; text-align:left;border-left: 2px solid #a38757; padding-left: 10px;}

	.quote-name {color:#a38757; font-size:15px;  line-height:12px; font-weight:bold;
	font-family: 'times new roman', serif; text-align:left;}
	
	.quote-title {color:#a38757; font-size:15px;  line-height:12px; font-style:italic; font-weight:normal;
	font-family: 'times new roman', serif; text-align:left;}

	p{color:#000; font-size: 15px; line-height: 24px; padding-right:10px;
	font-family: 'arial', serif; text-align:left;}
  }

  @media screen and (min-width: 322px) and (max-width: 699px) {
H1 {color:#a38757; font-size:32px;  line-height:36px; font-weight: bold; padding-bottom: 20px;
	font-family: 'times new roman', serif; text-align:left;}
	
.quote {color:#a38757; font-size:20px;  line-height:27px;font-weight:bold; margin-top: 100px; padding-top: 25px; padding-bottom: 25px;
	font-family: 'times new roman', serif; text-align:left;border-left: 2px solid #a38757; padding-left: 25px;}

.quote-name {color:#a38757; font-size:16px;  line-height:12px; font-weight:bold;
	font-family: 'times new roman', serif; text-align:left;}
	
.quote-title {color:#a38757; font-size:16px;  line-height:12px; font-style:italic; font-weight:normal;
	font-family: 'times new roman', serif; text-align:left;}

p{color:#000; font-size: 16px; line-height: 26px; padding-right:25px;
	font-family: 'arial', serif; text-align:left;}
  }


    #left
    {
      width:70%;
      float: left;
    }

    #right
    {
      margin-left: 70%; /* Change this to whatever the width of your left column is*/
    }

    .clear
    {
      clear: both;
    }
	
	
/* Icons */	
@media screen and (min-width: 1400px) {
	
	.site-footer {
  background: #000; padding-top:30px;padding-bottom:0px;
}

		.responsive {
        width : 100%; /* or max-width : 100% */
        height: auto;
		max-width: 340px;max-height:248px;display: block;
    }
	
.box {
  cursor: pointer;

  position: relative;
  overflow: hidden;
  width: 340px;
    height: 248px;
  margin-left:20px; margin-right:20px; 
  display: inline-block;  

}

.box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.box .overbox {
  background-color: #dd562f;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 340px;
  height: 248px;
  padding: 108px 0px;
}

.box:hover .overbox { opacity: 0.9; }

.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box .title {
  font-size:24px;
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
  font-family: 'times new roman', serif;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 20px;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;font-family: 'times new roman', serif;font-style:italic;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
}

@media screen and (min-width: 769px) and (max-width: 1399px) {
	
	.site-footer {
  background: #000; padding-top:30px;font-size: 14px; padding-bottom:20px;
}
	
		.responsive {
        width : 100%; /* or max-width : 100% */
        height: auto;
		max-width: 230px;max-height:168px;display: block;
    }
	
.box {
  cursor: pointer;

  position: relative;
  overflow: hidden;
  width: 230px;
  height: 168px;
  margin-left:15px; margin-right:15px; 
  display: inline-block;  

}

.box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.box .overbox {
  background-color: #dd562f;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 230px;
  height: 168px;
  padding: 65px 0px;
}

.box:hover .overbox { opacity: 0.9; }

.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box .title {
  font-size:20px;
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
  font-family: 'times new roman', serif;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 16px;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;font-family: 'times new roman', serif;font-style:italic;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
}

@media screen and (max-width: 768px) {
	
	.site-footer {
  background: #000; padding-top:30px;font-size: 14px; padding-bottom:30px; height:200px;
}
	
		.responsive {
        width : 100%; /* or max-width : 100% */
        height: auto;
		max-width: 230px;max-height:168px;display: block;
    }
	
.box {
  cursor: pointer;

  position: relative;
  overflow: hidden;
  width: 230px;
  height: 168px;
  margin-left:15px; margin-right:15px; margin-bottom:30px;
  display: inline-block;  

}

.box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.box .overbox {
  background-color: #dd562f;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 230px;
  height: 168px;
  padding: 65px 0px;
}

.box:hover .overbox { opacity: 0.9; }

.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box .title {
  font-size:20px;
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
  font-family: 'times new roman', serif;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 16px;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;font-family: 'times new roman', serif;font-style:italic;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
}


@media screen and (max-width: 569px) {
	
	.site-footer {
  background: #000; padding-top:30px;font-size: 14px; padding-bottom:30px; height :225px;
}
}

@media screen and (max-width: 479px) {
	
	.site-footer {
  background: #000; padding-top:30px;font-size: 14px; padding-bottom:30px; height :375px;
}
}

@media screen and (max-width: 321px) {
	
	.site-footer {
  background: #000; padding-top:30px;font-size: 14px; padding-bottom:30px; height :500px;
}
}



@media only screen and (min-width: 1280px) {
a[href^=tel]{
    color:#fff;
    text-decoration:none;
	border-bottom: 0px solid #000;
}
}

@media only screen and (min-width: 0px) and (max-width:1279px) {
a[href^=tel]{
    color:#fff;
    text-decoration:none;
	border-bottom: 0px solid #fff;
}
}
.appleLinks a {color:#ffffff; text-decoration: none;}
.appleLinksBlack a {color:#000000; text-decoration: none;}

		#back-top{width:40px;
            height:40px;
            position:fixed;
			z-index:999;
			}
			
		#back-top a{width:40px;
            height:40px;
            position:fixed;
            bottom:15px;
            right:15px;
            background:#bbbbbb;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
        }
		#back-top a:hover{
            background:#fff;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
        }
		.back-top{padding-left:13px;padding-top:12px;}
		
		
.footer-link {color:#fff;border-bottom: 1px solid #666;}

.footer-link:hover{color:#fff;border-bottom: 1px solid #dd562f;}

.footer-divider {color:#666;}		

	#facebook-icon 
	{

	margin: 0 auto;
		
	margin-top:10px;		
	width: 22px;
	height: 22px;

	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	
	background-image: url('../images/facebook-logo-grey-square.png');
	}
	
	#facebook-icon:hover
	{
	width: 22px;
	height: 22px;

    cursor: pointer;
	
	-webkit-transition: all 0.3s ease-in-out;

	transition: all 0.3s ease-in-out;

	
	-webkit-transform: rotate(25deg); 
	-moz-transform: rotate(25deg); 
	-o-transform: rotate(25deg);
	-ms-transform: rotate(25deg); 
	
	background-image: url('../images/facebook-logo-square.png');
	}
	
.title-text{text-align:center; color: #fff;}
.title-text-gold{text-align:center; color: #a38757;}
.title-text-silver{text-align:center; color: #a7a7a7;}

#time-top{height:110px;}
#history-top{height:110px;}
#turntables-top{height:110px;}
#tonearms-top{height:110px;}
#spares-top{height:110px;}

#turntable-page{height:110px;}
#spares-page{height:75px;}
#contact-page{height:70px;}


/* Remove dotted focus */
a:active,a:focus {
 outline: none;
 }

.gold-factory-border {border:#A07D45 2px solid; margin-top:6px; margin-bottom: 30px;}

.gold-chrome-border {border:#A07D45 2px solid; margin-top:6px; margin-bottom: 6px;}

.gold-text {color:#A07D45;}

@media only screen and (min-width: 1280px) {
.address{max-width:1082px; width:100%; height:65%; text-align:left; margin-left: auto; margin-right: auto; border-left: solid 2px #a38757; padding: 20px 60px 20px 60px;
    
-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	
	    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
	
	    -webkit-column-rule-width: 2px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 2px; /* Firefox */
    column-rule-width: 2px;
	
	    -webkit-column-rule-color: #A07D45; /* Chrome, Safari, Opera */
    -moz-column-rule-color: #A07D45; /* Firefox */
    column-rule-color: #A07D45;
	
	    -webkit-column-gap: 110px; /* Chrome, Safari, Opera */
    -moz-column-gap: 110px; /* Firefox */
    column-gap: 110px;
	}
}
	
@media only screen and (min-width: 0px) and (max-width: 1279px) {
.address{max-width:1082px; width:100%; height:65%; text-align:left; margin-left: auto; margin-right: auto; border-left: solid 2px #a38757; padding: 20px 0px 20px 20px;
    
-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	
	    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
	
	    -webkit-column-rule-width: 2px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 2px; /* Firefox */
    column-rule-width: 2px;
	
	    -webkit-column-rule-color: #A07D45; /* Chrome, Safari, Opera */
    -moz-column-rule-color: #A07D45; /* Firefox */
    column-rule-color: #A07D45;
	
	    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
	}
}
		.responsive-address-image {
        width : 100%; /* or max-width : 100% */
        height: auto;
		max-width: 1200px;max-height:800px;display: block;
    }
	

#download{padding-top: 0px; width: 100% ; height: 100%; text-align: center; padding-bottom: 0px;
  margin-left: auto ; 
  margin-right: auto ;}
  
.download-button {  cursor: pointer;color:#fff; border: #fff 2px solid;
  position: relative; 
  overflow: hidden;
  width: 180px;
  padding:8px 6px 8px 6px; font-size:16px;
  display: inline-block; background-color: #A07D45;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  transition: all 500ms ease-out;}
  
  a.download-button:hover, a.download-button:active {color:#A07D45; background-color: #fff;  -webkit-transition: all 300ms ease-out; border: #A07D45 2px solid;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out; }


	.responsive-turntable {
        width : 100%; /* or max-width : 100% */
        height: auto;
		max-width: 780px;max-height:470px;display: block;  margin-left: auto ; 
  margin-right: auto ;
    }
	
		.responsive-tonearm {
        width : 100%; /* or max-width : 100% */
        height: auto;
		max-width: 780px;max-height:470px;display: block;  margin-left: auto ; 
  margin-right: auto ;
    }
	
			.responsive-home-image {
        width : 100%; /* or max-width : 100% */
        height: auto;
		max-width: 780px;max-height:500px;display: block;  margin-left: auto ; 
  margin-right: auto ;
    }