@import url("../Responsive Site/style.css");

  <style type="text/css">	

	    html, body {
			margin: 0;
		    border: 0;           
			background:#FFFFFF;					
		}
		p  {
			font-family: 'Open Sans', sans-serif;
			font-size: 1.2rem; 
			line-height: 1.8rem;
			font-weight:400; */
		}
		   h1 {
		   color: brown;
		   font-size: 2.6rem;			
		   font-family: 'Open Sans Condensed', sans-serif;
		   line-height:3rem;
		   font-weight:300;
  		}
		   h2 {
		   color: brown;
		   font-size: 2rem;			
		   font-family: 'Open Sans Condensed', sans-serif;
		   line-height: 2.4rem;
		   font-weight:300;
           padding: 4px 0px 5px 0px;
           margin: 0 auto;		  
		}
		   img.alldevices{
           margin: 0 auto;
           height: auto; 
           max-width: 100%;
           border: none;
           display: block;
        }
			#section {
			height: 100%;
			line-height:2em;
			padding: 0px 15px 10px 10px;
			display:inline-block;
			vertical-align: top;			
			max-width:700px;
			/* RIGHT HAND VERTICAL BORDER */
		    border-right: 1px solid #DCDCDC;
            overflow:visible;							
		}
          /* Button */
		   a.button4{
			padding:0em .4em;
			margin:0 0.1em 0.1em 0;
			border: 2px solid #f14e4e;
			border-radius:2em;
			box-sizing: border-box;
			text-decoration:none;
			font-family: 'Open Sans', sans-serif;
			font-weight:400;
			color:#FFF;
			text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
			text-align:center;
			transition: all 0.2s;
			background-color:#2DBB2D;
			margin:0 auto;
			display:block;
			width:110px;
			/* drop shadow */			
			border: 2px solid;
			padding: 10px;
			box-shadow: 6px 4px 8px #CCC;
		    }

		   a.button4:hover{
		   border-color:#333333;
		   background-color: #71DD71;
		  }
		  @media all and (max-width:30em){
		   a.button4  {
		   display:block;
		   margin:0.2em auto;
		    }
		  }
           .div_shake:hover {
		  /* Start the shake animation and make the animation last for 0.5 seconds */
	       animation: shake 0.5s;
		   display:block;
		  
			/* When the animation is finished, start again */
			animation-iteration-count: infinite;
		  }
		  
		   @keyframes shake {
			0% { transform: translate(1px, 1px) rotate(0deg); }
			10% { transform: translate(-1px, -2px) rotate(-1deg); }
			20% { transform: translate(-3px, 0px) rotate(1deg); }
			30% { transform: translate(3px, 2px) rotate(0deg); }
			40% { transform: translate(1px, -1px) rotate(1deg); }
			50% { transform: translate(-1px, 2px) rotate(-1deg); }
			60% { transform: translate(-3px, 1px) rotate(0deg); }
			70% { transform: translate(3px, 1px) rotate(-1deg); }
			80% { transform: translate(-1px, -1px) rotate(1deg); }
			90% { transform: translate(1px, 2px) rotate(0deg); }
			100% { transform: translate(1px, -2px) rotate(-1deg); }
		  }
  		  .tip {  	 
		  border: solid;
		  border-width: 1px 1px 1px 30px;
		  border-color: green;	 
		  padding: 20px 30px 18px 25px;
		  margin:30px 15px 30px 0px;
		  max-width: 600px;	  
		}		  
		  
		 .tip_header {
		 color: black;
		 font-size: 1.7rem;
		 line-height: 2rem;		 	   		
	  } 
		 .tip_text {
		  font-family: 'Open Sans', sans-serif;
		  font-size: 1.2rem; 
		  line-height: 1.6rem;
		  font-weight:400;
		 }
		 .tip_quote {
		 color: brown;
		 line-height: 1.8rem;
	  }
	 	.tip1 {
		border: solid;
		border-width: 3px 3px 3px 3px;	 
		padding: 0px 18px 12px 30px;
		margin:30px 24px 30px 0px;
		border-color: #C99292;		  
	} 	
	 	.quote_large {
		font-size: 1.2rem;
		font-family: 'Lora', serif;
		font-weight:400;
		color: #660099;
		line-height:1.8rem;
		padding: 0px 25px 14px 20px;
	}
		.quoted_large {
		font-size: 1.2rem;
		line-height:1.8rem;
		color: black;	
	}
		.quote {
		font-size: 1.2rem;
		font-family: 'Lora', serif;
		font-weight:400;
		color: #660099;
		line-height:1.8rem;
		margin:0px 0px 15px 0px;
	}
		.quoted {
		font-size: 1.2rem;
		color: black;
		line-height:1.8rem;
	}	
		ul {
		list-style-type:circle;
		font-family: 'Open Sans', sans-serif;
		font-size: 1rem; 
		line-height: 1.5rem;
		font-weight:400;
		color:#000;
	}
		 ol {
		font-family: 'Open Sans', sans-serif;
		font-size: 1,2rem; 
		line-height: 1.7rem;
		font-weight:400;
		color:#000;
	 }					
		.activepage {
		font-weight:500;
		transition: all 0.2s ease;
		color:#000;
		text-decoration:none;
		background-color:#FFFFFF;
	 }						
		/* Change the link color on hover */
		nav li a:hover {
		font-weight:400;
		transition: all 0.2s ease;
		color:#09C;
		text-decoration:none;
	}		
		nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: block;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 20px;
	}	
		nav ul a {
		color: white;
		text-decoration: none;
	
	}
		.btn-info {  /* toggle button */
		color: white;
		background-color: #0A8BC5;
		border-color: #0A8BC5;
		}		
		.btn-dark { /* get rid of right button */
		color: #fff;
		background-color: #FFF;
		border-color: #FFF;
	}
		a,
		a:hover,
		a:focus {
			color: inherit;
			text-decoration: none;
			transition: all 0.3s;
		}		
		.navbar {
			padding: 0px 0px;
			background: #fff;
			border: none;
			border-radius: 0;
			margin-bottom: 40px;
			
			background-repeat:no-repeat;
			background-position: 180px;
		 }		
		.navbar-btn {
			box-shadow: none;
			outline: none !important;
			border: none;
		}		
		.line {
			width: 100%;
			height: 1px;
			border-bottom: 1px dashed #ddd;
			margin: 40px 0;
		}
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
		.wrapper {
			display: flex;
			width: 100%;
			align-items: stretch;
		}
		#bannerTop{
			background: #FFF url('images/Guitar-Header-Image-trimmed.png') 180px no-repeat;
		}
		
		#sidebar {
			min-width: 250px;
			max-width: 250px;
			background: #0A8BC5;
			color: #fff;
			transition: all 0.3s;
		}
		
		#sidebar.active {
			margin-left: -250px;
			
		}
		
		#sidebar .sidebar-header {
			padding: 20px;
			background: #6d7fcc;
		}
		
		#sidebar ul.components {
			padding: 20px 0;
			border-bottom: 1px solid #47748b;
			
		}
		
		#sidebar ul p {
			color: #fff;
			padding: 10px;
			
		}
		
		#sidebar ul li a {
			padding: 10px;
			font-size: 1em;
			display: block;
			
		}
		
		#sidebar ul li a:hover {
			color: #000;
			background: #A4E0FA;
		}
		
		#sidebar ul li.active>a,
		a[aria-expanded="true"] {
			color: #fff;
			background: #6d7fcc;
		}
		
		a[data-toggle="collapse"] {
			position: relative;
		}
		
		.dropdown-toggle::after {
			display: block;
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
		}
		
		ul ul a {
			font-size: 0.9em !important;
			padding-left: 30px !important;
			background: #6d7fcc;
			color: #fff;
			
		}
		
		ul.CTAs {
			padding: 20px;
		}
		
		ul.CTAs a {
			text-align: center;
			font-size: 0.9em !important;
			display: block;
			border-radius: 5px;
			margin-bottom: 5px;
		}
		
		a.download {
			background: #fff;
			color: #7386D5;
		}
		
		a.article,
		a.article:hover {
			background: #6d7fcc !important;
			color: #fff !important;
		}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

		#content {
		width: 100%;
		padding: 20px;
		min-height: 100vh;
		transition: all 0.3s;
		}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

		@media (max-width: 768px) {
			#sidebar {
				margin-left: -250px;
			}
			#sidebar.active {
				margin-left: 0;
			}
			#sidebarCollapse span {
				display: none;
			}
		}
		
  </style>