/* GLOBAL */
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
html {
    width: 100%;
}
body {
    line-height: 1.7em;
    /* REVIEW */
    /* -webkit-font-smoothing: antialiased; */
    font-family: 'Roboto', sans-serif;
    background-color: #f4f4f4;
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    /* margin-top: 6%; */
    margin: 0;
}

/* HEADER and NAVBAR */

.active {
    display: block;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.content {
    /* padding: 16px; */
}
  /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
    /* padding-top: 102px; */
}
.menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
	background-color: #F4F4F4;
}
#menu-item-contact {
    border-radius: 6px;
    background-color: #5B6DCD;
    margin-right: 30px;
    margin-left: 4px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}
#menu-item-contact:hover{
    text-decoration: none;
    background: rgba(15, 33, 134, 0.8);
    color: #5B6DCD;
}
#main-content {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}
#main-banner {
    justify-content: center;
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
}
#main-area {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
}
#what-we-do-parent {
    text-align: center;
    /* max-width: 80%; */
    margin: 0;
    padding: 0;
}
#slogan-container {
    font-size: 32px;
    line-height: 1.4em;
    text-align: center;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 700;
    color: #38393d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
    margin-top: 50px;
    min-width: 100%;
}
#slogan-div {
    background-color: #1D33AB;
    justify-self: center;
    box-shadow: 0 12px 18px -6px rgba(0,0,0,.3);
    min-width: 100%;
}
#slogan-text {
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    color: #38393d;
    font-weight: 600;
    letter-spacing: .4em;
    text-shadow: -1em 0 .5em #1D33AB;
}
#slogan-subtitle-text {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    line-height: 1.3em;
    font-weight: 700;
    font-family: 'Montserrat',Helvetica,Arial,serif;
    letter-spacing: 1px;
    text-shadow: 0 .1em .1em rgba(0,0,0,.4);
    color: #fff;
}
#bsq1 {
    max-height: 269px;
    max-width: 269px;
    margin-left: 20%;
    margin-top: 20%;
}
#bsq2 {
    max-height: 269px;
    max-width: 269px;
    margin-top: 20%;
    margin-left: 20%;
}
#bsq1 img {
    max-width: 60%;
    height: auto;
}
#bsq2 img {
    max-width: 60%;
    height: auto;
}
#banner-squares-1 {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-left: 94vh;
}
#banner-squares-2 {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    margin-left: -700px;
    margin-top: 50vh;
}
#banner-squares-3 {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    margin-left: -700px;
    margin-top: 280vh;
}
#banner-squares-4 {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-left: 94vh;
    margin-top: 370vh;
}
#banner-squares-5 {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    margin-left: -700px;
    margin-top: 470vh;
}
#banner-squares-6 {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-left: 94vh;
    margin-top: 570vh;
}
div {
    display: block;
}
.technologies-container {
    min-width: 100%;
    /* height: 50vh; */
    margin-top: 10vh;
    background-color: #5B6DCD;
    padding: 0;
    box-shadow: 0 12px 18px -6px rgba(0,0,0,.3);
    background-size: cover;
}
.tech-images-container {
    display: flex;
    flex-direction: row;
    padding-top: 42px;
}
.floating-images {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    animation-duration: 2s; 
    animation-timing-function: linear;
    animation-name: slide-in-left;
    position: relative;
    width: 100%;
    height: 40vh;
    will-change: opacity,transform;
}
@keyframes slide-in-right {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes slide-in-left {
    0% {
        opacity: 0;
        /* margin-left: 0% */
    }
    50% {
        /* margin-left: 50%; */
    }
    100% {
        opacity: 1;
        /* margin-left: 0%; */
    }
}
.floating-images-child {
    position: absolute;
}
.floating-image-1 img {
    border-radius: 100px 100px 100px 100px;
    overflow: hidden;
    box-shadow: 0 12px 18px -6px rgba(0,0,0,.3);
    animation-delay: -14900ms;
}
.floating-image-2 img {
    border-radius: 100px 100px 100px 100px;
    overflow: hidden;
    box-shadow: 0 12px 18px -6px rgba(0,0,0,.3);
    animation-delay: -26000ms;
}
.floating-image-3 img {
    border-radius: 100px 100px 100px 100px;
    overflow: hidden;
    box-shadow: 0 12px 18px -6px rgba(0,0,0,.3);
}
.floating-image-4 img {
    border-radius: 100px 100px 100px 100px;
    overflow: hidden;
    box-shadow: 0 12px 18px -6px rgba(0,0,0,.3);
}
/* sql and aws */
.floating-image-1 {
    left: 11%;
    top: 1%;
}
/* angular and react */
.floating-image-2 {
    left: 8%;
    top: 60%;
}
/* sf and node */
.floating-image-3 {
    left: 62%;
    top: 12%;
}
/* drupal and wordpress */
.floating-image-4 {
    left: 65%;
    top: 65%;
}
/* python and looker */
.floating-image-5 {
    left: 33%;
    top: 25%;
}
.tech-icon {
    width: 50%;
    height: auto;
}
.icon-animation-1 {
    will-change: transform;
    line-height: 0;
    top: 0;
    left: 0;
    margin: 0;
    animation: float-up-down 1.4s alternate infinite ease-in-out;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: float-up-down;
    transition: .3s;
}
.icon-animation-2 {
    will-change: transform;
    line-height: 0;
    top: 0;
    left: 0;
    margin: 0;
    animation: float-up-down 1.7s alternate infinite ease-in-out;
    animation-duration: 1.7s;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: float-up-down;
    transition: .3s;
}
.icon-animation-3 {
    will-change: transform;
    line-height: 0;
    top: 0;
    left: 0;
    margin: 0;
    animation: float-up-down 1.6s alternate infinite ease-in-out;
    animation-duration: 1.6s;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: float-up-down;
    transition: .3s;
}
@keyframes float-up-down {
    0% {
        transform: translateY(10px) rotate3d(0,0,0,0deg);
    }
    100% {
        transform: translateY(-10px) rotate3d(0,0,0,0deg);
    }
}
.row-2 {
    width: 100%;
    display: flex;
    justify-content: center;
}
.divider-1 {
    border-top-color: #5B6DCD;
    border-top-width: 5px;
    border-top-style: solid;
    margin-top: 9em;
    height: 1px;
    content: "";
    max-width: 9em;
    margin-left: auto;
    margin-right: auto;
}
.divider-2 {
    border-top-color: #5B6DCD;
    border-top-width: 5px;
    border-top-style: solid;
    margin-top: 40px;
    padding: 10px 4em 0;
    height: 1px;
    content: "";
    align-self: center;
    max-width: 100%;
    margin-right: 0;
}
.divider-3 {
    border-top-color: #5B6DCD;
    border-top-width: 5px;
    border-top-style: solid;
    margin-top: 4em;
    height: 1px;
    content: "";
    max-width: 9em;
    margin-left: auto;
    margin-right: auto;
}
.divider-4 {
    border-top-color: #5B6DCD;
    border-top-width: 5px;
    border-top-style: solid;
    margin-top: 40px;
    padding: 10px 4em 0;
    height: 1px;
    content: "";
    align-self: center;
    max-width: 100%;
    margin-right: 0;
}
#empty-div-1 {
    justify-self: flex-end;
    width: 268px;
    height: 268px;
}
.what-we-do-container {
    color: #55565a;
    font-size: 16px;
    line-height: 1.9em;
    word-wrap: break-word;
    text-align: center;
}
#about-text {
    padding-left: 20%;
    padding-right: 20%;
    margin-bottom: 48px;
}
.section-title {
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #38393d;
    line-height: .8em;
    text-transform: uppercase;
}
.process-subtitle {
    color: #38393d;
    font-weight: 600;
}
.banner-fade {
    animation: banner-fade 4s ease-in-out;
}
@keyframes banner-fade {
    0% {
        color: #38393d;
        text-shadow: -1em 0 .5em #1D33AB;
    }
    20% {
        color: #5B6DCD;
        text-shadow: -1em 0 .5em #38393d;
    }
    40% {
        color: #f4f4f4;
        text-shadow: -1em 0 .5em #f4f4f4;
        opacity: 0.5;
    }
    60% {
        color: #5B6DCD;
        text-shadow: -1em 0 .5em #5B6DCD;
    }
    80% {
        color: #5B6DCD;
        text-shadow: -1em 0 .5em #38393d;
    }
    100% {
        color: #38393d;
        text-shadow: -1em 0 .5em #1D33AB;
    }
}
.fade-text {
    -webkit-animation: fade-text 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fade-text 2s; /* Firefox < 16 */
     -ms-animation: fade-text 2s; /* Internet Explorer */
      -o-animation: fade-text 2s; /* Opera < 12.1 */
         animation: fade-text 2s;
}
@keyframes fade-text {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fade-text {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fade-text {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fade-text {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fade-text {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* WHAT WE DO section */
.services-container {
    display: flex;
    justify-content: center;
}
#custom-solutions-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    width: 29.67%;
    vertical-align: baseline;
    transition: color 300ms ease 0ms , font-size 300ms ease 0ms , box-shadow 300ms ease 0ms , font-size 300ms ease 0ms;
}
#consult-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 29.67%;
    vertical-align: baseline;
    transition: color 300ms ease 0ms , font-size 300ms ease 0ms , box-shadow 300ms ease 0ms , font-size 300ms ease 0ms;
}
#data-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 29.67%;
    vertical-align: baseline;
    transition: color 300ms ease 0ms , font-size 300ms ease 0ms , box-shadow 300ms ease 0ms , font-size 300ms ease 0ms;
}
.subtitle {
    font-size: 32px;
    line-height: 1.4em;
    text-align: center;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 700;
    color: #38393d;
}
.subtitle:hover {
    color: #5B6DCD;
    cursor: pointer;
    transition: .3s;
}
#consult-column:hover .subtitle {
    color: #5B6DCD;
    transition: .3s;
}
#data-column:hover .subtitle {
    color: #5B6DCD;
    transition: .3s;
}
#custom-solutions-column:hover .subtitle {
    color: #5B6DCD;
    transition: .3s;
}
#bulb-link {
    text-decoration: none;
}
#bulb-icon {
    width: 151px;
    height: 151px;
    vertical-align: baseline;
}
.column-text {
    line-height: 1.8em;
    font-family: Helvetica,Arial,Lucida,sans-serif;
    color: #55565a;
    text-align: left;
    vertical-align: top;
    margin-top: 0;
}
#consult-icon {
    width: 151px;
    height: 151px;
    vertical-align: baseline;
}
#data-icon {
    width: 151px;
    height: 151px;
    vertical-align: baseline;
}
.services-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 100%;
    text-align: left;
    color: #38393d;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.8em;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
}
.list-icon {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 48px;
}
#special-list {
    margin-left: 62px;
}
.list-icon li {
    padding-left: 16px;
}
.list-icon li::before {
    content: "\226B";
    padding-right: 8px;
    color: #5B6DCD;
}
.list-icon li:hover {
    color: #5B6DCD;
    transform: scale(1.02);
    transition-property: transform, transform, transform, transform, transform, color, font-size;
    transition-duration: 300ms, 300ms, 300ms, 300ms, 300ms, 300ms, 300ms;
    transition-timing-function: ease, ease, ease, ease, ease, ease, ease;
    transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms, 0ms, 0ms;
}
#learn-btn {
    border-radius: 5px;
    background-color: #5B6DCD;
    border: 2px solid;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    padding: .3em 1em;
    transition: ease 300ms;
    cursor: pointer;
    margin-top: 48px;
}
#learn-span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: .4s;
    color: #fff;
    line-height: 1.7em;
    font-size: 16px;
    font-family: 'Montserrat',Helvetica,serif;
    font-weight: 600;
    text-transform: uppercase;
}
#learn-span:after {
    content:"\203A";
    size: 2em;
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: .3s;
}
#learn-btn:hover span {
    padding-right: 25px;
}
#learn-btn:hover span:after {
    opacity: 1;
    right: 0;
}

