* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Span';
    src: url('../font/Span-Semibold.woff') format('woff');
    font-weight: 600; /* Regular */
    font-style: normal;
}

/*general*/
html {/* font-size: 62.5%*/ font-size: 10px; outline: none; }
body { font-family: "Onest", sans-serif; color: #161616; letter-spacing: 1px; font-weight: 400; background-color: #F6F8FA; }
.body { background-color: #fff; max-width: 300rem; margin: 0 auto; overflow: hidden; }
ul, li, h1, h2, h3, h4, h5, p { list-style: none; }
a { font-size: 1.6rem; text-decoration: none; color: #161616; outline: none }
a:focus, input:focus, textarea:focus, select:focus, label:focus {outline: none!important }
p, ul, li { line-height: 1.6; font-size: 1.6rem; }
.container { max-width: 150rem; margin: 0 auto; padding: 0 2%; width: 100%; }
button { color: #161616; font-size: 1.6rem; cursor: pointer; background-color: transparent; border: none; font-family: "Onest", sans-serif;}
input, textarea, select { font-size: 1.8rem; ; font-weight: 600; font-family: "Onest", sans-serif;}
select { width: 100%; 
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; color: #111;
  background: url(../img/down.svg) 95% / 13px no-repeat #161616;
}
main { position:relative; }
.center { text-align: center; }
.clear { clear: both; }
.float { float:left; }
.floatr { float:right; }
.flex { display: flex; flex-wrap: wrap; }
.clearfix::after { content:""; display: table; clear: both; }
.upper { text-transform: uppercase; }
.pr { position:relative; }
.oh { overflow:hidden; }
.font { font-family: "Span", sans-serif; font-weight:lighter; }

/*colors*/
.fff {color: #E4D8C2}
.bgredo { background-color:rgba(128, 38, 28, .76); }
.red { color:#B14B47 }
.red2 { color:#671019 }
.bgred { background-color:#B14B47 }
.brown { color:#6F5853 }
.bgbrown { background-color:#1F1916 }
.gray { color:#707070 }

.gragreen {  background: rgb(182,219,112); background: linear-gradient(45deg, rgba(182,219,112,1) 0%, rgba(57,191,134,1) 100%); }

/*fontsize*/
.w300 { font-weight:300 }
.w400 { font-weight:400 }
.w500 { font-weight:500 }
.w600 { font-weight:600 }

.t100 { font-size:10rem; line-height:1; }
.t60 { font-size: 6rem; line-height:1 }
.t25 { font-size: 2.5rem; line-height:1.2 }
.t20 { font-size: 2rem }
.t16 { font-size: 1.6rem }
.t14 { font-size: 1.4rem }
.ls { letter-spacing:-3.8px }

.opa { opacity:.4!important }

.mt1 { margin-top:1rem }
.mt2 { margin-top:2rem }
.mt3 { margin-top:3rem }
.mt4 { margin-top:4rem }
.mt5 { margin-top:5rem }
.mt6 { margin-top:6rem }
.mt8 { margin-top:8rem }
.mt9 { margin-top:9rem }
.mt10 { margin-top:10rem }
.mb1 { margin-bottom:1rem }
.mb2 { margin-bottom:2rem }
.mb3 { margin-bottom:3rem }
.mb4 { margin-bottom:4rem }
.mb5 { margin-bottom:5rem }
.mb6 { margin-bottom:6rem }
.mb10 { margin-bottom:10rem }

.opt { object-position:top center; }
.opb { object-position:bottom center; }
.ojf { object-fit:cover; object-position:center; height:100%; width:100% }
.multi { mix-blend-mode: multiply; }
.overlay { mix-blend-mode: overlay; }
.screen { mix-blend-mode: screen; }

.br { border-radius: 2rem }

.cta { display: inline-block; text-transform:uppercase; padding:1rem 2rem }
.cta.bgredo:hover { background-color:#B14B47 }
.cta.bord { border:1px solid; }
/*padding/margin*/
.wt100 { width:100% }
.ojf { width:100%; height:100%; object-fit:cover; }
.opt { object-position:center top!important; }

.tronca2 { width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/*TOP BUTTON*/
.div-back-to-top { transition: .3s; max-width: 300rem; width: 100%; left: 0; right: 0; bottom: 0; margin: 0 auto; position: fixed; z-index: 10000; }
.back-to-top { transition: .3s; position: absolute; z-index: 2; bottom: 2rem; right: 2rem; }
.back-to-top img { transition: .3s; width: 5.2rem; background-color:#B14B47; padding:2rem 1.5rem; }
.back-to-top:hover {cursor: pointer; }

#scrolling { width: 100%; position: absolute; top: 0; left: 0; z-index: 8; }
header { align-items: center; flex-wrap: nowrap; align-items:center; }
header .linea { position:absolute; bottom:0; left:0; width:80%; opacity: .5; background: #E4D8C2;
background: linear-gradient(90deg, rgba(228, 216, 194, 1) 1%, rgba(228, 216, 194, 0) 100%);  height:1px }
header .logo { opacity: .4; transition: .3s; z-index: 1; width: 20rem; margin-right:3rem; }
header .menu { padding: 4rem 0; position: relative; width: calc(100% - 23rem);}
header .menu li a { transition: .4s; font-size: 1.4rem; font-weight: 500; text-transform: uppercase; color: #E4D8C2; padding:0 1.5rem }
header .menu li { position: relative; display:inline-block; }
header .menu li .active { color:#B14B47 }
header .menu li a:hover { opacity:.4 }
#scrolling .cta { transition: .2s; position:absolute; right:2%; top:3rem }

.lang { color:#fff; font-size:1.4rem; position:absolute; top: 4.4rem; right:18rem }
.lang a { color:#fff; font-size:1.4rem; opacity: .6; }
.lang a.active { opacity:1 }

.sticky { opacity:1 }
.sticky .linea { display:none; }
.sticky { box-shadow: 0 3px 20px rgba(0,0,0,0.16); transition: 0.3s; position: fixed!important; top: 0; left: 0; right: 0; z-index: 30; width: 100%; max-width: 300rem; margin: 0 auto; background-color: rgba(27,22,19,0.9); }
.hidden-sticky { }
.sticky .line { display:none; }

/*sidenav*/
.menuresponsive, .sidenav { display: none; }

.mainbg { width: 100%; height:100vh; min-height: 85rem; position:relative; display:flex; align-content:center; justify-content:flex-start; }
.bgmain { position:absolute; top:0; left:0; }
.mainbg .img { box-shadow: 0 3px 30px rgba(0, 0, 0, .66); position:absolute; top:0; right:0; width:30%; object-position:91% 9%; }
.mainbg .txt { position:relative; z-index:2; }
.mainbg .txt p { max-width:30rem; line-height:1.5 }
.mainbg a { width: 95rem; display: block; }
.mainbg a img { animation: bounce 2.5s infinite ease-in-out; }
.mainbg .cta { display:none; }
 
@keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      25% {
        transform: translateY(-30px);
      }
      50% {
        transform: translateY(0);
      }
      75% {
        transform: translateY(-15px);
      }
    }

.bgmarmo { position: relative; z-index: 2; background-image:url(../img/marmo_beige.jpg); background-position:center top; background-repeat:repeat; background-size:100% }

.banner { min-height: 58rem; background-color:rgba(255, 255, 255, .4); }
.banner .cl { padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; width:33.33% }
.cornice { z-index: 2; position:absolute; top:2.5%; left:2.5%; width:95%; height:95%; border:1px solid rgba(255, 255, 255, .5); }
.banner .cl.img { padding:0 }
.banner .cl:last-child { padding:5rem }

.pad { padding: 8rem 0 }

.bookstore { position:relative; }
#splide1 { padding:0 1rem; width:60%; margin-left:40% }
#splide1 .splide__pagination { display: none;}
#splide1 .box { padding: 4rem 2rem 2rem; justify-content: center; background-color:rgba(255, 255, 255, .4); box-shadow: 0 3px 20px rgba(0, 0, 0, .16); }
#splide1 .splide__track { width:100% }
#splide1 .cover { margin-bottom: 4rem; width:16.3rem; border-radius:.5rem; box-shadow: 0 5px 10px rgba(0, 0, 0, .16); }
#splide1 .txt { width:100% }
#splide1 .txt p { line-height:1.5; letter-spacing:0 }
#splide1 .txt p.t20 { line-height:1.2 }
.bookstore .tx { position:absolute; left:0; right:0; width: 150rem; padding: 0 2%; margin:0 auto; }

.line { margin: 12rem 0 8rem; height:1px; width:100%; background: #6F5853; background: linear-gradient(90deg, rgba(111, 88, 83, 0) 0%, rgba(111, 88, 83, 1) 50%, rgba(111, 88, 83, 0) 100%); }

#splide2 { padding:4rem 1rem 6rem;}
#splide2 .splide__pagination { display: block; text-align: center; width: 100%!important; bottom: 2rem; height: .9rem; z-index: 1}
#splide2 .splide__pagination__page { border-radius: 0; background: #6F5853; opacity: 0.4; width: .9rem; height: .9rem; border-radius: 50%; margin: 5px;cursor: pointer;display: block;}
#splide2 .splide__pagination__page:focus {outline: none;}
#splide2 .splide__pagination__page.is-active {background: #6F5853; opacity: 1; transform: inherit;}
#splide2 .box { background-color:rgba(255, 255, 255, .4); box-shadow: 0 3px 20px rgba(0, 0, 0, .16); }
#splide2 .splide__track { width:100% }
#splide2 .img img { width:100% }
#splide2 .txt { width:100% }
#splide2 .txt p { line-height:1.5; letter-spacing:0 }
#splide2 .txt { text-align:left; padding:2rem }
#splide2 .txt .t25 { letter-spacing:0; line-height:1.3 }

.banner.mt8 .cl:first-child { padding:4rem 5rem }
.banner.mt8 .cl.img img { object-position: right; }

.cit { padding:8rem 0; text-align:center; background-image:url(../img/marmo_brown.jpg); background-size:cover; }
.cit p.brown { max-width: 79rem; width: 100%; margin: 2rem auto; color:#A18B80 }

.loghi-footer img { width:20rem }
.loghi-footer .flex { align-items:center; gap:2rem; justify-content:center; }
.loghi-footer .flex img:last-child { margin-top:1.5rem }

footer { padding: 10rem 0 4rem; text-align:center; }
footer .flex { align-items:center; justify-content:center; }
footer .cl { min-width: 25% }
footer .cl p { margin-bottom:1rem }
footer .cl:nth-child(2) { border: 1px solid rgba(228, 216, 194, .4); border-top:0; border-bottom:0 }
footer a { text-transform: uppercase; color:#A18B80; font-size:1.2rem; line-height:2 }
footer a:hover { color:#E4D8C2 }
footer .logof { margin-top: 10rem; display:flex; align-items:center; }
footer .logof img { margin: 0 2%; width:14rem }
footer .logof .l { height:1px; background-color:rgba(228, 216, 194, .4); width:100% }

/*pages*/
.pages #scrolling { background-color: rgba(27,22,19,0.9); position:relative; }
.pages .sticky { box-shadow: 0 0 20px rgba(0, 0, 0, .4); }
.pages .hidden-sticky { height:10.5rem }
.banner2 { min-height:62rem; display:flex; align-items:center; justify-content:flex-start; }
.banner2 .txt { width:45% }
.banner2 img { position:absolute; width: 50%; top:0; right:0 }
.t50 { font-size:5rem }
.banner2.rev img { right:inherit; left:0; }
.banner2.rev .txt { margin-left: 55% }
.tappe { max-width: 90rem; margin: 0 auto; justify-content:space-between; }
.tappe .period { position: relative; width: 24rem;}
.tappe .period .t25 { text-align:right; padding-right:7rem }
.tappe .period::after { content:""; position:absolute; height:100%; width:1px; background-color:#A18B80; top:1.2rem; right:.75rem }
.tappe .period .circle {z-index: 2; position: absolute; top: 1.2rem; right: 0; margin-left: 2rem; height:1.6rem; width:1.6rem; border-radius:50% }
.tappe .txt { width: calc(100% - 30rem); padding-bottom:4rem }
.tappe:last-child .period::after { display:none; }

.pages .magazine .box { background-color: rgba(255, 255, 255, .4); box-shadow: 0 3px 20px rgba(0, 0, 0, .16); width:31.33% }
.pages .magazine .box .img img { width:100%; transition:.3s }
.pages .magazine .box .txt { padding:1.7rem 2rem }
.pages .magazine .box:hover .img img { opacity:.6 }

.filter-container { margin: 3rem 0 4rem; text-align: center; }
.filter-btn { font-size: 1.4rem; font-weight: 500; padding: 1.5rem 2.5rem; margin: 5px; border: none; background-color: rgba(255, 255, 255, 0.4); color: #A18B80; cursor: pointer; transition: background-color 0.3s; }
.filter-btn.active { background-color: #fff; color: #6F5853; }
.filter-btn:hover { background-color: #fff; }
.articles { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.article { opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: auto; }
.article.hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }

.brown2 { color:#6F5853 }
.mw70 { max-width:70rem; margin:0 auto; }
.back img { transform:rotate(180deg); margin-right:1rem }
.back { margin:-5rem 0 5rem }
.articolo .img { margin: 0 auto; max-width:130rem; height:62rem }
.articolo .img img { width:100% }
.articolo .cornice { left:1.5%; width:97% }
.articolo .ckeditor { text-align: left; margin: 4rem auto 0; max-width:130rem; }
.articolo .multimedia video, .fancybox__content .multimedia source { background-color: #eee; width:100%; }
.articolo .multimedia .img { width:100%; }
.articolo .multimedia { max-width:130rem; margin: 0 auto;}

.ckeditor { font-size:1.6rem; line-height: 1.8}
.ckeditor b, .ckeditor strong { font-weight: bold; }
.ckeditor h1,.ckeditor h2,.ckeditor h3,.ckeditor h4, .ckeditor h5, .ckeditor h6 { color:#B14B47 ; font-family: "Span", sans-serif; line-height: 1.2;  font-size:4rem; font-weight:400; margin: 3rem 0 1rem }
.ckeditor a { color:#B14B47; text-decoration:underline; font-weight:500 }
.ckeditor ul { margin:2rem 0 }
.ckeditor ul li::before { content:''; background-color: #B14B47; border-radius: 50%; width: 1.4rem; height: 1.3rem; position:absolute; left:0; top:.8rem }
.ckeditor li { padding-left:3rem; position:relative; font-size:1.6rem; line-height:1.7; margin:1rem 0 }
.ckeditor ol li::marker { font-weight:600; color:#B14B47 }
.ckeditor ol li { list-style:decimal; padding-left:1rem }
.ckeditor ol { padding-left:2rem; margin: 2rem 0}
.ckeditor.t25 p, .ckeditor.t25 { font-size:2.5rem }

.gallery .img .open { position:absolute; top:2.5rem; right:2.5rem; height:3rem; width:3rem!important }
.pages .magazine.gallery { justify-content:center; gap:2% }
.pages .magazine.gallery .box { text-align: left; width: 23%; margin-bottom: 2%; border-radius:1rem; overflow:hidden; }
.pages .magazine.gallery .box .img { height:35rem }
.pages .magazine.gallery .box .img .cornice { border-radius: 1rem 1rem 0 0 }
.pages .magazine.gallery .box .txt { padding:2.5rem 4rem }
.pages .magazine.gallery .box .txt p { margin-bottom:.6rem }
.pages .magazine.gallery .box .txt p::before { content:""; position:absolute; width:3.5rem; left: 0; top: 3.7rem; height:3px; background-color:#fff }
.gallery .txt img { position:absolute; right:1rem; bottom:.5rem }

.fancybox__backdrop { background:rgba(228, 216, 194, .95)!important; }
.fancybox__content { padding: 3rem!important; margin: 4rem 1rem!important; box-shadow: 0 0 20px rgba(0, 0, 0, .15); border-radius:1rem!important; max-width:98rem!important }
.f-button.is-close-btn { background: #444!important }
.fancybox__content .multimedia video, .fancybox__content .multimedia source { background-color: #eee; width:100%; border-radius:1rem 1rem 0 0 }
.fancybox__content .multimedia .img { width:100%; border-radius:1rem 1rem 0 0 }

.book { justify-content: space-between; background-color:rgba(255, 255, 255, .4); padding: 3rem; box-shadow: 0 0 20px rgba(0, 0, 0, .2); }
.book .cover { display: flex; align-items: center; justify-content: center; padding: 2rem; width:25rem; background-color:rgba(161,139,128, .4); }
.book .cover img { width:100%;box-shadow: 0 0 10px rgba(0, 0, 0, .2); }
.book .txt { width:calc(100% - 28rem); }
.book .ckeditor { border-top:1px solid rgba(161,139,128, .4); padding-top:2rem; margin-top:2rem }
.book .buy { align-items:center; }
.book .buy .cta { display: flex; align-items: center; justify-content: center; border:2px solid #fff; margin: 0.5rem 0 0.5rem 1rem; text-align:center; background-color:#fff; border-radius:.5rem; padding:1rem }
.book .buy .cta:hover { border:2px solid #A18B80; }
.book .buy .cta img { height:4rem }

.banner .cl.social { text-align:left; align-items:flex-start; }
.banner .cl.social a { width: 100%; padding: 2rem 0; display:flex; align-items:center; border-bottom:1px solid #A18B80; }
.banner .cl.social a img { width:3rem; margin-right:1rem }

/*form2*/
.contact_form2 { padding:7rem 0; margin:6rem 0 4rem; background-color: #995349 }
.contact_form2 .content { margin:0 auto; max-width: 80rem; padding:3rem }
.button_invia { text-align:right; }
.form2 input, .form2 textarea, .form2 select { font-weight: 500; font-size: 1.8rem; letter-spacing: 1px; margin-bottom: 2rem; border: 0; border-bottom:1px solid rgba(255, 255, 255, .4); width:100%; background-color:transparent; border-radius:0; padding:1.5rem 0; color:#fff }
.form2::placeholder { color:#fff }
::placeholder { color:#fff; opacity:0.9 }
.form2 .cl50 { width:48% }
.form2 .inputs { justify-content:space-between; }
.voce p { font-size:1.8rem; font-weight: 500; letter-spacing :1px; margin-bottom:0.8rem }
select { background: url(../img/select.svg) 97% / 13px no-repeat #fff; background-color: transparent;}

.music { position: fixed; align-items: center; gap: 10px; top: 19rem; right: 0; z-index: 19; background: rgba(128, 38, 28, .9); padding: 1rem 2rem; border-radius: 5px 0 0 5px; color: #fff; border: 1px solid #E4D8C2; border-right:0 }
.music button#play { padding-left: 14px; border-left:1px solid #E4D8C2; }
.music button { color:#E4D8C2; }

/*-------------------------style check & radio box-------------------------*/
/*style check box*/
.containercheck { text-align: left; width: 100%;
  margin: 1rem 0 2rem; font-size: 1.4rem;
  display: block;
  position: relative;
  padding-left: 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containercheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2rem;
  width: 2rem;
  background-color: #fff;
  border-radius: 1px; border: 1px solid #E3E3E3;
}

/* On mouse-over, add a grey background color */
.containercheck:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containercheck input:checked ~ .checkmark {
  background-color: #4BAA05;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containercheck input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containercheck .checkmark:after {
  left: 0.6rem;
  top: 0.3rem;
  width: 0.4rem;
  height: .8rem;
  border: solid white;
  border-width: 0 0.2rem 0.2rem 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media (max-width: 1600px) {
html { font-size:9.5px }
.mainbg { padding-top:14rem; min-height:70rem }
.mainbg .txt p { font-size:1.8rem }
}

@media (max-width: 1366px) {
html { font-size:9.5px }
.mainbg .img { width:50rem; }
.mainbg .txt { width:calc(100% - 50rem); }
.mainbg a { width:100% }
}

@media (max-width: 1170px) {
.lang { top: 9.4rem; right: 2.2rem; }
}

@media (max-width: 1024px) {
header { transition: .2s; padding:3.5rem 0 }
header .logo { width:30rem }
header .menu { display: none; }
.sticky header { padding:2rem 0 }
.sticky header .logo { width:25rem }
.sticky .cta { top:1.5rem!important }
.sticky .menuresponsive { top:2.5rem }

/*sidenav*/
.menuresponsive, .sidenav { display: block; }
.menuresponsive { transition: .2s; position:absolute; top:4rem; right:1rem }

#scrolling .cta { right:10rem }
#mySidenav { display: block; z-index: 1000;}
#mySidenav .closebtn img { width:3.5rem }
#mySidenav { height: 100%; width: 0; position: fixed; z-index:100; top: 0; right: 0; overflow-x: hidden; transition: 0.2s; }
.sidenav .bgcolor { width:0; opacity:.4; height:100vh; overflow: hidden; position:absolute; right:0 }
#mySidenav .bg { background: #671019;
background: linear-gradient(333deg, rgba(103, 16, 25, 1) 0%, rgba(22, 22, 22, 1) 100%);  overflow-y: scroll; width: 100%; margin: 0; height:100vh; padding:8rem 4rem }
#mySidenav .bg a, #mySidenav .bg p { color:#E4D8C2 }
#mySidenav .closebtn { position: absolute; top: 0; right: 0; padding: 2rem; text-align: right; margin:0; width:100% }
#mySidenav .bg li a { font-size:2rem; padding-bottom: 3rem; display:block; }
#mySidenav .bg li { margin:3rem 0; border-bottom:1px solid rgba(255, 255, 255, .2); }

.mainbg .img { width: 40%; object-position:85% }
.mainbg .txt { width:55% }
.mainbg .txt p { max-width:100% }
.t100 { font-size:8rem }

.bookstore .tx { width:100%; position:relative; text-align:center; }
#splide1 { width:100%; margin-top:4rem; margin-left:0; }
#splide1 .splide__pagination { display: block; text-align: center; width: 100%!important; bottom: -3rem; height: .9rem; z-index: 1}
#splide1 .splide__pagination__page { border-radius: 0; background: #6F5853; opacity: 0.4; width: .9rem; height: .9rem; border-radius: 50%; margin: 5px;cursor: pointer;display: block;}
#splide1 .splide__pagination__page:focus {outline: none;}
#splide1 .splide__pagination__page.is-active {background: #6F5853; opacity: 1; transform: inherit;}

.banner .cl { width:100%; max-width:60rem; margin:0 auto; text-align:center; }
.banner { background-color:transparent; }
.banner .cl:first-child { order:2; padding:4rem 0 1rem }
.banner .cl:last-child { order:3; padding:2rem 0 }

footer { margin-top:-2px }
footer .cl { width:100%; border:0; max-width:15rem; }
footer .flex { flex-direction:column; }
footer .cl:nth-child(1) { border-bottom:1px solid rgba(228, 216, 194, .2); padding-bottom:3rem; margin-bottom:3rem }
footer .cl:nth-child(2) { display:none; }

.pages .magazine.gallery .box { width:31.33% }

.book .buy .cta img { height:3rem }

.banner .cl.social a { justify-content:center; }

.lang { transition: .2s; top: 4.4rem; right: 19rem; }
#scrolling .cta { right:7rem }
.sticky .lang { top:2.8rem }
}

@media (max-width: 768px) {
html { font-size:9px }
.mainbg { padding:9.5rem 0 0; min-height:100vh; height: auto;}
.mainbg .txt { width:100% }
.mainbg .img { object-position: center; width:100%; height:20rem; position:relative; margin-bottom:5rem }
header .linea { display:none; }

.banner2 { flex-direction:column; min-height:auto }
.banner2 .txt { width:100%; margin: 0!important; padding:5rem 0 }
.banner2 img { position:relative; width:100% }

.tappe { border:1px solid #A18B80; margin-bottom:3rem; padding:3rem }
.tappe .period .circle { right:inherit; left:0; margin:0 }
.tappe .period .t25 { margin-left:3rem }
.tappe .period .circle { top:.8rem }
.tappe .period { width:100% }
.tappe .period .t25 { text-align:left; padding:0; }
.tappe .period::after { display:none; }
.tappe .txt { width:100%; padding-bottom:0; margin-top:1rem }

.pages .magazine .box { width:48% }
.pages .magazine.gallery { gap: 4% }
.pages .magazine.gallery .box { width:46%; margin-bottom:4% }

.ls { letter-spacing: -1.8px; }

.articolo .img { height:auto; }

.ckeditor ul, .ckeditor ol { margin-left:2rem }

.book .cover { width: 15rem; padding:0; background-color:transparent; align-items:flex-start; justify-content:flex-start; }
.book .txt { width: calc(100% - 18rem); }

.lang { right:20rem; top:4.2rem }
#scrolling .cta { right:7.5rem }
#scrolling .lang {  }
}

@media (max-width: 600px){
header { padding:3.5rem 0 }
.mainbg a img { width:2.5rem; margin:3rem 0 }
.credits { margin-top: 7rem; margin-bottom: 5rem; }

.t60 { font-size:5rem }
.t50 { font-size:4rem }

.pages .magazine.gallery .box { width:100%; max-width:40rem; margin-bottom:4rem }

.book { flex-direction:column; align-items:center; justify-content:center; }
.book .cover { max-width: 15rem; margin-bottom:3rem }
.book .txt { width: 100% }
.book .buy p { width:100% }
.book .buy .cta { margin:1rem 1rem 0 0 }

.form2 .cl50 { width:100% }
.button_invia { text-align:center; }

header .logo { width:24rem }

.loghi-footer .flex { gap: 1rem; flex-direction:column; margin-top:4rem }

.music { top:9rem }
}

@media (max-width: 495px){
.mainbg { padding-top:10.5rem }
#scrolling .cta { display:none; }
.mainbg .cta { display: flex; position: absolute; top: 18rem; left: 0; right: 0; z-index: 2; width: 10.5rem; text-align: center; margin: 0 auto; }
#splide1 .box { max-width:29rem; margin:0 auto; }
.pages .magazine .box { width:100% }
header .logo { width:25rem }

.lang { right:6.5rem }
}

/*gsap css*/
.fade-left { transform: translateX(-100%); opacity:0 }
.fade-right { transform: translateX(100%); }
.fade-in { transform: translateY(0); opacity: 0; }
.fade-in-down { transform: translateY(-100%); opacity: 0; }
.fade-in-up { transform: translateY(100%); opacity: 0; }
.bounce { transform: translateY(100px); }
.rotate { transform: rotate(-180deg); }
.swing { opacity: 0; transform: rotate(-10deg); }
.shake { opacity: 0; transform: translateX(0); }
.zoom-in { transform: scale(0); }
.zoom-out { transform: scale(2); }
.roll-in { transform: translateX(-100%) rotate(-360deg); }