.search input{
	width: 0px;
	border: none;
	background: transparent url(../img/search-ico-alt.png) no-repeat 5px center;
	border-bottom: 1px solid transparent;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	        box-shadow: none;
	-webkit-border-radius: 0px;
	   -moz-border-radius: 0px;
			border-radius: 0px;
	padding-left: 30px;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
		 -o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}

.search input.activeSearch {
	background: transparent url(../img/ajax-loader.gif) no-repeat 5px center !important;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
		 -o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}

.search input:focus{
	width: 200px;
	outline: none !important;
	border-bottom: 1px solid #646464;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	        box-shadow: none; 
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
		 -o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}

.navbar-fixed-top .navbar-inner,
.navigation .navbar {
	background: rgba(255,255,255,.8) !important;
}

.navbar, 
.navbar-inner, 
.nav,
.navbar-inverse {
	background: transparent !important;
	filter: none !important;
	border: none;
	-webkit-box-shadow: none;
       -moz-box-shadow: none;
          	box-shadow: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

.navbar .nav,
.navbar .nav > li {
	float:none;
	display:inline-block;
	*display:inline; /* ie7 fix */
	*zoom:1; /* hasLayout ie7 trigger */
	vertical-align: top;
}

.navbar .nav > li > a {
	color: #414141;
	border-top: 0px solid transparent;
	text-shadow: none;
	font-size: initial;
	padding: 12px 20px;
	padding: 12px 10px \9;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
		 -o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;

}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  	background: #080808 !important;		
  	color: #fff;
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:focus {
  	color: #080808 !important;	
  	text-decoration: none;
  	background-color: transparent !important;	
  	-webkit-box-shadow: none;
       -moz-box-shadow: none;
          	box-shadow: none;
}

.navbar .nav > .active > a:hover {
  	background: #080808 !important;		
  	color: #fff !important;
  	-webkit-box-shadow: none;
       -moz-box-shadow: none;
          	box-shadow: none;
}

.navbar .nav .active a:hover > .caret {
  	border-top-color: #fff !important;	
  	border-bottom-color: #fff !important;	
}

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  	color: #ffffff;
  	background: #080808 !important;	
}

.dropdown-menu .active > a {
	color: #ffffff !important;
  	background: #080808 !important;
}
.dropdown-menu .active > a:hover {
  	color: #ffffff !important;
  	background: #080808 !important;	
}

.navbar .btn-navbar {
	border: none;
	background: #fbfbf9;
	color: #222222 !important;
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.35), inset 0px 2px 3px #fff;
	   -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.35), inset 0px 2px 3px #fff;
		    box-shadow: 1px 1px 1px rgba(0,0,0,0.35), inset 0px 2px 3px #fff;
	text-shadow: none;
	-webkit-transition: all 0.3s ease;
	   -moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		 -o-transition: all 0.3s ease;
			transition: all 0.3s ease;
	margin: 0px !important;		
}

.navbar .btn-navbar:hover {
	background: #fbfbf9;
	text-shadow: 0 0 1px #222222;
	color: #222222 !important;
	-webkit-box-shadow: 1px 0px 1px rgba(0,0,0,0.1), inset 0px 1px 1px #fff;
	   -moz-box-shadow: 1px 0px 1px rgba(0,0,0,0.1), inset 0px 1px 1px #fff;
		    box-shadow: 1px 0px 1px rgba(0,0,0,0.1), inset 0px 1px 1px #fff;
	-webkit-transition: all 0.3s ease;
	   -moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		 -o-transition: all 0.3s ease;
			transition: all 0.3s ease;	
}

.nav .active .dropdown-toggle .caret {
  	border-top-color: #080808 !important;	
  	border-bottom-color: #080808 !important;	
}
body {
  color: #050505;
  font-family: SFProText-Regular, Helvetica, Arial, sans-serif;
  font-size: large;
  line-height: 1.2em;
  text-align: left;
}

/* codepen */

.rovas {
    font-family: Rovas;
    font-size: 200%;
    padding: 0 0.06em;
}

/* 3dbar */
#chart {
  position: relative;
  margin: 30px auto 0;
  width: 100%;
  min-height: 100px;
  display: flex;
  max-width: 100%;
}
@-webkit-keyframes bargrowth {
  0% {
    max-height: 0%;
  }
  100% {
    max-height: 100%;
  }
}
@keyframes bargrowth {
  0% {
    max-height: 0%;
  }
  100% {
    max-height: 100%;
  }
}
.bar {
  -webkit-animation: bargrowth 1000ms ease;
  animation: bargrowth 1000ms ease;
  position: absolute;
  bottom: 0;
  display: inline-block;
  background: #89b800;
  box-shadow: 1px -1px #79a300, 2px -2px #79a300, 3px -3px #79a300;
  border-radius: 0.5em 0.5em 0 0;
}
sub,
sup {
  display: inline-block;
}
.bar sub:first-letter {
  font-size: 2em;
}
.wrapper {
  text-align: center;
  margin: 0em auto;
  width: fit-content;
  font-family: arial, sans-serif;
  font-size: 14px;
  padding: 2em;
  max-width: 98vw;
  height: 100%;
  min-height: 87vh;
  display: flex;
  flex: auto;
  flex-flow: column;
  justify-content: flex-end;
}

.wrapper > h1,
.wrapper > p {
  margin: 0;
}
/* /3dbar */

/* keyboard */

