@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;400;600&display=swap');

:root{

    /* fonts */
    --font-primary:'Jost', sans-serif;
    --font-secondary:'Jost', serif;

    /* colors */
    --theme-primary: #F1623A;
    --theme-primary-faded: #F89734;
    --theme-secondary: #725590;
    --theme-danger: #fb3c3b;
    --theme-success: #04A761;
    --theme-light: #FFFFFF;
    --theme-gray: #F1F1F5;
    --theme-dark: #393e46;
    --theme-dark-faded: #666;
}

body {
    font-family:var(--font-primary);
    font-size:1rem;
}

@media (min-width: 1200px) { .container { max-width: 1024px; } }
#mobile-menu { display:none; }

/* HEADER */
#head1 {
    padding:1.5rem 0px;
}

    #head1 a {
        color:var(--theme-dark);
        font-weight:bold;
    }

    .logo { height:58px; }

    #header-search input {
        width:520px;
        height:52px;
        padding:0px 1rem;
        border:2px solid white;
        outline:none;
        background:var(--theme-gray);
        font-size:1.1rem;
        color:#666;
    }

    #header-search input:focus {
        border:2px solid #F89734;
    }

    #header-search button {
        top: calc(50% - 11px);
        margin-left:10px;
        border:none;
        padding:0;
        background:none;
        font-size:1.3rem;
        color: var(--theme-primary);
    }

#head2 {
    font-size:1.05rem;
}

    #head2 a {
        color:black;
    }

    #primary-menu ul {
        list-style-type:none;
        margin:0px;
        padding:0px;
    }

    #primary-menu ul li {
        display:inline-block;
    }

    #primary-menu ul li a {
        font-weight: 600;
        display: block;
        padding:.3rem .65rem;
    }

    #primary-menu ul li a:hover,#primary-menu ul li a.active {
        text-decoration:none;
        background:#393e46;
        color:white;
    }

    #primary-menu ul li a:after {
        content: "";
        background: var(--theme-dark);
        display: block;
        height: 2px;
        width: 100%;
        position: static;
    }

    #primary-menu ul li ul {
        position:absolute;
        background: var(--theme-dark);
        padding:0.4rem 0;
        display:none;
        min-width:130px;
        z-index:100;
    }

    #primary-menu ul li ul li {
        display:block;
    }

    #primary-menu ul li ul li a {
        font-weight:normal;
        font-size:0.95rem;
        display:block;
        padding:0.15rem 0.65rem;
        color:white;
    }

    #primary-menu ul li ul li a:hover {
        text-decoration:underline;
    }

    #secondary-menu ul {
        list-style-type:none;
        margin:0px;
        padding:0px;
    }

    #secondary-menu ul li {
        display:inline-block;
    }

    #secondary-menu ul li a {
        color:var(--theme-secondary);
    }

.disclaimer {
    color:var(--theme-primary);
    font-size:0.9rem;
    display:block;
    margin:1rem 0 1.3rem 0;
}

.disclaimer a {
    font-weight:bold;
    color:var(--theme-primary);
}
/* END HEADER */

/* CONTENT */
#main {
    margin-bottom:2rem;
}

#category-header {
    padding-bottom:2rem;
    border-bottom:3px solid var(--theme-primary);
}

#category-header h1 {
    font-size:3.2rem;
    letter-spacing:-1px;
    font-weight:800;
    margin-bottom:0.2rem;
}

#category-header p {
    font-size:1.4rem;
    color:var(--theme-dark);
}

.category-subcategory {
    margin-top:2rem;
    padding-bottom:1rem;
    border-bottom:3px solid var(--theme-dark-faded);
}

.category-subcategory h2 {
    font-size:2rem;
    font-weight:bold;
    margin-bottom:0;
}

.category-subcategory a {
    color:var(--theme-dark);
    text-decoration:underline;
}

.category-subcategory a:hover {
    color:var(--theme-dark-faded);
}

.col-article {
    margin-top:2rem;
    margin-bottom:1rem;
}

    .col-article img {
        width:100%;
        height:200px;
        object-fit: cover;
        border:1px solid #efefef;
    }

    .col-article h3 {
        font-size:1.5rem;
        letter-spacing:-1px;
        font-weight:600;
        margin-top:0.8rem;
        margin-bottom:0.3rem;
        text-transform: capitalize;
    }

    .col-article .date {
        text-transform: uppercase;
        font-size:0.8rem;
        font-weight:600;
        color:var(--theme-secondary);
        display:block;
        margin-bottom:0.6rem;
    }

    .col-article .author {
        font-size: 0.85rem;
        font-weight: 600;
        display: block;
        margin-bottom:0.6rem;
    }

    .col-article .author a {
        text-decoration:none;
        var(--theme-dark);
    }

    .col-article h3 a {
        text-decoration:none;
    }

    .col-article .intro a {
        color:var(--theme-primary);
    }


