* {
    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 { letter-spacing: 1px; 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*/
.white { color: #fff }
.fff {color: #E4D8C2}
.bgredo { background-color:rgba(128, 38, 28, .76); }
.red { color:#B14B47 }
.red2 { color:#671019 }
.bgred { background-color:#B14B47 }
.bgred2 { background-color:#80261C }
.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 }
.t40 { font-size: 4rem }
.t25 { font-size: 2.5rem }
.t20 { font-size: 2rem }
.t18 { font-size: 1.8rem }
.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 { transition:.3s ; font-size: 1.4rem; 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; }

.tronca3 { width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; 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 { position: relative; z-index: 8; }
header { transition: .3s; padding: 4rem 0; position: relative; z-index: 2; align-items: center; flex-wrap: nowrap; align-items:center; }
header .logo { transition: .3s; width:39rem }
header.flex { justify-content:space-between; align-items:center;}
header.flex .div { gap: 2rem; display:flex; align-items:center; }
header.flex .div:first-child { align-items:flex-end; }
header.flex .lang { font-size: 1.4rem; color: #671019; display:flex; align-items:center; gap:.3rem }
header.flex .lang a { font-size: 1.4rem; color: #671019}
header.flex .lang a.active { font-weight:600 }
header.flex .lang a:hover { opacity:0.7 }

.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(228,216,194,1); }
.sticky header { padding: 3rem 0; }
.hidden-sticky { height:14rem }

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

.mainbg { padding: 0 4%; padding-top: 4rem; width: 100%; min-height:100vh; position:relative; text-align: center; flex-direction: column; display:flex; align-content:center; justify-content:center; }
.mainbg .bg { position: absolute; top: 0; left: 0;}
.mainbg .logo { opacity: .8!important; letter-spacing: -2px}

/* BOX LOGIN */
.boxlogin { margin-top: 4rem; position: relative; padding: 6rem 0; max-width: 70rem; }
.boxlogin .formlogin { margin: 0 auto; background-color: rgba(250, 243, 231, 0.9); padding: 3rem; box-shadow: 0 3px 20px rgba(0,0,0,0.16); transition: 0.3s; }
.tab-group { position: absolute; width: 100%; top: 1.7rem; left: 0; display: flex; justify-content: space-between; gap: 1rem; }
.tab-group li { width: 100%; }
.tab-group li a { display: block; padding: 1rem 1.5rem; text-align: center; font-weight: 500; text-transform: uppercase; font-size: 1.4rem; color: #E4D8C2; background-color: rgba(128,38,28,.3); border-radius: 0; border: 1px solid #E4D8C2; transition: 0.3s; }
.tab-group li a:hover { background-color: rgba(128,38,28,.8); }
.tab-group .active a { background-color: rgba(128,38,28,1); }
.tab-content p.mt3 a:hover { text-decoration: underline; }
.tab-content .flexin { display:flex; flex-wrap:wrap; justify-content:space-between; }
.tab-content .flexin .input { width:48%; }
.tab-content > div { display: none; }
.tab-content > div:first-child { display: block; }
.boxlogin .cta { font-weight: 500; width: 19rem; }
.boxlogin .input p { font-size: 1.6rem; text-align: left; margin: 2rem 0 0.5rem; color: #80261C; letter-spacing: 0.5px; }
.boxlogin .input input { width: 100%; padding: 1.4rem; border: none; border-radius: 0; font-size: 1.6rem; color: #333; }

.bgmarmo { min-height: 100vh; position: relative; z-index: 2; background-image:url(../img/marmo_beige.jpg); background-position:center top; background-repeat:repeat; background-size:100% }
.intro { margin: 1rem 0 6rem; position: relative; display: flex; background-color:rgba(255, 255, 255, .4); box-shadow: 0 0 20px rgba(0, 0, 0, .16); }
.intro .txt p { padding-left:2rem; border-left:7px solid #B14B47; }
.intro .txt { width: calc(100% - 30rem ); padding:3rem }
.intro img { top: 0; right: 0; height: 100%; position: absolute; width:30rem }

.menu-nav { padding: 1.5rem 0; background-color:#6F5853 }
.menu-nav .voci { align-items:center; gap:2rem }
.menu-nav .voci a { color:#E4D8C2; text-transform:uppercase; font-weight:500 }
.menu-nav .container { align-items:center; justify-content:space-between; }
.select-wrapper { position: relative; display: inline-block; }
.custom-select { color: #E4D8C2; background-color: #80261C; border: 1px solid #E4D8C2; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; padding: 1rem 1.5rem; border-radius: 0; font-size: 16px; appearance: none; width: 200px; }
.custom-select option { color: #E4D8C2; background-color: transparent; }
.select-wrapper::after { content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 10px; height: 6px; background-image: url('../img/select.svg'); background-size: contain; background-repeat: no-repeat; pointer-events: none; }

.boxes .box .bx { transition: .3s; margin-bottom: 2rem; flex-wrap: nowrap; gap: 2rem; justify-content: space-between; padding: 2rem; width:100%; background-color:rgba(255, 255, 255, .4); }
.boxes .box .bx .topic { text-align:right; }
.boxes { justify-content:space-between; }
.boxes .box { width:49% }
.boxes .box.w100 { width:100% }
.tit { display:flex; align-items:flex-start; gap:.8rem }
.tit img { margin-top:.6rem }
.cat { display:flex; align-items:flex-start; gap:.5rem }
.cat img { margin-top:.45rem }
.cat p { font-size:1.2rem; letter-spacing: .5px }
.cat img { width:.8rem }
.boxes .last-reply { display:flex; align-items:center; gap:.5rem }
.boxes .last-reply img { border-radius:50%; width:2rem }
.boxes .box .bx:hover { background-color:rgba(255, 255, 255, .5); box-shadow: 0 3px 10px rgba(0, 0, 0, .16); }

.avatar-initial { width: 30px; height: 30px; border-radius: 50%; background: #6f5853; color: #fff; display: flex; align-items: center; justify-content: center;font-size: 18px;font-weight: 600; text-transform: uppercase; }
.aggiungi, .back { display:flex; justify-content:center; align-items:center; }
.aggiungi img { width:1.8rem; margin-right:.8rem }
.back img { width:2rem }

.topic .menu-nav .voci { gap:1rem }

.info { justify-content:space-between; align-items:center; }
.info .i1 { align-items:center; gap:1rem}
.cta.ctaimg { display: flex; align-items:center; gap:.5rem }
.cta.bgredo { border: 1px solid #E4D8C2; }

.content-post { background-color:rgba(255, 255, 255, .4); padding:4rem; margin-bottom:2rem }
.content-post .bx { justify-content:space-between; gap:1.5rem; border-bottom: 2px solid #A18B80; padding-bottom:2.5rem; margin-bottom:2.5rem }
.content-post .bx .user { width: 5rem; border-radius:50%; }
.content-post .bx .txt { width: calc(100% - 21rem) }
.content-post .bx .data { width:15rem; text-align:right; }

.reply-space { background-color:#fff; min-height:20rem }

#formReply .cta { margin-top:2rem }

input#titolo { padding:1rem; border:1px solid #d1d1d1; border-bottom:0 }
input#titolo::placeholder { color:rgba(0, 0, 0, .3); font-style:italic; }

footer { margin-top: 8rem; 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*/
.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.1rem; height: 1.1rem; position:absolute; left:0; top:.8rem }
.ckeditor li { padding-left:2rem; 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 }

.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 }

/*checkbox*/
.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; }
.containercheck input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: -1px; left: 0; height: 2rem; width: 2rem; background-color: #fff; border-radius: 1px; border: 1px solid #E3E3E3; }
.containercheck:hover input ~ .checkmark { background-color: #ccc; }
.containercheck input:checked ~ .checkmark { background-color: #4BAA05; }
.checkmark:after { content: ""; position: absolute; display: none; }
.containercheck input:checked ~ .checkmark:after { display: block; }
.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: 1024px) {
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; }

header .logo { width:27rem }
header.flex .div:first-child { align-items:flex-end; }
header.flex .div p { line-height:1.1 }
}

@media (max-width: 768px) {
html { font-size:9.5px }
.mainbg .logo { font-size:12vw }
.boxlogin { width:100% }

.intro { flex-wrap:wrap; }
.intro .txt { width:100%; padding:2rem }
.intro img { width:calc(100% - 4rem); margin: 0 auto 2rem; position:relative; }

.boxes .box { width:100% }
header.flex .div .cta { display:none; }

/*sidenav*/
.menuresponsive, .sidenav { display: block; }
.menuresponsive { transition: .2s; }

#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-color: #6f5853; 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:1.6rem; padding-bottom: 2rem; display:block; color: #E4D8C2; text-transform: uppercase; font-weight: 500; }
#mySidenav .bg li { margin:2rem 0; border-bottom:1px solid rgba(255, 255, 255, .2); }

.hidden-sticky { height:12rem }

.content-post { padding:3rem }
}

@media (max-width: 600px){
header { padding:3.5rem 0 }
.tab-content .flexin .input { width:100% }
.boxlogin .formlogin { padding:2rem }
.boxlogin .input p { margin-top:1.5rem }
header { padding:2rem 0 }
header.flex .div:first-child { flex-direction: column; align-items:flex-start; gap:.5rem }
header.flex .forum { font-size: 1.6rem }
header.flex .logo { width:20rem }

.sticky header { padding:1.5rem 0 }
.container { padding-left:4%; padding-right:4% }
#mySidenav .bg { padding:8rem 4% }
.sticky { background-color: rgba(228,216,194,0.95); }
.menu-nav .voci li { display:none; }
.custom-select {font-size: 1.4rem}

.content-post { padding:2rem }
.content-post .bx .txt { width:calc(100% - 6.5rem); }
.content-post .bx .data { width:100% }
.content-post .bx .data p { font-size:1.4rem }

.t40 { font-size:3rem }
.t25 { font-size:2rem }
}

@media (max-width: 495px){

}

/*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); }