/* ---------------------------------------------------------------------------------------------

    PHD Responsive Website Template
    Requires Twitter Bootstrap 4.3.1 (or compatible).
     
   --------------------------------------------------------------------------------------------- */

/* We need to override Bootstrap's default container sizes to work with our standard template. */
/* We also need to set the width of the wrapper div. */

html {
    height: 100%;
    min-height: 100%;
}

body {
    height: 100%;
    min-height: 100%;
    margin: 0 0;
    padding: 0 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 150%;
    background-color: #CCCCCC;
    color: #000000;
}

/* Full Height w/Flexbox */

#frmMaster {
    display: flex;
    flex-direction: column;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 0;
    background-color: #FFFFFF;
}

.content {
    flex-grow: 1;
    align-items: flex-start;
}

@media (max-width: 767px) {

    .wrapper {
        width: 100%;
    }

}


    @media (min-width: 768px) {

        .wrapper {
            border-left: 1px solid #000000;
            border-right: 1px solid #000000;
        }
    }

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

        .wrapper {
            width: 100%;
        }

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

    @media (min-width: 992px) and (max-width: 1083px) {

        .wrapper {
            width: 990px;
        }

        .container {
            width: 960px;
            max-width: 960px;
        }
    }

    @media (min-width: 1084px) {

        .container {
            width: 1054px;
            max-width: 1054px;
        }

        .wrapper {
            width: 1084px;
        }
    }

    /* Header */

    .header {
        padding-top: 15px;
        padding-bottom: 15px;
    }

        .header .container {
            width: 100%;
            max-width: 100%;
        }

        .header .header-logo {
            -ms-flex-item-align: center !important;
            align-self: center !important;
        }

        .header .header-contact {
            -ms-flex-item-align: center !important;
            align-self: center !important;
            text-align: right;
            font-weight: bold;
        }

            .header .header-contact .phone,
            .header .header-contact .phone:visited,
            .header .header-contact .phone:hover {
                color: #000000;
            }

            .header .header-contact .header-contact-social {
                /* Setting the height and font-size fixes a display bug. */
                height: 32px;
                margin: 6px 0 0 0;
                font-size: 0px;
            }

    .header-contact .header-contact-social li {
        font-size: 32px;
        line-height: 100%;
    }

    /* Social Media Icons - Using Their Brand Colors */

    .header-contact .facebook,
    .header-contact .facebook:visited {
        font-weight: normal;
        color: #3B5998;
    }

        .header-contact .facebook:hover {
            color: #8B9DC3;
        }

    .header-contact .twitter,
    .header-contact .twitter:visited {
        font-weight: normal;
        color: #1DA1F2;
    }

        .header-contact .twitter:hover {
            color: #1887CC;
        }

    .header-contact .instagram .fa-instagram,
    .header-contact .instagram:visited .fa-instagram {
        font-weight: normal;
        color: transparent;
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
        background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
        background-clip: text;
        -webkit-background-clip: text;
    }

    .header-contact .instagram:hover .fa-instagram {
        color: #8A49A1;
        background: transparent;
    }

    .header-contact .pinterest,
    .header-contact .pinterest:visited {
        font-weight: normal;
        color: #E60023;
    }

        .header-contact .pinterest:hover {
            color: #B3001B;
        }

    @media (max-width: 767px) {

        .header .header-logo {
            text-align: center;
            margin-bottom: 1rem;
        }

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

    @media (max-width: 991px) {

        .header {
            padding-top: 30px;
            padding-bottom: 30px;
        }
    }

    /* Menu */

    .menu {
        background-color: #242424;
    }

        .menu .container {
            width: 100%;
            max-width: 100%;
            padding-left: 0;
            padding-right: 0;
        }

    /* Dropdown Menus */

    .nav-link.dropdown-toggle:active,
    .nav-link.dropdown-toggle:focus {
        outline: 0;
    }

    /* Footer */

    .footer {
        padding: 30px 15px;
        font-size: 16px;
        color: #DDDDDD;
        line-height: 150%;
        text-align: center;
        background-color: #242424;
    }

        .footer .container {
            width: 100%;
            max-width: 100%;
        }

        .footer a:not(.btn),
        .footer a:not(.btn):visited {
            color: #DDDDDD;
        }

            .footer a:not(.btn):hover {
                color: #FFFFFF;
            }

    .footer ul.ccards {
        /* Setting the height and font-size fixes a display bug. */
        margin: 6px 0 0 0;
        font-size: 0px;
    }

    /* Content */

    .content {
        padding-top: 30px;
        padding-bottom: 30px;
    }

        .content p {
            margin-bottom: 1.5rem;
        }

        .content h1,
        .content h2,
        .content h3 {
            margin: 0 0 1.5rem 0;
            padding: 0 0;
        }

        .content h1 {
            font-size: 200%;
            line-height: 125%;
        }

        .content h2 {
            font-size: 150%;
            line-height: 125%;
        }

        .content h3 {
            font-size: 125%;
            line-height: 125%;
        }

        .content h4 {
            font-size: 110%;
            line-height: 125%;
        }

        .content ul,
        .content ol {
            margin-bottom: 1.5rem;
        }

        .content hr {
            border-color: #CCCCCC;
        }

    /* Fix for stretched images in IE */

    .card .card-img-top {
        min-height: 100%;
    }

    /* Drop Shadow */

    .shadow {
        -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
    }

    /* Contact Page */

    .embed-google-map {
        /* 16x9 */
        padding-bottom: 56%;
    }

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

        .embed-google-map {
            /* 4x3 */
            padding-bottom: 75%;
        }
    }

    /* Swiper */

    .swiper-container {
        width: 100%;
        height: auto;
        margin: 0 auto;
        border: 1px solid #000000;
    }

    .swiper-slide {
        width: 100%;
        height: auto;
        text-align: center;
    }

        .swiper-slide img {
            width: 100%;
            height: auto;
        }

    .swiper-pagination {
        position: relative;
        width: 100%;
    }

    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 4px;
        background-color: #000000;
        outline: none;
        opacity: 0.5;
    }

    .swiper-pagination-bullet-active {
        opacity: 1.0;
        outline: none;
    }