#breadcrumb {
    text-transform: uppercase;
    margin-bottom:1rem;
    font-size:0.9rem;
    letter-spacing: 1px;
    color:var(--theme-dark-faded);
}

#breadcrumb ul {
    margin:0px;
    padding:0px;
    list-style-type: none;
}

#breadcrumb ul li {
    display:inline-block;
}

#breadcrumb a {
    color:var(--theme-dark-faded);
}

#page-content {
    margin-top:1rem;
}

#page-content p,#page-content .p {
    font-size:1.2rem;
}

#page-content h1 {
    font-size:3rem;
    letter-spacing:-1px;
    font-weight:800;
}

#page-content hr {
    margin:2rem 0;
}

#page-content h2,#page-content h3 {
    font-weight:800;
}

#cover-article {
    margin-bottom:1.5rem;
}

#cover-article img {
    width:100%;
    height:auto;
    border: 1px solid #eaeaea;
}

#article #breadcrumb {
    margin-bottom:0.5rem;
}

#article h1 {
    font-size:2.8rem;
    letter-spacing:-1px;
    font-weight:800;
}

#article .date {
    text-transform: uppercase;
    font-size:0.9rem;
    font-weight:600;
    color:var(--theme-secondary);
    display:block;
    margin-top:1rem;
}

#article #content {
    margin-top:1.5rem;
}

#article #author {
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    padding:0.5rem;
}

#article #author img {
    width:45px;
    height:45px;
    border-radius:50%;
}

#article #author a {
    color:var(--theme-dark);
    text-decoration:none;
}

#article-content h2, #article-content h3, #article-content h4 {
    font-weight:bold;
    margin-bottom:1rem;
}

#article-content {
    font-size:1.2rem;
    color:black;
}

#article-content p.intro {
    font-size:1.4rem;
    color:var(--theme-dark);
}

#article-content a {
    color:var(--theme-primary);
    text-decoration:underline;
}

#article-content a:hover {
    color:var(--theme-primary-faded);
    text-decoration:none;
}

.article-related {
    margin:2.5rem 0;
}

.article-related img {
    width:200px;
    height:120px;
    object-fit: cover;
    border: 1px solid #eaeaea;
}

#article-content .article-related a {
    font-size: 1.3rem;
    line-height: 0.9;
    color:var(--dark);
    font-weight:bold;
    text-decoration:none;
}

#article-content .article-related a:hover {
    text-decoration:underline;
}

#article-content .article-related p {
    font-size:1.1rem;
    color:var(--theme-dark-faded);
    margin-bottom:0;
    margin-top:0.3rem;
}

#summary {
    border-top:3px solid var(--theme-dark);
    padding-top:0.5rem;
    margin-bottom:2rem;
}

#summary b {
    font-size:1.6rem;
    display:block;

}

#summary ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    margin-top:0.5rem;
}

#summary ul li a {
    color:var(--theme-dark);
    font-size:1.4rem;
    font-weight:bold;
    display:block;
    padding:0.3rem 0;
    text-decoration:none;
}

#summary ul li a:hover {
    text-decoration:underline;
    color:var(--theme-dark);
}

#summary ul li ul li a {
    font-size:1.15rem;
    margin-left:1rem;
    font-weight:normal;
}

#article-content .section {
    border-top:3px solid var(--theme-primary);
    padding-top:0.8rem;
    margin-bottom:2rem;
    margin-top:2rem;
}

#top-products {
    background:var(--theme-gray);
    padding:0.5rem;
    border-radius:10px;
    margin-bottom:2rem;
    position: relative;
}

.top-product {
    background:white;
    text-align:center;
    padding:1rem;
}

#top-products .owl-theme .owl-dots .owl-dot.active span, #top-products .owl-theme .owl-dots .owl-dot:hover span {
    background:var(--theme-primary);
}

.badge-product {
    display:inline-block;
    font-weight:bold;
    text-transform: uppercase;
    font-size:1rem;
    border-radius:5px;
    padding:0px 5px;
    color:white;
}

.badge-premium { background:var(--theme-dark); }
.badge-best {background:var(--theme-primary);  }
.badge-cheap {background:var(--theme-secondary);}

