@charset "utf-8";

:root {
  --verde:      #1a5c38;
  --crema:      #f0ede6;
  --crema-dark: #e8e0d5;
  --terracotta: #c8441a;
  --oro:        #c9980a;
  --inchiostro: #1a1a18;
  --grigio:     #4a4a42;
}

/* CSS Mini Reset */
html, body, div, form, fieldset, legend, label, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, footer, header, nav {margin: 0; padding: 0;}
table {border-spacing: 0; border-collapse: collapse;}
li {list-style: none;}
a, a:hover {text-decoration: none; outline: none;}
th, td {text-align: left; vertical-align: top;}
img, fieldset {border: 0; height: auto;}
h1, h2, h3, h4, h5, h6, th, td, p, caption {font-weight: normal; font-size: 1em;}
footer, header, nav, section {display: block;}

#main img, #main object {max-width: 100%;}
.clear {clear:both;}
.thin {font-weight:300;}
.small {font-size:12px; line-height:16px;}
strong, .strong {font-weight:700;}
.left {float:left;}
.center {margin:0 auto; text-align:center;}
.right {float:right;}
.block {display:block;}
.relative {position:relative;}

.left50 {width:48.5%; float:left;}
.right50 {width:48.5%; float:right;}

.txt-center {text-align:center;}
.txt-right {text-align:right;}

.img-responsive {max-width: 100%; display:block; height: auto;}