/* TECHNOLOGIES section */
#team-span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: .4s;
    color: #fff;
    line-height: 1.7em;
    font-size: 16px;
    font-family: 'Montserrat',Helvetica,serif;
    font-weight: 600;
    text-transform: uppercase;
}
#team-btn:hover {
    border: 2px solid #fff;
    transition: 1s;
}
.tech-text-div {
    text-align: center;
    margin-top: 10%;
}
#tech-text-p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    line-height: 1.4em;
    font-weight: 700;
    font-family: 'Montserrat',Helvetica,Arial,serif;
    letter-spacing: 1px;
    text-shadow: 0 .1em .1em rgba(0,0,0,.4);
    color: #fff;
    font-size: 32px;
}
#img-middle {
    min-width: 30%;
}
.team-div{
    text-align: center;
}
#team-btn {
    color: #fff;
    border-width: 3px;
    border-color: #55565a;
    border-radius: 5px;
    letter-spacing: 1px;
    font-size: 16px;
    font-family: 'Montserrat',Helvetica,Arial,sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #55565a;
    box-shadow: 0 9px 18px -8px rgba(0,0,0,.3);
    padding: .3em 1em;
    border: 2px solid transparent;
    line-height: 1.7em; 
    text-align: center;
    transition: ease 300ms;
    cursor: pointer;
    margin-top: 48px;
}

