/*
    font-family: proxima-nova, sans-serif; //body
    font-family: proxima-nova-condensed, sans-serif;
    font-family: jubilat, serif; //titles
    font-family: jubilat-thin, serif; 

    teal:       #8ED1C0     rgba(142,209,192,1)
    light blue  #C5E7E7     rgba(197,231,231,1)
    red:        #EF3E39     rgba(239,62,57,1)
    yellow:     #FFD65C     rgba(255,214,92,1)    
    dark gray:  #3C3C3D     rgba(60,60,61,1)
*/
/*#region keyframes*/
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-move-down {
    0% {
        opacity: 0;
        transform: translateY(-3rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-move-up {
    0% {
        opacity: 0;
        transform: translateY(3rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes move-down {
    0% {
        transform: translateY(-3rem);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes move-up {
    0% {
        transform: translateY(3rem);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fade-in-move-right {
    0% {
        opacity: 0;
        transform: translateX(-3rem);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-move-left {
    0% {
        opacity: 0;
        transform: translateX(3rem);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoom-in {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}


@keyframes fadeIn-zoom {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@-moz-keyframes fadeIn-zoom {
    0% {
        opacity: 0;
        -moz-transform: scale(1);
    }

    100% {
        opacity: 1;
        -moz-transform: scale(1.1);
    }
}

@-webkit-keyframes fadeIn-zoom {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }
}

@-o-keyframes fadeIn-zoom {
    0% {
        opacity: 0;
        -o-transform: scale(1);
    }

    100% {
        opacity: 1;
        -o-transform: scale(1.1);
    }
}

@-ms-keyframes fadeIn-zoom {
    0% {
        opacity: 0;
        -ms-transform: scale(1);
    }

    100% {
        opacity: 1;
        -ms-transform: scale(1.1);
    }
}
/*#endregion*/

/*#region general styles*/

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0
}

.fade-in-text {
    animation: fadeIn linear .25s;
    -webkit-animation: fadeIn linear .25s;
    -moz-animation: fadeIn linear .25s;
    -o-animation: fadeIn linear .25s;
    -ms-animation: fadeIn linear .25s;
}



.blueText {
    color: #C5E7E7;
}

.tealText {
    color: #8ED1C0;
}

.redText {
    color: #EF3E39;
}

.yellowText {
    color: #FFD65C;
}

.grayText {
    color: #3C3C3D;
}

/* Track */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #FFD65C;
    border-radius: 5px;
}

.sectionDivider {
    height: 1rem;
    border-radius: 14px;
    max-width: 100rem;
    margin:0 auto 2rem auto;
    background: rgb(255,0,18);
    background: linear-gradient(90deg, rgba(255,0,18,1) 15%, rgba(255,171,0,1) 35%, rgba(100,191,0,1) 75%, rgba(0,154,156,1) 90%);
}


.revealCustom {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: .75s all ease;
}

.revealCustom.active {
    transform: translateY(0);
    opacity: 1;
}

.revealNewsItem {
    position: relative;
    transform: translateX(3000px);
    transition: .75s all ease;
}

.revealNewsItem.active {
    transform: translateX(0);
    -webkit-animation: fadeIn 2.5s ease-out;
    -moz-animation: fadeIn 2.5s ease-out;
    -o-animation: fadeIn 2.5s ease-out;
    animation: fadeIn 2.5s ease-out;
    transition: all .75s ease-in-out;
}

.revealNewsItem:nth-of-type(1).active {
    transition-delay: .05s;
}

.revealNewsItem:nth-of-type(2).active {
    transition-delay: .25s;
}

.revealNewsItem:nth-of-type(3).active {
    transition-delay: .45s;
}

.revealNewsItem:nth-of-type(4).active {
    transition-delay: .65s;
}

.revealNewsItem:nth-of-type(5).active {
    transition-delay: .85s;
}

/*#endregion*/

/*#region header*/
#sectionHeader {
    display:none;
    padding:2rem;
    text-align:center;
    background:transparent;
    width:100%;
}
#pageTitle {
    position:relative;
    top:1.25rem;
}
#pageTitle h1 {
    font-size: 5rem;
    color: #FFF;
    text-shadow: 2px 4px 3px rgba(0,0,0,.3);
    -webkit-animation: fade-in-move-down .75s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fade-in-move-down .75s; /* Firefox < 16 */
    -ms-animation: fade-in-move-down .75s; /* Internet Explorer */
    -o-animation: fade-in-move-down .75s; /* Opera < 12.1 */
    animation: fade-in-move-down .75s;
}
/*#endregion*/

/*#region featured image*/
#sectionFeaturedImage {
    position: relative;
    margin: 2rem auto 0 auto;
    height: 80vh;
}

#featuredFrameContainer {
    position: relative;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    margin-top: 2rem;
    height: 100%;
}

#featuredFrameContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    max-height: 80vh;
}
/*#endregion*/

/*#region caseStudy Header*/
#caseStudyTitleContainer {
    position: absolute;
    z-index: 20;
    height: 100%;
    width: 100%;
    background: rgba(60,60,61,.45);
    /*border-radius: 24px;*/
    text-align:center;
}
    #caseStudyTitleContainer img {
       margin-top:12rem;
    }
    #caseStudyTitleContainer h2 {
        margin-top:.5rem;
        position: relative;
        text-align: center;
        width: 100%;
        left: 0;
        padding: 1rem;
        font-family: Jubilat, serif;
        font-size: 5.5rem;
        line-height:1.15;
        font-weight: 500;
        color: white;
        text-shadow: 2px 4px 3px rgba(0,0,0,.3);
        -webkit-animation: fade-in-move-down .75s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fade-in-move-down .75s; /* Firefox < 16 */
        -ms-animation: fade-in-move-down .75s; /* Internet Explorer */
        -o-animation: fade-in-move-down .75s; /* Opera < 12.1 */
        animation: fade-in-move-down .75s;
    }
#pnlRunDates {
    margin-top: 2rem;
    position: relative;
    text-align: center;
    width: 100%;
    left: 0;
    padding: 1rem;
    font-family: proxima-nova, sans-serif;
    font-size: 2rem;
    font-weight: 500;
    color: white;
    text-shadow: 2px 4px 3px rgba(0,0,0,.3);
    -webkit-animation: fade-in-move-up .75s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fade-in-move-up .75s; /* Firefox < 16 */
    -ms-animation: fade-in-move-up .75s; /* Internet Explorer */
    -o-animation: fade-in-move-up .75s; /* Opera < 12.1 */
    animation: fade-in-move-up .75s;
}
/*#endregion*/

/*#region deliverables*/
#sectionDeliverables {
   
}
#deliverablesInner {
    position: relative;
    top: -6.5rem;
    margin: 0 auto -6.5rem auto;
    max-width: 75rem;
    color: #FFF;
    z-index: 40;
    padding: 1rem;
    animation: fadeIn linear .75s;
    -webkit-animation: fadeIn linear .75s;
    -moz-animation: fadeIn linear .75s;
    -o-animation: fadeIn linear .75s;
    -ms-animation: fadeIn linear .75s;
}
#deliverablesInner h3 {
    font-family: jubilat-thin, serif;
}
#deliverablesInner ul {
    list-style:none;
    margin-left:0;
}
#deliverablesInner li {
    display:inline-block;
    padding-right:.5rem;

}
#deliverablesInner li a {
    color: #C5E7E7
}
#deliverablesInner li:hover a {
    color: #EF3E39;
}
#deliverablesInner li::after {
    content: ", ";
}
#deliverablesInner li:last-of-type::after {
    content: "";
}
/*#endregion*/

