:root{

    --verdescuro : #0C333A;

    --gialloocra : #EACE76;

    --rossovino: #7B1622;

    --contatti : #F6F6F6;

}

*{ box-sizing: border-box;}

body *{

    font-family: 'Libre Caslon Text', serif; 

    color: white;

}

p{ margin: 0;}

h1,h2,h3,h4,h5,h6{ font-weight: bold; margin:0;}

#head .img-home{

    height:max(200px, min(74vw, 100vh));

    background-image: url(../img/img-palaios-background-mobile.jpg);

    background-repeat: no-repeat;

    background-size:cover;

    background-position: center;

} 

.logo{

    display:flex;

    justify-content:center;

    align-items: center;

    padding:0;

    padding-top: max(20px, min(7.7vw, 144px));

    /* padding-bottom:max(20px, min(10.8vw, 160px)); */

}

.logo img{ 

    display: block;

    max-width:746px;

    margin: 0 auto;

}

.header-home > p{

    color:white;

    font-size: max(10px, min(4.1vw, 35px));

    line-height: max(16px, min(5vw, 45px));

}

.header-home p:nth-child(1){

    font-weight: bold;

    margin-bottom: max(0px, min(6vw, 60px));

}







#body section .container-img, #body section .container-full-img{ background-repeat: no-repeat; background-size:contain; background-position:7%;}

#body section:nth-child(1) .container-fluid { background-color: var(--verdescuro);}

#body section:nth-child(3) .container-fluid { background-color: var(--gialloocra);}

.container-full-img, .container-img{

    height:100%;

    position:relative;

    z-index:1;

    display:flex;

    width:100%;

    align-items:flex-end;

    margin-left:auto;

    margin-right:auto;

}

.container-full-img img, .container-img img{

    max-height:100%;

}

.container-full-img{

    max-width:1920px;

}

.container-img{

    max-width: 1790px;

}

.container-full-img > div, .container-img >div {

    flex-direction: column;

    justify-content: flex-end;

    max-width:49%;

    flex: 0 0 50%;

    height:100%;

    transform: translateY(53px);

}

div[id^="block"] p{

    font-size: max(10px, min(3.38vw, 14px));

    line-height: max(20px, min(8.7vw,36px));

}

#block1, #block3{

    color: white;

}

div[id^="block"] .row{

    padding-top: max(16px, min(6vw, 75px));

}

#block1 h1, #block1 p{

    padding-left: max(20px, min(15vw, 63px));

    padding-right: max(20px, min(16.6vw, 63px));

}

#block1 h1{

    font-size: max(20px, min(12.5vw, 101px));

    line-height: max(29px, min(12.31vw, 102px));

    padding-bottom: max(30px, min(10vw, 123px));

}

#block1 p{

    --width: calc(100vw - max(20px, min(8.7vw, 36px)) - max(20px, min(9.66vw, 40px)));

    --widthContent: 815px;

    --ratio: calc(998 / 815); 

    padding-bottom: calc((min( var(--width), var(--widthContent)) * var(--ratio)) / 2);

}

#block1 p span{

    display: block;

    padding-top: 51px;

    font-style: italic;

    font-size: max(15px, min(5vw, 23px));

    line-height: max(20px, min(8.7vw,36px));

}

div[id^="block"] .img-block{

    padding-right: max(20px, min(8.7vw, 36px)); 

    padding-left: max(20px, min(9.66vw, 40px)); 

    position: absolute;

    z-index:1;

    top: 100%;

    transform: translateY(-50%);

}



#body section:nth-child(2) .container-fluid{

    --width: calc(100vw - max(20px, min(8.7vw, 36px)) - max(20px, min(9.66vw, 40px)));

    --widthContent: 815px;

    --ratio: calc(998 / 815); 

    padding-top: calc((min( var(--width), var(--widthContent)) * var(--ratio)) / 2);

}

#block2 h1{

    font-size: max(20px, min(14.7vw, 99px));

    line-height: max(29px, min(14.49vw,98px));

    padding-bottom: max(25px, min(8.9vw, 52px));

}

#block2 p{

    font-weight: bold;

    --width: calc(100vw - max(20px, min(8.7vw, 36px)) - max(20px, min(9.66vw, 40px)));

    --widthContent: 815px;

    --ratio: calc(998 / 815); 

    padding-bottom: calc((min( var(--width), var(--widthContent)) * var(--ratio)) / 2);

}

#block2 h1, #block2 p{

    color: var(--verdescuro);

    padding-left: max(20px, min(11.3vw, 47px));

    padding-right: max(20px, min(7vw, 29px));

}



#body section:nth-child(3) .container-fluid{ 

    --width: calc(100vw - max(20px, min(8.7vw, 36px)) - max(20px, min(9.66vw, 40px)));

    --widthContent: 815px;

    --ratio: calc(998 / 815); 

    padding-top: calc((min( var(--width), var(--widthContent)) * var(--ratio)) / 2);

}

