.Guitar_Frame {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow-y: hidden;
	overflow-x: auto;
}

.Guitar_Frame .Guitar {
	position: absolute;
	display: block;
	top: calc(50vh - 1080px / 2);
	left: 0;
	width: 1920px;
	height: 1080px;
	--margin: calc(1080px / 2 - 1080px) 0 0 0;
	background-image: url(../img/g2.png);
}

.Guitar_Frame .Guitar .Lad, .Guitar_Frame .Guitar .LadNumber {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0);
	opacity: 0;
	z-index: 10;
	transition: all 0.2s ease-in-out;
}

.Guitar_Frame .Guitar .Lad {
	cursor: pointer;
}

.Guitar_Frame .Guitar .LadNumber {
	font-size: 20px;
	color: white;
	text-shadow: 0 0 10px #4f9ad5, 0 0 6px #4f9ad5, 0 0 3px #4f9ad5, 0 0 3px #4f9ad5, 0 0 3px #4f9ad5;
	opacity: 1
}

.Guitar_Frame .Guitar .Lad:hover { opacity: 0.7 }

.Guitar_Frame .Guitar .Lad.pressed { opacity: 1 }

.Guitar_Frame .Guitar .Lad.preView { opacity: 0.3; filter: grayscale(100%); }

.Guitar_Frame .Guitar .Lad.view { opacity: 1 }

.Guitar_Frame .Guitar .Lad .Note {
	display: flex;
	width: 25px;
	height: 25px;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	font-family: 'PT Sans Narrow', sans-serif;
	color: #000;
	text-shadow: 0 1px 1px #fff;
	border-radius: 25px;
	box-shadow: 0 0 5px 1px black;
}

.Guitar_Frame .Guitar .Lad .Note { background: url(../img/note.png); }

.Guitar_Frame .Guitar .Lad .Note::before, .Guitar_Frame .Guitar .Lad .Note::after {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	content: '';
	opacity: 0;
}

.Guitar_Frame .Guitar .Lad .Note::after {
	--margin: -25px 0 0 -25px;
	--width: 50px;
	--height: 50px;
	--content: '';
}

.Guitar_Frame .Guitar .Lad .Note::before, .Guitar_Frame .Guitar .Lad .Note::after {
	box-shadow: 0 0 5px 1px dodgerblue, inset 0 0 5px 1px dodgerblue;--rgba(111,148,182,0.5);
}

