@font-face {
    src: url(fonts/Montserrat-Black.ttf,Montserrat-BlackItalic.ttf,Montserrat-Bold.ttf,Montserrat-Regular.ttf,Montserrat-BoldItalic.ttf,Montserrat-ExtraBold.ttfMontserrat-ExtraBoldItalic.ttf,Montserrat-ExtraLight.ttf,Montserrat-ExtraLightItalic.ttf,Montserrat-Italic.ttf,Montserrat-Light.ttf,Montserrat-LightItalic.ttf,Montserrat-Medium.ttf,Montserrat-MediumItalic.ttf,Montserrat-SemiBold.ttf,Montserrat-SemiBoldItalic.ttf);
    font-family: montserrat,gillsans;
}

* {
    margin: 0;
    padding: 0;
}
/*------------ NAVIGATION - NARROW VIEWPORT ------------*/
.container-hamburger-menu {
    display: flex;
    max-width: 100%;
    justify-content: right; /* <------ this is to float the logo to the top-right*/
    width: 100%;
    height: fit-content;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9323af+0,202ead+50,9323af+100 */
    background: #EEAECA;
    background: radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
    position: sticky;
    top: 0;
    z-index: 6;
}
.hamburger-menu-logo {
    float: right;   
    width: 40px;
    cursor: pointer;
    margin: 5px;
    padding: 5px;
    z-index: 7;
}
.x-close-menu-logo {
    float: right;
    width: 20px;
    z-index: 8;
}
.container-x-menu {
    display: flex;
    justify-content: right; /* <---- this is to float the logo to the top-right*/
    max-width: 100%;
    height: fit-content;
    background-color: rgb(86, 86, 86);/*<---- color of the navigation bar box*/
    cursor: pointer;
    margin: 5px;
    padding: 5px;
    z-index: 9;
}
nav { /*aside from the X icon, thi is to hide the navigation when it is not clicked or active*/
    display: none;
}
.navbar {
    float: left;
    width: 50%;
    height: 100%;
    position: sticky;
    top: 0;
    z-index: 10;
}
.active {
    position: absolute;
    display:block;
    background-color: rgb(86, 86, 86);/*<----- color of the navigation bar box*/
    width: 50%;
    right: 0;
    top: 0;
    position: fixed;
}
.navbar ul {
    display: block;
    list-style-type: none;
    background-color: rgb(86, 86, 86);/*<----- color of the navigation bar box*/
    padding: 0;
    margin: 0;
    overflow: hidden; /*<----- this shows the box of the nav bar again after it vanished when <float: left;> was typed on the <.navbar li>*/
}
.navbar ul li ul { /*<---- dropdown text properties*/
    display: none; /*<---- to hide the dropdown when cursor is not in hover*/
    margin: 0 20px 0 20px;
}
nav ul li:hover ul {
    display: block;
}
.navbar a {
    display: block;
    font-family: Montserrat;
    font-size: .9rem;
    color: rgb(255, 255, 255);/*<---- color of the text*/
    text-decoration: none;
    padding: 5px 15px;
    text-align: left;
    line-height: 1.5;
}
.navbar ul li a:hover {
    background-color: rgb(0, 0, 0); /*<----- color of the hover*/
}
nav ul li a {
    display: block;
}
.container-splash-header {
    width: 100%;
    height: fit-content;
}
/*--------------- END OF NAVIGATION - NARROW VIEWPORT ---------------*/

/*----------------------- SECTION HEADER ---------------------*/
.container-section-head { /*<------------- container of section header */
    justify-content: left;
    display: flex;
    width: 100%;
    height: fit-content;
    align-items: center;
    margin: 0 auto;
    background: #db0b0b;
    background: linear-gradient(75deg, rgba(219, 11, 11, 1) 12%, rgba(0, 60, 255, 1) 91%);
    /*border: 1px solid #dcdedf;*/
}
.logo-pagcor-news { /*<------------- pagcor logo in section header */
    width: 60px;
    margin: 15px 25px 15px 15%;
    padding: 0;
}
.section-head { /*<------------- section heading typography */
    font-family: "montserrat";
    color: #ffffff;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, .30);
    display: block;
}
/*------------------- END OF SECTION HEADER -------------------*/

