/* desktop */
@media (min-width: 1281px) {
    #navigation .wrapper {
        padding-right: 60px;
    }
}

/* laptops, desktop */
@media (min-width: 1025px) and (max-width: 1280px) {
    /* navigation */
    #navigation .wrapper {
        padding-right: 60px;
    }

    #navigation .menu ul li {
        margin: 5px 15px 0 0;
    }

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

    /* articles */
    #articles .card .thumbnail {
        width: 400px;
    }
}

/* tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    /* navigation */
    #navigation {
        background: #FFFFFF;
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 3px 0 rgba(0, 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: #FFFFFF;
        border-top: 1px solid rgba(0, 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-show,
    #navigation .menu-search,
    #navigation .menu-search .menu-search-show {
        display: block;
    }

    /* header */
    #header:before {
        display: none;
    }

    #header .content {
        margin: 28px 20px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.5);
    }

    #header .content:after {
        display: none;
    }

    #header:after {
        width: 100%;
    }

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

    /* tips */
    #tips .container .navigation ul li button {
        padding: 18px 16px;
        font-size: 15px;
    }

    #tips .container .navigation ul li button img {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 0 10px 0 0;
    }

    /* articles */
    #articles .information:before {
        display: none;
    }

    #articles .card .thumbnail {
        width: 300px;
    }

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

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

/* tablets portrait, mobile's landscape */
@media (min-width: 481px) and (max-width: 767px) {
    /* navigation */
    #navigation {
        background: #FFFFFF;
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 3px 0 rgba(0, 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: #FFFFFF;
        border-top: 1px solid rgba(0, 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-show,
    #navigation .menu-search,
    #navigation .menu-search .menu-search-show {
        display: block;
    }

    /* mobile navigation */
    #mobile-navigation {
        display: block;
    }

    /* header */
    #header:before {
        display: none;
    }

    #header .content {
        margin: 28px 20px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.5);
    }

    #header .content:after {
        display: none;
    }

    #header:after {
        width: 100%;
    }

    /* offers */
    #offers .card {
        margin-bottom: 30px;
    }

    #offers .card .container .position {
        display: block;
        margin: 0 auto;
        top: -25px;
        left: 0;
        right: 0;
    }

    #offers .card .container .symbol {
        width: auto !important;
        padding: 0 16px 0 0;
    }

    #offers .card .container .symbol:before,
    #offers .card .container .symbol:after {
        display: none;
    }

    #offers .card .container .symbol img {
        width: 100%;
        max-width: 180px;
        top: 0;
        vertical-align: middle;
    }

    #offers .card .container .symbol a {
        display: none;
    }

    #offers .card .container .details {
        display: none;
        width: 100%;
        padding: 0;
    }

    #offers .card .container .details:before,
    #offers .card .container .details:after {
        display: none;
    }

    #offers .card .container .details button {
        display: none;
    }

    #offers .card .container .options {
        display: table-cell;
        min-width: 0 !important;
        padding: 0 0 0 16px;
    }

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

    #offers .card .container .options .grade .score span.amount {
        font-size: 40px;
        padding: 0;
    }

    #offers .card .outlinks {
        display: block;
    }

    /* compare */
    #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.title,
    #compare .subjects .card .item ul li span.description {
        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;
    }

    /* tips */
    #tips .container,
    #tips .container .navigation,
    #tips .container .content {
        display: block;
    }

    #tips .container .navigation ul li button {
        font-size: 16px;
        padding: 9px 8px;
    }

    #tips .container .navigation ul li button img {
        width: 30px;
        height: 30px;
    }

    #tips .container .content {
        border-top: 0;
        border-left: 1px solid #CCCCCC;
    }

    #tips .container .content .item-block {
        position: relative;
    }

    #tips .container .content .item-block:after {
        opacity: 0.6;
        background-size: auto 60%;
    }

    #tips .container .content .item-block img {
        width: auto !important;
        height: 80% !important;
    }

    /* articles */
    #articles .information {
        margin: 0 0 25px;
    }
    #articles .information:before {
        display: none;
    }

    #articles .card,
    #articles .card .thumbnail,
    #articles .card .content {
        display: block;
        width: 100%;
    }

    #articles .card {
        margin: 20px 0;
        overflow: visible;
    }

    #articles .card:before {
        top: 50px;
        left: 10px;
        z-index: 9;
        width: 50px;
        height: 50px;
        background-size: 40px auto !important;
    }

    #articles .card .thumbnail:after {
        display: none;
    }

    #articles .card .thumbnail img {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
        height: 270px;
    }

    #articles .card .thumbnail a {
        position: relative;
        height: auto !important;
        padding: 15px 0;
        line-height: 1;
        background: #FE3367 !important;
        opacity: 1;
    }

    #articles .card .content ul {
        max-height: none;
    }

    /* article */
    #article .content {
        margin: 0 0 20px;
    }

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

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

