/* These styles affect all pages on the site. */
    /* css animations */
@keyframes fadeInOut {
  0% {
      opacity: 0;
      right: -5rem;
  }
  15% {
      opacity: 1;
      right: 1rem;
  }
  85% {
      opacity: 1;
      right: 1rem;
  }
  100% {
      opacity: 0;
      right: -5rem;
  }
}



html { 
    scroll-behavior: smooth; 
}
*  { 
    box-sizing: border-box; 
}
body { 
    font-family: 'Poppins', Arial, Helvetica, sans-serif; 
    line-height: 1; 
    margin: 0; 
    overflow-x: hidden;
    position: relative;
}
p, 
li { 
    line-height: 1.5; 
}
#toast {
    animation-name: fadeInOut;
    animation-duration: 4s;
    background-color: #8C69A3;
    border: 2px solid #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    color: #fff;
    right: 1rem;
    padding: 0.5rem 1rem;
    position: fixed;
    top: 7rem;
    z-index: 5;
}
#toast > p {
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 0;
}

/* Header and Navigation */
      /* Header */
#contentSkipLink, 
#mainMenuLabel {
    display: none; 
}
nav {
    margin-top: 5em;
    position: relative;
    z-index: 1;
}
nav h2 {
    text-align: center;
}

/* Main content area styles */
main { 
    background-color: #fff; 
    position: relative;
}
.contentSection:not(.full) { 
    padding: 1em 1.5em; 
}
#fixedNav {
    bottom: 1em;
    margin-top: 0;
    position: fixed;
    right: 1em;
    z-index: 5;
}
main .funFact, .modal .project_subheading h2 {
    background-color: rgba(255, 198, 235, 0.7);
    border-radius: 3em;
    margin-top: 1em;
    padding: 1.5em 2em;
    text-align: center;
}

/* Footer styles */
footer { 
    background-color: #fff; 
    line-height: 2; 
    padding-left: 1rem; 
    padding-right: 1rem; 
    padding-bottom: 1rem; 
    text-align: center; 
    vertical-align: middle; 
}
footer p { 
    line-height: 35px; 
    margin: 0; 
}

/* Elements */
hr { 
    border-color: #ccc; 
    border-style: solid; 
    border-width: 1px 0 0; 
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
h1, h2, h3, h4, h5, h6 { 
    font-weight: 700; 
}
h1 {
    font-size: 32px;
}
h1 strong {
    font-size: 3.75rem;
}
h2 {
    font-size: 26px;
}
h2 strong {
    font-size: 3.25rem;
}
h3 {
    font-size: 20px;
}
h3 strong {
    font-size: 2.5rem;
}
h4 {
    font-size: 18px;
}
h5 {
    font-size: 16px;
}
h6 {
    font-size: 14px;
}
h1, 
h2,
.contentSection:not(#about) h3 {
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 3px;
    line-height: 1.75;
    margin-top: 0;
}
#summary h1 strong,
.contentSection h2 strong,
.contentSection:not(#about):not(#work) h3 strong {
    text-transform: lowercase;
    font-family: 'Homemade Apple';
    display: block;
    line-height: 1.75em;
    letter-spacing: 0;
    color: #660A50;
}


/* Paragraph Styles */
p { 
    font-size: 1.25rem;
    line-height: 1.75;
    margin-bottom: 1em;
    margin-top: 0;
}

/* Link Styles */
a { 
    color: #660A50; 
    font-weight: 700; 
    text-decoration: none; 
    transition: all 0.5s ease-in-out; 
}
a:hover, 
a:active, 
a:focus { 
    background-color: #ffe9cb; 
    color: #3c042f; 
}
a:focus { 
    text-decoration: underline; 
}
    /* links with additional info for accessibility */
a.info, button.info {
    position: relative;   
}
a.info span.linkInfo, button.info span.linkInfo, label.linkInfo {
    background-color: #f4ccd1;
    color: #3c042f;
    font-size: 80%;
    font-style: italic;
    font-weight: normal;
    left: 20%;
    min-width: 14em;
    opacity: 0;
    padding: 0.25rem;
    position: absolute;
    text-align: center;
    text-transform: none;
    top: 90%;    
    transition: all 0.5s ease-in-out;
    visibility: hidden;
    width: auto;
}
a.info:hover span.linkInfo,
a.info:active span.linkInfo,
a.info:focus span.linkInfo {
    visibility: visible;
    opacity: 1;
}


    /* link to top of the page */
#topLink, .modal .btn-close {
    background-color: rgba(102, 10, 80, 0.05);
    border: 1px solid rgba(102, 10, 80, 0.1);
    box-shadow: 0 0 1px 1px rgba(255,255,255,0.5);
    color: rgba(102, 10, 80, 0.5);
    display: block;
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1;
    padding: 0.5em;
    text-decoration: none;
    text-shadow: 0 0 rgba(255,255,255,0.5);
    z-index: 2;
}

