@media (min-width: 1281px) {
    .wrapper,.stats-container{
        max-width: 1200px;
    }
    #navigation .menu ul li a span, #navigation .menu ul li button span{
        font-size: 16px;
    }
    #top-offers .container .card:hover {
        transform:scale(1.05)
    }

    #top-offers .container .card .details p.description {
        height: 52px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    #home .articles .container .card:nth-child(4n+1) {
        margin: 0 10px 0 0
    }

    #home .articles .container .card:nth-child(4n+4) {
        margin: 0 0 0 10px
    }

    #banner.evaluate-banner .thumbnail {
        display: table-cell
    }

    #banner.evaluate-banner .details h1:before {
        display: none
    }

    #banner.evaluate-banner .details h2 {
        display: block
    }

    #banner.evaluate-banner .details h3 {
        display: block
    }

    #banner.evaluate-banner .details .rating {
        display: inline-block
    }
    #offers .subjects,#offers .details{
        max-width:1160px;
        padding: 0 20px;
    }
    #article #offers .subjects{
        padding:0;
        margin-left: 0;
        margin-right: 0;
    }
    .chart-label{
        font-size: 11px;
    }
    #article main{
        padding: 0 25px 0 0
    }
    #banner.article-banner .details .h1{
        font-size: 34px
    }
    #article article header{
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (min-width: 1025px) and (max-width:1280px) {
    #navigation .menu ul li {
        margin:5px 10px 0 0
    }
    #header .wrapper{
        clip-path: ellipse(80% 70% at 50% 30%); 
    }
    #top-offers .container .card:hover {
        transform: scale(1.05)
    }

    #top-offers .container .card .ribbon {
        font-size: 1.25vw
    }

    #top-offers .container .card .details p.description {
        height: 52px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
    #header.theme-teddy50 .hero-img{object-position: top center;}
    #offers .card .container .thumbnail {
        width: 250px
    }

    #compare .subjects .card {
        width: calc(33% - 16px)
    }

    #home .articles .container .card:nth-child(4n+1) {
        margin: 0 10px 0 0
    }

    #home .articles .container .card:nth-child(4n+4) {
        margin: 0 0 0 10px
    }

    #banner.evaluate-banner .thumbnail {
        display: table-cell
    }

    #banner.evaluate-banner .details h2 {
        display: block
    }

    #banner.evaluate-banner .details h3 {
        display: block
    }

    #banner.evaluate-banner .details .rating {
        display: inline-block
    }

    #offers .filter .content {
        padding: 15px
    }

    #offers .filter .content ul.prijsklasse {
        margin: 5px -5px 15px -5px;
        width: -webkit-fill-available
    }

    #offers .subjects, #offers .details {
        max-width: 960px;
        margin: 10px auto;
    }

    #top-offers .container {
        max-width: 960px;
        margin: auto
    }
    .ratings-charts{
        gap: 0.85rem;
    }
    #outlink{
        padding-left:25px;
        padding-right: 25px;
    }
    #compare .subjects .card .item ul.features{
        padding:  16px 6px 0
    }
    #compare .subjects .card .item ul.features li{
        padding: 8px 5px 8px 5px;
        margin: 0 0 8px 10px;
        width: calc(33.3% - 16px);
        max-width: unset;
    }
    #article main{
        padding: 0 20px 0 0
    }
    #banner.article-banner .details .h1{
        font-size: 34px
    }
    #article article header{
        display: flex;
        flex-direction: column-reverse;
    }
    body #article #sidebar.scrolled{
        left: calc(50% + 15%);
        max-width: 33.33333333%;
    }
    #article #offers .card .container .details{
        min-width: unset
    }
}
@media (min-width: 768px) and (max-width:1024px) {
    #navigation {
        background:#fff;
        -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
    }

    #navigation .wrapper {
        text-align: center
    }

    #navigation .logo {
        display: inline-block;
        float: none
    }

    #navigation .logo a img {
        filter: none!important
    }

    #navigation .logo span.slogan {
        display: none
    }

    #navigation .search {
        position: absolute;
        display: none;
        width: auto!important;
        height: 66px;
        top: 0;
        left: 8px;
        right: 8px;
        margin: 0 0 0 100%;
        float: none
    }

    #navigation .search input[type=text] {
        width: calc(100% - 24px);
        height: 66px;
        border: 0;
        font-size: 22px
    }

    #navigation .search .search-results .item span.title {
        font-size: 22px
    }

    #navigation .menu {
        position: absolute;
        display: none;
        width: 300px;
        height: 100vh;
        margin: 66px 0 0;
        padding: 0;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.15);
        text-align: left;
        top: 0;
        left: -300px;
        bottom: 0;
        overflow-y: auto
    }

    #navigation .menu ul li {
        display: block;
        margin: 0!important;
        padding: 5px 0;
        height: auto!important
    }

    #navigation .menu ul li:hover {
        background: #f4f4f4
    }

    #navigation .menu ul li a {
        padding: 0 8px
    }

    #navigation .menu ul li a:hover {
        border-bottom: 2px solid transparent;
        border-radius: 0
    }

    #navigation .menu ul li ul {
        position: relative;
        top: 0;
        white-space: normal;
        columns: 1;
        column-count: 1
    }

    #navigation .menu ul li ul li a {
        font-size: 14px;
        margin: 0;
        padding: 0 10px 0 0
    }

    #navigation .menu-search,#navigation .menu-search .menu-search-show,#navigation .menu-show {
        display: block
    }

    #header {
        min-height: 500px
    }

    #header:before {
        height: 40%!important
    }

    #header .thumbnail img {
        position: absolute;
        z-index: -1;
        opacity: .75;
        width: 45%;
        right: 0;
        bottom: 0
    }

    #top-offers .container .card {
        width: calc(33% - 20px);
        margin: 0 10px 20px
    }

    #top-offers .container .card:hover {
        transform: scale(1.05)
    }

    #top-offers .container .card:nth-child(1n+5) {
        display: none
    }

    #top-offers .container .card .ribbon {
        font-size: 1.5vw
    }

    #top-offers .container .card .details p.description {
        height: 52px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    #top-offers .container .card .details .btn-subject {
        background-size: 18px 18px;
        background-position: center right 8px
    }

    #offers .details h1 {
        font-size: 14px
    }

    #offers .details h2 {
        display: none
    }

    #offers .filter {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        z-index: 999;
        background-color: rgba(0,0,0,.5)
    }

    #offers .filter .content {
        position: absolute;
        display: block;
        width: 50%!important;
        min-width: 300px;
        height: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        padding: 16px 32px;
        background: #fff;
        overflow-y: scroll;
        -webkit-box-shadow: 5px 0 10px 0 rgba(0,0,0,.3);
        -moz-box-shadow: 5px 0 10px 0 rgba(0,0,0,.3);
        box-shadow: 5px 0 10px 0 rgba(0,0,0,.3)
    }

    #offers .card .container .thumbnail {
        width: 200px
    }

    #offers .card .container .details span.title[data-position="1"]::after {
        font-size: 12px
    }

    #offers .card .features .item .icon {
        display: block;
        margin: 0 auto
    }

    #offers .card .features .item .details {
        display: block
    }

    #offers .card .features .item .details span.name {
        text-align: center
    }

    #offers .card .features .item .details span.description {
        text-align: center
    }

    #compare .subjects .card {
        width: calc(50% - 16px)
    }

    #home .articles .container .card {
        width: calc(50% - 15px);
        margin-top: 10px;
        margin-bottom: 10px
    }

    #home .articles .container .card:nth-child(2n+1) {
        margin-right: 10px;
        margin-left: 0
    }

    #home .articles .container .card:nth-child(2n+2) {
        margin-left: 10px;
        margin-right: 0
    }

    #evaluate .experience table tr td input[type=text],#evaluate .experience table tr td textarea,#evaluate .impressions .item ul li input[type=text],#evaluate .personal table tr td input[type=email],#evaluate .personal table tr td input[type=number],#evaluate .personal table tr td input[type=text] {
        font-size: 16px
    }

    #article .content .options .item {
        display: block;
        text-align: left!important
    }

    #article article header{
        display: flex;
        flex-direction: column-reverse;
    }
    #article main{
        padding: 0 20px 0 0
    }
    
    body #article aside#sidebar.scrolled{
        left: calc(50% + 15%);
    }
    body #article #offers .card .container .details{
        min-width: unset;
    }
    
    #article .content .options .item:first-of-type {
        margin: 0 0 20px
    }

    #banner.article-banner .details .h1{
        font-size: 28px
    }

    #banner.evaluate-banner .thumbnail {
        display: table-cell
    }

    #banner.evaluate-banner .details h2 {
        display: block
    }

    #banner.evaluate-banner .details h3 {
        display: block
    }

    #banner.evaluate-banner .details .rating {
        display: inline-block
    }
    .chart-label {
        font-size: 9px;
      }
}