#block3 .row{

    position:relative; 

    z-index:2;

}

#block3 h1, #block3 p{

    padding-left: max(20px, min(6.7vw, 28px));

    padding-right: max(20px, min(6.7vw, 28px));

}

#block3 p{

    --width: calc(100vw - max(20px, min(8.7vw, 36px)) - max(20px, min(9.66vw, 40px)));

    --widthContent: 960px;

    --ratio: calc(998 / 960); 

    padding-bottom: calc((min( var(--width), var(--widthContent)) * var(--ratio)) / 2);

}

#block3 h1{

    font-size: max(40px, min(22.7vw, 249px));

    line-height: max(39px, min(22.45vw, 247px));

    padding-bottom: 20px;

}

#prodotti .swiper{

    --width: calc(100vw - max(20px, min(8.7vw, 36px)) - max(20px, min(9.66vw, 40px)));

    --widthContent: 960px;

    --ratio: calc(998 / 960); 

    padding-top: calc((min( var(--width), var(--widthContent)) * var(--ratio)) / 2);

}

#prodotti .swiper-slide{padding-top: 73px; font-weight: bold; }



#prodotti .swiper-slide .container-lg{

    padding-left: max(20px, min(9.17vw, 36px));

    padding-right: max(20px, min(9.17vw, 36px));

}

#prodotti .swiper-slide h1{ 

    font-size: max(21px, min(9.66vw, 99px));

    line-height: max(20px, min(9.42vw, 98px));

    padding-bottom:max(20px, min(19vw, 80px));

}

#prodotti .swiper-slide h3{

    font-size: max(25px,min(2.5vw,30px));

    line-height: max(25px, min(2.5vw, 30px));

    padding-bottom: max(30px,min(3.17vw,61px));;

}

#prodotti .swiper-slide p{

    /* font-size: max(12px, min(3.38vw,14px));

    line-height: max(25px, min(8.69vw,36px));

    max-height: calc(36px * 4);

    overflow: hidden; */

}

.green  *{color: var(--verdescuro); }

.redwine *{color:var(--rossovino); }



.arrows{

    padding-top: max(27px, min(6.52vw, 70px));

    padding-bottom: max(24px, min(5.79vw, 90px));

}

.arrows .row{column-gap: 30px;}

.arrows .row > *{background-repeat: no-repeat; width:27px; height:30px;}

.rightArrow{ background-image: url(../img/rightArrow.png);}

.leftArrow{background-image: url(../img/leftArrow.png); }



.contenitore-input{

    row-gap:max(28px, min(6.76vw, 44px));

    justify-content: space-between;

    padding-left: 28px;

    padding-right: 28px;

}

.inputcontatti:focus, .inputcontatti:active, .inputcontatti:hover{

    border: 1px solid var(--gialloocra);

}

.inputcontatti{

    padding:16px 0 15px 13px;

    font-weight: bold;

    color: var(--verdescuro);

    border: 1px solid #707070;

    width:100%;

    height:49px;

}

.inputcontattiMsg{

    min-height:380px;

    resize: none;

}

.inputcontatti::placeholder{

    color: var(--verdescuro);

    font-size: 14px;

    font-weight: bold;

}

.invioFormContatti{

    height:49px;

    width:100%;

    max-width: 224px;



    font-size: 25px;

    font-weight: bold;

    color: var(--verdescuro);

    text-align:center;



    margin-top: max(26px, min(6.28vw, 38px));

    margin-left:28px;

    margin-right:28px;

    background-color: var(--gialloocra);

    border:0px;

    transition: all 0.3s ease-in 0.1ms;

}

.invioFormContatti:hover{

    border:2px solid var(--gialloocra);

    background-color: white;

}





#footer{

    background-color: var(--verdescuro);

}

#footer .row{

    padding: 80px 0;

    padding-bottom: max(80px, min(35vw, 148px));

}

#footer p{

  font-size: 14px;

  line-height: 23px;

}

.logo-footer{

    padding: 0;

    padding-right: max(20px, min(8.7vw, 36px));

    padding-bottom: max(50px, min(18vw, 78px));

    padding-left: max(20px, min(10vw, 44px));

}

.txt-footer{

    padding: 0;

    padding-right: max(20px, min(9.54vw, 39.5px));

    padding-left: max(20px, min(9.54vw, 39.5px));    

}

.row-powered{

    padding-bottom: max(27px, min(6.5vw, 36px));

}

#contatti {

    max-height: 610px;

    margin-bottom: max(295px, min(101vw, 409px));

    background-color: var(--contatti);

}



#contatti h1{

    color: var(--verdescuro);

    padding-top: max(12px, min(5.31vw, 72px));

    padding-bottom: max(3px, min(3.14vw, 66px));

    font-size: max(20px,min(12.5vw, 82px));

    line-height: max(29px, min(12.3vw, 81px));

}

