@charset "UTF-8";

html,
body {
	margin:0;
	padding:0;
	border: none;
}

a {
	color: #ffffff;
	text-decoration: none;
	transition: all .5s;
	-o-transition: all .5s;
   -ms-transition: all.5s;
   -moz-transition: all .5s;
   -webkit-transition: all .5s;

}

a.email:hover {
	text-decoration: underline;
}

a.nav {
	color:#282828;
	transition: color .5s;
	-o-transition: color .5s;
   -ms-transition: color .5s;
   -moz-transition: color .5s;
   -webkit-transition: color .5s;
   padding-bottom: 36px;
}

a.nav_footer {
	color:#ffffff;
	transition: color .5s;
	-o-transition: color .5s;
   -ms-transition: color .5s;
   -moz-transition: color .5s;
   -webkit-transition: color .5s;
   padding-bottom: 36px;
}

a.nav_footer:hover {
	color:#EAAC00;
}

a.social {
}

a.social:hover {
	background-color: #EEAC00;
}

a.nav:hover {
	color: #EAAC00;
	border-bottom:solid 3px #EAAC00;
}

a.email_body {
	color:#282828;
}

a.email:hover,
a.email_body:hover {
	color:#EEAC00;
	text-decoration:none;
}

a.nav_active {
		color: #EEAC00;
	border-bottom:solid 3px #EAAC00;
	   padding-bottom: 36px;
}

a.nav_mobile {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	font-size: 24px;
	color: #282828;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

a.nav_mobile:hover {
	transition: 0.3s;
	color: #EEAC00;
}
a.body {
	color:#282828;
	text-decoration: none;
	padding: 10px 20px 10px 20px;
	border: solid 1px #282828;
}

a.body:hover {
	color: #EAAC00;
	border: solid 1px #EAAC00;
}

a.header {
	color:#ffffff;
	text-decoration: none;
	padding: 10px 20px 10px 20px;
	border: solid 1px #ffffff;
}

a.header:hover {
	color: #EAAC00;
	border: solid 1px #EAAC00;
}

h1 {
	font-family: 'Playfair Display SC', serif;
	font-size: 30px;
	color: #282828;
	letter-spacing: 0.1em;
}

h2 {
/*	font-family: 'Playfair Display', serif;
*/	
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: #282828;
	line-height: 17px;
	letter-spacing: 0.1em;
	margin: 0;
	padding: 0;
}

h3 {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	color: #282828;
	font-weight: 200;
	letter-spacing: 0.2em;
}

h4 {
	font-family: 'Playfair Display SC', serif;
	font-size: 34px;
	color: #282828;
	border:solid 2px #282828;
	transition: all .5s;
}

h4:hover {
	color:#EAA002;
	background-color:#ffffff;
	border: solid 2px #EAA002;
}	

h5 {
	font-family: 'Playfair Display', serif;
	font-size: 12px;
	color: #282828;
}

h6 {
	font-family: 'Playfair Display', serif;
	font-size: 12px;
	color: #ffffff;
}


#lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#282828; 
    text-align:center;
}
	
#header {
	position:fixed;
	z-index:100;
	width:100%;
	height:100px;
	background-color:#ffffff;
	box-shadow:0px 2px 10px #888888;
}

#header_mobile {
	display: none;
	-webkit-appearance: none;
}

#logo {
	white-space: nowrap;
	padding: 3px;
	padding-left:10px;
	padding-right:10px;
	width: 250px;
	height: 64px;
	border: solid;
	border-color: #ffffff;
	border-width: 1px;
	text-align: center;
}

#logo_mobile {
	display: none;
}

#nav {
	margin: 0 auto;
	width: 100%;
	text-align: center;
	padding-top: 20px;
}

#nav_button {
	width: 8%;
	margin-top: 23px;
	padding-left: 30px;
	padding-right: 30px;
}

#social_footer {
	position: relative;
	width:20px;
	left: 95%;
	margin-top:-84px;
}

#social_footer img {
	margin-bottom:-4px;
	margin-top:4px;
}

#footer {
	background-color: #282828;
	width: 100%;
	height: 120px;
	clear:left;
}

#footer_text {
	font-size: 12px;
	padding-left: 20px;
	padding-top: 5px;
}

#footer_sitemap {
	position:absolute;
	text-align:center;
	width:100%;
	margin:0 auto;
}

ul {
	-webkit-padding-start: 0;
	margin: 0 auto;
	display: inline-block;
}

li {
	display: inline-block;
	text-align: center;
	list-style-type: none;
	float: left;
}

hr {
	margin: 0 auto;
	border-style: inset;
	border-width: 1px;
	width: 200px;
}

/*  Begin Index Page  */

#calendly {
}

.calendly-inline-widget {
	width:100%;
	height:auto;
}

.partner {
	padding: 2%;
}



#panel_1 {
	width: 100%;
	height:600px;
	background:url(images/Home-Page-Main-Photo.png) no-repeat center center;
	-webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;
}

#panel_1_tuning {
	width: 100%;
	height: 600px;
	background:url(images/tuning.png) no-repeat center center;
	-webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;
}
	

