/*
Theme Name: Waterfield 2022
Theme URI: waterfieldtechnologies.com
Author: Chris Cortez
Author Email: chris037@gmail.com
Version: 2022.07.14.01
*/


/*!---------- 1. GLOBAL STYLES ----------*/


/****** PLACE YOUR CUSTOM STYLES HERE ******/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
:root {
    --primary-color: #1f3d7a;
    --secondary-color: #ff8c1a;
    --dark-color: #002240;
    --light-color: #f4f4f4;
    --success-color: #5cb85c;
    --error-color: #d9534f;
    --light-gray: #f4f5f8;
    --dark-gray: #333;
    --orange: #ff8c1a;
    --light-orange: #fc952f;
    --dark-orange: #ff8c1a;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'GalanoGrotesque-Regular', 'Lato', sans-serif;
    color: #333;
    line-height: 1.6rem;
    font-display: swap;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #333;
}

h1,
h2 {
    font-weight: 300;
    line-height: 1.2;
    margin: 10px 0;
}

h2,
.solutions h2,
.services-inner h2,
.tier-list h2,
.container h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-display: swap;
}

p {
    font-size: 16px;
    margin: 10px 0;
}

img {
    width: 100%;
}


/* Navbar */

.navbar {
    background-color: transparent;
    color: var(--dark-gray);
    height: 70px;
    margin-top: 25px;
    margin-bottom: 50px;
}

.navbar .logo {
    width: 210px;
}

.navbar .mobile-menu,
.navbar .mobile-menu-exit {
    display: none;
    cursor: pointer;
}

.navbar ul {
    display: flex;
    align-items: center;
}

.navbar nav li a {
    color: var(--dark-gray);
    padding: 10px;
    margin: 0 5px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'GalanoGrotesque-Regular', 'Lato', sans-serif;
    font-display: swap;
}

.navbar nav ul>a:hover {
    border-bottom: 2px #1f3d7a solid;
}

.navbar nav li.current-menu-item>a {
    border-bottom: 2px #1f3d7a solid;
}

.navbar nav>ul>li:last-child>a {
    background: var(--orange);
    color: #FFF;
    padding: 10px 15px;
    display: inline-block;
    padding: 10px 30px;
    cursor: pointer;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 30px;
}

#primary-menu li.btn-orange a {
    background: var(--orange);
    color: #FFF;
    padding: 10px 30px;
    display: inline-block;
    cursor: pointer;
    border: none;
    border-radius: 30px;
}

.navbar nav>ul>li:last-child>a:hover {
    border-bottom: none;
    background: var(--light-orange);
}

.navbar .flex {
    justify-content: space-between;
}

.navbar nav ul>li {
    /*position: relative;*/
}

.navbar nav ul>li>ul {
    flex-direction: column;
    align-items: flex-start;
}

.navbar nav ul.menu li.has-dropdown>ul,
.navbar nav ul.menu li>ul.sub-menu {
    width: auto;
    padding: 8px 0;
    background: #EEE;
    position: absolute;
    z-index: 99995;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transform: translate3d(0, 10px, 0);
    -webkit-transform: translate3d(0, 10px, 0);
    -moz-transform: translate3d(0, 10px, 0);
    margin-top: -1px;
    top: 65px;
}

.navbar.sticky nav ul.menu li>ul.sub-menu {
    top: 55px;
}

.navbar nav ul.menu li.has-dropdown>ul>li,
.navbar nav ul.menu li>ul.sub-menu>li {
    padding: 15px 0;
    display: none;
}

.navbar nav ul.menu li:hover>ul.sub-menu {
    animation: fadeIn;
    /* referring directly to the animation's @keyframe declaration */
    animation-duration: 0.5s;
    /* don't forget to set a duration! */
}

.navbar nav ul.menu li.has-dropdown:hover>ul>li,
.navbar nav ul.menu li:hover>ul.sub-menu>li {
    padding: 15px 0;
    display: block;
    z-index: 99999;
}


/* Hero */

.hero {
    min-height: 300px;
    background-color: transparent;
    color: #333;
    position: relative;
}

.hero.hero-casestudy {
    min-height: 120px;
}

h1,
.hero h1,
.hero h2,
.container .hero-text h2 {
    font-size: 3rem;
    color: var(--primary-color);
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-weight: 900;
    margin-bottom: 0;
}

.hero p {
    margin: 10px 0;
    line-height: 1.5rem;
}

.hero p.subhead {
    font-size: 1rem;
    padding-right: 10%;
}

.hero .hero-cta {
    font-size: 1rem;
    margin: 32px 0;
}

.hero ul {
    margin: 16px 0;
    text-align: left;
}

.hero li {
    font-size: 1rem;
    padding-left: 3%;
}

.hero li i {
    font-size: 1rem;
    color: var(--primary-color);
    margin-right: 16px;
}

.hero .grid {
    /*overflow: visible;
  */
    grid-template-columns: 55% auto;
    gap: 30px;
}

.hero.hero-casestudy .grid {
    grid-template-columns: 100%;
    gap: 30px;
    text-align: left;
    padding-bottom: 10px;
}

.hero.hero-contactcenter .grid,
.hero.hero-consulting .grid {
    grid-template-columns: 65% auto;
    gap: 30px;
}

.hero.hero-partners .grid,
.hero.hero-managed-services .grid {
    grid-template-columns: 45% auto;
    gap: 30px;
}

.hero .hero-text p {
    padding-right: 5%;
}

.hero-text a {
    color: rgba(0, 143, 191, 1);
}

.hero-text sup,
h2>sup {
    font-size: 0.9rem;
}


/* Customer Experience */

.customer-experience {
    /*background: var(--light-gray);*/
    background: url(img/customer-experience-bg.svg) no-repeat;
    background-size: cover;
    padding: 3rem 0 0;
    margin-bottom: 0;
}

.customer-experience h2,
.industries h2,
.our-team h2,
.news h2,
.jobs.jobs-inner h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-weight: 900;
}

.customer-experience p {
    padding-right: 120px;
}

.customer-experience .container.grid {
    /*overflow: visible;*/
    align-items: center;
    grid-template-columns: 55% auto;
    gap: 10px;
}


/**/

.resource-roles.grid {
    grid-template-columns: 55% auto;
}

.resource-roles {
    justify-content: center;
    align-items: start;
    text-align: left;
}

.resource-roles h3 {
    margin-bottom: 20px;
}

.resource-roles h3,
.resource-roles ul {
    padding-left: 80px;
}

.resource-roles ul li {
    font-size: 0.9rem;
    color: #222020;
}

