/* ==========================================================================
   STILI GENERICI
   ========================================================================== */
audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}
textarea {
  resize: vertical;
}
/*questo sotto non somma il padding*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
/* ==========================================================================
   STILI SITO
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
}
:root {
  --bianco: #ffffff;
  --nero: #000000;
  --primario:#1d386b;
}
body {
 font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-size: 24px;
  line-height: 38px;
  margin: 0px;
  padding: 0px;
  background-color: var(--bianco);
  color: #3b3b3b;
}
.wrapper {
  width: 90%;
  margin: 0 5%;
}
strong{
  font-weight: 600;
}
img {
  height: auto;
  max-width: 100%;
  width: auto;
}
h1{
  font-size: 40px;
  line-height: 50px;
  font-weight: 500;
  color: var(--primario);
  margin-bottom: 20px;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
header{
  text-align: center;
  padding: 30px 0;
}
.fascia{
  background-color: #f5f5f5;
  padding: 60px 0;
}
.foto{
  width: 100%;
}
.descrizione{
  text-align: center;
  width: 100%;
}
.logo img{
  max-height: 100px;
}
#call{
  padding: 60px 0;
  text-align: center;
}
#call h2{
  color: #971e21;
  font-size: 28px;
  font-weight: 600;
}
#call .flex{
  margin-top: 40px;
}
#call .cinquanta figure{
  margin-right: 30px;
}
#call .cinquanta figure img{
  max-height: 90px;
}
#call .cinquanta{
  align-items: center;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}
#call .cinquanta div{
  text-align: center;
}
#call .cinquanta h3{
    color: var(--primario);
    font-size: 30px;
    font-weight: 500;
}
#call .cinquanta span{
    font-size: 25px;
    font-weight: 300;
}
footer{
  text-align: center;
}
footer.fascia h2{
  font-size: 28px;
  font-weight: 600;
}
footer.fascia span{
  font-size: 20px;
}
@media only screen and (min-width: 768px) {

.foto{
  width: 40%;
}
.descrizione{
  width: 55%;
}
.logo img{
  max-height: inherit;
}
h1{
  font-size: 50px;
  line-height: 60px;
}


}
@media only screen and (min-width: 980px) {
#call .cinquanta div{
  text-align: left;
}
#call .cinquanta h3{
    font-size: 40px;
}
#call .cinquanta span{
    font-size: 35px;
}
  #call .cinquanta{
  flex-direction: row;
  width:  inherit;
  justify-content: flex-start;
}
  #call .cinquanta figure img{
  max-height: inherit;
}
}
@media only screen and (min-width: 1366px) {
  .wrapper {
    width: 1296px;
    margin: 0px auto;
  }
}