.top-product img {
    max-width:90%;
    height:200px;
    object-fit:contain;
    margin:1.3rem auto;
}

#article-content .top-product .title {
    font-weight:normal;
    font-size:1.4rem;
    color:var(--theme-dark);
    text-decoration:none;
    white-space: nowrap;
    width: 90%;
    display:block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-product .rating {
    margin:0.8rem;
    font-size:0.8rem;
}

#article-content .top-product .btn {
    color:white;
    text-decoration:none;
    font-size:1.2rem;
}

.top-product .video {
    margin-top:0.8rem;
}

#article-content .top-product .video a {
    color:var(--theme-dark);
    text-decoration:none;
    font-size:1rem;
}

.product {
    position: relative;
    padding: 2rem 1rem;
    box-sizing: border-box;
    box-shadow: 0 0 5px 0 hsl(0deg 0% 56% / 50%);
    border: 0 solid rgba(0,0,0,0);
    background-color: #fff;
    margin: 2rem 0;
}

.product-premium { border:5px solid var(--theme-dark); }
.product-best { border:5px solid var(--theme-primary); }
.product-cheap { border:5px solid var(--theme-secondary); }

#article-content .product h3 {
    font-size:1.35rem;
}

.product .tag {
    display:inline-block;
    font-weight:bold;
    text-transform: uppercase;
    font-size:1rem;
    border-radius:5px;
    padding:0px 5px;
    color:white;
    margin-top: -2.8rem;
    position: absolute;
    margin-bottom:1rem;
}

.product-img {
    max-width:95%;
}

.product p {
    font-size:1rem;
    color:#666;
    margin-top:2rem;
}

.product ul {
    margin:1.5rem 0 2rem 0;
    padding:0px;
    font-size:1rem;
    list-style-type:none;
}

.product .ul-backup {
    font-size:1rem;
    margin:1.5rem 0 2rem 0;
}

#article-content .product .c2a {
    color:white;
    background:var(--theme-primary);
    text-decoration:none;
}

#article-content .product .c2a:hover {
    background:var(--theme-primary-faded);
}

#homepage .recent {
    display:block;
    color:var(--theme-dark);
    font-size:1.05rem;
    line-height:1.3;
    font-weight:bold;
    margin-bottom:1.2rem;
    text-transform: capitalize;
}

#homepage .recent span {
    display:block;
    font-size:0.8rem;
    margin-top:0.3rem;
    font-weight: bold;
    text-transform: uppercase;
    color:var(--theme-secondary);
}

#homepage-last h1 {
    font-weight:bold;
    font-size:1.9rem;
    line-height:1.1;
    margin-top:1rem;
    margin-bottom:0.5rem;
}

#homepage-last h1 a {
    color:var(--theme-dark);
}


#homepage-last .author {
    font-weight:bold;
}

#homepage-last .author a {
    color:var(--theme-dark);
}

#homepage-last p {
    color:#666;
}

#homepage-last {
    border-bottom:3px solid var(--theme-primary);
    padding-bottom:1rem;
    margin-bottom:2rem;
}

#homepage-last ul {
    margin:0px;
    padding:0px;
    list-style-type:none;
}

#homepage-last ul li a {
    display:block;
    font-size:1rem;
    color:var(--theme-dark);
    font-weight:bold;
    margin-top:0.5rem;
    line-height:1.2;
}

.pagination .page-link {
    color:var(--theme-primary);
}

.page-item.active .page-link {
    background:var(--theme-primary);
    border:1px solid var(--theme-primary);
}


/* END CONTENT */

/* FOOTER */
footer {
    background:#393e46;
    color:white;
    padding:2rem 0;
}

footer ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
}

footer ul li a {
    color:white;
    display:block;
    padding:0.1rem 0;
}

footer ul li a:hover {
    color:#ccc;
    text-decoration:none;
}

footer .bold {
    font-weight:bold;
    text-transform: capitalize;
}

/* END FOOTER */

@media (min-width:1000px) {
    #top-products { width: 100%; }
}

@media (max-width: 1200px) {
    #primary-menu ul li:nth-child(5) { display:none; }
}

@media (max-width: 1000px) {
    #primary-menu ul li:nth-child(4) { display:none; }
    #primary-menu ul li:nth-child(3) { display:none; }
}

@media (max-width: 780px) {
    #primary-menu ul li:nth-child(2) { display:none; }
}

/* RESPONSIVE TABLET */
@media (max-width: 990px) {

    #header-search input {
        width: 320px;
    }

}