/*#region results*/

#sectionResults {
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 5rem;
}

.resultsWeb {
    max-width: 90rem;
    margin: 0 auto;
    padding: 3rem 5rem;
}
#resultsLogos {    
    max-width: 90rem;
    margin: 0 auto;
    padding: 2.5rem;
}

#resultsLogos i {
    font-size: 3rem;
    color: #C5E7E7;
}
.resultsDescription {
    font-family: proxima-nova, sans-serif;
    color: #3C3C3D;
    font-style: italic;
    font-size: 1.5rem;
}

#resultsDemographics {
    max-width: 90rem;
    margin: 0 auto;
    padding: 6rem 0 0 .25rem;
}

.resultsDemoFrame {
    width: 400px;
    max-width: 95%;
    height: 500px;
    margin: .25rem;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

#resultsDemographics img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}

.resultsDemographicsOver {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    padding: 1rem;
    font-family: proxima-nova, sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 4px;
    color: white;
    text-align: center;
}
#resultsHeader {
    max-width: 90rem;
    margin: 0 auto;
    padding: 2rem 1rem 0 5rem;
}
#resultsNumbers {
    max-width: 90rem;
    margin: 0 auto;
    padding: 2rem 2rem 4rem 2rem;
}
#resultsHeader h2 {
    font-size: 2rem;
    letter-spacing: 10px;
    font-family: proxima-nova, sans-serif;
    color: #3C3C3D;
    margin-bottom: 0;
}
.blueGrad {
    background: rgba(197,231,231, .2);
}
.resultCard {
    padding: 0 2rem;
}
.resultCard h3 {
    color: #EF3E39;
    font-size: 5rem;
    letter-spacing: 5px;
    font-family: proxima-nova, sans-serif;
}

#resultsVideo {
    max-width: 95rem;
    margin: 0 auto;
    padding: 6rem 1rem 6rem 1rem;
}