#image_1_text {
	width: 80%;
	text-align: center;
	margin: 0 auto;
	padding-top: 200px;
}

#panel_2 {
	width: 100%;
	height: 340px;
}

#panel_2_text {
	width: 80%;
	text-align: center;
	margin: 0 auto;
	padding-top: 50px;
}

#index_button {
	text-align:center;
	margin-left:12%;
}

#quote_button.index,
#tuning_button.index,
#repair_button,
#restoration_button {
	float:left;
	text-align: center;
	width: 25%;
	padding-left: 20px;
	padding-right: 20px;
	z-index:50;
}

#sales_button {
	position: relative;
	text-align: center;
	width: 150px;
	padding-left: 20px;
	padding-right: 20px;
	z-index:50;
}


#quote_button {
	margin: 0 auto;
	width: 35%;
}


#testimonials {
	position: relative;
	width:100%;
	margin-left: 0;
	overflow-x: hidden;
}

/*slider*/

#slider {
	height: 145px;
	overflow: hidden;
}

.item-1, 
.item-2, 
.item-3 {
	position: relative;
  display: block;
  z-index:1;
  
  width: 80%;
  margin-left:0%;
  

	animation-duration: 30s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1,
.item-2,
.item-3 {
	height: 145px;
	text-align: left;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
	margin-top: -145px;
}

.item-3{
	animation-name: anim-3;
	margin-top:-145px;
}
@keyframes anim-1 {
	0%, 8.3% { margin-left: -100%; opacity: 0; }
  8.3%,25% { margin-left: 10%; opacity: 1; }
  33.33%, 100% { margin-left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { margin-left: -100%; opacity: 0; }
  41.63%, 58.29% { margin-left: 10%; opacity: 1; }
  66.66%, 100% { margin-left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { margin-left: -100%; opacity: 0; }
  74.96%, 91.62% { margin-left: 10%; opacity: 1; }
  100% { margin-left: 110%; opacity: 0; }
}

/* end slider */

#panel_3 {
	margin-top:50px;
	width: 100%;
	height:300px;
	background:url(images/action.png) no-repeat center center;
	-webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;
}

#panel_4 {
	width: 80%;
	text-align: center;
	margin: 0 auto;
	padding-top: 50px;
}

table {
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
}

img.brand {
	width: 240px;
	height: 50px;
}

td {
	padding: 10px;
	width: 20%;
}

td.tech {
	padding: 0;
}

/*  Begin About Page  */

#about_banner {
	text-align: center;
	padding-top:50px;
	margin-left:10%;
	width: 80%;
	height: auto;
}

#about_tim {
	margin-left: 25%;
	width: 50%;
}

#about_techs {
	width: 100%;
}

#about_han,
#about_rie {
	width: 100%;
}

#about_han {
	margin-left: 0%;
}


#about_location {
	margin:0 auto;
	width:80%;
	height:auto;
	margin-top: 50px;
}

#location_text {
	text-align: center;
	width: 60%;
	margin-left: 20%;
	padding-right:5%;
}


#map {
	width:25em;
	height: 25em;
	padding-left:5%;
	float:left;
}

#spacer {
	width:100%;
	height:50px;
	clear:left;
}

/* Begin Repairs Page */

#repairs_image {
	padding-top:50px;
}

#repairs_text,
#tuning_text,
#repairs_info {
	padding-top:50px;
	width:80%;
	margin:0 auto;
	text-align: center;
}

/* Begin Restorations Page */

#restorations_text {
	width:80%;
	margin:0 auto;
	text-align:center;
	padding-top:50px;
}

#restorations_image {
	width:100%;
	padding-top:50px;
}
	
/* Begin Sales Page */
#back {
}

#sales_header {
	width:80%;
	text-align:center;
	margin-left:10%;
	padding-top:50px;
}

#sales_image {
	text-align:center;
	margin:0 auto;
	padding-top:50px;
	padding-bottom:50px;
}

#sales_item1,
#sales_item2,
#sales_item3,
#sales_item4,
#sales_item5 {
	position: relative;
	width: 80%;
	left:10%;
}

#sales_info {
	text-align: center;
	width: 40%;
	float: left;
}

#sales_img {
	width:40%;
	float: right;
}

#sales_button {
	width:50%;
	margin:0 auto;
}

#steinway_header {
	text-align: center;
}

#steinway_panel_1 {
	width: 90%;
	margin-left: 10%;
}

#steinway_panel_1_text {
	float: left;
	width: 40%;
	text-align: left;
}

#steinway_panel_1_img {
	width: 50%;
	float: right;
}

#steinway_panel_2 {
	text-align: center;
	float: none;
	width: 90%;
	margin-left: 5%;
}

#steinway_panel_3 {
	width: 80%;
	margin-left: 10%;
}

#steinway_panel_3_text {
	width: 50%;
	text-align:left;
	float:left;
}

#steinway_panel_3_img {
	float: right;
	width: 50%;
}