/* mobile portrait */
@media (min-width: 0px) and (max-width: 480px) {
    /* navigation */
    #navigation {
        min-height: 56px;
        background: #FFFFFF;
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    }

    #navigation .wrapper {
        text-align: center;
    }

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

    #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 100%;
        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: #FFFFFF;
        border-top: 1px solid rgba(0, 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 #EEEEEE;
    }

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

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

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

    #navigation .menu-dark-mode {
        top: 10px;
        right: 10px;
    }

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

    /* mobile navigation */
    #mobile-navigation {
        display: block;
    }

    /* header */
    #header:before {
        display: none;
    }

    #header .content {
        margin: 28px 20px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.5);
    }

    #header .content p.description {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    #header .content:after {
        display: none;
    }

    #header:after {
        width: 100%;
    }

    /* offers */
    #offers .card {
        margin-bottom: 30px;
    }

    #offers .card .container .position {
        display: block;
        margin: 0 auto;
        top: -25px;
        left: 0;
        right: 0;
    }

    #offers .card .container .symbol {
        width: auto !important;
        padding: 0 16px 0 0;
    }

    #offers .card .container .symbol:before,
    #offers .card .container .symbol:after {
        display: none;
    }

    #offers .card .container .symbol img {
        width: 100%;
        max-width: 180px;
        top: 0;
        vertical-align: middle;
    }

    #offers .card .container .symbol a {
        display: none;
    }

    #offers .card .container .details {
        display: none;
        width: 100%;
        padding: 0;
    }

    #offers .card .container .details:before,
    #offers .card .container .details:after {
        display: none;
    }

    #offers .card .container .details button {
        display: none;
    }

    #offers .card .container .options {
        display: table-cell;
        min-width: 0 !important;
        padding: 0 0 0 16px;
    }

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

    #offers .card .container .options .grade .score span.amount {
        font-size: 40px;
        padding: 0;
    }

    #offers .card .outlinks {
        display: block;
    }

    /* compare */
    #compare {
        overflow-x: scroll;
    }

    #compare .subjects {
        text-align: left;
        width: auto !important;
        white-space: nowrap;
    }

    #compare .subjects .card {
        width: 70vw !important;
    }

    #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;
    }

    #compare .subjects .card .item ul li span.title,
    #compare .subjects .card .item ul li span.description {
        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;
    }

    #compare .subjects .card button {
        font-size: 12px;
    }

    /* tips */
    #tips h2 {
        font-size: 18px;
        min-height: 30px;
    }

    #tips h2:before {
        width: 30px;
        height: 30px;
        background-size: 30px 30px;
    }

    #tips .container,
    #tips .container .navigation,
    #tips .container .content {
        display: block;
    }

    #tips .container .navigation ul li button {
        font-size: 16px;
        padding: 9px 8px;
    }

    #tips .container .navigation ul li button img {
        width: 30px;
        height: 30px;
    }

    #tips .container .content {
        border-top: 0;
        border-left: 1px solid #CCCCCC;
    }

    #tips .container .content .item-block {
        position: relative;
    }

    #tips .container .content .item-block:after {
        opacity: 0.6;
        background-size: auto 60%;
    }

    #tips .container .content .item-block img {
        width: auto !important;
        height: 60% !important;
    }

    /* articles */
    #articles .information {
        margin: 0 0 25px;
    }

    #articles .information:before {
        display: none;
    }

    #articles .card,
    #articles .card .thumbnail,
    #articles .card .content {
        display: block;
        width: 100%;
    }

    #articles .card {
        margin: 20px 0;
        overflow: visible;
    }

    #articles .card:before {
        top: 50px;
        left: 10px;
        z-index: 9;
        width: 50px;
        height: 50px;
        background-size: 40px auto !important;
    }

    #articles .card .thumbnail:after {
        display: none;
    }

    #articles .card .thumbnail img {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
        height: 270px;
    }

    #articles .card .thumbnail a {
        position: relative;
        height: auto !important;
        padding: 15px 0;
        line-height: 1;
        background: #FE3367 !important;
        opacity: 1;
    }

    #articles .card .content ul {
        max-height: none;
    }

    /* article */
    #article .content {
        margin: 0 0 20px;
    }

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

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

    /* sitemap */
    #sitemap p.description {
        border: 0;
        padding: 0;
    }

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

    #sitemap ul.menu li {
        margin: 0;
    }

    #sitemap ul.brands {
        margin: 15px 0;
    }
}

@media (min-width: 0px) and (max-width: 400px) {
    /* breadcrumbs */
    #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;
    }
}