#resultsVideo video {
    width: 100%;
    height: auto;
    border-radius: 12px;
}
/*#endregion*/

/*#region related work*/
/*#region case studies*/
#sectionRelatedWork {
    padding: 4rem 1rem 2rem 1rem;
    background: #f9f9f9;
    border-top: 1px solid rgba(0,0,0,0.05);
}

#relatedWorkInner {
    max-width: 100rem;
    margin: 0 auto;
    padding: 2rem;
}

    #relatedWorkInner h2 {
        color: #EF3E39;
        line-height: 1;
        font-family: Jubilat, serif;
        font-size: 2rem;
        letter-spacing: 1px;
        padding-left: 1rem;
        /* text-transform: uppercase; */
    }

#relatedContainer {
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.relatedItem {
    width: 33.3333333%;
    padding: 2rem 1rem 2rem 1rem;
    text-align: center;
}

.relatedImage {
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 12px;
}
.relatedImage img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    transition: all .75s ease-in-out;
}

.relatedTitle {
    font-family: proxima-nova, sans-serif;
    padding: .5rem 1rem;
    text-align: left;
    color: #707070;
    font-size: 1.2rem;
    font-weight: 600
}

a:hover .relatedTitle, a:focus .relatedTitle, a:active .relatedTitle {
    color: #EF3E39;
}

a:hover .relatedImage, a:active .relatedImage, a:focus .relatedImage {
}

.relatedItem:hover .relatedImage img {
    transform: scale(1.1);
}

/*#endregion*/
/*#endregion*/

/*#region content*/
#bodyInner {
    border-radius: 12px;
    max-width: 90rem;
    background: #FFF;
    z-index: 30;
    position: relative;
    margin: 0 auto;
    min-height: 200px;
    padding: 3rem 3rem 6rem 3rem;
}
#pnlIntro {
    padding:0 2rem;
}

#deliverablesBody {
    padding: 0rem 1rem 1rem 6rem;
}
    #deliverablesBody h3 {
        font-family: proxima-nova, sans-serif;
        text-transform: uppercase;
        font-size: 1.25rem;
        letter-spacing: 5px;
        font-weight: 600;
        color: #05415d
    }
#deliverablesBody ul {
    list-style: square;
    
}
    #deliverablesBody ul li {
        font-family: jubilat, serif;
        color: #FFD65C;
        padding-bottom:.25rem;
    }
    #deliverablesBody ul li a {
        color: #3C3C3D;
        font-size: 1.2rem;
        letter-spacing:1px;
    }
    #deliverablesBody ul li a:hover {
        color: #8ED1C0;
        text-decoration:underline;
    }

    .wysiwyg {
        margin-bottom: 2rem;
        font-size: 1.35rem;
        line-height: 1.85;
        color: #3C3C3D;
    }

.wysiwyg-title {
    color: #EF3E39;
    line-height: 1;
    font-family: proxima-nova, sans-serif;
    font-size: 3rem;
    text-transform: uppercase;    
    letter-spacing: 10px;
    font-family: proxima-nova, sans-serif;
}
.wysiwyg h1, .wysiwyg h2, .wysiwyg h3, .wysiwyg h4, .wysiwyg h5 {
    margin-top: 1rem;
    margin-bottom:1rem;
}
.wysiwyg ul {
    margin-left:3rem;
}
.wysiwyg a {
    color:rgba(100,191,0,1);
    text-decoration:underline;
}
.wysiwyg .button a {
    color: #fefefe;
    text-decoration:none;
}
.wysiwyg .button:hover a {
    color: #fefefe;
}
.wysiwyg a:hover, .wysiwyg a:active, .wysiwyg a:focus {
    color: rgba(255,171,0,1);
    text-decoration: none;
}
#sectionResources {
    margin-bottom: 0;
    margin-top: 5rem;
}
/*#endregion*/




