:root{
     --rosso100: rgba(242, 102, 81, 1);
     --rosso10: rgba(242, 102, 81, 0.1);
     --celeste20: rgba(212, 222, 242, 0.2)
    }
body{
    color: var(--ipertensione);
    font-size: 24px !important;
}
@media (min-width: 320px) and (max-width: 480px) {
    body{font-size: 18px !important;}
  }

.hero-section {
    background-position: left center !important;
    background-size: contain !important;
}
.hero-section::after {
    background: transparent !important;
}
h2{
    color: var(--rosso100);
    font-size:53px !important;
}
@media (min-width: 320px) and (max-width: 480px) {
    h2{font-size:40px !important;}
  }

h3{
    color: var(--ipertensione);
    font-size:24px !important;
    font-weight:800;
    text-transform:uppercase;
    margin-bottom:2.91rem;
}
@media (min-width: 320px) and (max-width: 480px) {
    h3{font-size:18px !important;}
  }

section.submenu {
    background-color: #fff;
    padding: 1.25rem 0rem;
    text-align:center;
}
section.submenu ul {
    background-color: var(--ipertensione);
    border-radius: 1.66rem;
    margin: 0rem;
    padding: 0rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: center;
    align-items: center;
}
section.submenu ul li {
    position: relative;
    margin: 0rem;
    text-align:center;
}
section.submenu ul li a {
    color: #fff;
    font-size: 0.83rem;
    font-weight: 700;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-decoration: none !important;
    height: 1.66rem;
    padding: 0rem 0.83rem 0rem 0.83rem;
    border-radius: 1.66rem;
    text-transform:uppercase;
}

section.slogan{
    h2{
        color: var(--ipertensione);
        font-weight: 400;
        font-size:44px !important;
        margin-bottom: 150px;
    }

}
@media (min-width: 320px) and (max-width: 480px) {
    section.slogan{
    h2{
        font-size:30px !important;
        margin-top:-50px !important;
    }

}
  }

section.sezione-video{
    .video-box{
        border-radius:2.91rem;
        overflow:hidden;
    }

}

section.form-iscrizione{
    padding:6.25rem 0rem;
    position: relative;
    &::after{
        position: absolute;
        content: "";
        top: 20rem;
        left: 0rem;
        right: 0rem;
        /*height: 12.08rem;*/
        height: 20rem;
        background: url("cerchio-sx.png") no-repeat top left;
        background-size: contain;
        z-index: -1;
    }
    &::before{
        position: absolute;
        content: "";
        bottom: -10rem;
        left: 0rem;
        right: 0rem;
        height: 22.08rem;
        background: url("cerchio-dx.png") no-repeat bottom right;
        background-size: contain;
        z-index: -1;
    }

    .wpcf7{
        label{width: 100%; margin-top:-15px;}
         input[type="text"], input[type="email"], input[type="tel"]
            {
                background-color: #fff;
                border: 0.2rem solid var(--ipertensione);
                border-radius:2.08rem;
                width: 100%;
                color: var(--ipertensione);
                padding:0.5rem 1rem;
            }
        input[type="file"]{
            max-width: 100%;
            background-color: #fff;
                border: 0.2rem solid var(--ipertensione);
                border-radius:2.08rem;
                width: 100%;
                color: var(--ipertensione);
                overflow: hidden;
        }
        input.wpcf7-submit{
            background-color: var(--rosso100);
            color: #fff;
            border-radius:2.08rem;
            padding:0.5rem 2rem;
            margin-left:80px;
        }
        p:nth-child(4){text-align: center;}
    }
   
}

@media (min-width: 320px) and (max-width: 480px) {
    section.form-iscrizione::after{height: 12rem;}
    section.form-iscrizione::before{height: 12.5rem;}
    .wpcf7 input.wpcf7-submit{margin-left:0px !important;}
  }



section{
    .box-colorato{
        color:#fff;
        width: 100%;
        border-radius:3.5rem;
        padding:1.66rem 1.25rem 2.08rem 1.25rem;
        &.box-blu{background-color: var(--ipertensione);}
        &.box-rosso{background-color: var(--rosso100);}
        h3{color:#fff;}
    }
}
section.timeline{ margin-bottom:4.16rem;
    .box-colorato{
        h3{color:#fff;}
        p{
            border:0.41rem solid var(--rosso100);
            border-radius:3.2rem;
            padding:0.41rem 0.2rem;
            margin-bottom:2rem;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
        }
    }
}
@media (min-width: 320px) and (max-width: 480px) {
    section.timeline p{margin-bottom:1rem !important;}
  }

section.criteri{margin-bottom:4.16rem;
    ul {
        padding-left: 0.83rem;

        li {
            list-style-type: disc;
            margin-bottom:0.5rem;
            &::marker {
                color: var(--rosso100);
            }
            strong{
                color: var(--rosso100);
                text-transform: uppercase;
            }
        }
    }
}

section.giuria-tecnica{margin-bottom:4.16rem;
    .box-colorato{
        padding:1.66rem 3.33rem 2.08rem 3.33rem;
        p{
        margin-bottom:0.83rem;
        strong{
                color: var(--rosso100);
                text-transform: uppercase;
            }
    }
    }
}
@media (min-width: 320px) and (max-width: 480px) {
     section.giuria-tecnica .box-colorato{padding:1.25rem 2rem 2.5rem 2rem;}
  }

section.giuria-popolare{margin-bottom:4.16rem;
    .box-colorato{
        padding:1.66rem 3.33rem 2.08rem 3.33rem;
        h2{color: var(--ipertensione);}
        p{
        margin-bottom:0.83rem;
        strong{
                color: var(--ipertensione);
                text-transform: uppercase;
            }
        }
    }
}
@media (min-width: 320px) and (max-width: 480px) {
     section.giuria-popolare .box-colorato{padding:1.25rem 2rem 2.5rem 2rem;}
  }

section.formazione{margin-bottom:4.16rem;}

section.sezione-download{margin-bottom:4.16rem;
    .box-colorato{
        padding:1.66rem 3.33rem 2.08rem 3.33rem;
        p{
        strong{
                color: var(--ipertensione);
                text-transform: uppercase;
            }
         a{color: var(--rosso100);
            &.btn-pdf{
                color:#fff;
                position:relative;
                img{
                    position:absolute;
                    max-height:2.5rem;
                    top:-0.41rem;
                    left:-1.25rem;         
                }
                }
            }
        }
    }
}
@media (min-width: 320px) and (max-width: 480px) {
     section.sezione-download .box-colorato{padding:3rem 1.5rem 2.5rem 2rem;}
  }

section.loghi{
    img{
        &.logo-mobile{ margin:5px; max-height: 110px;}
    }
}
@media (min-width: 320px) and (max-width: 480px) {
    section.loghi{
    img{
        &.logo-mobile{ max-height: 60px;}
    }
}
  }