@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
.first:before, .second:before, .third:before, .four:before{
    content:"";
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-repeat: repeat-y;
    position:absolute;
    width:100%;
    top:0;
        bottom:0;
mix-blend-mode: soft-light;
    left:0;
    right:0;
}
html, body{overflow-x:hidden;}
body{float:left;scroll-behavior: smooth;font-size:calc(15px + 0.390625vw)!important ; }
.first, .second, .four{padding-top:2rem; }
.four{padding-bottom:3rem;}
body, p{font-family:"Montserrat";}
.first, .footer{background-color:#4c52a3;}
.titolo{color:#fff;
font-family:"Montserrat";
font-weight:900;
text-transform: uppercase;
   line-height:6rem;
    
    font-size: 6rem;
    z-index: 1;
    position: relative;
}
a, a:hover, a:visited{color:#000!important;}
.footer{color:#fff;font-family:"Montserrat";padding-top:10px; padding-bottom:10px;float: left;
    width: 100%;}
section{position:relative;float:left; width:100%; z-index:1;}
.cta a{color:#fff!important; font-size:4rem;font-family:"Montserrat"; text-decoration:none;line-height:4rem;}
.cta a:after{content:"";
background-image:url("img/frecce.png");
    background-size: contain;
    width: 300px;
    position: absolute;
    bottom: 0;
    z-index: 2;
    height: 50px;
    background-repeat: no-repeat;
    margin-left: 50px;

    
}
.cta{    float: left;
    position: relative;
}
.second{background:#7b88ff;
min-height:500px;
    position:relative;
}
.four{background:#e9e6e4;}
.third{background:#4c52a3;color:#fff; font-family:"montserrat";padding-top:2rem;}
.third h3{font-size:3rem;}
.flex{display: flex;
	
	/* Make a horizontal flexbox (the default) */
	flex-direction: row;
	
	/* The important part: vertically center the itrems */
	align-items: center;}
.flex p{color: #000;
    font-family:"Montserrat";
    font-size: 3rem;
        line-height: 3rem;
    font-weight: bold;}
.flex h2{color:#fff; font-size:4rem;font-family:"Montserrat";font-weight:900;line-height:4rem; text-transform:uppercase;}
.text{z-index:4; position:relative;font-family:"Montserrat";}
.four .text{text-align:center;color:#000;}
.four h2{color:#000;}
input[type=text], input[type=email], input[type=tel]{width: 100%;
    background: transparent;
    margin:1rem 0rem!important;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 20px 5px;
    float:left;
        font-family: "montserrat";
}
.submit{    border: 2px solid #000;
    border-radius: 10px!important;
    padding: 20px 5px;
    width: 200px;
    /* margin: 0 auto; */
    font-family: montserrat!important;
    font-weight: 900;
    text-transform: uppercase!important;
    background: transparent;}
.submit:hover{background:#000; color:#fff;}
input:focus::placeholder {
  color: transparent;
}
input:focus-visible{outline:none;}
.alert {
    font-family: "Montserrat";
    color: #fff;
    background: #000;
}
a.down {
    position: absolute;
    bottom: 100px;
}
.img3{margin-top: -100px;
    position: relative;
    z-index: 3;}
.logo{width:200px;}
.megafono{width:100%; 
    margin-top: -30px;}
.footer a, .footer a:hover, .footer a:visited{color:#fff!important;}
.footer{font-size: 0.8em;}
#error{    font-family: "Montserrat";}
 a.down{display:none;}
@media screen and (min-width: 768px) {
    .megafono{margin-top: -70px;}
     
    .flex h2{font-size:3rem; line-height:3rem;}
     a.down{display:block;}
}
@media screen and (max-width: 768px) {
    .megafono{width: 300px;
    
    margin-left: 50px}
    .titolo,.flex h2{font-size:2.2rem; line-height:2.2rem;}
    .cta a:after{
            margin-left:0;
        width:100px;
    
    }
    .logo{width:100px;}
    a.down {
        bottom: 0;
        
    }
    .rc-anchor-normal .rc-anchor-pt{left:0;}
    .img2{    height: 400px;
    width: auto;}
    .img3{height: 200px;
    width: auto;
    margin: 0 auto;}
   
    .cta a, .flex p{font-size: 2rem;
    line-height: 2rem;}
    .footer{font-size: 0.6rem;}
    /*.flex p{font-size:inherit;}*/
}
@media screen and (min-width: 1200px) {
.third h3, .flex h2{font-size:4rem;}
    .flex h2{ line-height: 4rem;}
}

@media only screen and (max-width: 480px)  {
    .titolo, .flex h2 {
    font-size: 2rem;
    line-height: 2rem;
}
    .megafono{margin-top: -200px;}
    .cta a, .flex p, .third h3{    font-size: 1.2rem;
    line-height: 1.2rem;}
    .megafono{width:100%;margin-left:0;}
    .text h3{font-size: 0.8rem;
    line-height: 0.8rem;}
}