﻿
html,body			{margin:0px; padding:0px; border:0px; background: #ffffff; font-family: Montserrat, sans-serif; font-size:1.0em; font-weight:400; font-stlye:normal; font-optical-sizing: auto; color:black;}

*					{border:0px; outline:0px;}
a					{color:inherit; text-decoration:none; font-family:inherit;/*cursor:url('/images/cursor-kpi-pointer.png'), auto;*/}

.breaker            {clear:both;}
.nowrap             {white-space:nowrap;}
.clearfix:after     {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.pointy             {}
:root {
    --nav-bg: rgba(255,255,255,0.85);
    --content-bg: #e6f3f8;
    --nav-element: #000;
    --kpi-light-blue: #94c1df;
    --kpi-med-light-blue: #0077b0;
    --kpi-med-dark-blue: #004b8d;
    --kpi-dark-blue: #02215e;
    --kpi-green: #1fcd0c;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #595959;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #595959;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #595959;
}
:-moz-placeholder { /* Firefox 18- */
  color: #595959;
}
input[type=text],
input[type=tel],
input[type=submit]  {-webkit-appearance: none;}

input[type=text],
textarea            {border:1px solid #0077b0; font-size:1.1rem; font-weight:400; font-family:inherit;}

input[type=submit],
button,
.button             {font-size:1.5em;font-weight:700;text-transform:uppercase; background-color:var(--kpi-med-dark-blue);border-radius:10px;width:fit-content;padding:1rem;margin:2rem auto;color:#fff;cursor: pointer;/*display: block; margin: 2rem auto; padding: 1rem 2rem; background: #02215e; 
                    font-size: 1.2rem; text-transform: uppercase; color: white; font-weight: 400; font-family: inherit; letter-spacing: .03rem;*/}

.outerwrapper       {display:flex; flex-direction:column; /*max-width:100rem;*/ margin:0px auto; min-height:100vh;overflow-x:hidden;}

.contentarea        {margin: 0px 1em; flex:1;}

h2                  {font-size:2.0rem; font-weight:600;}
h3                  {font-size:1.5rem; font-weight:400;}
h4                  {font-size:6.0rem; font-weight:900; color:var(--kpi-med-light-blue); text-align:center; text-transform:uppercase; margin:1rem auto;}

img.kpilogo         {width:40%; margin:1.2vw; max-width:40em; min-width:12rem;}

.top-nav            {position:fixed;width:100%;background-color:var(--nav-bg);z-index:10;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.5);}
.top-nav .static    {display:flex;justify-content:space-between;/*background:#fff;*/}
.top-nav a          {margin:5px 1rem;}
.top-nav a:hover    {font-weight:700;}
.top-nav .menu-options a.current::before  {content:'► ';color: var(--kpi-dark-blue);font-size: .7em;vertical-align: text-bottom;}
.nav-hamburger      {margin:5px 1rem;background-color:transparent;display:flex;flex-direction:column;justify-content:center;cursor:pointer;}
.nav-hamburger div  {width:2rem;height:4px;background-color:var(--nav-element);margin:3px 0;}
.menu-options       {display:none;margin:0;padding:0;width:100%;}
.menu-options li    {list-style-type:none;text-align:right;padding:0.5rem 0;color:var(--nav-element);}

.hero               {margin-top:60px;}
.hero video         {width:100%;}

.featured           {display:flex;flex-wrap:wrap;column-gap:2%;row-gap:1em;justify-content:center;margin:1.5rem 0;}
.breakout           {border:solid 1px #000; background-color:var(--content-bg); width:30%;border-radius:20px;}
.breakout .thumb    {border:0;}
.breakout .thumb img    {width:100%;border-top-left-radius:20px;border-top-right-radius:20px;}
.item               {position:relative;}
.item h1            {text-align:center;color:var(--kpi-med-dark-blue);font-weight:900;margin:0.25em auto 0;text-transform:uppercase;}
.item p             {margin:1rem 1rem 1.25rem;text-align:left;}

.mission            {width:100%;margin:0 auto 1.5rem;background:var(--kpi-dark-blue);background-image:url('/images/photo-core-belief.webp');background-size:cover;color:#fff;}
.mission h4         {color:#fff;}
.mission p          {width:94%;margin:0 auto 2rem;font-size:1.3rem;line-height:2rem;}

.contact            {width:100%;margin:0 auto 1.5rem;display:flex;justify-content:space-between;background-color:var(--kpi-light-blue);background-image:url('/images/photo-CONTACT-bg.webp');background-size:cover;background-position-x:right;}
.contact img        {margin:1rem 1rem; width:30%;border:solid 1px #000;}
.contact .statement {font-size:1.5em; margin:1rem 1rem;text-align:center;width:70%;color:#fff;}
.contact h1         {font-size:2.0em;font-weight:900;text-transform:uppercase;color:var(--kpi-dark-blue);margin-bottom:0;}
.contact p          {color:var(--kpi-dark-blue);margin-top:0.7em;}
.button-contact     {font-size:1.5em;font-weight:700;text-transform:uppercase; background-color:var(--kpi-med-dark-blue);border-radius:10px;width:fit-content;padding:1rem;margin:2rem auto;/*cursor:url('/images/cursor-kpi-pointer.png'), auto;*/}

.flex-100           {flex:100%;}

.case-studies       {display:flex;flex-wrap:wrap;column-gap:2%;row-gap:1em;justify-content:center;margin:1.5rem 0;}
.case-studies h1    {text-align:left;text-transform:none;font-size:1rem;margin-left:1rem;margin-right:1rem;margin-top:1rem;color:var(--kpi-med-dark-blue);}
.case-studies .breakout     {width:40%;display:flex;flex-direction:column;justify-content:space-between;}
.case-studies .breakout .thumb img  {border-radius:0;width:calc(100% - 2rem);margin:0 1rem;outline:3px solid var(--kpi-med-dark-blue);}
.case-studies .breakout .item       {flex-grow:1;}
.keep-reading       {font-size:1.1rem;font-weight:700;text-transform:uppercase;background-color:var(--kpi-med-dark-blue);border-radius:10px;width:fit-content;display:block;padding:0.5rem 1rem;margin:0.5rem auto 2rem;color:#fff;}
.case-studies.new-row       {margin-top:0rem;}

.stripe             {height:1rem;width:100%;background:var(--kpi-dark-blue);background-image:url('/images/photo-core-belief.webp');background-size:cover;}

.subpage            {margin:2rem auto 2rem;width:94%;}
.subpage h2         {color:var(--kpi-med-dark-blue);font-weight:900;margin:1em auto 0 4rem;text-transform:uppercase;text-indent:-4rem;}

.header             {background:var(--kpi-dark-blue);background-image:url('/images/photo-core-belief.webp');background-size:cover;color:#fff;margin:4rem auto 0;width:100%;}
.header p           {font-size:1.4rem;margin:0 auto;text-align:center;padding:0 4rem 2rem;}
.headline           {font-size:6.0rem; font-weight:900; color:#fff; text-align:center; text-transform:uppercase; margin:1rem auto 1rem;}
.subhead            {font-size:1.4rem;margin: 0 auto;}

.subpage.why         {margin-bottom:1rem;}
.subpage.why h2:first-of-type  {margin-top:0;}
.why p              {margin-left:4rem;}
.pip                {display:inline-block;width:3rem;height:3rem;background-color:var(--kpi-med-dark-blue);border-radius:50%;color:#fff;font-weight:700;text-align:center;align-content:center;margin-right:1rem;text-indent:0rem;}
.final              {margin-top:0;margin-left:0 !important;padding:2rem 4rem;font-size:1.4rem;background:var(--kpi-dark-blue);background-image:url('/images/photo-core-belief.webp');background-size:cover;color:#fff;}

@keyframes svchover {
    50% {
        -webkit-transform: translateX(-30%);
        will-change: transform;
        transition: transform 500ms linear;
    }

    100% {
        -webkit-transform: translateX(0%);
        will-change: transform;
        transition: transform 500ms linear;
    }
}


.services           {text-align:center;flex:1;}
.services > div     {display:inline-block;width:20rem;margin:1em;text-align:center;overflow:hidden;vertical-align:top;padding-bottom:1rem; box-sizing:border-box;}
.services > div:hover img,
.services > div:focus img   {width: 150%;left: 0%;top: -25%;animation-name: svchover;animation-duration: 4s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-direction: normal;animation-delay: .5s;}

.services > div:hover img.interactive,
.services > div:focus img.interactive  {top:-40%;}
.services > div:hover img.cta,
.services > div:focus img.cta  {top:-65%;}
.services > div:hover img.gamefinder,
.services > div:focus img.gamefinder  {animation:none;}
.services > div:hover img.zip-lookups,
.services > div:focus img.zip-lookups  {top:-40%;}
.services > div:hover img.flawless-web,
.services > div:focus img.flawless-web  {top:0%;}



.services > div > div {height:10rem; overflow:hidden; border:5px solid var(--kpi-med-dark-blue);}
.services h3        {margin:.5em 0px 0px;font-size:1.4rem;}
.services > div > h4  {margin:0px 0px .5em;font-size:1.2rem;font-weight:400;color:black;text-transform:none;}
.services img       {width: 100%; top:0%; transition-property:width,height,left,top; transition-duration:.3s; position:relative;}
.services p         {font-size: 1rem; margin: .5em 0px;}
.inline-link        {color:#0077b0;padding:0 0.5em;}

.case-study         {margin:5rem auto 3rem;width:80%;text-align:center;}
.case-study img     {width:100%;}
.case-studies h1    {text-align:center;font-size:1rem;}
.case-studies .title    {font-size:1.5rem;font-weight:700;}

.subpage.contact-form           {width:100% !important;background-color:var(--kpi-light-blue);background-image:url('/images/photo-FORM-bg.webp');background-size:cover;background-position-x:right;margin-top:0;}
div.contact-done                    {padding:4rem 0;width:75%;margin: 0px 20% 0px auto;}
.contact-done                    {padding:4rem 0;width:75%;margin: 0px auto;}
.p1                             {color:var(--kpi-dark-blue);font-size:1.4rem;}
form                           {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; margin: 0px auto; max-width:60rem; padding:0px 2rem;}
.formfield                      {position:relative; flex: 1 0 16rem; min-width: 50%; box-sizing: border-box; border: .5rem solid transparent;}
.formfield input[type=text],
.formfield input[type=tel],
.formfield input[type=email],
.formfield textarea             {position:relative; left:0px; top:0px; z-index:4; /*background:transparent;*/ box-sizing:border-box; padding:1rem .3rem .2rem; letter-spacing:.03rem; width: 100%;}
.formfield.wide                 {width:100%;flex: 100%;}
.formfield label                {position:absolute; left:0px; top:0px; z-index:5; margin:.1rem .3rem; font-size:.8rem; color:#7b7b7b;}
.formfield label.error          {color:red;}
.formfield input[type=text].error,
.formfield textarea.error       {border-color:red;}

.formfield span.error {
    color: red;
    position: absolute;
    top: -1.4em;
    left: 0px;
    font-size: .8em;
}

div.error                       {color: red; text-align: center;}
form .p1                        {margin: 0 0 2rem;}

div.robocheck                   {text-align:center;margin:2rem auto;flex: 100%;}
div.g-recaptcha                 {display:inline-block;}

.subpage.privacy    {margin-top:4rem;}

footer             {width:100%; color: #8a8a8a;text-align: center;font-size: .8rem;margin: 0 0 1em 0;padding: .5em 0px;display:flex;align-items:center;justify-content:center;/*background: #f9f9f9;*/}
footer p           {color:black; font-size:1.2em; margin: 0px 0px .5em; position:relative;}
footer p img       {vertical-align:middle; margin:0px .5em; max-width:10vw;}
footer a           {color:#0077b0; padding:0px .5em;}

.video-desktop      {position:relative;padding-top:56.25%;}
.video-desktop > iframe     {border:0;position:absolute;top:0;height:100%;width:100%;}
.video-mobile       {display:none;}
.video-mobile > iframe      {border:0;height:calc(1.33 * 100vw);width:100%;}

@media (max-width:800px) {
    .case-studies .breakout       {width:90%;}
    .contact        {background-image:url('/images/photo-FORM-bg.webp');background-position-x:right;}
    .contact-start    {width:100%;}
    .contact-done    {width:100%;text-align:center;}
    .subpage.contact-form   {background-image:none;}
}

@media (max-width:600px) {
    .breakout       {width:90%;}
    h4              {font-size:3rem;}
    .mission p      {width:90%;}
    .contact        {background-image:url('/images/photo-CONTACT-mobile-bg.webp');background-position-x:right;}
    .contact h1     {font-size:1.9rem;}
    .contact .statement     {font-size:1.2rem;/*width:82%;*/}
    .headline       {font-size:3rem;}
    .header p       {font-size:1.2rem;padding:0 2rem 2rem;}
    .services > div {padding-bottom:0;margin:1em 0;}
    .final          {font-size:1.2rem;}
    .p1             {font-size:1.2rem;}
    input[type=submit]      {margin-top:0;}
    footer         {flex-wrap:wrap;row-gap:0.5rem;}
}


@media (max-width:440px) {
    .hero           {/*margin-top:55px;*/}
    .video-desktop  {display:none;}
    .video-mobile   {display:block;}
    .pip            {width:2rem;height:2rem;}
    h2              {font-size:1.5em;}
    .subpage h2     {margin:0 auto 0 3rem;text-indent:-3rem;}
    .why p          {margin-left:3rem;margin-top:0.5rem;}
}