.turntable {
  margin: 0px; 
}
.turntable ul {
  padding: 0px;
  margin: 0px; 
}
.turntable ul li {
  list-style-type: none;
  display: none; 
}
.turntable ul li img {
  width: 70%; 
}
.turntable ul li.active {
  display: block; 
}

#gallery {
	width: 90%;
	margin-left: 5%;
	height: auto;
}

#plans_container {
	margin:0 auto;
	display:block;
	width: 100%;
}

#plan {
	float: left;
	padding: 1%;
	margin: 1%;
	width: 29%;
	height: 580px;
	text-align: center;

}

br2 {
	display: block;
	margin: 5px 0;
}

@media only screen and (max-width: 767px) {
	
	
	#header {
		display: none;
	}
	
	#header_mobile {
		display: block;
	}	
	
	#footer {
		display: none;
	}
	
	h1 {
		font-size: 22px;
	}
	
	a.body {
		font-size: 18px !important;
		color:#282828;
		text-decoration: none;
		padding: 5px 10px 5px 10px;
		border: solid 1px #282828;
	}
	
	a.body:hover {
		color: #EAAC00;
		border: solid 1px #EAAC00;
	}

	
	/* Mobile Menu */
			ul {
			  padding: 0;
			  list-style-type: none;
			}
			
			h2 {
				font-size: 18px !important;
			}
			
			#testimonials {
				overflow: hidden;
			}
			
			hr.mobile {
				margin-top: -80px;
			}
			
			nav {
				width: 100%;
				position: fixed;
			  background-color: #282828;
			  height: 65px;
			  z-index: 999;
			  box-shadow:0px 2px 10px #282828;
			}
			
			#menu_title {
				text-align: center;
				position: absolute;
				width: 40%;
				margin-left: 30%;
			}
			
			#menuToggle {
			  display: flex;
			  flex-direction: column;
			  position: relative;
			  top: 25px;
			  left: 25px;
			  z-index: 1;
			  -webkit-user-select: none;
			  user-select: none;
			}
			
			#menuToggle input
			{
			  display: flex;
			  width: 40px;
			  height: 32px;
			  position: absolute;
			  cursor: pointer;
			  opacity: 0;
			  z-index: 2;
			}
			
			#menuToggle span
			{
			  display: flex;
			  width: 29px;
			  height: 2px;
			  margin-bottom: 5px;
			  position: relative;
			  background: #ffffff;
			  border-radius: 3px;
			  z-index: 1;
			  transform-origin: 5px 0px;
			  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
						  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
						  opacity 0.55s ease;
			}
			
			#menuToggle span:first-child
			{
			  transform-origin: 0% 0%;
			}
			
			#menuToggle span:nth-last-child(2)
			{
			  transform-origin: 0% 100%;
			}
			
			#menuToggle input:checked ~ span
			{
			  opacity: 1;
			  transform: rotate(45deg) translate(-3px, -1px);
			  background: #36383F;
			}
			#menuToggle input:checked ~ span:nth-last-child(3)
			{
			  opacity: 0;
			  transform: rotate(0deg) scale(0.2, 0.2);
			}
			
			#menuToggle input:checked ~ span:nth-last-child(2)
			{
			  transform: rotate(-45deg) translate(0, -1px);
			}
			
			#menu
			{
			  position: fixed;
			  width: 100px;
			  height: 100vh;
			  box-shadow: 0 0 10px #85888C;
			  margin: -50px 0 0 -50px;
			  padding: 50px;
			  padding-top: 125px;
			  background-color: #ffffff;
			  -webkit-font-smoothing: antialiased;
			  transform-origin: 0% 0%;
			  transform: translate(-100%, 0);
			  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
			}
			
			#menu li
			{
			  padding: 10px 0;
			  transition-delay: 2s;
			}
			
			#menuToggle input:checked ~ ul
			{
			  transform: none;
			}
			
	  .calendly-inline-widget {
		  min-width:100%;
		  height: 1800px !important;
	  }
	  
	  #panel_1 {
		  height: 70vh;
	  }

	  #logo_mobile {
		  display: block;
		  text-align: center;
	  }
	  
	  #location_text {
		  text-align: center;
		  float: none;
		  width: 80%;
		  margin-left: 10%;
	  }
	  
	  #index_button {
	  }
	  
	  #quote_button.index,
	  #tuning_button.index,
	  #repair_button,
	  #restoration_button {
		  float: none;
		  width: 80%;
		  padding-left: 20px;
		  padding-right: 20px;
		  z-index:50;
	  }
	  
	  #slider {
		  height: 220px;
		  overflow: hidden;
	  }
	  
	  .item-1,
	  .item-2,
	  .item-3 {
		  height: 220px;
	  }
	  
	  .item-1{
		  animation-name: anim-1;
	  }
	  
	  .item-2{
		  animation-name: anim-2;
		  top: -75px;
	  }
	  
	  .item-3{
		  animation-name: anim-3;
		  top: -150px;
	  }
	  
	  img.brand {
		  width: 100%;
		  height: auto;
	  }
	  
	  #spacer {
		  height: 32px;
	  }
	  
	  #quote_button {
		  width: 60%;
		  margin-left: 20%;
	  }

}