#mypictures {
    position: absolute;
    left: 10px;
    top: 10px;
	max-width: 50%;
	height:90%;
		-webkit-box-shadow: 5px 5px 15px 5px #FFFFFF; 
box-shadow: 3px 3px 10px 3px #FFFFFF;

	object-fit: cover;
    
}
h3 {
    position: fixed;
    left: 30px;
    top: 35px;
    z-index: +1;
	color: red;
	background-color: white;
	
}
.nume{
    position: absolute;
    right:1%;
    top: 0%;
    z-index: +1;
	color: white;
	}
.titlu{
	position:absolute;
	left:55%;
	top:5%;
	right:5%;
	text-align: center;
	z-index:+1;
	Impact, Charcoal, sans-serif;
	font-size:20px;
	color: #c4b4b4;
	background-color: rgba(0, 0, 0, 0.6);
	}
.subtitlu{
	position:absolute;
	left:55%;
	top:15%;
	text-align: center;
	z-index:+1;
	font-family: Gabriola;
	font-size:20px;
	line-height:90%;
	color: white;
	}

.button2 {
	position: absolute;
  top: 80%;
  Left: 55%;
  Width:35%;
  Height: 10%;
  z-index: +5;
  	-moz-box-shadow: 0px 10px 14px -7px #276873;
	-webkit-box-shadow: 0px 10px 14px -7px #276873;
	box-shadow: 0px 10px 14px -7px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
	background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
	background-color:#599bb3;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding:8px 5px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.button2:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
	background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
	background-color:#408c99;
}



.btn-group button  {
	float:inline-table;
	position: relative;
  top: 0;
  Left: 0;

  z-index: +1;
  max-width:50%;
    background-color: #8B0000;
  border: 1px solid #FFB555; 
  color: #f0e9e9;
  margin:5px;
  padding: 3px 4px;
  cursor: pointer;

   font-family: "Lucida Console", Courier, monospace;
	}
	.btn-group button:hover {
  background-color: #808080;}
	.nume1 {
  position:absolute;
  top: 20%;
  Left: 50%;
  z-index: +1;
  color:white;
	}
	.nume2 {
  position:absolute;
    top: 25%;
  Left: 55%;

  z-index: +1;
  font-size: 27;
  color:white;
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
	}
	
	
#lista_orase{
	position:absolute;
	top:38%;
	left:55%;
	right:5%;
	bottom:20%;
	z-index:+1;
	visibility:hidden;

}	
#image-box{
	border-width:40px;

}

@media only screen and (max-width: 750px) {
.button2 {
    font-size:12px;
    left:62%;
    top:70%;
    left:40%;
    
    
}
#mypictures {
    position: absolute;
    left: 5px;
    top: 10px;
	max-width: 60%;
	height:50%;
	
	object-fit: cover;
    
}
  .nume{
        font-size:9px;
        
    }

.subtitlu{
	position:absolute;
	left:70%;
	top:18%;
	text-align: center;
	z-index:+1;
	font-family: Gabriola;
	font-size:20px;
	line-height:90%;
	color: white;
	}
	
		.nume2 {
  position:absolute;
    top: 35%;
  Left: 70%;

  z-index: +1;
  font-size: 27;
  color:white;
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
	}
	
#lista_orase{
	position:absolute;
	top:55%;
	left:5%;
	right:5%;
	bottom:5%;
	z-index:+1;
}	

.btn-group button  {
	font-size:12px;
}
.button2 {
	top:32%;
	max-height:7%;
}
.titlu{
	font-size:14px;
	left:70%;
}
}

#myProgress {
position:absolute;
  width: 98%;
  bottom:0%;
  background-color: rgb(238, 255, 179);
  z-index:150;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: rgb(142, 40, 40);
    z-index:150;

}

#procent{
	font-size:12px;
	color:white;
	margin-top:auto;
	margin-bottom:auto;
	font-family: Tahoma, Geneva, sans-serif;
	text-align:center;
	vertical-align: middle;
	margin:auto;
	padding: 2px 0;
	z-index:200;
	position:relative;
	}


#joc_final{
	position:absolute;
	top:50%;
	left:50%;
	z-index:50;
	font-family: Tahoma, Geneva, sans-serif;
	color:white;
	visibility:hidden;
	text-align:center;

}
#joc_nou{
	position:absolute;
	top:2%;
	left:2%;
	width:auto;
	height:5%;
	  background-color: #f4511e;
  border: none;
  color: white;
  padding: 2px 2px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  z-index:55;

}

#joc_nou:hover {opacity: 1}

@media only screen and (max-width: 500px) {
#myProgress {
position:absolute;
  width: 98%;
  top:55%;
  height:5%;

  z-index:150;
}
.button2 {
    font-size:12px;
    left:62%;
    top:70%;
    left:40%;}
    
#myBar {
  width: 1%;
  height: 100%;

    z-index:150;

}


#lista_orase{
	position:absolute;
	top:61%;
	left:5%;
	right:5%;
	bottom:5%;
	z-index:+1;
}	
#joc_final{
	position:absolute;
	top:61%;
	left:2%;
	z-index:50;
	font-family: Tahoma, Geneva, sans-serif;
	color:white;
	visibility:hidden;
	text-align:center;

}

}
@media only screen and (max-height: 500px) {
    
    #myProgress {
position:absolute;
  width: 50%;}
  
  #lista_orase{
	position:absolute;
	top:60%;
	left:51%;
	right:1%;
      
  }
  
  .titlu {
      top:15%;
      left:70%;
  }
    
     .subtitlu {
      top:25%;
      left:70%;
  }
    
         .nume2 {
      top:45%;
      left:70%;
  }
    .nume{
        font-size:9px;
        
    }
    
    .button2 {
    font-size:12px;
    left:62%;
    top:70%;
    left:40%;
        
    }
    
}