* {
margin:0;
padding:0;
color:#333;
font-family: 'IBM Plex Sans', sans-serif;
font-weight:400;
background-color:#fafafa;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.topnav {
display:none;
}
nav.overlay {
display:none;
}

nav {
z-index:9;
position:fixed;
top:20px;
left:25px;
}

nav h1 {
text-transform:uppercase;
text-decoration:none;
}
nav h1 a {
font-size:20px;
text-decoration:none;
color:#333;
}
nav h2 {
font-size:16px;
}
nav a {
color:#333;
font-size:16px;
text-decoration:none;
line-height:1.5;
}


.links {
margin-top:32px;
line-height:2;
}

.links a:nth-last-child(4) {
}

nav .links a.active {
text-decoration:underline;
}

.contact h1 {
font-size:20px;
text-transform:none;
text-decoration:none;
line-height:1.5;
}
.contact h1 a {
text-decoration:none;
color:#333;
}
.contact h2 {
font-size:16px;
}
.contact a {
color:#333;
font-size:16px;
text-decoration:underline;
}


.contact-wrap {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
text-align:center;
background:rgba(250,250,250,0);
}
.contact {
position: relative;
top: 48%;
left:0;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform: translateY(-50%);
}


.gallery {
opacity:0;
margin:auto;
margin-left:300px;
margin-right:275px;
margin-top:5px;
}

.gallery img {
width:100%;
margin-top:25px;
margin-bottom:0;
max-width:1280px;
}


footer {
width:100%;
margin:auto;
text-align:center;
margin-top:25px;
margin-bottom:25px;
}

@media (max-width:1200px) {

.gallery {
width: auto;
margin-left:250px;
margin-right:25px;
}

}

@media (max-width:768px) {

.topnav {
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:67px;
background-color:#fafafa;
color:#333;
z-index:999;
text-transform:uppercase;
font-size:20px;
}

.topnav .sergio {
position:fixed;
top:0;
left:0;
padding:20px;
padding-left:25px;
}
.topnav .sergio a {
text-decoration:none;
color:#333;
}

.topnav .menubutton {
position:fixed;
top:0;
right:0;
padding:20px;
padding-right:25px;
}

nav.leftnav {
display:none;
}
nav.overlay {
display:none;
position:fixed;
top:0;
left:0;
z-index:99;
width:100%;
height:100%;
overflow:hidden;
background:rgba(250,250,250,1);
text-align:center;
}
.navcenter {
position: relative;
top: 50%;
left:0;
background:rgba(250,250,250,0);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform: translateY(-50%);
}
nav h1 {
font-size:24px;
}
nav h2 {
font-size:20px;
}
nav a {
font-size:20px;
text-decoration:none;
line-height:2;
}

.navcenter a.active {
text-decoration:underline;
}

.links {
line-height:2.5;
}

.gallery {
width:0 auto;
margin-top:42px;
margin-left:25px;
margin-right:25px;
}

.gallery img {
width:100%;
margin-top:25px;
margin-bottom:0;
}

}




/** grid **/

.grid {
opacity:0;
margin-left:300px;
margin-right:0;
margin-top:30px;
}

.grid-sizer { 
width: 33%; 
}
.grid-item { 
width: 33%;
}
.grid-item img { 
width: 96%; 
margin-bottom:10px;
}



@media (max-width:1200px) {

.grid {
margin-left:250px;
}
.grid-sizer { 
width: 50%; 
}
.grid-item { 
width: 50%;
}

}

@media (max-width:768px) {

.grid {
width:0 auto;
margin-top:67px;
margin-left:25px;
margin-right:25px;
}
.grid-sizer { 
width: 100%;
}
.grid-item { 
width: 100%;
}
.grid-item img { 
width: 100%; 
margin-bottom:25px;
}

}



/** img metadata **/

.grid-item p {
/*
 * per metterlo sopra l'immagine, per esempio
position:absolute;
*/
z-index:9;
background-color:rgba(0,0,0,0);
color:#666;
margin-top:-5px;
margin-bottom:15px;

/*
per ora non visibili
*/
/*
display:none;
*/
}