@charset "utf-8";

[class*="col-"] {
    text-align: center;
    width: 100%;
    border-style: none;
    border-width: 0;
    border-color: darkgrey;
    margin: 0.1em;
    color: chocolate;
    background-color: #f2f2f2;
}



.col-footer {

    flex: 1;
    max-height: 120px;
    color: cornsilk;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #e65c00;
    padding-top: 50px;
    padding-bottom: 50px;
}



.row {
    width: auto;
    display: flex;
    width: auto;
    flex-direction: column;
    justify-content: space-around;
}




.maxi-container {

    display: block;
    background-color: #f5f5f0;
    margin: 1.5em auto;
    width: 90%;
    max-width: 1024px;
    align-content: center;
    align-items: center;
    justify-content: center;
    /* border: 0px dashed darkgrey; */
    border: 0px solid darkgrey;
    border-radius: 15px;
    padding: 0.3em;

}

.container-riepilogo {

    background-color: #ebebe0;
    width: 100%;
    max-width: 1024px;
    align-content: center;
    align-items: center;
    justify-content: center;

}

.container-form {

  background-color: #f5f5f0;
  width: 100%;
  max-width: 1024px;
  align-content: center;
  align-items: center;
  justify-content: center;


}



.titolo-prenotazioni {
  position: relative;
  margin: 0;
  font-family: 'Racing Sans One', 'Anton', 'Dosis', cursive;
  font-size: 38px;
  color: #ff6666;
  font-weight: bold;
  /*text-shadow: 4.5px 3.5px #4d0000;*/
  /* text-shadow: -3px 0 #660000, 0 2px #660000, 2px 0 #660000, 0 -3px #660000; */
  z-index: 1;

}

.fontTitanTitolo {
    font-family: 'Titan One', 'Dosis', 'sans-serif';
    font-size: 44px;
    color: darkorange;
    margin: 0;
    padding: 0;
}

.fontDosisTesto {
    font-family: 'Dosis', 'Oswald', 'sans-serif';
    font-size: 20px;
    color: dimgrey;
}

.fontDosisPostoLibero {
    font-family: 'Dosis', 'Oswald', 'sans-serif';
    font-size: 20px;
    color: grey;
    text-decoration: none;
}

.fontDosisPostoAssegnato {
    font-family: 'Dosis', 'Oswald', 'sans-serif';
    font-size: 20px;
    color: indianred;
}


.fontDosisTitle {
    font-family: 'Dosis', 'Oswald', 'sans-serif';
    font-size: 24px;
    color: #0066cc;
}




.fontDosisPresidio {
    font-family: 'Dosis', 'Oswald', 'sans-serif';
    font-size: 24px;
    color: #0099cc;
}



.fontDosisMailSent {
    font-family: 'Dosis', 'Oswald', 'sans-serif';
    font-size: 24px;
    color: #009933;
}


.fontDosisMailSentText {
    font-family: 'Dosis', 'Oswald', 'sans-serif';
    font-size: 22px;
    color: #537979;
}



.fontDosisMailSentBold {
    font-family: 'Dosis', 'Oswald', 'sans-serif';
    font-size: 24px;
    color: #008000;
    font-weight: bold;
}

.fontDosisMaiNOTSent {
    font-family: 'Dosis', 'Oswald', 'sans-serif';
    font-size: 24px;
    color: #e60000;
    font-weight: bold;

}



blockquote {

  margin: 0;
  background: white;
  border-top: 5px solid #EAF9F9;
  border-bottom: 5px solid #EAF9F9;
  color: #3A3C55;
  padding: 30px 30px 30px 90px;
  position: relative;
  font-family: 'Lato', sans-serif;
  font-weight: 300;

}

blockquote:before, blockquote:after {
  font-family: serif;
  position: relative;
  left: 20px;
  top: 20px;
  color: white;
  background: orangered;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 40px;
  line-height: 1.35;
  text-align: center;
}

blockquote:before {
  position: absolute;
  content: "\201C";
}


blockquote:after {
  position: absolute;
  content: "\201C"; 
}



blockquote p {

  margin: 0 0 16px;
  font-size: 22px;
  letter-spacing: .05em;
  line-height: 1.4;

}

blockquote cite {
  font-style: normal;
}






html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

img {

  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 3px;
  margin-left: auto;
  margin-right: auto;

}



.imgHome {

  border: 2px solid transparent;
  border-radius: 2px;
  padding: 15px;
  margin: 2px auto;
  transition: width 2s, height 2s, transform 2s;
  
} 


.imgHome:hover {
  
  cursor: pointer;
  border-radius: 5px;
  /* border: 1px dotted darkgray; */
  /* transform: rotate(-10deg); */
  transition: width 2s, height 2s, transform 2s;
  /* transform: rotate(10deg); */
  transform: rotate(-10deg);
}