/*#region media breaks*/
@media(max-width:1700px) {
    #caseStudyTitleContainer img {
        margin-top: 7rem;
    }
    #caseStudyTitleContainer h2 {       
        font-size: 4.95rem;
    }
    #pnlRunDates {
        margin-top: 0;       
        font-size: 1.8rem;
    }
}
    @media(max-width:1600px) {
        #bodyInner {
            margin: 0 2rem;
        }
        .wysiwyg {
            font-size: 1.25rem;
        }
        .resultsDescription {            
            font-size: 1.35rem;
        }
        #resultsHeader h2 {
            font-size: 1.8rem;
        }
        .resultCard h3 {            
            font-size: 4.5rem;
        }
    }

    @media(max-width:1400px) {
        #sectionFeaturedImage {
            height:60vh
        }
        #caseStudyTitleContainer img {
            margin-top: 5rem;
        }

        #caseStudyTitleContainer h2 {
            font-size: 4.455rem;
        }

        #pnlRunDates {
            font-size: 1.62rem;
        }
        #resultsHeader h2 {
            font-size: 1.62rem;
        }
        .resultCard h3 {
            font-size: 4rem;
        }
    }

    @media(max-width:1300px) {
        #sectionFeaturedImage {
            height: 55vh
        }
        #caseStudyTitleContainer img {
            margin-top: 1rem;
        }

        #caseStudyTitleContainer h2 {
            font-size: 4rem;
        }

        #pnlRunDates {
            font-size: 1.458rem;
        }
        #bodyInner {            
            padding: 3rem 1rem;
        }
        #introLeft, #introRight {
            width:100%
        }
        #deliverablesBody {
            padding: 3rem 2rem 0 2rem;
        }
        #deliverablesBody ul {
            -webkit-column-count: 3;
            -moz-column-count: 3;
            column-count: 3;
        }
        #resultsHeader h2 {
            font-size: 1.458rem;
        }
        .resultCard h3 {
            font-size: 3.6rem;
        }
    }

    @media(max-width:1190px) {
        #sectionFeaturedImage {
            height: 50vh
        }
        #caseStudyTitleContainer h2 {
            font-size: 3.6rem;
        }

        #pnlRunDates {
            font-size: 1.3122rem;
        }
    }
@media(max-width:1023px) {
    #sectionFeaturedImage {
        height: 50vh
    }
    #caseStudyTitleContainer h2 {
        font-size: 3.25rem;
        top: -1rem;
    }
    #pnlRunDates {
        font-size: 1.15rem;
        top: -1rem;
    }
    #relatedWorkInner {
        padding: 2rem 0;
        text-align: center;
    }

    .relatedItem {
        width: 100%;
        height: 550px;
        margin-bottom: 2rem;
    }

    .relatedImage {
        width: 100%;
        height: 100%;
    }

    .relatedTitle {
        text-align: center;
    }
    .resultCard {
        padding-bottom:3rem;
    }
    .resultCard h3 {
        margin-bottom: 0;
    }
    .resultsDemoFrame {
        width: 95%;
        margin: 0 auto 1rem auto;
    }
    #resultsHeader {
        padding: 2rem 1rem 0 1rem;
    }

        #resultsHeader h2 {
            text-align: center;
        }
}

    @media(max-width:936px) {
        #caseStudyTitleContainer img {
            width:200px;
        }
        #caseStudyTitleContainer h2 {
            font-size: 2.95rem;
        }
        #pnlRunDates {
            top: -2rem;
        }
        #deliverablesBody ul {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
        }
        .resultsWeb {
            padding: 3rem 5rem;
        }
        

    }

    @media(max-width:830px) {
        #sectionFeaturedImage {
            height: 40vh
        }
        #caseStudyTitleContainer img {
            width: 175px;
        }
        #caseStudyTitleContainer h2 {
            font-size: 2.655rem;
        }
        #deliverablesInner {           
            margin: 0 auto -4.5rem auto;
        }
        .wysiwyg, .aboutContentInner {
            font-size: 1.15rem;
        }
        .resultsDescription {
            font-size: 1.2rem;
        }
        #deliverablesBody ul {
            -webkit-column-count: 1;
            -moz-column-count: 1;
            column-count: 1;
        }
        #pnlIntro {
            padding: 0 1rem;
        }
        #deliverablesBody {
            padding: 1rem 1rem 0 1rem;
        }
        .resultsWeb {
            padding: 1rem 4rem 2rem 4rem;
        }
        .relatedItem {
            height: 400px;
            padding: 2rem 0 2rem 0;
        }
    }

    @media(max-width:639px) {
        #sectionFeaturedImage {
            height: 35vh
        }
        #caseStudyTitleContainer h2 {
            font-size: 2.4rem;
        }
        #deliverablesInner {
            margin: 0 auto -3.5rem auto;
        }
        #sectionRelatedWork {
            padding: 1rem 1rem 2rem 1rem;
        }

        #relatedWorkInner {
            padding: 2rem 1rem;
        }
        #relatedWorkInner h2 {
            padding-left: 0;
        }
        .relatedItem {
            height: 300px;
        }
        #resultsHeader h2 {
            font-size: 1.3122rem;
        }
        .resultCard h3 {
            font-size: 3.24rem;
        }
    }

    @media(max-width:560px) {
        #sectionFeaturedImage {
            height: 275px;
        }
        #featuredFrameContainer img {
            max-height:100vh
        }
        #caseStudyTitleContainer h2 {
            font-size: 2.15rem;
        }
        #pnlRunDates {
            font-size:1rem;
            top: -3rem;
        }
        #bodyInner {
            margin: 0 1rem;
        }
        .resultsWeb {
            padding: 1rem 3rem 2rem 3rem;
        }
    }
    /*#endregion*/