/* WHO WE ARE section */
#who-we-are-parent {
    animation-duration: .2s;
    animation-timing-function: ease-in;
    animation-name: fade-text;
    color: #55565a;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-self: center;
    align-self: center;
    /* max-width: 800px; */
    min-width: 400px;
}
@keyframes fade-text {
    0% {
        margin-top: 0%
    }
    50% {
        margin-top: 50%
    }
    100% {
        margin-top: 0%;
    }
}
#logo-white-transp {
    width: 30%;
    height: auto;
}   
.who-content-text {
    color: #55565a;
    font-size: 16px;
    line-height: 1.9em;
    word-wrap: break-word;
    text-align: center;
}

/* PROCESS section */
#process-parent {
    text-align: center;
}
.process-content-container {
    color: #55565a;
    font-size: 16px;
    line-height: 1.9em;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.process-container {
    display: flex;
    flex-direction: column;
}
.process-image-purple {
    width: 12%;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 12px 18px -6px rgba(0,0,0,.3);
    background-color: #5B6DCD;
}
.process-image-blue {
    width: 12%;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 12px 18px -6px rgba(0,0,0,.3);
    background-color: #1D33AB;
}

/* CONTACT section */
#contact-parent {
    color: #55565a;
    font-size: 16px;
    line-height: 1.9em;
    display: flex;
    flex-direction: column;
}
.ctm-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-image: linear-gradient(#F4F4F4, #fff);
}
#map {
    margin-right: 4em;
    margin-top: 20px;
    min-height: 440px;
}
#contact-container h2 {
    font-size: 32px;
    font-weight: 700;
    font-family: 'Montserrat',Helvetica,Arial,serif;
    color: #55565a;
    line-height: 1.6em;
    letter-spacing: 1px;
}
#contact-form {
    line-height: 1.7em;
    font-family: "Open Sans",Arial,sans-serif;
    color: #666;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.split-col {
    display: flex;
    flex-direction: row;
}
#contact-col-1 {
    display: flex;
    flex-direction: column;
}
#contact-col-2 {
    display: flex;
    flex-direction: column;
}
.contact-form input {
    line-height: 2em;
    margin-bottom: 2em;
    width: 100%;
}
.contact-form textarea {
    line-height: 2em;
    margin-bottom: 2em;
    width: 100%;
}
#half-width {
    width: 94%;
}
#last-name {
    width: 100%;
}
.contact-btn {
    color: #333;
    background-color: #fff;
    display: inline-block;
    margin-bottom: 40px;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
    box-shadow: 0 3px 5px rgba(0,0,0,.125);
}
.contact-btn:hover {
    background-color: #ccc;
}

