.header {
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.5);
  height: 56px;
  padding: .5rem; }
  .header .logo {
    float: left;
    padding: 5px 0; }
    .header .logo a {
      display: block; }
      .header .logo a img {
        height: 30px; }
  .header .nav_main .nav-trig {
    display: none;
    cursor: pointer; }
  .header .nav_main .nav {
    justify-content: flex-end; }
    .header .nav_main .nav .nav-item .nav-link {
      color: rgba(0, 0, 0, 0.5);
      font-family: Roboto, sans-serif; }
      .header .nav_main .nav .nav-item .nav-link.active {
        color: #E89621; }
  .header.home {
    background: transparent;
    position: absolute;
    left: 0;
    right: 0;
    box-shadow: none; }
    .header.home .logo {
      display: none; }
    .header.home .nav_main .nav-trig svg {
      fill: #fff; }
    .header.home .nav .nav-item .nav-link {
      color: #fff;
      font-weight: 300; }

body.open {
  overflow: hidden; }
  body.open .header {
    background: #fff; }
    body.open .header .logo {
      display: block; }
    body.open .header .nav_main .nav-item {
      margin: 2rem 0; }
      body.open .header .nav_main .nav-item .nav-link {
        color: #fff;
        text-align: center;
        font-size: 24pt;
        font-weight: 300; }

@media (max-width: 767.98px) {
  .header .nav_main .nav-trig {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 15px;
    padding: 9px 3px 0 3px; }
    .header .nav_main .nav-trig svg {
      fill: rgba(0, 0, 0, 0.5); }
  .header .nav_main .nav {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 55px;
    background: linear-gradient(135deg, #00B0D1 0%, #0880CB 100%);
    height: 100vh;
    z-index: 1; }
    .header .nav_main .nav .nav-item .nav-link {
      padding: .7rem 1rem; }
  .header .logo a img {
    height: 24px; }

  body.open .header .nav_main .nav-trig {
    background-image: url(/assets/svg/close.svg);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2; }
    body.open .header .nav_main .nav-trig svg {
      display: none; }
  body.open .header .nav_main .nav {
    display: block; } }
body {
  font-family: Roboto, sans-serif; }

p {
  font-size: 17px;
  letter-spacing: 1px;
  font-weight: 300; }

h1 {
  font-size: 57px; }

.HowWeWork  .section-title {
    margin: 3rem 10rem 2rem; }

.section-title {
  margin: 3rem 8rem 5rem; }
  .section-title h2 {
    font-size: 48px; }
  .section-title h3 {
    font-size: 32px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.5); }
  .section-title h5 {
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 24px; }

    h5.largeSubHeaderText {
      font-weight: 300;
      letter-spacing: 1px;
      font-size: 24px; }

  .section-title p {
    margin-top: 1rem; }
  .section-title .icon {
    margin-bottom: 2rem; }
    .section-title .icon img {
      width: 120px; }

.btn-primary {
  background: linear-gradient(135deg, #FCD200 0%, #FF8900 100%);
  box-shadow: 0 4px 8px 0 rgba(137, 74, 0, 0.2);
  border: #f5a94c solid 1px;
  border-radius: 2rem !important;
  width: 200px;
  height: 40px;
  font-size: 17px; }
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(35deg, #ddc23d 0%, #FF8900 100%);
    border: #f5a94c solid 1px; }

.btn-secondary {
  background: linear-gradient(135deg, #00d5d7 0%, #00b0d1 100%);
  box-shadow: 0 4px 8px 0 rgba(137, 74, 0, 0.2);
  border: #5cdbe6 solid 1px;
  border-radius: 2rem !important;
  width: 200px;
  height: 40px;
  font-size: 17px; }
  .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background: linear-gradient(35deg, #00b0d1 0%, #00d5d7 100%) !important;
    border: #5cdbe6 solid 1px !important; }

.shadow {
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.5); }

@media (max-width: 991.98px) {
  .section-title {
    margin: 2rem 0rem 3rem; }
    .HowWeWork  .section-title {
      margin: 2rem 0rem 3rem; }

    .section-title h2 {
      font-size: 36px; }
    .section-title .icon img {
      width: 100px; } }
@media (max-width: 767.98px) {
  h1 {
    font-size: 42px; }

  p {
    font-size: 15px; }

  .section-title h5 {
    font-size: 17px;
    line-height: 24px; }

    h5.largeSubHeaderText{
      font-size: 17px;
      line-height: 24px; }

  .section-title h3 {
    font-size: 24px; }
  .section-title h2 {
    font-size: 36px;
    line-height: 40px; }
  .section-title .icon img {
    width: 60px; }

  .shadow .section-title h5 {
    color: rgba(0, 0, 0, 0.5); }

  .shadow .section-title h2 {
    color: rgba(0, 0, 0, 0.7); } }
.together {
  background-image: url(../../assets/photos/about_hero@2x.jpg);
  background-size: cover;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-position: top;
  background-attachment: fixed;
  color: #fff; }
  .together .stacks {
    margin-bottom: 3rem; }
    .together .stacks .stacks-item {
      float: left;
      width: 60%; }
      .together .stacks .stacks-item .stacks-img {
        float: left;
        width: 200px;
        height: 200px;
        line-height: 200px;
        border: 15px solid rgba(52, 117, 152, 0.65);
        display: flex;
        align-items: center;
        justify-content: center; }
        .together .stacks .stacks-item .stacks-img img {
          width: 100px; }
      .together .stacks .stacks-item .stacks-desc {
        background: rgba(52, 117, 152, 0.65);
        text-align: left;
        height: 200px; }
        .together .stacks .stacks-item .stacks-desc h4 {
          color: #FF8B00;
          font-weight: 400; }
      .together .stacks .stacks-item.first .stacks-img {
        border-radius: .6rem 0 0 .6rem; }
      .together .stacks .stacks-item.first .stacks-desc {
        margin-left: 200px;
        border-radius: 0 .6rem .6rem 0;
        padding: 20px 30px 20px 5px; }
      .together .stacks .stacks-item.second {
        float: right;
        margin: -20px 0; }
        .together .stacks .stacks-item.second .stacks-img {
          border-radius: 0 .6rem .6rem 0;
          float: right; }
        .together .stacks .stacks-item.second .stacks-desc {
          margin-right: 200px;
          border-radius: .6rem 0 0 .6rem;
          padding: 20px 5px 20px 30px;
          text-align: right; }
      .together .stacks .stacks-item.third {
        margin-left: 100px; }
        .together .stacks .stacks-item.third .stacks-img {
          border-radius: .6rem 0 0 .6rem; }
        .together .stacks .stacks-item.third .stacks-desc {
          margin-left: 200px;
          border-radius: 0 .6rem .6rem 0;
          padding: 20px 30px 20px 5px; }

.givemore {
  background-image: url(../../assets/photos/about_give@2x.jpg);
  background-size: cover;
  text-align: center;
  padding-top: 3rem;
  background-position: top;
  background-attachment: fixed;
  padding-bottom: 3rem;
  color: #fff; }
  .givemore .stacks {
    margin-bottom: 3rem; }
    .givemore .stacks .stacks-item {
      float: left;
      width: 60%; }
      .givemore .stacks .stacks-item .stacks-img {
        float: left;
        width: 200px;
        height: 200px;
        line-height: 200px;
        border: 15px solid rgba(0, 81, 121, 0.7);
        display: flex;
        align-items: center;
        justify-content: center; }
        .givemore .stacks .stacks-item .stacks-img img {
          width: 100px; }
      .givemore .stacks .stacks-item .stacks-desc {
        background: rgba(0, 81, 121, 0.7);
        text-align: left;
        height: 200px; }
        .givemore .stacks .stacks-item .stacks-desc h4 {
          color: #f28c3c;
          font-weight: 400; }
      .givemore .stacks .stacks-item.first .stacks-img {
        border-radius: .6rem 0 0 .6rem; }
      .givemore .stacks .stacks-item.first .stacks-desc {
        margin-left: 200px;
        border-radius: 0 .6rem .6rem 0;
        padding: 20px 30px 20px 5px; }
      .givemore .stacks .stacks-item.second {
        float: right;
        margin: -20px 0; }
        .givemore .stacks .stacks-item.second .stacks-img {
          border-radius: 0 .6rem .6rem 0;
          float: right; }
        .givemore .stacks .stacks-item.second .stacks-desc {
          margin-right: 200px;
          border-radius: .6rem 0 0 .6rem;
          padding: 20px 5px 20px 30px;
          text-align: right; }
      .givemore .stacks .stacks-item.third {
        margin-left: 100px; }
        .givemore .stacks .stacks-item.third .stacks-img {
          border-radius: .6rem 0 0 .6rem; }
        .givemore .stacks .stacks-item.third .stacks-desc {
          margin-left: 200px;
          border-radius: 0 .6rem .6rem 0;
          padding: 20px 30px 20px 5px; }

.process {
  text-align: center;
  padding: 3rem 0; }
  .process .step-wrap {
    margin: 0 auto;
    max-width: 1000px; }
    .process .step-wrap .step {
      width: 20%; }
      .process .step-wrap .step img {
        max-width: 100%; }
      .process .step-wrap .step h4 {
        display: none; }
      .process .step-wrap .step p {
        padding: 15px;
        line-height: 17px; }

.technical {
  text-align: center;
  padding: 3rem; }
  .technical .platforms {
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
}
    .technical .platforms li {
      float: left;
      width: calc(100%/8); }
      .technical .platforms li img {
        max-width: 100%; }

        .technical .platforms li img:hover {
          border: 0px;
          box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.1);
          position: relative;
          z-index: 100;
          transform: translate(0, -8px);
        }

        .technical .platforms-other li div:hover {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

  .technical .platforms-other li {
    padding: 1rem;
    list-style: none; }
    .technical .platforms-other li div {
      box-shadow: 0 0 24px 0 rgba(15, 161, 173, 0.1);
      padding: .6rem 1rem;
      white-space: nowrap;
      border-radius: 8px;
      color: #0880cb;
      font-size: 17px; 
      background-color: aliceblue;
      font-weight: 600;
      /* background-image: url(/media/1322/orange-circle-bullet.png); */
      background-repeat: no-repeat;
      background-position: 7px 14px;
      padding-left: 20px;
      font-size: 0.93rem;
      line-height: 1.3;
      border: 1px solid #0880cb;
    }

.author {
  background-image: url(../../assets/photos/about_ray@2x.jpg);
  background-size: cover;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #fff;
  background-position: center; }
  .author .avtar img {
    max-width: 160px; }

@media (max-width: 1199.98px) {
  .together .stacks .stacks-item {
    float: left;
    width: 75%; }

  .givemore .stacks .stacks-item {
    width: 75%; }
    .givemore .stacks .stacks-item.second {
      margin: -10px 0; } }
@media (max-width: 991.98px) {
  .together .stacks .stacks-item {
    width: 85%; }
    .together .stacks .stacks-item.second {
      margin: -8px 0; }
    .together .stacks .stacks-item .stacks-desc p {
      font-size: 15px; }
    .together .stacks .stacks-item.third {
      margin-left: 0; }

  .givemore .stacks .stacks-item {
    width: 85%; }
    .givemore .stacks .stacks-item.second {
      margin: -8px 0; }
    .givemore .stacks .stacks-item .stacks-desc p {
      font-size: 15px; }
    .givemore .stacks .stacks-item.third {
      margin-left: 0; }

  .technical .platforms-other {
    padding: 0 15px;
    list-style: none; }

  .process .step-wrap .step p {
    padding: 10px;
    line-height: 1;
    font-size: 15px; } }
@media (max-width: 767.98px) {
  .together {
    padding-bottom: .1rem;
    padding-top: 2rem; }
    .together .stacks .stacks-item {
      width: 100%;
      float: none; }
      .together .stacks .stacks-item .stacks-img {
        width: 100%;
        float: none; }
        .together .stacks .stacks-item .stacks-img img {
          width: 120px; }
      .together .stacks .stacks-item.first .stacks-img, .together .stacks .stacks-item.third .stacks-img {
        border-radius: .6rem .6rem 0 0; }
      .together .stacks .stacks-item.first .stacks-desc, .together .stacks .stacks-item.third .stacks-desc {
        margin-left: 0;
        border-radius: 0 0 .6rem .6rem;
        padding: 5px 30px 20px 30px;
        height: auto;
        text-align: center; }
        .together .stacks .stacks-item.first .stacks-desc p, .together .stacks .stacks-item.third .stacks-desc p {
          font-size: 15px;
          line-height: 17px; }
      .together .stacks .stacks-item.second {
        margin: 15px 0;
        float: none; }
        .together .stacks .stacks-item.second .stacks-img {
          border-radius: .6rem .6rem 0 0;
          float: none; }
        .together .stacks .stacks-item.second .stacks-desc {
          margin-right: 0;
          border-radius: 0 0 .6rem .6rem;
          padding: 5px 30px 20px 30px;
          height: auto;
          text-align: center; }

  .givemore {
    padding-bottom: .1rem; }
    .givemore .stacks .stacks-item {
      width: 100%;
      float: none; }
      .givemore .stacks .stacks-item .stacks-img {
        width: 100%;
        float: none; }
      .givemore .stacks .stacks-item.first .stacks-img, .givemore .stacks .stacks-item.third .stacks-img {
        border-radius: .6rem .6rem 0 0; }
      .givemore .stacks .stacks-item.first .stacks-desc, .givemore .stacks .stacks-item.third .stacks-desc {
        margin-left: 0;
        border-radius: 0 0 .6rem .6rem;
        padding: 5px 30px 20px 30px;
        height: auto;
        text-align: center; }
        .givemore .stacks .stacks-item.first .stacks-desc p, .givemore .stacks .stacks-item.third .stacks-desc p {
          font-size: 15px;
          line-height: 17px; }
      .givemore .stacks .stacks-item.second {
        margin: 15px 0;
        float: none; }
        .givemore .stacks .stacks-item.second .stacks-img {
          border-radius: .6rem .6rem 0 0;
          float: none; }
        .givemore .stacks .stacks-item.second .stacks-desc {
          margin-right: 0;
          border-radius: 0 0 .6rem .6rem;
          padding: 5px 30px 20px 30px;
          height: auto;
          text-align: center; }

  .process .step-wrap .step {
    width: 100%;
    position: relative;
    margin-bottom: 2rem;
    padding: 2.5rem 1rem 1rem; }
    .process .step-wrap .step h4, .process .step-wrap .step p {
      position: relative; }
    .process .step-wrap .step h4 {
      color: #fff;
      display: block; }
    .process .step-wrap .step p {
      font-size: 17px;
      padding: 0 20px; }
    .process .step-wrap .step img {
      display: none; }
    .process .step-wrap .step:before {
      position: absolute;
      content: "";
      background: linear-gradient(-10deg, #4fcb9b 0%, #0fd3cd 100%);
      left: 0;
      width: 50%;
      top: 0;
      bottom: 0;
      transform: skewY(10deg); }
    .process .step-wrap .step:after {
      position: absolute;
      content: "";
      background: linear-gradient(10deg, #4fcb9b 0%, #0fd3cd 100%);
      right: 0;
      width: 50%;
      top: 0;
      bottom: 0;
      z-index: -1;
      transform: skewY(-10deg); }
    .process .step-wrap .step.plan:before {
      background: linear-gradient(-10deg, #96c877 0%, #4fcb9b 100%); }
    .process .step-wrap .step.plan:after {
      background: linear-gradient(10deg, #96c877 0%, #4fcb9b 100%); }
    .process .step-wrap .step.develop:before {
      background: linear-gradient(-10deg, #c9c14a 0%, #96c877 100%); }
    .process .step-wrap .step.develop:after {
      background: linear-gradient(10deg, #c9c14a 0%, #96c877 100%); }
    .process .step-wrap .step.implement:before {
      background: linear-gradient(-10deg, #fac33e 0%, #c9c14a 100%); }
    .process .step-wrap .step.implement:after {
      background: linear-gradient(10deg, #fac33e 0%, #c9c14a 100%); }
    .process .step-wrap .step.maintain:before {
      background: linear-gradient(-10deg, #ffb30a 0%, #fac33e 100%); }
    .process .step-wrap .step.maintain:after {
      background: linear-gradient(10deg, #ffb30a 0%, #fac33e 100%); }

  .technical {
    padding: 1rem 0; }
    .technical .platforms li {
      width: calc(100%/3); }

  .author {
    padding-top: 1rem;
    padding-bottom: 1rem; }
    .author .avtar img {
      max-width: 80px; } }
.footer {
  background: linear-gradient(to right, #00AFD1, #0881CB);
  text-align: center;
  padding: 3rem 0;
  color: #fff;
  font-family: Roboto, sans-serif; }
  .footer .icon {
    margin-bottom: 1rem; }
    .footer .icon img {
      height: 40px;
      opacity: .5; }
  .footer p {
    font-size: .9rem;
    margin: 0; }
  .footer .br:after {
    content: "";
    position: absolute;
    width: 1px;
    right: -1px;
    height: 60px;
    top: 50%;
    margin-top: -30px;
    background: #8acbec; }

@media (max-width: 767.98px) {
  .footer {
    padding: 1rem 0; }
    .footer .br:after {
      display: none; }
    .footer p {
      margin-bottom: .6rem;
      display: inline-block;
      margin-top: .6rem; }
    .footer .icon {
      display: inline; }
      .footer .icon img {
        max-width: 24px;
        max-height: 24px; } }




     .scrollReveal-notVisible {
opacity: 0;
-webkit-transform: translateY(60px);
transform: translateY(60px)
}

.scrollReveal-isVisible {
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.scrollReveal {
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
  transition: opacity 0.6s, transform 0.6s, -webkit-transform 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.55, 0.09, 0, 0.99);
  transition-timing-function: cubic-bezier(0.55, 0.09, 0, 0.99);
}

.services {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  margin-top: -40px;
}

@media (min-width: 1357px){
  .services {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -44px;
  }
}

.services-group {
  width: calc(25% - 25px);
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 40px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
  transition: all 0.3s ease 0s;
}

.services-group:hover {
 border: 0px;
 box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.1);
 position: relative;
 z-index: 100;
 transform: translate(0, -5px);
}

@media (min-width: 1357px){
  .services-group {
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 44px;
  }
}


@media (max-width: 641px) {
.services-group {
  width: 100%;
  margin-left: 15px;
  margin-right: 15px
}
}

@media (max-width: 1004px) {
.services-group {
  width: calc(50% - 27px)
}
}

@media (max-width: 641px) {
.services-group {
  width: 100%
}
}

.services-heading {
  background-color: #0881CB;
  color: #fed8b1;
  font-size: 22px;
  line-height: 1.25;
  font-family: 'Avenir LT W01_45 Book1475508', Arial, sans-serif;
  padding: 8px 4px;
  text-align: center;
  font-weight: 600;
  padding: 17px;
}

.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

      
.services-list li {
font-size: 0.93rem;
list-style-type: none;
padding: 8px 0;
color: #6d6f71;
background-image: url(/media/1330/bullet-orange.jpg);
background-repeat: no-repeat;
padding-left: 27px;
background-position: 9px 20px;
}

.how-wrapper .how-content,
.how-wrapper .how-image {
position: relative;
  top: 2px;
  text-align: center;
}

.how .how-navigation {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px 0;
  margin-bottom: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}



.how-wrapper.how-wrapper--active {
display: block
}

.how-wrapper.how-wrapper--active .how-content,
.how-wrapper.how-wrapper--active .how-image, .cd-h-timeline__event--selected > h3 {
-webkit-animation-name: howFadeIn;
animation-name: howFadeIn;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}

/* .how-wrapper.how-wrapper--active .how-image {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s
} */

.how .how-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
margin-top: -40px
}

@media (min-width: 1357px) {
.how .how-inner {
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -44px
}
}

.how .how-content {
width: calc(66.66% - 30px);
margin-left: 15px;
margin-right: 15px;
margin-top: 40px
}

@media (min-width: 1357px) {
.how .how-content {
  width: calc(66.66% - 40px);
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 44px
}
}

@media (max-width: 641px) {
.how .how-content {
  width: 100%;
  margin-left: 15px;
  margin-right: 15px
}
}

.how .how-image {
width: calc(33.333% - 30px);
margin-left: 15px;
margin-right: 15px;
margin-top: 25px;
margin-bottom: 15px;
}

@media (min-width: 1357px) {
.how .how-image {
  width: calc(33.333% - 40px);
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 25px;
  margin-bottom: 15px;
}
}

@media (max-width: 641px) {
.how .how-image {
  width: 100%;
  margin-left: 15px;
  margin-right: 15px
}
}

.how .how-image img {
margin: 0 auto
}

.how .how-items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
margin-top: -40px
}

@media (min-width: 1357px) {
.how .how-items {
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -44px
}
}

.how .how-item {
width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px;
margin-top: 40px;
margin-bottom: -8px
}

@media (min-width: 1357px) {
.how .how-item {
  width: calc(50% - 40px);
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 44px
}
}

@media (max-width: 641px) {
.how .how-item {
  width: 100%;
  margin-left: 15px;
  margin-right: 15px
}
}

.how .how-heading {
font-size: 1.25rem;
line-height: 1.25;
font-family: 'Avenir LT W01_45 Book1475508', Arial, sans-serif;
margin: 0 0 8px 0
}

.how .how-description {
font-size: 0.93rem;
line-height: 1.3;
opacity: 0.6;
margin: 0 0 8px 0
}

.how .how-navigation {
list-style: none;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 15px 0;
margin-bottom: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}

.how .how-navigation li {
width: 20%;
position: relative;
text-align: center
}

.how .how-navigation li:before {
content: "";
position: absolute;
bottom: 10px;
z-index: 2;
background-color: #009cff;
height: 2px;
left: 0;
right: 0
}

.how .how-navigation li.active a span:after {
display: block
}

.how .how-navigation li a {
display: inline-block;
margin: 0 auto;
color: #000;
padding-bottom: 25px;
text-decoration: none
}


.how .how-navigation li a span:before {
content: "";
position: absolute;
bottom: 5px;
z-index: 4;
width: 13px;
height: 13px;
background-color: orange;
border-radius: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}

/* 
.how .how-navigation li a:hover span:after {
display: block
} */

.how .how-navigation li a span:after {
display: block;
content: "";
position: absolute;
bottom: -1px;
z-index: 3;
width: 21px;
height: 21px;
border: solid 2px orange;
background-color: #fff;
border-radius: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}

.how .how-navigation li a{
  cursor: default;
}

@media (max-width: 767.98px){
  .how .how-navigation li a {
      font-size: 12px;
  }
}

.letus {
  text-align: center;
  padding: 3rem 0;
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
  color: #fff;
}



.nav-tabs {
  border-bottom: 0px !important;
}

.nav {
  -ms-flex-wrap: unset !important;
  flex-wrap: unset !important;
}


.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #007bff;
  background-color: aliceblue !important;
  border-color: #dee2e6 #dee2e6 #fff;
}

@media (max-width: 767.98px){
  
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
      border-color: orange orange #fff;
  }
}


.servidedetail, .HowWeWork, .getInTouch {
text-align: center;
padding: 3rem 10px; 
}

.HowWeWork, .technical, .getInTouch  {
border-top: 1px solid lightgray;
}

.HowWeWork  {
background: #f7f7f7f9;
}

.lightshadow {
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.3);
}


@keyframes howFadeIn{0%{opacity:0;top:50px}100%{opacity:1;top:0px}}

h5.largeSubHeaderText, h5.largeSubHeaderText p {
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 24px;
}

.largeSubHeaderText ul {
  list-style: none;
}