.resource-roles ul li i {
    font-size: 1.2rem;
    padding-right: 50px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.resource-roles input[type="text"],
.resource-roles textarea {
    width: 100%;
}

.resource-roles input[type='text'],
.resource-roles input[type='email'],
.resource-roles input[type='tel'],
.resource-roles textarea {
    border: 0;
    border-bottom: 1px solid #c4b4a4;
    /* border-radius: 5px;*/
    width: 100%;
    /*padding: 10px 20px;*/
    font-size: 16px;
    color: #666;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
}

.resource-roles input:focus,
.resource-roles textarea:focus {
    outline: none;
}

.resource-roles .form-control {
    margin-bottom: 10px;
}

.resource-roles label {
    font-size: 0.8rem;
    color: #666;
    padding: 20px 0 0;
    display: inline-block;
}

.resource-roles label span {
    color: #999;
}

.resource-roles label span.hs-form-required {
    color: #CC0;
}

.resource-roles input[type='submit'] {
    display: inline-block;
    padding: 10px 50px;
    cursor: pointer;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.resource-roles .btn {
    font-size: 13px;
    height: 35px;
    display: inline-block;
    padding: 10px 50px;
    cursor: pointer;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 30px;
}


/* PARTNERS */

.partners ul {
    flex-wrap: wrap;
}

.partners ul li {
    width: 19%;
    margin-right: 10px
}

.partners.services-inner .card {
    grid-template-columns: 5fr 1fr;
}

.partners .card p {
    font-size: 0.9rem;
    line-height: 22px;
}


/* Where We Are */

.svg {
    position: absolute;
    width: 0;
    height: 0;
}

.where-we-are {
    background: url('img/aboutus-bg.jpg') bottom left no-repeat #f4f5f7;
    padding: 36px 0 250px;
    clip-path: ellipse(50% 33% at 50% 50%);
    width: 100%;
    height: 100%;
    background-size: contain;
    -webkit-clip-path: url(#my-clip-path);
    clip-path: url(#my-clip-path);
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
}

.where-we-are .container.flex {
    flex-wrap: wrap;
}

.where-we-are ul.flex {
    justify-content: space-evenly;
}

.where-we-are ul li {
    width: 33%;
    background: rgb(255, 140, 26);
    background: linear-gradient(315deg, rgba(255, 140, 26, 1) 10%, rgba(244, 175, 64, 1) 100%);
    background-size: cover;
    background-repeat: no-repeat;
    height: 195px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    mask-image: url('img/black-mask.svg');
    -webkit-mask-image: url('img/black-mask.svg');
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    color: #FFF;
}

.where-we-are ul li h3 {
    font-size: 2.5rem;
    color: var(--primary-color);
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-weight: 900;
    color: #FFF;
    line-height: 42px;
}

.where-we-are ul li p {
    padding: 0 40px;
    margin-top: 0;
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.2rem;
}

.your-team ul {
    justify-content: space-around;
    flex-wrap: wrap;
}

.your-team ul>li {
    width: 200px;
}


/* Services */

.services {
    background: url(img/customer-experience-bg.svg) no-repeat bottom right;
    background-size: cover;
    padding: 3rem 0;
    position: relative;
}

.services .grid {
    grid-auto-rows: 1fr;
    gap: 10px;
    grid-row-gap: 20px;
}

.services h4 {
    font-size: 1.5rem;
    letter-spacing: 1px;
    line-height: 30px;
    /*color: #FFF;*/
    color: var(--primary-color);
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
}

.services p {
    font-size: 0.9rem;
    line-height: 1.2rem;
    grid-column: 1 / span 3;
}

.services a {
    grid-column: 1 / span 1;
    transition: transform 0.2s ease-in;
    cursor: pointer;
}

.services a:hover {
    transform: translateX(10px);
}

.services .card {
    height: 100%;
    display: grid;
    margin: 5px;
    padding: 30px;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    /* color: #FFF;*/
    color: #333;
}


/*.services .card:first-child{
  background: rgb(106,197,252);
background: linear-gradient(-45deg, rgba(106,197,252,1) 0%, rgba(135,210,255,1) 100%);


}
.services .card:nth-child(2){
   background: rgb(250,188,62);
    background: linear-gradient(-45deg, rgba(250,188,62,1) 0%, rgba(252,197,86,1) 100%);
}
.services .card:nth-child(3){
    background: rgb(227,114,229);
background: linear-gradient(-45deg, rgba(227,114,229,1) 0%, rgba(229,138,231,1) 100%);
}

.services .card:nth-child(4){
    background: rgb(246,103,159);
background: linear-gradient(-45deg, rgba(246,103,159,1) 0%, rgba(247,126,173,1) 100%);
}

.services .card:last-child{
   background: rgb(100,229,127);
background: linear-gradient(-45deg, rgba(100,229,127,1) 0%, rgba(120,230,143,1) 100%);
}*/

.services .card img {}

.services .card .arrow {
    width: 30px;
    margin: 10px 0;
}


/*.services::before,
.services::after {
  content: '';
  position: absolute;
  height: 100px;
  bottom: -100px;
  right: 0;
  left: 0;
  background: url(img/customer-experience-bg.svg) bottom left no-repeat;
  background-size: 100%;
 
}*/


/* CONSULTING */

.partners .card,
.partners .card-2,
.consulting .card,
.consulting .card-2 {
    background: rgb(0, 143, 191);
    background: linear-gradient(-45deg, rgba(0, 143, 191, 1) 10%, rgba(0, 168, 225, 1) 100%);
    color: #FFF;
    border-radius: 15px;
    padding: 20px;
    margin: 10px;
}


/* Industries */

.industries {
    padding: 3rem 0;
}

.industries .container {
    text-align: center;
}

.industries h2,
.industries p {
    width: 80%;
    margin: 0 auto;
}

.industries ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-content: center;
    margin: 20px auto;
}

.industries.industries-2 h4 {
    /*f*ont-size: 1.3rem;
  letter-spacing: 1px;
  line-height: 30px;*/
    font-size: 1rem;
    line-height: 20px;
    padding: 10px 50px 0;
}

.industries h4,
.news h4 {
    font-size: 1.3rem;
    letter-spacing: 1px;
    line-height: 30px;
    font-weight: 600;
}

.industries h4 {
    color: var(--primary-color);
    padding: 10px 50px 0;
}


/*.industries ul li img{
  width: 25%;
  text-align: center;
  margin: 0 auto 5px;
}*/

.industries ul li img {
    width: auto;
    text-align: center;
    margin: 0 auto 5px;
    height: 75px;
}

.industries ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url("img/industries-li-bg.svg") no-repeat top center;
    /*background-size: contain;*/
    background-size: 100% 100%;
    height: 225px;
    width: 90%;
    text-align: center;
    margin: 40px 0 0;
}


/* News */

.news {
    background: url("img/news-bg2.svg") no-repeat top center;
    background-size: cover;
    padding: 3rem 0;
    /* background-color: #f4f5f8;
  clip-path: ellipse(90% 100% at 50% 0%);*/
}

.news.show {
    display: block;
}

.news .news-text {
    padding: 30px;
}

.news ul {
    /* padding: 5rem 0;*/
    /*gap: 40px;*/
}

a.btn-arrow.cta.text-center {
    display: block;
    font-size: 1rem;
    text-align: center;
    color: #008fbf;
}

.news .intro-text+ul {
    padding: 2rem 0;
    /*gap: 40px;*/
}

.news ul>*+*,
ul.insight-resources>*+* {
    margin: 0 0 0 30px;
}

.news ul li,
.tatsu-section-pad ul li,
ul.insight-resources li {
    background: #FFF;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.tatsu-section-pad ul li,
ul.insight-resources li {
    justify-content: flex-start;
    border: 1px solid #DDD;
}

.tatsu-section-pad ul li .resource-thumb,
ul.insight-resources li .resource-thumb {
    margin-bottom: -9px;
}

.news ul li img {
    width: 100%;
    height: auto;
}

.news ul li:nth-child(even),
.tatsu-section-pad ul li:nth-child(even),
ul.insight-resources li:nth-child(even) {
    flex-direction: column-reverse;
    justify-content: space-between;
}

.news a {
    color: #008fbf;
    font-size: 14px;
}

.news p.subhead {
    font-weight: 900;
    font-size: 1rem;
}

.news p {
    font-size: 0.8rem;
    line-height: 1.2rem;
}


/* OUR TEAM */

.our-team {
    /*display: none;*/
}

.our-team .container {
    background: rgb(55, 55, 55);
    background: radial-gradient(circle, rgba(55, 55, 55, 1) 0%, rgba(34, 34, 34, 1) 100%);
    width: 65%;
    margin: 0 auto;
    padding: 8% 10%;
    text-align: center;
    color: #FFF;
}

.our-team.our-team-blue {
    background: rgb(31, 61, 122);
    background: radial-gradient(circle, rgba(31, 61, 122, 1) 10%, rgba(31, 61, 122, 1) 100%);
}

.our-team.our-team-blue .container {
    background: none;
    padding: 5% 10%;
}

.our-team.our-team-blue .container a.btn-arrow {
    color: #FFF;
}

.our-team.our-team-blue .container a.btn-arrow i {
    color: #FFF;
}

.our-team h2 {
    color: #FFF;
}

.our-team h2 span {
    color: var(--orange);
}

.our-team p {
    margin-bottom: 20px;
}


/* OUR CULTURE */

.our-culture .container.flex {
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
}

.our-culture .container.flex .intro-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    align-items: flex-start;
    margin-left: 30px;
    order: 2;
    height: 100%;
}

.our-culture .container.flex .intro-text p {
    margin: 0 0 20px;
    text-align: left;
    width: 100%;
}

.our-culture .container.flex img {
    width: 580px;
    order: 1;
}

.our-history p {
    width: 85%;
    text-align: center;
    line-height: 1.5rem;
    margin: 0 auto;
    padding: 16px 0;
}

.tier-list.our-history p {
    width: 100%;
}


/* OUR HISTORY */

.our-history {}

.our-history .container.grid {
    position: relative;
    align-items: start;
    justify-items: end;
}

.our-history .container.grid>div {
    width: 360px;
    margin-right: 20px;
}

.our-history .container.grid img {
    width: 93px;
    height: 93px;
}

.our-history .container.grid .flex {
    flex-direction: column;
    overflow: visible;
    justify-content: flex-start;
    align-items: flex-start;
}

.our-history .container.grid .flex>li {
    display: grid;
    margin-bottom: 30px;
    /* grid-template-columns: 12px 12px 12px;
  grid-template-rows: 12px 12px 12px;*/
}

.our-history .container.grid .flex>li>img {
    grid-row-start: 1;
    grid-row-end: 3;
    margin-right: 35px;
}

.our-history .container.grid .flex>li>h3 {
    grid-column-start: 2;
    grid-column-end: 4;
    justify-self: start;
    letter-spacing: 3px;
    color: var(--primary-color);
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-weight: 900;
    border-bottom: 2px solid #dfdfdf;
    width: 60%;
    text-align: left;
    margin-bottom: 10px;
    font-size: 1.18rem;
}

.our-history .container.grid .flex>li>p {
    margin-right: 20%;
    color: var(--primary-color);
    line-height: 1.2rem;
}

.our-history .container.grid p {
    color: #333;
    text-align: left;
}

.our-history .container.grid .bar {
    width: 5px;
    height: 100%;
    background: #dfdfdf;
    position: absolute;
    top: -20px;
    right: 43%;
    z-index: -5;
}

.tier-list.our-history .container.grid .bar {
    right: 48.2%;
}

.tier-list.our-history .container.grid>div:first-child img {
    width: 100%;
    height: 100%;
}

.tier-list.our-history .container.grid {
    position: relative;
    align-items: start;
    justify-items: start;
    grid-template-columns: 40% auto;
}

.tier-list.our-history .container.grid>div:first-child {
    width: 400px;
    margin-right: 20px;
    text-align: left;
}

.tier-list.our-history .container.grid .flex>li {
    margin-bottom: 50px;
}

.tier-list.our-history .container.grid .flex>li>h3 {
    width: 100%;
}

.tier-list.our-history .container.grid .flex>li>ul {
    margin-left: 15px;
    text-align: left;
}

.tier-list.our-history .container.grid .flex>li>ul>li {
    list-style-type: disc;
    padding-left: 30px;
    color: var(--primary-color);
}


/*OUR SOLUTIONS*/

.solutions {
    background: var(--light-gray);
    margin-bottom: 0;
    background: url('img/bg-mask3.svg') top left no-repeat;
    background-size: cover;
    /*background-size: 100%;*/
}

.solutions,
.services-inner {
    position: relative;
}


/* SERVICES */

.services-inner {
    background: var(--light-gray);
    margin-bottom: 0;
    background: url('img/bg-mask3.svg') top left no-repeat;
    background-size: cover;
    /*background-size: 100%;*/
}

.services-inner .row {
    margin-bottom: 0;
}


/* .solutions::after, 
.services-inner::after {
    content: '';
    position: absolute;
    height: 50px;
    right: 0;
    left: 0;
    background: url(img/bg-mask2.svg) bottom left no-repeat;
    width: 100%;
    background-size: cover;
    bottom: -1px;
} */

.services-inner.no-bg,
.services-inner.no-bg::after {
    background: none;
}

.services-inner.no-bg::after {
    height: 0;
}


/*CONTACT CENTER*/

.contactcenter {
    background: var(--light-gray);
    margin-bottom: 0;
    background: url('img/customer-experience-bg.svg') top left no-repeat;
    background-size: cover;
    background-position: top center;
}

.contactcenter.services-inner .card {
    grid-template-columns: 4fr 1fr;
}


/* TEAM */

.team.services-inner .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 5px;
    padding: 30px;
    grid-template-columns: 1fr;
    align-items: center;
    color: #1f3d7a;
    justify-content: space-between;
}

.team-inner .grid {
    display: grid;
    grid-template-columns: 35% 64%;
    gap: 50px;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

.team-profile-photo img {
    width: 100%;
    height: auto;
}

.team-profile-info h2 {
    font-size: 2rem;
    line-height: 30px;
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.team-profile-info h3 {
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.team-profile-info p {
    margin: 0;
    margin-bottom: 20px;
}

.services-inner .card h4 {
    font-size: 1.3rem;
    line-height: 30px;
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    color: var(--primary-color);
}

.team .card {
    /* background: rgb(255, 255, 255); */
    background: none;
    border-radius: 15px;
    border-radius: none;
    padding: 20px;
    margin: 10px;
}

.team .card .card-info>img {
    margin-bottom: 20px;
}

.team .card .card-info>p {
    padding: 0;
    margin: 0 0 30px;
    color: #333;
    font-size: 0.8rem;
}

.team .card .card-footer a {
    font-size: 0.8rem;
    color: #333;
}

.team .card .card-footer a>i {
    background: none;
    color: #333;
    margin-left: 10px;
}

.team .card .card-footer a i.fab {
    color: #FFF;
    background: #cccc;
    border-radius: 30px;
    padding: 5px;
    height: 30px;
    width: 30px;
    font-size: 1.2rem;
    text-align: center;
}

.team .card .card-footer {
    width: 98%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/**************************************************************** 06.16.22*/

.team .card .card-info>img {
    margin-bottom: 20px;
    border-radius: 200px;
}

.team .card .card-info {
    text-align: center;
}

.team .card .card-footer {
    width: 98%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/****************************************************************/

.team-collage .container.flex {
    overflow: hidden;
    justify-content: space-between;
}

.team-collage .container.flex img {
    height: 100%;
    width: 95%;
    margin-right: 10px;
}

.team-collage .container.flex img {}

.team-board.services-inner {
    background: var(--light-gray);
    margin-bottom: 0;
    background: url(img/news-bg.svg) top left no-repeat;
    background-size: cover;
    /* background-size: 100%; */
}

.team .intro-text img {
    width: auto;
}


/* STAFF 8*/

.staff.customer-experience,
.staff.partners {
    background: none;
    background-size: cover;
    padding: 0;
    margin-bottom: 0;
}

.staff.services-inner,
.staff.services-inner::after {
    background: none;
}

.staff .card {
    background: #f4f5f8;
}

.jobs-card .card {
    background: #f4f5f8;
    border-radius: 15px;
    padding: 30px;
    margin: 10px;
    color: #666;
}

.jobs-card.services-inner .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.jobs-card.services-inner .card h4 {
    font-size: 1.4rem;
    letter-spacing: 1px;
    line-height: 30px;
    color: var(--primary-color);
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-weight: 900;
    align-self: end;
    margin-bottom: 24px;
}

.jobs-card.services-inner .card p {
    font-size: .9rem;
    line-height: 1.3rem;
    grid-column: 1 / span 3;
    color: #777;
    align-self: start;
}

.jobs-card.services-inner .card a {
    grid-column: 1 / span 1;
    transition: transform 0.2s ease-in;
    cursor: pointer;
    text-align: center;
    align-self: end;
}

.jobs-card.services-inner .card a.btn {
    padding: 10px 20px;
    /*width: 50%;*/
    font-size: 1rem;
}

.page.page-inner h2,
.jobs.jobs-inner h2 {
    margin-bottom: 48px;
}

.page.page-inner h3,
.jobs.jobs-inner h3 {
    margin-bottom: 18px;
}

.page.page-inner p,
.page.page-inner ul,
.page.page-inner ol,
.jobs.jobs-inner p,
.jobs.jobs-inner ul,
.jobs.jobs-inner ol {
    margin-bottom: 24px;
    font-size: 1.01rem;
}

.page.page-inner ul,
.jobs.jobs-inner ul {
    list-style-type: disc;
    margin-left: 36px;
}

.page.page-inner ol,
.jobs.jobs-inner ol {
    margin-left: 36px;
}

.industries.services-inner ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(img/industries-li-bg-white.svg) no-repeat top center;
    /* background-size: contain; */
    background-size: 100% 100%;
    height: 225px;
    width: 90%;
    text-align: center;
    margin: 40px 0 0;
}

.perks.services-inner ul li {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 40%;
    text-align: left;
    margin: 30px 0 0;
    padding-left: 30px;
    background: url(img/icon-check.png) no-repeat top left;
    background-size: 25px 25px;
}


/* PAGINATION*/

.pagination {
    background: rgb(31, 61, 122);
    background: linear-gradient(-90deg, rgba(31, 61, 122, 1) 0%, rgba(0, 143, 191, 1) 100%);
    padding: 30px 0;
}

.pagination .container.flex {
    justify-content: flex-start;
}

.pagination .pagination-text {
    background: #FFF;
    display: flex;
    align-items: center;
    height: 60px;
}

.pagination span {
    display: inline-block;
    background: var(--primary-color);
    color: #FFF;
    margin: 0 20px;
    padding: 5px 50px 5px 20px;
    letter-spacing: 2px;
    line-height: 1rem;
}

.pagination a {
    display: inline-block;
    font-size: 1.2rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-weight: 900;
    padding: 0 300px 0 0;
}

.pagination .arrow-right {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #FFF;
}


/* BLOG STYLES*/

.blog-inner .grid {
    display: grid;
    grid-template-columns: 65% 34%;
    gap: 50px;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

.blog-content img {
    width: 100%;
    height: auto;
}

.blog-content h2 {
    font-size: 2rem;
    line-height: 2.5rem;
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    color: var(--primary-color);
    padding: 8px 0 4px;
}

.blog-content h2>a {
    color: var(--primary-color);
}

.blog-content .meta {
    display: flex;
    margin-bottom: 16px;
    color: #999;
}

.blog-content .meta>span {
    display: inline-block;
    font-size: .75rem;
    text-transform: uppercase;
    padding: 0 16px;
    color: #999;
}

.blog-content .meta>span:first-child {
    padding-left: 0;
}

.blog-content .meta>span:last-child {
    padding-right: 0;
}

.blog-content .meta>span a {
    color: var(--primary-color);
    text-decoration: underline;
}

.blog-content .meta>span ul {
    display: inline-block;
}

.blog-content p {
    margin: 0;
    margin-bottom: 20px;
}

.blog-item {
    border-bottom: 1px solid #CCC;
    padding-bottom: 32px;
    margin-bottom: 32px;
}

.more-link.btn {
    display: inline-block;
    padding: 5px 30px;
    cursor: pointer;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: .8rem;
}

.screen-reader-text {
    display: none;
}

.widget_search {
    margin-bottom: 32px;
    display: grid;
    grid-template-columns: 1fr;
}

.widget_search input[type="search"] {
    appearance: auto;
    box-sizing: border-box;
    width: 75%;
    padding: 5px 10px;
}

.widget_search input[type="submit"] {
    appearance: auto;
    box-sizing: border-box;
    padding: 5px 10px;
}


/*.blog-sidebar .widget_search {
    	background: transparent;
	}

	.widget .search-field {
    	width: 85%;
	}

	.widget_search .search-submit {
	    background: transparent;
	    color: inherit;
	    display: inline-block;
	    font-family: FontAwesome;
	    padding: 10px 5px;
	}

	.widget_search .search-submit:hover,
	.widget_search .search-submit:active,
	.widget_search .search-submit:focus {
	    background: transparent;
	    color: inherit;
	}*/

.widget-title {
    font-size: 0.9rem;
    color: var(--primary-color);
}

.widget_recent_entries ul {
    list-style-type: disc;
    margin-left: 24px;
}

.widget_recent_entries li a {
    color: rgba(0, 143, 191, 1);
    font-size: 1.05rem;
}


/* CONTACT US */

.contact-container h4 {
    font-size: 1.25rem;
    font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    color: var(--primary-color);
}

.global-locations-ul {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-row-gap: 1px;
    grid-column-gap: 4px;
}


/* END OF ONTACT US  */


/* END OF BLOG */

.footer-links,
.footer-links a {
    color: #ccc;
    background: #333;
    font-size: .8rem;
}

.footer-links h3 {
    color: #EEE;
    font-size: 1rem;
    margin-bottom: 10px;
}

.footer-links ul {
    gap: 0;
}


/* FOOTER */

footer {
    padding: 1rem 0 5rem;
}

footer .footer-left .col {
    margin-right: 3rem;
}

footer .footer-left.flex {
    justify-content: flex-start;
    align-items: flex-start;
}

footer .container.flex {
    justify-content: space-between;
    align-items: center;
}

footer form.grid {
    gap: 0;
}

footer .footer-right {
    text-align: right;
    align-self: flex-start;
}

footer.form-control {
    margin: 30px 0;
}

footer input[type='text'],
footer input[type='email'],
#s {
    border: 0;
    border: 1px solid #EEE;
    width: 100%;
    padding: 10px 20px;
    font-size: 16px;
    color: #666;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

footer input[type='submit'] {
    margin-left: 20px;
    display: inline-block;
    padding: 5px 30px;
    cursor: pointer;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1rem;
}

footer input:focus,
.resource-roles input:focus .resource-roles textarea:focus {
    outline: none;
}

footer .btn {
    font-size: 1rem;
    height: auto;
    display: inline-block;
    padding: 5px 30px;
    cursor: pointer;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 30px;
}

footer h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 600;
}

footer form.grid {
    grid-template-columns: 2.1fr 1fr;
}

footer .footer-right a {
    color: var(--primary-color);
    margin-left: 20px;
}

footer .footer-right p a {
    margin-left: 0;
}

footer .footer-right p {
    font-size: 0.9rem;
    color: #999;
}

footer label.hs-error-msg {
    font-size: 12px;
    color: #F00;
}

.wpsm_panel-group span.fa.fa-angle-double-right {
    color: var(--primary-color);
}


/* HUBPOT Forms*/

.hbspt-form label {
    padding-bottom: 0px;
}

.hs-form-field input[type=text],
.hs-form-field input[type=email],
.hs-form-field input[type=phone],
.hs-form-field input[type=number],
.hs-form-field input[type=tel],
.hs-form-field input[type=date],
.hs-form-field textarea {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-clip: padding-box;
    padding: 10px 15px;
    border-bottom: none;
    border: 1px solid #cbd6e2;
}

.hs-input {
    display: inline-block;
    width: 90%;
    /* max-width: 500px;*/
    height: 40px;
    padding: 9px 10px;
    font-family: 'GalanoGrotesque-Regular', 'Lato', sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 22px;
    color: #33475b;
    border: 1px solid #cbd6e2;
    box-sizing: border-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

.actions {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 17px 0px;
}

footer .actions {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

.actions input[type=submit] {
    display: inline-block;
    padding: 10px 30px;
    cursor: pointer;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

ul.hs-error-msgs {
    padding-left: 0;
    margin-bottom: 0;
}

ul.hs-error-msgs label.hs-error-msg {
    padding: 0;
    color: #F00;
    padding: 0;
}

form#hsForm_0a18303b-1d5c-4b61-89ef-08ae9e2fb5da {
    display: flex;
}

@media (max-width: 768px) {
    form#hsForm_0a18303b-1d5c-4b61-89ef-08ae9e2fb5da {
        display: flex;
        flex-direction: column;
    }
}

form#hsForm_0a18303b-1d5c-4b61-89ef-08ae9e2fb5da .hs_submit {
    align-self: center;
}

form#hsForm_0a18303b-1d5c-4b61-89ef-08ae9e2fb5da .hs_email {
    width: 300px;
}

form#hsForm_29ee155d-bc5e-4d62-9f57-c6d926c50dd2 .hs_submit {
    margin-top: 32px;
}

.hbspt-form {
    margin-right: 50px;
}

@media (max-width: 768px) {
    form#hsForm_0a18303b-1d5c-4b61-89ef-08ae9e2fb5da .hs_email {
        width: 100%;
        margin-bottom: 24px;
    }
    .hbspt-form {
        margin-right: 0;
    }
}

@media (min-width: 1720px) {
    .where-we-are {
        background-size: cover;
    }
}


/* Tablets and under */


/* @media (max-width: 990px) {

  .services .grid-3, .industries ul, .technology-inner .grid-3{
      grid-template-columns: repeat(2, 1fr) !important;
  }

  .industries ul li{
      width: 100%;
  }

   .our-team .container{
    width: 65%;
  }

  .technology-inner-features img{
    display: none;
  }

  footer .footer-left .col:first-child{
    display: none;
  }
} */

@media (min-width: 960px) {
    /*.where-we-are
        background-size: cover;
    }*/
    .intro-text p {
        width: 85%;
        margin: 0 auto;
        text-align: center;
    }
    .hero.hero-contactcenter .hero-text p {
        padding-right: 20%;
    }
}

@media (min-width: 768px) {
    .our-team .container {
        width: 65%;
    }
}

@media only screen and (max-width: 980px) {
    .blog-inner .grid {
        display: flex !important;
    }
    .blog-sidebar {
        display: none !important;
    }
}


/*@media only screen and (max-width: 840px), (max-device-width: 980px){*/

@media only screen and (max-width: 768px) {
    p {
        font-size: 13px;
        margin: 10px 0 20px;
        line-height: 1.25rem;
    }
    /* option 2 */
    div br,
    .services .card p,
    .contactcenter.services-inner .card p {
        display: none;
    }
    nav {
        /* display: none;*/
    }
    .hero-img {
        display: none;
    }
    nav {
        position: fixed;
        z-index: 999;
        width: 66%;
        right: 0;
        top: 0;
        background: var(--primary-color);
        height: 100vh;
        padding: 1em;
        display: none;
    }
    nav.menu-btn {
        display: block;
    }
    .navbar nav ul>li {
        position: relative;
        width: 100%;
        text-align: right;
    }
    .navbar nav ul#primary-menu {
        margin-top: 5em;
    }
    .navbar nav ul#primary-menu>li:last-child a {
        color: #FFF;
    }
    .navbar nav a {
        display: inline-block;
        color: white;
        text-decoration: none;
        display: block;
        padding: 0;
        font-size: 1.2rem;
        text-align: right;
        margin-bottom: 20px;
        padding-bottom: 2px;
        border-bottom: 2px solid transparent;
    }
    .navbar .mobile-menu {
        display: block;
        width: 20px;
    }
    .navbar nav a:hover,
    .navbar nav li:last-child a:hover {
        /*border-bottom: 2px solid #FFF;*/
        border-bottom: 2px solid transparent;
        background: none;
    }
    .navbar nav li a {
        color: #FFF;
    }
    .btn:hover {
        transform: scale(1);
        border: none;
        border-radius: 0;
    }
    .navbar .mobile-menu-exit {
        display: block;
        width: 20px;
        float: right;
        margin: .5em;
    }
    .navbar .flex {
        justify-content: space-between;
    }
    .navbar ul {
        flex-direction: column;
        align-items: flex-end;
    }
    .hero {
        margin-bottom: 32px;
    }
    .hero,
    .hero .container.grid {
        overflow: visible;
        height: 100%;
    }
    .hero .hero-text p {
        padding: 0;
    }
    .hero p {
        padding: 0;
        margin: 10px 0 20px;
        line-height: 1.25rem;
        text-align: justify;
    }
    .hero .hero-text,
    .customer-experience .customer-experience-text {
        text-align: center;
    }
    .customer-experience .customer-experience-text p {
        padding: 0px;
    }
    .hero h1 {
        font-size: 1.8rem;
        margin-top: 30px;
        line-height: 2rem;
    }
    .customer-experience h2,
    .industries h2 {
        font-size: 1.8rem;
        margin-bottom: 24px;
    }
    .industries h2,
    .industries p {
        width: 95%;
        margin: 0 auto;
    }
    .services h4,
    .industries h4,
    .contactcenter.services-inner h4 {
        font-size: 1rem;
        line-height: 18px;
    }
    .hero .container.grid,
    .customer-experience .container.grid,
    .services .grid-3,
    .industries ul,
    .news .grid-3,
    .contactcenter .grid-3,
    .technology-inner .grid-2 {
        grid-template-columns: repeat(1, 1fr);
    }
    .industries {
        padding: 3rem 0 0;
    }
    .my-3 {
        margin: 2rem 0 0;
    }
    .industries h4 {
        font-size: 0.9rem;
        line-height: 18px;
        align-items: center;
        text-align: left;
        margin-left: 10px;
    }
    .industries h2 {
        width: 90%;
        margin-bottom: 24px;
    }
    .industries ul li img {
        width: 80px;
        align-items: flex-start;
        background: #f4f4f4;
        border-radius: 35px;
        padding: 20px;
    }
    .industries ul {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /*gap: 20px;*/
        width: 100%;
    }
    .industries ul>*+* {
        margin-left: 3rem;
        margin-bottom: 3rem;
    }
    /* option 1 */
    /*
  .industries ul li{
    background: none;
    background-color: #F4F5F8;
    border-radius: 60px;
    height: 90%;
    width: 90%;
    padding: 10px;
  }*/
    /* option 2*/
    .industries ul li {
        /* background: none;
    background-color: #F4F5F8;
    border-radius: 60px;*/
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        background: none;
        height: 90%;
        width: 90%;
        padding: 10px 0;
        margin: 0;
    }
    .industries ul li img {
        /*margin-bottom: 10px;*/
        margin: 0;
    }
    .industries h4 {
        color: var(--primary-color);
        padding: 10px 10px 0;
    }
    .services .card,
    .contactcenter.services-inner .card {
        display: flex;
        padding: 10px 20px;
        justify-content: space-between;
    }
    /*.services .grid-3{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    text-align: center;
  }*/
    .services .grid-3,
    .contactcenter.services-inner .grid-3 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        text-align: left;
    }
    .services .card>h4,
    .contactcenter.services-inner .card>h4 {
        width: 60%;
        order: 1;
        align-items: flex-start;
    }
    .services .card>img,
    .contactcenter.services-inner .card>img {
        width: 50px;
        order: 0;
        height: auto;
    }
    .services .card>a,
    .contactcenter.services-inner .card>a {
        order: 2;
        align-items: flex-end;
    }
    .news {
        padding: 0;
    }
    .news .grid.grid-3 {
        /*display: block;*/
        /* grid-template-columns: repeat(1, 1fr);*/
    }
    .news ul {
        padding: 2rem 0;
        /* gap: 40px; */
    }
    .news ul>*+* {
        margin: 0;
    }
    .news ul>li {
        justify-content: flex-start;
        height: auto;
        margin-bottom: 20px;
    }
    .news ul>li:nth-child(2) {
        /* flex-direction: column-reverse;*/
        flex-direction: column;
    }
    .our-team h2 {
        font-size: 2rem;
    }
    .pagination .pagination-text {
        background: #FFF;
        display: flex;
        align-items: center;
        height: 60px;
        width: 100%;
    }
    .pagination span {
        padding: 10px 20px;
    }
    .pagination a {
        font-size: .9rem;
        padding: 0;
        line-height: 1rem;
    }
    .our-team .container {
        width: 100%;
    }
    .where-we-are {
        /*background: url(img/aboutus-bg.jpg) bottom left no-repeat #f4f5f7;*/
        padding: 60px 0 36px;
    }
    .intro-text h2 {
        font-size: 2rem;
        margin-bottom: 24px;
        line-height: 2.4rem;
    }
    .intro-text p {
        width: 100%;
        text-align: justify;
    }
    .where-we-are ul.flex {
        justify-content: space-evenly;
        flex-direction: column;
    }
    .where-we-are ul li {
        width: 100%;
    }
    .your-team ul>li {
        width: 50%;
    }
    .our-culture .container.flex {
        justify-content: space-between;
        align-items: center;
        height: 100%;
        flex-direction: column;
    }
    .our-culture .container.flex img {
        width: 100%;
        order: 1;
    }
    .our-culture .container.flex .intro-text {
        align-items: center;
        margin: 32px 0 0;
    }
    .our-culture .container.flex .intro-text p {
        margin: 0 0 20px;
        text-align: justify;
        width: 100%;
    }
    .our-history p {
        width: 100%;
        text-align: center;
        line-height: 1.25rem;
        margin: 0 auto;
        padding: 0;
        margin: 10px 0 20px;
        text-align: justify;
        font-size: 13px;
    }
    .row .col-left {
        width: auto;
        margin-bottom: 24px;
    }
    .row .col-right {
        width: auto;
        text-align: center;
    }
    .row .col-right p {
        text-align: justify;
    }
    .row .col-left .solution-img {
        height: 250px;
        display: flex;
        flex-direction: column;
        width: auto;
    }
    h2,
    .solutions h2,
    .services-inner h2,
    .tier-list h2,
    .tatsu-wrap h2 {
        font-size: 1.8rem;
        color: var(--primary-color);
        font-family: 'GalanoGrotesque-Medium', 'Lato', sans-serif;
        font-weight: 900;
    }
    .xpartners.services-inner .grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .xpartners.services-inner .card h4 {
        font-size: 1rem;
        line-height: 1.25rem;
    }
    .xpartners.services-inner .card p {
        display: none;
    }
    .tier-list.our-history .container.grid {
        grid-template-columns: auto;
    }
    .tier-list.our-history .container.grid>div:first-child {
        width: auto;
        margin: 0;
        text-align: center;
    }
    .our-history .container.grid p {
        color: #333;
        text-align: justify;
    }
    .our-history .container.grid .flex>li>h3 {
        letter-spacing: 0;
        font-size: 1rem;
    }
    .tier-list.our-history .container.grid .flex>li>ul>li {
        list-style-type: disc;
        padding-left: 5px;
        color: var(--primary-color);
        font-size: .9rem;
        line-height: 1.25rem;
    }
    .tier-list.our-history .container.grid .bar {
        display: none;
    }
    .services-inner .card {
        padding: 10px 30px;
    }
    .services-inner .card img {
        height: 50px;
        width: auto;
    }
    .team-collage .container.flex {
        overflow: hidden;
        justify-content: space-between;
        flex-direction: column;
        /* gap: 10px;*/
        margin-bottom: 10px;
    }
    .team-collage .container.flex img {
        height: 100%;
        width: 100%;
        margin-bottom: 8px;
    }
    .grid-3 {
        grid-template-columns: repeat(1, 1fr);
    }
    .customer-experience h2,
    .industries h2,
    .our-team h2,
    .news h2,
    .jobs.jobs-inner h2 {
        font-size: 1.8rem;
    }
    .news ul>*+*,
    ul.insight-resources>*+* {
        margin: 0;
    }
    .hero.hero-customer-support p {
        text-align: center;
    }
    .resource-roles.grid {
        grid-template-columns: auto;
    }
    form#hsForm_29ee155d-bc5e-4d62-9f57-c6d926c50dd2 .hs_submit {
        margin-top: 32px;
        text-align: center;
    }
    .perks.services-inner ul li {
        width: 80%;
        padding-left: 40px;
    }
    .jobs-card.services-inner .card h4 {
        font-size: 1rem;
        letter-spacing: 1px;
        line-height: 1.25rem;
    }
    .card-inner {
        width: 100%;
        text-align: center;
    }
    .grid-4 {
        grid-template-columns: repeat(1, 1fr);
    }
    .partners ul li {
        width: 45%;
        margin-right: 10px;
    }
    .navbar nav ul>li>ul {
        flex-direction: column;
        align-items: flex-end;
        display: none;
    }
    .navbar nav li a {
        color: #FFF;
        padding: 10px 0;
        margin: 0 5px;
    }
    #primary-menu li.btn-orange a {
        margin-top: 20px;
    }
    .child-trigger {
        display: block !important;
        cursor: pointer;
        position: absolute;
        top: 0px;
        right: auto;
        left: 0;
        width: 55px !important;
        min-width: 55px !important;
        height: 45px !important;
        padding: 0 !important;
        border: 0;
    }
    .child-trigger i,
    .child-trigger i:after {
        width: 10px;
        height: 1px;
        background-color: #fff;
        display: block;
    }
    .child-trigger i:after {
        position: absolute;
        content: '';
    }
    .child-trigger i:after {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .child-trigger i {
        position: relative;
        top: 50%;
        margin: 0 auto !important;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }
    ul.sub-menu {
        background: #eee;
        padding: 10px;
    }
    ul.sub-menu li a {
        text-align: left;
        color: #333;
    }
    /*.navbar nav ul.mobilemenu li ul.sub-menu  {
     display: none;
   }*/
}


