@charset "UTF-8";
/* CSS Document */

body,
h1,
h2,
h3,
h4,
h5,
p {
   font-family: 'Urbanist', sans-serif;
}

@font-face {
    font-family: leaguescript;
    src: url(../font/leaguescript.otf);
}


.title-h1{
    font-size: 16px;
    color: #826843;
    font-weight: 500;
    padding-top: 0.8vh;
    padding-right: 6rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.vertical{
    font-family: "leaguescript";
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 4vh;
    color: #826843;
    font-weight: 600;
    padding-top: 14vh;
    padding-left: 1rem;
    letter-spacing: 3px;
}

.titolo{
    font-size: 11vw;
    color: #C8AF8B;
    text-align: right;
    font-weight: 300;
}
.titolo-anno{
    font-size: 10vw;
    color: #9C8565;
    text-align: right;
    font-weight: 300;
}

.txt{
    font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1920 - 300)));
    color: #242424;
    font-weight: 400;
}

.tit-contatti{
    font-size: calc(18px + (28 - 18) * ((100vw - 300px) / (1920 - 300)));
    color: #826C45;
    font-weight: 400;
    padding-top: 2rem;
}
.txt-contatti{
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    color: #826C45;
    font-weight: 300;
    margin-bottom: 0.5rem;
}
.txt-contatti:hover{
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    color: #504023;
    font-weight: 300;
    margin-bottom: 0.5rem;
}


.hr-foot{
    height: 3px!important;
    color: #826c45;
    margin-top: 1rem;
}

.logo-foot{
    min-width: 6rem;
    max-width: 12rem;
    padding-bottom: 2rem;
}

