body{border:0px solid red;width:100%;margin:0px auto;padding:0px;color:#000000;font-size:24px;font-family:Roboto;font-weight:300; text-align:center;background:#ffffff;}




*{box-sizing:border-box;}
.col-1{width:6.25%;}.col-2{width:12.50%;}.col-3{width:18.75%;}.col-4{width:25%;}.col-5{width:31.25%;}.col-6{width:37.5%;}.col-7{width:43.75%;}.col-8{width:50%;}.col-9{width:56.25%;}.col-10{width:62.5%;}.col-11{width:68.75%;}.col-12{width:75%;}.col-13{width:81.25%;}.col-14{width:87.5%;}.col-15{width:93.75%;}.col-16{width:100%;}[class*="col-"]{border:0px solid red; padding:0px; margin:0px; float:left;}




.animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:1}}

.animate-opacity{animation:opac 3.5s}@keyframes opac{from{opacity:0} to{opacity:1}}

.animate-opacity2{animation:opac 10.8s}@keyframes opac{from{opacity:1} to{opacity:0}}

.animate-opacity3{animation:opac 10.8s}@keyframes opac{from{opacity:0} to{opacity:1}}

.animate-top{position:relative;animation:animatetop 0s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

.animate-bottom{position:relative;animation:animatebottom 4s}@keyframes animatebottom{from{bottom:-1300px;opacity:0} to{bottom:0;opacity:1}}
 
.animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}

.animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}

.animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}


.animate-input{transition:width 0.4s ease-in-out}
.animate-input:focus{width:100%!important}




.Beginnertext{border:10px solid red;position:absolute; z-index:99999; width:100%; height:100%;margin:0px auto;padding:0px 0%;background:#ffffff; }





#BeginnerBeginner{}
#IntermediateBeginner{}
#AdvancedBeginner{}










 .col-5{width:18%; display:block; float:left; text-align:center; margin:0 1%; padding:0; font-size:20px;background:#ffffff;}
 
 
 .col-1{width:100%; display:block; float:left; text-align:center; margin:0; padding:0; }
 
 
 .col-1.string .col-6{width:16.25%; display:block; float:left; text-align:center; margin:0; padding:0; font-size:20px; }
 
 .col-6{width:16.25%; display:block; float:left; font-size:42px;text-align:center; margin:0; padding:0; }
 
 
 .on{border:0px solid  #ffffff;border-radius:100%;background: #000000 ;}
 hr{margin:0; padding:0;  border-top:1px solid #000000;}
 
 
 button{font-size:36px;}
 
 
 .I{border:0px solid  #ffffff;border-radius:100%;background: #00ff00 ;}
 .iii{border:0px solid  #ffffff;border-radius:000%;background: skyblue ;}
 .V{border:0px solid  #ffffff;border-radius:100%;background: #ff0000;}

.col-5 .I{border:0px solid  #ffffff;border-radius:100%;background: #000000 ;}
.col-5 .iii{border:0px solid  #ffffff;border-radius:100%;background: #000000 ;}
.col-5 .V{border:0px solid  #ffffff;border-radius:100%;background: #000000;}


span.I.span{border:0px solid #ffffff; border-radius:0; font-family:Times,serif; color:#ffffff;background: #2eb68b;}
span.iii.span{border:0px solid #ffffff; border-radius:0; font-family:Times,serif;  color:#0000ff; background: #a8dcff ;}
span.V.span{border:0px solid #ffffff; border-radius:0;  font-family:Times,serif; color:#ffffff; background: #ff0000;}







.chord_big .col-1.string .col-6{width:118px; display:block; float:left; text-align:center; margin:0; padding:0; font-size:20px; }
 
.chord_big .col-6{width:118px; display:block; float:left; font-size:42px;text-align:center; margin:0; padding:0; }
 
.chord_big .footer{display:none;}
 


span.I.KEY{position:relative; z-index:99; top:0; left:0;  width:100%; display:block; float:left; text-align:center; margin:0 0 12px 0; padding:0px 0 12px 0; font-size:36px;font-family:Times;color:white;}
span.iii.KEY{position:relative; z-index:99; top:0; left:0;  width:100%; display:block; float:left; text-align:center; margin:0 0 12px 0; padding:0px 0 12px 0; font-size:36px;font-family:Times;color:blue;}

.chord_big.I{border-radius:0%;background: #2eb68b;}

.chord_big.iii{border-radius:0%;background: #a8dcff;}

.col-5.chord{width:60%; max-width:720px; height:100%; display:block; float:left;font-size:48px; text-align:center; padding:0px; }

.closex{position:absolute;z-index:999; font-size:24px; top:0; right:25%; width:5%;background: #fff;}

.col-55.L{position:absolute;z-index:09; top:0; left:0%; width:20%;height:100%; display:block;  font-size:36px; text-align:right; padding:0px 12px 0px 0px ; background: #fff; }

.col-55.R{position:absolute; top:0; right:0%; width:20%;height:100%; display:block;  font-size:48px; text-align:center; padding:0px; }


.col-5.chord .I{border:0px solid  #ffffff;border-radius:100%;background: #2eb68b;}
.col-5.chord .iii{border:0px solid  #ffffff;border-radius:100%;background: #a8dcff ;}
.col-5.chord .V{border:0px solid  #ffffff;border-radius:100%;background: #ff0000;}


.col-6.top {border:0px solid  #ffffff;border-radius:00%;background: #ff0000; font-family:Times, serif;}


hr.nut{height:4px; background: #000;}
hr.fret{height:118px;width:1px;border-left:1px dashed #000000; border-right:0px; margin:2px 50%;     }
 
hr.fret.stringtop{height:16px;width:1px;border-left:4px solid #787878; border-right:0px; border-top:0px;border-bottom:0px;  margin:0px 51% 0px 49% ;     }


hr.fretbar{height:1px; border-top:1px solid #000000;  border-bottom:0; }

.chord_big .on hr{visibility:hidden;}

form button {font-family:Times, serif; color:#000000; font-weight:300; padding: 0 8px;}
 #E_small, #A_small, #D_small, #G_small, #B_small, #e_small {font-family:Times, serif;}
 
 
 button.close_paragraph{position:absolute; right:0;float:right;}
 
 .paragraph_content{ width:90%;border:0; text-align:center; padding:6px 18px 0px 18px ; display:block; height:126px; background:#ffffff;}
 
 .footer{position:fixed; bottom:0;}