.main-wrapper{
	height: 220px;
	position: relative;
}

/*nome località*/

#location-name{
   position: absolute;
   text-align: center;
   /*
   facciamo in modo che la div sia al centro del wrapper 
   dando spazio all'orologio che verrà posizionato sotto,
   settando il top al 50% e il margin-top negativo 
   */
   top:50%;
   width: 100%;
   margin-top:-140px;
   
   
   -webkit-transition: top 1s;
   -moz-transition: top 1s;
   transition: top 1s;
   
   visibility:hidden;
   display:none;
}

/*orologio*/

#clock{
	
	/*posizioniamo l'orologio al centro del wrapper, con left e top al 50%
	  e margin-top e manrgin-left negativi (pari al diametro dell'orologio) 	
	*/

	position: absolute;	
	left:50%;
	top:50%;
	width:170px;
	height:170px;
	margin-left: -100px;
	margin-top: -100px;
	
	border: 8px solid #f6b100;
	
	-webkit-border-radius: 120px;
	   -moz-border-radius: 120px;	
	    -ms-border-radius: 120px;
	     -o-border-radius: 120px;
	        border-radius: 120px;
	        
	-webkit-transition: top 1s;
    -moz-transition: top 1s;
    transition: top 1s;
	        
	}
	
	#clock .centre{
		background: #f6b100;
		
		position: absolute;	
		left:50%;
		top:50%;
		width:14px;
		height:14px;
		margin-left: -7px;
		margin-top: -7px;
		
		-webkit-border-radius: 12px;
		   -moz-border-radius: 12px;		
		    -ms-border-radius: 12px;
		     -o-border-radius: 12px;
		        border-radius: 12px;

	}
	
	#clock .hours, 
	#clock .minutes{
		background: #f6b100;
		
		position: absolute;	
		left:50%;
		top:50%;
		width:6px;
		margin-left: -3px;
		
		-webkit-border-radius: 3px;
		   -moz-border-radius: 3px;		
		    -ms-border-radius: 3px;
		     -o-border-radius: 3px;
		        border-radius: 3px;
		        
		-webkit-transition: -webkit-transform 1s ease;
		   -moz-transition: -moz-transform 1s ease;
		        transition: transform 1s ease;
		        
		-webkit-transform: translate3d(0, 0, 0);
		   -moz-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
		
	}
	
	
	#clock .hours{
		height:60px;
		margin-top: -57px;
		
		-webkit-transform-origin:50% 57px; /* Safari and Chrome */		
		    -ms-transform-origin:50% 57px; /* IE 9 */
		        transform-origin:50% 57px;


	}
	#clock .minutes{
		height:85px;
		margin-top: -82px;
		
		-webkit-transform-origin:50% 82px; /* Safari and Chrome */		
		    -ms-transform-origin:50% 82px; /* IE 9 */
		        transform-origin:50% 82px;
	}
	#clock .seconds{
		height:85px;
		width:2px;
		margin-left: -1px;
		margin-top: -85px;
		
		background: #f6b100;
		
		position: absolute;	
		left:50%;
		top:50%;
		
		-webkit-transition: -webkit-transform 0.8s ease;
		   -moz-transition: -moz-transform 0.8s ease;
		        transition: transform 0.8s ease;
		        
		-webkit-transform: translate3d(0, 0, 0);
		   -moz-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
		
		-webkit-transform-origin:1px 85px; /* Safari and Chrome */		
		    -ms-transform-origin:1px 85px; /* IE 9 */
		        transform-origin:1px 85px;		        
		
	}
	
	
/* un pensiero agli smartphone ed ai tablet, riposizioniamo gli elementi per risoluzioni più basse */

/*tablet*/


/*smartphone*/
@media (max-width: 400px){
		


	
}