/*----------------------- CONTENT SECTION  ---------------------*/
.container-whole-content { /*<---- container of the whole editorial*/
    display: block;
    background: linear-gradient(#ECEFFE, #CED6FB);
    width: 100%;
    padding-bottom: 10px;
    margin-top: -20px;
    margin-bottom: -30px;
    /*border: 2px solid red;*/
}
.container-recent-updates { /*<------- div that holds the editorial head cluster*/
    display: block;
    max-width: 100%;
    margin: 20px;
    padding: 5px;
    /*border: 1px solid #a2a0a2;*/
}
.headline-kicker { /*<----------- this is one liner on top of the editorial main head*/
    font-family:'montserrat';
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    color: #851383;
    padding: 0;
    margin: 20px auto 15px auto;
}
.head-banner { /*<------------ this is for the head of the main story*/
    font-family: Montserrat;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin: 5px auto 0 auto;
    color: black;
}
/*============ SWIPER INSERTED HERE. IT HAS ITS OWN STYLE FILE ============*/

.container-recent-updates-photo {
    width: 100%;
    /*border: 1px solid #92278f;*/
}
.one-photo-only {
    display: block;
    width: 100%;
    margin: 0;
    /*border: 1px solid #92278f;*/

}
.container-recent-updates-photo .caption-text { /*<------------ this is for the photo captions*/
    font-family: Montserrat;
    text-align: center;
    font-style: italic;
    font-size: .8rem;
    font-weight: 700;
    margin: 0;
    padding: 10px 0 20px 0;
    text-decoration: none;
    color: rgba(0, 0, 0, .5);
    /*border: 1px solid black;*/
}
.caption-text { /*<------------ this is for the photo captions*/
    font-family: Montserrat;
    text-align: left;
    font-style: italic;
    font-size: .8rem;
    font-weight: 700;
    margin: 10px 0 25px 0;
    padding: 5px 0 20px 0;
    text-decoration: none;
    color: rgba(0, 0, 0, .5)
}
.container-recent-updates .date-posted { /*<------------- this is for the date posteds*/
    text-align: center;
    font-family: Montserrat;
    font-size: .7rem;
    font-weight: 500;
    width: fit-content;
    margin: 20px auto 15px auto;
    color: rgba(0, 0, 0, .5);
    border-left: 1px solid #851383;
    border-width: 14px;
    padding-left: 10px;

    /*padding: 5px 10px;
    border-radius: 15px;
    border: 1.5px solid rgba(0, 0, 0, .5);*/
}

.container-body-text {
    width: 100%;
    margin: 30px 0 0 0;
    column-count: 1;
    /*border: 1px solid #851383;*/
}
.container-body-text p{
    margin: 0;
    /*border: 1px solid #851383;*/
}

.container-blurb-cluster {
    display: block;
    max-width: 35%;
    float: left;
    margin: 0 30px 0 10px;
    padding: 20px 0;
    /*border: 1px solid blue;*/
}
.container-blurb-cluster img {
    margin-bottom: 15px;
}
.blurb-quote {
    font-family: "montserrat";
    font-size: 4rem;
}
.blurb {
    display: block;
    font-family: "montserrat";
    font-size: 1.5rem;
    margin-bottom: 15px;
}
.container-blurb-cluster p span {
    color: #000000;
    font-size: 1rem;
    line-height: 1rem;
    margin-top: 10px;
}

.container-blurb-cluster p span {
    color:#92278f;
    font-size: 1rem;
    line-height: 1rem;
    margin-top: 10px;
}


@font-face {
  font-family: 'Montserrat'; /* Choose any name you like */
  src: url('fonts/Montserrat-Regular.ttf') format('truetype'),
       url('fonts/Montserrat-Italic.ttf') format('truetype'),
       url('fonts/Montserrat-Bold.ttf') format('truetype'),
       url('fonts/Montserrat-Montserrat-ExtraBold.ttf') format('truetype'),
       url('Montserrat-SemiBold.ttf') format('truetype'),
       url('Montserrat-Black.ttf') format('truetype'),
       url('fonts/Montserrat-Medium.ttf') format('truetype'),
       url('fonts/Montserrat-Bold.ttf.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional, helps with font loading behavior */
}

.body-text { /*<------------ this is for the body text*/
    width: 100%;
    text-align: left;
    font-family: Montserrat;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    column-rule: 1px #000000;
    color: rgba(0, 0, 0, .5);
    margin-bottom: 20px;
}
.container-body-text span { /*<------ this is fore the links span on the bodytexts*/
    font-family: Montserrat;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    text-decoration: none;
    color:#92278f;
}
.span {
    text-decoration: none;
}
#imageright {
    float: right;
    margin: 15px 0 15px 0;
    max-width: 100%;
}

#imageleft {
    float: left;
    right: 0;
    margin: 15px 0 0 0;
    text-decoration: none;
}

