html{
  scroll-behavior: smooth;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: white;
  font-family: 'Raleway', sans-serif;
}

nav{
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  background: white;
}
.nav{
  width: 100%;
  margin: 0 auto;
}
.nav li{
  list-style: none;
  display: inline;
  padding: 20px;
  font-weight: bold;
  font-size: 15px;
  transition: 5s;
}
a{
	text-decoration: none;
  font-weight: bold;
  color: black;
}
a:hover{
  text-decoration: none;
	color: grey;
}
.text{
  font-size: 70px;
  margin-bottom: 2%;
}
.button{
  margin-bottom: 5%;
}
.toggle{
  width: 100%;
  padding: 10px 20px;
  background: white;
  text-align: right;
  box-sizing: border-box;
  font-size: 30px;
  display: none;
}
.carousel-inner .carousel-item .carousel-caption{
  margin-bottom: 25rem;
  display: block;
}
.text{
  font-size: 5rem;
}

.head .txt {
  text-align: left;
  padding-top: 10%;
  padding-left: 50px;
  padding-right: 50px;
}


.head .box{
  border-radius: 30px;
  background-color: white;
  position: relative;
  margin-top: 5%;
  margin-left: 15%;
  margin-right: 15%;
  padding-bottom: 5%; // Definisco l'aspect ratio
  height: 0;
  overflow: hidden;
  box-shadow: 10px 10px 5px #dedede;
}

.contact .fa:before {
  display: inline-block;
  opacity: 0.7;
}



footer {
  clear: both;
  margin-top: 5%;
  margin-bottom: 0;
  display: block;
  height: 10%;
  background-color: red;
}
.inner {
  height: 100px;
  width: 100%;
  margin-bottom: 0;
}

.copyright {
  line-height: 100px;
  width: 56.6%;
  float: left;
  border-left: 1px solid $border;
  border-top: 1px solid $border;
  border-bottom: 1px solid $border;
}
span {
  color: white;
  margin-left: 10%;
  letter-spacing: 2px;
}
/*MEDIA PER LA NAVBAR*/
@media only screen and (max-width:1008px){
  .toggle{
    display: block;
  }
  nav{
    background: whitesmoke;
    position: relative;
  }
  .nav{
    background: inherit;
    display: none;
    width: 100%;
  }
  .nav li{
    padding: 17px 30px 17px 40px;
    background-color: white;
    font-size: 20px;
    display: block;
  }
  .active{
    display: block;
  }
}
@media (min-width: 1920px){
  footer {
    clear: both;
    margin-top: 5%;
    margin-bottom: 0;
    display: block;
    height: 100px;
    background-color: red;
  }
  .inner {
    height: 100px;
    width: 100%;
    margin-bottom: 0;
  }

  .copyright {
    line-height: 100px;
    width: 56.6%;
    float: left;
    border-left: 1px solid $border;
    border-top: 1px solid $border;
    border-bottom: 1px solid $border;
  }
  span {
    color: white;
    margin-left: 10%;
    letter-spacing: 2px;
  }
  .head .box .con{
    font-weight: bold;
    float: left;
    margin-top: 10.5%;
    margin-left: 5%;
    font-size: 30px;
  }
  .head .header{
    text-align: center;
    padding-top: 10%;
    font-size: 50px;
    font-weight: bold;
  }
  .head .header2{
    text-align: center;
    padding-top: 10%;
    font-size: 70px;
    font-weight: bold;
  }

  .head .txt{
    font-size: 20px;
    margin-left: 10%;
    margin-right: 10%;
    padding-top: 5%;
  }
  .head .txt2{
    font-size: 20px;
    text-align: center;

  }
  .text{
    font-size: 5rem;
  }
}
@media (max-width: 374px){
  .carousel-inner .carousel-item .carousel-caption .text {
     font-size: 3rem;
   }
}
@media (min-width: 375px){
.head .header{
  text-align: center;
  padding-top: 10%;
  font-size: 50px;
  font-weight: bold;
}
.head .header2{
  text-align: center;
  padding-top: 10%;
  font-size: 50px;
  font-weight: bold;
}
.head .txt{
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}
.carousel-inner .carousel-item .carousel-caption .text {
  font-size: 3.5rem;
}
body{
  margin-bottom: 0;
}
}
@media (max-width: 375px) {

  .head .box{
    background-color: white;
    position: relative;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    padding-bottom: 5%; // Definisco l'aspect ratio
    height: 0;
    overflow: hidden;
    box-shadow: 10px 10px 5px #dedede;
  }
  .head .box .con{
    font-weight: bold;
    float: left;
    margin-top: 10.5%;
    margin-left: 5%;
    font-size: 20px;
  }
  body{
    margin-bottom: 0;
  }
  footer{
    margin-top: 10%;
    margin-bottom: 0;
    height: 200px;
    background-color: red;
  }
  .carousel-inner .carousel-item .carousel-caption{
    margin-bottom: 33rem;
    display: block;
  }
  .head .header{
    text-align: center;
    padding-top: 10%;
    font-size: 30px;
    font-weight: bold;
  }
  .head .header2{
    text-align: center;
    padding-top: 10%;
    font-size: 70px;
    font-weight: bold;
  }
}
@media (max-width: 414px){
.head .header{
    text-align: center;
    padding-top: 10%;
    font-size: 30px;
    font-weight: bold;
  }
      .head .box{
    background-color: white;
    position: relative;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    padding-bottom: 5%; // Definisco l'aspect ratio
    height: 0;
    overflow: hidden;
    box-shadow: 10px 10px 5px #dedede;
  }
}
@media (max-width: 576px){
.head .header{
    text-align: center;
    padding-top: 10%;
    font-size: 30px;
    font-weight: bold;
  }
}
@media (min-width: 576px){
.head .txt{
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
}
.carousel-inner .carousel-item .carousel-caption{
  margin-bottom: 20rem;
  display: block;
}
.carousel-inner .carousel-item .carousel-caption .text {
font-size: 4rem;
}
}
@media (min-width: 770px){
  .head .header{
    text-align: center;
    padding-top: 20%;
    font-size: 70px;
    font-weight: bold;
  }
  .head .header2{
    text-align: center;
    padding-top: 10%;
    font-size: 70px;
    font-weight: bold;
  }
  .head .txt{
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
  }

}
@media (min-width: 992px){
  .head .header{
    text-align: center;
    padding-top: 15%;
    font-size: 70px;
    font-weight: bold;
  }
  .head .header2{
    text-align: center;
    padding-top: 10%;
    font-size: 70px;
    font-weight: bold;
  }
  .head .txt{
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
  }

}
@media (min-width: 1200px){
  .head .header{
    text-align: center;
    padding-top: 15%;
    font-size: 70px;
    font-weight: bold;
  }
  .head .txt{
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
  }

}
@media (min-width: 1450px){
  .head .header{
    text-align: center;
    padding-top: 10%;
    font-size: 70px;
    font-weight: bold;
  }
  .head .txt{
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (min-width: 1800px){
  .head .header{
    text-align: center;
    padding-top: 10%;
    font-size: 70px;
    font-weight: bold;
  }
  .head .txt{
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
  }
}






.kenburns-top {
	-webkit-animation: kenburns-top 5s ease-out both;
	        animation: kenburns-top 5s ease-out both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-4-29 15:30:57
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */
@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}

.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-4-30 14:35:56
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.bounce-top {
	-webkit-animation: bounce-top 0.9s both;
	        animation: bounce-top 0.9s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-4-30 14:36:46
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}