html, body{
width: 100%;
height: 100%;
font-size: 18px;
font-family: 'Comfortaa', cursive;
font-family: 'Roboto', sans-serif;
overflow: hidden;	
}
.col-12{
display: inline-flex;
    position: fixed;
    width: inherit;
    height: 10%;
/*    background-color: #fff;*/
}
a:link{
	color: #8f7800 !important;
	text-decoration: none;
	list-style: none;	
}
a:visited{
	color: #8f7800 !important;
/*	text-decoration: none;
	list-style: none;*/	
}

#menu h3{
	color: #8f7800;
	margin: 0 auto;
	padding: 10px 10px 10px 10px;
}
#hide{
   display: none;
}

#desktop ul{
	position: fixed;
        display: block;
	top:0;
	background-color: #1e2426;
	border: 0 5px 5px 0;
	border-bottom: 5px;
	border-right: 5px;
	border-bottom-color: #8f7800;
	border-right-color: #8f7800;
	border-bottom-style: solid;
	border-right-style: solid;
	border-radius: 0 0 10px 0;
	width: 30%;
	margin: 0;
	padding: 0;
        z-index: 10000;
	
}

#desktop ul li{
	display: inline-block;
	color: #8f7800;
	list-style: none;
	margin: 5px;
        padding: 2px 2px;
	
}

#mipresento{
	position: absolute;
	display: none;
	background-color: #1e2426;
	color: #8f7800;
	margin-left: 35%;
	top: 1%;
	width: 50%;
	height: auto;
	border: 5px solid #8f7800;
	border-radius: 10px;
        z-index: 10000;
}
#mipresentotxt{
	font-size: 1rem;
	width: 90%;
	padding: 5%;
}

#contatti{
	position: absolute;
	display: none;
	background-color: #1e2426;
	color: #8f7800;
	margin-left: 35%;
	top: 5%;
	width: 35%;
	height: auto;
	border: 3px solid #8f7800;
	border-radius: 10px;
        z-index: 10000;
}
#io img{
	width: 40%;
	height: auto;
}
#contattiform{
	font-size: 1rem;
	width: 90%%;
	padding: 5%;
}	
form{
	margin: 20px;
}
#gallery{
	position: absolute;
	display: none;
	background-color: #1e2426;
	color: #8f7800;
	margin-left: 5%;
	top: 10%;
	width: 70%;
	height: 500px;
	overflow-y: scroll;
	border: 3px solid #8f7800;
	border-radius: 10px;
        z-index: 10000;
}
#gallerycont{
	font-size: 1rem;
	width: 90%%;
	padding: 5%;
        z-index: 10000;

}
#gallerycont li{
	color: #8f7800;
	text-decoration: none;
	list-style: none;     
}
#gallerycont ul{
	display: flex;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}
#gallerycont img{
	width: 80%;
	height: auto;
	
}
#gallerycont p{
	color: #8f7800;	
}
.wrap{
	width: 60%;
	word-wrap: break-word;
}
#imgmobil{
     display: none;
	}

#informaz{
	position: absolute;
	display: none;
	background-color: #1e2426;
	color: #8f7800;
	margin-left: 5%;
	top: 10%;
	width: 60%;
	height: auto;
	border: 3px solid #8f7800;
	border-radius: 10px;
        z-index: 10000;

}
#informazcont{
	font-size: 1rem;
	width: 90%;
	padding: 5%;
}

.titol{
/*	width: 95%;*/
	margin: 5%;
/*	float: left;*/
}
.pos{
/*	position: fixed;*/
	width: 70%;
	float: left;
	top: 100px;
       margin-right: 100px;
    left: 100px;
}
.close{
    display: flex;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
	justify-content: flex-end;
	width: 30%;
    margin-top: 3%;
    margin-right: 5%;
/*	position: fixed;*/
}
input, textarea{
    font-size: 1rem;
    color: #8f7800;
    margin: 1% 10% 3% 10% !important;
    padding-left: 0%;
    align-content: center;
    width: 75%
}
textarea{
	height: 80px;
}
#sli_m{
	display: none;
	}
