body{border:0px solid red;width:100%;margin:0px auto;padding:0px;color:#000000;font-size:24px;font-family:Times, serif; 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;}

.none{display:none;}


.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 3s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

.animate-bottom{position:relative;animation:animatebottom 2s}@keyframes animatebottom{from{bottom:-100px;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}


#home{border:0px solid #ff05ff; float:left; width:100%; background:none;}
#chords_text{font-family:Roboto;}
#info_text{font-family:Roboto;}
#info_text_Intermediate{font-family:Roboto;}
#show_more{}

#Beginner{font-family:Roboto;}
#BeginnerBeginner{font-family:Roboto;}
#IntermediateBeginner{font-family:Roboto;}
#AdvancedBeginner{font-family:Roboto;}
#footer_chords{font-family:Roboto;}

.col-5.smallchord{border:1px solid  #787878; margin-top:4px ;padding-top:4px ;}
.col-5.smallchord form{}
.col-5.smallchord button{}


form button {font-family:Times, serif; color:#000000; font-weight:300; padding: 0 8px;}


#E_small, #A_small, #D_small, #G_small, #C_small, #e_small, #Em_small{}, #Dm_small{}, #Am_small{}, #F_small{} {font-family:Times, serif;}
 
 

#E_small{}
#D_small{}
#C_small{}
#A_small{}
#G_small{}
#Em_small{}
#Dm_small{}
#Am_small{}
#F_small{}

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







 .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.content{margin-top:48px; line-height:1.25;}
 
 
 
 .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_sixth{height:118px;width:1px;border-left:1px dotted #000000; border-right:0px; margin:2px 50%;     }

hr.fret_fifth{height:118px;width:1px;border-left:1px dotted #000000; border-right:0px; margin:2px 50%;     }


hr.fret_fourth{height:118px;width:1px;border-left:1px dotted #000000; border-right:0px; margin:2px 50%;     }

hr.fret_third{height:118px;width:1px;border-left:1px dotted #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;}

 button.close_paragraph{position:absolute; right:0;float:right;}
 
 .paragraph_content{ width:100%;border:0; text-align:center; padding:6px 0px 0px 0; display:block; height:126px; background:#ffffff;}
 
 .footer{position:fixed; bottom:0; left:0;width:100%;text-align:center;}