/*end @media (max-width: 768px)*/

.navbar {
    position: relative;
}

.navbar nav ul.menu li.has-dropdown>ul,
.navbar nav ul.menu li>ul.sub-menu {
    top: 40px;
}

.home-page-ad {
    background: #4B086D;
    height: 100px;
}

.home-page-ad img {
    height: 100%;
    width: auto;
}

.container-ad {
    max-width: 1140px;
    margin: 0 auto;
    overflow: hidden;
}

@media only screen and (max-width: 768px) {
    .home-page-ad {
        background: none;
        width: 100%;
        height: auto;
    }
    .container-ad {
        background: none;
        /* width: 768px;*/
        width: auto;
    }
    .home-page-ad img {
        height: 100%;
        width: 100vw;
    }
    .technology-inner-features .container.flex {
        flex-direction: column;
        row-gap: 30px;
    }
    .technology-inner-features .container.flex p:has(span) {
        text-align: center !important;
    }
    .technology-inner-features .container.flex ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px 40px;
        list-style: disc;
        margin-left: 0 !important;
    }
    .technology-inner-features iframe {
        width: 100%;
    }
    .technology-inner-features .container.flex .intro-text {
        margin-left: 0 !important;
    }
}

.tatsu-section-pad.tatsu-bg {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    background: var(--light-gray);
    margin-bottom: 100px;
    background: url(img/bg-mask3.svg) top left no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 50px;
}