#sli_b{
	display: block;
	}


/*

Media 
*/
@media all and (max-width: 1260px){
	#desktop ul{
		width: 40%
	}
	#desktop ul li{
       margin: 1%;
       padding: 1% 2%;
	}
	#gallery {
		max-height: 500px;
	}
	#gallerycont ul{
		max-height: 500px;
	}
	#mipresento{
	    overflow-y: scroll;
	}
	#informaz{
		overflow-y: scroll;
	}
	#contatti{
		overflow-y: scroll;
	}
}
@media all and (max-width: 1050px){
	#desktop ul{
		width: 37%
	}
	#desktop ul li{
		margin: 2%;
		padding: 2% 0%;
	}
}
@media all and (max-width: 950px){
	#desktop ul{
		width: 45%
	}
	#desktop ul li{
		margin: 2%;
		padding: 0;
	}
	#mipresento{
		width: 60%;
	    overflow-y: scroll;
	}
	#informaz{
		width: 50%;
	}
	#contatti{
		width: 50%;
	}
}
@media all and (max-width: 800px){
	#desktop ul{
		width: 50%
	}
	#desktop ul li{
		margin: 1%;
		padding: 1%;
	}
	#gallerycont img{
	    width: 60%;
	    height: auto;
	
    }

}

@media all and (max-width: 750px){
	#desktop ul{
        width: 60%;
	}
	#desktop ul li{
		margin: 1%;
		padding: 1%;
	}
	#gallery {
         max-height: 400px;
}
	#gallerycont ul{
		display: block;
}	
	#gallerycont img{
	    width: 60%;
	    height: auto;
	
}

}
@media all and (max-width: 600px){
	#desktop ul{
        width: 72%;
	}
	#desktop ul li{
		margin: 1%;
		padding: 1%;
	}
}

@media all and (max-width: 500px){
    body{
	    overflow: scroll;
	}
    #hide{
	    display: block;
	}
    #desktop ul{
	    display: none;
	}
    #sli_b{
	    display: none;
	}
    #sli_m{
	    display: block;
	    z-index: 0;
	}
	#sli_m img{
		z-index: 0;
		}	
	#gallery{
		display: none;
		}
	.close{
		display: none;
		}
	.col-12{
	/*    display: inline-flex;*/
		position:static;
		width: inherit;
	}
	#pos{
		position: static;
		width: 30%;
		float: left;
		margin-right: 100px;
		left: 100px;
	}
	#mipresento{
		position: static;
		display: block;
		border: 0;
		margin: 0;
		width: 100%;
		border-radius: 0;	
		}



	#contatti{
		position: static;
		display: block;
		width: 100%;
		border: 0;
		margin: 0;
		border-radius: 0;
	}
	 #informaz{
		position: static;
		display: block;
		margin: 0;
		border: 0;
		width: 100%;
		border-radius: 0;
	}	
	 #gallerycont img{
			display: none;

		}
	#imgmobil{
			display: block;
			width: 100%;
			height: auto;
		}
	.dropbtn {;
		z-index: 5000;
		background-color: #1e2426;
		color: #8f7800;
		padding: 16px;
		font-size: 16px;
		border: none;
		cursor: pointer;
	}

	.mobile {
		z-index: 6000;
		top: 0;
		position: fixed;
		display: inline-block;
	}
	.mobile-content {
		display: none;
		position: absolute;
		background-color: #1e2426;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 7000;
	}

	.mobile-content a {
		color: #8f7800;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
	}

	.mobile-content a:hover {background-color: rgb(192, 192, 192)}

	.mobile:hover .mobile-content {
		display: block;
	}

	.mobile:hover .dropbtn {
		background-color: rgb(192, 192, 192);
	}


}