#topLink:active, .modal .btn-close:active {
    background-color: #660A50;
    color: #fff;
}
.btn-close:hover,
.modal .btn-close:hover {
    background-color: #660A50;
    color: #fff;
}

.modal .btn-close {
    background-color: rgba(247, 243, 246, 0.9);
    position: fixed;
    top: 1em;
    right: 1em;
}

.modal .btn-close:focus {
    outline: 1px solid #000;
}


/* Font effects */
strong { 
    font-weight: 600; 
}
em { 
    font-style: italic; 
}
small { 
    font-size: 85%; 
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}


/* Lists */
ol {
    list-style-type: decimal;
    padding-inline-start: 1em;
}
ol > li {
    padding-left: 1em;
}
ul {
    list-style-type: disc;
    padding-inline-start: 2em;
}
li {
    display: list-item;
    list-style-position: outside;
    margin-bottom: 1em;
}

/* Horizontal rules (hr) */
#summary hr,
#about hr {
    width: calc(100% - 2em);
    margin-left: -3em;
    margin-top: -2em;
    margin-bottom: 3em;
    position: relative;
    z-index: -1;
    border-top-width: 3px;
}

#about hr {
    position: absolute;
    margin-left: initial;
    left: -75%;
    z-index: 1;
}
footer hr {
    margin-bottom: 1rem;
    margin-top: 0;
    max-width: 35%;
}

/* containers, rows, and columns */
.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
}
.max-width-60 {
    max-width: 60%;
}
.max-width-80 {
    max-width: 80%;
}

#work .max-width-80 {
    
}

    /* row */
.row {
    clear: both;
    margin-left: -1rem;
    margin-right: -1rem;
    overflow: auto;
}

    /* columns */
[class^="col-"] {
    display: inline-block;
    padding-left: 1rem;
    padding-right: 1rem;
    float: left;
}

.col-4 {
    width: 33.333%;
}

.col-md-4 {
    width: 100%;
}

.col-8 {
    width: 66.666%;
}

/* images */
main img {
    border-radius: 50%;
    display: block;
    height: auto;
    max-width: 150px;
}

main img.cert_logo {
    border-radius: 0;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.iconImg {
    margin-left: auto;
    margin-right: auto;
    max-width: 150px;
}

/* floats and margins */
.margin-auto {
    margin-left: auto;
    margin-right: auto;
}

.margin-bottom-3x {
    margin-bottom: 3em;
}

.pull-right {
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
}

.pull-left {
    float: left;
    margin-bottom: 1em;
    margin-right: 1em;
}

/* backgrounds */
.bg-1 {
    border: 0.25rem solid #975272;
    border-radius: 1rem;
    min-height: 6rem;
    overflow: hidden;
    padding: 5rem 0.5em;
    position: relative;
    text-align: center;
}


/* wells */
.well {
    background-color: #fff;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    height: 100%;
    padding: 1rem;
    transition: box-shadow .333s cubic-bezier(0.8, 0, 0.24, 1);
}

.well:active,
.well:focus {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1);
}

/* buttons */
.btn-pill {
    border: 1px solid #660A50;
    border-radius: 5em;
    color: #660A50;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    padding: 0.75em 1em; 
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}
.btn-pill:focus {
    background-color: #ffefff;
}
.btn-pill:active,
.btn-pill.active {
    background-color: #660A50;
    color: #fff;
}

.btn-alt1 {
    border: 1px solid mediumvioletred;
    border-radius: 5em;
    color: mediumvioletred;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    padding: 0.75em 1em; 
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}
.btn-alt1:focus {
    background-color: #ffefff;
}
.btn-alt1:active,
.btn-alt1:hover,
.btn-alt1.active {
    background-color: mediumvioletred;
    color: #fff;
}