.tatsu-section-pad .tatsu-bg-footer {
    content: '';
    position: absolute;
    height: 50px;
    right: 0;
    left: 0;
    background: url(img/bg-mask2.svg) bottom left no-repeat;
    width: 100%;
    background-size: cover;
    bottom: -50px;
}

img.clickable {
    cursor: pointer;
}

@media (min-width: 1500px) {
    .solutions::after,
    .services-inner::after {
        content: '';
        position: absolute;
        height: 50px;
        right: 0;
        left: 0;
        background: url(img/bg-mask2.svg) bottom left no-repeat;
        width: 100%;
        background-size: cover;
        bottom: -40px;
    }
}

@media (max-width: 768px) {
    .global-locations-ul {
        grid-template-columns: repeat(1, auto);
        padding: 1rem;
    }
}

@media (max-width: 568px) {
    footer .container.flex {
        flex-direction: column;
    }
    footer .footer-left h3 {
        text-align: center;
    }
    footer .footer-left .col {
        margin: 0 0 50px 0;
    }
    footer .footer-left .col:first-child {
        display: none;
    }
    footer .footer-right {
        text-align: center;
    }
    footer .footer-right a {
        margin: 0 20px;
    }
}

.industries.technology-inner ul {
    /* grid-template-columns: repeat(4, 1fr); */
    display: flex;
    grid-template-columns: auto;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    flex-wrap: wrap;
    gap: 10px;
}

