@charset "UTF-8";
/* CSS Document */

html {  height:100%; margin:0; padding:0; font-family: 'Crimson Text', serif; }
body { margin:0; padding:0; height:100%;  }

/*
font-family: 'News Cycle', sans-serif;
font-family: 'Crimson Text', serif;
Red: #C51E1E
Gold: #D9AB54
*/

.content { }

.homepage_content { }


.anchor { position:relative; top:-135px; }

.anchor:before {
   content: "";
   display: block;
   height: 10px;
   margin: -0px 0 0;
}

/* -------------- Listening Room --------------------*/

.listening_content2 { max-width:960px; min-height:400px; margin:0 auto 20px auto; font-family: 'News Cycle', sans-serif; }
#listening_left { float:left; max-width:480px; height:400px; }
#listening_left img { width:100%; }
#listening_right { float:left; max-width:460px; margin-left:20px; height:400px; font-size:14px; }
#listening_right audio { width:100%; margin-bottom:5px; }

#mic { max-width:960px; text-align:left; margin-bottom:3px; font-size:14px; letter-spacing:1px; }
#mic:hover { color:#C51e1e; }

.listening_content a { text-decoration:none; color:#000000; }
.listening_content a:hover { text-decoration:underline; color:#C51E1E; }
.listening_content a:visited { text-decoration:none; color:#000000; }

#listening_demo { width:500px; margin:0 auto; }

#demo_text { position:relative; top:65px; }
#demo_img { margin-bottom:-7px;  }

#listening_demo audio { width:500px; margin-bottom:30px; -webkit-appearance: none;
  -webkit-border-radius: 0px; }
  
.listening_headline { color:#D9AB54; text-transform:uppercase; font-family: 'Crimson Text', serif; font-size:3em; letter-spacing:8px; width:100%; text-align:center; margin-bottom:20px; }

/* -------------- End Listening Room --------------------*/

/* -------------- Header --------------------*/

.central_header { width:100%; height:135px; background:#FFFFFF; margin-bottom:0px; font-size:20px; position:fixed; 
	letter-spacing:8px; color:#000000; z-index:10; }
#central_header_spacer { width:100%; height:135px; background:#FFFFFF; }
.central_header img { margin-top:10px; }

.central_header_container { max-width:960px; background:#FFFFFF; margin-left:auto; margin-right:auto; height:100%; }

.central_header ul { width:80%; text-align:left; list-style:none; float:left; margin-right:5%; margin-top:40px; }
.central_header ul li { display:inline; margin-left:3%; }

.central_header a { color:#000000; text-decoration:none; text-transform:uppercase; }
.central_header a:hover { color:#C51E1E; text-decoration:none; cursor:pointer;  }
.central_header a:visted { color:#000000; text-decoration:none; }

#logo { cursor:pointer; }
#logo_img { /*width:150px;*/ height:120px; float:right; margin-top:10px; margin-left:10px; }
#header_menu { float:right; width:50px; text-align:center; line-height:100px; margin-right:20px; margin-top:42px; }

#desktop_header { display:block; }

/* -------------- End Header --------------------*/

/* -------------- Footer --------------------*/

.jlg_footer { width:100%; color:#000000; font-family: 'Crimson Text', serif; }
#jlg_footer_content { max-width:960px; text-align:center; margin:0 auto; }
#footer_willow { font-size:14px; margin-top:-5px; }

#jlg_footer_content a { color:#000000; text-decoration:none; }
#jlg_footer_content a:visited { color:#000000; }
#jlg_footer_content a:hover { color:#C51E1E; }

/* -------------- End Footer --------------------*/




/* -------------- Custom --------------------*/
    
#custom_fade { opacity:0; }
.custom { max-width:960px; margin:0 auto;}
#custom_text { float:left; width:55%; }
.custom #headline { font-size:30px;  letter-spacing:10px; text-transform:uppercase; }
.custom #tagline { color:#C51E1E; padding-left:125px; margin-top:-15px; 
	letter-spacing:10px; font-size:30px; text-transform:uppercase; }
.custom #paragraph { font-family: 'News Cycle', sans-serif; }
.custom #guitar_image { position:relative; float:right; width:45%; pointer-events:none; z-index:10; }
.custom #guitar_image img { position:relative; z-index:10; width:100%; pointer-events:none; }
/* -------------- End Custom --------------------*/


/* -------------- Guitar Trio --------------------*/  
  
#trio_fade { opacity:0; }    
.curvy { width:100%; height:40px; }
.curvy#curvy_1 { background:url(../images/system/curve-2.png) no-repeat; background-size:contain; background-position:left;
	  float:left; width:75%; margin-top:25px; }
.curvy#curvy_2 { background:url(../images/system/curve-1.png) no-repeat; background-size:contain; background-position:right;
	float:right; width:75%; margin-bottom:25px; }
 
#trio_container { }
#trio_image { max-width:960px; margin:30px auto; }
#trio_image img { width:100%; }
		
/* -------------- End Guitar Trio --------------------*/

/* -------------- Gallery --------------------*/  
      
#gallery_fade { opacity:0; }  
.gallery { width:100%; height:550px; margin-top:20px; }
.gallery #arrow { float:left; width:2%; height:100%; cursor:pointer; margin-left:2%; margin-right:2%; }
.gallery #arrow img { width:100%; position: relative; top: 50%; transform: translateY(-50%);  }
.gallery #arrow2 { float:right; width:2%; height:100%; cursor:pointer; margin-right:2%; margin-left:2%; }
.gallery #arrow2 img { 
	width:100%; 
	-webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
 	-moz-transform: rotate(180deg);        /* FF */
  	-o-transform: rotate(180deg);          /* Opera */
  	-ms-transform: rotate(180deg);         /* IE9 */
  	transform: rotate(180deg) translateY(50%);             /* W3C compliant browsers */ 
	position: relative;
  top: 50%;
}
.gallery #main_box { width:88%; height:100%; float:left; margin:0 auto; }

#main_box #preview { float:left; width:25%; z-index:0; position: relative; top: 50%; transform: translateY(-50%); }
#main_box #preview img { width:100%; }
#main_box #main { float:left; width:50%; z-index:1; position: relative; top: 50%; transform: translateY(-50%); }
#main_box #main img { width:100%; }

/* -------------- End Gallery --------------------*/ 

/* -------------- History --------------------*/   
    
#history_fade { opacity:0; }    
.history { width:100%; height:700px; margin:20px auto; background:url(../images/system/guitar-curvy4.png) no-repeat; background-size:cover; background-position:center bottom; color:#FFFFFF; }
.history #history_left { width:45%; position:relative; top:120px; margin-left:5%; margin-top:25px; 
	float:left; text-transform:uppercase; }
.history #headline { font-size:30px;  letter-spacing:10px; }
.history #tagline { font-size:30px;  letter-spacing:10px; }
.history #paragraph { width:40%; float:right; font-size:16px; line-height:30px; font-family: 'News Cycle', sans-serif;  
	letter-spacing:1px; padding-top:90px; margin-right:50px; }
		
/* -------------- End History --------------------*/  

/* -------------- Pricing --------------------*/  

#pricing_fade { opacity:0; }  
.pricing { width:100%; height:500px; margin:20px auto; background:url(../images/system/pricing2.png); background-size:cover; background-position:center bottom; color:#FFFFFF; }
.pricing #paragraph { float:right; width:30%; margin-right:5%; font-size:16px; font-family: 'News Cycle', sans-serif; padding-top:70px; }

/* -------------- End Pricing --------------------*/ 

/* -------------- Homepage Listening --------------------*/ 

#listening_fade { opacity:0; }  
.homepage_listening { width:100%; height:450px; margin:20px auto; background:url(../images/system/listening3.png); background-size:cover; background-position:center bottom; color:#FFFFFF; cursor:pointer; }
.homepage_listening #text_right { float:right; width:35%; padding-top:100px; }
.homepage_listening #headline {  color:#D9AB54; font-size:30px;  letter-spacing:10px; text-shadow:#000000 2px 2px 6px; width:100%; }
.homepage_listening #paragraph { width:70%; color:#FFFFFF; font-size:22px; margin-left:60px; font-family: 'News Cycle', sans-serif;  letter-spacing:4px; }

/* -------------- End Homepage Listening --------------------*/  

/* -------------- Contact --------------------*/

#contact_fade { opacity:0; }  
.contact { max-width:960px; height:320px; margin:40px auto; text-transform:uppercase; font-size:24px; letter-spacing:4px; padding-top:50px; }

.contact a { color:#000000; text-decoration:none; }
.contact a:visited { color:#000000; }
.contact a:hover { color:#C51E1E; }

#contact_details { margin-left:25px; }
#contact_name { color:#D9AB54; }

#contact_left { float:left; width:60%; }
#contact_right { float:right; width:40%; font-size:12px; font-family: 'Crimson Text', serif; }

#contact2 input { background:#DFDFDF; color:#000000; width:150%; height:30px; margin-top:10px; -webkit-appearance: none;
	border:1px solid #000000; }
#contact2 textarea { background:#DFDFDF; color:#000000; width:149%; margin-top:10px; height:30px; -webkit-appearance: none; 
	border:1px solid #000000; }
#contact2 #submit { float:right; width:135px; height:40px; box-shadow:none; position:relative; left:100px; -webkit-appearance: none; border:0; background:#C51E1E; color:#FFFFFF; font-size:18px; }
#contact2 #submit:hover { background:#FFFFFF; border:1px solid #000000; cursor:pointer; -webkit-appearance: none; }

#contact_success { text-align:center; background:#0C8013; color:#FFFFFF; padding:25px 0px; }
#contact_failure { text-align:center; background:#A50E10; color:#FFFFFF; padding:25px 0px; }
#contact_failure a { color:#FFFFFF; }

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #000000; font-family: 'Crimson Text', serif; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000000; opacity:  1; font-family: 'Crimson Text', serif; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#000000; opacity:  1; font-family: 'Crimson Text', serif; }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #000000; font-family: 'Crimson Text', serif; }

/* -------------- End Footer --------------------*/

/* -------------- In Progress --------------------*/

#inprogress_text { width:100%; text-align:center; margin:20px auto; font-size:20px; }

.inprogress_content { }

#container { width:100%; margin:auto; }

.grid { width:100%; margin:0px auto 30px auto; }
.grid img { float:left; height:200px; width:auto; margin:2px; }

/*.grid-item { width: 200px; height:175px; }
.grid-item--width2 { width: 400px; height:300px; }

.grid-item img { width:100%; height:auto; }

/*.inprogress_content img { width:19%; margin-left:1%; float:left; margin-bottom:5px; } */

/* -------------- End In Progress --------------------*/

@media only screen and (max-width: 960px) {
  /* Tablet */
  .central_header { height:80px; }
  #central_header_spacer { width:100%; height:80px; }
  #logo_img { height:65px; margin-top:5px; margin-right:25px; margin-left:-25px;}
  .central_header ul { margin-top:20px; font-size:16px; }
  
  .history #paragraph { font-size:14px; line-height:20px; }
  
  .intro #intro_text { width:50%; }
  .intro #headline { font-size:18px; }
  .intro #tagline { font-size:18px; }
  
  	.custom #custom_text { margin-bottom:56px; margin-top:50px; }
	.custom #guitar_image { margin-bottom:0px; }
	.custom #headline { font-size:24px; margin-left:10px; }
	.custom #tagline { font-size:20px; padding-left:30px; margin-top:0px; }
	.custom #paragraph { width:90%; position:relative; top:0px; padding-top:0px; padding-left:5%; padding-right:5%; }
	
	.pricing #paragraph { font-size:16px; line-height:22px; text-shadow:#000000 2px 2px 4px; }
	
	.homepage_listening #text_right { width:50%; padding-top:150px; }
	.homepage_listening #headline { font-size:22px; }
	.homepage_listening #paragraph { text-shadow:#000000 2px 2px 4px; font-size:18px; }
	
	.contact #contact_left { font-size:18px; margin-left:5%; width:45%; }
	
	#listening_left { float:none; margin:0 auto; height:350px; }
	#listening_right { float:none; margin:0 auto; height:350px; }
}

@media only screen and (max-width: 40em) {
	
	#listening_left { height:250px; margin-bottom:30px; }
	#listening_right { width:90%; padding:0 5%; margin-bottom:60px; }
	
	#listening_demo { width:90%; margin:0 auto; }

	#demo_text { position:relative; top:35px; }
	#demo_img { margin-bottom:-7px;  }
	#demo_img img { width:100%; }
	
	.listening_headline { font-size:1.5em; }
	
	#listening_demo audio { width:100%; margin-bottom:30px; -webkit-appearance: none;
	  -webkit-border-radius: 0px; }
	
	/* Phone */
	.intro #intro_text { z-index:3; top:-600px; margin-bottom:-600px; margin-left:30px; width:30%; } 
	.intro #headline { font-size:24px !important; position:relative; right:130px; }
	.intro #tagline { font-size:16px!important; position:relative; right:150px; }
	
	.custom #custom_text { margin-bottom:15px; margin-top:0; }
	.custom #guitar_image { margin-bottom:25px; }
	.custom #headline { font-size:18px; margin-left:10px; }
	.custom #tagline { font-size:14px; padding-left:30px; margin-top:0px; }
	.custom #paragraph { width:90%; position:relative; top:0px; padding-top:0px; padding-left:5%; padding-right:5%; }
	
	.gallery { height:200px; }
	
	.history #history_left { width:90%; }
	.history #headline { font-size:20px; }
	.history #tagline { font-size:14px; }
	
	.history #paragraph { width:90%; padding-top:130px; padding-left:5%; margin:0; font-size:12px; line-height:20px; float:left; }
		
	.pricing #paragraph { width:95%; float:none; margin:0 auto; font-size:14px; position:relative; 
		top:100px; text-shadow:#000000 2px 2px 4px; }
	
	.homepage_listening #text_right { width:90%; padding-top:150px; }
	.homepage_listening #headline { font-size:22px; }
	.homepage_listening #paragraph { text-shadow:#000000 2px 2px 4px; font-size:18px; }
	
	.contact #contact_left { width:90%; margin:0 auto 0 10px; font-size:14px; }
	.contact #contact_right { width:90%; margin:35px auto; }

}


/* ---------------------    Mobile Header   ------------------ */
#another { width:40%; float:right; text-align:right; margin-right:10px; height:75px; line-height:75px;  }

#mobile_header { display:none; }
#nav > a { display: none; text-decoration:none; }
#nav li { position: relative; }
#nav li a { color: #fff; display: block; text-decoration:none; }
#nav li a:active { background-color:rgba(0,0,0, 0.65 ) !important; } 
/* first level */
#nav > ul { width:100%; height: 3.75em; /* 60 */ background-color:rgba(41,41,41,1.00); list-style:none;	}
#nav > ul > li { width: 100%; height: 100%; float: left; }
#nav > ul > li > a { height: 100%; font-size: 20px;  line-height: 10px; text-align: center; }
#nav > ul > li:not( :last-child ) > a { border-right: 1px solid #FFFFFF; }
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a { color:#ff1d25; }

@media only screen and ( max-width: 40em ) {
	#desktop_header { display:none; }
	#mobile_header { display:inherit; position:relative; z-index:20; }
	#logo { float:left; margin-left:25px; }
	
	#nav { float:right; padding-right:10px; padding-top:0px; z-index:10; }
	#nav > a { width: 3.125em; height: 3.125em; text-align: left; text-indent: -9999px; position: relative; top:15px; z-index:15; }
	#nav > a:before, #nav > a:after { position: absolute; border: 3px solid #000000; top: 15%; left: 25%; right: 25%; content: ''; }
	#nav > a:after { top: 40%; }
	#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: block; }
	/* first level */
	#nav > ul { height: auto; display: none; position: absolute; top:50px; left: 0; right: 0; z-index:15; }
	#nav:target > ul { display: block; }
	#nav > ul > li { width: 100%; float: none; }
	#nav > ul > li > a { height: 30px; text-align: left; padding: 0 0.833em; }
	#nav > ul > li:not( :last-child ) > a { border-right: none; border-bottom: 1px solid #FFFFFF; }
}
/* ---------------------    End Mobile Header   ------------------ */