*{
    font-family: 'Titillium Web', sans-serif;
}

.logo{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 9;
    width: 100%;
    text-align: center;
}
.logo> img{
    max-width: 500px;
    width: 100%;
}
.section{
    background-image: url("../img/cardboard.png");
    background-color: #fff;
}
.underlogo{
    width: 100%;
    position: absolute;
    bottom:-5px;
}

.immagine{
    position: absolute;
    top:40%;left:50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    max-width: 800px;
}

.immagine > h1{
    font-size: 60pt;
    text-align: center;
    line-height: 60px;
    background-color: #741926;
    width: 100%;
    max-width: 90%;
    word-wrap: break-word;
    margin: 0px auto;
    margin-top: -10px;
    padding: 10px;
    border-radius: 15px;
    color: white;
    user-select: none;
    box-sizing: border-box;
}
.immagine > img{
    width: 100%;
}

a{
    text-decoration: none;
}
.buttonOpen{
    font-size: 30pt;
    line-height: 22px;
    color: #741926;
    border: 2px solid #741926;
    width: max-content;
    padding: 15px 30px;
    font-weight: 600;
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 10px;
    transition-duration: 0.2s;
    cursor: pointer;
}
.buttonOpen:hover{
    background-color: #741926;
    color: white;
    transition-duration: 0.2s;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span{
    background-color: #741926;
}
#fp-nav ul li .fp-tooltip{
    color: white;
    border-radius: 10px;
    font-size: 8pt;
    padding: 5px 10px;
    line-height: 10px;
    background-color: #741926;
    font-weight: 700;
}

@media screen and (max-width: 700px) {
    .immagine > h1{
        font-size: 50pt;
        line-height: 50px;
    }
    #fp-nav.fp-right{
        right: 0px;
    }
}

@media screen and (max-width: 550px) {
    .immagine > h1{
        max-width: 85%;
    }
}

@media screen and (max-width: 500px) {
    .immagine > h1{
        font-size: 40pt;
        line-height: 40px;
    }
}
@media screen and (max-width: 370px) {
    .immagine > h1{
        max-width: 80%;
    }
}

.siteName{
    text-align: center;
    font-weight: 700;
    animation: slideFromTop 0.7s forwards;
    transform: translateY(-1000%); 
    -webkit-animation: slideFromTop 0.7s forwards;
}
@-webkit-keyframes slideFromTop {
    100% { transform: translateY(0%); }
}

@keyframes slideFromTop {
    100% { transform: translateY(0%); }
}
.siteName > .top{
    font-size: 115pt;
    color: #1c355f;
    line-height: 115px;
}
.siteName > .bottom{
    font-size: 85.7pt;
    line-height: 89px;
    color: #a07649;
}
.siteName > .bottom > span{
    color: #78232e;
}

.flexxed{
    display: flex;
    margin-top: 20px;
}
.flexxed > .flexLeft{
    flex:1;  
    text-align: right;  
}
.flexxed > .flexLeft > img{
    max-width: 400px;
    animation: slideFromLeft 1s forwards;
    transform: translateX(-1000%); 
    -webkit-animation: slideFromLeft 1s forwards;
    animation-delay: 0.2s;
}

@-webkit-keyframes slideFromLeft {
    100% { transform: translateX(0%); }
}

@keyframes slideFromLeft {
    100% { transform: translateX(0%); }
}
.whiteText{
    color: #78232e;
    font-weight: 800;
}
.flexxed > .flexRight{
    flex:1;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 0px 10px;
}

.paragr{
    max-width: 400px;
    margin-bottom: 30px;
    font-size: 15pt;
    transform: translateX(1000%);
    line-height: 20px;
    position: relative;
    animation: slideFromRight 1s forwards;
    -webkit-animation: slideFromRight 1s forwards;
    
}
.p1{
    animation-delay: 0.6s;
}
.p2{
    animation-delay: 1s;
}
.p3{
    animation-delay: 1.4s;
}

@-webkit-keyframes slideFromRight {
    100% { transform: translateX(0%); }
}

@keyframes slideFromRight {
    100% { transform: translateX(0%); }
}
.paragr > b{
    color: #1c355f;
}
.paragr::before{
    content: '•';
    position: absolute;
    left: -10px;
}
.prodotti{
    border: 3px solid #78232e;
    width: max-content;
    padding: 5px 30px;
    margin: 0 auto;
    border-radius: 5px;
    font-size: 18pt;
    font-weight: 800;
    color: #78232e;
    animation: slideFromRight 1s forwards;
    -webkit-animation: slideFromRight 1s forwards;
    transform: translateY(1000%);
    animation-delay: 1.7s;
}

@-webkit-keyframes slideFromBottom {
    100% { transform: translateY(0%); }
}

@keyframes slideFromRightBottom {
    100% { transform: translateY(0%); }
}

@media screen and (max-width: 900px) {
    .prodotti{
        display: none;
    }
}

@media screen and (max-width: 700px) {
    .flexxed > .flexRight{flex: 1;}
    .flexxed > .flexLeft > img{
        max-width: 100%;    
    }
    .paragr{
        font-size: 12pt;
        line-height: 16px;
    }
}

@media screen and (max-width: 805px) {
    .siteName > .top{
        font-size: 90pt;
        line-height: 90px;
    }
    .siteName > .bottom{
        font-size: 67pt;
        line-height: 67px;
    }
}

@media screen and (max-width: 805px) {
    .siteName > .top{
        font-size: 80pt;
        line-height: 80px;
    }
    .siteName > .bottom{
        font-size: 59.5pt;
        line-height: 60px;
    }
}

@media screen and (max-width: 585px) {
    .siteName > .top{
        font-size: 60pt;
        line-height: 60px;
    }
    .siteName > .bottom{
        font-size: 45pt;
        line-height: 45px;
    }
}

@media screen and (max-width: 470px) {
    .siteName > .top{
        font-size: 40pt;
        line-height: 40px;
    }
    .siteName > .bottom{
        font-size: 30pt;
        line-height: 30px;
    }
    .flexxed{
        display: flex;
        flex-flow: column;
    }
    .flexxed > .flexLeft{
        text-align: center;
    }
    .flexxed > .flexLeft > img{
        max-height: 400px;    
    }
    .flexxed > .flexRight{
        text-align: center;
    }
    .paragr{
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .paragr::before{
        content: '';

    }
}

@media screen and (max-height: 641px) {
    .flexxed > .flexLeft > img{
        max-height: 250px;    
    }
    .siteName > .top{
        font-size: 40pt;
        line-height: 40px;
    }
    .siteName > .bottom{
        font-size: 30pt;
        line-height: 30px;
    }
    .immagine > img{
        width: 50%;
    }
    .immagine > h1{
        font-size: 40pt;
        line-height: 40px;
    }
    .immagine{
        top:50%;left:50%;
        transform: translateX(-50%) translateY(-50%);
        width: 100%;
        text-align: center;
    }
    .paragr{
        font-size: 12pt;
        max-width: 250px;
    }
}