.industries.technology-inner ul li {
    width: 32%;
    justify-content: flex-start;
}

.industries.technology-inner ul p {
    width: 100%;
    ;
}

.technology-inner ul li {
    background: none !important;
}

.technology-inner ul li p {
    font-size: .85rem;
    line-height: 1.5rem;
    margin: 14px 0;
}

.services-inner.technology-inner2 .card {
    grid-template-columns: 1fr !important;
}

.services-inner.technology-inner2 .card img {
    width: 3%;
    height: auto;
    margin-right: 10px;
    top: 3px;
    position: relative;
}


/* XCELERATE CLOUD */

.technology-inner-features ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    list-style: disc;
    margin-left: 30px;
}

.technology-inner-features .container.flex .intro-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    align-items: flex-start;
    margin-left: 30px;
    order: 2;
    height: 100%;
}

.technology-inner-features .container.flex .intro-text h2 {
    text-align: left;
}

.technology-inner-features .container.flex .intro-text p {
    text-align: left;
    width: 100%;
}

.technology-inner-features .container.flex .intro-text span {
    font-weight: 700;
}

.technology-inner-features .container.flex img {
    width: 50%;
    order: 1;
    padding-right: 1rem;
}

.technology-inner.technology-pricing ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(img/industries-li-bg-white.svg) no-repeat top center !important;
    background-size: 100% 100%;
    height: 225px;
    width: 90%;
    text-align: center;
    margin: 40px 0 0;
}

