/*input:checked ~ span
  {
    display: inline-block;
  }

  .checkmark {
    width: calc(100% - 35%);
    height: 0.34vmax;
    border-radius: 1vmax;
    background-color: #ffffff;
  }

  .checkmarka { 
    width: calc(100% - 35%);
    animation-name: jobb;
    animation-duration: 0.4s;
    height: 0.34vmax;
    border-radius: 1vmax;
    background-color: #ffffff;
  }

  .checkmarkb {
    width: calc(100% - 35%);
    animation-name: bal;
    animation-duration: 0.4s;
    height: 0.34vmax;
    border-radius: 1vmax;
    background-color: #ffffff;
  }

  .checkmarka2 { 
    width: calc(100% - 35%);
    animation-name: jobb;
    animation-duration: 0.4s;
    height: 0.34vmax;
    border-radius: 1vmax;
    background-color: #ffffff;
  }

  .checkmarkb2 { 
    width: calc(100% - 35%);
    animation-name: bal;
    animation-duration: 0.4s;
    height: 0.34vmax;
    border-radius: 1vmax;
    background-color: #ffffff;
  }

  .checkmarka3 { 
    width: calc(100% - 35%);
    animation-name: jobb;
    animation-duration: 0.4s;
    height: 0.34vmax;
    border-radius: 1vmax;
    background-color: #ffffff;
  }

  .checkmarkb3 { 
    width: calc(100% - 35%);
    animation-name: bal;
    animation-duration: 0.4s;
    height: 0.34vmax;
    border-radius: 1vmax;
    background-color: #ffffff;
  }

  .custombtn input {
    display: none;
  }*/

  /*.custombtn input:checked ~ .here {
    margin-left: -20%;
    display: none;
  }


  /*#egy:checked ~ .here {
    margin-left: 0%;
  }

  #ketto:checked ~ .here {
    margin-left: -40%;
  }

  #harom:checked ~ .here {
    margin-left: -80%;
  }*/

  @keyframes kepj
{
  0% 
  {
    opacity: 0;

  }

  70%
  {
    opacity: 1;
  }
}

@keyframes kepb
{
  0% 
  {
    opacity: 0;

  }
  
  70%
  {
    opacity: 1;
  }
}

@keyframes kepj2
{
  0% 
  {
    opacity: 0;

  }

  70%
  {
    opacity: 1;
  }
}

@keyframes kepb2
{
  0% 
  {
    opacity: 0;

  }

  70%
  {
    opacity: 1;
  }
}

@keyframes kepj3
{
  0% 
  {
    opacity: 0;

  }

  70%
  {
    opacity: 1;
  }
}

@keyframes kepb3
{
  0% 
  {
    opacity: 0;

  }

  70%
  {
    opacity: 1;
  }
}

@keyframes kepj4
{
  0% 
  {
    opacity: 0;

  }

  70%
  {
    opacity: 1;
  }
}

@keyframes kepb4
{
  0% 
  {
    opacity: 0;

  }

  70%
  {
    opacity: 1;
  }
}

/* kep animacio vege */

@keyframes cimbal
{
  0%
  {
    transform: translateX(30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes cimjobb
{
  0%
  {
    transform: translateX(-30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes cimbal2
{
  0%
  {
    transform: translateX(30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes cimjobb2
{
  0%
  {
    transform: translateX(-30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes cimbal3
{
  0%
  {
    transform: translateX(30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes cimjobb3
{
  0%
  {
    transform: translateX(-30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes cimbal4
{
  0%
  {
    transform: translateX(30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes cimjobb4
{
  0%
  {
    transform: translateX(-30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

/* cim animacio vege */


@keyframes alsobal
{
  0%
  {
    transform: translateX(30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes alsojobb
{
  0%
  {
    transform: translateX(-30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

    
@keyframes alsobal2
{
  0%
  {
    transform: translateX(30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes alsojobb2
{
  0%
  {
    transform: translateX(-30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}


@keyframes alsobal3
{
  0%
  {
    transform: translateX(30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes alsojobb3
{
  0%
  {
    transform: translateX(-30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes alsobal4
{
  0%
  {
    transform: translateX(30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

@keyframes alsojobb4
{
  0%
  {
    transform: translateX(-30%);
    opacity: 0;
  }

  70%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateX(0%);
  }
}

/* reklam tartalom animacio vege */

@keyframes gomb2
{
  0%
  {
    opacity: 0;
  }

  100%
  {
    opacity: 1;
  }
}



/*reklam gomb animacio vege*/



@keyframes tartalom
{
  0%
  {
    position: absolute;
    margin-left: 30%;
    opacity: 0;
    font-size: 2.07vmax;
  }

  100%
  {
    position: absolute;
    margin-left: 12%;
    opacity: 1;
  }

}



@keyframes bal
{
  0% 
  {
    transform: translateX(0.3vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes jobb
{
  0%
  {
    transform: translateX(-0.3vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;

  }

}

@keyframes szkepj0
{
  0%
  {
    transform: translateX(-2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepb0
{
  0%
  {
    transform: translateX(2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepj1
{
  0%
  {
    transform: translateX(-2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepb1 
{
  0%
  {
    transform: translateX(2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepj2
{
  0%
  {
    transform: translateX(-2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepb2
{
  0%
  {
    transform: translateX(2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepj3
{
  0%
  {
    transform: translateX(-2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepb3
{
  0%
  {
    transform: translateX(2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepj4
{
  0%
  {
    transform: translateX(-2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepb4
{
  0%
  {
    transform: translateX(2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepj5
{
  0%
  {
    transform: translateX(-2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepb5
{
  0%
  {
    transform: translateX(2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepj6
{
  0%
  {
    transform: translateX(-2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepb6
{
  0%
  {
    transform: translateX(2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepj7
{
  0%
  {
    transform: translateX(-2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

@keyframes szkepb7
{
  0%
  {
    transform: translateX(2vmax);
    opacity: 0;
  }

  100%
  {
    transform: translateX(0vmax);
    opacity: 1;
  }
}

/* potty navigation animacio vege */