
:root {
    --pks-primary: #2FC7FA;
    --pks-secondary: #FF9628;
    --pks-success: #27FB6F;
    --pks-danger: #FC8E86;
    --pks-warning: #FFC028;
    --pks-dark: #030709;
    --pks-light: #f9fbfc;
}

html,
body {
    background-color: var(--pks-light);
    color: var(--pks-dark);
    font-family: 'Open Sans', arial, sans-serif;
}

a {
    color: var(--pks-dark);
    font-weight: 600;
}

a:hover {
    color: var(--pks-primary);
}

h1 {
    background-color: var(--pks-secondary);
    border-bottom: 5px solid var(--pks-success);
    border-radius: 7px;
    padding: 0.2em;
}

h1.inverted{
    background-color: transparent;
    color: var(--pks-secondary);
    border-bottom: 0;
    border-radius: 0;
    padding: 0;
}

h2 {
    background-color: var(--pks-primary);
    border-bottom: 5px solid var(--pks-danger);
    border-radius: 7px;
    padding: 0.2em;
}

h2.inverted {
    background-color: transparent;
    color: var(--pks-primary);
    border-bottom: 0;
    border-radius: 0;
    padding: 0;
}

div[class="text-center"] h1,
div[class="text-center"] h2,
div[class="text-center"] h3,
div[class="text-center"] h4,
div[class="text-center"] h5,
div[class="text-center"] h6 {
    margin: 0 auto;
}


div[class="text-center"] p {
    margin: 0 auto 2em;
}

div[class="content-center"] {
    margin-bottom: 0;
    text-align: center;
}

div[class="content-center"] h1,
div[class="content-center"] h2,
div[class="content-center"] h3,
div[class="content-center"] h4,
div[class="content-center"] h5,
div[class="content-center"] h6 {
    margin: 0.2em auto;
    text-align: left;
}

div[class="content-center"] p {
    margin: 0 auto 2em;
    text-align: left;
}

form:not(#search-form) {
    max-width: 35rem;
    margin: 1em auto;
}

footer {
    background-color: var(--pks-dark);
    color: var(--pks-light);
    padding: 1em 0;
    text-align: center;
    clear: both;
}

footer a {
    color: var(--pks-primary);
}

footer a:hover {
    color: var(--pks-secondary);
}

footer p {
    margin: 0 auto;
}

input:valid,
textarea:valid,
select:valid {
    border-color: var(--pks-dark);
}

input:invalid,
textarea:invalid,
select:invalid {
    border-color: var(--pks-danger);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    max-width: 35rem;
    margin-bottom: 0.8rem !important;
    font-family: 'Lato', arial, sans-serif;
}

p {
    font-size: 1.15em;
    max-width: 35rem;
}

body { position: relative;  }

.float-col {
    max-width: 100%;
}

.hero-header {
    font-size: 2em;
}

.hero-text {
    font-size: 1.1em;
}

.bg-primary {
    background-color: var(--pks-primary) !important;
}

.bg-dark {
    background-color: var(--pks-dark) !important;
}

.text-primary {
    color: var(--pks-primary) !important;
}

.text-secondary {
    color: var(--pks-secondary) !important;
}

.text-dark {
    color: var(--pks-dark);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--pks-light);
}

.navbar-dark .navbar-nav .nav-link:focus, 
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--pks-primary);
}

.description-container {
    margin-top: 0;
    height: 16rem;
    overflow-y: scroll;
    max-width: 35rem;
    border: 5px solid var(--pks-warning);
    padding: 1.5em;
    position: relative;
}

.img-container-fluid {
    margin: 1.5em auto;
}

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

.img-circle {
    margin: 0 auto !important;
}

.img-circle img {
    border-radius: 100%;
    margin: 1em;
}

.profile-img img {
    width: 8em;
}

.navbar-brand img {
    width: 12em;
    margin-bottom: 0.1em;
}

.slideshow {
    height: 18em;
    margin-bottom: 1em;
}

.slide-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v-tab-list-container {
    min-height: 20em;
    margin: 0 auto;
    max-width: 35rem;
}

.carousel-item {
    min-height: 20em;
}

.carousel-caption {
    text-align: left;
    top: 10%;
}

.carousel-caption h3,
.carousel-caption p {
    margin: 0 auto;
}

.carousel-caption a {
    margin-top: 1em;
}

.carousel-indicators 
[data-bs-target] {
    width: 15px;
    height: 15px;
    border-radius: 100%;
}

.card {
    border: 0;
    margin: 0 auto;
    width: 100%;
}

.card-img, 
.card-img-bottom, 
.card-img-top {
    max-height: 10em;
}

.card-body {
    border: 2px dashed var(--pks-danger);
    margin: 1em 0;
}

.btn-primary {
    background-color: var(--pks-secondary);
    color: var(--pks-dark);
    font-weight: 500;
    border-color: var(--pks-dark);
}

.btn-primary:hover {
    background-color: var(--pks-dark);
    color: var(--pks-light);
    font-weight: 500;
    border-color: var(--pks-dark);
}

.btn {
    border-radius: 2em;
}

.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
    background-color: var(--pks-danger);
    color: var(--pks-dark);
    font-weight: 700;
}

.nav-pills .nav-link {
    color: var(--pks-dark);

}

.nav-link {
    color: var(--pks-danger);
}

.nav-link:hover {
    color: var(--pks-warning);
}

.dropdown-toggle::after {
    content: "+";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    vertical-align: -0.01em;
}

.tab-pane p { position: relative; }

.tab-pane a[aria-expanded="true"]::after {
    content: "-";
    color: var(--pks-secondary);
    font-size: 1.5em;
    text-decoration: none;
    position: absolute;
    top: -7px;
    left: 95%;
}

.tab-pane a[aria-expanded="false"]::after {
    content: "+";
    color: var(--pks-secondary);
    font-size: 1.5em;
    text-decoration: none;
    position: absolute;
    top: -7px;
    left: 95%;
}


.tab-content {
    border: 10px solid var(--pks-primary);
    padding: 1em;
}

.bg-success {
    background-color: var(--pks-success)!important;
    color: var(--pks-dark);
}

a[class="nav-link dropdown-toggle show"]::after {
    content: "-";
}

#collapse-toggle-container {
    border-bottom: 3px solid var(--pks-primary);
    padding-bottom: 1em;
    text-align: center;
}

#services-tab_content p {
    max-width: 100%;
}

#services-tab_content .multi-collapse p {
    max-width: 35rem;
}

div.muted-theme {
    background-color: var(--pks-dark);
    color: var(--pks-light);
}

#contact-info {
    width: auto;
}

#contact-form-container{
    width: auto;
}

@media only screen and (min-width: 720px) {
    .card {
        width: 14rem;
    }  
}

@media only screen and (min-width: 1024px) {
    .card {
        margin: 0;
        width: 18rem;
    }

    .hero-header {
        font-size: 3.5em;
    }

    .hero-text {
        font-size: 1.5em;
    }

    /* needed for chrome */
    img[src$="#hero-img"] {
        max-width: 26rem;
        position: absolute;
        top: 3%;
        right: 10%;
    }

    /* needed for firefox */
    img[src="#hero-img"] {
        max-width: 26rem;
        position: absolute;
        top: 3%;
        right: 10%;
    }

    #contact-info {
        width: 30%;
    }
    
    #contact-form-container{
        width: 70%;
    }

    .slide-desc {
        overflow: visible;
        text-overflow: inherit;
        white-space: inherit;
    }

    .slideshow {
        height: 22em;
        margin-bottom: 1em;
    }

    .float-col {
        max-width: 45%;
    }
}