.technology-inner.technology-pricing ul li img {
    width: auto;
    text-align: center;
    margin: 0 auto 5px;
    height: 75px;
}

.technology-inner.technology-pricing h4 {
    font-size: 1rem;
    line-height: 20px;
    padding: 10px 30px 0;
    color: var(--primary-color);
    font-weight: 600;
}

.technology-inner .container.grid ol {
    font-size: 0.9rem;
    margin: 16px 0 32px 16px;
    line-height: 1.2rem;
}

.technology-inner hr {
    border: 1px solid #666;
}

.technology-container.resource-roles.grid {
    grid-template-columns: 50% auto;
}

.technology-container.resource-roles .hbspt-form {
    margin-left: 50px;
    margin-right: 50px;
}

@media only screen and (max-width: 768px) {
    .technology-inner-features .container.flex .intro-text p {
        text-align: center;
        width: 100%;
        margin: 0 0 10px;
    }
    .technology-container.resource-roles.grid {
        grid-template-columns: auto;
    }
}

.at-glance {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.at-glance ul {
    list-style-type: none;
    padding: 30px 30px;
}

.at-glance ul li {
    position: relative;
}

.at-glance ul li i.fas.fa-check {
    position: absolute;
    left: -40px;
    top: 5px;
    color: var(--primary-color);
}


/* END XCELERATE CLOUD */


/* BLUEWORX CLOUD */

.blueworx-bg {
    background-color: #3b86ff;
}

.blueworx-bg h3,
.blueworx-bg h4 {
    color: #FFF;
    margin-bottom: 3rem;
}

.blueworx-bg .btn.cta {
    background: #3b86ff;
    border: 2px solid #FFF;
    font-weight: 700;
}


/* END BLUEWORX CLOUD */


/* BLUEWORX CLOUD > REQUEST A FREE TRIAL  */

.page-id-5139 .technology-inner-features .intro-text h2,
.page-id-5234 .technology-inner-features .intro-text h2 {
    font-size: 1.5rem;
}

.page-id-5139 .technology-inner-features ul,
.page-id-5234 .technology-inner-features ul {
    display: block;
}

.page-id-5139 .try-blueworx .grid-2 h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 700;
}

