:root{
  --mapWidth:100%;
  --mapHeight:calc(var(--mapWidth)/1.1618);
  
  --contWidth: 500px;
	--contHeight: 400px;
}

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background: #ffffff;  
  position:relative;

  font-weight: 300;
  font-size: 16px;

}


.button{
  outline:none;
  border:none;

  position:relative;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;

  padding:1.5em;
  outline:none;
  text-decoration:none;

  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: rgb(14, 14, 14);
  color:white;

  margin-top:1.3rem;

  border-radius:2px;

  cursor: pointer;

  white-space:nowrap;

  width:13em;
  height:2em;

  overflow:hidden;
}



.button > img{
object-fit: contain;
width:2.5em;
margin-left:0.5em;
}



.button:hover > img{
  transform:translateX(0.3em);
}

.button:focus > img{
  animation: arrow 0.3s ease-in forwards, arrowback 0.3s ease-in 1s forwards;
}


@keyframes arrow {
  0% {
    transform:translateX(0);
  }
  20% {
    transform:translateX(-0.2em);
  }
  100% {
    transform:translateX(4em);
  }
}
@keyframes arrowback {
  to {
    transform:translateX(0);
  }
}







.sup{
  opacity:0;
  transform:translateY(50px);
  transition: all 0.3s ease-out;
}
.smotted{
  opacity:1!important;
  transform:translateY(0px)!important;
}

.op{
opacity:0;
transition: all 0.2s ease-out;
}
.opop{
  opacity:1;
}


.osup{
  transform:translateY(70px);
  transition: all 0.3s ease-out;
}
.osmotted{
  transform:translateY(0px)!important;
}
@media (max-width: 900px) {
  .osup{
    transform:translateY(0px)!important;
    transition: all 0.3s ease-out;
  }
}



.sleft{
  opacity:0;
  transform:translateX(-70px);
  transition: all 0.3s ease-out;
}
.sleff{
  opacity:1;
  transform:translateX(0px);
}


.sright{
  opacity:0;
  transform:translateX(70px);
  transition: all 0.3s ease-out;
}
.srr{
  opacity:1;
  transform:translateX(0px);
}








#magyarorszag{
  fill:#ED2020;
  stroke: #ED2020;
  stroke-width: 0.2px;
  
}
#lengyelorszag{transition: all 0.8s ease;}
#ausztria{transition: all 0.8s ease;}
#szlovakia{transition: all 0.8s ease;}
#hollandia{transition: all 0.8s ease;}
#bulgaria{transition: all 0.8s ease;}
#ukrajna{transition: all 0.8s ease;}
#feheroroszorszag{transition: all 0.8s ease;}
#litvania{transition: all 0.8s ease;}
#nemetorszag{transition: all 0.8s ease;}
#spanyolorszag{transition: all 0.8s ease;}
#gorogorszag{transition: all 0.8s ease;}
#dania{transition: all 0.8s ease;}
#kinainepkoztarsasag{transition: all 0.8s ease;}
#oroszorszag1{transition: all 0.8s ease;}
#oroszorszag2{transition: all 0.8s ease;}
#olaszorszag{transition: all 0.8s ease;}