html, body, ul, li, h1, h2, h3, h4 {margin:0; padding:0;}
img {border:0px;}

body {background-color:#ffffff; font-family: 'Roboto', sans-serif;}

h1, h2, h3, h4{font-family: 'Roboto', sans-serif;}

h1 {color:#ffffff; font-size:64px; font-weight:900; width:fit-content; padding:5px 30px; background-color:rgba(0,0,0,0.5);}
h2 {color:#5f95a7; font-size:45px; font-weight:300;}
h3 {color:#45505a; font-size:26px; font-weight:900; line-height:40px;}
h4 {color:#ffffff; font-size:32px; font-weight:500;}

p {font-family:'Roboto', sans-serif; font-size:26px; line-height:42px; color:#45505a; text-align:justify;}

.clear {clear:both;}
#maps {width:100%; height:74px; background-color:#faa421; text-align:center; color:#ffffff; line-height:74px; font-size:22px;}
#maps img {margin:-8px 10px;}
#testata {width:100%; height:56.25vw; text-align:center; position:relative; overflow:hidden;}
#testata-video {width:100%; object-fit:cover; position:absolute; left:0; top:0; z-index:-1;}
#wraptestata, #wrapchi, #plus, #girasole, #prenota, #shop {max-width:1000px; margin:0 auto;}
#shop {text-align:center;}
#girasole {text-align:center; padding:50px 0 70px;}
.scrittagirasole {margin-top:20px;}
#prenota {border:solid 2px #000000; height:600px;}
#prenota p {color:#5271ff; font-size:32px; font-weight:900; text-align:center;}
#logo {width:50%; padding:40px 0; float:left; text-align:left;}
#social {width:50%; padding:70px 0; float:left; text-align:right;}
#social img {background-color:rgba(0,0,0,0.5); border-radius:12px; padding:4px;}
#titolo {padding:60px 0; text-align:left;}
.titolino {margin-top:40px; line-height:44px; width:fit-content; padding:5px 30px; background-color:rgba(0,0,0,0.5);}
.div7040 {height:70px;}
.div7030 {height:70px;}
.div100 {height:100px;}
#chitesto, #chiimg {width:50%; float:left;}
#chiimg {text-align:right;}
.terzo {width:33%; float:left; text-align:center;}
button.link, .calendly {background-color:#faa421; width:90%; height:70px; border:none; border-radius:35px; color:#ffffff; font-size:18px; line-height:72px; cursor:pointer; text-decoration:none;}
button.shop {width:460px; height:100px; font-size:26px; line-height:100px; border-radius:50px;}
button.chiama {background-color:#faa421; width:100%; height:56px; border:none; border-radius:35px; color:#ffffff; font-size:19px; line-height:56px; cursor:pointer;}
#galleria {width:100%; text-align:center;}
.gall {width:24%; margin:0 .5%; float:left; font-size:20px;}
.gall img {width:100%; margin-bottom:20px;}
.prodotto {font-family: 'Dancing Script', cursive; text-decoration:underline; font-size:32px; font-weight:700;}
#resptablet, .scrittaresp {display:none;}
.footlogo {width:130px; margin-top:14px; float:left;}

.plustesto {height:80px;}
.plustesto img {margin-right:30px;}
.plustesto .mono {line-height:90px; margin:0;}

#contatti {width:100%; background-color:#4b565f;}
#contatticont {max-width:1000px; margin:0 auto;}
.conttesto {width:74%; float:left; padding:10px 0;}
.contpuls {width:26%; float:left; padding:31px 0;}
.conttesto p {color:#ffffff; line-height:50px; font-size:32px; font-weight:300;}

.chiama img {margin:7px -18px 0 14px;}

footer {background-color:#4b565f; height:106px;}
#footercont {max-width:1000px; margin:0 auto; text-align:right; line-height:116px; color:#ffffff; font-size:14px;}

@media only screen and (max-width: 1049px) {
    #logo {width:calc(50% - 20px); margin-left:20px;}
    #logo img {width:50%;}
    #social {width:46%; padding:70px 4% 0 0;}
    #titolo {padding:0px 20px;}
    h1 {font-size:5vw;}
    .titolino {font-size:3vw; line-height:4.6vw;}
    #chitesto, #chiimg {width:80%; margin:0 auto; float:none; text-align:center;}
    button.link {font-size:16px;}
    #resptablet {display:block; height:40px;}
    .gall {width:49%;}
    #plus {max-width:99%;}
    #contatticont {max-width:96%;}
    .plustesto img {width:60px; margin-right:15px;}
    .plustesto p {font-size:21px; line-height:36px;}
    .plustesto .mono {line-height:70px;}
    .plustesto {height:60px;}
    .conttesto p {font-size:28px;}
    .scrittagirasole {width:80%;}
    #footercont {font-size:13px; padding-right:30px;}
    .div100 {height:50px;}
}

@media only screen and (max-width: 768px) {
    #logo {padding:30px 0;}
    #social a img {width:40px;}
    #social {width:46%; padding:46px 4% 0 0;}
    .titolino {margin-top:12px;}
    #chitesto h3 {font-size:24px;}
    #chitesto p {font-size:20px;}
    .terzo {width:80%; margin:0 auto; float:none; text-align:center !Important;}
    button.link {width:300px; margin-bottom:30px;}
    #plus {max-width:80%;}
    .plustesto img {width:50px; margin-right:3px;}
    .plustesto p {font-size:16px; line-height:24px;}
    .plustesto .mono {line-height:25px; padding-top:12px;}
    .conttesto, .contpuls {width:100%; float:none;}
    .conttesto p, .contpuls {text-align:center;}
    .contpuls {padding:0px 0 30px 0;}
    .div7030 {height:30px;}
    button.chiama {width:300px; font-size:16px;}
    button.shop {width:260px; height:80px; line-height:80px;}
    .scrittagirasole {display:none;}
    .scrittaresp {display:block; width:70%; margin:auto;}
    #footercont {text-align:center; line-height:22px; padding-bottom:24px; padding-right:0px;}
    .footlogo {float:none; display:block; margin:0px auto 20px; padding-top:24px;}
    footer {height:inherit;}
}

@media only screen and (max-width: 560px) {
    #chiimg img {width:100%;}
    #social a img {width:30px;}
}

@media only screen and (max-width: 480px) {
    #maps {font-size:16px;}
    #maps img {width:18px; margin:-4px 10px;}
    #logo {padding:16px 0;}
    #social {padding:36px 4% 0 0;}
    #chitesto p {font-size:18px; line-height:34px;}
    .div7040 {height:40px;}
    h3 {font-size:24px;}
    .gall {float:none; width:99%; margin-bottom:50px;}
    .gall img {margin-bottom:10px;}
    .plustesto {text-align:center; height:inherit;}
    .plustesto img {float:none;}
    .plustesto p {text-align:center; margin-top:0;}
    .plustesto .mono {padding-top:0px; line-height:24px;}
    .conttesto p {font-size:22px;}
}

@media only screen and (max-width: 400px) {
    #logo {padding:14px 0;}
    #social {padding:22px 4% 0 0;}
}