#imageleft a,#imageright a {
    text-decoration: none;
}
#bargraphright {
    display: flex;
    float: right;
    margin: 0;
    max-width: 60%;
}

.cta-more { /*<-------- this is for the "back to home" or "full story" tags at the end of the articles*/
    display: block;
    width: fit-content;
    font-family: Montserrat;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    color: #fff;
    background: #92278f;
    border: 2px solid #92278f;
    border-radius: 18px;
    padding: 10px 15px;
    margin: 20px auto;
}
.cta-more:hover { /*<--------- color of the "back to home" or "full story" hover*/
    background-color: rgb(255, 255, 255); /*<--- color of background while in hover*/
    color: #92278f; /*<------- color of the text while in hover*/
    border-radius: 18px;
}
.container-recent-updates-line {
    width: 50%;
    height: 1.5px;
    bottom: 0;
    background-color: #c8c8c8;
    left: 0;
    margin: 20px auto 20px auto;
}
/*.container-cta-more-on-section { <--------NOT WORKING!!!
    width: 100%;
    height: fit-content;
    border: 10px solid black;
    margin: auto;
}
*/
.more-on-section { /*<--------- MORE NEWS or MORE ANNOUNCEMENTS CTA*/
    display: block;
    width: fit-content;
    font-family: 'Montserrat';
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    background-color: #000000;
    color: #fff;
    border-radius: 25px;
    border: 3px solid #92278f;
    padding: 10px 15px;
    margin: 0 auto 8px;
}  
.more-on-section:hover { /*<----------- color of the menu hover*/
    background-color: rgb(255, 255, 255); /*<==== color of the hover*/
    color: #92278f; /*<------- color of the text while in hover*/
    border-radius: 25px;
}
.head-other-stories { /*<---------- this is for the head of the other stories*/
    font-family: Montserrat;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    color: black;
    margin: 10px 0 0 0;
}
.bits-logotype { /*<------------- this is for the logo type of the BITS*/
    font-family:'montserrat';
    font-size: 1.5rem;;
    font-weight: 500;
    text-align: center;
    color: #92278f;
    padding: 0;
    margin: 20px auto;
}
.container-bits-thumbnails p {
    font-family: "Montserrat";
    font-size: .8rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 20px 0 20px;
    color: #707070;
}
.container-bits-thumbnails .date-posted {
    text-align: left;
    font-family: Montserrat;
    font-size: .7rem;
    font-weight: 500;
    width: fit-content;
    margin: 10px 10px 0 17px;
    color: rgba(0, 0, 0, .5);
}
.container-bits-thumbnails {
    width: 100%;
    margin: auto;
    list-style: none; /*<------- removes the dot on the ul !!!*/
}
.bits-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin: 0 auto 15px auto;
    overflow: hidden;
    border-radius: 12px;
    width: 90%;
    background: #fff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease;
    border: 2px solid rgb(239, 181, 244);
    &:hover {
    border-color: #5372F0;
    }
    z-index: 5;
}
.small-img {
    max-width: 200x;
    position: relative;
    padding: 0;
}
.small-img img {
    display: block;
    width: 100px;
}
.container-bits-head {
    display: block;
    align-content: left;
}
/*------------------- END OF CONTENT SECTION  ------------------*/

