:root {

    --cit-primary-bg: #ffffff;
    --cit-secondary-bg: #f7f7f7;
    --cit-border-color: #dddddd;
    --cit-label-color: #222222;
    --cit-text-color: #444444;

    --cit-font-family: Arial, sans-serif;

    --cit-border-radius: 0px;

    --cit-label-width: 35%;
}

/*
|--------------------------------------------------------------------------
| Main Wrapper
|--------------------------------------------------------------------------
*/

.cit-wrapper {

    width: 100%;
    max-width: 1400px;

    margin: 40px auto;

    background: var(--cit-primary-bg);

    border: 1px solid var(--cit-border-color);

    overflow: hidden;

    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Profile Image
|--------------------------------------------------------------------------
*/

.cit-profile-image-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 35px 20px;

    background: var(--cit-primary-bg);
}

.cit-profile-image {

    width: 220px;

    height: 220px;

    object-fit: cover;

    border-radius: 50%;

    border: 6px solid #f1f1f1;

    display: block;
}

/*
|--------------------------------------------------------------------------
| Table
|--------------------------------------------------------------------------
*/

.cit-table {

    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}

.cit-table tr {

    border-top: 1px solid var(--cit-border-color);
}

.cit-table td {

    padding: 18px 24px;

    vertical-align: middle;

    font-size: 16px;

    line-height: 1.7;

    font-family: var(--cit-font-family);

    color: var(--cit-text-color);

    word-break: break-word;

    box-sizing: border-box;
}

.cit-table td:first-child {

    width: var(--cit-label-width);

    background: var(--cit-secondary-bg);

    color: var(--cit-label-color);

    font-weight: 700;
}

.cit-table td:last-child {

    background: var(--cit-primary-bg);
}

/*
|--------------------------------------------------------------------------
| Ultrawide Screens
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1920px) {

    .cit-wrapper {

        max-width: 1600px;
    }

    .cit-table td {

        font-size: 18px;

        padding: 22px 30px;
    }

    .cit-profile-image {

        width: 260px;

        height: 260px;
    }
}

/*
|--------------------------------------------------------------------------
| Large Desktop
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 1440px) {

    .cit-wrapper {

        max-width: 1200px;
    }
}

/*
|--------------------------------------------------------------------------
| Desktop & Laptop
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 1024px) {

    .cit-table td {

        padding: 16px;

        font-size: 15px;
    }

    .cit-profile-image {

        width: 180px;

        height: 180px;
    }
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 768px) {

    .cit-table td {

        padding: 14px;

        font-size: 14px;
    }

    .cit-profile-image {

        width: 160px;

        height: 160px;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 767px) {

    .cit-wrapper {

        border: none;
    }

    .cit-table,
    .cit-table tbody,
    .cit-table tr,
    .cit-table td {

        display: block;

        width: 100%;
    }

    .cit-table tr {

        margin-bottom: 15px;

        border: 1px solid var(--cit-border-color);
    }

    .cit-table td {

        border: none;

        padding: 14px;
    }

    .cit-table td:first-child {

        border-bottom: 1px solid var(--cit-border-color);

        width: 100%;
    }

    .cit-profile-image-wrapper {

        padding: 20px;
    }

    .cit-profile-image {

        width: 140px;

        height: 140px;
    }
}

/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 480px) {

    .cit-table td {

        font-size: 13px;

        padding: 12px;
    }

    .cit-profile-image {

        width: 120px;

        height: 120px;
    }
}