/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */



@font-face 	{font-family:'Baskervville-VariableFont_wght';font-weight:normal;font-display:swap;src:url('./font/Baskervville-VariableFont_wght.ttf') format('ttf');}
@font-face 	{font-family:'Baskervville-Italic-VariableFont_wght';font-weight:100;font-display:swap;src:url('./font/Baskervville-Italic-VariableFont_wght.ttf') format('ttf');}
@font-face 	{font-family:'JosefinSans-Regular';font-weight:400;font-display:swap;src:url('./font/JosefinSans-Regular.ttf') format('ttf');}
@font-face 	{font-family:'JosefinSans-Bold';font-weight:600;font-display:swap;src:url('./font/JosefinSans-Bold.ttf') format('ttf');}
@font-face 	{font-family:'JosefinSans-SemiBoldItalic';font-weight:600;font-display:swap;src:url('./font/JosefinSans-SemiBoldItalic.ttf') format('ttf');}
@font-face 	{font-family:'JosefinSans-ThinItalic';font-weight:100;font-display:swap;src:url('./font/JosefinSans-ThinItalic.ttf') format('ttf');}
@font-face 	{font-family:'JosefinSans-Thin';font-weight:100;font-display:swap;src:url('./font/JosefinSans-Thin.ttf') format('ttf');}
@font-face 	{font-family:'SourceSansPro-Italic';font-weight:normal;font-display:swap;src:url('./font/SourceSansPro-Italic.ttf') format('ttf');}
@font-face 	{font-family:'SourceSansPro-Bold';font-weight:600;font-display:swap;src:url('./font/SourceSansPro-Bold.ttf') format('ttf');}
@font-face 	{font-family:'SourceSansPro-Regular ';font-weight:normal;font-display:swap;src:url('./font/SourceSansPro-Regular.ttf') format('ttf');}
@font-face 	{font-family:'Poppins-Regular';font-weight:400;font-display:swap;src:url('./font/Poppins-Regular.ttf') format('ttf');}
@font-face 	{font-family:'Poppins-Bold ';font-weight:600;font-display:swap;src:url('./font/Poppins-Bold.ttf') format('ttf');}
@font-face 	{font-family:'Poppins-Italic';font-weight:100;font-display:swap;src:url('./font/Poppins-Italic.ttf') format('ttf');}

html                                                    {scroll-behavior: smooth;box-sizing: border-box;overflow-x:hidden;}
body                                                    {display: block;width: 100%;margin:0;padding: 0;min-width: 360px;font-family:Baskervville-VariableFont_wght, serif;/*overflow-y: scroll;*/overflow-x:hidden;}
.app {min-height: 100svh;}
@supports (height: 100dvh) {
  .app {
    min-height: 100dvh;
  }
}

/* base */
body, nav, menu, ul	                                    {margin:0;padding:0;}
header, main, footer, aside, section, article, h1, h2, h3
				                                        {position:relative;display:block;box-sizing:border-box;}
li                                                      {list-style-type: none;}
div.img {display:block;position:relative;width: 100%;height: 100%;z-index: 0;/*overflow:hidden;*/
    &.banner{z-index: 99;background:transparent;}
    & img {width: 100%;height: 100%;object-fit:cover;/*object-position: 50% bottom;aspect-ratio: 4/3;*/}

}
a, button {cursor:pointer;}