/*-------------- SECTION 5: FOOTER - NARROW VIEWPORT ---------------*/
.container-required { /* <------------- This controls the gray box*/
    display: block;
    max-width: 100%;
    height: fit-content;
    margin: 30px 0 0 0;
    padding-bottom: 10px;
    justify-content: center;
    background-color: #f1f1f1;
}
.container-logo-op {
    width: fit-content;
    opacity: 10%;
    padding: 60px 30px;
    margin: 0;
}
.logo-op {
    width: 150px;
    margin: 0;
}

.container-required2 h3 { /* <----------- This controls text (h3)*/
    display: block;
    font-family: 'montserrat';
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    color: #92278f;
    font-size: .8rem;
    line-height: 1.2rem;
    margin: 0 15px;
    padding-bottom: 10px;
}
.container-required2 a { /* <------------ This controls text (a)*/
    display: block;
    font-family: 'montserrat';
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: rgba(0, 0, 0, .4);
    font-size: .8rem;
    line-height: 1.2rem;
    margin: 0 15px;
    padding: 0;
}
    .text-required2:hover  {
    color: #92278f;
}
.container-required2 { /* <-------------- This controls the width of the container of texts (h3 and a)*/
    width: 100%;
    display: block;
    align-content: left;
    margin: 0 15px 20px 15px;
    padding: 0px;
}
.footertext { /* <--------------- This controls the width of the text (reversed in gradient)*/
    font-family: 'montserrat';
    font-style: bold;
    font-size: .8rem;
    font-weight: 500;
    text-align: center;
    color: white;
    padding: 5px 0;
}
.container-footer-otherlogos-uppercluster{
    display: flex;
    flex-wrap: wrap; /*<==============This will allow automatic repositioning of logos when browser is stretched */
    gap: .5em; /*<==============space between logos */
    justify-content: center;
    width: 100%;
    align-items: center; /*<==============This horizontally aligns the 4 logos in the div */
    background-color: #f1f1f1;
    padding-bottom: 15px;
}
.container-logo-foi-footer {
    width: fit-content;
    margin: 0 10px;
}

.logo-foi-footer {
    width: 50px;
    margin: 0;
}
.container-logo-transparencyseal-footer {
    width: fit-content;
    margin: 0 10px;
}
.logo-transparencyseal-footer {
    width: 150px;
    margin: 0;
}
.container-logo-bagongpilipinas-footer {
    width: fit-content;
    margin: 0 5px;
}
.logo-bagongpilipinas-footer {
    width: 60px;
    margin: 0;
}
/*transparency seal's css is same as in the header*/
/*bagong pilipinas' css is same as in the header*/
.container-logo-gcg-footer {
    width: fit-content;
    margin: 0 10px;
}
.logo-gcg-footer {
    width: 110px;
    margin: 0;
}
.container-logo-gad-footer {
    width: fit-content;
    margin: 0 10px;
}
.logo-gad-footer {
    width: 100px;
    margin: 0;
}

.container-logo-dpodps-footer {
    width: fit-content;
    margin: 0 10px;
}

.logo-dpodps-footer {
    width: 40px;
    margin: 0;
}