#fixedNav .btn-pill {
    margin-right: 1rem;
}
#fixedNav .btn-pill:not(:hover):not(:active):not(:focus) {
    background-color: rgba(255,255,255,0.7);
}
a:disabled,
button:disabled,
a[disabled],
button[disabled],
a:disabled:hover,
button:disabled:hover,
a[disabled]:hover,
button[disabled]:hover,
a:disabled:focus,
button:disabled:focus,
a[disabled]:focus,
button[disabled]:focus {
    background-color: #eee!important;
    border-color: #333!important;
    color: #333!important;
    cursor: not-allowed!important;
    font-style: italic!important;
}


/* unique .contentSection styles */

    /* summary */
#summary {
    background-color: aliceblue;
    background-image: radial-gradient(at top left, aliceblue 70%, #a9dfff);
    padding: 4rem 3rem 7rem 3rem;
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 1;
}
#summary:after, 
#summary:before {
    content: ' ';
    width: 50em;
    height: 50em;
    display: block;
    background-color: #660A50;
    border-radius: 100% 300%;
    position: absolute;
    left: -30%;
    top: 60%;
    border: 4em solid mediumvioletred;
    z-index: -1;
}
#summary:before {
    top: -70%;
    left: 80%;
    border: 8em double palevioletred;
    background-color: mediumvioletred;
    width: 40em;
    border-radius: 200% 370% 240% 480%;
    height: 40em;
}
#summary .intro
 {
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0 0.5rem 0.25rem 0 rgba(74, 88, 96, 0.1);
    padding: 2em;
    position: relative;
}

#summary #intro1 {
    border-left: 0.5rem solid #a9dfff;
    margin-bottom: 3.5em;
}

#summary #intro2 {
    border-right: 0.5rem solid #a9dfff;
}

#summary a {
    text-decoration: none;
}

#summary h1 { 
    font-size: 1.5rem;
    text-align: left; 
}

#summary h1 span {
    font-weight: 700;
}

#about h2 {
    text-align: left;
}

#summary img#picOfMe {
    max-width: 200px;
}

#summary p {
    font-size: 140%;
    line-height: 2.5;
    margin-bottom: 0;
}

#summary .funFact {
    border-radius: 5em;
    bottom: 1em;
    float: left;
    margin-bottom: 2em;
    padding: 2em 3em;
    position: relative;
    right: -55%;
    text-align: center;
    width: 65%;
}

#summary .funFact p {
    font-size: 0.9em;
    margin-bottom: 0;
}

#summary > .intro > p:nth-child(2) {
    margin-bottom: 0;
}

#summary a[href*="#"] .bg-1 {
    background-color: transparent;
}
#summary a[href*="#"] .bg-1,
#summary a[href*="#"] .bg-1::after {
    transition: all 0.5s ease-in-out;
}

#summary a[href*="#"] .bg-1::after {
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

#summary a[href="#work"] .bg-1::after {
    background-image: linear-gradient(135deg, #fff2e1cc 0%, #fdf2e2f0 20%, #f4ccd1fa), url('/images/ccr_thumb.jpg');
}

#summary a[href="#approach"] .bg-1::after {
    background-image: linear-gradient(135deg, #fff2e1cc 0%, #fdf2e2f0 20%, #f4ccd1fa), url('/images/documentation_thumb.jpg');
}

#summary a[href="#about"] .bg-1::after, #summary a[href="#closer"] .bg-1::after {
    background-image: linear-gradient(135deg, #fff2e1cc 0%, #fdf2e2f0 20%, #f4ccd1fa), url('/images/sodaPop-decent.jpg');
}

#summary a[href*="#"] .bg-1:hover {
    background-color: #b07891;
    color: #fff;
    border-color: #660A50;
}

#summary .bg-1:hover h2, 
#summary .bg-1:hover h2 strong { 
    color: #fff; 
}

#summary .bg-1 h2 {
    margin: 0;
}

#summary .bg-1 h2 strong {
    line-height: 1;
    margin-top: 0.5em;
    position: relative;
}

#summary .bg-1 h2 strong::after {
    content: '\23F7';
    display: block;
    position: absolute;
    width: 100%;
}





    /* work */
#work {
    padding-top: 5em;
    padding-bottom: 0;
}
    /* filters */
#filterWorks { 
    border-top: 1px solid #ccc;
    margin-top: 3rem;
}
#filterContent {
    background-color: #f5f5f5;
    /*margin-left: -1.5rem;
    margin-right: -1.5rem; */
    padding-bottom: 1em;
    padding-top: 2.5em;
}
#filterBtns,
#filterSettings {
    background-color: #fff;
    /* margin-left: -1.5em;
    margin-right: -1.5em; */
    padding-bottom: 0.25em;
    position: sticky;
    text-align: center;
    top: 0;
    z-index: 2;
}
#filterSettings {
    border-top: 1px solid #ccc;
    border-bottom: 0;
    bottom: 0;
    padding-bottom: 1em;
    padding-top: 1em;
    top: initial;
    z-index: 1;
}

