body{font-family:'Lato',sans-serif;background-color:#f7f7f7}
body>header,body>main,footer{max-width:950px;margin:0 auto}
body>header .header-banner{background:no-repeat url(https://static.ranking-konsumencki.pl/img/top5.care/banner.jpg);background-position:0 0;background-size:cover;padding:15px;box-shadow:3px 3px 7px 0 rgba(0,0,0,0.25)}
body>header .header-banner h1{font-size:1.5rem;max-width:70%;font-weight:500;margin:0}
body>header .header-banner p{font-size:14px;max-width:65%;margin:0;padding:15px 0}
.header-top{margin-top:3rem;margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:center}
.header-top>div a img{height:60px}
.header-top>div p{border:1px solid transparent;padding:.5rem 1rem;margin:0;color:#343a40}
.product{display:flex;margin-top:1.5rem;border:solid 3px #E8E8E8;background:#FFF;box-shadow:3px 3px 7px 0 rgba(0,0,0,0.25)}
.product>div{padding:15px}
.product .col.img{text-align:center;width:20%;position:relative}
.product .col.img img{max-width:100%; width:100%;margin-top:3em}
.product .col.img .badge{position:absolute;left:0;top:0;background:#666;font-size:24px;font-weight:700;padding:5px 11px;color:#fff}
.product .col.img .badge.best{background:#F15A24}
.product .col.content{border-left:solid 1px #E8E8E8;width:60%;padding-left:3rem;padding-right:3rem; box-sizing: border-box}
.product .col.img h2{font-size:18px;font-weight:900}
.product .col.img h2 a{text-decoration:none;color:#212121}
.product .col.img h2 a:hover{text-decoration:underline}
.product .col.content p,.product .col.content ul{font-size:14px;color:#666}
.product .col.content p a{color:#F15A24;text-decoration:none}
.product .col.content p a:hover{text-decoration:underline}

.product .col.content .product-description{display: none}

.product .col.rating{width:20%;border-left:solid 1px #E8E8E8}
.rating-overal{text-align:center}
.rating-overal .rating-value{font-size:40pt;color:#666}
.rating-overal .rating-stars{width:105px;height:20px;margin:0 auto;background:url(https://static.ranking-konsumencki.pl/img/star-1.webp);background-size:contain}
.rating-characteristics{font-size:12px;color:#666}
.rating .rating-characteristics table{border-collapse:collapse;width:100%;margin-top:1rem;margin-bottom:1rem}
.rating .rating-characteristics table tr td{border-top:1px solid #dee2e6;padding:.3rem}
.rating .buy-it a{display:block;width:100%;color:#fff;background:#F15A24;text-align:center;text-decoration:none;line-height:1.5;border-radius:.2rem;font-size:.875rem;padding:.25rem .5rem;box-sizing:border-box;transition:.3s all ease-in}
.rating .buy-it a span{display:none}
.rating .buy-it a:hover{background:#f15a24d4;transform:scale(1.05)}
footer{display:flex;margin-top:1.5rem;border:solid 3px #E8E8E8;background:#FFF;box-shadow:3px 3px 7px 0 rgba(0,0,0,0.25);padding:15px;box-sizing:border-box}
footer .author.img{padding:15px;display:flex;align-items:center}
footer .author.description{padding:15px;display:flex;justify-content:flex-start;flex-wrap:wrap;align-content:center}
footer .author.description h5{font-size:20px;margin:5px 0}
footer .author.description p{font-size:14px;color:#666;margin:0}
.footer-note{max-width:900px;margin:1.5rem auto 3rem}
.footer-note p{font-size:14px;color:#666}

main .h2 h2{
    text-align: center;
    font-size: 1.1em;
    margin: 1.6rem 0 0rem 0
}

.ranking.product .col.content{
    width: 80%
}
.ranking.product .col.content h3 a{
    color: #222;
    text-decoration: none
}

.ranking.product .col.content h3 a:hover{
    text-decoration: underline
}
.ranking.product .col.img img{
    margin-top:0;
    width: 150%;
    max-width: 150%
}
.ranking.product .col.img a{
    display: block;  
    overflow: hidden;
    border-radius: 4px;
    line-height: 0;
    margin-top:1.5em
}

.ranking-bottom-description{
    margin-top: 1.5rem;
    padding:0 15px;
    border: solid 3px #E8E8E8;
    background: #FFF;
    box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.25)
}


.categories ul{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 5px;
  padding: 0;
  list-style-type: none;
  margin-top: 1.5rem;
  font-size: 0.9em
}

.categories li{
  
  background-color: #fff;
  text-align: center;
  border:1px solid #F15A24

}

.categories li.active{
  background: #F15A24
}

.categories li.active a{
  color:#fff
}

.categories li:hover{
  background: #F15A24;
  transition: all 0.3s ease-in
}

.categories li:hover a{
  color:#fff
}
.categories li a{
  display: block;
  color: #F15A24;
  padding: 10px 0;
  text-decoration: none
}

@media screen and (max-width: 768px) {
body>header,body>main,footer{max-width:94%}
.header-top{display:block;text-align:center;margin-top:1rem}
.header-top>div a img{height:45px}
body>header .header-banner,footer{box-shadow:none}
body>header .header-banner h1,body>header .header-banner p{max-width:100%}
body>header .header-banner h1{font-size:1.2rem;font-weight:600;text-align:center}
body>header .header-banner p{font-size:15px}
.product{display:block;box-shadow:none}
.product .col.img{width:100%;box-sizing:border-box}
.product .col.img h2{margin-bottom: 0; text-align:left}
.product .col.img img{max-width:100%;margin:0}
.ranking.product .col.content{width:100%}
.product .col.content{width:100%;padding:0 15px;border:0}
.product .col.content .product-benefits-disadvantages h3{margin:0}
.product .col.rating{width:100%;box-sizing:border-box}
.rating .buy-it a{text-transform:uppercase;font-weight:600;letter-spacing:3px;padding:14px;border-radius:10px;line-height:1.4}
.rating .buy-it a span{display:block;font-size:12px;font-weight:200;text-transform:none;letter-spacing:normal}
.rating .rating-characteristics table tr td{padding:.6rem}
.rating .rating-characteristics table td:nth-child(2){text-align: right}
.product .col.content ul{font-size: 15px}
footer{display:block}
footer .author.img{justify-content:space-around}
footer .author.description{text-align:center;justify-content:space-around}
.footer-note{max-width:80%;text-align:center}

.categories li a{
  padding: 2px 0
}

}