@charset "utf-8";
/* CSS Document */
html, body {height: 100%; overflow:hidden;}

body {
 margin:0;
 padding:0;
 display: flex;
 display: -webkit-flex;
 justify-content: center;
 align-items: center;
 -webkit-justify-content: center;
 -webkit-align-items: center;
}

#container {
background:url(../images/home_1920_1080.jpg);
 background-size: cover;
 background-position:center;
 width:100%;
 height: 100%;
 display: flex;
 display: -webkit-flex;
 flex-flow:row nowrap;
 -webkit-flex-flow: row nowrap;
 align-items: flex-start;
 -webkit-align-items: flex-start;
 justify-content:flex-end;
 -webkit-justify-content: flex-end;
 
 
}

 #box_nav {
 display: flex;
 display: -webkit-flex;
 flex-flow:row nowrap;
 -webkit-flex-flow: row nowrap;
 align-items: center;
 -webkit-align-items: center;
 justify-content:flex-start;
 -webkit-justify-content: flex-start;
 background:none;
 width: 40%;
 height:100%;
 
 }
 
#box_nav ul {
list-style-type: none;
margin: 0;
padding: 0
}

#box_nav li{
	z-index: 1;
	width: 433px;
	height: 61px;
}

#box_nav a {
    display: block; /* il link occupa tutto lo spazio orizzontale */
	width: 433px;
	height: 61px;
	text-decoration:none;
    background-image: none;
	background-size: contain;
    color:#fff;
} 

#box_nav a span{
position:relative;
z-index:-1;
}

#box_nav #progetto a{
background-image: url(../images/project.png);
}

#box_nav #progetto a:hover,
#box_nav #progetto a:focus,
#box_nav #progetto a:active {
background-image: url(../images/project_hover.png);
}

#box_nav #attivita a{
background-image: url(../images/proposte.png);
}

#box_nav #attivita a:hover,
#box_nav #attivita a:focus,
#box_nav #attivita a:active {
background-image: url(../images/proposte_hover.png);
}

#box_nav #archivio a{
background-image: url(../images/archivio.png);
}

#box_nav #archivio a:hover,
#box_nav #archivio a:focus,
#box_nav #archivio a:active {
background-image: url(../images/archivio_hover.png);
}

#box_nav #gallery a{
background-image: url(../images/gallery.png);
}

#box_nav #gallery a:hover,
#box_nav #gallery a:focus,
#box_nav #gallery a:active {
background-image: url(../images/gallery_hover.png);
}

#box_nav #fei a{
background-image: url(../images/fei.png);
}

#box_nav #fei a:hover,
#box_nav #fei a:focus,
#box_nav #fei a:active {
background-image: url(../images/fei_hover.png);
}

#box_nav #mymusic a{
background-image: url(../images/mymusic.png);
}

#box_nav #mymusic a:hover,
#box_nav #mymusic a:focus,
#box_nav #mymusic a:active {
background-image: url(../images/mymusic_hover.png);
}

#box_nav #contatti a{
background-image: url(../images/contatti.png);
}

#box_nav #contatti a:hover,
#box_nav #contatti a:focus,
#box_nav #contatti a:active {
background-image: url(../images/contatti_hover.png);
}

#box_nav #contatti a{
background-image: url(../images/contatti.png);
}

#box_nav #contatti a:hover,
#box_nav #contatti a:focus,
#box_nav #contatti a:active {
background-image: url(../images/contatti_hover.png);
}

#empty {
display:block;
}

#box_nav #empty a{
background-image: none;
}

#box_nav #empty a:hover,
#box_nav #empty a:focus,
#box_nav #empty a:active {
background-image: none;
}

#box_nav #lang a{
background-image:url(../images/button_english.png);
background-repeat: no-repeat;
background-position: 0 -81px;
width:433px;
height:81px;
background-size: cover;
}