/* Image of Indianapolis, IN */
#city {
    background-image: url("../assets/indianapolis.png");
    padding: 0;
    margin: 0;
    background-size: cover;
    /* max-width: 100vw;
    min-width: 100vw; */
    min-height: 70vh;
}

/* FOOTER */
#footer-parent {
    min-height: 222px;
    margin: 0;
    padding-bottom: 4em;
    padding: 4% 0;
    min-width: 100%;
    background-color: #55565a;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    line-height: 1.7em;
    color: #FFF;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 600;
    text-align: left;
    font-size: 18px;
}
.footer-col-1 {
    display: flex;
    flex-direction: column;
    max-width: 33.33%;
}
.footer-col-2 {
    display: flex;
    flex-direction: column;
    max-width: 33.33%;
    font-family: 'Montserrat',Helvetica,Arial,sans-serif;
}
.footer-col-2 h4{
    letter-spacing: 1.3px;
}
.footer-col-3 h4 {
    letter-spacing: 1.3px;
}
.footer-col-3 {
    display: flex;
    flex-direction: column;
    max-width: 33.33%;
}
.footer-divider-1 {
    border-top-color: #5B6DCD;
    border-top-width: 3px;
    border-top-style: solid;
    height: 1px;
    min-width: 1em;
    content: "";
    max-width: 4em;
    margin: -20px auto .5em 0;
}
.footer-divider-2 {
    border-top-color: #5B6DCD;
    border-top-width: 3px;
    border-top-style: solid;
    height: 1px;
    min-width: 2em;
    content: "";
    max-width: 4em;
    margin: -20px auto .5em 0;
}
.footer-col-2 p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: 400;
}
.footer-col-2 p a {
    text-decoration: none;
    color: white;
}
#footer-logo {
    width: 100%;
    height: auto;
}
.footer-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7em;
    font-family: Helvetica,Arial,sans-serif;
    word-break: unset;
    vertical-align: baseline;
}
#mail-icon {
    width: 26px;
    height: 26px;
}
#mail-span {
    color: #FFF;
    text-decoration: none;
    margin-left: 1em;
}
.footer-contact-container {
    display: flex;
    align-content: center;
    margin-bottom: 1em;
    margin-top: 1em;
}
#phone-icon {
    width: 26px;
    height: 26px;
}
#phone-span {
    color: #FFF;
    text-decoration: none;
    margin-left: 1em;
}
.social-container {
    display: flex;
    align-content: center;
    margin-bottom: 0;
    margin-top: 1em;
    justify-content: flex-start;
}
#twitter-icon {
    width: 26px;
    height: 26px;
    margin-right: 3em;
}
#linkedin-icon {
    width: 26px;
    height: 26px;
    margin-right: 3em;
}
#instagram-icon {
    width: 26px;
    height: 26px;
}

