body {
  padding:0;
  margin:0;
  overflow:hidden;
}

#screen1 {
  background-image:url('./screens/scr1.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  position:absolute;
  width:100%;
  height:100%;
  background-position: center center;
}

.out {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
	transition: all 1600ms ease;
	-webkit-transition: all 1600ms ease;
	-moz-transition: all 1600ms ease;
	-o-transition: all 1600ms ease;
	opacity:0;
}

#screen1 .felirat {
  width: 70%;
    padding: 5% 15%;
}

.slidein {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    -moz-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    -o-transform: translateX(0) !important;
    opacity:1;
}

#screen2 {
  background-image:url('./screens/scr2.jpg');
  background-size:cover;
  background-position: center center;
  background-repeat:no-repeat;
  position:absolute;
  width:100%;
  height:100%;
  z-index:2;
  display:none;
  overflow:hidden;
}

#screen2 img {
width:100%;
height:auto;
}

#screen2 .valassz {
width: 40%;
    padding: 5% 30%;
    position: absolute;
}

#screen2 .tarlos {
width: 28%;
    margin: 5% 10%;
    position: absolute;
    bottom: 0;
    cursor: pointer;
}

#screen2 .lazar {
    width: 28%;
    margin: 5% 10%;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

#screen2 .button-off, #screen2 .button-off {
    opacity: 0;
    z-index: 2;
    position: absolute;
    top: 0;
    transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
}

#screen2 .button:hover > .button-off {
opacity:1;
}

#screen3 {
  background-image:url('./screens/scr3_hatter.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  position:absolute;
  width:100%;
  height:100%;
  z-index:4;
  display:none;
  overflow:hidden;
}

.player {
width: 8%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.leftplayer {
    left: 1%;
}

.rightplayer {
right: 1%;
    transform: rotateY(180deg) translateY(-50%);
    -webkit-transform: rotateY(180deg) translateY(-50%);
    -moz-transform: rotateY(180deg) translateY(-50%);
    -ms-transform: rotateY(180deg) translateY(-50%);
    -o-transform: rotateY(180deg) translateY(-50%);
}

#metro {
width: 8%;
height: 5%;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    -o-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
   transition: transform 3000ms ease;
	-webkit-transition: -webkit-transform 3000ms ease;
	-moz-transition: transform 3000ms ease;
	-o-transition: transform 3000ms ease;
display:none;
}

.fordul {
transform:translateX(-50%) translateY(-50%) rotateZ(-720deg) !important;
-webkit-transform:translateX(-50%) translateY(-50%) rotateZ(-720deg) !important;
-moz-transform:translateX(-50%) translateY(-50%) rotateZ(-720deg) !important;
-ms-transform:translateX(-50%) translateY(-50%) rotateZ(-720deg) !important;
-o-transform:translateX(-50%) translateY(-50%) rotateZ(-720deg) !important;
}

#metro #kocsi {
    width: 100%;
    height: auto;
    position: relative;
}

#tuz {
    position: absolute;
    width: 30%;
    bottom: 50%;
    left: 20%;
}

.eredmeny {
font-size: 13vw;
    color: white;
    top: 1%;
    position: absolute;
    text-shadow: 2px 2px 5px black;
    font-family: 'VT323', monospace;
}

#rugott {
    left: 25%;
}

#kapott {
right:25%;
}

#vesztett {
  background-image:url('./screens/scr4_zarokepek_lose.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  position:absolute;
  width:100%;
  height:100%;
  z-index:10;
  display:none;
  overflow:hidden;
}

#nyert {
  background-image:url('./screens/scr4_zarokepek_win.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position: center center;
  position:absolute;
  width:100%;
  height:100%;
  z-index:10;
  display:none;
  overflow:hidden;
}

.like {
    position: absolute;
    left: 35%;
    bottom: 12%;
    display: block;
    padding: 5% 15%;
}

.newgame {
    position: absolute;
    right: 0%;
    bottom: 0%;
    display: block;
    padding: 5% 10%;
    cursor: pointer;
}