#box_nav #lang a:hover,
#box_nav #lang a:focus,
#box_nav #lang a:active {
background: url(../images/button_english.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}

.popup_style {
height:300px; 
font-size:42px;
font-family: Times, serif; color:#ffffff;
margin:0 auto; text-align:center;
background-image:url(../images/in_costr.jpg);
background-position: 0 -250px;
}

.popup_style p{
padding-top:130px;
}



@media (min-width: 300px) and (max-width:550px){

#container {
background:url(../images/home_smartphone.jpg);
 background-size: cover;
 background-position:center;
 width:100%;
 height: 100%;
 display: flex;
 display: -webkit-flex;
 flex-flow:row nowrap;
 -webkit-flex-flow: row nowrap;
 align-items: flex-start;
 -webkit-align-items: flex-start;
 justify-content:center;
 -webkit-justify-content: center;
 
}

  #box_nav {
 display: flex;
 display: -webkit-flex;
 flex-flow:row nowrap;
 -webkit-flex-flow: row nowrap;
 align-items: flex-start;
 -webkit-align-items: flex-start;
 justify-content:center;
 -webkit-justify-content: center;
 background:none;
 width: 80%;
 height:100%;

 
 }
 
#box_nav ul {
list-style-type: none;
margin-top: 50px;
margin-left:20px;
padding: 0
}

#box_nav li{
	z-index: 1;
	width: 300px;
	height: 42px;
}

#box_nav a {
    display: block; /* il link occupa tutto lo spazio orizzontale */
	width: 300px;
	height: 42px;
	text-decoration:none;
    background-image: none;
	background-size: contain;
} 

#box_nav a span{
position:relative;
z-index:-1;
}

#box_nav #progetto a{
background-image: url(../images/project.png);
}

#box_nav #progetto a:hover,
#box_nav #progetto a:focus,
#box_nav #progetto a:active {
background-image: url(../images/project_hover.png);
}

#box_nav #attivita a{
background-image: url(../images/attivita.png);
}

#box_nav #attivita a:hover,
#box_nav #attivita a:focus,
#box_nav #attivita a:active {
background-image: url(../images/attivita_hover.png);
}

#box_nav #gallery a{
background-image: url(../images/gallery.png);
}

#box_nav #gallery a:hover,
#box_nav #gallery a:focus,
#box_nav #gallery a:active {
background-image: url(../images/gallery_hover.png);
}

#box_nav #fei a{
background-image: url(../images/fei.png);
}

#box_nav #fei a:hover,
#box_nav #fei a:focus,
#box_nav #fei a:active {
background-image: url(../images/fei_hover.png);
}

#box_nav #mymusic a{
background-image: url(../images/mymusic.png);
}

#box_nav #mymusic a:hover,
#box_nav #mymusic a:focus,
#box_nav #mymusic a:active {
background-image: url(../images/mymusic_hover.png);
}

#box_nav #contatti a{
background-image: url(../images/contatti.png);
}

#box_nav #contatti a:hover,
#box_nav #contatti a:focus,
#box_nav #contatti a:active {
background-image: url(../images/contatti_hover.png);
}

#box_nav #contatti a{
background-image: url(../images/contatti.png);
}

#box_nav #contatti a:hover,
#box_nav #contatti a:focus,
#box_nav #contatti a:active {
background-image: url(../images/contatti_hover.png);
}

#empty {
display:none;
}

#box_nav #lang a{
background-image:url(../images/button_english.png);
background-repeat: no-repeat;
background-position: 0 -49px;
width:263px;
height:49px;
margin-top:10px;
margin-left:30px;
background-size: cover;
}

#box_nav #lang a:hover,
#box_nav #lang a:focus,
#box_nav #lang a:active {
background: url(../images/button_english.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}

.popup {
padding:5px;
}
.popup_style {
height:200px; 
font-size:28px;
font-family: Times, serif;
color:#ffffff;
margin:0 auto;
text-align:center;
background-image:url(../images/in_costr.jpg);
background-position: 0 0;
background-size: 100%;
border: 3px solid #fff;
}