#filterBtns .btn-pill {
    margin-bottom: 0.75em;
    margin-left: 0.25em;
    margin-right: 0.25em;
}
#filterSettings .btn-pill:not(.btn-filter) {
    /*border-color: #ccc;
    color: #767676; */
    border-color: #8C69A3;
    color: #8C69A3;
    border-width: 0;
    border-bottom-width: 1px;
}
#filterSettings .btn-pill + .btn-pill {
    margin-left: 1em;
} 
#filterSettings .btn-pill:not(.btn-filter):active {
    background-color: #666;
    color: #fff;
}
    /* wells */
#work .row {
    flex-flow: row wrap;
}
#work .well {
    display: flex;
    flex-flow: column nowrap;
    height: auto;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 2em;
    overflow: hidden;
    opacity: 1;
    padding: 0;
    text-align: center;
    transition: all 0.3s ease-in-out;
    width: calc(25% - 2em);
    border: 1px solid #ccc;
}
#work .well-body {
    padding: 1em 1em 0;
}
#work .well-body h3, 
#work .well-body p {
    margin-bottom: 0;
}
#work .well-footer {
    margin-top: auto;
    padding: 1em;
}
#work .well-footer .btn-pill { 
    display: block;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
    width: 100%;
}
#work .well-footer .btn-pill + .btn-pill { 
    margin-bottom: 0;   
}
#work h3 strong {
    display: block;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 0.2em;
    text-transform: capitalize;
}
#work div.img-background {
    padding-top: 65%;
    position: relative;
    overflow: hidden;
}
#work div.img-background::before, 
#work div.img-background::after {
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease-in-out; 
    width: 100%;
}
#work div.img-background::before {
    background-image: linear-gradient(rgba(200,180,195,0.2), rgba(75,30,65,0.5));
    z-index: 1;
}
#work div.img-background::after { 
    background-size: 110%; 
    background-position: top center; 
    background-repeat: no-repeat;
    background-attachment: scroll;
    z-index: 0;
}
#work .well:hover div.img-background::before {
    background-image: linear-gradient(rgba(200,180,195,0.1), rgba(75,30,65,0.3));
}
#work .well:hover div.img-background::after {
    transform: scale(1.1);
}
#work .well p { 
    display: none; 
}
#work #emptyFilters.well strong {
    text-transform: initial;
}
#work #emptyFilters.well p {
    display: block; 
    font-size: 1em;
    padding-top: 0.5em;
}
#work #emptyFilters.well .well-body {
    padding-bottom: 2em;
}
#work #emptyFilters.well img {
    border-radius: 0;
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 180px;
}
#work #modelBar div.img-background::after { 
    background-image: url('/images/modelBarUI_thumb.jpg'); 
}
#work #accessibility div.img-background::after { 
    background-image: url('/images/accessibilityReports_thumb.jpg'); 
}
#work #infinitiModelResearch div.img-background::after { 
    background-image: url('/images/infinitiMRP_thumb.jpg'); 
}
#work #thirdpartytools div.img-background::after { 
    background-image: url('/images/googleAdsTPI_thumb.jpg'); 
}
#work #designHandbook div.img-background::after { 
    background-image: url('/images/designBible_thumb.jpg'); 
}
#work #dealeronDocumentation div.img-background::after { 
    background-image: url('/images/documentation_thumb.jpg'); 
}
#work #kfds div.img-background::after { 
    background-image: url('/images/insalontech1_thumb.jpg'); 
}
#work #ccr div.img-background::after { 
    background-image: url('/images/ccr_thumb.jpg'); 
}
#work #pma div.img-background::after { 
    background-image: url('/images/painmoulden_thumb.jpg'); 
}
#work #koden div.img-background::after { 
    background-image: url('/images/koden_thumb.jpg'); 
}
#work #it480 div.img-background::after { 
    background-image: url('/images/prosperityCenter_thumb.jpg'); 
}
#work #jacesolutions div.img-background::after { 
    background-image: url('/images/jacesolutions_thumb.jpg'); 
}
#work #marketingPlan div.img-background::after { 
    background-image: url('/images/daughtersInn_thumb.jpg'); 
}
#work #wisteria div.img-background::after { 
    background-image: url('/images/wisteria.jpg'); 
}
#work #qsu div.img-background::after { 
    background-image: url('/images/qsu_thumb.jpg'); 
}
#work #weSkate div.img-background::after { 
    background-image: url('/images/weSkate_thumb.jpg'); 
}
#work #prRFP div.img-background::after { 
    background-image: url('/images/prRFP_thumb.jpg'); 
}
#work #graphics div.img-background::after { 
    background-image: url('/images/equivoque_thumb.jpg'); 
}



    
    /* approach */