.swiper-slide .slide-title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #FFFFFF;
    text-shadow: 0 0 10px rgba(0, 0, 0, 1);
}

.swiper-slide .slide-title .slide-title-text {
}

.swiper-slide .slide-title.slide-title-left {
    text-align: left;
}

.swiper-slide .slide-title.slide-title-right {
    text-align: right;
}

    .swiper-slide .slide-title.slide-title-left .slide-title-text {
        width: auto;
        margin-bottom: 0;
        margin-top: auto;
        margin-left: 0;
        margin-right: auto;
        padding: 18px 144px 18px 27px;
        background-image: url('/phdmodules/bootstrap/4.4.1/phd-template/slide-title-left-bg.png');
        background-position: bottom right;
        background-repeat: repeat-y;
    }

    .swiper-slide .slide-title.slide-title-right .slide-title-text {
        width: auto;
        margin-bottom: 0;
        margin-top: auto;
        margin-left: auto;
        margin-right: 0;
        padding: 18px 27px 18px 144px;
        background-image: url('/phdmodules/bootstrap/4.4.1/phd-template/slide-title-right-bg.png');
        background-position: bottom left;
        background-repeat: repeat-y;
    }

.swiper-slide .slide-title .slide-title-text .slide-title-text-lg {
    margin-bottom: 0.75rem;
    font-size: 200%;
    line-height: 100%;
}

.swiper-slide .slide-title .slide-title-text .slide-title-text-sm {
    font-size: 150%;
    line-height: 100%;
}

@media (max-width : 767px) {

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .swiper-slide .slide-title {
    }

    .swiper-slide .slide-title .slide-title-text {
        padding: 10px 10px !important;
    }

    .swiper-slide .slide-title.slide-title-left .slide-title-text {
        width: 100%;
        margin-bottom: 0;
        margin-top: auto;
        padding: 18px 27px;
        background-image: url('/phdmodules/bootstrap/4.4.1/phd-template/slider-title-phone.png');
        background-repeat: repeat-y;
    }

        .swiper-slide .slide-title.slide-title-right .slide-title-text {
            width: 100%;
            margin-bottom: 0;
            margin-top: auto;
            padding: 18px 27px;
            background-image: url('/phdmodules/bootstrap/4.4.1/phd-template/slider-title-phone.png');
            background-repeat: repeat-y;
        }

    .swiper-slide .slide-title .slide-title-text .slide-title-text-lg {
        margin-bottom: 9px;
        font-size: 85%;
        line-height: 100%;
    }

    .swiper-slide .slide-title .slide-title-text .slide-title-text-sm {
        font-size: 60%;
        line-height: 100%;
    }

}

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

    .swiper-slide .slide-title {
    }

    .swiper-slide .slide-title .slide-title-text {
    }

    .swiper-slide .slide-title .slide-title-text .slide-title-text-lg {
        margin-bottom: 0.5rem;
        font-size: 125%;
        line-height: 100%;
    }

    .swiper-slide .slide-title .slide-title-text .slide-title-text-sm {
        font-size: 100%;
        line-height: 100%;
    }

}

    /* Multi-Column Lists */

    .two-col-list {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }

    .three-col-list {
        columns: 3;
        -webkit-columns: 3;
        -moz-columns: 3;
    }

    .four-col-list {
        columns: 4;
        -webkit-columns: 4;
        -moz-columns: 4;
    }

    @media (max-width : 767px) {

        .two-col-list,
        .three-col-list,
        .four-col-list {
            columns: initial;
            -webkit-columns: initial;
            -moz-columns: initial;
        }
    }

    @media (min-width : 768px) And (max-width : 991px) {

        .two-col-list {
            columns: initial;
            -webkit-columns: initial;
            -moz-columns: initial;
        }

        .three-col-list,
        .four-col-list {
            columns: 2;
            -webkit-columns: 2;
            -moz-columns: 2;
        }
    }

/* ********************************************************************************************* */
/* Fixes for IE 11 */
/* ********************************************************************************************* */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

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

    .two-col-list,
    .three-col-list,
    .four-col-list {
        margin-left: 0;
    }

        .two-col-list .fa-li,
        .three-col-list .fa-li,
        .four-col-list .fa-li {
            position: relative;
            display: inline-block;
            left: 0;
        }
}

@media (max-width : 767px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    .two-col-list,
    .three-col-list,
    .four-col-list {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
}

/* ********************************************************************************************* */
/* Fixes for Edge */
/* ********************************************************************************************* */

@supports (-ms-ime-align: auto) {

    .two-col-list,
    .three-col-list,
    .four-col-list {
        margin-left: 0;
    }

        .two-col-list .fa-li,
        .three-col-list .fa-li,
        .four-col-list .fa-li {
            position: relative;
            display: inline-block;
            left: 0;
        }
}