.Guitar_Frame .Guitar .Lad.pressed .Note::before,
.Guitar_Frame .Guitar .Lad.pressed .Note::after {
	animation-name:anim-effect-jagoda-2, anim-effect-jagoda-1;
	animation-duration: 1.2s;
	animation-iteration-count: 5;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

.Guitar_Frame .Guitar .Lad.pressed .Note::after {
	animation-delay: 0.6s;
}

@keyframes anim-effect-jagoda-1 {
	0%, 100% { opacity: 0; }
	40%, 60% { opacity: 1; }
}

@keyframes anim-effect-jagoda-2 {
	0%   { transform: scale3d(0.5, 0.5, 1);	}
	100% { transform: scale3d(1.4, 1.4, 1);	}
}

.Guitar_Frame .Guitar .Lad.fingerD .Note { }
.Guitar_Frame .Guitar .Lad.fingerN .Note { }
.Guitar_Frame .Guitar .Lad.finger0 .Note { background: url(../img/open_string.png); color: rgba(0,0,0,0); text-shadow: unset; box-shadow: unset;}
.Guitar_Frame .Guitar .Lad.finger1 .Note { color: white; background: url(../img/red.png)   ; text-shadow: 0 1px 2px black; }
.Guitar_Frame .Guitar .Lad.finger2 .Note { color: white; background: url(../img/yellow.png); text-shadow: 0 1px 2px black; }
.Guitar_Frame .Guitar .Lad.finger3 .Note { color: white; background: url(../img/green.png) ; text-shadow: 0 1px 2px black; }
.Guitar_Frame .Guitar .Lad.finger4 .Note { color: white; background: url(../img/blue.png)  ; text-shadow: 0 1px 2px black; }
.Guitar_Frame .Guitar .Lad.fingerC .Note { background: url(../img/close_string.png); color: rgba(0,0,0,0); text-shadow: unset; }

.AccordsToneListFrame {
	position: absolute;
	display: none;
	top: 100px;
	left: calc(50vw - 400px);
	width: 800px;
	border-radius: 5px;
	background: rgba(0,0,0,0.8);
	box-shadow: 0 5px 10px 2px rgba(0,0,0,1);
	z-index: 9999;
	font-family: 'Comfortaa', cursive;
	padding: 5px 15px 15px 15px;
}

.AccordsToneListFrame > .Header {
	position: relative;
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	text-shadow: 0 0 10px #4f9ad5, 0 0 3px #4f9ad5;
	padding: 10px;
}

.AccordsToneListFrame > .Header > .title, .AccordsToneListFrame > .Header > .close {
	font-size: 12px;
	text-shadow: 0 0 10px #4f9ad5, 0 0 3px #4f9ad5;
	color: #fff;
}

.AccordsToneListFrame .Header .close { cursor: pointer; }
.AccordsToneListFrame .Header .close:hover { color: #4f9ad5 }

.AccordsToneListFrame .TonesList {
	display: flex;
	width: 100%;
	border-bottom: 2px solid rgba(255,255,255,0.2);
	padding: 0 0 5px 0;
	justify-content: space-between;
}

.AccordsToneListFrame .TonesList .AccordTab {
	position: relative;
	text-align: center;
	width: calc(100% / 12);
	--padding: 0 20px;
	font-size: 14px;
	text-shadow: 0 0 10px #4f9ad5, 0 0 3px #4f9ad5;
	color: #4f9ad5;
	cursor: pointer;
}
.AccordsToneListFrame .TonesList .AccordTab.Active { color: #fff }
.AccordsToneListFrame .TonesList .AccordTab.Active:after {
	content: "";
	position: absolute;
	display: block;
	bottom: -7px;
	width: 100%;
	height: 2px;
	background: #fff;
	box-shadow: 0 0 10px #4f9ad5, 0 0 3px #4f9ad5, 0 0 3px #4f9ad5, 0 0 3px #4f9ad5;
	z-index: 1;
}
.AccordsToneListFrame .AccordsBody {
	display: block;
	width: 100%;
	height: 0;
	transition: all 0.5s;
	overflow: hidden;
}

.AccordsToneListFrame:hover .AccordsBody { height: 110px; }

.AccordsToneListFrame .AccordsCategoryList {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	text-shadow: 0 0 10px #4f9ad5;
	padding: 10px 0 0 0;
	color: #4f9ad5;
	cursor: pointer;
}

.AccordsToneListFrame .AccordsCategoryList > .Category.Active { color: #fff }

.AccordsToneListFrame:hover .AccordsBody .AccordsList {
	display: flex;
	width: 100%;
	overflow: auto;
	align-items: center;
	flex: none;
}

.AccordsToneListFrame:hover .AccordsBody .AccordsList .Accord {
	display: flex;
	min-width: 64px;
	max-width: 64px;
	height: 64px;
	margin: 5px;
	font-size: 80%;
	text-shadow: 0 0 10px #4f9ad5;
	color: #4f9ad5;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 3px;
	box-sizing: border-box;
	border-radius: 5px;
}

.AccordsToneListFrame:hover .AccordsBody .AccordsList .Accord:hover {
	background: rgba(255,255,255,0.2);
}

.AccordsToneListFrame:hover .AccordsBody .AccordsList .Accord.Active {
	background: rgba(255,255,255,0.2);
	border-radius: 5px;
	box-shadow: 0 0 5px #fff;
	color: #fff;
}

.AccordVariantFrame {
	position: absolute;
	display: flex;
	width: 200px;
	top: 65%;
	color: white;
	left: calc(50vw - 100px);
	justify-content: space-between;
	align-items: center;
}

.AccordVariantFrame > .Variant {
	display: flex;
	width: 25px;
	height: 25px;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	font-family: 'PT Sans Narrow', sans-serif;
	color: #000;
	text-shadow: 0 1px 1px #fff;
	border-radius: 25px;
	box-shadow: 0 0 5px 1px black;
	background: url(../img/white.png);
	cursor: pointer;
	z-index: 1000;
}

.AccordVariantFrame > .Variant.active {
	background: url(../img/note.png);
}