@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
html{
	background-color:black;

}
body {
 
  width:auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  font-family: 'Source Sans Pro', sans-serif;
  background-color:#dcd9d2;
  border: 5px double #CF5842;
  
}


	.caseta{
		position: relative;
		display: inline-block; 
		max-height:90%;
		top:10%;
	}

		#harta{
	  display: block;
	left:30%;
   height: 100%;
	
	}
.caseta svg {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  visibility:hidden;
  z-index:102;
  
}
path:hover {fill: rgba(255,69,69,0.5);
cursor: -webkit-grabbing; cursor: grabbing;}

	#titlu{
		position:absolute;
		right:3%;
		left:3%;
		max-height:10%;
		top:1%;
		font-size:28px;
		color: #FF4019;
	text-align:center;
z-index:101;
	font-weight:700;
	font-family: "Arial Black", Gadget, sans-serif;
text-shadow: #474747 1px 3px 1px;
background:  rgba(255,255,255,0.4);
padding:10px;
z-index:1;

	}
	
	#date{
	position:absolute;
	top:15%;
	left:3%;
		max-width:30%;
		z-index:204;
			font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
			font-weight: 700;
	}
	
	#timp{
		display:none;
		}
		
	#butoane{
		position:absolute;
		top:15%;
		height:10%;
		max-width:30%;
		right:3%;
		margin:10px;
		z-index:203;
	}
	
	.button{
		font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
		text-shadow: #00000 1px 1px 0;
		font-weight: 700;
		color:white;
		cursor:pointer;
		width:100%;
		background-color:rgb(255,85,51);
			-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
	
	}
=
	
		.button:hover {
			background-color:rgba(255,85,51,0.3)
			
		}
		#subunitate{
				font-size:20px;
				text-decoration: underline solid rgb(68, 68, 68);
				text-shadow: #e0e0e0 1px 1px 0;
		}
		
		#credits{
			position:absolute;
			bottom:2%;
			text-align:left;
			z-index:133;
			left:4%;
			font-size:10px;
			font-style:italic;
		}
		
		#formular{
    position: fixed;
    right:2%;
    max-width: 30%;
    z-index:203;
    font-size: 12px;
}
    input[type=text], select {
  width: 100%;
  height:20%;
font-size:18px;
font-family: Tahoma, Geneva, sans-serif;
  padding: 2px 5px;
  margin: 8px 0;
  display:block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
 
}

  input[type=submit] {
  width: 100%;
  background-color: #0a6dbd;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}  
input[type=submit]:hover {
  background-color: #ffb3b3;
}

label{
font-size:18px;
font-family: Tahoma, Geneva, sans-serif;
}

    
		
		
	@media screen and (max-width: 700px) {
		#titlu{
			font-size:15px;
		}
	.caseta  {
    	top:50%;
		max-width:100%;
		max-height:35%;
	}
		#date{
			max-width:80%;
			left:10%;
			font-size:13px;
			top:15%;
		}
		.button{font-size:11px;}
		#credits{
		    font-size:8px;
		    
		}
}
@media screen and (max-width: 400px) {
		
		
		.caseta  {
		top:60%;
		max-height:30%;
		}
		#formular{

            bottom:20%;
            max-width:50%;
            right:25%;}
}
	

.dropdown {
  position: relative;
  display: inline-block;
  width:100%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(0,0,0,0);
  width: 100%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content button {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width:100%;
}

.dropdown button:hover {background-color: #ddd;}

.show {display: block;}