.keyboard-toggle {
  position: fixed;
  right: 1em;
  bottom: 1em;
  width: 64px;
  border: none;
  border-radius: 5%;
  overflow: hidden;
  box-shadow: 0px 4px 7px -5px #000;
  z-index: 10;
}
.keyboard-wrapper {
  position: fixed;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(10px);
  overflow: auto;
  z-index: 9;
}
ol.keyboard {
  width: 1215px;
  height: auto;
  padding: 75px 0 0 16px;
  list-style-type: none;
  list-style: none;
}
.keyboard li,
.key {
  width: 47px;
  height: 69px;
  border-radius: 8px;
  padding: 0 12px;
  line-height: 69px;
  float: left;
  position: relative;
  margin: 0 12px 12px 0;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-family: "Nagy Medve", "Arial Rounded", Helvetica, Arial, sans-serif;
  font-size: 24px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.keyboard li:active,
.key:active {
  top: 2px;
  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.5);
}
.night li,
.night .key {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 4px rgba(255, 255, 255, 0.3);
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4),
    -2px 2px 3px rgba(255, 255, 255, 0.4), 2px -2px 3px rgba(255, 255, 255, 0.4),
    -2px -2px 3px rgba(255, 255, 255, 0.4);
}
.keyboard.night li:active,
.night .key:active {
  box-shadow: 0 0px 0 rgba(255, 255, 255, 0.6),
    0 0px 4px rgba(255, 255, 255, 0.3);
}
ol.keyboard li span {
  display: none;
  height: 14px;
  line-height: 42px;
}
.special {
  height: 53px;
  padding-top: 16px;
  font-size: 16px;
  visibility: hidden;
}
.special span {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 0 12px;
  height: auto;
  line-height: 36px;
  font-size: 13px;
}
.tall {
  height: 62px;
}
.special.tall {
  height: 51px;
  padding-top: 28px;
}
.less-padding {
  padding: 0 8px;
  width: 55px;
}
.less-padding span {
  padding: 0 8px;
}
.r {
  text-align: right;
}
.l {
  text-align: left;
}
#delete {
  width: 96px;
}
#tab {
  width: 96px;
}
#caps-lock {
  width: 114px;
}
#enter {
  width: 0;
}
.shift {
  width: 96px;
}
.shift.r {
  width: 155px;
}
.command {
  width: 71px;
}
.command span {
  font-size: 24px;
  line-height: 44px;
}
#space {
  width: 379px;
}
.arrow {
  height: 38px;
  line-height: 38px;
  margin: 0 12px 3px 0;
  font-size: 20px;
  visibility: hidden;
}
.up {
  margin: 0 83px 3px;
  border-radius: 8px 8px 0 0;
}
.down {
  border-radius: 0 0 8px 8px;
}

/* /keyboard */

.bar span {
  vertical-align: bottom;
  position: absolute;
  top: -1.4em;
  width: 100%;
  text-align: center;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  /*     text-indent: 0.6em; */
}
.row a.image {
  left: -1.6em;
  position: relative;
  vertical-align: baseline;
  width: 1em;
  text-align: center;
}
.row {
  margin: 0px auto;
  max-width: 28em;
  text-align: left;
  /* text-indent: -1.2em; */
  line-height: 1.2em;
  position: relative;
}
sup.letter {
    left: -2em;
    display: block;
    line-height: 1em;
    margin-top: -1em;
    position: relative;
}
small#footer {
  display: block;
  margin: auto;
  text-align: center;
  margin-top: 2em;
  opacity: 0.8;
}
.input {
  padding: 0.6em;
  font-size: 1.2em;
  position: fixed;
  z-index: 99;
  top: 1.2em;
  width: 300px;
  text-align: center;
  right: 0;
}
header {
  text-align: left;
}
header h1 {
  position: relative;
  width: calc(100% - 300px);
}
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  color: #00a6ed;
  text-decoration: none;
}

a.image img {
  min-height: 19px;
  width: auto;
}
div#rovas {
  flex-direction: row-reverse;
  text-align: center;
  margin: 0.4em auto;
  display: inline-flex;
}
symbol {
  display: inline-flex;
  flex: auto;
}
#scramble {
  padding: 1em;
  font-size: 1.2em;
  font-weight: bold;
  cursor: cell;
}
#scramble > * {
  display: inline;
  padding: 0.3em;
}
#ertelmezes {
  margin-left: 0.8em;
}
#ertelmezes .row {
  max-width: 100%;
  text-align: left;
  line-height: 1.2em;
  position: relative;
  margin: 0.3em auto;
  border-bottom: 1px solid #d8231d57;
  padding: 0.3em 0;
}
.decr {
  display: inline-block;
  text-align: left;
  text-indent: 0;
  font-variant: petite-caps;
}
.hidden {
  display: none;
  padding: 0 1em;
}
fieldset {
  margin: 2em auto 1em;
  max-width: 100%;
  border-radius: 0.4em;
  text-align: left;
  vertical-align: middle;
  height: auto;
}
legend {
  font-weight: bold;
  float: none !important;
  display: block;
  clear: both;
  padding: 0 1em;
  -webkit-appearance: button;
}
button,
input[type="submit"] {
  cursor: pointer;
}
fieldset > ul {
  margin: 0;
}
.dark-mode {
  background-color: #1f1a16;
  color: white;
}
.dark-mode .image img {
  filter: invert(1);
}
.dark_toggle {
  background-image: url(/img/szekler-day.svg);
  background-color: #1f1a16;
  position: fixed;
  right: 1em;
  bottom: 3.69em;
  width: 64px;
  height: 64px;
  background-position: 46% 50%;
  background-size: 98%;
  border: none;
  text-indent: -963px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0px 0px 0px 2px #d8231d;
}
.dark_toggle:hover {
  box-shadow: 0px 0px 0px 3px #d8231d;
}
.dark-mode .dark_toggle {
  background-image: url(/img/szekler-night.svg);
  background-color: #d8231d;
}
#ertelmezes .row > * {
  display: inline-block;
}