a {text-decoration: none;
    &.link{display: flex;align-items:center;justify-content:center;color:#1D1D1B;text-transform: uppercase;font-size:7pt;font-family:JosefinSans-Regular, sans-serif; text-decoration: none;border:3px solid #d1d3d4;cursor: pointer;background-color:#b6b7b7;border-radius:45.38px;width:120px;height:40px;/*transition :all .3s ease;*/
        /* &:hover {border-bottom:2px solid #959595;color:#959595;} */
        &.scorpi {color:#181817;border-bottom:3px solid #181817;padding-bottom: 9px;margin-top: 1px;}
    }
}

/*ANIMATION*/
@keyframes bounce {
    0%, 100% {transform:translateY(0);}
    50% {transform:translateY(-10px);}
}
a.bounce-hover:hover {animation:bounce 0.5s ease-in-out;}
@keyframes shrink {
    to {transform:scale(0.95);}
}
.shrink:hover {animation:shrink 0.2s forwards;}
@keyframes rotateIn {
    from {opacity: 1;}
    to {opacity: 0.4; }
}
.rotate-in:hover {animation:rotateIn 1s ease-in-out;}
@keyframes colorShift {
    from {color:#c4c4c4;transform: scale(1);}
    to {color:#181817;transform: scale(1.1);}
}
.color-shift:hover {animation:colorShift 1s infinite alternate;}

@keyframes floating {
    0%, 100% { transform:translateY(0);}
    50% { transform: translateY(-10px);}
}
.floating {animation:floating 3s ease-in-out infinite;}
.btn-hover:before,
.btn-hover:after{content: '';position: absolute;left: 0;top: 0;right: 0;bottom: 0;height: 100%;background: #6e5844; z-index: -1;transform: translate3D(0,-100%,0); transition: all .5s;}
.curtainup{transform-style: preserve-3d;}
  .curtainup:before,
  .curtainup:after{transform-origin: center center;transform: scale(1,0);}
  .curtainup:hover:before,
  .curtainup:hover:after{transform: scale(1);border-radius: 0;}
  .btn-hover:hover{color: white;}
.full {width:100%;}
.half {width:100%;}
.radius {border-radius: 50px;}
video {background: #6e6c6c;width: 100%;height: 100%;}
h1 {display:block;width:100%;font-family: "JosefinSans-Regular", sans-serif;font-size: 19pt;text-transform:uppercase;position:absolute;color:#fff;z-index: 9;margin:20% auto;
       &::before {content: "";display: block;position: absolute;bottom: -6px;height: 3px;background-color: #fff;text-align: center;left:0;right:0;margin:0 auto;width:110px;}
       &.title {color:#000;}
}
h2.title {display: block;font-family: "JosefinSans-Regular", sans-serif;font-size: 19pt;text-transform:uppercase;margin-top:51px;color:#000;max-width:200px;
  &::before {content: "";display: block;position: absolute;bottom: -8px;height: 5px;background-color: #000;text-align: center;width:287px;}
}
b   {display:inline-block;color:#2a2b2b;font-family: Baskervville-VariableFont_wght, serif;}
.hidden {display:none;}
.play {display:inline-block;width: 100px;height:100px;position: absolute;top:40%;left: 40%;padding:0;text-align: center;background: url(/img/play.svg)center no-repeat;border:none;background-size: 100px;z-index: 1;border-radius: 50%;transition: opacity .3s ease;
    &:hover {opacity: 0.3;}
}
button {display: flex;align-items:center;justify-content:center;color:#1D1D1B;text-transform: uppercase;font-size:7pt;font-family:"JosefinSans-Regular", sans-serif; text-decoration: none;border:3px solid #d1d3d4;cursor: pointer;background-color:#b6b7b7;border-radius:45.38px;width:120px;height:40px;
    &.top {border: none;outline: none;background:url(/img/top.svg) right no-repeat;text-transform: uppercase;font-size: 15px;color: #1D1D1B;padding: 10px 30px;position: absolute;right: 5%;bottom: 0px;cursor: pointer;z-index: 1;transition: all .3s ease;background-size:15px;display:none;
        &:hover {background-position-y: 20px;}
    }
}

.prev {background: url(/img/left-btn.png) center no-repeat;background-size: 32px;}
.next {background: url(/img/right-btn.png) center no-repeat;background-size: 32px;}

.wrapper {max-width: 1600px;margin: 0 auto;}
p.transform {font-family: "Gotham Book", sans-serif;text-transform: uppercase;font-weight: 100;color:#181817;}
span {font-family: "JosefinSans-Regular", sans-serif;font-size: 9pt;color:#fff;position:absolute;bottom:6px;left:0;right:0;z-index:99;}
/* HEADER */
body > header {width:100%;background-color: #fff;padding: 15px 0px 15px 0px;display:flex;align-items:flex-start;justify-content:space-between;height:85px;  /*position: sticky;top: -50px;*/z-index: 99;transition: top .5s ease;
    &::before, &::after {content: '';position: absolute;left: 0px;top: 50px;width: 50px;height: 50px;background: transparent;border-radius: 20px 0 0 0;box-shadow: -10px -10px 0 0 #fff;z-index: 99;}
    &::after {right: 0;left: unset;top: 50px;border-radius: 0 20px 0 0;box-shadow: 20px -10px 0 0 #fff;}
    & nav {
        & a {box-sizing: border-box;position: relative;margin: 6px 0;padding-right: 10px;text-transform:uppercase;font-size: 16px;text-decoration: none;white-space: nowrap;color:#fff;
            &.storie {display:none;}
        }
        &.nav-down {z-index: 99;box-sizing: border-box;display:flex;align-items:center;justify-content:space-between;position:fixed;/*bottom:-60px;*/top:100dvh;right:0px;width:100%;height:60px;padding: 0px 0px; border-top-left-radius: 20px;border-top-right-radius: 20px;background-color: #000;pointer-events: auto;transition:margin 0.5s ease, right 0.5s ease;
            & a {position: relative;width: 20%;text-align: center;font-size:12pt;font-family:"JosefinSans-Regular",sans-serif;
                &::before {content:"";display: block;width: 100%;height: 20px;position:relative;margin:0 auto;margin-bottom:5px;transform:scale(1);}
                &.chi-siamo::before     {background: url(/img/user-group.svg) center no-repeat;}
                &.menu::before          {background: url(/img/bars-solid.svg) center no-repeat;}

                &.home::before          {background: url(/img/house.svg) center no-repeat;}
                &.visione::before, &.portfolio::before       {background: url(/img/eye-regular.svg) center no-repeat;}
                &.storie::before        {background: url(/img/storie.svg) center no-repeat;}
                &.servizi::before       {background: url(/img/servizi.svg) center no-repeat;}
                &.search::before       {background: url(/img/search.svg) center no-repeat;}
                &:hover::before{transform:scale(1.1);}
                &.close {display: none;}
                &.storie {display:none;}
            }
            & label.search {display: none;position:relative;max-width: 168px;height: 35px;background: #fff;border-radius: 12px;box-sizing: border-box;margin-left: 20px;
                &.active {display: block;}
            }
            & input {display: block;position: absolute;top:8px;left:10px;background: #f7f7f7;font-family: "JosefinSans-Regular", sans-serif;visibility:visible; outline: none;border: none;z-index: 104;padding: 5px 10px 4px 10px;font-size: 16px;height: 20px;max-width: 122px;box-sizing: border-box;transition: max-width .3s ease;}
            &::after {content:"";display:block;width: 100%;height:100%;position: absolute;top:0;right: -225px;left: 0;opacity: 0.8;z-index: -2;border-top-right-radius: 20px;transition: right 0.5s ease}
            &.active{position:absolute;bottom: unset;right: 0;top: 50px;width:145px;background:transparent;bottom:unset;display:block;line-height:22px;padding-top:30px;padding-left:20px; z-index: 100;transition: right 2s ease;height:100%;
                &::after {content:"";display:block;width: 100%;height:100%;position: absolute;top:0;right:0;background: #fff;opacity: 0.8;z-index: -2;border-top-right-radius: 20px;transition: right 2s ease;padding-bottom:100%;}
                & label.search {display:none;
                    &.active {display: block;}
                }
                & input {
                    &::placeholder {color:#181817;}
                    &:hover {max-width: 130px;}
                }
                & ~ a.menu{right: 0;
                    &::before {background: url(/img/close.svg) center no-repeat;right: 20px;position: absolute;top: 0px;background-size: 15px;}
                }
                & a {display:block;font-family:"JosefinSans-Regular",sans-serif;color:#1D1D1B;font-size: 16px;text-align: left;padding-left: 0px;line-height: 32px;transition: all .3s ease-in-out;
                    &:before {display:none;}
                    &:hover {color:#A0A09F;}
                    /* &.home {display: none;} */
                     &.storie {display:none;}
                }
               
            }
            &.inactive {margin-top: -60px;/*padding-bottom: env(safe-area-inset-bottom);*/transition: margin .3s ease-in-out;
                &::after {display:none;}
            }
        }
        &.nav-top {display: flex;align-items:center;justify-content:space-between;/*margin-top: 0px;overflow:hidden;height: 32px;*/width: 100%;margin-top:-13px;position:relative;
            & div {display: flex;height:40px;/*margin-top:-20px;*/
                &.marquee-content {flex-shrink: 0;position:absolute;top:15px;  white-space: nowrap;
  will-change: transform;
  animation: scroll-left 15s linear infinite;}
            }
            & a {font-family :"JosefinSans-Regular", sans-serif;color:#1f2020;height: 8px;display:contents;
                &::after {content: "";display: inline-block;height: 20px;width: 2px;margin-left:20px;background-color: #1f2020;margin-right:20px;}
            }
            &::-webkit-scrollbar {height: 2px;}
            &::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);background-color: #2e2d2c;} 
            &::-webkit-scrollbar-thumb {background-color:#6e6c6c;outline: none;-webkit-box-shadow: inset 0 0 6px  rgba(0, 0, 0, 0.1);}
        }

        &.social {display: flex;padding-left:20px;background-color:#2E2D2C;z-index: 98;display:none;
            & a::before {content:"";display: block;width: 20px;height: 20px;/*transform:scale(1);transition:all .3s ease;*/ }
            & a.facebook::before {background:url(/img/facebook-f-brands-solid.svg) center no-repeat;background-size: 8px;}
            & a.twitter::before {background:url(/img/twitter.svg) center no-repeat;background-size: 13px;} 
            & a.instagram::before {background:url(/img/instagram-white.svg) center no-repeat;background-size: 13px;}
            & a.youtube::before {background: url(/img/youtube.svg) center no-repeat;background-size: 13px;}
            & a.behance {display: none;}
            & a.linkedin {display: none;}
            & a:hover::before{transform:scale(1.1);}
        }
    }
    & .header-down {margin-top: 35px;height: 62px;padding-left:20px;box-sizing:border-box;display:flex;align-items:center;min-width:100%;background-color:#000;border-top-left-radius:30px;border-top-right-radius:30px;}
    & a.logo {z-index: 1;z-index: 99;
        &::before {content:"";display: block;width: 118px;height: 25px;background: url(/img/logo-header.png) center no-repeat;background-size:100%;}
    }
    & a.menu{z-index: 100;top:70px;right:20px;position: absolute;
        &::before {content:"";display: none;width: 25px;height: 25px;position:relative;margin:0 auto;margin-bottom:5px;background: url(/img/bar-menu.svg) center no-repeat;display: block;background-size: 25px;}
        &.close{
            &::before {background: url(/img/close.svg) center no-repeat;display: none;}
        }
    }
}
@supports (height: 100dvh) {
  .nav-down.inactive {
    min-height: 60px; 
    height: auto;       
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Safari специфичен fallback */
@supports (-webkit-touch-callout: none) {
  .nav-down.inactive {
    transform: none; 
  }
}
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.letter {
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    transition: transform 5s ease, opacity 1s ease;
  }
  span.scatter {
    position: relative;
    transform: translate(0, 0);
    transition: transform 5s ease-out, opacity 5s ease-out;
    transform:scale(1.5);
    opacity: 1;
  }

& .wrapper-content {display: block;max-width: 1170px;margin:0 auto;}
body > main {/*overflow-x:hidden;*//*background:#fff;*/overflow:hidden;

    &> div.img {height: 400px;}
    & .wrapper {margin:0 auto;}

    & section {
        & article {padding: 20px;
            &.title {background-color: #1f1f20;color: #000;text-align: center;width: 100%;display: flex;align-items: center;justify-content: center;
            &.full {background-color: unset;}}
        }
        &.banner-title {margin: 0 auto;display:flex;flex-wrap:wrap;text-align:center;position: relative;top:0;/*z-index: 2;*/
            & article {
               &.position {
                & pre {white-space: wrap;}
                & p {line-height: 28px;text-align: left;}
                & .link {text-align: left;float: left;margin-bottom: 20px;}
               } 
            }
            & div.img {/*height:470px*/height:auto;border-radius: 0;}
            &.half {
                & article.title {margin-top:-180px;/*width:100%;*/}
                &.left {text-align: center;display:block;
                    & div.img {position: absolute;}
                    & article {text-align: left;}
                    & article.title {text-align: left;max-width: 80%;}
                    & p {text-align: left;}
                }
            }
            &.top {margin-top:0px;width:100%;top:0px;z-index: 1;
                & article.title {padding: 20px;
                    & h2 {margin-top:0px;}
                }
            }
        }
        &.info {text-align: left;padding:40px 20px 40px 20px;z-index: -1;position: relative;
            & pre {white-space: wrap;}
            & h1 {color:#312513;/*width: 65%;*/}
            & p {width:100%;font-size: 15px;color: #301F15;font-family: "Gotham Medium", sans-serif;}
            /* &.right {text-align: right;} */
        }
        &.horizontal {padding: 50px 20px;text-align: left;display:block;width: 100%;
                & div.img {position: relative;width:100%;max-width:600px;height: auto;}
                & div.text{ width:100%;font-size: 18px;line-height: 28px;
                    & h2 {position: relative;left:unset;color:#A0A09F;font-size: 27px;
                        &::before {bottom: -5px;}
                    }
                    & p {margin: 0;font-family: "Gotham Medium", sans-serif;}
                }
            }
        &.main {/*padding:20px;*/
            &.margin {margin-top:-4px;}
             &.background {z-index: 98;
                & img {width: 100%;position: relative;z-index: 99;width:270px;margin-top:310px;}
                & article.title {background-color:#fff;}
                &.left {
                    & article.title{
                        & div.text {
                            &.half {
                                & h1 {margin-bottom:35px;text-align:left;margin-top:25px;
                                    &::before {right:unset;}
                                }
                            }
                        }
                    }
                    & img {float: right;right:-38px;margin-top:-155px;width:270px;}

                }
                & article.title{
                    &.right {width:85%;
                        &.full {position: absolute;top: 20px;right: 0;}
                    }
                }

                & a.link {margin-top:40px;box-shadow: 3px 7px 17px 0px #989696fa;}
            } 
            & article.title {
                & h1 {padding: 0px;margin:0;
                    &::before {background-color: #000;}
                }

                & div.img {height:100px;margin:20px 0px;border-radius:0;background:transparent;z-index: 1;
                    & img {opacity: 1;}
                }
                & div.text {
                     & h1 {font-size:10pt;line-height:unset;color:#fff;text-transform:lowercase;position:relative;
                        &::before{display:none;}
                        & b{font-size:18pt;font-style:italic;font-family: Baskervville-Italic-VariableFont_wght, serif;text-transform: uppercase;color:#fff;font-weight:100;}
                    }
                    &.left {text-align: left;}
                    &.half {
                        & h1 {color:#000;font-size:18pt;font-family: "JosefinSans-Regular", sans-serif;text-transform: uppercase;
                            &::before {display:block;left:unset;right:0;}
                        }
                        & pre {font-size:12pt;font-family: "Baskervville-VariableFont_wght", serif;margin-bottom:20px;}
                    }
                    & pre {line-height: 28px;text-align:left;font-size:12pt;font-family: "Baskervville-VariableFont_wght", serif;margin:0;white-space: wrap;color:#2a2b2b;}
                }
                &.right {text-align: right;padding-top:20px;background:#fff;
                    & h1 {text-align: right;}
                    & div.img {height: auto;margin:0px 0px;}
                    & div.text {
                        & pre {text-align: right;}
                    }
                    & a.link {text-align: right;float:right;margin-top:20px;}
                }
                & video {height: auto;} 
                &.full {
                    & h1 {margin-bottom:22px;}
                }
            } 
            & section.title {display:flex;flex-wrap:wrap;
                & article.title {background-color: unset;display: block;}
                    & header {position:relative;padding: 0px 20px;
                        & h1 {color:#000;}
                        & b {color:#000;}
                    }
                & div.img {
                    &.banner {height: 57px;
                        &::before {height: 100px;background-size: 88%;}
                    }
                }
                & .full, & .half {flex-wrap:nowrap;justify-content:space-around;
                    & div.img {
                        & img {object-fit: contain;height: 100%;}
                    }
                   & div.video {width:100%;height:200px;position: relative;overflow:hidden;
                    & img {width: 100%;}
                    & .play {width:60px;height: 60px;background-size: 60px;}
                }
                   & div.text {flex:unset;width: 100%;text-align: center;
                    & p.hidden-text {  max-height: 0;overflow: hidden;transition: max-height 0.5s ease;}
                    &.active p.hidden-text {max-height: 100%;}
                    & h2 {font-size: 25px;left:unset;font-family: "Gotham Bold", sans-serif;}
                    & a.link {float: right;text-transform: none;}
                    & div.readmore {/*float: right;*/font-size: 16px;cursor: pointer;border-bottom: 2px solid #1D1D1B;font-family: "Gotham Medium", sans-serif;display: inline-block;position: relative;float:right;bottom: 16px;
                        &:hover {color:#d24747;}
                    }
                }
                    
                    & blockquote {margin:0;
                        & p::before {content: open-quote;font-weight: bold;font-size:35px;color:#e15656;;} 
                        & p::after {content: close-quote;font-weight: bold;font-size:35px;color:#e15656;;}
                    } 
                }
                & .half {margin-top:50px;display:flex;flex-wrap:wrap;
                    &.bottom {transform: translateX(-100%);display: none;}
                    &:nth-of-type(2) {flex-wrap:wrap-reverse;}
                    & h2 {position: relative;color:#000;margin:0;padding:0;text-align:center;
                        &::before {margin:0 auto;left:0;right: 0;bottom: -15px;}
                    }
                    & div.text.bottom p{font-family:"Helvetica-Light",sans-serif;}
                }
                & .full {display:flex;flex-wrap:wrap;
                    &.wrap {flex-wrap:wrap-reverse;}
                    & div.text {text-align: left!important;}
                }
                &.scroll {margin:0 auto;width:100%;/*overflow:hidden;*/background: url("../img/chi-siamo.png " )center no-repeat ;background-size:360px;background-position-y:580px;
                        & article.title {width:100%;
                            &.right {position:relative;padding-top:560px;margin-bottom:50px;}
                            & p{font-size:12pt;text-transform:uppercase;}
                        }
                        & img {right:0;position: relative;}
                        & pre.right {text-align:right;}
                        & div.text {max-width:980px;
                            &.right {
                                & h2.title {text-align: right;max-width:unset;
                                    &::before{right:0;}
                                }
                            }
                        }
                    } 
            }    
            .img.banner {overflow: visible;position: relative;height:74px;top:55px;white-space: nowrap;transform: translateY(-50%);transition: transform 0.1s ease-out; 
                & h1, & b {font-size: 65px;color: #f8efe9;margin: 0;white-space: nowrap;}
                & span {display:inline-block;white-space: nowrap;font-size: 65px;color: #f8efe9;margin: 0;position:absolute;transition: transform 0.1s ease-out;}
                &.right{right:100%;} 
                 &.left{left: -100%;}
                    
            } 

            
        }
        &.gallery {text-align: center;background-color:#1f2020;
            & .contain {overflow: auto;scrollbar-width: none;
                & div.all-slide {display: flex;transition:transform .3s ease;
                    & article {width: 100%;min-width:100%;padding:0px;
                        & div.img {height:300px;background:#fff;overflow:hidden;
                            & img {opacity: 1;object-fit:unset;height: auto;}
                        }
                        & div.text {position: relative;color: #000;background-color:#fff;font-family:JosefinSans, sans-serif;padding:5px 10px;
                            & p {color:#000;font-size: 12pt;
                                &.transform {color:#000;font-size: 13pt;text-transform:uppercase;}
                            }
                        }
                    }
                }
            }
            & button {width: 50px;height: 50px;border:none;display: inline-block;transition:all .3s ease;
                &:hover {opacity: 0.4;}
            }
        }
        &.carousel {
            & .contain {overflow-x: auto;height:700px;overflow-y:hidden;
                & div.all-slide {display:flex;
                    & article {transform: scale(0.8);transition:transform .3s ease;text-align:center;min-width:100%;padding:0px;
                        & div.img {width: 100%;overflow:hidden;margin:0 auto;height:700px;background-color: #dbb633;
                            & img {opacity: 1;height:100%;object-fit: cover;position:relative;}
                        }
                        & div.text {position:absolute;bottom:50px;left:0;right:0;text-align:center;width:200px;margin:0 auto;top:50%;bottom:50%;
                            & b {color:#000;}
                            & h1 {text-align: center;margin:0 auto;color:#1f1f20;font-weight:100;display: flex;align-items: center;justify-content: center;
                                &::before {display:none;}
                            }
                        }
                    }
                }
                & div.all-slide {  display: flex;justify-content: center;align-items: center; position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);user-select: none;width:100%;height:100%;
                    & article {min-width:unset;position:absolute;transform: scale(0.5) translateX(-50%);width: 100%;transition: all 300ms ease-in-out;z-index: -1;opacity: 0;
                        &.active {opacity: 1;z-index: 2;transform: scale(1) translateX(0);
                        }
                        &.prev {z-index: 1;opacity: 0.25;transform: translateX(-150%) scale(0.8); 
                        }
                        &.next {z-index: 1;opacity: 0.25; transform: translateX(150%) scale(0.8);}
                    }
                }
            }
             & button {width: 50px;height: 50px;border:none;display: inline-block;transition:all .3s ease;position:absolute;bottom:30px;left:0;right:0;margin:0 auto;
                &:hover {opacity: 0.4;}
                &.prev {left:-50px;}
                &.next{right:-50px;}
            }
            /* & button {width: 50px;height: 50px;border:none;display: inline-block;position: absolute;bottom:60px;border-radius:50%;
                &.prev {left:30px;background:#D8D3CA url(/img/prev.svg) center no-repeat;background-size: 15px;}
                &.next {right:30px;background:#D8D3CA url(/img/next.svg) center no-repeat;background-size: 15px;}
            } */
        }
        &.contact {/*display:block;*/display: flex;flex-wrap: wrap-reverse;background: #4a4a49;padding: 20px;
            & article.title {background: transparent;position:relative;top:unset;left:unset;right: unset;text-align:left;height:unset;margin-top:35px;
                & pre {margin:0;margin-bottom:100px;white-space: wrap;}
                & h1 {padding:0px;margin:0;opacity: 1;color:#efefe4;line-height:40px;
                    &::before {content: "";display: block;position: absolute;bottom: -33px;width: 43px;height: 3px;background-color: #f15a57;}
                }
            }
            & div.video {height: 600px;width: 100%;margin: 0px auto;border-radius:0px;
                /* &::before {content: "";display:block;background: url(./img/video-form-m.webp) center no-repeat;width: 100%;height: 100%;position: absolute;top: 0;margin: 0 auto;left: 0px;right: 0px;background-size: cover;}  */
                & video {border-radius:0px;object-fit: cover;}
                &.radius {border-radius: 20px;
                    & video {border-radius: 20px;}
                }
                & img{position: absolute;left: 0;right: 0;width: 100%;height: 100%;object-fit: cover;}
            }
        }
        &.box {margin-bottom:60px;
            & article.title {background-color: unset;display:flex;flex-wrap:wrap;padding-top:0px;padding-bottom:0px;
                &.reverse {flex-wrap:wrap-reverse;}
                & div {display: flex;align-items: center;justify-content: center;border-radius:50px;border:3px solid #1f1f20;padding:35px 45px;height:200px;width: 100%;font-size: 14pt;text-transform: uppercase;font-family: SourceSansPro-Regular, sans-serif;
                    & ul {margin: 0px auto;display:block;box-sizing:border-box;}
                    &.icon {background-color: #1f2020;border:3px solid #1f1f20;margin-top:20px;margin-bottom:20px;display:block;
                        & img {width: 175px;margin: 33px auto;display:block;box-sizing:border-box;}
                        & p {color:#f1efea;margin:0px;}
                    }
                }

            }
        }
        &.brand {background-color: #eeeae7;padding:40px;text-align:center;
            & h3 {color:#070202;font-family:Baskervville-VariableFont_wght, serif ;font-size:14pt;text-transform:uppercase;}
            & ul {max-width:1170px;margin:0 auto;display: flex;align-items:center;flex-wrap: wrap;gap: 20px;justify-content:space-between;
                & li {padding: 0px;max-width: 46%;box-sizing: border-box;
                    & img {width:100%;}
                }
            }
        }
        &.video {min-height:500px;max-height: 796px;height: 100%;width:100%;padding: 0;margin: 0;background-color:#dbb633;text-align:center;
            & h1 {text-align: center;margin: 0 auto;color: #1f1f20;font-weight: 100;display: flex;align-items: center;justify-content: center;position:absolute;top:50%;bottom:50%;
                &::before{display:none;}
            }
            & video, & iframe {width: 100%;background-color:#dbb633;text-align: center;height: 100%;position: absolute;display: block;top: 0;left: 0;}

        }

    }
}



@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(100vw); }
}
@keyframes popUp {
    0% {transform:scale(0.9);}
    50% {transform:scale(1.1);}
    100% {transform:scale(1);}
}
.pop-up {animation:popUp 0.4s ease;}
 & form {max-width:830px;margin:0 auto;text-align:left;
         & input, & textarea {width: 100%;background: #fff;border: none;border:3px solid #d1d3d4;padding:10px 15px;box-sizing: border-box; color:#58595b;font-family: JosefinSans-Thin,sans-serif;font-size:10.38pt;box-shadow: 20px 21px 35px #2c2d2d9e;margin-left:0px;margin-bottom:25px;border-radius:4px;}
         & input[type="checkbox"] {width: auto;min-width:20px;/*min-width:224px;*/height: 20px;margin-bottom:0px;/*margin-top:30px;*/ margin-right: -80px;margin-left: 0px;/*opacity:0;position:absolute;*/box-sizing:border-box;z-index:1;cursor:pointer;padding:0;box-shadow: 20px 21px 35px #61676791;}
         & button {display: flex;align-items:center;justify-content:center;color:#1D1D1B;text-transform: uppercase;font-size:7pt;font-family:"JosefinSans-Regular", sans-serif; text-decoration: none;border:3px solid #d1d3d4;cursor: pointer;background-color:#b6b7b7;border-radius:45.38px;width:120px;height:40px;
               &:before {content: '';position: absolute;bottom: 0;left: 0;width: 0%;height: 100%;background-color:#f8efe9;transition: all .3s;border-radius: 50px;z-index: -1;}
               &:hover {color: #000;
                 &:before {width: 100%;}
             }
        }
        & textarea {min-height:137px;}
		& label.captcha-checkbox {display:flex;
			& span {padding-left:100px;}
		}
        & label.check {font-size: 11px;display:inline-block;color:#dedede;cursor: pointer;margin-top:38px;font-family:Noto-Sans,sans-serif;width:100%;
            &::before {content:'';display:inline-block;width:11px;height:11px;color:#607D8B;text-align:center;line-height:35px;border-width:2px;vertical-align:center;border:1px solid#C0BDCC;background-color:#fff;margin-right:10px;}
        }
		& input[type="checkbox"]:checked + label.check::before {background:#fff url(/img/check.svg)center no-repeat; font-size:16px;border:unset;opacity: 1;border:1px solid#607D8B;} 

    }
body >footer {background: #fff;/*margin-top: -40px*/;color:#1f2020;padding-bottom:75px;
    & article.title {background-color: #555656;text-align:center;border-bottom-left-radius:30px;border-bottom-right-radius:30px;padding:30px 30px 60px 30px;
        & h2 {font-size: 14pt;font-family: SourceSansPro-Regular, sans-serif;font-weight: normal;color:#fff;text-transform:uppercase;}
        & p {font-size: 12pt;font-family: Baskervville-VariableFont_wght, serif;font-weight: normal;color:#fff;line-height:13pt;}
    }
    & section {display: flex;align-items: center;justify-content: space-between;padding:30px 20px;padding-bottom:0;
        & p{font-family:Poppins, sans-serif;font-size:9pt;color:#1f2020;}
        & a {
            &.logo::before {content:"";display: block;width: 118px;height: 25px;background: url(/img/black-logo.png) center no-repeat;background-size:100%;}
            &:hover {color:#fff;}
        }
        & span {color:#cfc6c4;font-family:"NotoSans-Bold",sans-serif;font-weight: bold;text-transform: uppercase;}
        &:nth-of-type(2) {width: 100%;display:block;padding-bottom:20px;padding-top:0px;
            & article {display: block;}
            /* & p {font-size: 8pt;font-family: Baskervville-VariableFont_wght, sans-serif;color: #1f2020;font-weight: normal;white-space: nowrap;} */
            & a {font-family:Poppins, sans-serif;font-size:9pt;color:#1f2020;}
            & > a.right{position: absolute;margin: 0;padding-right: 13px;color:#fff;text-transform:uppercase;font-family:"NotoSans-Bold",sans-serif;scroll-behavior: smooth;right:0;bottom: 10px;
                &::after {content: "";display: block;width: 10px;height: 10px;background: url(/img/arrow-right.svg) center no-repeat;rotate: 0deg;position: absolute;background-size: 7px; top: 0px;right:0px;transition: all .3s ease-in-out;}
                &:hover::after {rotate: 45deg;transition: all .3s ease-in-out;}
            }
        
        }
    }
    & nav {display: block;
        & a {display:block;font-size: 12px;color:#626359;font-family: "Gotham Medium", sans-serif;text-transform: uppercase;line-height: 23px;
   
        }
        &.social {display: flex;align-items: center;justify-content: space-around;;width: 140px;background: #555555;border-radius:50px;padding:6px 10px;box-shadow: 20px 21px 35px #61676791;
            & a {width:34px;
                &::before {content: "";display:block;height: 26px;/*transform:scale(1);transition:all .3s ease;*/}
                &.facebook::before {background:url(/img/facebook.png) center no-repeat;width: 100%;background-size: 34px;}
                &.instagram::before {background: url(/img/youtube-concepto.png) center no-repeat;width: 100%;background-size: 26px;border-radius: 0px;}
                &.linkedin::before {content: "";display:block;background:url(/img/linkedin-concepto.png) center no-repeat;width: 100%;background-size: 26px;}
                &.behance::before {content: "";display:block;background: url(/img/behance-concepto.png) center no-repeat;width: 100%;background-size: 26px;}
                &.twitter {display: none;}
                &.youtube {display: none;}
                &.facebook {display: none;}
                /* &:hover::before{transform:scale(1.1);} */
            }
        }
    }
    & button {text-transform: capitalize;font-size: 9pt;margin-top:30px;}
}
@media only screen and (min-width: 430px) {
    body > main {
        & section {
            &.main{
                & section.title {
                    &.scroll {
                        background-position-y: 530px;
                    }
                }
            }
        }
    }
}
@media only screen and (min-width: 470px) {
    body > main {
        & section {
            &.main{
                & section.title {
                    &.scroll {
                        background-position-y: 500px;
                    }
                }
            }
        }
    }
}
@media only screen and (min-width: 500px) {
    body > main {
        & section { 
                &.info.right {display: block;padding:30px 24px 24px 0px;max-width:100%;margin:unset;z-index: 1;background-color: #fff;position:relative;right: 0;width:100%;
                    &::after {content: '';display: inline-block;width:100%;height: 100%;background-color: #fff;z-index: -1;position: absolute;left:0;right: 0;top:0;}
                    & p {max-width: 100%;text-align: right;font-size: 15px;font-family: "Gotham Bold", sans-serif;font-weight:bold; color:#312513;letter-spacing: 0.69px;line-height: 29px;margin:0;}
                }
            &.main {
                & article.title {
                    &.right {display:flex;align-items:center;}
                }
                &.background {
                        & img {width:300px;margin-top:144px;}
                }
                & section.title {
                    & .full {display: flex;justify-content:space-between;
                        & div.img, & div.text {width:47%;}
                    }
                    & .full, & .half {
                        & div.video{width: 47%;}
                        & h2 {margin-top:0px;}
                      }  
                     &.scroll {background-position-y: center;
                        & article.title {
                            &.right {padding-top:680px;}
                        }
                    } 
                }
            }
            &.contact {padding-top: 60px;padding-bottom: 60px;
                & article {margin:0 auto;margin-top:60px;
                    &.title {margin: 0 auto;}
                }
                & h1 {margin-top:0;padding:0;}
                & form {
                    & button {width: 155px;}
                }
            }
			&.brand {
				& h3 {font-size:19pt;}
			}
        }
    }
    body > footer {
        & section {
          &:nth-of-type(2) {
            & > a.right{position:absolute;right: 0;bottom: 12px;}
          }
        }
    }
}
@media only screen and (min-width: 640px) {
    body > main {
        & section { 
            &.banner-title {
                &.half {
                    & article.title{
                        & h1 {text-align: center;}
                        & h2.title {text-align: center;display:inline-block;
                            &::before {margin: 0 auto;left:0;right:0;}
                        }
                    }
                }
            }
            &.main {
                & section.title {
                    & .half.bottom {flex-wrap:nowrap;}
                }
            }  
            &.box {
                & article.title{flex-wrap:nowrap;gap:20px;
                    &.reverse {flex-wrap:nowrap;}
                }
            }  
        }
    }    
}
@media only screen and (min-width: 800px) {
    body > header {
        & nav {
            &.nav-down {
                &.active {width: 207px;height:505px;
                    &::after {padding-bottom:0;}
                    & a {padding-left:32px;}
                }
            }
        }
    }
    span {bottom:15px;}
    div.img img {aspect-ratio: auto;}
    div.img.half img {aspect-ratio: 4/3;}
    body > main{
        & section {
            &.banner-title {
                & div.img {/*height: 470px;*/height:470px; }
                & .wrapper-content {position: relative;width: 100%;text-align: left;height:100%;}
                & article.title {/*margin-top:-100px;*/
                    & pre {white-space: pre;}
                    &.small {margin-top:-300px;}
                }
                &.flex .wrapper-content {text-align: center;}
            }
            &.contact {display: flex;align-items: center;
                & article {width:363px;}
            }
            &.main {
                & article.title {
                    &.right {
                        & div.text {padding-top: 0;}
                    }
                }
                &.background {
                    & img {width:400px;margin-top:-58px;}
                    &.left {
                        & article.title {width:70%;}
                        & img {width: 400px;margin-top:-555px;}
                    }
                }
            }
        }
        /* &.storie {
            & .carousel {
                & div.img img {aspect-ratio: 4/3;}
            }
        } */
    }
    body > footer {
        & section {
          &:nth-of-type(2) {
            & > a.right{position:absolute;right: 0;bottom: unset;padding-right: 13px;font-size: 10px;}
          }
        }
    }
}
@media only screen and (min-width: 980px) {
    h2.title{max-width:180px;}
& form {
     & input, & textarea {width: 100%;background: #fff;border: none;border:3px solid #d1d3d4;padding:10px 15px;box-sizing: border-box; color:#58595b;font-family: JosefinSans-Thin,sans-serif;font-size:10.38pt;box-shadow: 20px 21px 35px #2c2d2d9e;max-width:388px;margin-left:0px;margin-bottom:25px;border-radius:4px;}
     & textarea {max-width:790px;min-height:137px;}
    }
    body >header {
        & nav {
            &.nav-down {padding:0px 20px;
                /* &.active {padding-bottom:35.5%;} */
            }
        }
    }

    body > main {
        & section {
            &.main {display:flex;
                &.margin {
                margin-top: 0px;
            }
               &.background {
                & article.title {
                    &.right {
                        &.full {position: relative;top:unset;right:unset;}
                    }
                }
                &.left {
                    & img {margin-top:-155px;}
                }
               }
                & article.title {margin:unset;display:flex;flex-wrap:wrap;
                    &.hidden {display: none;}
                    & div.text{max-width: 890px;
                    }
                    & div.img {flex:1 1 20%;
                        &.banner {flex:1 1 100%;height:300px;
                            &::before {content: "";display: block;width: 100%;height: 300px;background: url(/img/banner-test.png) center repeat;background-size: 50%;}
                        }
                    }
                    &.half {width:50%;margin:0;padding:0px;margin-top:309px;
                        & div.text {position: absolute;top:20%;right:-72px;
                            &.left {right: unset;left:0px;}
                        }
                        & div.img {flex:unset;overflow:visible;height: 400px;
                            & img {object-fit: none;height: 100%;}
                            &.right img {object-position: left;object-fit: contain;}
                            &.left img {object-position: right;object-fit: contain;}
                        }
                    }
                }
                & section.title {
                    &.scroll {background-position-y: 183px;background-position-x: 132px;background-size:645px;flex-wrap:nowrap;
                        & article.title {padding-left:20px;padding-right:20px;padding-top:0;
                             &.right {padding-top:0px;}
                            & p{font-size:16pt;}
                        }
                        & div.text {max-width:980px;
                            & pre {font-size:14pt;margin-top:30px;line-height:20pt;white-space: pre;}
                            &.right {clear:both;
                                & h2.title {text-align: right;max-width:unset;float:right;max-width:180px;
                                    &::before{right:0;}
                                }
                            & p {clear:both;text-transform: uppercase;text-align:right;}
                            & a.link {margin-top:50px;}
                            }
                        }
                    }
                    & .half {
                        & div.text.bottom {display: none;}
                    }
                    & article.title {background-color: unset;display:block;width:auto;text-align:left;
                        &.half.bottom {display: block;transform: translateX(0);
                            & div.text.bottom {transform: translateX(0);display: block;}
                        }
                    }
                }

            }
            &.contact {
                & div.video {height: 100%;height: 540px;}
            }
            &.box {max-width:1780px;margin:0 auto;padding-bottom: 100px;
                & article.title {background-color: unset;display: flex;align-items: center;justify-content: space-around;gap:35px;margin-top: 0px;
                    & div {border-radius:50px;border:3px solid #1f1f20;width: 800px;font-size: 15pt;color:#f1efea;
                        &.icon {background-color: #1f2020;border:3px solid #1f1f20;
                            & img {width: 100%;display:block;box-sizing:border-box;object-position:center;height:100%;object-fit:contain;margin:0 auto;}
                        }
                        & ul {margin:0 auto;
                            & li {font-size:15pt;line-height: 20pt;color:#1f2020;}
                        }
                    }

                }
            }
            &.brand {
                & ul {
                    & li {width:30%;padding:25px;max-width:unset;
                        & img {width: auto;}
                        }
                    }
            }
            &.gallery {
                & .contain {
                    & div.all-slide {gap:20px;
                        & article {min-width:30%;
                            & div.img {height:232px;
                                & img {height:auto;object-fit:unset;}
                            }
                        }
                    }
                }
            }
        }
        button {
            &.top {border: none;outline: none;background:url(/img/top.svg) right no-repeat;text-transform: uppercase;font-size: 20px;color: #1D1D1B;padding: 10px 30px;position: absolute;right: 10%;bottom: 55px;cursor: pointer;z-index: 1;transition: all .3s ease;font-family: "Gotham-Medium",sans-serif;display:block;
                &:hover {background-position-y: 20px;}
            }
        }
        
    }
    body > footer {

        & section{align-items: end;
            &:nth-of-type(2) {display:flex;align-items:center;justify-content:space-between;
                & article {width: 50%; }
            }
        }
        & nav {
            &.social {
                & a {
                    &.facebook::before {background-size: 25px;}
                    &.instagram::before {background-size: 25px;}
                    &.linkedin::before {background-size: 25px;}
                    &.behance::before {background-size: 25px;}
                }

        
            }
        }
    }
}
@media only screen and (min-width: 1024px) {
    body > main {

        & section {
            &.main {
                & section.title {
                    &.scroll{background-size: 65%;}
                }
            }
        }
    }           
}
@media only screen and (min-width: 1100px) {
    body > main {

        & section {
            &.main {
                & section.title {
                    &.scroll{background-size: 65%;background-position-y: 86px;background-position-x: 186px;}
                }
            }
        }
    }           
}                   
@media only screen and (min-width: 1280px) { 
    /* form > input {margin-left:20px;} */
     span {bottom:50px;}
    .play{width: 183px;height:183px;background-size: 183px;}
    body, html {overflow-x: hidden;}
     & a.logo {top:43px;}
     h1 {font-size:33pt;}
    h2.title {font-size:27pt;}
     a.link {width:150px;height:55px;font-size:12pt;z-index: 9999;}
    body > header {padding-top:0px;
        &::before, &::after {top: 112px;width: 97px;height: 97px;background: transparent;border-radius: 50px 0 0 0;box-shadow: -28px -20px 0 0 #2E2D2C;z-index: -1;display:none;}
        &::after {border-radius: 0 50px 0 0;box-shadow: 23px -25px 0 0 #2E2D2C;display:none;}
        & > .wrapper-content {position: absolute;left: 0;right: 0;width: 100%;height: 40px;}
        & nav {
            &.nav-top{height:60px;position:relative;margin-top:40px;
                & a {font-size: 14pt;padding-right: 5px;}
                & div {height: 90px;/*margin-top:-7px;*/
                    &.marquee-content {position:relative;top:unset;}
                    & a {display:flex;align-items:center;font-size:14pt;
                        &::after{height:45px;}
                    }
                }
            }
            &.social {padding-left: 20px;
                & a{padding-right: 13px;}
            }
            &.nav-down {display:block;height: 100%;line-height:32px;border-top-right-radius: 50px;border-top-left-radius: 0px;padding-top: 90px;background:none;position:absolute; right: -225px;width:225px;top: 78px;transition: right 0.5s ease, visibility 0.5s ease-in-out;z-index: 100;padding-bottom:54.5%;
                /* &.inactive {opacity:1;visibility: visible;} */
                & input {margin-left: 0px;}
                &::after {content:"";display:block;width: 100%;height: 100%;position: absolute;top:0;right: -225px;left: 0;background: #fff;opacity: 0.8;z-index: -2;border-top-right-radius: 50px;transition: right 0.5s ease;}
                &.active{bottom: unset;right: 0;top: 78px;transition: right 0.5s ease, visibility 0.5s ease-in-out;line-height: 32px;height: fit-content;padding: 90px 0px;height: 100%;z-index: 100;width:388px;padding-bottom:54%;
          
                    & a {font-size:18pt;text-align:left;padding-left: 62px;line-height: 45px;
                        &.home {display: block;}
                    }
                    &::after {right:0;border-top-right-radius: 50px;min-height:unset;}
                    & label.search {display:none;position:relative;max-width: 168px;height: 35px;background: #fff;border-radius: 12px;box-sizing: border-box;margin-left: 20px;
                        &.active {display: block;}}
                    & input {font-size: 16px;max-width: 122px;height:20px;
                        &:hover {max-width: 148px;}
                    }
                    & ~ a.menu{right: 0;
                        &::before {background: url(/img/close.svg) center no-repeat;right: 85px;position: absolute;background-size: 26px;}
                    }
          
                }
                & a {display:block;color:#1D1D1B;font-size: 16px;transition: all .3s ease-in-out;
                    &:before {display:none;}
                    &:hover {color:#A0A09F;}
                }
               }
        }
        & .header-down {background-color:#000;width:100%;left:0;right:0;height:110px;border-top-left-radius: 112px;border-top-right-radius: 112px;position:absolute;margin-top: unset;top:78px;}
        & a.logo {font-size: 50px;padding-left: 78px;
            &::before {width: 200px;height: 45px;}
        }
        & a.menu{z-index: 100;position: absolute;right: 85px;top:35px!important;
            &::before {content:"";display: block;width: 50px;height: 40px;position:relative;margin:0 auto;margin-bottom:5px;background: url(/img/bar-menu.svg) center no-repeat;background-size: 80%;}
        }
    }
    .half {width:100%;}

    & b {letter-spacing: 1px;}
    & div.img {height:auto
        &.banner {height: auto;}
    }

    body > main {margin-top:103px;
        & >div.img {border-top-left-radius: 100px;border-top-right-radius: 80px;height: auto;}
        & section {
            &.box {
                & article.title {padding-left:85px;padding-right:85px;}
            }
            & article {padding:60px 20px;}
            &.brand {
                & ul {
                    & li{width:22%;}
                }
            }
            &.main {
                & article.title {
                    & div.text {
                        & h1 {font-size:30pt;
                            & b {font-size: 33pt;}
                        }
                    }
 
                }
                &.background {max-width:1170px;margin:0 auto;
                    & img {margin-top: -170px;/*position:absolute;*/left:-56px;width:auto;}
                   & article.title {
                    & div.text {
                        &.half {
                            & h1 {font-size:30pt;}
                        }
                    }
                                        &.right {
                    &.full {position:absolute;top:0;right:0;}
                        }
                   } 
                    &.left {max-width:1780px;justify-content:space-between;
                        & article.title {text-align: left;right:unset;left:0;background-color:unset;align-items:baseline!important;padding-left:85px;
                            & div.text {text-align:left;max-width:unset!important;
                                &.half {
                                    & h1 {white-space: nowrap;margin-bottom: 160px;font-size:30pt;
                                        &::before {right:unset;}
                                    }
                                }

                                & pre {font-size:24pt;margin-top:60px;line-height:35pt;}
                            }
                            &.right {text-align:right;left:unset;right:0%;
                                & div.text {text-align:right;max-width:unset!important;
                                h2 {font-size:52pt;font-weight:100;
                                    &::before {right:unset;}
                                }
                                & pre {font-size:24pt;margin-top:60px;line-height:35pt;}
                            }
                            }
                        }
                        & img {left:unset;right:12%;position:relative;top:0;object-fit:contain;width:100%;height:100%;min-width:54%;}
                    }

                }   
            }

            &.contact {display: flex;justify-content:space-between;padding:64px 43px 38px 84px;align-items:unset;
                & article {width:363px;margin-top:0;margin:unset;
                    &.title {width: 431px;margin:unset;
                        & pre {white-space: pre;}
                    }
                }
                & form {
                    & pre {margin:0;white-space: nowrap;}
                    & h1 {margin:0;padding: 0;}
                    & input {font-size:16px;height: auto;padding: 11px;margin: 0;box-sizing: border-box;display: block;}
                    & div {margin-top:32px;}
                }
            }
            &.banner-title {position:relative;padding:0px;
                & .wrapper-content {position: relative;width: 100%;text-align: left;height:100%;
                    & article.title {position: relative;padding:100px;}
                }
                & div.img {height: auto;/*min-height:1074px;*/}
                &.active {opacity: 1;transform: translateY(0);}
                & article {
                    &.title {
                        & pre {white-space: pre;}
                        &.small {/*max-width: 50%;*/max-width: 57%;left:0;padding: 18px 35px 76px 62px;
                            & h2.title {margin-top:-58px;}
                        }
                    }
                    &.position {/*width:51%;*/width:49%;padding-right:0px; left:52px;text-align: left;margin-top:115px;
                        & pre {white-space: pre-line;
                            & h1 {margin: 0;}
                        }
                        & b {color:#000;}
                        & p {/*font-size: 27px;line-height: 45px;*/font-family: "Gotham Medium", sans-serif;font-size: 15px;letter-spacing: -.20px;line-height: 28px;}
                        & a.link {margin-top: 0;padding-bottom: 0;}
                    }
                }
                &.half {text-align: center;margin-left:unset;
                    & .wrapper-content {text-align: center;}
                    & div.img {height: 624px;}
                    & div.img picture {width: 50%;height: 100%;}
                    & article.title {width: 100%;max-width: 84%;height: auto;padding: 63px 20px;padding-bottom:0;left:0;right:0;margin: 90px auto auto auto;
                        & h1 {text-align: center;
                        }
                        & h2 {text-align: center;margin-top:20px;
                            &::before {text-align: center;left:0;right:0;margin:0 auto;}
                        }
                    }
                    &.left {text-align: left;max-width:70%;position: relative;
                        & article.title {
                            & h1 {text-align: left;}
                            & h2 {text-align: left;
                                &::before {text-align: left;left:0;right:0;margin:unset;}
                            }
                        }

                    }
                }
                &.top {margin-top:100px;text-align:center;
                    & .wrapper-content {text-align: left;}
                    & article.title {padding:6px 22px;max-width: 84%;left:61px;right: 0;margin: 0 auto;top:242px;width:100%;
                        & h2 {margin-top:-63px;}
                    }
                } 
                /* & div.img.small {height:900px;max-height:unset;display:block;border-radius: 0;margin-bottom: 100px;
                    & img {width:35%;height: 100%;object-fit: cover;object-position: left;  -webkit-filter: grayscale(100%);filter: grayscale(100%);position: absolute;right: 0;}
                } */
                &.flex {display: flex;flex-direction:column-reverse;justify-content: space-between;width: 100%;margin-bottom: 95px;height:100%;
                    & div.img.small {width:35%;max-height:unset;text-align: right;right: 0px;position: absolute;top: 0;bottom: 0;height:969px;
                        & img {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
                    }
                    & .wrapper-content {text-align: left;}
                    & article.title.small {order:1;position:relative;/*margin-bottom: 100px;*/margin-top:0;}
                }
            }
            &.horizontal {padding:0px;text-align: left;display:flex;align-items:top;justify-content:center;
                & div.img {position: relative;max-width:50%;max-width: 478px;border-radius: 0;height:auto;
                    & img {opacity: 1;}
                }
                & div.text{ width:50%;font-size: 15px;padding:0px 50px;max-width:688px;
                    & h2 {position: relative;left:unset;margin-bottom: 11px;margin-top:22px;
                        &::before {bottom:-6px;}
                    }
                    & p {line-height: 28px;font-size: 15px;}
                }
            }
            &.info {padding: 192px 63px;padding-bottom:46px; max-width: 80%;margin: 0 auto;
                & pre {white-space: pre;margin:0;
                    & h1 {margin:0;}
                    & p {margin:0;}
                }
                &.left {display: block;padding:0px 100px 100px 100px;margin:unset;max-width:60%;
                    & p {max-width: 100%;text-align: left;}
                }
            }
            &.info.right {display: block;padding:30px 62px 24px 46px;max-width:100%;margin:unset;z-index: 1;background-color: #fff;position:relative;top:unset;
                &::after {content: '';display: inline-block;width:100%;height: 100%;background-color: #fff;z-index: -1;position: absolute;left:0;right: 0;top:0;}
                & p {max-width: 100%;text-align: right;font-size: 15px;font-family: "Gotham Bold", sans-serif;font-weight:bold; color:#312513;letter-spacing: 0.69px;line-height: 29px;margin:0;}
            }
            &.main {
                & article.title {position:relative;top:unset;left:unset;right: unset;text-align:left;height:unset;
                    & div.text {font-size: 30pt;color: white;
                        & pre {white-space: pre;font-size: inherit;}
                    }
                    & h1 {padding: 0px;margin: 0;line-height: 39px;}
                    & p {margin-top:0px;padding-right: 144px;margin-bottom: 30px;}
                    & a.link {margin-top: 26px;
                        &.scorpi {margin-top:0px;}
                    }
                    & div.img {height:100px;margin:20px 0px;border-radius:0;background:transparent;z-index: 1;
                        & img {opacity: 1;}
                    }
                    &.right {text-align: right;align-items:center;position: absolute; padding-top: 60px;
                        & div.text {text-align: right;max-width: unset;z-index: 999;}
                        & h1 {text-align: right;margin-bottom:40px;display: inline-block;font-size:50pt}
                        & p {width:100%;padding-right: 0;margin-bottom: 30px;}
                        & a.link {/*font-size: 22pt;*/margin-top: 54px;display:flex;}
                        &.full {padding-left:0px;
                            & div.text {
                                & pre {text-align: right;font-size:20pt;line-height:43pt;}
                                & pre:nth-of-type(3) {margin-top:26px;}
                            }
                            & div.img{height: 1000px;overflow:visible;
                                & img {object-position: left;position:absolute;left:0;object-fit: cover;}
                            } 
                        }
                    }
                    &.full {
                        & div.text.half {
                            & h1 {margin-bottom:22px;}
                        }
                        & div.text {
                            & p {margin-bottom: 0;}
                        }
                    }
                    &.half {
                        & div.img {height: 417px;}
                        & div.text {margin-left: 60px;right: 0;}
                        &.bottom{margin-top:0;position:relative;width: 100%;}
                    }

                } 
                
                & div.img.banner{position:relative;height:73px;color: #fff;font-size:94px;z-index: 0;margin: 0;font-weight: 600;white-space: nowrap;padding: 0;width: 100%;text-align: left;z-index: 2; overflow: visible;
                    & h1, & b {font-size: 94px!important;margin: 0;}
                    /* &.right{right: 100%;} */


                }
                & .wrapper-content.servizi {padding: 73px 0px;
                    & section.title {
                        & .full {padding: 0 52px;
                            & div.readmore {/*bottom: 42px;right: 52px;*/position:relative;float:right;}
                            &.wrap {
                                & div.readmore {/*right: unset;left:375px;*/position: relative;}
                                /* & div.video {margin-right: 75px;} */
                            }
                        }
                    }
                }
                & section.title {display:flex;flex-wrap:nowrap;                      
                    &.scroll {background-position-y: 240px;background-position-x: 160px;background-size:69%;
                        & article.title {padding-left:20px;padding-right:20px;
                             &.right {padding-top:0px;}
                            & p{font-size:18pt;color:#000;}
                        }
                        & div.text {max-width:980px;
                            & pre {font-size:16pt;margin-top:30px;line-height:25pt;}
                            &.right {clear:both;
                                & h2.title {text-align: right;max-width:unset;float:right;max-width:270px;
                                    &::before{right:0;}
                                }
                            & p {clear:both;text-transform: uppercase;}
                            & a.link {margin-top:50px;}
                            }
                        }
                    }
        
                        & header {position:relative;max-width:60%;padding: 0 30px;
                            & h1 {color:#000;}
                            & b {color:#000;display: block;}
                        }
  
                    & div.img {height: auto;left: 0;right: 0; margin: 0 auto;top: 30%;/*position:absolute;*/
                        &.banner {/*top:16%;*/position: absolute;top:3%;
                            &.right {/*top:27%;*/top:7%;}
                            &::before {height: 300px;background-size: 50%;}
                        }
                    }
                    & .full, & .half {flex-wrap:nowrap;justify-content:space-between;
                        & div.img {
                            & img {object-fit: none;height: 100%;}
                        }
                       & div.video {height: auto;overflow: hidden;position: relative;/*width: 425px;*/
                        & img {width: 100%;object-fit: none;object-position: center;}
                        & .play {background-size: 84px;width: 84px;height: 84px;left:45%;}
                    }
                       & div.text {flex:unset;width:50%;
                        & h2 {font-size: 23px;letter-spacing: -.74px;margin-top:0px;}
                        & p {font-size: 16px;letter-spacing: -0.4px;padding-right: 0;margin-top:20px;}
                        & a.link {float: right;}
                        & blockquote {
                            & p {color: #1D1D1B;font-size: 32px;line-height: 45px;text-transform: uppercase;font-family: "Helvetica-Light", sans-serif;}
                            & p::before {content: open-quote;font-weight: bold;font-size:50px;color:#e15656;;} 
                            & p::after {content: close-quote;font-weight: bold;font-size:50px;color:#e15656;;}
                        } 
                        }
                        

                    }
                    & .half {
                        & h2 {position: relative;color:#301F15;margin:0;padding:0;text-align:center;font-size:40px;
                            &::before {margin:0 auto;left:0;right: 0;}
                        }
                        & div{
                            &.text.bottom.left {text-align:left;opacity:0;width:100%; transform: translateX(100vw);transition: transform 3s ease, opacity 1s ease;}
                            &.text.bottom.right {opacity:0;text-align: right;width: 100%;position:relative;
                                transform: translateX(-100vw);top:-38%;
                           
                                transition: transform 2s ease, opacity 1s ease;
                            }
                            &.text.left{    opacity: 1;
                                transform: translateX(-100vw);transition: transform 2s ease, opacity 1s ease;}
                            &.text.right {transform: translateX(100vw);text-align:right;
                                opacity: 1;
                                transition: transform 2s ease, opacity 1s ease;
                            }
                            &.img {
                                &.user.left{transform: translateX(-100vw);transition: transform 2s ease, opacity 1s ease;}
                                &.user.right {
                                    transform: translateX(100vw);
                                    position: absolute;transition: transform 2s ease, opacity 1s ease;
                                }
                                &.user.left.bottom {position:relative;transform: translateX(-100vw);transition: transform 2s ease, opacity 1s ease;}
                                &.user.right.bottom {transform: translateX(100vw);position: relative;transition: transform 2s ease, opacity 1s ease;}
                            }
                        } 
                    }
                  
                    & .full {width:100%;
                        & div.text {width:47%;
                            & h2 {font-size: 32px;margin-top: 0px;color: #301F15;font-weight: normal;}
                            & p {font-style: normal;/*line-height: 45px;*/padding-right:0;}
                        }
                        & div.img {height: 833px;
                        }
                    }
                    & blockquote {margin:0;
                        & p::before {font-size:70px;} 
                        & p::after {font-size:70px;}
                    } 
                }    
                & .wrapper {
                    & section.title{
                        & .full {
                            & div.text {width:50%;}
                        }
                    } 
                }  

            }
            &.gallery {
                & .contain {
                    & div.all-slide {
                        & article {/*height: 562px;*//*height:100%;*/
                            &.active {display: block;}
                            & div.img {/*height: 100vh;*/height:100%;height: 300px;
                                & img {object-position: center;}
                            }
                            & div.text {
                                & p {font-size:16pt;
                                    &.transform {font-size:22pt;}
                                }
                            }
                        }
                    }
                }
                & button{background-size: 68px;width: 100px;height: 100px;}
            }
        }
        & div.img.half {display: flex;align-items: center;justify-content: right;max-height:1203px;
            & img {width:100%;height: 1000px;opacity: 1;}
        }


    }
    /* .undo::after {content: "";display: block;position: absolute;left: -100%;right: 0;top:0;background-color:#D8D3CA;width: 1000%;height: 100%;z-index: -1;} */
    .bgcolor::after {background-color:#4a4a49;content: "";display: block;position: absolute;left: -100%;right: 0;top:0;width: 1000%;height: 100%;z-index: -1;}
    
    body > footer {height:unset;
            & button {font-size: 22pt;width: 246px;height: 87px;/*margin-left:20px;margin-top:13px;*/}
            & article.title {border-bottom-left-radius:112px;border-bottom-right-radius:112px;padding:80px 30px;
                & h2 {font-size:40pt;margin-bottom:10px;}
                & p {font-size: 25pt;line-height:30pt;max-width:846px;margin:0 auto;margin-bottom:20px;}
            }
        & section {padding-left:85px;padding-right:85px;padding-top:100px;
            & a {
                &.logo::before {width:200px;height:45px;}
            }

        }
        & nav {
            &:first-child a {line-height: 23px;}
            & a{font-size: 12px;color:#626359;font-family: "Gotham Medium", sans-serif;text-transform: uppercase;line-height: 23px;}
            &.social {padding: 0px;border-radius: 50px;width: 100%;width: 398px;height: 80px;
                & a {width:50px;
                    &::before {height:50px;}
                    &.facebook::before {background-size: 45px;}
                    &.instagram::before {background-size: 45px;}
                    &.linkedin::before {background-size: 45px;}
                    &.behance::before {background-size: 45px;}
                }
            }
        }
        & section:nth-of-type(2) {
            & a {font-size: 19pt;font-family: Poppins-Regular, sans-serif;color:#1f2020;}
            & p {font-size: 19pt;font-family: Poppins-Regular, sans-serif;color:#1f2020;}
            & article {width:auto;margin-top:30px;}
            & > a{padding-right: 35px;
                &::after {width: 30px;height: 30px;top:-6px;}
            }
        }
    }
}
@media only screen and (min-width: 1366px) {
  body > main {
    & section {
        &.box {
            & article.title {padding-right: 85px;padding-left: 85px;
                & div {margin:52px auto;height:250px;font-size:20pt;line-height:27px;
                    & ul {
                        & li {font-size:20pt;line-height:35px;}
                    }
                    &.icon {
                        & p {margin-top:20px;}
                        & img {height:200px;}
                    }
                }
            }
        }
      &.main {
        & section.title{
            &.scroll {background-position-y: 337px;background-position-x: 160px;background-size:68%;background-position-y: 353px;background-position-x: 116px;background-size: 818px;
                & article.title {padding-left:0px;padding-right:0px;
                    &.right{padding-top:0px;}
                    & p{font-size:20pt;}
                }
                & div.text {max-width:980px;
                      & pre {font-size:18pt;margin-top:30px;line-height:25pt;}
                      &.right {
                        & a.link {margin-top:50px;font-size:22pt;}
                      }
                 
                }
            }
        }
        & article.title {
          &.full {
            & div.text.half {
              & h1 {
                margin-bottom: 100px;font-size: 32pt;
              }
            }
          }
        }
        &.background {
            &.left {
                & img {right:150px;margin-top:-290px;}
                & article.title {padding-left:85px;}
            }
        }
      }
    }
  }
  body > footer {
  	& section {padding-top:100px;
    	& a {
      		&.logo::before {width:200px;height:45px;}
			} 
		}
	
	}
}
@media only screen and (min-width: 1366px) {
    h1 {margin:35% auto;
       &::before {bottom: -60px;height: 5px;width:287px;}
       &.title {color:#000;}
    }
    span {font-size: 19pt;bottom:50px;}
    & form {max-width:830px;margin:0 auto;text-align:left;
         & input, & textarea {padding:15px 20px;font-size:16.38pt;margin-bottom:35px;text-align:left;}
    }
    a.link {font-size:22pt;width:276px;height:90px;z-index: 100;}
    h1 {font-size: 58pt;margin:22% auto;font-weight:normal;}
    h2.title {font-size:52pt;font-weight:100;}
	body > footer {
        & button {font-size: 22pt;width: 246px;height: 87px;margin-left:0px;margin-top:40px;}
          & article.title {border-bottom-left-radius:112px;border-bottom-right-radius:112px;
            & h2 {font-size:40pt;margin-bottom:10px;}
            & p {font-size: 25pt;line-height:30pt;max-width:846px;margin:0 auto;margin-bottom:20px;}
        }
        & .wrapper-content {max-width: 1045px;}
        & section {
            &:first-of-type {padding-top:160px;}
            & a {
                &.logo::before {width:342px;height:47px;}
            }
        }
      
     }
}
@media only screen and (min-width: 1600px) {


    body > header{
        /* & a.logo {top:76px;} */
        & nav {
            &.nav-top {height:60px;position:relative;
                & div {/*height: 50px;margin-top:10px;*/
                    & a {display:flex;align-items:center;font-size:14pt;}
                }
            }
            &.nav-down {
                &.active {width:388px;
                    & a {font-size:18pt;line-height:45px;}
                }
            }
        }
    }
    body > main {
         &.top {
            & .background {height:auto;}
            }
        & section {
            &.box {padding-top:100px;
                & article.title {
                    & div {padding:100px 45px;font-size:32pt;height:260px;
                        &.icon{
                            & img {margin:0 auto;height:200px;}
                            & p {margin-top:25px;line-height: 46px;}
                        }
                        & ul {margin:0 auto;
                            & li {font-size:34pt;line-height: 45pt;color:#1f2020;}
                        }
                    }
                }

            }
            &.background {height:2082px;
                &.left {
                    & img {top:-204px;}
                }
            }
            & article {padding:100px 20px;}
            &.main {
                &.background {
                    &.left{
                        & img {right:20%;min-width:69%;}
                        & article.title {left:85px;
                        & div.text {
                            &.half {
                             & h1 {font-size:49pt;}
                            }
                        }
                    }
                    }
                }
                & section.title {
                    &.scroll {margin:0 auto;width:100%;background: url("../img/chi-siamo.png " )center no-repeat ;background-position-y: 389px;background-position-x: 231px;background-size:66%;
                        & article.title {width:100%;padding-top:60px;padding-left: 85px;
                            & div.text {
                                & pre {font-size:20pt;margin-top:30px;line-height:30pt;}
                            }
                            &.right {position:relative;padding-right: 85px;padding-top:60px;}
                            & p{font-size:31pt;}
                        }
                        & img {right:0;position: relative;}
                        & pre.right {text-align:right;}
                        & div.text {max-width:980px;
                            &.right {clear:both;
                                & h2.title {text-align: right;max-width:unset;float:right;max-width:270px;font-size:49pt;
                                    &::before{right:0;}
                                }
                                & p {clear:both;text-transform: uppercase;}
                                & a.link {margin-top:100px;font-size:22pt;}
                            }
                        }
                    }  
                }
                & .wrapper-content.servizi {
                    & section.title {
                        & .full {
                            /* & div.readmore {bottom: 42px;right: 126px;} */
                            &.wrap {
                                /* & div.readmore {right: unset;left:375px;} */
                                & div.video {width:47%;}
                            }
                            & div.video {width:47%;}
                        }
                    }
                }
                & article.title {
                    & div.text{
                        & h1 {font-size:42pt;letter-spacing:5px;
                        & b {font-size:53pt;}
                    }
                    &.half {max-width:unset;
                        & h1 {font-size:58pt;}
                    }
                    }

                }
                &.background {max-width:1780px;
                    & article.title {
                        & a.link {margin-top:160px;}
                        &.right{padding-right: 85px;
                            & a.link {margin-top:245px;}
                            &.full{
                                & div.text {padding-top:60px;
                                    & pre {font-size:30pt;margin-bottom: 42px;letter-spacing: 0.50px;}
                                    &.half {
                                        & h1 {margin-bottom:146px;font-size:49pt}
                                    }
                                }
                            }
                        }
                    }
                }
            }
            &.gallery {padding-bottom:100px;
                & button {margin-top:100px;height:64px;width:105px;
                    &.prev {background-size: 100%;margin-right:30px;}
                    &.next {background-size: 100%;}
                }
            }
            &.brand {background-color: #eeeae7;padding:40px;text-align:center;
                & h3 {color:#070202;font-family:Baskervville-VariableFont_wght, serif ;font-size:14pt;text-transform:uppercase;}
                & ul {max-width:1170px;margin:0 auto;display: flex;align-items:center;flex-wrap: wrap;gap: 30px;
                    & li {padding: 40px;max-width: 200px;}
                }
            }
            &.brand {
                & h3 {font-size: 58pt;font-weight:100;}
                & ul {max-width:1780px;
                    & li {width:18%;padding:35px;max-width:unset;
                        & img {width: auto;}
                        }
                    }
            }
            &.carousel {
                & .contain {height:2088px;overflow-x:unset;scrollbar-width: none;
                    & div.all-slide {
                        & article {
                            & div.img {height:2088px;}

                        }
                    }
                }
                & button {bottom:25%;
                    &.prev, &.next {background-size: 100%;height: 64px;width: 105px;}
                    &.prev {left:-150px;}
                    &.next {right:-150px;}
                }
            } 
            &.video {min-height:796px;max-height: 796px;height: 100px;width:100%;padding: 0;margin: 0;background-color:#dbb633;text-align:center;overflow:hidden;
                & h1 {text-align: center;margin: 0 auto;color: #1f1f20;font-weight: 100;display: flex;align-items: center;justify-content: center;position:absolute;top:50%;bottom:50%;
                    &::before{display:none;}
                }
                & video, iframe {width: 100%;background-color:#dbb633;text-align: center;}
            }
        }       
    } 

}
@media only screen and (min-width: 1920px) {
    /* body > header {
        & nav {
            &.nav-down {
                &.active{padding-bottom:100%;}
            }
        }
    } */
    body > main {
        & section {
            &.box {
                & article.title {padding-right:0;padding-left:0px;}
            }
           &.main {
                &.background {z-index: 99;
                    &.left{
                        & article.title {left:0;}
                    }
                    & article.title {
                        &.right {padding-right:0;}
                    }
                } 
                & section.title {
                    &.scroll {background-position-y: 405px;background-position-x: 231px;
                        & article.title {width:100%;padding-top:60px;padding-left: 0px;
                            & div.text {
                                & pre {font-size:24pt;margin-top:60px;line-height:35pt;}
                            }
                            &.right {position:relative;padding-right:0px;}
                            & p{font-size:31pt;}
                        }
                        & img {right:0;position: relative;}
                        & pre.right {text-align:right;}
                        & div.text {max-width:980px;
                            &.right {clear:both;
                                & h2.title {text-align: right;max-width:unset;float:right;max-width:270px;
                                    &::before{right:0;}
                                }
                                & p {clear:both;text-transform: uppercase;}
                                & a.link {margin-top:100px;font-size:22pt;}
                            }
                        }
                    }  
                }
           }      
        }
    }
}