body {height:100%; font-size:14px; line-height:16px; color:var(--inchiostro); text-align:left; background-color:#ffffff;}
html {height:100%;}

body, input, textarea, select, button {font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;}

a {color:var(--verde);}

iframe {display:block;}
big {font-size:16px; color:var(--inchiostro); font-weight:600;}

p {margin-top:0; font-size:16px; line-height:24px; color:var(--grigio);}
p+p {margin-top:16px;}

/* Header */
.header {box-sizing:border-box; background: linear-gradient(to right, #ffffff 50%, #d6bca7 50%); position:relative; width:100%;}
.logo img {margin-top:30px;}
#main .logo img {max-width:180px;}
.header h1 {margin-top:120px; margin-bottom:30px; padding-right:20px;}
.header p {margin-bottom:30px; padding-right:20px;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;text-decoration:none;font-weight:500;color:#fff;background:var(--verde); transition: all 0.8s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0);}
.btn img{}
.btn:hover,.btn:focus{transform:translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.15);}
.btn-primary{background:var(--verde);font-weight:700;padding:16px 25px 16px 32px;gap:16px;border-radius:99px;font-size:16px;flex-direction:row;text-transform:uppercase;}
.btn-primary img{display:inline-block;transform-origin:50% 0}
.btn-primary:hover img{animation:ring .6s ease-in-out}
@keyframes ring {
  0%{transform:rotate(0deg)}
  20%{transform:rotate(15deg)}
  40%{transform:rotate(-10deg)}
  60%{transform:rotate(7deg)}
  80%{transform:rotate(-4deg)}
  100%{transform:rotate(0deg)}
}

.btn-secondary{background:#ffffff;padding:18px 27px 18px 22px;gap:19px;font-weight:600;border-radius:55px;font-size:18px;flex-direction:row;color:var(--inchiostro); box-shadow: 4px 4px 58px 0px rgba(0,0,0,0.12);}
.btn-secondary:hover {background:var(--crema);}
.btn-header-first {position:absolute; top:50px; left:-30px;}
.btn-header-second {position:absolute; bottom:110px; right:0px;}

/* Marquee */
.marquee{overflow:hidden;background:var(--crema);}
.track{display:flex;animation:scroll var(--duration) linear infinite}
.item{flex:0 0 var(--item-width,25vw);padding:1.3rem 2rem;font-size:13px;text-transform:uppercase;font-weight:600;box-sizing:border-box;text-align:center}
.item img{width:18px;vertical-align:-3px;margin-right:10px}
@keyframes scroll {
  from{transform:translateX(0)}
  to{transform:translateX(var(--shift))}
}

@media only screen and (min-width: 75em) {
  .p80-center {margin-left:auto; margin-right:auto; width:88%;}
}

/* Headings */
h1, .h1 {font-size:63px; line-height:68px; color:var(--inchiostro); font-weight:700; letter-spacing:-1px;}
h2, .h2 {font-size:32px; line-height:38px; color:var(--inchiostro); font-weight:600;}
h3, .h3 {font-size:24px; line-height:32px; font-weight:600; letter-spacing:1px;}
h4, .h4 {font-size:17px; line-height:22px; color:var(--grigio); font-weight:normal;}
h5 {font-size:16px; line-height:20px; color:var(--grigio); padding:4px 0 12px 0; font-weight:normal;}
h6 {font-size:16px; line-height:18px; font-weight:normal;}

.hero-section {}
.hero-section h2 {margin:20px 0 30px 0;}

/* Magic table */
table{margin-top:40px;margin-bottom:10px;width:100%; border-collapse: separate; border-spacing: 0; table-layout:fixed;}
th,td{padding:10px;text-align:left;vertical-align:middle;font-size:13px;height:100%; word-break: break-word; overflow-wrap: break-word;}

.gutter{width:15px;padding:0;border:none;background:transparent}
.gutter-horizontal{height:15px;padding:0;border:none;background:transparent}
.gutter-horizontal td {height:15px;padding:0;border:none;background:transparent}

thead th{background:var(--crema);border:2px solid var(--crema);color:var(--inchiostro);text-align:center;font-weight:600;font-size:17px;line-height:20px}
thead tr:nth-child(2) th.feature-head{background:#ffffff;border:2px solid var(--crema-dark);font-weight:500;padding:8px 6px;font-size:11px;line-height:12px;}
thead th.col-main em{font-weight:400;font-style:normal}

tbody td{background:none;color:var(--inchiostro);border:2px solid var(--crema-dark);height:100%;}
tbody td.col-rank{border:none;}
td.border {position:relative;}

thead th {position: sticky; top: -1px; z-index: 2;}
thead th.feature-head {position: sticky; top:20px;}

.col-price {line-height:1; font-size:14px; font-weight:500; text-align:center;}
.col-price strong {font-size:28px; font-weight:600;}

.product-box {padding: 15px; text-align:center;}
.product-box img{width:100%}
.product-title{font-size:15px;line-height:1.1; font-weight:400;}
.product-title strong {font-size:17px; font-weight:700; display:block; margin-bottom:6px; margin-top:25px;}

.div-table {height:100%; display:flex;flex-direction:column; text-align:center;}
.div-table-row1 {flex:1;display:flex;align-items:center;justify-content:center; font-size:12px; line-height:16px; padding:10px; word-wrap:break-word; overflow-wrap:break-word;}
.div-table-row2 {font-size:10px;text-align:center;padding:4px 0 8px 0; color:var(--grigio);}
.div-table-row2 strong {font-size:14px; font-weight:700; display:inline-block; background:var(--crema); padding:3px 4px; border-radius:2px;}

.rating-stars {text-align:center;}
.star {vertical-align:middle; margin:0 1px; width:14px;}
.star.empty {vertical-align:-4px;}

.rating-points {text-align:center; font-size:14px; font-weight:600; margin-top:35px;}
.rating-points strong {font-size:32px; font-weight:600;}

.rating-label {font-size:10px; font-weight:600; letter-spacing:0; text-transform:uppercase; color:var(--inchiostro); background:var(--crema); border-radius:5px; padding:5px 8px; margin:10px auto 0 auto; text-align:center;}

.rating-place {font-size:34px; font-weight:700; text-align:center; color:var(--inchiostro); padding:20px 0;}
.rating-place.first-place {background-image:url(../img/ico-rating-gold.svg); background-repeat:no-repeat; background-position:center center; background-size:contain; min-height:70px; margin-bottom:10px; color:var(--oro); box-sizing:border-box;}
.rating-place.second-place {background-image:url(../img/ico-rating-silver.svg); background-repeat:no-repeat; background-position:center center; background-size:contain; min-height:70px; margin-bottom:10px; color:#989db1; box-sizing:border-box;}
.rating-place.third-place {background-image:url(../img/ico-rating-brown.svg); background-repeat:no-repeat; background-position:center center; background-size:contain; min-height:70px; margin-bottom:10px; color:var(--terracotta); box-sizing:border-box;}

@media (max-width: 1240px) {
  thead tr:nth-child(2) th.feature-head{padding:8px 4px;font-size:9px;font-weight:400}
}

/* Footer */
.footer {background:var(--crema); padding:25px 0 35px 0; margin-top:30px;}
.footer a {font-size:16px; color:var(--inchiostro);}
@media only screen and (min-width: 75em) {
  .footer a {display:inline-block; margin-right:60px;}
}
@media only screen and (max-width: 75em) {
  .footer a {display:block; margin:10px auto; text-align:center;}
}
.copyright {margin-top:20px; font-size:14px; line-height:22px; color:var(--grigio);}

/* Accordion */
.accordion{max-width:600px;margin:20px auto;color:var(--inchiostro);border:1px solid var(--crema-dark);border-radius:2px;overflow:hidden}
.accordion input{display:none}
.accordion-label{display:flex;justify-content:space-between;align-items:center;background:var(--crema);cursor:pointer;padding:16px 20px;font-size:16px;font-weight:500;border-bottom:1px solid var(--crema-dark);transition:background .2s}
.accordion-label:hover{background:#e4dfd6;}
.accordion-label .icon{transition:transform .3s ease}
.accordion-content{max-height:0;overflow:hidden;background:#fff;padding:0 20px;font-size:14px;line-height:1.5;transition:max-height .4s ease,padding .3s ease}
.accordion-content p{margin:0}
.accordion-content p + p{margin-bottom:20px}
.accordion input:checked + .accordion-label + .accordion-content{max-height:500px;padding:16px 20px}
.accordion input:checked + .accordion-label .icon{transform:rotate(180deg)}

/* Container / Grid */
.container-fluid {padding-right: 2rem; padding-left: 2rem;}
.container, .container-fluid {margin-right: auto; margin-left: auto;}
.wrap {box-sizing: border-box; max-width: 1400px; margin: 0 auto;}

/* md - 75em */
@media only screen and (max-width: 75em) {
  h1, .h1 {font-size:42px; line-height:1; letter-spacing:-3px;}
}

@media only screen and (min-width: 999px) {
  td.border:not(.border-last):not(.col-price), tr th.feature-head:not(:last-child) {border-right:0 !important;}
}

@media only screen and (max-width: 1000px) {
  table, thead, tbody, th, td, tr {display: block;}
  thead {display: none;}
  tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 4px;
    margin: 1rem 0;
  }
  td {border: none; padding: 6px; text-align: center;}

  .rating-place.first-place {margin-bottom:0;}
  .rating-stars {height: 22px;}
  .rating-points {margin:0;}
  .rating-label {background:#ffffff;}

  td:nth-child(1)  { grid-column: 1 / -1; }
  td:nth-child(3)  { grid-column: 1 / -1; }
  td:nth-child(5)  { grid-column: 1; }
  td:nth-child(6)  { grid-column: 2; }
  td:nth-child(7)  { grid-column: 1; }
  td:nth-child(8)  { grid-column: 2; }
  td:nth-child(9)  { grid-column: 1; }
  td:nth-child(10) { grid-column: 2; }
  td:nth-child(11) { grid-column: 1; }
  td:nth-child(12) { grid-column: 2; }

  .col-rank {background:var(--crema);}
  .rating-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    text-align: center;
    gap: 6px;
    margin-bottom:-15px;
  }
  .rating-grid > div {}
  .rating-place  { grid-column: 1; grid-row: 1; margin-top:15px;}
  .rating-stars  { grid-column: 1; grid-row: 2; }
  .rating-points { grid-column: 2; grid-row: 1; align-self: end; position: relative; top: -25px;}
  .rating-label  { grid-column: 2; grid-row: 2; font-size:13px; letter-spacing:1px; position: relative; top: -25px;}

  .product-box {display:flex; align-items:center; gap:10px;}
  .product-box img {width:140px;}
  .product-box .product-title {width:calc(100% - 140px);}

  .div-table-row1 {flex-direction:column; background:var(--crema); border-radius:2px; font-weight:bold; box-sizing:border-box; padding:6px 10px; font-size:13px;}
  .div-table-row1:before, .col-price > div:before {
    content: attr(data-label);
    display: block;
    font-weight:normal;
    margin-bottom: 0.3em;
  }
  .col-price > div:before {margin-bottom:8px;}
  .col-price > div {flex-direction:column; background:var(--crema); border-radius:2px; font-weight:bold; box-sizing:border-box; padding:25px 0; font-size:13px;}
  .div-table-row2 {margin-top:6px;}
  .div-table {position:relative; height:100%;}
  td.gutter {display:none;}
  tr.gutter-horizontal td {border:0;}
  tbody td {border-bottom:0; border-top:0;}
  td.border {height:auto;}
  .border:not(.border-odd) {border-left:0;}
  .border.border-odd {border-right:0;}
  .border-last {padding-bottom: 20px;}
  tr {border-bottom:2px solid var(--crema-dark);}
}

/* sm - 62em */
@media only screen and (max-width: 62em) {
  .header {background:var(--crema);}
  .logo img {margin-top:20px;}
  .header h1 {margin-top:30px; margin-bottom:20px;}
  .header p {margin-bottom:25px;}
  h1, .h1 {font-size:32px; line-height:1; letter-spacing:-3px;}
  h2, .h2 {font-size:32px; line-height:38px;}
  .btn-secondary{padding:15px 24px 15px 18px;gap:16px;font-size:13px;}
  .btn-secondary img {width:20px;}
  .btn-header-first {position:absolute; top:auto; left:10px; bottom:25%;}
  .btn-header-second {position:absolute; bottom:10%; right:10px;}
  .item {white-space:nowrap;}
}

/* xs - 48em */
@media only screen and (max-width: 48em) {
  .btn-primary{font-size:12px;}
  .btn-secondary{gap:14px;font-size:12px;}
  .product-box img {width:100px;}
  .product-box .product-title {width:calc(100% - 100px);}
  .product-title {font-size:12px;}
  .product-title strong {font-size:13px;}
}

.hero-section table {
  all: unset !important;
  display: table !important;
  width: auto !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-size: inherit !important;
  font-family: inherit !important;
  text-align: left !important;
}
.hero-section table th,
.hero-section table td {
  all: unset !important;
  display: table-cell !important;
  padding: 0.5em !important;
  border: 1px solid var(--crema-dark) !important;
  vertical-align: middle !important;
  text-align: left !important;
}
.hero-section table thead {
  all: unset !important;
  display: table-header-group !important;
}
.hero-section table tbody {
  all: unset !important;
  display: table-row-group !important;
}
.hero-section table tr {
  all: unset !important;
  display: table-row !important;
}

ul {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
}
ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}
ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.15em;
  color: var(--verde);
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1;
}