html,
body{
    background-color: rgba(255,255,255,0);
    font-family: 'Open Sans', sans-serif;  
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

h1{color: white; font-size: 15pt;}
p{font-size: 11pt; color: white}
a{color: white}

/* 
/* Header 
*/

.masthead-brand {margin-top: 5px; margin-left: 10px;}
.masthead-brand img{ width: 120px; border: none;}

.masthead-nav > li{display: inline-block;}
.masthead-nav > li + li {margin-left: 20px;}
.masthead-nav > li > a{
  padding-top: 93px;
  padding-right: 5px;
  padding-left: 5px;
  font-size: 11pt;
  text-decoration: none;
  color: white;
  background-color: rgba(71,63,76,1);
  font-weight: 500;
  font-family: 'Playfair Display', serif;
}
.masthead-nav > li > a:active,
.masthead-nav > li > a:focus{
    outline: none;
    background-color: #767aaa;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > .active{
  outline: none;
  background-color: #767aaa;
}
.ale-header{
    background-color: rgba(71,63,76,0);
    padding: 20px;
    padding-left: 20px; 
    width: 100%;
    border-bottom: none;
}

/* fine header*/

/* 
/* Contenuto 
*/
.bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

#img-mobile{visibility: hidden}

#content {
	z-index: 4;
	position: relative;
	padding: 0;
	margin: 0;
}

#about, #contacts{padding-top: 150px;}

#home{
    position: absolute;
    margin-top: 250px;
    width: 100%;
    background-color: rgba(71,63,76,0);
}
#about{
    position: absolute;
    margin-top: 1110px;
    width: 100%;
}
.img-about{width: 100%; margin-bottom: 1.5em}
.text-about{font-size: 14pt;}

#works {
    width: 100%;
    position: absolute;
	margin-top: 2180px;
}
.img-galleria{width: 100%;}
.detail{text-align: center; color: white; font-size: 9pt;}

#contacts {
    position: absolute;
    margin-top: 4000px;
    width: 100%;
    padding: 0;
}

.inside{
    background-color: rgba(71,63,76,1);
    padding-top: 50px;
    padding-bottom: 50px;
}
/* fine contenuto */




/* 
/* Dispositivi 
*/

@media (min-width: 768px) {
  .masthead-brand{float: left;}
  .masthead-nav{float: right;}
}

#arrow{
    width: 10%;
    position: fixed;
    margin-left: 45%;
    z-index: 10;
    margin-top: 10px;
    visibility: hidden;
}


@media (min-width: 500px) and (max-width: 1000px) { 
    html,body{background-image: none;}
    p{font-size: 9pt}
    #arrow{visibility: visible} 
    
    .masthead-nav > li > a{font-size: 8pt; padding-top: 10px;}
    .masthead-nav > li + li {margin-left: 10px;}
    .masthead-brand{margin-left: 0px; width: 100px; margin-bottom: 10px;}
    .masthead-nav > li > .active,
    .masthead-nav > li > a:focus{outline: none; color: white; background-color: rgba(71,63,76,1); }
    .ale-header{position: relative}       
    
    .img-about{max-width: 200px;}
    .who{font-size: 8pt; text-align: left}
    .detail{font-size: 7pt;}
    .img-galleria{max-width: 200px; display: block; margin:0 auto;}
    .frase{width: 200px;}
    #home,#contacts,#about,#works{height: auto;}
    #home{margin-top: 100px;}
    #about{margin-top: 350px; padding-top: 30px;}
    #works{margin-top: 1100px;} 
}


@media (min-width: 300px) and (max-width: 500px) { 
    html,body{background-image: none;}
    p{font-size: 8pt}
    #arrow{visibility: visible} 
    .img-mobile{visibility: visible}
    .img-standard{visibility: hidden}
    .img-about{max-width: 200px;}
    
    .masthead-nav > li > a{font-size: 6pt; padding-top: 10px;}
    .masthead-nav > li + li {margin-left: 2px;}
    .masthead-brand{margin-left: 0px; width: 90px; margin-bottom: 10px;}
    .masthead-nav > li > .active,
    .masthead-nav > li > a:focus{outline: none; color: white; background-color: rgba(71,63,76,1); }
    .ale-header{position: relative}    
    #img-standard{visibility: hidden}
    #img-mobile{visibility: visible}    
    
    .alessia{width: 50%; margin-bottom: 30px;}
    .who{font-size: 8pt; text-align: left}
    .img-galleria{max-width: 200px; display: block; margin:0 auto;}
    .frase{max-width: 200px;}
    #home,#contacts,#about,#works{height: auto;}
    #home{margin-top: 100px;}
    #about{margin-top: 350px; padding-top: 30px;}
    #works{margin-top: 1100px;}     
}

/*Only work section*/
@media (min-width: 300px) and (max-width: 310px) {.single-work{height: 12em} .detail{font-size: 0.6em} #contacts{margin-top: 2800px;}}
@media (min-width: 311px) and (max-width: 330px) {.single-work{height: 15em} .detail{font-size: 0.7em} #contacts{margin-top: 2800px;}}
@media (min-width: 331px) and (max-width: 400px) {.single-work{height: 15em} .detail{font-size: 0.6em} #contacts{margin-top: 3000px;}}
@media (min-width: 401px) and (max-width: 450px) {.single-work{height: 16em} .detail{font-size: 0.6em} #contacts{margin-top: 3000px;}}
@media (min-width: 451px) and (max-width: 530px) {.single-work{height: 20em} .detail{font-size: 0.7em} #contacts{margin-top: 3300px;}}
@media (min-width: 531px) and (max-width: 600px) {.single-work{height: 25em} .detail{font-size: 0.7em}#contacts{margin-top: 3600px;}}
@media (min-width: 601px) and (max-width: 800px) {.single-work{height: 26em} .detail{font-size: 0.8em}#contacts{margin-top: 3800px;}}


/*Only about section*/
@media (min-width: 300px) and (max-width: 1000px) {.closer{display:block} .apart{display: none}}
@media (min-width: 1001px) {.closer{display: none} .apart{display: block}}









@media (min-width: 150px) and (max-width: 300px) { 
    html,body{background-image: none;}
    p{font-size: 8pt}
    #arrow{visibility: visible} 
    .img-mobile{visibility: visible}
    .img-standard{visibility: hidden}
    
    .masthead-nav > li > a{font-size: 6pt; padding-top: 10px;}
    .masthead-nav > li + li {margin-left: 2px;}
    .masthead-brand{margin-left: 0px; width: 90px; margin-bottom: 10px;}
    .masthead-nav > li > .active,
    .masthead-nav > li > a:focus{outline: none; color: white; background-color: rgba(71,63,76,1); }
    .ale-header{position: relative}    
    .img-pc{visibility: hidden}
    .img-mobile{visibility: visible}    
    
    .alessia{width: 50%; margin-bottom: 30px;}
    .img-about{width: 100%;}
    .who{font-size: 8pt; text-align: left}
    .detail{font-size: 7pt;}
    .img-galleria{max-width: 200px; display: block; margin:0 auto;}
    .frase{max-width: 200px;}
    #home,#contacts,#about,#works{height: auto;}
    #home{margin-top: 100px;}
    #about{margin-top: 350px; padding-top: 30px;}
    #works{margin-top: 1100px;} 
    #contacts{margin-top: 2500px;}
}