:root{
   --max-larghezza: 1300px;
   --menu-font-h1: 30px; --menu-font-h1-small: 24px; --menu-font-family-h1: 'Times New Roman';
   --menu-font-h2: 28px; --menu-font-h2-small: 20px; --menu-font-family-h2: 'Caveat';
   --menu-font-h3: 18px; --menu-font-h3-small: 16px; --menu-font-family-h3: 'Arial';
   --menu-background: 'linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%)';
   --menu-text-color: #dbab78;
   --body-background: #000;
   --body-para-text: 14px;
   --body-para-small: 10px;
   
   /*Variabili per i pulsanti*/
   --btn-border-color: #gray;
   --btn-hover-back-color: #000;
   --btn-back-color: rgba(255,255,255,0.6);
   --btn-tx-color: #000;
   --btn-hover-tx-color: #fff;
   --btn-radius: 20px;
   
   /*Variabili per il testo cliccabile*/
   --icon-color: #dbab78;
   --text-hover: #dbab78;
   --para-color: #ccc; /*COLORE PER I TESTI DEL SITO*/
}

*{
   box-sizing: border-box;
}
body{
   margin: 0;
   padding: 0;
   font-family: var(--menu-font-family-h3), Helvetica, sans-serif;
   font-size: var(--body-para-text);
   background: var(--body-background); /* Old browsers */
   background-image: url('../../webcontent/img/sfondo_body.png');
   background-position: center;
   background-repeat: repeat-y;
   background-size: cover;
   color: var(--para-color); 
}

video{
   width: 100%;
   max-width: var(--max-larghezza);
}
iframe {
   width: 100%!important;
   height: 180px!important;
   border: none!important;
   border-radius: 10px!important;
   box-shadow: 0px 0px 8px 0px var(--icon-color);
}
h1{
   font-family: var(--menu-font-family-h1), Times, serif;
   font-size: var(--menu-font-h1);
   color: var(--menu-text-color);
   margin: 5px 0;
}
h2{
   font-family: var(--menu-font-family-h2), cursive;
   font-size: var(--menu-font-h2);
   color: var(--menu-text-color);
   margin: 5px 0;
}
h3{
   font-family: var(--menu-font-family-h3), sans-serif;
   font-size: var(--menu-font-h3);
   color: var(--menu-text-color);
   margin: 5px 0;
}
.box-btn {
    width: 100%;
    display: flex;
    overflow: hidden;
    padding-top: 5px;
    justify-content: center;
    align-items: center;
}

.box-btn .button {
    background: linear-gradient(to bottom, #e8c694 0%,#bf8d42 25%,#bf8d42 75%,#e8c694 100%);
    font-family: "Times New Roman", Times, serif;
    color: #0c0c0c;
    /* font-size: 12px; */
    line-height: 16px;
    text-transform: uppercase;
    padding: 7px 12px 6px;
    border-bottom: 1px solid #988a80;
    border-right: 1px solid #988a80;
    border-radius: 3px;
    text-shadow: 0 0 4px #fff;
    text-decoration: none;
    transition: 1s all ease;
}
.box-btn .button:hover, .box-btn .readonly {
   background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
}
.box-btn>span, .box-btn>strong {
    width: 30%;
}
.box-btn>strong {
    background: url('../shopImg/btn-pattern-left.png') no-repeat right 0;
    height: 15px;
    margin: 0 4px 0 0;
    display: inline-block;
}
.box-btn>span {
    background: url('../shopImg/btn-pattern-right.png') no-repeat 0 0;
    height: 15px;
    margin: 0 0 0 4px;
    display: inline-block;
}

button {
   border: 2px solid;
   border-color: var(--btn-border-color);
   border-radius: var(--btn-radius);
   background-color: var(--btn-back-color);
   color: var(--btn-tx-color);
   text-align: center;
   padding: 10px;
   cursor: pointer;
   transition: 1s all linear;
   margin: 10px auto;
}

button:hover{
   background-color: var(--btn-hover-back-color);
   color: var(--btn-hover-tx-color);
}
.box-pattern {
    display: flex;
    width: 100%;
    margin-bottom: 13px;
    justify-content: space-evenly;
}
.box-pattern span {
    display: inline-block;
    background: url('../shopImg/pattern-line.png') repeat-x 0 0;
    height: 3px;
    width: 42%;
    margin-top: 6px;
}
.box-pattern strong {
    display: inline-block;
    background: url('../shopImg/pattern-center.png') no-repeat 0 0;
    margin: 0 3px;
    width: 38px;
    height: 14px;
}

/*SET PER I MODALI */
.login-form, .modale-form {
   background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%)!important;
   color: var(--para-color)!important;
}
.modale-form iframe{
   width: 100%!important;
}
.modale-campi-container a { color: var(--para-color)!important; }
.pagina{
   position: relative;
   width: 100%;
   max-width: var(--max-larghezza);
   margin: auto;
   margin-top: 130px;
}

.full-img{
   width: 100%;
   height: auto;
}

.flag-ico {
    width: 33px;
    aspect-ratio: 4/3;
    height: auto;
    margin: 5px;
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 0px 8px 1px;
}

/* FOOTER SECTION STYLE */
footer{
   position: relative;
   display: block;
   width: 100%;
   max-width: var(--max-larghezza);
   margin: auto;
   height: 220px;
   background-position: center;
   background-size: cover;
   text-align: center;
   padding: 20px 10px;
}

footer section{
   background-color: rgb(0 0 0 / 76%);
   position: absolute;
   bottom: 0px;
   top: 0px;
   left: 0px;
   width: 100%;
}

footer section > div:nth-child(1){
   text-align: center;
}

footer .flex-container{
   display: flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   justify-content:space-between;
   align-items: flex-start;
   text-align: justify;
   padding: 0 10px;
}

footer .flex-container ul{
   list-style: none;
   line-height: 30px;
   text-align: justify;
   margin: 10px 0px;
   padding: 0px;
}

.it-IT { display: block;}
.lang { display: none; }

/* MEDIA QUERY */
@media screen and (max-width: 800px){
   footer{ height: 400px; }
   footer .flex-container{
      flex-direction: column;
   }
   .swiper-wrapper-1 {
      height: 180px !important;
   }
   .swiper-wrapper-2 {
      height: 42vh !important;
   }
}

@media screen and (max-width: 600px){
   body{ font-size: var(--body-para-text-small); }
   video{
      height: 50vh;
      object-fit: cover;
      object-position: center center;
   }
   
   h1{
      font-size: var(--menu-font-h1-small);
      margin: 5px 0;
   }
   h2{
      font-size: var(--menu-font-h2-small);
      margin: 5px 0;
   }
   h3{
      font-size: var(--menu-font-h3-small);
      margin: 5px 0;
   }
   
   footer p, footer span, footer  a{
      font-size: 12px;
   }
   .pagina{
      margin: auto;
      margin-top: 60px;
   }
}