#approach {
    background: linear-gradient(135deg, #ffe9cb, #f4ccd1 55%);
    padding: 5em 1.5em 3em;
}
#approach .well {
    padding: 1rem 1.5rem;
}
#approach p {
    margin-bottom: 2em;
}
#approach li {
    line-height: 1.75;
}



    /* about */
#about {
    background-image: radial-gradient(at top left, aliceblue 70%, #a9dfff);
    /*margin-bottom: 2em;*/
    overflow: hidden;
    padding: 4em 1.5em 3em;
    position: relative;
}
#about h2 {
    margin-top: 0;
}

#about p:last-child {
    margin-bottom: 0;
}

        /* my pets */
#myPets h3,
#myPets p {
    margin-bottom: 0.25em;
    margin-top: 0;
}

#myPets img {
    border: 2px solid #ccc;
    max-width: 100%;
}
#myPets .well {
    border-radius: 25em 2em 2em 25em;
    height: auto;
    margin-bottom: 1em;
    width: 100%;
}
#myPets .well > .row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}



/* closer */
#closer {
    padding: 4em 2em 2em;
}
#closer p {
    text-align: center;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}
#closer p .btn-pill {
    margin-top: 1.25rem;
}
#closer h2 strong {
    margin-top: 0.5rem;
}


/* Media Queries */
@media (min-width: 2000px) {
    .container,
    .max-width-80,
    .container-lg,
    #work .row {
        max-width: 1900px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    #summary #picOfMe.pull-right {
        right: 0;
    }
}
@media screen and (min-width: 1200px) {
    #about .container > .row {
        display: flex;
        align-items: center;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1500px) {
    .col-lg-5 {
        width: 41.666%;
    }
    .col-lg-7 {
        width: 58.333%;
    }
}
@media screen and (max-width: 1199px) and (min-width: 768px) {
    #myPets {
        margin-top: 2em;
    }
    #myPets .well,
    #myPets img {
        border-radius: 0.5em;
    }
    #myPets > .row,
    #myPets > .row > .col-md-4  {
        display: flex;
    }
    #myPets .well > .row {
        flex-flow: column nowrap;
        text-align: center;
    }
    #myPets .well h3 {
        margin-top: 1em;
    }
    .col-md-12 {
        width: 100%;
    }
    .col-md-4 {
        width: 33.333%;
    }
}
@media screen and (max-width: 1199px) and (min-width: 992px) {
    .bg-1 h2 strong {
        font-size: 2.25rem;
    }
    #work .well {
        width: calc(33.333% - 2em);
    }
}
@media screen and (min-width: 992px) {
    #approach .well .iconImg {
        filter: grayscale(1);
        transition: all 0.3s ease-in-out;
    }
    #approach .well:hover .iconImg {
        filter: revert;
    }
    #summary #picOfMe.pull-right {
        position: absolute;
        right: 3em;
        z-index: 1;
        max-width: 375px;
    }

    #summary .intro {
        width: calc(100% - 360px - 10em);
        margin-left: 5em;
    }
    
    #summary #intro2.intro {
        width: calc(100% - 260px);
        margin-left: auto;
    }
    
    #summary .funFact {
        left: 40%;
    }
    
    .text-left-md {
        text-align: left;
    }
}
@media screen and (max-width: 991px) {
    #work .well {
        width: calc(50% - 2em);
    }

    #summary:before {
        top: -25%;
    }

    #summary h1 {
        font-size: 1.25em;
        text-align: center;
    }

    #summary h1 strong,
    .contentSection:not(#about):not(#work) h3 strong {
        font-size: 2em;
        line-height: 1.25;
        margin-top: 0.25em;
    }

    #summary hr {
        margin: -0.5em -2em 2em auto;
    }

    #about hr {
        left: -35%;
        margin-top: -1.5em;
    }

    #summary #picOfMe.pull-right {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .contentSection h2 strong {
        font-size: 2.25rem;
        text-align: center;
        margin-top: 0.25em;
        margin-bottom: 0.75em;
        line-height: 1.15;
    }

    #summary .bg-1 h2 strong {
        margin-bottom: 0;
    }

    #summary {
        padding: 3em 1.5em 1.5em;
    }

    #summary .intro {
        padding: 1.25em;
    }

    #summary .funFact {
        background-color: #f1c5e2d9;
        border-radius: 3em;
        margin-top: 0;
        padding: 1.5em 1.5em;
        position: static;
        width: 100%;
    }

    #summary nav {
        margin-top: 2em;
    }

    #about h2 {
        text-align: center;
    }
    #closer h2 strong {
        margin-top: 1rem;
    }
}

