@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:200,300,400,500,600,700|montserrat:200,300,400,500,600,700);

.redbdr {
    border: 1px solid red;
}

hr, .hr {
    color: #848484;
    border-color: #848484;
}

:root {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

* {
    box-sizing: border-box !important;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    /*border: 1px solid yellow;*/
}

/* Fluid Typography */

html {
    font-size: 16px;
    margin: 0;
    padding: 0;
    z-index: 0;
}

@media screen and (min-width: 320px) {
    html {
        /* font-size: calc( [minimum size] + ( [maximum size] - [minimum size] ) * ( ( 100vw - [minimum viewport width] ) / ( [maximum viewport width] - [minimum viewport width] ) ) ); */
        font-size: calc(14px + 6 * ((100vw - 320px) / 680));
        /*font-size: clamp(16px, 3px + 3vw, 18px);*/
    }
}

@media screen and (min-width: 1024px) {
    html {
        font-size: 18px;
    }
}

body {
    background-color: #ffffff;
    color: #000000;

    margin: 0;
    /*padding: 0 0 5rem;*/
    padding: 0;

    font-family: "Montserrat", sans-serif;
    font-weight: unset;
    line-height: 1.5;
}

.wrapper {
    margin: 0 auto;
    padding: 1rem;
}

.wrapper-print {
    margin: 0 auto;
    padding: 1rem;
    max-width: 850px;
}

.wrapper-welcome {
    margin: 0 auto;
    padding: 0 0.5rem;
    max-width: 1200px;
}

.wrapper-edge {
    padding: .4rem 0 0;
    border-top: 2px solid #336699;
}

section {
    padding: 1rem;
    text-align: center;
}

.section-padding {
    padding: 4rem 1rem;
}

div, p {
    margin: 0;
    padding: 0;

    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

p {
    margin-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;

    font-family: "IBM Plex Serif", serif;
    line-height: 1.5;
    font-weight: 500;
}

h1, .h1 {
    font-size: clamp(2rem, 2px + 2vw, 2.25rem);
}

h2, .h2 {
    font-size: clamp(1.8rem, 2px + 2vw, 2rem);
}

h3, .h3 {
    font-size: clamp(1.6rem, 2px + 2vw, 1.8rem);
}

h4, .h4 {
    font-size: clamp(1.4rem, 2px + 2vw, 1.6rem);
}

h5, .h5 {
    font-size: clamp(1.2rem, 2px + 2vw, 1.4rem);
}

h6, .h6 {
    font-size: clamp(1rem, 2px + 2vw, 1.2rem);
}

/* font families */

.ff-sans-serif {
    font-family: 'Montserrat', sans-serif;
}

.ff-serif {
    font-family: 'IBM Plex Serif', serif;
}

/* Text Alignment */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.text-justify-all {
    text-align: justify-all;
}

a.text-alpha {
    display: block;
    align-self: center;
    font-size: 1rem;
    font-weight: 700;
}

.text-nowrap {
    white-space: nowrap;
}

.nowrap {
    white-space: nowrap;
}

.yeswrap {
    white-space: break-spaces;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-white {
    color: #ffffff !important;
}

.text-off-white {
    color: #b0b0b0 !important;
}

.text-muted {
    color: #a0a0a0 !important;
}

.text-primary {
    color: #336699;
}

.text-dk-blue {
    color: #567999 !important; /*375f7a*/
}

.text-info {
    color: #339999 !important;
}

.text-success {
    color: #339933 !important;
}

.text-lite-yellow {
    color: #b4b494 !important;
}

.text-warning {
    color: #f49904 !important;
}

.text-danger {
    color: #c40019 !important;
    /*color: #ffff00;*/
}

/* Definition Lists, Terms and Data */

dl, dd {
    font-weight: 300;
}

dt {
    font-weight: 600;
}

dd {
    margin: 0;
}

/* font sizes */

sup, .sup {
    font-size: 10px
}

.fs08 {
    font-size: 0.8rem;
}

.fs09 {
    font-size: 0.9rem;
}

.fs100 {
    font-size: 1rem;
}

.fs125 {
    font-size: 1.25rem;
}

.fs150 {
    font-size: 1.5rem;
}

.fs175 {
    font-size: 1.75rem;
}

.fs200 {
    font-size: 2rem;
}

.tiny {
    font-size: 12px !important;
}

.fs12 {
    font-size: 12px;
}

.fs13 {
    font-size: 13px;
}

.fs14 {
    font-size: 14px;
}

.fs15 {
    font-size: 15px;
}

/* font weights */

.fw200 {
    font-weight: 200;
}

.fw300 {
    font-weight: 300;
}

.fw400 {
    font-weight: 400;
}

.fw500 {
    font-weight: 500;
}

.fw600 {
    font-weight: 600;
}

.fw700, .fw-bold {
    font-weight: 700;
}

/* SPACING */

.w50p {
    min-width: 50%;
}

.w100p, .maxw {
    min-width: 100%;
}

.w115x {
    width: 115px;
}

/* Margin */

.m-0 {
    margin: 0;
}

.mt-1 {
    margin-top: .25rem;
}

.mb-1 {
    margin-bottom: .25rem;
}

.my-1 {
    margin: 0.25rem 0;
}

.mt-2 {
    margin-top: .5rem;
}

.mb-2 {
    margin-bottom: .5rem;
}

.my-2 {
    margin: 0.5rem 0;
}

.m-3 {
    margin: 1rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.my-3 {
    margin: 1rem 0;
}

.mr-2 {
    margin-right: 1rem;
}

.m-5 {
    margin: 3rem;
}

.mt-5 {
    margin-top: 3rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.my-5 {
    margin: 3rem 0;
}

/* Padding */

.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pb-1 {
    bottom: 0.25rem;
}

.pl-1 {
    padding-left: .25rem;
}

.py-1 {
    padding: 0.25rem 0;
}

.p-2 {
    padding: .5rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.py-2 {
    padding: .5rem 0;
}

.pl-2 {
    padding-left: .5rem;
}

.pr-2 {
    padding-right: .5rem;
}

.p-3 {
    padding: 1rem;
}

.pt-3 {
    padding-top: 1rem;
}

.pr-3 {
    padding-right: 1rem;
}

.pb-3 {
    padding-bottom: 1rem;
}

.pl-3 {
    padding-left: 1rem;
}

.py-3 {
    padding: 1rem 0;
}

.py-4 {
    padding: 2rem 0;
}

.pb-4 {
    padding-bottom: 2rem;
}

.py-5 {
    padding: 3rem 0;
}

.pt-5 {
    padding-top: 3rem;
}

.pb-5 {
    padding-bottom: 3rem;
}

/* LINKS */

a {
    color: #94c4f4;
    text-decoration: none;
    font-weight: 400;
}

a:hover {
    color: #f46464;
}

a.text-white {
    color: #ffffff;
}

/* CSS TABLES */

.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
}

table * {
    padding: 0.3rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table tr th {
    background-color: #2f2f2f;
    color: #f0f0f0;
    border: 1px solid #00000088;
}

table tr td {
    border-bottom: 1px solid #444444;
}

table thead,
table tbody,
table tfoot {
    vertical-align: top;
    /*white-space: nowrap !important;*/
}

thead th {
    padding: .2rem 0 .2rem .4rem !important;
    text-align: left !important;
    font-weight: 500;
}

/* Drop Down Menu */

.dd-btn {
    position: relative;
    cursor: pointer;
}

.dd-btn-content {
    display: none;
    z-index: 9999 !important;
    background-color: #224466;
    padding: 1rem;
    text-align: left;
    border-radius: 0 0 .4rem .4rem;

    position: fixed;
    top: 78px;
    right: 10px;
    /*left: 0;*/
    /*margin: 0 auto;*/
    width: 300px;
}

/*@media screen and (min-width: 400px) {*/
/*    .dd-btn-content {*/
/*        top: 103px;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 500px) {*/
/*    .dd-btn-content {*/
/*        top: 106px;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 600px) {*/
/*    .dd-btn-content {*/
/*        top: 109px;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 668px) {*/
/*    .dd-btn-content {*/
/*        top: 110px;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 768px) {*/
/*    .dd-btn-content {*/
/*        top: 114px;*/
/*    }*/
/*}*/

ul.dd-btn-content li {
    display: block;
    /*border: 1px solid red;*/
    padding: .2rem .2rem .2rem .4rem;
}

.dd-btn-content li i {
    display: inline-block;
}

.dd-btn-content li a {
    display: inline-block;
    color: #ffffff !important;
    padding: .2rem;
}

ul.dd-btn-content li:hover {
    background-color: #112233;
    padding: .2rem .2rem .2rem .4rem;
    border-radius: .2rem;
}

/* FORMS */

:focus {
    outline: none;
    background-color: rgba(255, 255, 255, .1);
}

input, select, textarea {
    max-width: 100%;
    padding: .3rem;
    box-sizing: border-box;
    border-radius: .1rem;
    border: none;
    background-color: rgba(255, 255, 255, .1);
    color: #c0c0c0; /* #374757, #22303f */
}

/* CUSTOM CSS */

.agenda-title {
    font-size: .9rem;
    font-weight: 700;
}

.agenda-item {
    border-left: 4px solid #999999;
    margin: 0 0 1rem 0;
    padding: .4rem 0 .4rem .4rem;
}

.agenda-item div small {
    font-weight: 300;
}

.alert-message {
    background-color: #44668899;
    border-radius: .1rem;
    padding: 1rem;
}

.avatar-image {
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain;
    display: block;
}

.vertical-center {
    align-self: center !important;
}

.badge {
    background-color: #446688;
    color: #f0f0f0;
    border: 1px solid rgba(0, 0, 0, .4);
    border-radius: 33%;
    padding: .2rem .5rem;
}

.badge-square {
    border-radius: 4px;
}

.b-red {
    border-color: #CE0019;
}

.b-orange {
    border-color: #ff8844;
}

.b-yellow {
    border-color: #dddd00;
}

.b-green {
    border-color: #33cc33;
}

.b-dk-blue {
    border-color: #374757;
}

.b-blue {
    border-color: #6699ff;
}

.b-indigo {
    border-color: #7e33c3;
}

.b-white {
    border-color: #ffffff;
}

.b-black {
    border-color: #000000;
}

.bg-blue {
    background-color: #374757;
}

.btn-button {
    display: inline-block;
    background-color: #336699;
    /*background-image: linear-gradient(#374757, #22303f);*/
    color: #9c9c9c;
    border: 1px solid #224466;
    border-radius: 4px;
    padding: .3rem .4rem;
    /*margin: 0 0 .5rem;*/
}

.button-white-blue {
    border-radius: 5rem;
    background-color: #ffffff;
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    padding: .8rem 1.6rem;
    margin: 1rem 0 0;
}

.button-white-blue:hover {
    background-color: #336699;
    color: #ffffff;
}

.card {
    position: relative;
    /*word-wrap: break-word;*/
    background-color: #2c2c2c;
    /*background-clip: border-box;*/
    border: 1px solid #000000;
    border-radius: .3rem;
    padding: 10px;
    height: auto !important;
}

.card-rounded {
    border-radius: .6rem;
}

.card-body {
    flex: 1 1 auto;
    padding: 20px;
}

.content-padding {
    padding: 1.5rem 0;
}

.custom-file {
    position: relative;
}

.custom-file-label {

}

.custom-file-input {
    position: absolute;
    top: -999px;
}

.circle-avatar {
    float: none;
    margin: 0 auto 1rem;
    border: 2px solid #336699;
    border-radius: 50%;
    max-width: 15rem;
    clear: both;
    display: block;
}
@media screen and (min-width: 768px) {
    .circle-avatar {
        float: right;
        margin: 0 0 .25rem .25rem;
    }
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

/*.date-wrapper {*/
/*    border-left: 2px solid #374757;*/
/*    margin: 0 0 2rem 0;*/
/*    padding: .2rem 0 .2rem .4rem;*/
/*}*/

.date {
    font-weight: 500;
    margin-bottom: .4rem;
    padding: .4rem;
}

.grid {
    display: grid;
}

.gg1 {
    gap: .1rem;
}

.gg025 {
    gap: 0.25rem;
}

.gg05 {
    gap: 0.5rem;
}

.gg10 {
    gap: 1rem;
}

.gg15 {
    gap: 1.5rem;
}

.g-logo {
    grid-template-columns: auto auto;
}

.g-whole, .g-half, .g-thirds, .g-fourths,
.g-sixths, .g-half-whole, .g-whole-half,
.g-half-fourths, .g-half-thirds-fourths,
.g-half-thirds-sixths,
.g-minical1, .g-minical2, .g-minical3,
.g-id-card, .g-inv-header, .l-one-third,
.g-contact-tags {
    grid-template-columns: repeat(1, 1fr);
}

.g-inv-header {
    text-align: center;
}

.icon-grid {
    grid-template-columns: 1fr 1fr;
}

.g-half-imp-thirds-sixths {
    grid-template-columns: 1fr 1fr;
}

.minical1, .minical3 {
    display: none;
}

.minical2 {
    display: block;
}

footer section h4 {
    font-size: clamp(22px, 2px + 2vw, 30px) !important;
}

footer section p {
    /*border: 1px solid red;*/
    font-size: clamp(16px, 2px + 2vw, 18px) !important;
}

.footer-copy {
    font-size: clamp(12px, 2px + 2vw, 14px) !important;
}

.force-no-break-on-div-content {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

@media screen and (min-width: 576px) {
    .g-half, .g-thirds, .g-fourths,
    .g-sixths, .g-half-fourths,
    .g-half-thirds-fourths, .g-half-thirds-sixths {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 768px) {
    .g-half, .g-thirds, .g-fourths,
    .g-sixths, .g-minical2,
    .g-inv-header {
        grid-template-columns: repeat(2, 1fr);
    }

    .l-one-third {
        grid-template-columns: 200px 1fr;
    }

    .g-inv-header {
        text-align: left;
    }

    .g-inv-header > div:nth-child(2) {
        text-align: right;
    }

    .g-minical1, .g-minical2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .minical1 {
        display: none;
    }

    .minical2, .minical3 {
        display: block;
    }

    .g-id-card, .g-half-thirds, .g-half-whole {
        grid-template-columns: repeat(2, 1fr);
    }

    .icon-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media screen and (min-width: 769px) {
    .g-thirds {
        grid-template-columns: repeat(3, 1fr);
    }

    .g-fourths {
        grid-template-columns: repeat(4, 1fr);
    }

}

@media screen and (min-width: 1024px) {
    .g-half-fourths {
        grid-template-columns: repeat(4, 1fr);
    }

    .g-half-thirds, .g-half-thirds-fourths,
    .g-half-thirds-sixths, .g-half-imp-thirds-sixths {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1240px) {
    .g-thirds {
        grid-template-columns: repeat(3, 1fr);
    }

    .g-fourths {
        grid-template-columns: repeat(4, 1fr);
    }

    .g-half-thirds-fourths {
        grid-template-columns: repeat(4, 1fr);
    }

    .g-half-thirds-sixths, .g-half-imp-thirds-sixths {
        grid-template-columns: repeat(6, 1fr);
    }

    .g-minical1, .g-minical2, .g-minical3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .minical1, .minical2, .minical3 {
        display: block;
    }

    .g-id-card {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1440px) {
    .g-whole-half {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1620px) {
    /*---*/
}

header, header a {
    color: #ffffff !important;
}

header a {
    text-transform: uppercase;
    font-weight: 200;
}

header nav {
    /*border: 1px solid red;*/
    display: grid;
    grid-template-columns: auto 1fr;
}

.hero-welcome {
    background: url("/images/banner-bg-60.jpg") 75% 50% no-repeat;
    background-size: cover;
    height: 70vh;
    line-height: 1;

    display: grid;
    grid-template-rows: 1fr;
    align-items: center;
}

.hero-headline {
    border-radius: .2rem;
    display: inline-block;
    font-size: clamp(16px, 10px + 4vw, 18px);
    background: #336699;
    color: #ffffff;
    padding: .5rem;
    text-transform: uppercase;
}

.hero-title {
    font-size: clamp(32px, 10px + 4vw, 64px);
    font-weight: 600;
    padding: 1rem 0;
}

.hero-content {
    font-size: clamp(18px, 2px + 2vw, 24px) !important;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1200px;
    font-weight: 200;
}


.img-fluid {
    max-width: 100%;
    height: auto;
}

.media-image {
    max-height: 40px;
    width: auto;
}

.nav-gradient {
    padding: 1rem 0;
    background-color: #224466;
    background-image: linear-gradient(#224466, #224466);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

.nav-right {
    align-self: center !important;
}

nav ul {
    list-style-type: none;
    text-align: right;
}

nav ul li {
    /*border: 1px solid red;*/
    display: inline-block;
    padding-right: 1rem;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.page-title {
    text-align: left;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.1rem;
    padding: 0;
    margin: 0;
    color: #374757;
    border-left: 4px solid #374757;
}

.position-relative {
    position: relative !important;
}

.rounded-circle {
    border-radius: 50%;
}

.section-label,
.section-label-sm {
    font-size: 15px;
    display: block;
    font-weight: 600;
    /*color: #6c757d;*/
    text-transform: uppercase;
    letter-spacing: 1px;
}

small, .small {
    font-size: clamp(13px, 2px + 2vw, 15px) !important;
}

.shaded {
    background-color: #f0f0f0;
}

.shaded-noise {
    background: url('/images/noise.png') #f0f0f0 0 0 repeat;
}

.shaded-blue {
    background-color: #224466;
    color: #ffffff;
}

.table-of-contents ul {
    font-family: "IBM Plex Serif", serif;
}

.table-of-contents ul li {
    background: #2c2c2c;
    border-radius: 3px;
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 0 0 .3rem 0;
    padding: .2rem .4rem;
    border-bottom: 2px solid #000000;
}

div.time-slot-width {
    /*display: inline-block;*/
    /*width: 66px !important;*/
}

.top-right-menu {
    grid-template-columns: 1fr auto auto auto;
    font-size: clamp(14px, 2px + 2vw, 16px);
}

.hr-overline {
    border-top: 1px solid #444444;
}

.hr-underline {
    border-bottom: 1px solid #444444;
}

ul.square {
    list-style-type: square;
}

ul.square li {
    margin-left: 1.25rem;
}

ul.services-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

ul.services-list li {

}

.user-avatar {
    border-radius: 50%;
    border: 1px solid #000000;
    height: 80px !important;
    width: 80px !important;
}

.user-initials {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    height: 80px !important;
    width: 80px !important;
    border: 3px solid #000000;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
    border-radius: 50%;
    font-size: 1.75rem;
    font-weight: 600;
}

.vcg-logo {
    max-height: 34px;
    object-fit: contain;
}

.logo-text-vcg,
.logo-text-network {
    color: #ffffff;
    text-shadow:
        /*#ffffff 0 -1px,*/
        #000000 0 1px;
    line-height: 1 !important;
}

.logo-text-vcg {
    font-family: "IBM Plex Serif", serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .4rem;
}

.logo-text-network {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: 8px;
}

@media screen and (min-width: 768px) {
    .vcg-logo {
        max-height: 44px;
    }

    .logo-text-vcg {
        font-size: 28px;
        letter-spacing: .4rem;
    }

    .logo-text-network {
        font-size: 9px;
    }
}

.website-hosting-content {
    margin: 0 auto;
    max-width: 1200px;
}

.why-us-content {
    font-size: clamp(20px, 2px + 2vw, 28px) !important;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1200px;
    font-weight: 300;
}

/* CSS RESPONSIVE DISPLAYS */

.responsive-background {
    /*border: 1px solid red;*/
    color: #00000099;
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 999999;
    background-color: #e0e0e011;
    padding: 10px;
    width: 100%;
    display: none;
    /*display: block;*/
}

.responsive-background:after {
    content: "MOBILE PORTRAIT 0-575";
}

.line-break-mobile {
    display: block;
}

@media screen and (min-width: 576px) {
    .responsive-background {
        background-color: #ff990044;
    }

    .responsive-background:after {
        content: "MOBILE LANDSCAPE 576-767";
    }

    .line-break-mobile {
        display: inline;
    }
}

@media screen and (min-width: 768px) {
    .responsive-background {
        background-color: #ffff0044;
    }

    .responsive-background:after {
        content: "TABLET PORTRAIT 768-1023";
    }
}

@media screen and (min-width: 1024px) {
    .responsive-background {
        background-color: #00ff0044;
    }

    .responsive-background:after {
        content: "STANDARD DESKTOP 1024-1239";
    }
}

@media screen and (min-width: 1240px) {
    .responsive-background {
        background-color: #0099ff44;
    }

    .responsive-background:after {
        content: "WIDESCREEN - 1240-1439";
    }
}

@media screen and (min-width: 1440px) {
    .responsive-background {
        background-color: #ff00ff44;
    }

    .responsive-background:after {
        content: "XTRA-WIDESCREEN - 1440-1620";
    }
}

@media screen and (min-width: 1620px) {
    .responsive-background {
        background-color: #ff000044;
    }

    .responsive-background:after {
        content: "HD 1080P - 1620+";
    }
}