body {
    margin: 0;
    padding: 0;
    font-family: "robotoregular", sans-serif;
    background-color: white;
}
p {
    line-height: 1.5em;
}


/* layout */

.container, .theContent {
    margin: 0 auto;
    width: initial;
    max-width: 414px;
    padding: 0 20px;
}
.theContent{
    background: white;
    padding-top: 0;
}
section {
    margin-bottom: 20px;
}
section ul {
    margin:0;
    padding:0;
}
.flex-wrap {
    display: flex;
    gap: 20px;
    width: 100%;
    flex-flow: column;
}
.flex-wrap > * {
    flex-grow: 1;
}
.col-expand{
    flex-grow: 999;
    flex-basis: 0;
}
.col-full{
    flex-basis: 100%;
}
#logo-socmed-subnav,
#lifestyle-sub-nav{
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 0;
}
#logo-socmed-subnav > *,
#lifestyle-sub-nav > * {
    flex-grow: 1;
}
.col-full{
    flex-basis: 100%;
}
.col-220px{
    flex-basis: 199px;
}
.col-4{
    flex-basis: calc(25% - 1em);
}
.lifestyle_socmed {
    text-align: right;
    position: relative;
}
.lifestyle_socmed ul {
    gap: 10px;
    flex-flow: row;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: flex-end;
}
.lifestyle_socmed li {
    flex:0;
    padding: 0;
}
.lifestyle_socmed a:hover {
    filter: brightness(0.5);
}
/* text */
li {
    list-style: none;
    padding: 0 6px;
}
a {
    text-decoration: none;
    color: inherit;
}

h2.h2-large{
    font-family: "robotobold";
    font-size: 1.75em;
    margin-top: 0;
    line-height: 1.2em;
    margin-bottom: 10px;
}
h3 {
    font-size: 1.75em;
    margin-bottom: 20px;
}

/* images */

.img-wrap {
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.img-wrap.large {
    height: 250px;
}
.img-wrap.medium {
    height: 250px;
}
.img-wrap.thumb {
    height: 250px;
}
.img-wrap img {
    height: 100%;
}
.img-shadow {
    box-shadow: 10px 10px 0 0 #FFC107;
    -moz-box-shadow: 10px 10px 0 0 #FFC107;
    -webkit-box-shadow: 10px 10px 0 0 #FFC107;
    -khtml-box-shadow: 10px 10px 0 0 #FFC107;
    margin-right: 10px;
}
.img-shadow-left{
    box-shadow: -10px 10px 0 0 #FFC107;
    -moz-box-shadow: -10px 10px 0 0 #FFC107;
    -webkit-box-shadow: -10px 10px 0 0 #FFC107;
    -khtml-box-shadow: -10px 10px 0 0 #FFC107;
    margin-left: 5px;
}
.no-img {
    background-color: #e9e9e9;
    color: #e9e9e9;
}

.no-img img {
    opacity: 0;
}

.img-wrap.fit-w a {
    width:100%
}
.img-wrap.fit-w {
    align-items: center;
    justify-content: initial;
}
.img-wrap.fit-w img {
    height: initial;
    width: 100%;
}

/* lifestyle subnav */
#logo-socmed-subnav {
    align-items: center;
}
.lifestyle_logo {
    flex-basis: 130px;
}
.lifestyle_logo img {
    height: 38px;
}
#lifestyle-sub-nav {
    gap: .75em;
    padding-bottom: 20px;
    border-bottom: 1px solid gray;
    padding-top: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-left: 0;
    margin-top: 0;
}
#lifestyle-sub-nav li {
    flex: 0 0 max-content;
    width: max-content;
    scroll-snap-align: start;
}
#lifestyle-sub-nav a {
    color: #8a8a8a;
    font-size: 1.12rem;
    font-family: "robotoregular";
    text-align: center;
}
#lifestyle-sub-nav a:hover, #lifestyle-sub-nav a.active {
    color: #2b89cf;
}
#lifestyle-sub-nav a.active {
    font-family: "robotobold";
    cursor: default;
}
.no-scrollbar {
  scrollbar-width: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* arrows */
.buttons {
    display: none;
}

.mar-bot {
    margin-bottom: 1.5em;
}

.Leaderboard_Top.mar-bot {
    font-size: initial;
    text-align: center;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
    padding-top: 1px !important;
    padding-bottom: 0 !important;
}

.sec-gap {
    gap: 30px;
}

.date {
    font-size: 16px;
    color: #8a8a8a;
    margin-bottom: 20px;
}

/*cards */
.large-card {
    margin-bottom: 40px;
}
.list-cards li {margin-bottom: 20px;}
.large-card p {
    font-size: 1em;
}
.list-cards li, .list-cards.blue li {
    padding: 0;
    overflow: hidden;
}
.list-cards.blue li {
    background-color: #178dbf;
    color: white;
    margin-bottom: 0;
}
.list-cards.blue .text-wrap{
    margin:15px;
}
.list-cards h2 {
    font-weight: 100;
    font-size: 1.2rem;
    line-height: 1.75rem;
}
.list-cards.blue h2 {
    margin-bottom: 2rem;
}
.list-cards.blue .date {
    color: #b1c4c9;
}


/* qoutes */
#section__quotes, #section__video {
    background-color: #e5e5e5;
    padding: 20px 20px 30px;
    box-sizing: border-box;
}
#section__quotes .text-wrap {
    align-self:flex-start;
}
blockquote {
    background: url("https://media.philstar.com/assets/lifestyle/quote-icon.svg") no-repeat;
    padding-top: 5.5rem;
    font-family: "robotobold";
    font-size: 1.75rem;
    color: #178dbf;
    padding-left: 0;
    margin: 0;
    margin-bottom: 20px;
}

blockquote p {
    margin: 0;
    line-height: 2.5rem;
}
#section__quotes .date{
    margin-left: 0;
}

/* newsletter */
.lifestyle #newsletter-signup-form {
    background-image: url(https://media.philstar.com/assets/lifestyle/News_roundup_banner_mobile_bg.svg);
}
.lifestyle .newsletter-signup-form_container {
    text-align: center;
}
.lifestyle #newsletter-signup-form p{
    margin-bottom: 120px;
}
#section__newsletter {
    display: flex;
    flex-flow: column-reverse;
    align-items: center;
}
    

/* square ad */
.square-ad{
    height: 250px;
    background-color: lightgrey;
    min-width: 300px;
}

.Leaderboard-footer {
    margin-bottom: 3em;
}

/* ads */
.teads-inread, #gpt-ad-Leaderboard_Middle1 {
    margin-bottom: 3em !important;
}