/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
body, .card {
    /*background-color: #171619;*/
    background-color: ghostwhite;
    font-family: 'Merriweather Sans', sans-serif;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.fa-blink {
    -webkit-animation: fa-blink 1.75s linear infinite;
    -moz-animation: fa-blink 1.75s linear infinite;
    -o-animation: fa-blink 1.75s linear infinite;
    animation: fa-blink 1.75s linear infinite;
}

.navbar-nav li a:hover {
    color: #fff !important;
}

.pContent {
    font-size: 1.2em;
    max-width: 70ch;
}

.list-group-item {
    font-size: 1.2em;
}

.contSection {
    /* filter:drop-shadow(10px 10px 20px rgb(28, 134, 28)); */
    column-count: 2;
    /*text-align: justify;*/
    column-width: 200px;
    /*transition-delay: 1s;
            transition-property: background-color,font-weight;
            transition-timing-function:ease-in-out;
            transition-duration: 2s;*/
}

h2, h1, h3, hr, .pContent a {
    filter: drop-shadow(10px 10px 20px #1f2427);
}

.card-default > .card-header {
    color: white;
    background-color: #A14203;
    border-color: #A14203;
    border-bottom-color: white;
}

.card-default {
    border-bottom-color: #A14203;
    border-left-color: #A14203;
    border-top-color: #A14203;
    border-right-color: #A14203;
    margin: 0 auto;
}

.circ {
    shape-outside: circle(50%);
    clip-path: circle(50%);
    width: 50%;
    height: auto;
    float: left;
}

.bioImage {
    border-radius: 50%;
    float: left;
    filter: sepia(40%);
    height: 150px;
    width: auto;
    margin-right: 5px;
}

.wowImage {
    border-radius: 50%;
    float: left;
    height: 130px;
    width: auto;
    margin-right: 5px;
}

.fmdImage {
    border-radius: 50%;
    height: 130px;
    margin-left: 5px;
    float: right;
}

.esiImage {
    float: right;
    height: 75px;
    margin-left: 5px;
}

@supports (shape-outside:circle()) and (clip-path:circle()) {
    /*chrome mobile and edge do not support shapes and clips - why not? */
    .bioImage {
        shape-outside: circle(37% at 52% 36%);
        clip-path: circle(37% at 52% 36%);
        border-radius: 0%;
        height: 250px;
    }

    .esiImage {
        float: right;
        height: 75px;
        shape-outside: circle();
        clip-path: circle(100%);
        margin-left: 5px;
    }

    .wowImage {
        shape-outside: ellipse();
        border-radius: 0%;
        float: left;
        height: 200px;
        width: auto;
        margin-right: 15px;
        clip-path: ellipse(48% 40% at 50% 50%)
    }

    .fmdImage {
        border-radius: 0%;
        height: 200px;
        margin-left: 5px;
        shape-outside: ellipse();
        clip-path: ellipse(48% 40% at 50% 50%)
    }
}