/* Join Page */
.join-container {
    
}

@media screen and (min-width: 1025px) {
    #slogan-div{
        max-width: 80%;
    }
    .technologies-container {
        min-height: 50vh;
    }
    #tech-text-p {
        font-size: 1.5em;
    }
    #first-list-margin {
        margin-top: 4%;
    }
    .services-container {
        max-width: 80%;
        display: flex;
        justify-content: center;
    }
    .column-text {
        line-height: 2em;
    }
    .services-list {
        font-size: 1em;
    }
    #about-text {
        padding-left: 29%;
        padding-right: 29%;
        font-size: 1.1em;
    }
    #who-subtitle-text {
        padding-left: 20%;
        padding-right: 20%;
        font-size: 1.1em;
    }
}
@media screen and (min-width: 1024px) {
    .list-icon li {
        font-size: 1em;
    }
    #middle-list-margin {
        margin-top: 12.5%;
    }
    #slogan-text {
        font-size: 1.34em;
    }
    #final-list-margin {
        margin-top: 9%;
    }
    #logo-white-transp {
        width: 25%;
        height: auto;
    }
    .nav-list a {
        margin-right: 1em;
        margin-left: 1em;
    }

}

@media screen and (max-width: 1025px) {
    .tech-icon {
        width: 4em;
    }
}   