.container-footer-gradient { /* <=============== This controls the gradientbox */
    display: flex;
    justify-content: center;
    max-width: 400px;
    height: fit-content;
    margin: auto;
    padding: 10px;
    /*border-radius: 0 0 10px 10px;
    position: sticky;
    bottom: 0;/*<=========== position where it sticks to the viewport*/ 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9323af+0,202ead+50,9323af+100 */
background: #9323af; /* Old browsers */
background: -moz-linear-gradient(45deg,  #9323af 0%, #202ead 50%, #9323af 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #9323af 0%,#202ead 50%,#9323af 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #9323af 0%,#202ead 50%,#9323af 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9323af', endColorstr='#9323af',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.containerfooterlogos {
    display: flex;
    justify-content: center;
    align-items: center; /*<======= horizontal alignment of logos*/
    width: fit-content;
    padding: 7px;
    margin: auto; /*<======= so that container will align center*/
    /*border: 1px solid #dcdedf;*/
}

.logo-x {
    width: 32px;
    padding: 7px;
}
.fblogo {
    width: 31px;
    padding: 7px;
}
.logo-instagram {
    width: 32px;
    padding: 7px;
}
.logo-youtube {
    width: 40px;
    padding: 7px;
}

.fblogoshare {
    width: 30px;
    padding-top: 7px;
    padding-right: 5px;
}

.logo-x-share {
    width: 30px;
    padding-top: 7px;
    padding-left: 5px;
}

.container-logo-dmca-footer {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: auto;
    padding-bottom: 20px;
    /*border: 1px solid #a2a0a2;*/
}

.container-dmca-footer-line { /* LINE-LINE-INE-LINE-INE-LINE-INE-LINE-INE-LINE-INE-LINE-LINE*/
    width: 50%;
    height: 1.5px;
    background-color: #e0e0e0;
    margin: 0 auto 10px auto;
}

.logo-dmca-footer {
    width: 150px;
    margin: 0;
}
/*-------------- END OF SECTION 5: FOOTER - NARROW VIEWPORT ---------------*/

/*================= MEDIUM VIEWPORT ==================*/

@media only screen and (min-width: 769px)  {
    /*------------- NAVIGATION - MEDIUM VIEWPORT --------------*/
    .container-hamburger-menu {
        display: none;
    }
    .container-hamburger-menu {
        display: none;
    }
    .hamburger-menu {
        display: none;   
    }
    .container-x-menu {
        display: none;
    }
    .x-close-menu-logo {
        display: none;
    }
    .navbar {
        position: sticky;
        display: flex;
        width: 100%;
        height: fit-content;
        z-index: 10;
    }
    .navbar ul {
        display: flex;
        vertical-align: center;
        width: 100%;
        justify-content: center;
        padding: 0;
        margin: 0;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9323af+0,202ead+50,9323af+100 */
        background: #EEAECA;
        background: radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
        box-shadow: 3px 3px 5px rgba(0, 0, 0, .1); /*<========= Then apply this to the converted border*/
    }
    .navbar ul li ul { /*<===== dropdown text properties*/
        font-family: 'Montserrat';
        font-weight: 500;
        display: none; /*<===== to hide the dropdown when cursor is not in hover*/
        width: fit-content; /*<===== to confine the width of the dropdown box to the width of the menu */
        height: fit-content;
        padding: 0;
        margin: 0;
        position: absolute;
        border-radius: 0 0 10px 10px;
    }
    .navbar ul li a {
        display: block;
        color: black;
        font-family: "Montserrat";
        font-size: .9rem;
        text-decoration: none;
        padding: 15px 15px;
        text-align: left;
        line-height: 1;
    }
    .navbar ul li ul li a {
        display: block;
        color: black;
        font-family: "Montserrat";
        font-size: .8rem;
        padding: 10px 20px;
        text-align: left;
        line-height: 1;
    }
    .navbar ul li a:hover { /* <---------- olor of the menu hover*/
        background-color: rgb(0, 0, 0); /* <---------- color of the hover*/
        color: rgb(255, 255, 255); /* <---------- color of the text while in hover*/
    }
    .navbar ul li ul li a:hover { /* <---------- color of the dropdown hover*/
        background-color: rgba(255, 255, 255, .50); /* <---------- color of the hover*/
        color: rgb(0, 0, 0);  /* <---------- color of the text while in hover*/
        height: fit-content;
    }
    /*----------- END OF NAVIGATION - MEDIUM VIEWPORT --------------*/

/*----------------------- SECTION HEADING ---------------------*/
    .logo-pagcor-news { /*<------------- PAGCOR LOGO ON SECTION HEADING */
        width: 70px;
        margin: 15px 25px 15px 15%;
        padding: 0;
    }
    /*----------------------- END OF SECTION HEADING ---------------------*/

    /*-------------- CONTENT - MEDIUM VIEWPORT ----------------*/
    .head-banner { /*<--------------- this is for the head of the main story*/
        font-family: Montserrat;
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        margin: 5px auto 0 auto;
        color: black;
    }
    .container-recent-updates {
        display: block;
        max-width: 85%;
        margin: 20px auto;
        padding: 5px;
        /*border: 1px solid #a2a0a2;*/
    }
    .caption-text{ /*<------------ this is for the photo captions*/
        padding: 5px 0 20px 0;
    }
    .container-body-text-whole {
        display: flex;
        justify-content: space-between;
        /*border: 1px solid #851383;*/
    }
    .container-body-text {
        width: 100%;
        margin-top: 30px;
        column-count: 2;/*<------------ column count should be set on this div*/
        gap: 50px;
        margin: 30px 0 0 0;
        /*border: 1px solid #851383;*/
    }
    .body-text { /*<------------ this is for the body text*/
        width: 100%;
        text-align: left;
        font-family: Montserrat;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 500;
        column-rule: 1px #000000;
        color: rgba(0, 0, 0, .5);
    }
    .container-body-text span { /*<------ this is fore the links span on the bodytexts*/
        font-family: Montserrat;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 500;
        text-decoration: none;
        color:#92278f;
    }
    .span {
        text-decoration: none;
    }
    #imageright {
        float: right;
        margin: 0;
        width: 100%;
    }
    #imageleft {
        float: left;
        width: 100%;
        margin: 0;
        display: block;
    }
    #imageleft a,#imageright a {
        text-decoration: none;
    }
    .container-bits-thumbnails {/*<------------ container of the individual bits cluster*/
        flex-basis: 100%;
        display: flex;
        align-items: center;
        width: 90%;
        flex-wrap: wrap;
        justify-content: space-between;
        list-style: none; /*<------- removes the dot on the ul !!!*/
        /*border: 1px solid #a2a0a2;*/
    }
    .bits-link {
        display: flex;
        user-select: none;
        align-items: center;
        text-decoration: none;
        margin: 0 auto 15px auto;
        overflow: hidden;
        border-radius: 12px;
        width: 48%;
        background: #fff;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
        transition: 0.2s ease;
        border: 1px solid transparent;
        &:hover {
        border-color: #5372F0;
	    }
        z-index: 5;
    }
    .small-img img {
        display: block;
        width: 125px; /*<------- the only change in this viewport*/
    }

    /*------------FOOTER - MEDIUM VIEWPORT --------------*/
    .container-required { /* <--------- This controls the gray box*/
        display: flex;
        max-width: 100%;
        height: fit-content;
        margin-top: 30px;
        padding: 0 60px;
        justify-content: space-evenly;
        background-color: #f1f1f1;
    }
    .container-logo-op {
        width: fit-content;
        opacity: 10%;
        padding: 30px;
    }
    .logo-op {
        width: 200px;
    }
    .container-required2 { /* <--------- This controls the width of the container of texts (h3 and a)*/
        display: block;
        width: 20%;
        align-content: left;
        margin-bottom: 20px;
        padding:60px 0;
    }
    .container-required2 h3 { /* <---------- This controls text (h3)*/
        display: block;
        font-family: 'montserrat';
        font-weight: 700;
        text-align: left;
        text-decoration: none;
        color: #92278f;
        font-size: .8rem;
        line-height: 1.2rem;
        margin: 0;
        padding-bottom: 10px;
    }
    .container-required2 a { /* <------------ This controls text (a)*/
        display: block;
        font-family: 'montserrat';
        font-weight: 500;
        text-align: left;
        text-decoration: none;
        color: rgba(0, 0, 0, .4);
        font-size: .8rem;
        line-height: 1.2rem;
        margin: 0;
        padding: 0;
    }
    .footertext { /* <------------ This controls the width of the text (reversed in gradient)*/
        font-family: 'montserrat';
        font-style: bold;
        font-size: .8rem;
        font-weight: 500;
        text-align: center;
        color: white;
        padding: 5px 0;
    }
    .container-footer-gradient { /* <------------ This controls the gradientbox */
        display: flex;
        justify-content: center;
        max-width: 500px;
        height: fit-content;
        margin: auto;
        padding: 10px;
        /*border-radius: 0 0 10px 10px;*/
        /*position: sticky;
        bottom: 0;<------------ position where it sticks to the viewport*/ 

        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9323af+0,202ead+50,9323af+100 */
    background: #9323af; /* Old browsers */
    background: -moz-linear-gradient(45deg,  #9323af 0%, #202ead 50%, #9323af 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg,  #9323af 0%,#202ead 50%,#9323af 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg,  #9323af 0%,#202ead 50%,#9323af 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9323af', endColorstr='#9323af',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }
    .containerfooterlogos {
        display: flex;
        justify-content: center;
        align-items: center; /* <------------ horizontal alignment of logos*/
        padding: 7px;
        margin: auto;
        /*border: 1px solid #dcdedf;*/
    }
    .logo-x {
        width: 32px;
        padding: 7px;

    }
    .fblogo {
        width: 31px;
        padding: 7px;
    }
    .logo-instagram {
        width: 32px;
        padding: 7px;
    }
    .logo-youtube {
        width: 40px;
        padding: 7px;
    }
    .fblogoshare {
        width: 30px;
        padding-top: 7px;
        padding-right: 5px;
    }
    .twitterlogoshare {
        width: 30px;
        padding-top: 7px;
        padding-left: 5px;
    }
    .container-logo-dmca-footer {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: auto;
        padding-bottom: 20px;
        /*border: 1px solid #a2a0a2;*/
    }
    .container-dmca-footer-line { /* <---------LINE*/
        width: 50%;
        height: 1.5px;
        background-color: #e0e0e0;
        margin: 0 auto 10px auto;
    }
    .logo-dmca-footer {
        width: 150px;
        margin: 0;
    }
    /*------------ END OF FOOTER - MEDIUM VIEWPORT ------------*/
}
/*=============== END OF MEDIUM VIEWPORT ==================*/

/*=================== LARGEST VIEWPORT ====================*/
@media only screen and (min-width: 1367px) {
    /*----------- NAVIGATION - LARGEST VIEWPORT -------------*/

    .navbar ul li a {/*<-------- this controls everything about the menu*/
        display: block;
        color: black;
        font-family: "Montserrat";
        font-size: 1rem;
        text-decoration: none;
        padding: 20px 20px;
        text-align: left;
        line-height: 1;
    }
    .navbar ul li ul li a { /*<------- this controls everything about the dropdown*/
        display: block;
        color: black;
        font-family: "Montserrat";
        font-size: .9rem;
        padding: 10px 20px;
        text-align: left;
        line-height: 1;
    }
    /*-------------- END OF NAVIGATION - LARGEST VIEWPORT ---------------*/

    /*--------------- SECTION HEADING - LARGEST VIEWPORT----------------*/
    .logo-pagcor-news { /*<------------- PAGCOR LOGO ON SECTION HEADING */
        width: 100px;
        margin: 15px 25px 15px 35%;
        padding: 0;
    }
    .section-head { /*<------------- SECTION HEADING TYPOGRAPHY */
        font-family: "montserrat";
        font-size: 2.5rem; /*<------- changed from 2rem*/
        color: #ffffff;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, .30);
        display: block;
    }
    /*----------- END OF SECTION HEADING - LARGEST VIEWPORT --------------*/

    /*----------------- CONTENT - LARGEST VIEWPORT ----------------*/
    .container-recent-updates {
        display: block;
        max-width: 50%; /*<--------- only change*/
        margin: 20px auto;
        padding: 5px;
        /*border: 1px solid #a2a0a2;*/
    }
    .head-banner { 
        font-family: Montserrat;
        font-size: 3rem;/*<--------------- changed from 2.5rem*/
        font-weight: 700;
        text-align: center;
        margin: 5px auto 0 auto;
        color: black;
    }

    .more-on-section {
        font-size: 1.2rem;/*<--------------- changed from 1rem */
    }
    .container-bits-head .cta-bits {
        font-size: 1rem; /*<------ changed from .8rem*/
    }
    .container-bits-thumbnails {/*<------------ container of the individual bits cluster*/
        width: 50%;
        /*border: 1px solid #a2a0a2;*/
    }
    .small-img img {
        display: block;
        width: 150px;
    }
}