/* Navbar*/

.navbarfont{

    font-size: 1.2em;

    text-align: center;

}



/* titolo */

.jumbotron{

    text-align: center;

    margin-bottom: 2px;

    height: 110vh;

}



.Imp-title{

    opacity: 1;

}



.lead{

    font-size: 2rem;

}



.clearfix::after {

    content: "";

    clear: both;

    display: table;

  }



#titoli{

    text-align: center;

}







/* header */

#header{

    height: 110vh;

    margin-bottom: 30px;

}



.carousel{

    width: 50%;

    margin: 0 auto;

    height: 50vh;

}

.carousel-inner{

    height: 50vh;



}

.carousel-indicators{

    margin-top: -50px;

}



.paragraph{

    font-family: 'Courgette', cursive;

    font-size: 2em;

    text-align: center;

    border-top: 2px black dotted;

    border-bottom: 2px black dotted;

    display: block;

    margin-top: 50px;

    padding: 5% 15%;

}

 #pagina{

    display: block;

}

.btn:hover {

    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;

    transform: translate3d(0, 0, 0);

    perspective: 1000px;

  }



  #footer{

      margin:0;

      padding: 5% 10%;

      text-align: center;

      background-color: black;

  }

  .a:hover{

    text-decoration: none;

}

table { 

	width: 40%; 

	border-collapse: collapse; 

	margin:50px auto;

	}





tr:nth-of-type(odd) { 

	background: #eee; 

	}



th { 

	background: #ff3300; 

	color: white; 

  text-align: center;

	font-weight: bold;

  font-size: 40px;

	}



td, th { 

	padding: 10px; 

	border: 1px solid #ccc; 

	font-size: 18px;

	}



  @keyframes shake {

    10%, 90% {

      transform: translate3d(-1px, 0, 0);

    }

    20%, 80% {

      transform: translate3d(2px, 0, 0);

    }

    

    30%, 50%, 70% {

      transform: translate3d(-2px, 0, 0);

    }

    40%, 60% {

      transform: translate3d(2px, 0, 0);

  }

}

  @media (max-width: 800px){

    .carousel-inner{

        height: 20vh;

      

    }

    #header{

        height: 80vh;

        margin-bottom: 30px;

    }

    .jumbotron{

        height: 80vh;

    }

}

@media (max-width: 700px){

    .carousel-inner{

        height: 30vh;

        width: 100%;

    }

    .carousel{

        width: 100%;

        margin: 0 auto;

    }

    #storia{

        height: 20vh;

        margin-top: 100px;

    }

#header{

        height: 100vh;

        

    }

    .jumbotron{

        height: 100vh;

    }

}



*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}



@media (max-height: 500px){

    

    .carousel{

        display: none;

    }

}