@media screen and (max-width: 769px) {
    .tech-icon {
        width: 3.7em;
    }
    .join-container {
        padding: 0 4%;
    }
}
@media screen and (min-width: 768px) {
    .main-header {
        line-height: 23px;
        border-bottom: 1px solid #a2a2a2;
        box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.15);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 0;
        box-sizing: border-box;
        transition: .2s;
        background: #F4F4F4;
        z-index: 999;
    }
    .nav-list {
        display: flex;
        list-style-type: none;
        margin-right: 30px;
        flex-direction: row;
    }
    .nav-list a {
        /* padding: 10px 15px; */
        text-decoration: none;
        display: inline-block;
        color: #000;
        vertical-align: baseline;
        position: relative;
        margin-right: .5em;
        margin-left: .5em;
    }
    /* .nav-links a:hover {
        color:#000;
    } */
    .nav-links a:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #5B6DCD;
        visibility: hidden;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
    }
    #menu-item-contact {
        border-radius: 6px;
        background-color: #5B6DCD;
        margin-right: 30px;
        margin-left: 4px;
        padding: 5px;
        -webkit-transition-duration: .3s;
        transition-duration: .3s;
        margin-top: -1%;
    }
    #menu-item-contact:hover{
        text-decoration: none;
        background: rgba(15, 33, 134, 0.8);
        color: #5B6DCD;
    }
    .nav-links a:hover:before {
        visibility: visible;
        -webkit-transform: scaleX(1);
        transform: scalex(1);
    }
    #nav-logo {
        max-width: 400px;
        height: auto;
        margin-left: 16px;
    }
    .navbar-toggle {
        position: absolute;
        top: 10px;
        right: 20px;
        cursor: pointer; 
        color: #5B6DCD;
        font-size: 24px;
        display: none;
    }
    .navbar {
        display: flex;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
        align-items: center;
        position: sticky;
    }
    .nav-list li {
        margin: 0;
    }
    #nav-logo {
        margin-top: 0;
        padding: 10px;
    }
    .footer-text {
        max-width: 50vw;
    }
    #tech-text-p {
        margin: 0;
    }
    .divider-1 {
        margin-top: 10vh;
    }
    #mail-span, #phone-span {
        font-size: .83em;
    }
    #what-we-do-parent {
        max-width: 100%;
    }
    .services-container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        min-width: 100%;
        padding: 0;
        margin: 0;
    }
    .services-container .subtitle {
        font-size: 1.5em;
    }
    #custom-solutions-column {
        width: 29.67%;
        }
    #consulting-column {
        width: 29.67%;
    }
    #data-column {
        width: 29.67%;
    }
    .services-list {
        width: 100%;
        text-align: left;
        margin: 0;
        /* padding-bottom: 3em; */
        align-content: left;
    }
    .list-icon {
        margin: 0;
    }
    #special-list {
        margin: 0;
        margin-top: 2.6vh;
    }
    #who-subtitle-text{
        max-width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #slogan-text {
        font-size: .9em;
    }
    .services-list {
        font-size: .76em;
    }
    #custom-solutions-column {
        font-size: .9em;
    }
    #consulting-column {
        font-size: .9em;
    }
    #data-column {
        font-size: .9em;
    }
    #tech-text-p {
        font-size: 1.3em;
    }
}
@media screen and (max-width: 426px) {
    .tech-icon {
        width: 2.5em;
    }
    #tech-text-p {
        font-size: 1.1em;
        margin: 0;
        line-height: 1.6em;
    }
    .list-icon li {
        font-size: 1em;
    }
  
}
@media screen and (max-width: 413px) {
    .list-icon li {
        font-size: 1em;
    }
}
@media screen and (min-width: 413px) {
    .technologies-container {
        min-height: 40vh;
    }
}
@media screen and (max-width: 375px) {
    .tech-icon {
        width: 2.2em;
    }
    #tech-text-p {
        margin: 0;
        font-size: 1em;
    }
    #slogan-text {
        margin-top: 12vh;
    }
}
@media screen and (min-width: 374px) {
  
    #slogan-text {
        margin-top: 1em;
    }
}
@media screen and (min-width: 322px) {
    #slogan-text {
        margin-top: 12vh;
    }
}
@media screen and (max-width: 321px) {
    .tech-icon {
        width: 1.8em;
    }
    #process-section-title {
        line-height: 1.2em;
    }
    .technologies-container {
        margin-top: 1em;
        max-height: 40vh;
    }
    #slogan-text {
        margin-bottom: 0;
        margin-top: 10vh;
    }
    .list-icon li {
        font-size: .89em;
    }
    #learn-btn {
        margin-bottom: 1.7em;
    }
}
@media screen and (min-width: 319px) and (max-width: 767px) {
    html {
        max-width: 100%;
    }
    .banner-fade {
        font-size: 1.1em;
        margin-top: 2em;
        line-height: 1.6em;
    }
    #nav-logo {
        width: 50%;
        padding: 10px;
    }
    #what-we-do-parent {
        width: 80%;
        margin-top: -20%;
    }
    .services-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 100%;
        padding: 0;
        margin: 0;
    }
    #custom-solutions-column {
        width: 100%;
    }
    #consulting-column {
        width: 100%
    }
    #data-column {
        width: 100%;
    }
    .services-list {
        width: 100%;
        text-align: left;
        margin: 0;
        padding-bottom: 3em;
    }
    #special-list {
        margin: 0;
    }
    .list-icon{
        margin: 0;
    }
    #learn-btn {
        margin-top: 1em;
    }
    .what-we-do-container {
        word-wrap: none;
        min-width: 100%;
        margin: 0;
        padding: 0;
    }
    #slogan-subtitle-text {
        font-size: 32px;
    }
    .section-title {
        font-size: 32px;
    }
    #about-text {
        padding: 0;
    }
    .tech-text-div {
        margin: 0;
    }
    #team-btn {
        margin-top: 5em;
        padding: .4rem;
        font-size: .7rem;
    }
    .divider-2 {
        margin-top: 4em;
        padding-top: 8px;
    }
    .divider-4 {
        margin-top: 3em;
    }
    #who-we-are-parent {
        min-width: 100vw;
        max-width: 100vw;
    }
    .who-we-are-text-container {
        /* width: 100%; */
        text-align: center;
        padding-left: 3em;
        padding-right: 3em;
    }
    #city {
        max-width: 100%;
    }
    #footer-parent {
        display: flex;
        flex-direction: column;
        min-width: 100%;
        justify-content: center;
        padding-left: 2em;
        padding-right: 2em;
    }
    .footer-col-1 {
        min-width: 100%;
    }
    .footer-col-2 {
        min-width: 100%;
    }
    .footer-col-3 {
        min-width: 100%;
    }
    .footer-col-3 a {
        font-size: 80%;
    }
    body {
        /* max-width: 100%; */
    }
    .process-image-blue {
        width: 25%;
        height: auto;
    }
    .process-image-purple {
        width: 25%;
        height: auto;
    }
    #slogan-text {
        font-size: .8em;
    }
    .technologies-container {
        min-height: 30vh;
        max-height: 40vh;
    }
    .nav-list {
        display: none;
        list-style-type: none;
    }
    .nav-list a {
        text-decoration: none;
        display: inline-block;
        color: #000;
        vertical-align: baseline;
        position: relative;
        margin-right: .5em;
        margin-left: .5em;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .main-header {
        line-height: 23px;
        border-bottom: 1px solid #a2a2a2;
        box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.15);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 0;
        box-sizing: border-box;
        transition: .2s;
        background: #F4F4F4;
        z-index: 999;
    }
    .navbar-toggle {
        position: absolute;
        top: 10px;
        right: 20px;
        cursor: pointer; 
        color: #5B6DCD;
        font-size: 24px;
    }
    .active {
        display: block;
    }

}