*
{
  padding:0;
  margin:0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  outline:none;
 /* cursor:none; */ 
 font-family:Calibri;
 color:#333333;
}

html
{
  overflow: hidden;
  position:relative;
}



.rezultat
{
    visibility: hidden;
    position: absolute;
    z-index: 1000;
    width: 500px;
    height: 300px;
    left: 5%;
    top: 50%;
    text-align:center;
}

.bravo
{
  font-size:50px;
}

#background
{
  width:1920px;
  height:1080px;
  overflow:hidden;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  background: 
}

#overlay
{
  width:1920px;
  height:1080px;
  overflow:hidden;
  position:absolute;
  top:0;
  left:0;
  z-index:100;
  display:block;
  background: #FFF47A;
}

.container
{
  position: absolute;
  width:1920px;
  height: 1080px;
  z-index:3;
}

h1
{
  width:750px;
  font-size:26px;
}

h2
{
  width:750px;
  font-size:20px;
  display:none;
}


#Puzli
{
  position: absolute;
  left:0px;
  top:140px;
}

.Kos
{
  width:262.5px;
  height:210px;
  z-index:10;
  position:absolute;
  box-shadow: 0 0 15px #000;
  border-radius: 10px;
}

#puzzle1
{
}



.Kos[x="a"]
{
  background-position-x:0;

}

.Kos[x="b"]
{
  background-position-x:-262.5px;

}

.Kos[x="c"]
{
  background-position-x:-525px;

}

.Kos[x="d"]
{
  background-position-x:-787.5px;

}

.Kos[y="1"]
{
  background-position-y:0;

}

.Kos[y="2"]
{
  background-position-y:-210px;

}

.Kos[y="3"]
{
  background-position-y:-420px;

}

.Kos[y="4"]
{
  background-position-y:-630px;

}

#Puzzle .Prostor
{
  width:262.5px;
  height:210px;
  position:absolute;
}

#Puzzle .Prostor[x="a"]
{
  left:0;
}

#Puzzle .Prostor[x="b"]
{
  left:262.5px;
}

#Puzzle .Prostor[x="c"]
{
  left:525px;
}

#Puzzle .Prostor[x="d"]
{
  left:787.5px;
}

#Puzzle .Prostor[y="1"]
{
  top:0;
}

#Puzzle .Prostor[y="2"]
{
  top:210px;
}

#Puzzle .Prostor[y="3"]
{
  top: 420px;
}

#Puzzle .Prostor[y="4"]
{
  top: 630px;
}

#Puzzle .Prostor[x="a"][y="1"]
{
  border-radius: 25px 0 0 0;
}

#Puzzle .Prostor[x="a"][y="4"]
{
  border-radius:  0 0 0 25px;
}

#Puzzle .Prostor[x="d"][y="4"]
{
  border-radius:  0 0 25px 0;
}

#Puzzle .Prostor[x="d"][y="1"]
{
  border-radius:  0 25px 0 0;
}

#Puzzle
{
  position: absolute;
  background: #EBEBEB;
    top:200px;
  right:100px;
  width:1050px;
  height:840px;
  border-radius: 25px;
  box-shadow: 0 0 30px #808080;
}

.PuzzleMask
{
  position: absolute;
  right:0px;
  width:1050px;
  height:840px;
  border-radius: 25px;
}


#restart
{

    background-image: url("../imgs/restart1.png");
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 250px;
    border-radius: 100px;
}

.naslov
{
    position: absolute;
    bottom: 80px;
    left: 300px;
    font-size: 50px;
}