@media screen and (min-width: 768px) {
    #approach .row, 
    #work .row {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }

    .visible-xs {
        display: none;
    }

    #closer p {
        max-width: 60%;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .max-small-80 {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .row.max-small-80 > [class^="col-"] {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    #fixedNav {
        bottom: 9.5em;
    }
    main {
        width: 100%;
    }

    .col-4,
    .col-8 {
        width: 100%;
    }

    .hero {
        margin-left: 0;
        margin-right: 0;
    }

    p, 
    #summary p, 
    #approach li {
        font-size: 1em;
    }
    ul {
        padding-inline-start: 1.5em;
    }

    .bg-1 {
        margin-bottom: 1em;
    }

    #approach .well {
        height: auto;
    }

    .visible-xs {
        display: block;
    }
    
    .pad-horz-sm-1x {
        padding-left: 1em;
        padding-right: 1em;
    }

    #summary h2 {
        text-align: center;
    }

    .max-width-60,
    .max-width-80 {
        max-width: 100%;
    }

    #work .row {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }
    #work .well-body h3 {
        font-size: 0.75em;
        letter-spacing: 2px;
    }
    #work .well-footer .btn-pill {
        font-size: 0.85em;
    }
    
    #filterContent {
        border-top: 1px solid #ccc;
    }
    #filterBtns {
        border-bottom: 0;
        margin: 0;
        margin-bottom: 0.75em;
        padding: 0 1em;
        position: static;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    #filterBtns .btn-pill {
        padding: 0.5em 1em;
    }

    #myPets {
        margin-top: 2em;
    }

    #myPets .well,
    #myPets img {
        border-radius: 0.5em;
    }
    #myPets .well:nth-child(2n+2) .row {
        flex-flow: row-reverse nowrap;
    }
    #myPets .well:nth-child(2n+2) h3,
    #myPets .well:nth-child(2n+2) p {
        padding-left: 1rem;
    }
    #myPets .col-4 {
        width: 100%;
    }
    #closer p {
        max-width: 100%;
    }
}

@media screen and (max-width: 539px) {
    #work .row {
        display: block;
        padding-left: 1em;
        padding-right: 1em;
    }
    #work .well {
        width: 100%;
        display: block;
        margin-left: 0;
        margin-right: 0;
    }
    #myPets .col-md-4 {
        display: block;
        float: none;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }
    #myPets img {
        border-radius: 0.25em;
        margin-bottom: 1em;
    }
    #myPets .well {
        border-radius: 0.25em;
    }
    #myPets .well > .row {
        display: block;
        text-align: center;
    }
    #myPets .well:nth-child(2n+2) h3, 
    #myPets .well:nth-child(2n+2) p {
        padding-left: 0;
    }
}
@media screen and (max-width: 320px) {
    .contentSection:not(#work) {
        padding-left: 15px;
        padding-right: 15px;
    }
    .contentSection .row {
        margin-left: 0;
        margin-right: 0;
    }
    [class^="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    .well {
        padding: 0.5rem;
    }
    #summary .bg-1 h2 strong,
    .contentSection h2 strong {
        font-size: 2rem;
    }
    #summary .funFact {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        width: auto;
    }
    #myPets .col-md-4 {
        width: 100%;
    }
    #closer h2 strong {
        line-height: 1.75;
        margin-top: 0;
    }
    .emailLink {
        word-break: break-word;
    }
}
@media (hover: hover) {
    a#topLink:hover {
        background-color: #660A50;
        color: #fff;
    }
    #approach .well:hover,
    #work .well:hover {
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1);
    }
    .btn-pill:hover {
        background-color: #660A50;
        color: #fff;
    }
    #filterSettings .btn-pill:not(.btn-filter):hover {
        background-color: #8C69A3;
        border-color: #8C69A3;
        color: #fff;
    }
}
@media screen and (max-width: 1499px) and (min-width: 992px) {
    #summary .intro {
        margin-left: 0;
        width: calc(100% - 215px);
    }
    #summary #intro2.intro {
        margin-left: auto;
        width: calc(100% - 100px);
    }
    #summary .funFact {
        left: 20%;
        max-width: 850px;
        right: initial;
        width: calc(65% + 200px);
    }
    #summary #picOfMe.pull-right {
        right: -4em;
        top: -3em;
    }
}




