/* #########################################
    Cyber Crime Details Custom StyleSheet
############################################ */

/* ======== Cyber Crime Details Content Container ======== */
    /* How To Recognize Cyber Crime, How To Prevent Cyber Crime */
    .how-to-recognize-cyber-crime-container,
    .how-to-prevent-cyber-crime-container {
        margin: auto;
        padding: 1rem 0;
        display: flex;
        flex-flow: column wrap;
    }
    .how-to-prevent-cyber-crime-content-container { background-color: #DAFDEC; }
    
    /* cyber crim details title wrapper */
    .cyber-crime-details-title-wrapper {
        margin-bottom: .5rem;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
    }
    .cyber-crime-details-icon-wrapper {
        width: 30px;
        height: 30px;
        margin-right: .6rem;
        padding: .2rem;
        border-radius: 50%;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.20) 0px 1px 4px;
    }
    .cyber-crime-details-icon-wrapper img { width: 100%; }
    .cyber-crime-details-title-wrapper p { font-size: 18px; }
    
    /* cyber crime details card wrapper */
    .cyber-crime-details-card-wrapper {
        margin: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .cyber-crime-details-card {
        margin-bottom: .8rem;
        padding: .4rem .5rem;
        display: flex;
        flex-flow: column wrap;
        cursor: pointer;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.30) 0px 1px 4px;
        border-radius: 5px;
    }
    .cyber-crime-details-card:hover {
        border-bottom: 2px solid #058248;
    }
    .cyber-crime-card-title {
        display: flex;
        /* flex-flow: row wrap; */
        align-items: center;
        font-size: 14px;
    }
    .cyber-crime-card-title p { margin: 0; }
    .square-number {
        padding: 3px 7px;
        margin-right: .5rem;
        border-radius: 5px;
        color: white;
        background: #058248;
    }
    .cyber-crime-card-desription {
        padding-left: 1.3rem;
        font-size: 12px;
        color: #656464;
    }

/* ################
    Media Query
################### */

/* ===== Medium Laptop View (!) Width ( 768px <-> 1024px ) (!) ===== */
    @media only screen and ( min-width: 768px ) {
        /* How To Recognize Cyber Crime, How To Prevent Cyber Crime */
        .how-to-recognize-cyber-crime-container,
        .how-to-prevent-cyber-crime-container {
            width: 38rem;
        }

        /* cyber crime details card wrapper */
        .cyber-crime-details-card-wrapper {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            padding-left: unset;
            padding-right: unset;
        }
        .cyber-crime-details-card { width: 11.1rem; }
        .cyber-crime-details-title-wrapper p { font-size: 18px; }
        .cyber-crime-card-title{ font-size: 10px; }
        .cyber-crime-card-desription { font-size: 9px; }
    }
    @media only screen and ( min-width: 912px ) {
        .cyber-crime-details-title-wrapper p { font-size: 22px; }
        .how-to-recognize-cyber-crime-container, 
        .how-to-prevent-cyber-crime-container {
            width: 44rem;
        }
        .cyber-crime-details-card { width: 12.9rem; }
        .square-number { padding: 4px 8px; }
        .cyber-crime-card-title { font-size: 12px; }
        .cyber-crime-card-desription { font-size: 12px; }
    }

/* =====  Large Laptop View (!) Width ( 1024px <-> 1920px ) (!) ===== */

    @media only screen and ( min-width: 1024px ) {
        .cyber-crime-details-title-wrapper p { font-size: 25px; }
        .cyber-crime-details-icon-wrapper {
            width: 40px;
            height: 40px;
            padding: .4rem;
        }
        .how-to-recognize-cyber-crime-container, 
        .how-to-prevent-cyber-crime-container {
            width: 51rem;
        }
        .cyber-crime-details-card { width: 15.2rem; }
        .square-number { padding: 6px 10px; }
        .cyber-crime-card-title { font-size: 14px; }
        .cyber-crime-card-desription { font-size: 14px; }
    }

    @media only screen and ( min-width: 1200px ) {
        .cyber-crime-details-title-wrapper p { font-size: 30px; }
        .cyber-crime-details-icon-wrapper {
            margin-right: 1rem;
            padding: .6rem;
        }
        .how-to-recognize-cyber-crime-container, 
        .how-to-prevent-cyber-crime-container {
            width: 58rem;
        }
        .cyber-crime-details-card {
            width: 16.7rem;
            padding: 0.7rem .9rem;
        }
        .square-number { padding: 7px 12px; }
        .cyber-crime-card-title { font-size: 16px; }
        .cyber-crime-card-desription { font-size: 16px; }
    }

    @media only screen and ( min-width: 1280px ) {
        .how-to-recognize-cyber-crime-container, 
        .how-to-prevent-cyber-crime-container {
            width: 60.5rem;
        }
        .cyber-crime-details-card { width: 17.5rem; }
    }

    @media only screen and ( min-width: 1366px ) {
        .cyber-crime-details-title-wrapper p { font-size: 36px; }
        .cyber-crime-details-icon-wrapper {
            width: 45px;
            height: 45px;
            padding: .8rem;
        }
        .how-to-recognize-cyber-crime-container, 
        .how-to-prevent-cyber-crime-container {
            width: 67rem;
        }
        .cyber-crime-details-card {
            width: 18.5rem;
            margin-bottom: 1.5rem;
            padding: 0.7rem 1.4rem;
        }
        .square-number { padding: 9px 14px; }
        .cyber-crime-card-title { font-size: 17px; }
        .cyber-crime-card-desription { font-size: 17px; }
    }

    @media only screen and ( min-width: 1680px ) {
        .cyber-crime-details-title-wrapper p { font-size: 38px; }
        .cyber-crime-details-icon-wrapper {
            width: 50px;
            height: 50px;
            margin-right: 1.5rem;
        }
        .how-to-recognize-cyber-crime-container, 
        .how-to-prevent-cyber-crime-container {
            width: 80rem;
        }
        .square-number { padding: 9px 16px; }
        .cyber-crime-card-title { font-size: 21px; }
        .cyber-crime-card-desription { font-size: 20px; }
        .cyber-crime-details-card { width: 22.8rem; }
    }

    @media only screen and ( min-width: 1920px ) {
        .cyber-crime-details-title-wrapper p { font-size: 45px; }
        .cyber-crime-details-icon-wrapper {
            width: 60px;
            height: 60px;
            padding: 1rem;
        }
        .cyber-crime-card-title { font-size: 25px; }
        .square-number { padding: 9px 18px; }
        .cyber-crime-card-desription { font-size: 24px; }
        .how-to-recognize-cyber-crime-container, 
        .how-to-prevent-cyber-crime-container {
            width: 90rem;
        }
        .cyber-crime-details-card {
            width: 25.6rem;
            margin-bottom: 2rem;
            padding: 0.9rem 1.6rem;
        }
    }