html {
font-size: 18px;
font-family: 'Playfair+Display', serif;
text-decoration: none;
text-align: center;
line-height: 1.5;
background-image: url("img/sfondo.jpg"), url("../img/sfondo.jpg");
background-size: cover;
background-attachment: fixed;
background-color: #ffef96;
color: black;
}

.content {
padding: 2%;
margin: 0 0 100px 0;
}

@media only screen and (min-width: 1050px) {
.content {width: 75%; float: right}
}

#opener {
position: fixed;
top: 0;
left: 2%;
font-size: 52px;
font-weight: bold;
color: white;
cursor: pointer;
}

@media only screen and (min-width: 1050px) {
#opener {font-size: 0;}
}

.header {
width: 96%;
margin: 0 0 1% 0;
padding: 2%;
background: #7b7b7b; opacity: 0.4;
color: white;
border-radius: 0 2em;
}

@media only screen and (max-width: 1050px) {
.header {padding-top: 52px;}
}


.main {
width: 96%;
margin: 0 0 1% 0;
padding: 5% 2%;
background-color: #ffef96;
border-radius: 0 2em;
}

.fortab {
width: 96%;
margin: 0 0 1% 0;
padding: 5% 2%;
background-color: rgba(0,0,0,0);
}

.tab {
float: left;
width: 120px;
height: 160px;
margin: 20px;
padding: 5% 2%;
background-color: #ffef96;
border-radius: 0 2em;
}

@media only screen and (min-width: 1050px) {
.header {font-size: 20px;}
.main {font-size: 20px;}
.fortab {font-size: 20px;}
}

h1 {
font-family: 'lato', sans-serif;
font-size: 36px;
margin-top: 0;
margin-bottom: 1em;
}

h2 {
font-family: 'lato', sans-serif;
font-size: 27px;
margin-top: 0;
margin-bottom: 1.5em;
}

h3 {
font-style: italic;
font-weight: normal;
font-size: 24px;
margin-top: 0;
margin-bottom: 1em;
}

a:link {
text-decoration: none;
color: black;
}

a:hover {
text-decoration: underline;
color: black;
}


.menu {
height: 100%;
width: 0;
position: fixed;
float: left;
top: 0;
left: 0;
background-color: black;
text-align: left;
overflow-x: hidden;
transition: 1s;
padding-top: 60px;
white-space: nowrap;
}

@media only screen and (min-width: 1050px) {
.menu {width: 20%;}
}

.menu a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 1s;

}

.menu a:hover {
color: #f1f1f1;
}

#sub {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 1s;
white-space: nowrap;
cursor: pointer;
}

#sub:hover {
color: #f1f1f1;

}

.menu .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

@media only screen and (min-width: 1050px) {
.menu .closebtn {font-size: 0;}
}

.submenu {
height: 0;
width: 0;
position: relative;
z-index: 2;
left: 0;
background-color: #ffef96;
overflow-x: hidden;
transition: 1s;
white-space: nowrap;
}

.submenu a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 1s;
}

.submenu a:hover {
color: black;
}

.submenu .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}