.gdpr-checkbox{opacity:0.01; position:absolute; left:0;}

.textgdpr, #link-privacy-policy{

    color:var(--verdescuro);

}

.textgdpr{ font-size: max(9px, min(3.86vw, 16px));}

.gdpr-checkbox + label.gdpr{

    color: var(--verdescuro);

    border:1px solid black;

    border-radius: 50%;

    position:relative;

    min-width: 15px;

    height: 15px;

    background-color: transparent;

}

.gdpr-checkbox + label.gdpr:before{

    content: "";

    position: absolute;

    border-radius: 50%;

    bottom: 0;

    transform: translate(15%, -15%);

    min-width: 10px;

    height: 10px;

    background-color: transparent;

}

.gdpr-checkbox:checked + label.gdpr:before{

    background-color: var(--verdescuro);

}

#loadingbtn{

    width: 100%;

    height: 100%;

    margin: 0em;

    left: 0em;

    top: 0em;

    background: white; 

    position: fixed;

    z-index:9999;

    opacity:0.9;

    display:none;

}

#privacy .modal-dialog{max-width: min(100vw, 800px);}

#privacy .modal-content{

    flex-direction: row;

    flex-wrap: wrap;

    padding-top: max(2.5rem, min(19vw,12.5rem));

    padding-bottom: max(2.5rem, min(19vw, 12.5rem));

    border-radius: 50%;

    background: #0C333A url(../img/background-image-cookie.png) no-repeat;

    background-size: cover;

    height: min(100vw, 800px);

}

#privacy .modal-body, #privacy .modal-footer{

    max-width: 452px;

    width: 100%;

    margin: auto;

    padding:calc(max(20px, min(6.9vw, 6rem)));

    padding-left: calc(max(25px, min(8.6vw, 6rem)));

    font-weight: bold;

}

#privacy .modal-body{  

    font-size:max(10px, min(3.86vw, 33px));

    display:flex;

    flex-wrap: wrap;

    align-content: flex-start;

    row-gap: max(10px, min(7.24vw,40px));

}

#privacy .modal-footer{

    padding-top:0;

    justify-content: flex-start;

    flex-wrap: nowrap;

    font-size:max(10px, min(3.38vw, 14px));

}

#privacy .modal-footer button{

    text-align:left;

    padding-left: 11px;

    width:100%;

    height:max(20px, min(9.66vw, 49px));

    background-color:transparent;

    border: 1px solid var(--gialloocra);

    color: var(--gialloocra);

}

#privacy ._ok{ 

    max-width: max(38px, min(13vw,131px)) !important;

} 

#privacy .modal-footer button a{

    color: var(--gialloocra);

}



@media (orientation: landscape) {

    #head .img-home{height:100vw;}

}

@media (min-width: 992px){

    #head .img-home{

        height:max(768px, 100vh);

        background-image: url(../img/img-palaios-background.jpg);

    }

    #body section .container-fluid{ padding-top: max(75px, min(6.77vw, 130px));}

    #body section:nth-child(1) .container-img{ background-image: url(../img/pietra_1.png); }



    #body section:nth-child(2) { padding-top: max(70px, min(6.7vw,130px));

    }

    #body section:nth-child(2) .container-img{background-image: url(../img/tronco-albero.png); background-position: right;}

    

    #body section:nth-child(3) .container-fluid{ padding-top:0;}

    #body section:nth-child(3) .container-full-img{background-image: url(../img/ruota.png);}

    div[id^="block"] .row{padding-top: max(70px, min(7vw, 130px));}

    div[id^="block"] p{ min-height: max(300px,min(45vw,542px));}

    #block1 p{padding-bottom: max(100px, min(10vw, 200px));}

    #block2 p{padding-bottom:max(240px, min(16vw, 342px));}

    #block2 h1{ padding-bottom: min(10vw, 123px); }

    #footer .row{padding:52px 0 92px;}

    #block3 p{text-align: right; padding-bottom: 0;}

    #block3 h1{ word-break: break-word; }



    #prodotti .swiper-slide p{max-height: auto;}

    #contatti {max-height: initial; height: 681px;}

    #contatti > .container-lg{

        padding-bottom: 56px !important;

    }

    .inputcontatti{

        flex: 0 0 32%;

        max-width:358px;

    }

    .inputcontattiMsg{

        flex: 0 0 100%;

        max-width:100%;

        min-height:137px;

    }

    #privacy .modal-footer{

      padding-top: max(10px, min(7.5vw,60px)) !important;

    }



    #prodotti .swiper-slide h1{ 

      font-size: min(5.15vw, 99px);

      line-height: min(5.10vw, 98px);

    }

}



@media (min-width:1200px){

}