@font-face {
    font-family: 'IBMPlexMono-Regular';
    src: url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

html, body {
    font-family: 'IBMPlexMono-Regular', sans-serif;	
	color-scheme: dark;
}

@media (min-width:1660px) {
.container {
	max-width: 1600px;
}
}

#logo {
	width: 200px;
}

#clr {
	background: linear-gradient(to bottom,  #823681 0%,#c33455 44%,#ed1c24 100%);
width: 15px;
height: calc(100% - 270px);
position: fixed;
z-index: 88;
left: auto;
right: 0;
bottom: 0;
}

h2, .h2 {
	font-size: 1.25rem;
}

p, .explodeMe {
	font-size: .75rem;
}

@media (min-width: 768px) {
	p, .explodeMe {
	font-size: 1rem;
}
}

@media (min-width: 992px) {
h2, .h2 {
	font-size: 2rem;
}

p, .explodeMe {
	font-size: 1.1rem;	
	margin-bottom: 1rem;
	display: block;
	cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation:isolate' viewBox='0 0 100 100' width='16px' height='16px'%3e%3cline x1='50' y1='-0.5' x2='50' y2='99.5' vector-effect='non-scaling-stroke' stroke-width='1' stroke='rgb(255,255,255)' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/%3e%3cline x1='100' y1='49.5' x2='0' y2='49.5' vector-effect='non-scaling-stroke' stroke-width='1' stroke='rgb(255,255,255)' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/svg%3e") 16 16, pointer;

}

#logo {
	width: 300px;
}


}

@media (min-width: 1399px) {
#clr {
	background: linear-gradient(to bottom,  #823681 0%,#c33455 44%,#ed1c24 100%);
width: 55px;
height: 100%;
position: fixed;
z-index: 88;
left: auto;
right: 0;
bottom: 0;
}	
}


.btn-lg {
	font-size: 1.75rem;	
	width: fit-content;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}

/* .btn-lg:not(#lgs):hover,
.btn-lg:not(#lgs2):hover {
	filter: invert();
}
 */
#lgs, #lgs2 {
pointer-events: none;	
}

#header {
	z-index: 999;
	
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

li.active {
	background: rgba(255,255,255,1);
	color: black!important;
}

li.active a{
	color: #000!important;
}

.darkmenu,
.darkmenu li,
.darkmenu li a{
	border-color: black!important;
	color: black!important;
}

.darkmenu li.active {
	background: black;
	color: white!important;
}

.darkmenu li.active a{
	color: white!important;
}

div[data-anchor="mapscillator"] {
	background-image: url(../images/map.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat
}

div[data-anchor="about"] {
	background-image: url(../images/about.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat
}

div[data-anchor="download"] {
	background-image: url(../images/dl-bg2.jpg);
	background-position:  center;
	background-size:cover;
	background-repeat: no-repeat
}

@media (min-width: 992px) {
div[data-anchor="download"] {
	background-image: url(../images/box.png),url(../images/dl-bg2.jpg);
	background-position: center left, center;
	background-size: 50vw auto, cover;
	background-repeat: no-repeat, no-repeat
}
}

@media (max-width: 1399px) {
	#myMenu {
		background: black;
	}
	
	.btn-lg {
font-size: 1.5rem;
width: fit-content;
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}

#pianoKeys {
	display: flex;
}

.key {
	background: transparent;
	border: 1px solid white;
	border-right: none;
	margin-left: 0;
	margin-right: 0;
	height: 275px;
	width: 50px;
}



.key:last-of-type {
	border-right: 1px solid white;
}

.keyb {
background: white;
border: 1px solid white;
margin-left: -17px;
margin-right: -17px;
height: 155px;
width: 35px;
position: relative;
z-index: +1;
}

@media (max-width:767px) {
	.key {
	height: 175px;
	width: 50px;
	}
	.keyb {
	height: 100px;
	width: 25px;
	margin-left: -12.5px;
margin-right: -12.5px;
	}
	
	.btn svg {
		width: 45px;
		height: auto;
	}
}

.inverted {
	filter: invert();
}

@media (min-width: 1660px) {
	
	#header .container,
	.section {
		padding-top: 3rem!important;
		padding-bottom: 3rem!important;
	}
	div[data-anchor="mapscillator"],
	div[data-anchor="about"] {
			padding-top: 0rem!important;
		padding-bottom: 0rem!important;
	}
	
	#header .container,
	#header {
		padding-bottom: 0!important;		
	}
/* 	
	#header .container {
			background-image: url(../images/cross.svg);
			background-position: top right;
			background-repeat: no-repeat;
			background-size: 100px auto;
	}
	
	#header.inv .container {
			background-image: url(../images/cross-b.svg);
			background-position: top right;
			background-repeat: no-repeat;
			background-size: 100px auto;
	} */
	
	#myMenu {
		

	}
}

