@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Francois+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400&display=swap');
.fillContainer{
    max-width: 75%;
    margin: auto;
}
ul{
    list-style-type: none;
}
.absNavbar{
    position: relative;
}
.reviewImages{
    max-width: 100%;
    margin: auto;
    margin-top: 1vw;
}
.reviewImages ul{
    display: flex;
    max-width: 100%;
    margin: auto;
    width: 100%;
    height: 33.3335vw;
    list-style-type: none;
}
.reviewImages ul li{
    width: calc((100% - .5vw)/2);
    margin-right: .5vw;
    background-image: url("../../images/diet1.jpg"); /* The image used */
    background-color: brown; /* Used if the image is unavailable */
    height: 100%; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}
.reviewImages ul li:last-of-type{
    margin: 0;
    background-image: url("../../images/diet4.jpg"); /* The image used */
}
h1{
    font-family: "Oswald";
    font-size: 3vw;
    margin:0;
}
.reviewHeader{
    margin-top: 2vw;
}
.reviewCategory{
    opacity: 0.9;
}
.reviewCategory a{
    color: black;
    text-decoration: none;
    font-family: 'Libre Franklin';
    font-size: 1.1vw;
}
.reviewCategory a:hover{
    text-decoration: underline;
}
.reviewCategory img{
    width: 1.5vw;
    vertical-align: middle;
    margin-top: -2px;
    margin-left: -3px;
    margin-right: -3px;
}
.reviewContent{
    display: flex;
}
ul.detailsAndAds{
    list-style-type: none;
    width: 35%;
}
ul.detailsAndAds li.updateDate{
    font-family: 'Oswald';
    color: brown;
    font-size: 1.4vw;
    text-transform: uppercase;
}
.quickNavigation{
    margin-top: 3vw;
}

ul.content{
    width: 65%;
    list-style-type: none;
    margin-left: 2vw;
    margin-top: 5vw;
}
ul.content li{
    font-size: 1.5vw;
    font-family: 'Roboto Slab';
    overflow: hidden;
}
ul.content li{
    line-height: 36px;
}
ul.content li.introduction{
    /*line-height: 2.8vw;*/
    margin-bottom: 1vw;
    font-family: Oswald;
    font-size: 1.8vw;
}
ul.content li.sectionTitle{
    font-family: Oswald;
    font-size: 3vw;
    line-height: normal;
    margin-bottom: 0;
}
ul.content li.titleLi{
    margin-bottom: 3vw;
    touch-action: manipulation;
}
ul.content ul.sectionContent{list-style-type: none;}
ul.content li.sectionTitle:first-of-type{
    width: 88%;
}
ul.content .titleUl{
    list-style-type: none;
    display: flex;
}
ul.content .titleUl img{
    width: 11.5vw;
    margin-top: -1vw;
}
.quickNavigation ul{
    list-style-type: none;
}
ul.content .quick{
    font-family: Roboto;
}
ul.content .quick:hover{
    cursor: pointer;
    text-decoration: underline;
}

.sectionImg{
    height: 26vw;
    margin-bottom: 3vw;
    width: 100%;
    background-color: brown;
    background-image: url("../../images/diet4.jpg"); /* The image used */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
}
.squaredAd{
    background-color: brown;
    width: 100%;
    height: 25vw;
    margin-top: 3.5vw;
}
.mobile{
    display: none;
}
hr{
    display: none;
}
hr.section{
    display: block;
    border: none;
    background-color: brown;
    height: 4px;
    margin-top: 5vw;
}
hr.section:not(.qu){
    margin-bottom: 0;
}
.adTitle{
    display: none;
}
@media screen and (max-width: 1024px){
    .fillContainer{max-width: 95%;}
    .reviewCategory a{font-size: 1.5vw;}
    h1{font-size: 3.6vw;}
    ul.detailsAndAds li.updateDate{font-size: 2vw;}
    ul.content li.introduction{font-size: 2.5vw; line-height: 3.1vw;}
    ul.content li{font-size: 2vw;}
    .sectionImg {height: 35vw;}
    hr.section{margin-top: 6.5vw;}
    ul.content li.sectionTitle{font-size: 3.7vw;}
    .reviewImages ul{height: 42vw;}
    .squaredAd{height: 32vw;}
}
@media screen and (max-width: 900px){
    .reviewCategory a{font-size: 2vw;}
    h1{font-size: 4.6vw;}
    ul.detailsAndAds li.updateDate{font-size: 2.5vw;}
    ul.content li.introduction{font-size: 3vw; line-height: 4vw;}
    ul.content li{font-size: 2.8vw; }
    hr.section{margin-top: 10vw;}
    ul.content li.sectionTitle{font-size: 4.5vw;}
    .reviewCategory img{width: 2.2vw;}
    .reviewImages ul{height: 48vw;}
    .sectionImg {
        height: 37vw;
    }
    ul.content .titleUl img {
        width: 7vw;
        margin-top: -1.1vw;
    }
}
@media screen and (min-width: 600px){
    ul.content .titleUl img{
        display: none;
    }
}
@media screen and (max-width: 600px){
    .fillContainer{
        max-width: 100%;
        padding: 0 1em;
    }
    .squaredAd{
        display: none;
    }
    hr{
        display: block;
    }
    .adTitle{
        display: list-item;
    }
    .reviewCategory a{
        font-size: 3.7vw;
    }
    h1{
        font-size: 7.6vw;
        line-height: 8.5vw;
    }
    .reviewCategory img{
        width: 3.2vw;
    }
    .reviewContent{
        flex-direction: column;
    }
    ul.detailsAndAds{
        width: 100%;
    }
    ul.content{
        width: 100%;
        margin-left: 0;
    }
    ul.detailsAndAds li.updateDate{font-size: 3.5vw; margin-top: 1vw;}
    ul.content li {
        font-size: 16px;
        line-height: 1.6625rem;
        font-family: 'Roboto Slab';
    }
    ul.content li.introduction {
        font-size: 20px;
        line-height: 1.7rem;
    }
    ul.content li.sectionTitle {
        font-size: 8.5vw;
        line-height: 8.5vw;
    }
    hr.section {
        margin-top: 2vw;
    }
    li.mobile{
        display: list-item;
        padding-top: 1vw;
        padding-bottom: 4vw;
    }
    ul.mobileAD{
        display: flex;
        list-style-type: none;
    }
    ul.mobileAD li{
        width: calc((100% - 2vw ) / 2);
        height: 45vw;
        margin-right: 2vw;
        background-color: brown;
    }
    
    .qu, hr.qu{
        display: none;
    }
    
    ul.mobileAD li:last-of-type{
        margin: 0;
    }
    ul.content li.adTitle{
        text-transform: capitalize;
        font-family: Libre Franklin;
        font-weight: 100;
        font-size: 4vw;
        margin-top: 3vw;
    }
    hr.hrTop{
        margin-top: 5vw;
    }
    hr.hrBottom{
        margin-bottom: 5vw;
    }
    .sectionImg {
        height: 57vw;
    }
    ul.content .titleUl img{
        display: block;
        width: 12vw;
    }
    ul.content li.titleLi{
        padding-top: 3%;
    }
}