@media (min-width: 481px) and (max-width:767px) {
    #navigation {
        background:#fff;
        -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
    }

    #navigation .wrapper {
        text-align: center
    }

    #navigation .logo {
        display: inline-block;
        float: none
    }

    #navigation .logo a img {
        filter: none!important
    }

    #navigation .logo span.slogan {
        display: none
    }

    #navigation .search {
        position: absolute;
        display: none;
        width: auto!important;
        height: 66px;
        top: 0;
        left: 8px;
        right: 8px;
        margin: 0 0 0 100%;
        float: none
    }

    #navigation .search input[type=text] {
        width: calc(100% - 24px);
        height: 66px;
        border: 0;
        font-size: 22px
    }

    #navigation .search .search-results .item span.title {
        font-size: 22px
    }

    #navigation .menu {
        position: absolute;
        display: none;
        width: 300px;
        height: 100vh;
        margin: 66px 0 0;
        padding: 0;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.15);
        text-align: left;
        top: 0;
        left: -300px;
        bottom: 0;
        overflow-y: auto
    }

    #navigation .menu ul li {
        display: block;
        margin: 0!important;
        padding: 5px 0;
        height: auto!important
    }

    #navigation .menu ul li:hover {
        background: #f4f4f4
    }

    #navigation .menu ul li a {
        padding: 0 8px
    }

    #navigation .menu ul li a:hover {
        border-bottom: 2px solid transparent;
        border-radius: 0
    }

    #navigation .menu ul li ul {
        position: relative;
        top: 0;
        white-space: normal;
        columns: 1;
        column-count: 1
    }

    #navigation .menu ul li ul li a {
        font-size: 14px;
        margin: 0;
        padding: 0 10px 0 0
    }

    #navigation .menu-search,#navigation .menu-search .menu-search-show,#navigation .menu-show {
        display: block
    }

    #header {
        min-height: 375px!important
    }

    #header:before {
        height: 25%
    }

    #header .thumbnail img {
        position: absolute;
        z-index: -1;
        opacity: .5;
        width: 50%;
        max-width: 260px;
        right: 0;
        bottom: 0
    }

    #header .content {
        padding: 25px 0 0
    }

    #top-offers {
        margin: 0 0 50px
    }

    #top-offers .last-updated {
        display: inline-block
    }

    #top-offers .container {
        display: block!important
    }

    #top-offers .container .card {
        width: 100%;
        margin: 0 0 20px
    }

    #top-offers .container .card .ribbon {
        width: calc(50% + 12px)
    }

    #top-offers .container .card .grade {
        display: block
    }

    #top-offers .container .card .thumbnail {
        margin: 15px 0;
        padding: 0 15px 0 0
    }

    #top-offers .container .card .rating {
        padding: 0 15px 0 0
    }

    #top-offers .container .card .ratings {
        padding: 0 15px 0 0
    }

    #top-offers .container .card .details {
        padding: 0 0 0 15px;
        margin: 15px 0;
        border-left: 1px dashed #c5c5c5
    }

    #top-offers .container .card .details span.title {
        text-align: left
    }

    #top-offers .container .card .details p.description {
        height: auto!important;
        margin: 0 0 10px;
        padding: 0 25px 0 0;
        border: 0;
        text-align: left;
        font-style: normal
    }

    #offers .details h1 {
        font-size: 14px
    }

    #offers .details h2 {
        display: none
    }

    #offers .filter {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        z-index: 999;
        background-color: rgba(0,0,0,.5)
    }

    #offers .filter .content {
        position: absolute;
        display: block;
        width: 50%!important;
        min-width: 300px;
        height: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        padding: 16px 32px;
        background: #fff;
        overflow-y: scroll;
        -webkit-box-shadow: 5px 0 10px 0 rgba(0,0,0,.3);
        -moz-box-shadow: 5px 0 10px 0 rgba(0,0,0,.3);
        box-shadow: 5px 0 10px 0 rgba(0,0,0,.3)
    }

    #offers .filter .content select {
        font-size: 16px
    }

    #offers .card .container {
        display: block
    }

    #offers .card .container .symbol {
        display: block;
        margin: 0 auto;
        height: auto!important
    }

    #offers .card .container .thumbnail {
        display: block;
        margin: 0 auto;
        padding: 0 0 36px;
        width: 100%;
        height: auto!important
    }

    #offers .card .container .thumbnail .brand {
        width: 35%
    }

    #offers .card .container .thumbnail .btn-compare {
        height: 36px
    }

    #offers .card .container .thumbnail .btn-compare.active:after {
        line-height: 36px
    }

    #offers .card .container .details {
        display: block;
        margin: 20px 0 0;
        padding: 0
    }

    #offers .card .container .details span.title {
        text-align: center
    }

    #offers .card .container .details .review {
        text-align: center
    }

    #offers .card .container .details p.description {
        text-align: center
    }

    #offers .card .container .options {
        display: block
    }

    #offers .card .container .options .grade {
        margin: 25px 0 15px
    }

    #offers .card .features {
        display: block
    }

    #offers .card .features .item {
        display: block;
        width: 100%;
        padding: 0!important;
        margin: 0 0 10px;
        text-align: left;
        border-right: 0
    }

    #offers .card .features .item:last-of-type {
        margin: 0
    }

    #offers .card .features .item .icon {
        float: left
    }

    #offers .card .features .item .details {
        display: block;
        height: 32px
    }

    #offers .card .features .item .details span.name {
        display: inline-block;
        font-size: 16px;
        line-height: 32px
    }

    #offers .card .features .item .details span.description {
        display: inline-block;
        float: right;
        font-size: 16px;
        line-height: 32px
    }

    #home .reviews:after,#home .reviews:before {
        width: 20px
    }

    #home .reviews h2.title {
        font-size: 24px;
        text-align: left;
        padding: 0;
        font-weight: 500
    }

    #home .reviews span.description {
        text-align: left
    }

    #home .articles h3.title {
        font-size: 24px;
        text-align: left;
        padding: 0;
        font-weight: 500
    }

    #home .articles span.description {
        text-align: left
    }

    #home .articles .container .card {
        width: calc(50% - 15px);
        margin-top: 10px;
        margin-bottom: 10px
    }

    #home .articles .container .card:nth-child(2n+1) {
        margin-right: 10px;
        margin-left: 0
    }

    #home .articles .container .card:nth-child(2n+2) {
        margin-left: 10px;
        margin-right: 0
    }

    #review .content {
        margin: 0 0 20px!important;
        padding:20px 0
    }

    #review .content .compare {
        text-align: center
    }

    #review .content .compare button {
        float: none;
        margin: 20px 0 10px;
        width: 100%
    }

    #review .prices {
        margin: 0 0 20px!important
    }

    #review .faq {
        margin: 0 0 20px!important
    }

    #review .comments {
        margin: 0 0 20px!important
    }

    #review .direct {
        display: block
    }

    #compare .subjects .card {
        width: calc(50% - 16px)
    }

    #compare .subjects .card .item ul li {
        display: block;
        height: auto!important
    }

    #compare .subjects .card .item ul li span.description,#compare .subjects .card .item ul li span.title {
        display: block;
        text-align: left
    }

    #compare .subjects .card .item ul li .rating {
        margin: 0;
        float: none
    }

    #compare .subjects .card .item ul li span.description {
        margin: 5px 0
    }

    #articles .card {
        margin: 0 0 20px
    }

    #article .content {
        margin: 0 0 20px
    }
    #banner.article-banner {
        display: none;
    }
    #article .content .options .item {
        display: block;
        text-align: left!important
    }

    #article .content .options .item:first-of-type {
        margin: 0 0 20px
    }
    #article article header h1,#article article header .by-author-modular{
        background-color: #eef4f9;
        margin-top:0;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right:20px;
        padding-bottom: 20px;
        width: -webkit-fill-available;
    }
    #article{
        padding-top:0
    }
    #article article header h1{
        border-top: 1px solid #e5e7eb;
        margin-bottom: 0;
        padding-top: 20px;
        font-size: 34px;
        font-weight: 600;
        line-height: 40px;
        color:#323738
    }

    #evaluate .recommend .item {
        display: block;
        width: 100%
    }

    #evaluate .experience table tr td input[type=text],#evaluate .experience table tr td textarea,#evaluate .impressions .item ul li input[type=text],#evaluate .personal table tr td input[type=email],#evaluate .personal table tr td input[type=number],#evaluate .personal table tr td input[type=text] {
        font-size: 16px
    }

    #banner.evaluate-banner .details h1:before,#banner.subject-banner .details h1:before {
        display: none
    }

    #banner.evaluate-banner .details h2,#banner.subject-banner .details h2 {
        display: block
    }

    #banner.evaluate-banner .details h3,#banner.subject-banner .details h3 {
        display: block
    }

    #banner.evaluate-banner .details .rating,#banner.subject-banner .details .rating {
        display: inline-block
    }
}