#myMenu li a{
	display: flex;
	width: 100%;
}

#myMenu li:hover {
	background-color: rgba(255,255,255,1)!important;		
}

#myMenu li:hover a{
	color: black!important;	
}


#instrumentForm {
	width: 100%;
max-width: 480px;
}

.btn-check:hover+.btn,
.btn-check:checked+.btn {
	color: #000!important;	
	background: rgba(255,255,255,1)!important;	
}

.inverted,
.opacity-1,
.opacity-0 {
	transition: all 0.8s ease-out;
}



footer {
	width: fit-content;
}

.key:hover,
.key.active {
    background-color: rgba(255,255,255,0.3); /* vagy bármilyen más szín, amit szeretnél */
}

.keyb:hover,
.keyb.active {
    background-color: rgba(255,255,255,1); /* vagy bármilyen más szín, amit szeretnél */
}

.explodeMe span {
  position: relative;
  transition: 0.3s .1s;
  top:0;left:0;
}
#loadingIndicator {
position: absolute;
z-index: +1;
margin-top: 0;
}


.img-cover {
display: flex;
min-height: 100svh;
margin: auto;
position: relative;
width: 100%;
object-fit: cover;
}

#video-contols {
z-index: 88;
}

video {
display: block;
height: 100svh;
margin: auto;
position: relative;
width: 100%;
object-fit: cover;
}

.popover  {
	border-radius: 0;
	font-family: 'IBMPlexMono-Regular';
}

.popover-header {
		border-radius: 0;
	background: #000;
	color: #fff;
}

.navbar {
margin-right: 2rem!important;
margin-left: auto;
width: 300px;
}



#logo {
margin-left: 2rem!important;	
}

@media (min-width:1200px) {
#logo {
margin-left: calc(((100% - 1140px) / 2 ))!important;	
}	
.navbar {

padding: 0 0;
margin-right: calc(((100% - 1140px) / 2 ) + 32px)!important;	
}


#myMenu {

}
}

@media (min-width:1400px) {
#logo {
margin-left: calc(((100% - 1320px) / 2 ))!important;	
}	
.navbar {
width: 400px;
padding: 0 0;
margin-left: calc(((100% - 1320px) / 2 ) + 890px)!important;	
margin-right: auto!important;	
}
}



@media (min-width:1660px) {
#logo {
margin-left: calc(((100% - 1600px) / 2 ))!important;	
}	
	.navbar {
width: 400px;
padding: 0 0;
margin-left: calc(((100% - 1600px) / 2 ) + 1170px)!important;	
margin-right: auto!important;	
}

}

.logo {
	z-index: 77
}
/*lottie*/
      #lottie{
            background-color:transparent;
            width:100%;
            height:auto;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            text-align: center;
            opacity: 1;
        }
		
	@media (max-width:1399px) {
	      #lottie{
            background-color:transparent;
            width:220px;
            height:auto;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            text-align: center;
            opacity: 1;
        }	
	}
      #lottie2{
            background-color:transparent;
            width:100%;
            height:64px;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            text-align: center;
            opacity: 1;
        }
		
	@media (max-width:1024px) {
	      #lottie2{
            background-color:transparent;
            width:220px;
            height:auto;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            text-align: center;
            opacity: 1;
        }	
	}
@media (min-width:992px) {
.mt-n100 {
	margin-top: -100%!important;
}
}


.word {
  display: inline-block;
  position: relative;
}

.char {
  display: inline-block;
  position: relative;
}