.popup_style p{
padding-top:90px;
}

}



@media (min-width: 760px) and (max-width:900px){

#container {
background:url(../images/home_smartphone.jpg);
 background-size: cover;
 background-position:center;
 width:100%;
 height: 100%;
 display: flex;
 display: -webkit-flex;
 flex-flow:row nowrap;
 -webkit-flex-flow: row nowrap;
 align-items: flex-start;
 -webkit-align-items: flex-start;
 justify-content:flex-end;
 -webkit-justify-content: flex-end;
 
 
}

 #box_nav {
 display: flex;
 display: -webkit-flex;
 flex-flow:row nowrap;
 -webkit-flex-flow: row nowrap;
 align-items: flex-start;
 -webkit-align-items: flex-start;
 justify-content:center;
 -webkit-justify-content: center;
 background:none;
 width: 100%;
 height:100%;
 
 }
 
#box_nav ul {
list-style-type: none;
margin: 0;
margin-top:80px;
padding: 0
}

#box_nav li{
	z-index: 1;
	width: 433px;
	height: 61px;
}

#box_nav a {
    display: block; /* il link occupa tutto lo spazio orizzontale */
	width: 433px;
	height: 61px;
	text-decoration:none;
    background-image: none;
	background-size: contain;
} 

#box_nav a span{
position:relative;
z-index:-1;
}

#box_nav #progetto a{
background-image: url(../images/project.png);
}

#box_nav #progetto a:hover,
#box_nav #progetto a:focus,
#box_nav #progetto a:active {
background-image: url(../images/project_hover.png);
}

#box_nav #attivita a{
background-image: url(../images/attivita.png);
}

#box_nav #attivita a:hover,
#box_nav #attivita a:focus,
#box_nav #attivita a:active {
background-image: url(../images/attivita_hover.png);
}

#box_nav #gallery a{
background-image: url(../images/gallery.png);
}

#box_nav #gallery a:hover,
#box_nav #gallery a:focus,
#box_nav #gallery a:active {
background-image: url(../images/gallery_hover.png);
}

#box_nav #fei a{
background-image: url(../images/fei.png);
}

#box_nav #fei a:hover,
#box_nav #fei a:focus,
#box_nav #fei a:active {
background-image: url(../images/fei_hover.png);
}

#box_nav #mymusic a{
background-image: url(../images/mymusic.png);
}

#box_nav #mymusic a:hover,
#box_nav #mymusic a:focus,
#box_nav #mymusic a:active {
background-image: url(../images/mymusic_hover.png);
}

#box_nav #contatti a{
background-image: url(../images/contatti.png);
}

#box_nav #contatti a:hover,
#box_nav #contatti a:focus,
#box_nav #contatti a:active {
background-image: url(../images/contatti_hover.png);
}

#box_nav #contatti a{
background-image: url(../images/contatti.png);
}

#box_nav #contatti a:hover,
#box_nav #contatti a:focus,
#box_nav #contatti a:active {
background-image: url(../images/contatti_hover.png);
}

#empty {
display:block;
}

#box_nav #empty a{
background-image: none;
}

#box_nav #empty a:hover,
#box_nav #empty a:focus,
#box_nav #empty a:active {
background-image: none;
}

#box_nav #lang a{
background-image:url(../images/button_english.png);
background-repeat: no-repeat;
background-position: 0 -81px;
width:433px;
height:81px;
background-size: cover;
}

#box_nav #lang a:hover,
#box_nav #lang a:focus,
#box_nav #lang a:active {
background: url(../images/button_english.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}

.popup_style {
height:300px; 
font-size:42px;
font-family: Times, serif; color:#ffffff;
margin:0 auto; text-align:center;
background-image:url(../images/in_costr.jpg);
background-position: 0 -250px;
}

.popup_style p{
padding-top:130px;
}