/* header-1 */

.header-1 {
  position: fixed;
  width: 100%;
  z-index: 9999;
}

.header-1 .menu-container{

}

.header-1 .bg{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  /*background-color: #0D0E1F;*/
  background-image: url("../imgs/H1.png");
  z-index: -1;
  height: 0;
  transition: height .3s ease-out;
}

.header-1 ul{
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  /* background-color: #f6f5fa; */
}
/*-->menüpontok nevei-->*/
.header-1 li a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
  color:#f6f5fa;
  text-align: center;
  font-size: 30px;
  font-family: 'Charmonman', cursive;
  font-weight: 500;
  width: 100vw;
}
/*-->háttere a menünek-->*/
.header-1 li a:hover,
.header-1 .menu-btn:hover {
  /*background-color: rgba(255,255,255,.1);*/
  background-image: url("../imgs/H1.png");
}

.header-1 .logo {
  display: block;
  float: left;
  padding: 20px 20px;
  text-decoration: none;
}

/* menu */

.header-1 .menu {
  clear: both;
  height: 0;
  transition: height .2s ease-out;
  display: none;
}

/* menu icon */

.header-1 .icon-style {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 38px 30px;
  position: relative;
  user-select: none;
}

.header-1 .icon-style .icon {
  background: #0D0E1F;
  display: block;
  height: 2.5px;
  position: relative;
  transition: background .2s ease-out;
  width: 30px;
}

.header-1 .icon-style .icon:before,
.header-1 .icon-style .icon:after {
  background: #0D0E1F;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header-1 .icon-style .icon:before {
  top: 9px;
}

.header-1 .icon-style .icon:after {
  top: -9px;
}

/* menu btn */

.header-1 .menu-btn {
  display: none;
}

.menu-container.checked .icon-style .icon:before{
  transform:rotate(-45deg);
  top: 0;
  background-color: #272135;
}


.menu-container.checked .icon-style .icon:after{
  transform:rotate(45deg);
  top: 0;
  background-color: #272135;
}


.menu-container.checked .icon-style .icon{
 background: transparent !important;
}

.header-1 ul.menu.checked li a{
  color:#272135;
}

.header-1 .bg.checked, .menu.checked{
  height: 100vh;
}

.menu.checked{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: calc(100vh - 78.5px);
  flex-direction: column;
}

/* .menu{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
} */