@media (min-width: 0px) and (max-width:480px) {
    #navigation {
        min-height:56px;
        background: #fff;
        -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
    }
    body:not(body.active) #navigation.scrolled,body:not(body.active) #navigation.active{position:relative}

    #navigation .wrapper {
        text-align: center;
        max-width: 100%;
    }

    #navigation .logo {
        display: inline-block;
        float: none;
        height: 40px;
        object-fit: contain;
    }

    #navigation .logo a img {
        height: 40px;
        filter: none!important
    }

    #navigation .logo span.slogan {
        display: none
    }

    #navigation .search {
        position: absolute;
        display: none;
        width: auto!important;
        height: 56px;
        top: 0;
        left: 8px;
        right: 8px;
        margin: 0 0 0 90%;
        float: none
    }

    #navigation .search input[type=text] {
        width: calc(100% - 24px);
        height: 56px;
        border: 0;
        font-size: 22px
    }

    #navigation .search .search-results .item span.title {
        font-size: 22px
    }

    #navigation .menu {
        position: absolute;
        display: none;
        width: 300px;
        height: 100vh;
        margin: 56px 0 0;
        padding: 0;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.15);
        text-align: left;
        top: 0;
        left: -300px;
        bottom: 0;
        overflow-y: auto
    }

    #navigation .menu ul li {
        display: block;
        margin: 0!important;
        padding: 5px 0;
        height: auto!important
    }

    #navigation .menu ul li:hover {
        background: #f4f4f4
    }

    #navigation .menu ul li a {
        padding: 0 8px
    }

    #navigation .menu ul li a span {
        font-size: 18px;
        font-weight: 400!important
    }

    #navigation .menu ul li a img {
        margin: 8px 0 0;
        width: 24px!important;
        height: auto!important;
        filter: invert(22%) sepia(98%) saturate(1798%) hue-rotate(185deg) brightness(94%) contrast(103%)
    }

    #navigation .menu ul li a:hover {
        border-bottom: 2px solid transparent;
        border-radius: 0
    }

    #navigation .menu ul li ul {
        position: relative;
        padding: 0 0 0 3px;
        top: 0;
        white-space: normal;
        columns: 1;
        column-count: 1;
        border-radius: 0;
        box-shadow: unset
    }

    #navigation .menu ul:before {
        display: none
    }

    #navigation .menu ul li ul li {
        border: 1px solid #eee
    }

    #navigation .menu ul li ul li a {
        font-size: 14px;
        margin: 0;
        padding: 0 10px 0 0
    }

    #navigation .menu-search,#navigation .menu-search .menu-search-show,#navigation .menu-show {
        display: block;
        width: 20px;
        height: 20px;
        top: 18px
    }

    #navigation .menu-hide {
        width: 20px;
        height: 20px;
        top: 18px
    }

    #navigation .menu-hide button img,#navigation .menu-search button img,#navigation .menu-show button img {
        width: 20px;
        height: 20px
    }

    #header.theme-default {
        min-height: 300px!important;
        padding: 45px 0 5px;
    }
    #header.theme-default .wrapper{max-width:100%;min-width: unset;}
   #header.theme-default .hero-img{
        object-fit: cover;
        min-height: 85%;
        top: 55px;
    }
    
    #header:before {
        height: 20%!important
    }

    #header .content {
        padding: 0!important;
        margin: 10px auto 35px
    }
    #header.theme-default .content {
    margin: 40px 0 30px;
}#header.theme-default .content a{
        display: flex;
}
    body #top-offers h2.title, .section-title{
        font-size: 28px;
    }
    #header .content h1.title {
        font-size: 32px;
        max-width: 100%;
        min-width: unset;
        line-height: 40px;
        margin-bottom: 15px;
    }

    #header .content p.description {
        width: 80%
    }
    #header.theme-default .content p.description {
    margin: 0 0 20px;
}
    #header .content button {
        width: calc(50% - 10px);
        margin: 0;
        font-size: 5vw
    }

    #header .content .compare {
        float: right
    }
    #header.theme-default .content button.compare{
    margin: 0;
}
    #header .content .statistics {
        display: none
    }

    #header .thumbnail img {
        position: absolute;
        z-index: -1;
        opacity: .5;
        width: 60%;
        min-width: 180px;
        right: 0;
        bottom: -25px
    }

    #top-offers {
        margin: 10px 0 50px
    }

    #top-offers .last-updated {
        display: inline-block
    }

    #top-offers .container {
        display: block!important
    }

    #top-offers .container .card {
        width: 100%;
        padding: 10px 5px;
        margin: 0 0 20px
    }

    #top-offers .container .card .ribbon {
        width: calc(50% + 32px);
        font-size: 4.25vw;
        text-align: left;
        top: -6px;
        padding: 0 0 0 30px;
        border-radius: 4px 0 0 0
    }

    #top-offers .container .card .ribbon:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        line-height: 0;
        top: 0;
        right: -1px;
        border-color: #fff transparent;
        border-style: solid;
        border-width: 0 0 35px 26px;
        outline: 0
    }

    #top-offers .container .card .ribbon img {
        height: 20px;
        top: 6.5px;
        left: 7px;
        filter: brightness(0) invert(1)
    }

    #top-offers .container .card .grade {
        display: block;
        font-size: 15px;
        width: 62px
    }

    #top-offers .container .card .thumbnail {
        height: 90px;
        margin: auto 0;
        padding: 0 8px 0 0;
        border-bottom: 0;
        align-items: center;
    }

    #top-offers .container .card:first-child .thumbnail {
        margin: 30px 0 5px
    }

    #top-offers .container .card .thumbnail img {
        max-height: 70px;
        max-width: 110px
    }

    #top-offers .container .card .rating {
        padding: 0 8px 0 0
    }

    #top-offers .container .card .ratings {
        padding: 0 8px 0 0
    }

    #top-offers .container .card .details {
        padding: 0 0 0 15px;
        margin: 20px 0 15px;
        border-left: 1px solid #eaeaea
    }
    #top-offers .container .card .details:last-child{
        margin:0;
        border:0;
        padding: 0 5px;
    }
    #top-offers .container .card .details .btn-subject, #top-offers .container .card .details .reviews{
        display: inline-block;
        padding: 0;
        height: 40px;
        align-content: center;
    }
    #top-offers .container .card .details span.title {
        text-align: left
    }

    #top-offers .container .card .details p.description {
        height: auto!important;
        margin: 0 0 10px;
        padding: 0;
        border: 0;
        text-align: left;
        font-style: normal;
        font-size: 14px;
        font-weight: 300
    }

    #top-offers .container .card .details .btn-subject {
        width: 100%;
        margin: 0;
        padding: 0 27px 0 15px;
        background-size: 18px 18px;
        background-position: center right 8px
    }

    #offers .details h1 {
        font-size: 12px
    }

    #offers aside .details h2 {
        display: none;
    }

    #offers .filter {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        z-index: 999;
        background-color: rgba(0,0,0,.5);
        border-radius: 0;
    }
    #offers .filter[style="display: block;"]:after{
        content: "";
        position: absolute;
        background-color: #e5e5e5;
        background-image: url(/images/icons/menu/close.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
        width: 35px;
        height: 28px;
        left: 292px;
        top: 17px;
        transform: scale(1.5);
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    #offers .filter .content {
        position: absolute;
        display: block;
        width: 70%!important;
        min-width: 260px;
        height: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        padding: 16px 32px;
        background: #fff;
        overflow-y: scroll;
        -webkit-box-shadow: 5px 0 10px 0 rgba(0,0,0,.3);
        -moz-box-shadow: 5px 0 10px 0 rgba(0,0,0,.3);
        box-shadow: 5px 0 10px 0 rgba(0,0,0,.3)
    }

    #offers .filter .content select {
        font-size: 16px
    }

    #offers .card .container {
        display: flex;
        border-bottom: 0;
        padding: 15px 8px 0;
    }
    #article #offers .card .container{
        align-items: center;
    }
    #offers .card .container .symbol {
        display: inline-block;
        width: 90%;
        height: auto!important;
        margin: 0 0 0 11px;
        padding: 5px 0;
        border: 0
    }
    #article #offers .card .container .symbol{
        margin: 0;
        width: 100%;
    }

    #offers .card .container .symbol .inner-image{
        width: 100%;
        height: auto;
        position: relative;
        padding: 15px 15px 35px 15px;
        margin-top: 10px;
        margin-bottom: 0;
    }
    #offers .card .container .symbol img {
        width: 100%
    }

    #offers .card .container .thumbnail {
        display: block;
        width: 100%;
        height: auto!important;
        margin: 0 auto
    }

    #offers .card .container .thumbnail .brand {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
        padding: 5px 30px;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 30px 30px 0 0;
        background-color: #fff;
        height: 60px;
        line-height: 50px
    }

    #offers .card .container .thumbnail .brand:after {
        display: none
    }

    #offers .card .container .thumbnail .brand img {
        max-height: 50px;
        max-width: 130px
    }

    #offers .card .container .thumbnail .btn-compare {
        display: none
    }

    #offers .card .container .details {
        display: none;
    }
    #offers .card .container .options {
        display: inline-flex;
        width: 100%;
        padding: 15px 5px 0 20px;
        vertical-align: middle;
        flex-direction: column;
        align-items: flex-start;
    }

    #article #offers .card .container .options{
        min-width: unset;
        max-width: 100%;
        padding: 0 0 0 15px;
    }
    #article #offers .card .container .options > span{margin: auto;padding: 8px 6px;}
    body #offers .card .container .symbol .btn-compare{
        max-width: none;
        position: absolute;
        bottom: 5px;
    }
  #offers .card .category .options {
        display: block!important;
        margin: 20px 0 0;
        padding: 0
    }

    #offers .card .container .options .grade {
        margin: 0 5px 0 auto;
    }

    #offers .card .container .options .rating {
        display: inline-block;
        margin: 15px 20px 0 auto;
        transform: scale(1.2);
    }

    #offers .card .container .options .links {
        display: none
    }

    #offers .card .container .options .links button {
        float: right;
        display: block;
        width: calc(50% - 5px);
        font-size: 3.5vw;
        margin: 0;
        padding: 0 22px 0 10px;
        background-size: 12px 9px;
        background-position: center right 8px
    }

    #offers .card .outlinks {
        display: block;
        padding-bottom: 56px;
        border-top: 0;
    }
    #offers .card .outlinks span.slogan{
        margin: -5px 5px 15px 5px;
        font-size: 14.5px;
        font-weight: 500;
    }
    #offers .card .outlinks .buttons{
        display: flex;
        position: relative;
    }
    #offers .card .outlinks .buttons:after{
        content:"";
        position: absolute;
        left: -17px;
        right: -17px;
        bottom: -27px;
        height: 25px;
        background-color: #FFF;
        border-radius: 0;
        border-bottom-right-radius: 16px;
        border-bottom-left-radius: 16px;
        z-index: 1;
    }
    #offers .card.active .outlinks .buttons:after{
        right:-16px;
        left:-16px
    }
    #offers .card .outlinks .btn-subject{
        display: inline-block;
        line-height: unset;
        text-align: center;
        margin-left: 3%;
    }
    #offers .card .features {
        position: relative;
        display: none;
        padding: 0;
        border: 0
    }
    #offers .card .features.active{
        display:flex !important;
        flex-direction:column;
        padding: 0;
    }
    #offers .card .features.active .item:first-child,#offers .card .features.active .item:last-child{
        border-bottom: 0;
        border-top: 0;
    }
    #offers .card .features:before {
        position: absolute;
        content: '';
        display: block;
        width: 0;
        left: 0;
        right: 0;
        top: 0px;
        margin: 0 auto;
        border-right: 18px solid transparent;
        border-left: 18px solid transparent;
        border-top: 13px solid #f2f2f2;
    }

    #offers .card .features .item {
        display: block;
        width: 100%;
        padding: 7px 10px 7px!important;
        margin: 0;
        text-align: left;
        border-right: 0;
        border-bottom: 0;
        border-top: 0;
        border-radius: 0;
    }

    #offers .card .features .item:nth-child(even) {
        background: #f7f7f7
    }

    #offers .card .features .item:last-of-type {
        margin: 0
    }

    #offers .card .features .item .icon {
        float: left
    }

    #offers .card .features .item .details {
        display: block;
        height: 32px
    }

    #offers .card .features .item .details span.name {
        display: inline-block;
        font-size: 16px;
        line-height: 32px
    }

    #offers .card .features .item .details span.description {
        display: inline-block;
        float: right;
        font-size: 16px;
        line-height: 2
    }

    #offers .card .buttons .reviews {
        display: inline-block;
        margin: 0;
        flex-basis: 49%;
        line-height: 28px;
    }
    #offers .card .buttons a.reviews, #offers .card .buttons button.btn-subject{
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.3px;
        position: relative;
        z-index: 9;
    }
    #home .reviews:after,#home .reviews:before {
        width: 20px
    }

    #home .reviews h2.title {
        font-size: 24px;
        text-align: left;
        padding: 0;
        font-weight: 500
    }

    #home .reviews span.description {
        text-align: left
    }

    #home .articles h3.title {
        font-size: 24px;
        text-align: left;
        padding: 0;
        font-weight: 500
    }

    #home .articles span.description {
        text-align: left
    }

    #home .articles .container .card {
        width: 100%;
        margin: 15px 0!important
    }

    #review .content,#review .prices {
        margin: 0 0 20px!important;
        padding:20px 0
    }
    body #review #award .container{
        max-width: 100%;
    }

    #review .content .impressions .item {
        display: block;
        width: 100%;
        margin: 0 0 20px
    }

    #review .content .impressions .item span.title {
        margin: 0 0 10px
    }

    #review .content .compare {
        text-align: center
    }
    #review .features ul{
        flex-direction: column;
    }
    #review .features ul li{
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        padding: 6px;
        border-radius: 12px;
    }
    #review #award .container .card p{
        border-radius: 0 0 16px 16px;
    }
    #review .features ul li img{
        margin-left: 0;
        width: 40px;
        height: 40px;
        object-fit: contain;
        margin-right: 15px;
    }
    #review .features ul li span.name{
        text-align: left;
        margin-left: 0;
        font-size: 16px;
        width: 65%;
    }
    #review .content .compare button {
        float: none;
        margin: 20px 0 10px;
        width: 100%
    }

    #review .prices {
        margin: 0 0 20px!important
    }

    #review .prices table tr td,#review .prices table tr th {
        font-size: 12px
    }

    #review .faq {
        margin: 0 0 20px!important;
        padding: 35px 0;
    }

    #review .faq h2{
        font-size: 23px;
        word-spacing: -0.8px;
        color: #252530;
    }

    #review .comments {
        margin: 0 0 20px!important
    }

    #review .comments .review .strengths ul {
        display: block;
        width: 100%;
        margin: 0 0 20px;
        padding: 0
    }

    #review .comments .review .share {
        text-align: left
    }

    #review .comments .review .share li {
        display: inline-block;
        width: 50%;
        margin: 0!important;
        float: left!important
    }

    #review .comments .review .share li:nth-child(2n) {
        text-align: right
    }

    #review .direct {
        display: block
    }

    #compare{
        position: relative;
        display: block;
        overflow-x: visible;
    }

    #compare .subjects {
        display: grid;
        grid-auto-flow: column;
        overflow: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        text-align: left;
        white-space: nowrap;
        scroll-behavior: smooth;
    }
    #compare .subjects .card {
        display: block;
    }

    #compare .subjects .card, #compare .subjects .card .thumbnail.sticky, #sticky-thumbnails.sticky-thumbnails-mobile .thumbnail{
        width: 70vw!important;
        max-width: unset;
        height: max-content;
    }
    section.ios-helper{display: block;overflow-x: overlay;}
    section.ios-helper.scrolled{overflow-x: unset;}
    #compare .subjects .card .thumbnail, #compare .subjects .card .thumbnail.sticky{
        transition: none;
    }
    #compare .subjects .card .item h2,#compare .subjects .card .item h3,#compare .subjects .card .item h4,#compare .subjects .card .item h5 {
        font-size: 16px
    }

    #compare .subjects .card .item ul li {
        display: block;
        height: auto!important;
        font-size: 13px
    }

    #compare .subjects .card .item ul li span.description,#compare .subjects .card .item ul li span.title {
        display: block;
        text-align: left
    }
    #compare .subjects .card .thumbnail.sticky:after,body #sticky-thumbnails.sticky-thumbnails-mobile .thumbnail:after {
        content: "";
        position: absolute;
        background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0, transparent 100%);
        height: 10px;
        left: 0;
        right: 0;
        bottom: -10px;
        z-index: 999999;
    }
    body #sticky-thumbnails.sticky-thumbnails-mobile.sticky{
        display: flex;
        visibility: visible;
        padding: 0 20px;
        border: 0;
        background: transparent;
        opacity: 1;
    }
    body #sticky-thumbnails.sticky-thumbnails-mobile {
        position: sticky;
        top: 0;
        z-index: 1000;
        display: none;
    }
    body #sticky-thumbnails.sticky-thumbnails-mobile .thumbnail{
        display:flex;
        padding-top: 10px;
        background: #FFF;
        border-color: #e4e4e5;
        border-style: solid;
        border-width: 0 1px 0 1px;
        margin: 0 10px 20px 0;
        overflow: unset;
    }
    body #banner{
        min-height: 150px;
    }
    #compare .subjects .card .item ul li .rating {
        margin: 0;
        float: none
    }

    #compare .subjects .card .item ul li span.description {
        margin: 5px 0
    }
    #compare .subjects .card .item ul.summaries li span.description,#compare .subjects .card .item p.description{
        font-size: 15px;
    }
    #compare .subjects .card .item ul,#compare .subjects .card .item p.description{
        gap:6px;
        padding: 12px 10px;
    }
    #compare .subjects .card .item ul.features{
        padding: 12px 4px 0;
    }
    #compare .subjects .card .item ul.features li .description,#compare .subjects .card .item ul.features li .title{
        font-size: 12px;
    }
    #compare .subjects .card .item ul.features li .title{
        display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-spacing: -1px;
      text-transform: lowercase;
    }
    #compare .subjects .card .item ul.features li{
        white-space: nowrap;
        width: max-content;
        min-width: calc(33.3% - 8px);
        align-items: center;
        padding: 8px 4px;
        margin: 0 0 6px 6px;
        gap: 3px;
    }
    #compare .subjects .card button {
        font-size: 12px
    }
    .brand-selector-root .selectable{
        align-items: center;
        width: 48%;
    }
    body .brand-selector-root .selectable img{
         max-width: 100px;
        padding: 0 8px;
         margin: auto;
    }

    #articles .card {
        margin: 0 0 20px;
        display: inline;
    }
    #articles .full-article .card{
        display: block;
    }
    #articles .card .thumbnail {
        display: block;
        width: 100%;
        height: 150px;
        margin: 10px 0;
        padding: 0
    }
    
    #articles .full-article .card .thumbnail, #articles .card .thumbnail{
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        height: auto;
    }
    .thumbnail.flex-box.flex-align-center.flex-justify-center.sticky{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    #articles .full-article .card .thumbnail img, #articles .card .thumbnail img{
        object-fit: contain;
        width: 100%;
    }
    #articles .card .details {
        display: block;
        width: 100%
    }
    #article{
        padding-top:0
    }
    #article .content {
        margin: 0 0 20px
    }

    #article article header h1,#article article header .by-author-modular{
        background-color: #eef4f9;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right:20px;
        padding-bottom: 20px;
        width: -webkit-fill-available;
    }
    #article article header h1{
        border-top: 1px solid #e5e7eb;
        margin-bottom: 0;
        padding-top: 20px;
        font-size: 34px;
        font-weight: 600;
        line-height: 40px;
        color:#323738
    }
    #article article header .by-author-modular{
        border-bottom: 1px solid #e5e7eb;
        margin-top: 0;
    }   

    #article .content .options .item {
        display: block;
        text-align: left!important
    }

    #article .content .options .item:first-of-type {
        margin: 0 0 20px
    }
    #article .content,#article .content .details{
        padding:0
    }

    #banner.article-banner{
        display: none;
    }
    #evaluate .recommend .item {
        display: block;
        width: 100%
    }

    #evaluate .recommend .item ul li label img {
        width: 36px;
        height: 36px
    }

    #evaluate .impressions .item {
        display: block;
        width: 100%;
        padding: 0!important;
        border: 0!important
    }

    #evaluate .impressions .item:first-of-type {
        margin: 0 0 20px
    }

    #evaluate .personal table {
        table-layout: auto!important
    }

    #evaluate .personal table tr.credentials td {
        display: block;
        padding: 0 0 10px!important
    }

    #evaluate .experience table tr td input[type=text],#evaluate .experience table tr td textarea,#evaluate .impressions .item ul li input[type=text],#evaluate .personal table tr td input[type=email],#evaluate .personal table tr td input[type=number],#evaluate .personal table tr td input[type=text] {
        font-size: 16px
    }

    #banner {
        margin-top: 0;
    }
    #review #banner.scrolled{
        position: fixed;
        top:0;
        left: 0;
        right: 0;
        padding: 10px 20px;
        z-index: 99999;
        background-color: #f2f2f2;
        height: 60px;
        border-bottom: solid 1px rgb(228 228 229);
    }
    #review #banner.scrolled .details{
        display:none
    }
    #review #banner.scrolled .out-link{
        display: flex !important;
        background-color:#FFF;
        width: 50%;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
    }
    #review #banner.scrolled .out-link button{
        background-color: #dd3028;
        color: #FFF;
        border: 0;
        margin: auto;
        max-width: 172px;
        height: auto;
        font-size: 15px;
        line-height: 38px;
    }
    #review #banner.scrolled .thumbnail{
        background-color: #FFF;
        border-style: dashed;
        border-color: rgb(35 132 219);
        height: auto;
        max-height: 40px;
        padding: 6px 8px;
        width: auto;
        max-width: 40vw;
        min-width: 172px;
        align-items: center;
        overflow: hidden;
    }
    #review #banner.scrolled .thumbnail img{
        padding: 10px;
        max-width: 90%;
        margin: 0 auto;
    }

    #banner.evaluate-banner .details h2,#banner.subject-banner .details h2 {
        display: block
    }

    #banner.evaluate-banner .details h3,#banner.subject-banner .details h3 {
        display: block
    }

    #banner.evaluate-banner .details .rating,#banner.subject-banner .details .rating {
        display: inline-block
    }

    footer p.description {
        border: 0;
        padding: 0
    }

    footer span.title {
        margin: 10px 0 5px;
        padding: 15px 0 0;
        border-top: solid 1px rgba(255,255,255,.25)
    }

    footer ul.menu li {
        margin: 0
    }

    footer ul.brands {
        margin: 15px 0
    }

    .theme-advisor .content p.description {
        width: 100%!important
    }

    .theme-advisor .thumbnail {
        display: none!important
    }
    #offers .details.banner.scrolled{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        padding: 10px 20px;
        background-color: #FFF;
        z-index: 999;    
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2) !important;
        -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)!important;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)!important;
    }
    #outlink #clear-compare{
        top:0;
        right:0;
    }
    #outlink .item.symbols{
        padding-left: 20px;
    }
}

@media (min-width: 0px) and (max-width:400px) {
    #header .content h1.title {
        font-size:23px
    }

    #header .content p.description {
        font-size: 15px
    }

    #breadcrumbs ul li:first-child {
        display: none
    }

    #breadcrumbs ul li:nth-child(2):before {
        display: none
    }

    #breadcrumbs ul li a,#breadcrumbs ul li span {
        font-size: 12px
    }

    #review .comments .review .details .rating .stars,#review .comments .review .details .rating .stars-filled:before {
        margin: 15px 0
    }

    #review .comments .review .details .rating .stars,#review .comments .review .details .rating .stars-filled:before,#review .comments .review .details .rating .stars:before {
        font-size: 18px
    }

    #evaluate .questions ul li {
        text-align: center
    }

    #evaluate .questions ul li span.title {
        display: block;
        margin: 10px 0 0;
        line-height: 1;
        font-weight: 500
    }

    #evaluate .questions ul li .stars {
        display: block;
        float: none!important
    }

    #compare .subjects .card button {
        font-size: 2.75vw
    }
}

@media (min-width: 0px) and (max-width:370px) {
    #top-offers .container .card .details .btn-subject {
        font-size:4vw!important
    }
}