/* ---MAIN SLIDE */
#slide03 {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: auto;
    margin: 0;
    padding: 10vh 0 10vh 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    max-height: 100vh;
}
/* ---BOX WRAPPER */
.slide03wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ---MAIN BOX */
.blogwrapper {
    margin: 0;
    padding: 2vw;
    width: 80%;
    max-width: 75vw;
    height: auto;
/*     max-height: 70vh; */
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    background:  #222e40;
    border: solid 0.25vw #D52630;
}
/* MAIN TITLE (OUTSIDE BLOG ITEMS WRAPPER) */
.title03 {
    font: bolder 4.3vw cochin;
    padding-bottom: 1vh;
    color:  #d9dbe0;
}
/* ---BLOG ITEMS WRAPPER */
.blog-box {
    margin: 0;
    padding: 1vw;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
}
/* ----ARTICLE TITLES */
.b-title {
    font: normal 1.8vw verdana;
    color: #d9dbe0;
    text-align: center;
}
/* ----ARTICLE BOXES */
.blog {
    margin: 0;
    padding: 0 3vw 0 3vw;
    width: 40%;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-right: solid 0.3vw #D52630;
    overflow: hidden;
}
/* ----ARTICLE IMAGES */
.b-img1 {
    margin: 1.5vw;
    width: 17vw;
    height: 11vw;
    border: solid 0.25vw #D52630;
    background: url(https://wms.com.ph/img/b-placeholder1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.b-img2 {
    margin: 1.5vw;
    width: 17vw;
    height: 11vw;
    border: solid 0.25vw #D52630;
    background: url(https://wms.com.ph/img/b-placeholder2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* ----ARTICLE CONTENT PREVIEW WRAPPER */
.b-content {
    height: 12vw;
    font: normal 1.1vw verdana;
    color: #d9dbe0;
    text-align: left;
    direction: ltr;
}
/* ----ARROW IMAGE */
.b-arrow {
    margin: 0 2vw;
    width: auto;
    max-height: 12vw;
}
.b-arrow:hover {
    filter: brightness(3);
    transition: all 4s ease;
}
a.more-link {
    color: #D52630;
    font: italic bold 1.1vw verdana;
}
a.more-link:hover {
    filter: brightness(3);
    text-decoration: underline;
    transition: all 2s ease;
}
/* -------------------------------------------------------- */
/* -----------MEDIA QUERY FOR RESPONSIVE SCREEN------------ */
/* -------------------------------------------------------- */
@media only screen and (max-width: 799px) {
        /* ---MAIN SLIDE */
        #slide03 {
            padding: 8vh 0 0 0;
            height: auto;
            max-height: none;
        }
        /* ---MAIN BOX */
        .blogwrapper {
            width: 85%;
            max-width: 100%;
        }
        /* MAIN TITLE (OUTSIDE BLOG ITEMS WRAPPER) */
        .title03 {
            font: bolder 8vw cochin;
            padding: 1vh 0;
            border-bottom: solid 1vw #D52630;
        }
        /* ---BLOG ITEMS WRAPPER */
        .blog-box {
            margin: 0;
            padding: 1vw;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        /* ----ARTICLE TITLES */
        .b-title {
            margin: 3vw 0;
            font: normal 4.5vw verdana;
        }
        /* ----ARTICLE BOXES */
        .blog {
            margin: 0;
            width: 80%;
            height: auto;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-right: none;
            border-bottom: solid 1vw #D52630;
        }
        /* ----ARTICLE IMAGES */
        .b-img1 {
            margin: 2vw;
            width: 37vw;
            height: 21vw;
            border: solid 1vw #D52630;
        }
        .b-img2 {
            margin: 2vw;
            width: 37vw;
            height: 21vw;
            border: solid 1vw #D52630;
        }
        /* ----ARTICLE CONTENT PREVIEW WRAPPER */
        .b-content {
            height: 40vw;
            font: normal 3vw/5vw verdana;
            padding: 2vw 0;
        }
        a.more-link {
            font: italic bold 3vw verdana;
        }
        /* ----ARROW IMAGE */
        .b-arrow {
            margin: 0;
            width: auto;
            max-height: 25vw; 
            transform: rotate(90deg);
        }
}