:root {
    --main: #414141;

}
body{
    background-color: var(--main) !important;
}
/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {

    /*#page {*/
    /*    display: none;*/

    /*}*/


    #os501c3,
    #banner,
    /*#pagefooter {*/
    /*    display: none !important;*/
    /*  background-color: #F2F2F2;*/
    /*}*/


    .videos-div {

        display: grid;
        grid-gap: 10px 10px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 5fr 5fr 2fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: "large-image large-image""large-image large-image""medium-1 medium-2""medium-1 medium-2""small-1 small-2""small-3 small-4""small-5 small-6""small-7 small-8""small-9 small-10""small-11 small-12";

        width: 100%;
        background-color: #F2F2F2;
        padding: 0.5rem;

        max-height: 1200px;
        margin: auto;
    }

    h5,
    h3 {
        font-size: x-small !important;
    }

}

@media (min-width: 601px) {
    .videos-div {

        display: grid;
        grid-gap: 15px 15px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1.1fr 0.9fr 1fr 1fr 1fr 1fr;
        grid-template-areas: "large-image large-image medium-1""large-image large-image medium-1""large-image large-image medium-2""large-image large-image medium-2""small-1 small-2 small-3""small-4 small-5 small-6""small-7 small-8 small-9";

        width: 100%;
        background-color: #F2F2F2;
        padding: 0.5rem;

        max-height: 1000px;
        margin: auto;
    }
}

#page{
    border: unset;
}
.large-image {
    grid-area: large-image;
    margin-bottom: 4px;
    margin-top: 4px;

}

.medium-1 {
    grid-area: medium-1;
    margin-top: 4px;
}

.medium-2 {
    grid-area: medium-2;
    margin-bottom: 4px;
}

.small-1 {
    grid-area: small-1;
}

.small-2 {
    grid-area: small-2;
}

.small-3 {
    grid-area: small-3;
}

.small-4 {
    grid-area: small-4;
}

.small-5 {
    grid-area: small-5;
}

.small-6 {
    grid-area: small-6;
}

.small-7 {
    grid-area: small-7;
}

.small-8 {
    grid-area: small-8;
}

.small-9 {
    grid-area: small-9;
}

.small-10 {
    grid-area: small-10;
}

.small-11 {
    grid-area: small-11;
}

.small-12 {
    grid-area: small-12;
}


.lg-image,
.md-image,
.sm-image {

    position: relative;
    width: 100%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.lg-text,
.md-text,
.sm-text {
    position: absolute;
    bottom: 0.2px;
    left: 0.5px;
    background: url(../images/gradient.png) left bottom/100% 100% no-repeat;
    padding: 20px 10px 7px 11px;
    width: 100%;
    font-family: 'Libre Franklin', sans-serif;
}

.lg-text span,
.md-text span,
.sm-text span {
    color: white;
}

h5,
h3 {
    margin-bottom: 0ex !important;
}

/*override style.css*/
#article #text {

    min-height: 151px;
    margin: 0px !important;

}

#frontpage {

    background-color: transparent;
}

#latest {
    height: 150px !important;
}

#latest_articles {
    display: block !important;
    min-width: 200px !important;
}
/***************** new css *************.