.box-1{
    padding-right: 8rem;
    padding-top: 12rem;
    padding-bottom: 12rem;
}
.box-fibre-animali{
    padding-right: 8rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.box-1-vid{
    padding-top: 1rem;
    
}
.box-1-txt{
padding-left: 4rem;
}

.back-riga{
    background-image: url(../img/back-riga_animated.svg);
    background-position: center;
    background-repeat: no-repeat;
}
.back-riga2{
    background-image: url(../img/back-riga2_animated.svg);
    background-position: center;
    background-repeat: repeat-y;
}

.back-riga3{
    background-image: url(../img/back-riga3_animated.svg);
    background-position: center;
    background-repeat: no-repeat;
}
.back-riga4{
    background-image: url(../img/back-riga4_animated.svg);
    background-position: center;
    background-repeat: no-repeat;
}
.back-macchina{
    background-image: url(../img/back-macchina.jpg);
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
}
/*-----------------------------------Video Back----------------------------------------------*/
.box-video{
    padding-top: 0rem;
    padding-right: 3rem;
    padding-bottom: 1rem;
}

.h-head{
    height: 84vh;
}

.video-background-holder {
position: relative;
background-color: #222222;
height: 88vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
.video-background-holder video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.video-background-content {
position: relative;
z-index: 2;
}
.video-background-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #fff;
opacity: 0;
z-index: 1;
}


.sp-2sez{
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.box-txt-l{
    padding-top: 2rem;
    padding-bottom: 4rem;
    padding-left: 8rem;
    padding-right: 2rem;
}
.box-txt-2{
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 2rem;
    padding-right: 8rem;
}

.titolo-filatura{
    font-size: 10vw;
    color: #fff;
    text-align: center;
    font-weight: 300;
}
.txt-filatura{
    font-size: 5vw;
    line-height: 4vw;
    color: #DCD3C2;
    text-align: center;
    font-weight: 300;
    padding-bottom: 5rem;
}
.sp-tit-filatura {
    padding-top: 6rem;
    padding-bottom: 1rem;
}

.tit-sez-filatura{
    font-size: calc(26px + (36 - 26) * ((100vw - 300px) / (1920 - 300)));
    color: #fff;
    font-weight: 700;
}
.txt-sez-filatura{
    font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
    color: #242424;
    font-weight: 400;
}

.titolo-storia{
    font-size: 10vw;
    color: #fff;
    font-weight: 300;
}
.sottotitolo-storia{
    font-size: 5vw;
    line-height: 4vw;
    color: #DCD3C2;
    font-weight: 300;
    padding-bottom: 5rem;
}
.data-storia{
    font-size: 12vw;
    line-height: 4vw;
    color: #DCD3C2;
    opacity: 0.4;
    font-weight: 100;
    padding-bottom: 5rem;
}
.txt-storia{
    font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
    color: #242424;
    font-weight: 400;
}

.back-storia{
    background-image: url(../img/storia.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

.sp-sez-soria{
    padding-top: 10rem;
    padding-bottom: 10rem;
    padding-left: 4rem;
    padding-right: 4rem;
}

.txt-bot{
    position: relative
}
.txt-bot p{
    position: absolute;
    bottom: 12rem;
    right: 8rem;
    left:2rem;
}

.titolo-produzione{
    font-size: 5vw;
    line-height: 5vw;
    color: #fff;
    text-align: right;
    font-weight: 500;

    text-decoration: underline;
  text-underline-offset: -.3em;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 4px;
  text-decoration-color: #837867;
}

.txt-sez-produzione{
    font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
    color: #fff;
    font-weight: 300;
    text-align: right;
}

.titolo-prodotti{
    font-size: 20vw;
    color: #837867;
    font-weight: 300;

}
.sottitolo-tessuti{
    font-size: 6vw;
    line-height: 5vw;
    color: #DCD3C2;
    text-align: right;
    font-weight: 300;
}
.sp-txt-prod{
    padding-top: 10rem;
    padding-left: 4rem;
    padding-right: 4rem;
    padding-bottom: 3rem;
}
.sp-video-verticale{
    height: 80vh;
}




/*------------------carousel-------------------------*/
#all_slides{
  position: relative;
  height: 70vh;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.slide{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  box-shadow: 3px 3px 25px #262626;
}

.slide:nth-of-type(1){
  background-image: url(../img/carousel/filo.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.slide:nth-of-type(2){
  background-image: url(../img/carousel/2.jpg);
  background-size: cover;
  background-position: 50% 100%;
  background-repeat: no-repeat
}

.slide:nth-of-type(3){
  background-image: url(../img/carousel/3.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat
}
.slide:nth-of-type(4){
  background-image: url(../img/carousel/4.jpg);
  background-size: cover;
  background-position: 50% 100%;
  background-repeat: no-repeat
}

.active{
  opacity: 1;
  z-index: 2;
}

.slide{
  font-size: 40px;
  padding: 40px;
  box-sizing: border-box;
  background: #333;
  color: #fff;
  background-size: cover;
}



/*------------------end-carousel-------------------------*/

.sp-carousel{
    padding-bottom: 4rem;
}

.box-vid-prodotti{
    padding-top: 4rem;
    padding-left: 2rem;
    padding-bottom: 4rem;
}

.box-img-prodotti{
    padding-top: 4rem;
    padding-left: 2rem;
    padding-bottom: 4rem;
}

.img-up-video{
    position: absolute;
    max-width: 140%;
    left: -4rem;
    bottom: -4rem;
}

/*------------------Pagine-------------------------*/



.titolo-pag{
    font-size: 8vw;
    color: #837867;
    font-weight: 300;
    text-align: right;
    line-height: 4.4vw;
}

.titolo-pag-tessuti{
    font-size: 14vw;
    color: #837867;
    font-weight: 300;
    text-align: right;
    line-height: 6vw;
}
.titolo-pag-storia{
    font-size: 11vw;
    color: #837867;
    font-weight: 300;
    text-align: right;
    line-height: 6vw;
}

.sottotitolo-pag{
    font-size: 5vw;
    line-height: 3vw;
    color: #DCD3C2;
    text-align: right;
    font-weight: 300;
}

.data-storia-pag {
    font-size: 14vw;
    line-height: 1vw;
    color: #DCD3C2;
    opacity: 0.4;
    font-weight: 100;
    padding-bottom: 6rem;

    text-align: right;
}

.back-riga-pag{
    background-image: url(../img/back-riga_animated.svg);
    background-position: left center;
    background-repeat: no-repeat;
}

.tit-cal-pag{
    font-size: calc(26px + (36 - 26) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    color: #DCD3C2;
    margin-bottom: 1px;
}

.back-pag-prodotti{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 4rem;
}
.back-pag-prodotti{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 4rem;
}
.sp-txt-prodotti{
    padding-top: 10rem;
    padding-bottom: 10rem;
    padding-left: 4rem;
}

.sp-down-img{
    padding-top: 8rem;
}
.tipo-prodotti{
    font-size: calc(20px + (40 - 20) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    color: #A2967F;
    margin-bottom: 1px;
}

.icn-prodotti{
    width: 20rem;
}


.video-container {
    height: ;
    width: 100%;
    position: relative;
    background-color: #303030;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
  opacity: 0.4;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
  z-index: 1;
  position: relative;
  text-align: center;
  color: #dc0000;
  padding: 10px;
}


.titoli-h2{
    font-size: 3.5vw;
    line-height: 3vw;
    color: #DCD3C2;
    text-align: center;
    font-weight: 300;
    padding-top: 16rem;
    padding-bottom: 16rem;
}

ul {
  list-style-type: circle;
}

.back-tessuto {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.nome-tessuto {
    font-size: 5vw;
    line-height: 4vw;
    color: #DCD3C2;
    font-weight: 300;
    padding-bottom: 1rem;
}
.sottotitolo-pag-tessuti{
    font-size: 5vw;
    line-height: 3vw;
    color: #DCD3C2;
    text-align: right;
    font-weight: 300;
}
.sottotitolo-pag-storia{
    font-size: 5vw;
    line-height: 3vw;
    color: #DCD3C2;
    text-align: right;
    font-weight: 300;
}

.firma{
    font-family: "leaguescript";
    font-size: 3vh;
    color: #826843;
    font-weight: 500;
    text-align: right;
    padding-right: 8rem;
    padding-top: 4rem;
}

.white{
    color: #fff;
}

a{
    color: #fff;
    text-decoration: none;
}


@media only screen and (max-width: 1400px) {

}



@media only screen and (max-width: 800px) {
.box-txt-l {
    padding-top: 2rem;
    padding-bottom: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
.box-txt-2 {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
.txt-bot p {
    position: absolute;
    bottom: 12rem;
    right: 2rem;
    left: 2rem;
}

.sp-txt-prod {
    padding-top: 4rem;
    padding-left: 4rem;
    padding-right: 4rem;
    padding-bottom: 3rem;
}
.box-1 {
    padding-right: 2rem;
    padding-top: 12rem;
    padding-bottom: 12rem;
}
.vertical {
    font-family: "leaguescript";
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 4vh;
    color: #826843;
    font-weight: 600;
    padding-top: 14vh;
    padding-left: 1rem;
    letter-spacing: 3px;
}
}






@media only screen and (max-width: 1410px) {

}



@media only screen and (max-width: 700px) {
.title-h1{
    font-size: 8px;
    color: #826843;
    font-weight: 500;
    padding-top: 0.8vh;
    padding-right: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.logonav {
    min-width: 3rem;
    max-width: 3rem;
    padding-top: 0rem;
    padding-left: 0.5rem;
}


 .tit-menu {
    padding-top: 30%;
    color: #9B8B73;
    font-size: 40px;
    padding-bottom: 3rem;
}
.box-video {
    padding-top: 0rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
    padding-left: 0rem;
}

.vertical {
    font-family: "leaguescript";
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 2vh;
    color: #826843;
    font-weight: 500;
    padding-top: 14vh;
    padding-left: 0rem;
    letter-spacing: 3px;
    margin-left: 0.2rem;
}
.h-head {
    height: 100vh;
}
.vert-mobile {
    font-family: "leaguescript";
    font-size: 10vw;
    color: #CFB289;
    font-weight: 500;
    margin-top: -8rem;
    padding-left: 0rem;
    letter-spacing: 0px;
    margin-left: 0.2rem;
    text-shadow: 1px 1px 3px #101010;

}
.box-1 {
    padding-right: 1rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.box-fibre-animali{
    padding-right: 1rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.box-1-txt {
    padding-left: 1rem;
}

.back-riga {
    background-image: url(../img/back-riga_animated.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.titolo {
    font-size: 15vw;
    color: #C8AF8B;
    text-align: left;
    font-weight: 300;
    line-height: 2vw;
}
.titolo-anno {
    font-size: 13vw;
    
    color: #9C8565;
    text-align: left;
    font-weight: 300;
}
.txt-filatura {
    font-size: 5vw;
    line-height: 4vw;
    color: #DCD3C2;
    text-align: center;
    font-weight: 300;
    padding-bottom: 1rem;
}
.box-txt-l {
    padding-top: 1rem;
    padding-bottom: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
.txt-bot p {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
}
.box-txt-2 {
    padding-top: 2rem;
    padding-bottom: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
.sp-video-verticale {
    height: 80vh;
}
.carousel>* {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
}
.back-riga2 {
    background-image: url(../img/back-riga2_animated.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.titolo-produzione {
    font-size: 13vw;
    line-height: 14vw;
}
.back-macchina {
    background-image: url(../img/back-macchina.jpg);
    background-position:  center;
    background-size: cover;
    background-repeat: no-repeat;
}
.box-produzione{
    padding-left: 1rem;
    padding-right: 1rem;
}

.video-background-content {
    position: relative;
    z-index: 2;
    padding: 0;
}
.box-vid-prodotti {
    padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
}
.sp-txt-prod {
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
}
.sp-sez-soria {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.sottitolo-tessuti {
    font-size: 7vw;
    line-height: 7vw;
}
.titolo-prodotti {
    font-size: 20vw;
}


.titolo-storia {
    font-size: 20vw;
    color: #fff;
    font-weight: 300;
}
.sottotitolo-storia {
    font-size: 9vw;
    line-height: 9vw;
    color: #DCD3C2;
    font-weight: 300;
    padding-bottom: 2rem;
}
.data-storia {
    font-size: 20vw;
    line-height: 8vw;
    color: #DCD3C2;
    opacity: 0.4;
    font-weight: 100;
    padding-bottom: 2rem;
}
.back-storia {
    background-image: url(../img/storia.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 40vh;
}
.mb-2 {
    margin-bottom: 0rem!important;
}
.h1-mobile{
    color: #fff;
    padding-top: 55vh;
    font-size: 6vw;
    text-align: right;
}
.back-riga3 {
    background-image: url(../img/back-riga3_animated.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.back-filo-mobile {
    background-image: url(../img/filo-mobile_animated.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.video-background-holder video {
    background-color: #3C3C3C;
    opacity: 0.5;
    transform: translateX(-58%) translateY(-50%);
}

.titolo-pag{
    font-size: 9.5vw;
    line-height: 6vw;

}
.sottotitolo-pag{
    font-size: 5.5vw;
}

.data-storia-pag {
    font-size: 19vw;
    line-height: 0.2vw;
    padding-bottom: 3rem;
}

.titoli-h2 {
    font-size: 10.5vw;
    line-height: 13vw;
}
.icn-prodotti{
    width: 6rem;
}

.sp-txt-prodotti{
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
}
.back-pag-prodotti{
    margin-top: 2rem;
    height: 30vh;

}
.sp-down-img {
    padding-top: 2rem;
}
.nome-tessuto {
    font-size: 12vw;
    line-height: 6vw;
    color: #DCD3C2;
    font-weight: 300;
    padding-bottom: 1rem;
}
.back-tessuto {
    height: 30vh;
}
.titolo-pag-tessuti {
    font-size: 24vw;
    color: #837867;
    font-weight: 300;
    text-align: right;
    line-height: 9vw;
}
.sottotitolo-pag-tessuti{
    font-size: 7vw;
    line-height: 0vw;
}
.sottotitolo-pag-storia{
    font-size: 6vw;
    line-height: 3vw;
    color: #DCD3C2;
    text-align: right;
    font-weight: 300;
}
.firma{
    padding-right: 3rem;
    padding-top: 2rem;
}
}