@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400&display=swap&subset=latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
*{
    font-family: 'Lato', sans-serif;
}

/*============320px==========================*/
@media (max-width: 320px) {
  input[type="checkbox"]:checked~nav {
    width: 100%;
    /*	transform: translateX(100%);*/
    /*transition: width 2s;*/
  }

  input[type="checkbox"]:checked~.arak {
    opacity: 0.2;
  }

  .label {
    left: 0%;
    top: 0%;
  }

  .input:checked~nav {
    width: 31%;
  }

  .input:checked~.arak {
    opacity: 0.2;
  }

  .arak {
    margin-top: 40px;
    width: 100%;
    height: 100%;
    padding: 10px;
  }
  .egyeni
   {
    font-size: 1.3em;
    font-weight: 500;
    letter-spacing:0px;
  }
  
  .vienna {
    font-size: 1.3em;
    font-weight: 500;
    letter-spacing:0px;
  }
  .alkalom,
  .forint {
    color: #ffffff;
    font-size: 1em;
  }
  .mivel,
  .csapat,
  .amennyiben {
    font-size: 1em;
    padding: 0;
    font-weight: 300;
  }

}

/*============375px==========================*/
@media (min-width: 321px) and (max-width: 375px) {
  input[type="checkbox"]:checked~nav {
    width: 100%;
    /*	transform: translateX(100%);*/
    /*transition: width 2s;*/
  }

  input[type="checkbox"]:checked~.arak {
    opacity: 0.2;
  }

  .label {
    left: 0%;
    top: 0%;
  }

  .input:checked~nav {
    width: 31%;
  }

  .input:checked~.arak {
    opacity: 0.2;
  }

  .arak {
    margin-top: 40px;
    width: 100%;
    height: 100%;
    padding: 10px;
  }
  .egyeni
   {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing:0px;
  }
  
  .vienna {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing:0px;
  }
  .alkalom,
  .forint {
    color: #ffffff;
    font-size: 1em;
  }
  .mivel,
  .csapat,
  .amennyiben {
    font-size: 1em;
    padding: 0;
    font-weight: 300;
  }

}

/*=================375px-424px==================*/
@media (min-width:376px) and (max-width:424px) {
  input[type="checkbox"]:checked~nav {
    width: 100%;
  }

  input[type="checkbox"]:checked~.arak {
    opacity: 0.2;
  }

  .label {
    left: 0%;
    top: 0%;
  }

  .input:checked~nav {
    width: 31%;
  }

  .input:checked~.arak {
    opacity: 0.2;
  }

  .arak {
    width: 100%;
    height: 100%;
    padding: 5px;
    margin-top: 40px;
  }


  .egyeni {
    font-size: 1.5em;
  }

  .vienna {
    font-size: 1.3em;
  }

  .alkalom,
  .forint {
    color: #ffffff;
    font-size: 1em;
  }

  .mivel,
  .csapat,
  .amennyiben {
    font-size: 1em;
    padding: 0 10px;
  }

}

/*===============425px - 767px===============*/
@media (min-width:425px) and (max-width:767px) {
  input[type="checkbox"]:checked~nav {
    width: 100%;
  }

  input[type="checkbox"]:checked~.arak {
    opacity: 0.2;
  }

  .label {
    left: 0%;
    top: 0%;
  }

  .input:checked~nav {
    width: 31%;
  }

  .input:checked~.arak {
    opacity: 0.2;
  }

  .arak {
    width: 100%;
    height: 100%;
    padding: 10px;
    margin-top: 40px;
  }


  .egyeni {
    font-size: 1.5em;
    letter-spacing: 0;
  }

  .vienna {
    font-size: 1.5em;
    letter-spacing: 0;
  }

  .alkalom,
  .forint {
    color: #ffffff;
    font-size: 1.2em;
  }

  .mivel,
  .csapat,
  .amennyiben {
    font-size: 1.2em;
    padding: 0 10px;
  }

}

/*=============== 768px - 1023=================*/
@media (min-width:768px) and (max-width: 1023px) {
  input[type="checkbox"]:checked~nav {
    width: 100%;
  }

  input[type="checkbox"]:checked~.arak {
    opacity: 0.2;
  }

  .label {
    left: 0%;
    top: 0%;
  }

  .input:checked~nav {
    width: 31%;
  }

  .input:checked~.arak {
    opacity: 0.2;
  }

  .arak {
    width: 70%;
    height: 100%;
    padding: 5px;
    margin-top: 40px;
  }

  .hozd {
    font-size: 4em;
    margin-top: 30px;
  }

  .egyeni {
    font-size: 2em;
  }

  .vienna {
    font-size: 2em;
  }

  .alkalom,
  .forint {
    color: #ffffff;
    font-size: 2em;
  }

  .mivel,
  .csapat,
  .amennyiben {
    font-size: 1.5em;
    padding: 0 10px;
  }
}

/*==============1024px - 1440px================*/
@media (min-width:1024px) and (max-width:1440px) {
  input[type="checkbox"]:checked~nav {
    width: 25.5%;
  }

  input[type="checkbox"]:checked~.arak {
    opacity: 0.2;
  }

  .label {
    left: 0%;
    top: 0%;
  }

  .input:checked~nav {
    width: 31%;
  }

  .input:checked~.arak {
    opacity: 0.2;
  }

  .arak {
    width: 50%;
    height: 100%;
    padding: 5px;
    margin-top: 40px;
  }

  .egyeni {
    font-size: 2em;
  }

  .vienna {
    font-size: 2em;
    letter-spacing: 0;;
  }

  .alkalom,
  .forint {
    color: #ffffff;
    font-size: 2em;
  }

  .mivel,
  .csapat,
  .amennyiben {
    font-size: 1.5em;
    padding: 0 10px;
  }
  }