.titoloEventiF1 {

  background-color: #ff4d4d; 
  color: pink; 
  height: 50px;

}

.descrizioneEventiF1 {

  background-color: pink; 
  color: #ff4d4d;
  border-bottom-right-radius: 5px; 
  border-top-right-radius: 5px; 
  height: 50px;

}




.titoloEventiMini {

  background-color: #248f24; 
  color: #d6f5d6; 
  height: 50px;

}

.descrizioneEventiMini {

  background-color: #d6f5d6; 
  color: #248f24;
  border-bottom-right-radius: 5px; 
  border-top-right-radius: 5px; 
  height: 50px;

}





.titoloEventiTT {

  background-color: #ff6600; 
  color: #ffe5cc; 
  height: 50px;

}

.descrizioneEventiTT {

  background-color: #ffe5cc; 
  color: #ff6600;
  border-bottom-right-radius: 5px; 
  border-top-right-radius: 5px; 
  height: 50px;

}





.titoloEventiTouring {

  background-color: #3366cc;
  color: #c2d1f0; 
  height: 50px;

}

.descrizioneEventiTouring {

  background-color: #c2d1f0;
  color: #3366cc;
  border-bottom-right-radius: 5px; 
  border-top-right-radius: 5px; 
  height: 50px;

}




mark {
    background-color: darkorange;
    color: lightgoldenrodyellow;
    font-size: 22px;
    border-radius: 5px;
}



/* Formattazione della Form per inviare le mail */

form {
    font-family: 'Dosis', sans-serif;
    font-size: 14px;
}

label {
    color: darkgoldenrod;
    margin: 2px auto;
}

label, input[type=text], textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

textarea {
    height: 150px;
}

input[type=text], textarea {
    padding: 10px;
    border: 1px solid #CCC;
    border-radius: 3px;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 15px;
    resize: vertical;
}