.page-id-5139 .try-blueworx .grid-2 ul {
    margin: 1rem 0;
}

.page-id-5139 .try-blueworx .grid-2 ul li {
    font-size: 0.9rem;
    margin-left: 16px;
}

.page-id-5139 .try-blueworx .grid-2 ul li a {
    text-decoration: underline;
}

.page-id-5139 .try-blueworx .grid-2 ul li i {
    font-size: 1.2rem;
    padding-right: 20px;
    color: var(--primary-color);
}

.page-id-5139 .try-blueworx .grid-2 p {
    font-size: 1rem;
    line-height: 1.5rem;
}


/* END BLUEWORX CLOUD > REQUEST A FREE TRIAL  */


/* PRODUCTS */

.product-container .row .col-left .solution-img {
    background: none;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    mask-image: none;
    -webkit-mask-image: none;
}

.product-container .row {
    justify-content: space-between;
}

.product-container .row .col-left .solution-img {
    width: 100%;
}


/* END PRODUCTS */

.container-changelog .flex {
    justify-content: left !important;
    width: 100% !important;
}

.container-changelog .row {
    padding-bottom: 30px;
    border-bottom: 1px solid #DDD;
}

.container-changelog .row h5 {
    color: var(--primary-color);
    font-weight: 600;
}