/* show/hide */
.hidden, 
#work .well.hidden { 
    display: none!important;
    opacity: 0; 
}
.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
}




/* modals - consolidate and tidy up */
body.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    background-color: #fff;
    overflow-y: scroll;
    overflow-x: hidden;
    display: none;
}

.modal-open .modal.show {
    display: block;
}

/* .modalToolbar {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #f5f5f5;
    /* width: 100%;
    text-align: right;
    z-index: 1;
} */

.modalToolbar { 
    z-index: 1; 
}

.modalToolbar [class^="btn-"] {
    padding: 0.5em;
    cursor: pointer;
    /*border: 1px solid #d5d5d5;*/
    display: block;
    float: left;
}

.modal ol, .modal ul {
    font-size: 1.25rem;
}

.col-6 {
    width: 50%;
    float: left;
}
.content-col.col-6 {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.col-12 {
    max-width: 650px;
}
/* fix this col nonsense */
.col-6, .col-12 {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


.hero {
    padding: 15vh 5vh;
    position: relative;
    display: block;
    overflow: hidden;
}

#modelBarModal .hero::after {
    background-image: url('/images/modelBarUI_thumb.jpg');
}

.hero::before, .hero::after {
    content: '';
    background-image: linear-gradient(135deg, rgba(200,180,195,0.6), rgba(75,30,65,0.7));
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.hero::after {
    z-index: -2;
    transition: all 0.3s ease-in-out;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.hero:hover::after {
    transform: scale(1.2);
}


.heroHeading {
    text-align: center;
}

.heroHeading h1 {
    display: inline-block;
    background-color: #660A50;
    color: #fff;
    padding-left: 4em;
    padding-right: 4em;
}


.project_subheading {
    text-align: center;
}

.project_subheading h2 {
    display: inline-block;
    margin-bottom: 0;
    padding: 1em;
    /* border: 2px solid cornflowerblue; */
    border-radius: 1em;
    background-color: aliceblue;
    margin-top: -1.5em;
    /* margin-bottom: 2em; */
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #d5d5d5;
}

.modal .contentSection {
    padding: 0;
}

.content-col {
    padding: 2em;
}

.bg-img {
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 100%;
    transition: all 0.3s ease-in-out;
    position: relative;
    background-color: #b07891;
}

.bg-cover {
    background-size: cover;
}

.flex-row {
    display: flex;
    flex-flow: row nowrap;
    margin: 0;
}

.flex-row + .flex-row .contentCol {
    padding-top: 0;
}

.content-centered {
    background-color: #fff2e1;
}

.img-col .bg-img {
    height: 33.333%;
    flex-grow: 1;
    overflow: hidden;
}

.img-col .bg-img.bg-col-1 {
    height: 100%;
}

.img-col .bg-img.bg-col-2 {
    height: 50%;
}

.img-col {
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
}

.accordion-col {
    padding-left: 0;
    padding-right: 0;
    /*background-color: #b07891;*/
}

.bg-img:hover::before {
    transform: scale(1.2);
}

.bg-img::before {
    content: '';
    background-color: rgb(128 0 128 / 50%);
    width: 100%;
    height: 100%;
    display: block;
}

.bg-img:nth-child(2n+2)::before {
    background-color: rgb(255 192 203 / 50%);
}

.section-title {
    /* background-color: #604679; */
    background-color: #660A50;
    color: #fff;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

.section-title h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2em;
}

select.jumpToSection {
    /* float: left; */
    padding: 0.5em;
    margin: 0;
    border: 1px solid rgba(102, 10, 80, 0.1);
    font-size: 1.25rem;
    font-family: 'Poppins';
    cursor: pointer;
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 1;
    background-color: rgba(255,255,255,0.85);
}

.bg-cover:hover, .bg-cover:active, .bg-cover:focus {
    background-size: contain;
    background-position: top center;
}

.modal p.img-caption {
    text-align: center;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
    margin-bottom: 3em;
    margin-top: 1em;
    /* background-color: #d5d5d5; */
    font-size: 0.75rem;
    padding: 1em;
}

.bg-img-caption {
    position: absolute;
    bottom: 0;
    padding: 0.5em;
    /* background-color: rgba(255,255,255,0.5); */
    background-color: rgba(255, 198, 235, 0.7);
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    border-top: 1px solid #660A50;
}

.bg-img-caption p {
    font-size: 0.85em;
    margin-bottom: 0;
}

.bg-img:hover .bg-img-caption, .bg-img:active .bg-img-caption, .bg-img:focus .bg-img-caption {
    visibility: visible;
    opacity: 1;
}

.bg-img:hover, .bg-img:active, .bg-img:focus {
    border: 1px solid #660A50;
}



/* accordion */
.quote {
    padding-left: 3em;
    border-left: 2em solid #f5f5f5;
    padding-top: 1em;
    margin-bottom: 2em;
    padding-bottom: 0.5em;
    font-style: italic;
}

/*.accordion {
    border-left: 1px solid #b07891;
}*/

.accordion-head {
    width: 100%;
    display: block;
    /* background-color: #d5d5d5; */
    background-color: #fff5e7;
    background-image: linear-gradient(135deg, #fff2e1cc 0%, #fdf2e2f0 20%, #f4ccd1fa); 
    padding: 1.5em 2em;
    cursor: pointer;
    position: relative;
    text-align: left;
}

.contentSection:not(#about) .accordion-head h3 {
    margin: 0;
    text-align: left;
    font-size: 1em;
    display: inline-block;
}

.accordion-panel {
    background-color: #fff;
    /* border-left: 2em solid #f5f5f5; */
    border-left: 2em solid #fff2e1cc;
    display: none;
    padding: 1.5em 2em;
}

.persona {
    border: 1px solid #b07891;
    border-bottom-width: 0;
    border-top-width: 0;
}

.persona:last-of-type .accordion-panel {
    border-bottom-width: 1px;
}

.accordion-head::after {
    content: '+';
    right: 0.5em;
    position: absolute;
    font-size: 1.5em;
}
.accordion-head[aria-expanded="true"]::after {
    content: '-';
}

.accordion-head:active, 
.accordion-head:focus, 
.accordion-head:hover {
    background-image: none;
}

.accordion-panel.in {
    display: block;
}

.persona + .persona .accordion-head[aria-expanded="false"] {
    /* border-top: 1px solid #b5b5b5; */
    border-top: 1px solid #b07891;
}

.persona:first-of-type {
    border-top-width: 1px;
}

.persona:last-child {
    border-bottom-width: 1px;
}



.modal p, .modal li, .modal ol, .modal ul {
    font-size: 0.85rem;
}


.bg-2 {
    background-color: #604679;
    border-left: 2em solid #755594;
    color: #fff;
}

.bg-3 {
    background-image: radial-gradient(at top left, aliceblue 70%, #c5e9ff);
    border: 1px solid #cae8fb;
    border-left: 0.5rem solid #a9dfff;
}

.bg-3 + .bg-3 {
    border-left: 1px solid #c5e9ff;
    border-right: 0.5rem solid #a9dfff;
}

.pad-bottom-x {
    padding-bottom: 0;
}
.pad-top-x {
    padding-top: 0;
}

.pad-top-3x {
    padding-top: 3em;
}

.pad-bottom-3x {
    padding-bottom: 3em;
}

.pad-2x { 
    padding: 2em; 
}

.margin-bottom-1x {
    margin-bottom: 1em;
}

.margin-bottom-2x {
    margin-bottom: 2em;
}

.margin-bottom-x {
    margin-bottom: 0;
}

.border-x { 
    border: 0; 
}

@media (max-width: 991px) {
    .col-6 {
        width: 100%;
        padding-left: 3em;
        padding-right: 3em;
    }
    .modal p.img-caption {
        max-width: 100%;
    }
    .heroHeading h1 { padding-top: 1em; padding-bottom: 1em; }
    .heroHeading h1 strong { font-size: 2.25em; }
}
@media (max-width: 575px) {
    .accordion-panel { border-left-width: 1em; }
    .modal .accordion-panel { padding: 1.5em 1em; }
    .heroHeading h1 { padding-top: 1em; padding-bottom: 1em; }
    .heroHeading h1 strong { font-size: 1.75em; }
}

@media (max-width: 320px) {
    .modal .contentSection {
        padding-left: 0;
        padding-right: 0;
    }
}