* {
    margin: 0;
    padding: 0;
}

h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 35px;
    line-height: 170%;
    color: #2d160f;
    font-family: 'noto sans';
    margin-bottom: 20px;
}

h4 {
    font-size: 36px;
    letter-spacing: 0;
    color: #fff;
    font-weight: bold;
}

.pagecontainer {
    width: 70%;
    margin: 0px auto;
    background: #eee;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 20px;
    font-family: 'Noto Sans';
    min-height: 100vh;
}

    .pagecontainer > .header {
        width: 100%;
        font-family: 'noto sans';
        font-style: normal;
        font-size: 30px;
        line-height: 150%;
        color: #FE7A15;
        text-align: left;
        margin-bottom: 20px;
        display: block;
    }

    .pagecontainer .pagecontainer__content {
        display: flex;
        justify-content: flex-start;
        padding: 0px;
        flex-wrap: wrap;
    }

        .pagecontainer .pagecontainer__content .pagecontainer__content__1 {
            height: 245px;
            width: 284px;
            margin-bottom: 25px;
            margin-right: 34px;
        }

            .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail {
                position: relative;
                overflow: hidden;
            }

                .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail .caption {
                    top: 0%;
                }

                .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail img {
                    padding: 2px;
                    height: 200px;
                    width: 284px;
                }

                .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail .caption {
                    position: absolute;
                    /*top: -100%;*/
                    right: 0;
                    background: rgba(66, 139, 202, 0.25);
                    width: 100%;
                    height: 97%;
                    text-align: center;
                    color: #fff !important;
                    z-index: 2;
                    -webkit-transition: all 0.5s ease-in-out;
                    -moz-transition: all 0.5s ease-in-out;
                    -o-transition: all 0.5s ease-in-out;
                    -ms-transition: all 0.5s ease-in-out;
                    transition: all 0.5s ease-in-out;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                }

                    .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail .caption .view_btn {
                        display: flex;
                        justify-content: center;
                        margin: 20px 0;
                    }

                        .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail .caption .view_btn a {
                            display: block;
                            padding: 5px;
                            width: 125px;
                            border: 2px solid #FE7A15;
                            color: #FFFFFF;
                            background-color: #FE7A15;
                            border-radius: 50px;
                            text-decoration: none;
                            text-align: center;
                        }

            .pagecontainer .pagecontainer__content .pagecontainer__content__1 img {
                padding: 2px;
                height: 245px;
                width: 400px;
            }

@media(max-width:1366px) {
    h4 {
        font-size: 30px;
    }

    .pagecontainer {
        width: 80%;
    }

        .pagecontainer .pagecontainer__content .pagecontainer__content__1 {
            height: 208px;
            width: 234px;
            margin-bottom: 20px;
            margin-right: 20px;
        }

            .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail img {
                height: 204px;
                width: 230px;
            }
}

@media(max-width:1280px) {
    .pagecontainer {
        width: 80%;
    }

        .pagecontainer .pagecontainer__content .pagecontainer__content__1 {
            height: 204px;
            width: 296px;
            margin-bottom: 15px;
        }

            .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail img {
                height: 200px;
                width: 292px;
            }
}

@media(max-width:1024px) {
    .pagecontainer {
        width: 95%;
    }

        .pagecontainer .pagecontainer__content .pagecontainer__content__1 {
            height: 204px;
            width: 278px;
            margin-bottom: 15px;
        }

            .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail img {
                height: 200px;
                width: 274px;
            }
}

@media(max-width:768px) {
    .pagecontainer {
        width: 95%;
    }



        .pagecontainer .pagecontainer__content .pagecontainer__content__1 {
            height: 124px;
            width: 206px;
        }

            .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail img {
                height: 120px;
                width: 202px;
            }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 420px) {
    .pagecontainer {
        width: 95%;
    }

        .pagecontainer > .header {
            font-size: 26px;
        }

        .pagecontainer .pagecontainer__content .pagecontainer__content__1 {
            width: 100%;
            height: auto;
            margin-right: 0;
        }

            .pagecontainer .pagecontainer__content .pagecontainer__content__1 .thumbnail img {
                width: 100%;
                height: auto;
            }
}