input[type=submit] {
  background-color: cadetblue;
  color: #FFF;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}


input[type=button] {

  width: 80%;
  height: 30px;
  border: 0px;
  border-radius: 5px;
  margin-bottom: 10px;

}





h1 {
    font-family: 'Dosis', 'Arial', sans-serif;
    font-style: normal;
    font-size: 32px;
    color: indianred;
}


h2 {
    font-family: 'Dosis', 'Arial', sans-serif;
    font-style: normal;
    font-size: 28px;
    color: indianred;
}


h3 {
    font-family: 'Dosis', 'Arial', sans-serif;
    font-style: normal;
    font-size: 24px;
    color: indianred;
}


.thumb img{

   width: 80px;
   height: 80px;
   vertical-align: center;

}

.amazonbutton {

  width: 30%;
  height: 30%;

}

a {
  text-decoration: none;
}

/* Gestione pulsanti */
.btn {
    border: none; /* Remove borders */
    color: white; /* Add a text color */
    padding: 14px 28px; /* Add some padding */
    cursor: pointer; /* Add a pointer cursor on mouse-over */
    border-radius: 10px;
}

.success {background-color: #4CAF50;} /* Green */
.success:hover {background-color: #46a049;color: #fff !important;}

.info {background-color: #2196F3;color: darkslategray; cursor: pointer;} /* Blue */
.info:hover {background: #0b7dda;color: #fff !important;}
.blue {background-color: #2196F3;font-size: 16px} /* Blue */
.blue:hover {background: #0b7dda;color: #fff !important;}

.warning {background-color: #ff9800;color: darkslategray; cursor: pointer;} /* Orange */
.warning:hover {background: #e68a00;color: #fff !important;}
.warning {background-color: #ff9800;font-size: 16px} /* Orange */
.warning:hover {background: #e68a00;color: #fff !important;}

.danger {background-color: #f44336;} /* Red */
.danger:hover {background: #da190b;color: #fff !important;}
.danger {background-color: #f44336;font-size: 16px} /* Orange */
.danger:hover {background: #da190b;color: #fff !important;}

.default {background-color: #e7e7e7; color: black;} /* Gray */
.default:hover {background: #ddd;color: #fff !important;}
.default {background-color: #e7e7e7;font-size: 16px} /* Orange */
.default:hover {background: #ddd;color: #fff !important;}

.pilota {background-color: #ff9800; width: 60%;} /* Orange */
.pilota:hover {background: #e68a00;color: #fff !important;}

.postolibero {background-color: #b3e6b3; width: 60%;text-decoration: none;} /* Orange */
.postolibero:hover {background: #53c653;color: #fff !important;text-decoration: none;}



.MINI {background-color: darkgreen;color: lightgray; cursor: pointer;transition: 0.8s;} 
.MINI:hover {background: lightgreen; color:darkgreen; transition: 0.8s; !important;}

.TT {background-color: #ff6600;color: lightgray; cursor: pointer; transition: 0.8s;}
.TT:hover {background: orange; color: darkred; transition: 0.8s; !important;}

.F1 {background-color: darkred;color: lightgray; cursor: pointer; transition: 0.8s;}
.F1:hover {background: #ffb3b3; color: darkred; transition: 0.8s; !important;}

.TOURING {background-color: #3366cc;color: lightgray; cursor: pointer; transition: 0.8s;}
.TOURING:hover {background: #c2d1f0; color: #3366cc; transition: 0.8s; !important;}

.GT12 {background-color: #808000;color: lightgrey; cursor: pointer; transition: 0.8s;}
.GT12:hover {background: #ffffcc; color: #808000; transition: 0.8s; !important;}

.TUTTE {background-color: #0077b3;color: lightgrey; cursor: pointer; transition: 0.8s;}
.TUTTE:hover {background: #cceeff; color: #0077b3; transition: 0.8s; !important;}



.backGradientsDarkOrange {
  
  height: 40px;
  border-radius: 5px;
  text-indent: 2%;
  color: #fff0b3;
  text-shadow: 1px 1px darkslategray;
  font-weight: bold;
  background: #ff6600; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #ff6600 , #f5f5f0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #ff6600, #f5f5f0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #ff6600, #f5f5f0); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #ff6600 , #f5f5f0);
  
}


.backGradientsRed {
  
  height: 40px;
  border-radius: 5px;
  text-indent: 2%;
  color: whitesmoke;
  text-shadow: 1px 1px darkslategray;
  font-weight: bold;
  background: #ff3300; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #ff3300 , #f5f5f0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #ff3300, #f5f5f0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #ff3300, #f5f5f0); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #ff3300 , #f5f5f0);
  
}



.backGradientsBlue {
  
  height: 40px;
  border-radius: 5px;
  text-indent: 2%;
  color: gainsboro;
  text-shadow: 1px 1px darkslategray;
  font-weight: bold;
  background: #3366ff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #3366ff , #f5f5f0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #3366ff, #f5f5f0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #3366ff, #f5f5f0); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #3366ff , #f5f5f0);
  
}



.backGradientsViolet {
  
  height: 40px;
  border-radius: 5px;
  text-indent: 2%;
  color: gainsboro;
  text-shadow: 1px 1px darkslategray;
  font-weight: bold;
  background: #884dff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #884dff , #f5f5f0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #884dff, #f5f5f0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #884dff, #f5f5f0); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #884dff , #f5f5f0);
  
}



.backGradientsRed {
  
  height: 90px;
  border-radius: 5px;
  text-indent: 2%;
  color: gainsboro;
  text-shadow: 1px 1px darkslategray;
  font-weight: bold;
  background: #e62e00; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #e62e00 , #f5f5f0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #e62e00, #f5f5f0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #e62e00, #f5f5f0); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #e62e00 , #f5f5f0);
  
}





.backGradientsDarkBlue {
  
  height: 40px;
  border-radius: 5px;
  text-indent: 2%;
  color: gainsboro;
  text-shadow: 1px 1px darkslategray;
  font-weight: bold;
  background: #006bb3; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #006bb3 , #f5f5f0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #006bb3, #f5f5f0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #006bb3, #f5f5f0); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #006bb3 , #f5f5f0);
  
}







/* Media Queries per gestire la dimensione delle immagini a seconda dello schermo */


@media screen and (min-width: 100px) and (max-width: 400px) {

  .container-form {
    display: block;
    width: 100%;
  }



  .maxi-container {
    clear: both;
    display: block;

  }


  .thumb img{

   width: 40%;
   height: 40%;
   vertical-align: center;

  }


  .amazonbutton {

    width: 100%;
    height: 100%;
    vertical-align: center;

  }

  
  .titoloEventiF1, .titoloEventiTT, .titoloEventiMini{
    height: 25px;
  }


  .descrizioneEventiF1, .descrizioneEventiTT, .descrizioneEventiMini {

    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px; 
  
  }

  .TUTTE, .MINI, .TT, .F1, .TOURING, .GT12 { min-width: 90% }




}



@media screen and (min-width: 401px) and (max-width: 800px) {

  .amazonbutton {

    width: 60%;
    height: 60%;
    vertical-align: center;

  }


  .titoloEventiF1, .titoloEventiTT, .titoloEventiMini{
    height: 25px;
  }


  .descrizioneEventiF1, .descrizioneEventiTT, .descrizioneEventiMini {

    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px; 
  
  }

  .TUTTE, .MINI, .TT, .F1, .TOURING, .GT12 { min-width: 90% }
 
}




@media screen and (min-width: 801px) and (max-width: 1800px) {

    .amazonbutton {

      width: 50%;
      height: 50%;
      vertical-align: center;

    }

    .TUTTE, .MINI, .TT, .F1, .TOURING, .GT12 { min-width: 90% }

}