body {
    margin: 0;
}

.content {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
    padding-left: 65px;
    padding-right: 65px;
    box-sizing: border-box;
    min-height: calc(100vh - 126px);
}

@media screen and (max-width: 1250px) { 
    .content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

    .intro {
        height: 200px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: -10px;
        margin-bottom: -20px;
    }

        .intro_title {
            color: white;
            margin: 0;
            font-size: 50px;
            letter-spacing: 1px;
        }

        .intro_subtitle {
            color: white;
            font-weight: 300;
            font-size: 20px;
            margin: 0;
            margin-top: 6px;
            line-height: 100%;

        }

        @media screen and (max-width: 1100px) { 
            .intro_title {
                font-size: 40px;
                line-height: 106%;
            }
            .intro_subtitle {
                font-size: 18px;
            }
        }

        @media screen and (max-width: 550px) { 
            .intro_title {
                font-size: 35px;
                letter-spacing: -0.2px;
            }
            .intro_subtitle {
                font-size: 16px;
            }
        }

        @media screen and (max-width: 410px) { 
            .intro_title {
                font-size: 28px;
            }
            .intro_subtitle {
                font-size: 16px;
            }
        }

        .cd_searchbar {
            width: calc(100% - 20px);
            background-color: transparent;
            border-radius: 5px;
            border-width: 0px;
            border-bottom-width: 2px;
            border-color: white;
            border-style: solid;
            padding: 10px;
            outline: none;
            color: white;
            margin-bottom: 40px;
        }

        .filterbycat {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin-bottom: -10px;
            height: 100px;
            margin-top: -20px;
            overflow-x: scroll;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        @media screen and (max-width: 1250px) { 
            .filterbycat {
                width: calc(100% + 20px);
                padding-left: 40px;
                margin-left: -40px;
 
            }
        }

        .filterbycat::-webkit-scrollbar {
            display: none;
        }

            .filtercat {
                margin-right: 14px;
                height: max-content;
                position: relative;
                width: max-content;
                padding-left: 14px;
                padding-right: 14px;
                padding-top: 5px;
                padding-bottom: 5px;
                border-radius: 4px;
                color: white;
                opacity: 0.6;
                -webkit-user-select: none; /* Safari */        
                -moz-user-select: none; /* Firefox */
                -ms-user-select: none; /* IE10+/Edge */
                user-select: none; /* Standard */
            }

            .filtercat:hover {
                opacity: 0.9;
                cursor: pointer;
            }

    .cards {
        width: calc(100% + 20px);
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-bottom: 20px;
        margin-left: -10px;
    }

            .card {
                width: calc(25% - 20px);
                height: auto;
                padding: 16px;
                box-sizing: border-box;
                border-radius: 10px;
                position: relative;
                transition: transform 0.5s;
                margin-bottom: 16px;
                box-shadow: 10px 10px 20px #0f0c36;
                margin-right: 10px;
                margin-left: 10px;
            }

            @media screen and (max-width: 1300px) { 
                .card {
                    width: calc(33.33% - 20px);
                }
            }

            @media screen and (max-width: 950px) { 
                .card {
                    width: calc(50% - 20px);
                }
            }

            @media screen and (max-width: 575px) { 
                .card {
                    width: calc(100% - 20px);
                }
            }

            .card:hover {
                transform: translateY(-10px);
                cursor: pointer;
            }

                .card_gradient {
                    position: absolute;
                    width: 100%;
                    margin-left: -16px;
                    margin-top: -16px;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    z-index: 0;
                }

                .card_upper {
                    width: 100%;
                    height: 60px;
                    display: flex;
                    flex-direction: row;      
                }

                    .card_titlecontainer {
                        width: calc(100% - 60px);
                        height: 60px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        box-sizing: border-box;
                        margin-left: 12px;
                    }

                    @media screen and (max-width: 700px) { 
                        .card_titlecontainer {
                            margin-left: 6px;
                            margin-top: -1px;
                        }
                    }

                        .card_title {
                            font-size: 18px;
                            font-weight: 600;
                            color: white;
                            margin: 0;
                            z-index: 50;
                            line-height: 100%;
                        }

                        .card_subtitle {
                            font-size: 14px;
                            font-weight: 300;
                            color: white;
                            opacity: 0.8;
                            margin: 0;
                            padding-right: 6px;
                            line-height: 100%;
                            margin-top: 3px;
                        }

                        @media screen and (max-width: 750px) { 
                            .card_subtitle {
                                font-size: 12.5px;
                            }
                        }

                .card_lower {
                    width: calc(100% + 32px);
                    height: 280px;
                    margin-top: -60px;
                    margin-bottom: -16px;
                    border-radius: 10px;
                    margin-left: -16px;
                    background-position: center;
                    background-repeat: none;
                    background-size: cover;
                }

                @media screen and (max-width: 750px) { 
                    .card_lower {
                        height: 240px;
                    }
                }

                @media screen and (max-width: 600px) { 
                    .card_lower {
                        height: 200px;
                    }
                }

                .card_cat {
                    height: inherit;
                    position: relative;
                    z-index: 1;
                    margin-top: -42px;
                    margin-left: -6px;
                    width: max-content;
                    padding-left: 14px;
                    padding-right: 14px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    border-radius: 4px;
                    color: white;
                    opacity: 0.8;
                }

                    #marketing {
                        background-color: #4B4A67;
                    }

                    #finance {
                        background-color: #AD343E;
                    }

                    #investigation {
                        background-color: #285943;
                    }

                    #politics {
                        background-color: #125E8A;
                    }

        .card_column_lef {
            padding-right: 18px;
        }

        .card_column_mid_l {
            padding-left: 6px;
            padding-right: 12px;
        }

        .card_column_mid_r {
            padding-left: 12px;
            padding-right: 6px;
        }

        .card_column_rig {
            padding-left: 18px;
        }


    .regular_cards {
        width: calc(100% + 20px);
        height: auto;
        display: flex;
        flex-wrap: wrap;
    }

        .regular_card {

            width: calc(20% - 40px); /* 25% - (margin + padding + border) */
            height: 60px;
            background-color: #11112fb0;

            display: flex;
            justify-content: center;
            flex-direction: column;

            margin-right: 16px;
            margin-bottom: 16px;
            padding-left: 20px;

            border-radius: 8px;
            border-width: 0px;
            border-left-width: 4px;
            border-style: solid;
            border-color: white;
            
            text-align: left;

            transition: transform 0.5s;

        }


        @media screen and (max-width: 1450px) { 
            .regular_card {
                width: calc(25% - 40px);
            }
        }

        @media screen and (max-width: 1150px) { 
            .regular_card {
                width: calc(33.33% - 40px);
            }
        }

        @media screen and (max-width: 860px) { 
            .regular_card {
                width: calc(50% - 40px);
            }
        }

        @media screen and (max-width: 520px) { 
            .regular_card {
                width: calc(100% - 40px);
            }
        }

        .regular_card:hover {
            transform: translateY(-6px);
            cursor: pointer;
            background-color: #11112fe8;
        }

            .reg_card_title {
                font-size: 18px;
                letter-spacing: 0px;
                color: white;
            }

            .reg_card_sub {
                font-size: 12px;
                letter-spacing: -0.2px;
                color: rgba(255, 255, 255, 0.772);
                line-height: 100%;
            }