.container-changelog .changelog-icon {
    width: 60px;
    height: auto;
    float: left;
    margin-right: 20px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex: none;
}

.container-changelog ul {
    list-style-type: circle;
    padding-left: 1.8em;
    width: 100%;
}

section#sec-newsform {
    position: relative;
    height: 350px;
    margin-top: 100px;
}

#sec-newsform .container {
    background: #1F3D7A;
    padding: 0;
    width: 100%;
    position: absolute;
    top: -40px;
    left: 0;
    margin: 0 auto;
    right: 0;
    border-radius: 20px;
}

#sec-newsform h2 {
    font-size: 2.3rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

#sec-newsform .container .col {
    background: #1F3D7A;
    padding: 50px 100px;
    top: 0;
    left: 0;
    min-height: 300px;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#sec-newsform .container .col h2 {
    color: #FFF;
}

#sec-newsform .container p {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 2rem;
}

#sec-newsform .container .hbspt-form {
    margin-right: 0;
}

#sec-newsform .container .hbspt-form form {
    display: flex;
    justify-content: center;
}

#sec-newsform .actions {
    margin: 0;
    padding: 0;
}

#sec-newsform .hs-input {
    width: 100%;
}

#sec-newsform .hs-form-field label {
    display: none;
}

#sec-newsform .hs-form-field input[type=email] {
    -webkit-border-radius: 30px 0 0 30px;
    -moz-border-radius: 30px 0 0 30px;
    border-radius: 30px 0 0 30px;
    padding: 0 30px !important;
    height: 40px;
}

#sec-newsform .hs-form-field input[type=email]:focus,
#sec-newsform .actions input[type=submit]:focus {
    outline: none;
}

#sec-newsform .actions input[type=submit] {
    -webkit-border-radius: 0 30px 30px 0;
    -moz-border-radius: 0 30px 30px 0;
    border-radius: 0 30px 30px 0;
    padding: 0 45px !important;
    height: 40px;
}

#sec-newsform ul.hs-error-msgs {
    padding-left: 0;
    margin-bottom: 0;
    position: absolute;
    width: 100%;
    z-index: 999;
    text-align: right;
    font-size: 10px;
    right: 0;
    left: 0;
    text-align: center;
    margin: 3rem auto;
}

@media only screen and (max-width: 768px) {
    #sec-newsform {
        position: relative;
        height: 100% !important;
        margin: 50px 0 !important;
    }
    #sec-newsform h2 {
        font-size: 1.8rem;
    }
    #sec-newsform p {
        font-size: 13px !important;
    }
    #sec-newsform .container {
        border-radius: 0;
        position: relative;
        top: 0;
    }
    #sec-newsform .container .col {
        min-height: 300px;
        padding: 20px 50px;
    }
    #sec-newsform .actions input[type=submit],
    #sec-newsform .hs-form-field input[type=email] {
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
    }
    #sec-newsform .container .hbspt-form form {
        display: grid;
        gap: 20px;
        align-self: center;
        text-align: center;
    }
    #sec-newsform ul.hs-error-msgs {
        margin: 0;
        bottom: 60px;
    }
}

.light-bg {
    background: var(--light-gray);
    margin-bottom: 0;
    background: url(img/bg_stacked_wave.svg) top left no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

@media only screen and (max-width: 768px) {
    .light-bg .intro-text p {
        text-align: left;
    }
    .light-bg {
        background: url(img/bg_stacked_wave.svg) top center no-repeat;
    }
}

.span-1 {
    color: #008fbf;
    font-size: 14px;
}

.intro-text p {
    font-size: 18px !important;
    line-height: 26px;
}