*{padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}

.contatti a{color: #555;

}

.contatti a:hover{color: black;}

body{font-family: 'Satoshi', sans-serif;}

img{width: 100%;
display: block;}

.full{height: 100vh;
    box-sizing: border-box;
display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
background-color: white;
}

#claim{color: white;animation: anim 1s 0.5s both;
    color: #8e8e8c;
    
margin-top: 50px;
    opacity: 0.7;
font-size: 1.5vw;}

.contact{font-size: 1.4vw;
    opacity: 0.6;
font-weight: bold;}

@keyframes anim{
    0%{opacity: 0;transform: scale(0.5)}
    100%{opacity: 1;transform:  scale(1)}

}

.bottle{height: auto!important;
padding-top: 100px;
    padding-bottom: 100px;
}


@keyframes scroll{
    0%{top:50px;}
    100%{top:80px;}

}

.arrow{padding-top: 100px; animation: scroll 0.5s infinite both;
    opacity: 0.5;animation: anim 1s 1s both;;
position: relative;
}

#logo{width: 15%;animation: anim 1s;}

#item{display: flex;
width: 18%;
    column-gap: 25%;
    justify-content: center;
    align-items: center;

}

.black{background-color: black;}


.contatti{font-size: 3vw;
background-color: #e2e2e2;
}

.padder{padding:5%;
box-sizing: border-box;
}

@media screen and (max-width: 877px) {
    
    #logo{width: 150px;}
    
    #claim{font-size: 2.5vh;}
    
    .arrow{width: 20px!important;}
    
    #item{flex-direction: column;
 
    width: 65%;}
    
    #item img{padding-bottom: 50px;}
    
    .contatti{font-size:4.8vh;}
    .contact{font-size:2.8vh;}
    
}