* {
  margin: 0;
  padding: 0;
}

html{
  height: 100%;
}

body {
  height: 100%;
}

#container {
  min-height: 100%;
  background-color: #f3f3f3;
}

#main {
  width: 100%;
  overflow: auto;
}

#footer {
  background-color: #FBFFFF;
  position: relative;
  height: 100px;
  margin-top: -100px;
  clear: both; 
}

#wrapper{
  height: 100px;
  margin: 0 auto;
  width: 1000px;
}

#map {
        height: 400px;
        width: 50%;
  display: block;
  float: right;
  margin-right: 5%;
}

.img2{
height: 540px;
display: block;
margin-left: auto;
margin-right: auto;
}

.img3{
height: 70px;
}

ul {
  margin-left: 0px;
}

ul li {
  list-style: none;
  display: inline-block;
  float: left;
  line-height: 100px;
}

ul li a {
  display: block;
text-decoration: none;
color: #111;
font-family: arial;
padding: 10px 30px;
}

ul li a:hover {
  color: red;
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

nav {
  width: 100%;
  height: 120px;
background-color: #FBFFFF;
}

.image {
  flex-basis: 40%
}

.text {
color: #111;
font-family: arial;
  padding-left: 20px;
}

.gaddeam{
  height: 70px;
}

.rosso {
  color: red;
  font-family: arial;
}

.mySlides {
  display:none;
}

@keyframes shake { 50% { transform: translate(-1px, 2px) rotate(-1deg); }

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}