*{box-sizing:border-box;font-family:"Outfit", sans-serif;}
h1{font-size:25px}
h2{font-size:20px}
h3{font-size:15px}
h1,h2,h3{font-weight:bolder;margin-top:0;color:#dd0000;line-height:1.5}
a{font-weight:normal;text-decoration:none;color:#ff9900;line-height:1.5}
p,li{font-size:15px;font-weight:normal;color:#000000;line-height:1.5}
main li a{color:inherit;}
main li a:hover{color:#ff9900;}

body{margin:0;background-image:url("img/sfondo.png");background-size:cover;background-position:center;background-attachment:fixed}
header,footer{background:rgba(0,0,0,0.75);position:fixed;z-index:1;padding:0px 25px}
header{top:0}
footer{bottom:0}
nav{padding:10px 0}
main{background-color:#ffffff;z-index:0}
article{padding:0 25px}
section{padding:5px 0}

.nav-list{list-style-type:none;margin:0;padding:0}
.active{color:#dd0000;font-weight:bolder}
.page-title{text-align:center;color:#dd0000}
.page-subtitle{text-align:center;color:#ff9900}
.page-content{text-align:justify}
.page-list{list-style-type:square;text-align:left;margin:0;padding-left:15px}

div#gallery{overflow:hidden;border:#000000 2px;}
div#gallery figure{position:relative;width:2000%;margin:0;left:0;animation:100s gallery linear infinite;}
div#gallery figure img{width:5%;float:left;}
@keyframes gallery{
  0%{left:0%;}
  4%{left:0%;}
  5%{left:-100%;}
  9%{left:-100%;}
  10%{left:-200%;}
  14%{left:-200%;}
  15%{left:-300%;}
  19%{left:-300%;}
  20%{left:-400%;}
  24%{left:-400%;}
  25%{left:-500%;}
  29%{left:-500%;}
  30%{left:-600%;}
  34%{left:-600%;}
  35%{left:-700%;}
  39%{left:-700%;}
  40%{left:-800%;}
  44%{left:-800%;}
  45%{left:-900%;}
  49%{left:-900%;}
  50%{left:-1000%;}
  54%{left:-1000%;}
  55%{left:-1100%;}
  59%{left:-1100%;}
  60%{left:-1200%;}
  64%{left:-1200%;}
  65%{left:-1300%;}
  69%{left:-1300%;}
  70%{left:-1400%;}
  74%{left:-1400%;}
  75%{left:-1500%;}
  79%{left:-1500%;}
  80%{left:-1600%;}
  84%{left:-1600%;}
  85%{left:-1700%;}
  89%{left:-1700%;}
  90%{left:-1800%;}
  94%{left:-1800%;}
  95%{left:-1900%;}
  100%{left:-1900%;}}

@media only screen and (max-width:800px){
.container{width:100%;height:100%;margin:0}
header,footer{width:100%;height:auto;text-align:center;line-height:1}
main{width:100%;height:100%;margin:125px 0}
.logo{margin:10px auto}
.site-title,.footer-link{line-height:0.75}
#nav{display:none}
#nav:target{display:block}
}

@media only screen and (min-width:801px){
.container{width:800px;height:100%;margin:0 auto;}
header,footer{width:300px;margin:0;text-align:right}
header{height:75%}
footer{height:25%}
main{width:500px;height:100%;margin-left:300px}
.logo{margin:10px 0}
.menu{display:none}
}