/* RESPONSIVE MOBILE */
@media (max-width: 575px) {

    #head1 { padding:.7rem 0px; }
    #head1 a { font-size:1.15rem; }
    header { border-bottom:1px solid var(--theme-gray);}
    .logo { height:40px; }

    #head2 { display:none !important; }

    #mobile-menu {
        display:none;
        height:auto;
        padding:0.8rem;
        background:var(--theme-gray);
    }

    #header-search input {
        width: 100%;
        background:var(--theme-light);
    }

    #header-search button {
        float:right;
        margin-right: 15px;
        top: -40px;
        position: relative;
        margin-left:0;
    }

    #header-search {
        margin-bottom:0.8rem;
    }

    #mobile-menu ul {
        margin:0px;
        list-style-type:none;
        padding:0px;
    }

    #mobile-menu ul li a {
        display:block;
        font-size:1.2rem;
        color:var(--theme-secondary);
        background:white;
        padding:0.7rem 1rem;
        margin-bottom:2px;
        font-weight:500;
    }

    #mobile-menu ul li a.has-submenu:after {
        content: "»";
        float:right;
        font-size:1rem;
        font-weight:300;
        color:var(--theme-gray);
    }

    #mobile-menu ul li ul {
        display:none;
    }

    #mobile-menu ul li ul li a {
        font-size:1rem;
        font-weight:normal;
        padding:0.4rem 1rem;
        color:var(--theme-dark);
    }

    .disclaimer {
        display:none;
    }

    #main {
        margin-top:1rem;
    }

    #category-header {
        padding-bottom:1rem;
        border-bottom:2px solid var(--theme-primary);
    }

    #category-header h1 {
        font-size:2.4rem;
        margin-bottom:0.2rem;
    }

    #category-header p {
        font-size:1.2rem;
    }

    .category-subcategory {
        margin-top:1rem;
        padding-bottom:1rem;
        border-bottom:2px solid var(--theme-dark-faded);
    }

    .category-subcategory-title a {
        font-size:0.9rem;
    }

    .category-subcategory h2 {
        font-size:1.7rem;
        margin-bottom:0;
    }

    .col-article {
        margin-top:1rem;
        margin-bottom:1rem;
    }

    .col-article h3 {
        font-size:1.5rem;
    }

    #breadcrumb {
        font-size: 0.8rem;
    }

    #page-content {
        margin-top:0rem;
    }

    #page-content hr {
        margin:1rem 0;
    }

    #page-content p,#page-content .p {
        font-size:1.1rem;
    }

    #page-content h1 {
        font-size:2.4rem;
        margin-bottom:0.2rem;
    }

    #cover-article {
        padding:0px;
        margin-top:-1rem;
        margin-bottom:1rem;
    }

    #cover-article .col-12 {
        padding:0px;
    }

    #cover-article .row {
        margin:0;
    }

    #article #breadcrumb {
        margin-bottom:0.4rem;
    }

    #article h1 {
        font-size:1.9rem;
        letter-spacing:-1px;
        font-weight:800;
    }

    #article .date {
        font-size:0.8rem;
        margin-top:0.6rem;
    }

    #article-content {
        font-size:1.1rem;
        color:black;
    }

    #article-content p.intro {
        font-size:1.3rem;
        color:var(--theme-dark);
    }

    #summary .d-flex {
        cursor:pointer;
    }

    #summary b {
        font-size:1.4rem;
    }

    #summary i {
        color:var(--theme-dark-faded);
    }

    #summary ul {
        display:none;
    }

    #summary ul li a {
        color: var(--theme-dark);
        font-size: 1.1rem;
    }

    #article-content h2 { font-size:1.6rem; }
    #article-content h3 {font-size:1.4rem;}
    #article-content h4 {font-size:1.2rem;}


    .article-related {
        margin:1.5rem 0;
    }

    .article-related img {
        width:100px;
        height:65px;
    }

    #article-content .article-related a {
        font-size:1.1rem;
    }

    #article-content .article-related p {display:none; }

    .product {
        width:100%;
    }

    .product-premium { border:2px solid var(--theme-dark); }
    .product-best { border:2px solid var(--theme-primary); }
    .product-cheap { border:2px solid var(--theme-secondary); }

    #article-content .product h3 {
        font-size:1.2rem;
        margin-top:1rem;
    }

    .product ul {
        margin:1rem 0 1.5rem 0;
    }

    #article-content .product .c2a {
        display:block;
        text-align:center;
    }

    .product-img {
        max-width:90%;
    }

    .product p {
        margin-top:1.5rem;
    }


}