.blue {
  background-color: blue; }

.red {
  color: red; }

.yellow {
  background-color: yellow; }
  
  .black{
      color: black;
  }

.login-ghost-button {
  margin-top: 10vh;
  float: right;
  display: inline-block !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  color: #FFFFFF !important;
  border: 0.1rem solid #FFFFFF !important;
  border-radius: 0.3rem !important;
  padding: 0.5rem 0.6rem !important;
  -webkit-transition: color 300ms, background 300ms !important;
  -o-transition: color 300ms, background 300ms !important;
  transition: color 300ms, background 300ms !important; }
  .login-ghost-button i {
    color: #FFFFFF; }
  .login-ghost-button:hover {
    background: #0078D7 !important;
    color: #FFFFFF !important; }

.hero-contact-button {
  margin-top: 10vh;
  display: inline-block !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 1rem !important;
  color: #FFFFFF !important;
  border: 3px solid #FFFFFF !important;
  border-radius: 10px !important;
  padding: 0.5rem 3rem !important;
  -webkit-transition: color 300ms, background 300ms, padding 300ms !important;
  -o-transition: color 300ms, background 300ms, padding 300ms !important;
  transition: color 300ms, background 300ms, padding 300ms !important; }
  .hero-contact-button p {
    margin-top: 0.75rem; }
  .hero-contact-button:hover {
    background: #FFFFFF !important;
    color: #0078D7 !important;
    padding: 1rem 3rem !important; }

.hero-trial-button {
  display: inline-block !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 1rem !important;
  color: #FFFFFF !important;
  border: 3px solid #FFFFFF !important;
  border-radius: 10px !important;
  padding: 0.5rem 3rem !important;
  -webkit-transition: color 300ms, background 300ms, padding 300ms !important;
  -o-transition: color 300ms, background 300ms, padding 300ms !important;
  transition: color 300ms, background 300ms, padding 300ms !important; }
  .hero-trial-button p {
    margin-top: 0.75rem; }
  .hero-trial-button:hover {
    background: #FFFFFF !important;
    color: #01C485 !important;
    padding: 1rem 3rem !important; }

.index-contact-button {
  display: inline-block !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  background: #0078D7 !important;
  font-size: 1rem !important;
  color: #FFFFFF !important;
  border: 3px solid #0078D7 !important;
  border-radius: 100px !important;
  padding: 1rem 3rem !important;
  -webkit-transition: color 300ms, background 300ms, padding 300ms !important;
  -o-transition: color 300ms, background 300ms, padding 300ms !important;
  transition: color 300ms, background 300ms, padding 300ms !important; }
  .index-contact-button p {
    margin-top: 0.75rem; }
  .index-contact-button:hover {
    background: #01C485 !important;
    color: #FFFFFF !important;
    padding: 1rem 4rem !important; }

.nav-contact-button {
  margin-top: 0.75rem;
  display: inline-block !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  background: #FFFFFF !important;
  font-size: 0.6rem !important;
  color: #0078D7 !important;
  border: 0.1875rem solid #0078D7 !important;
  border-radius: 3px !important;
  padding: 0.1rem 0.1rem !important;
  -webkit-transition: color 300ms, background 300ms, padding 300ms !important;
  -o-transition: color 300ms, background 300ms, padding 300ms !important;
  transition: color 300ms, background 300ms, padding 300ms !important; }
  .nav-contact-button a {
    color: #0078D7 !important; }
  .nav-contact-button:hover {
    background: #FFFFFF !important;
    color: #FFFFFF !important;
    padding: 0.1rem 0.1rem !important; }

section {
  padding: 1.25rem 0; }

.antispam {
  display: none; }

nav {
  height: 4.5rem;
  background-color: #FFFFFF; }

.menu a {
  color: #494C55;
  font-size: 1.125rem;
  font-weight: 300; }

.menu li {
  padding-top: 1.125rem; }

.menu a:hover {
  color: #0078D7; }

.logo {
  margin-top: 0.75rem; }

nav i {
  padding-top: 0; }

.facebook i {
  color: #3B5998; }

.twitter i {
  color: #55ACEE; }

.linkedin i {
  color: #007BB5; }

.instagram i {
  color: #125688; }

.pinterest i {
  color: #CB2027; }

.is-stuck {
  background-color: white;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75); }

.selected-side {
  font-weight: 700; }

.selected {
  border-bottom: 2px solid #0078D7; }

.contact-explode {
  background-color: #01C485; }
  .contact-explode a {
    color: #FFFFFF; }

#hero {
  /*background-size: cover;*/
  position: relative;
  background-position: center;
  background-size: auto;
  max-height: calc(100vh - 70px); 
    
}
  #hero i {
    padding: 0 !important; }
  @media screen and (max-width: 39.9375em) {
    #hero {
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url(../img/interchange/hero_small.png);
      background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/interchange/hero_small.png);
      background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/interchange/hero_small.png);
      background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/interchange/hero_small.png); }
      #hero .hero-button-small-text {
        font-size: 0.875rem; }
      #hero .hero-button-big-text {
        font-size: 1.25rem;
        font-weight: 700; } }
  @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    #hero {
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url(../img/interchange/hero_medium.png);
      background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/interchange/hero_medium.png);
      background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/interchange/hero_medium.png);
      background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/interchange/hero_medium.png); } }
  @media screen and (min-width: 64em) {
    #hero {
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url(../img/interchange/hero_large.png);
      background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/interchange/hero_large.png);
      background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/interchange/hero_large.png);
      background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/interchange/hero_large.png); } }
  #hero .button {
    margin-top: 10vh;
    border-radius: 5px;
    border: 0.125rem solid #FFFFFF;
    padding: 0.3125rem 0.9375rem; }
    #hero .button p {
      padding: 0;
      margin: 0; }
    #hero .button i {
      color: #FFFFFF;
      height: 2.5rem;
      padding: 0 !important; }

.hero-button-small-text {
  font-size: 1.125rem; }

.hero-button-big-text {
  font-size: 1.625rem;
  font-weight: 700; }

.cta {
  position: relative; }
  .cta p {
    margin-bottom: 0.0125rem; }

.cta-icon {
  position: relative;
  padding: 0.3125rem 0.9375rem 0.3125rem 0.3125rem;
  float: left; }

.cta-text {
  float: right;
  text-align: left; }

#intro {
  color: #FFFFFF;
  background: url("../img/intro_slider/bg/slider_bg.png") no-repeat;
  background-size: 100% 100%; }
  #intro h2 {
    background-color: #FFFFFF;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    color: #000000;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    border-radius: 0.9375rem; }
  #intro .orbit-slide img {
    max-height: 31.25rem; }

#why_us h4 {
  margin: 0.625rem auto; }

#why_us img {
  width: 100%; }

#solutions {
  background-color: #0078D7; }

.card h3 {
  padding: 0.625rem 0; }

.hideSolution {
  display: none; }

@media screen and (max-width: 39.9375em) {
  #cluster img {
    width: 100%; } }

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  #cluster img {
    width: 100%; } }

@media screen and (min-width: 64em) {
  #cluster img {
    max-height: 31.25rem;
    max-width: 46.875rem; } }

.demo-3 {
  position: relative;
  overflow: hidden; }

.demo-3 figure {
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  margin-left: -50px; }

.demo-3 figure .img {
  display: block;
  position: relative;
  z-index: 10;
  margin: -15px 0; }

.demo-3 figure figcaption {
  display: block;
  position: absolute;
  z-index: 5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.demo-3 figure h2 {
  font-family: 'Lato';
  color: #fff;
  font-size: 20px;
  text-align: left; }

.demo-3 figure p {
  display: block;
  font-family: 'Lato';
  font-size: 12px;
  line-height: 18px;
  margin: 0;
  color: #fff;
  text-align: left; }

.demo-3 figure figcaption {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 29px 44px;
  background-color: rgba(26, 76, 110, 0.5);
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s; }

.demo-3 figure .img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s; }

.demo-3 figure:hover .img, figure.hover .img {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg); }

.demo-3 figure:hover figcaption, figure.hover figcaption {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  transform: rotateY(0); }

#features {
  min-height: 30vh; }

#feature-tabs img {
  height: 5rem;
  width: 5rem;
  border: 2px solid #000000;
  padding: 0.625rem; }

.feature-text {
  margin: 0 0.9375rem; }
  .feature-text p {
    color: #7A7A7A;
    text-align: center; }

.tabs-content {
  border: none; }

.tabs {
  border: none; }

.feature-indy img {
  height: 2.5rem;
  width: 2.5rem;
  margin: 0.625rem 1.25rem; }

@media screen and (max-width: 39.9375em) {
  .feature-hero img {
    width: 100%; } }

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .feature-hero img {
    width: 75%;
    margin-top: 1.25rem; } }

@media screen and (min-width: 64em) {
  .feature-hero img {
    width: 45%;
    margin-top: 1.25rem; } }

#integrations img {
  width: 100%; }

#clients .card {
  margin-bottom: 1.875rem; }

#testimonial {
  background-color: #0078D7; }

#testimonial-title {
  padding-top: 1.25rem; }
  #testimonial-title h2 {
    color: #FFFFFF; }

@media screen and (max-width: 39.9375em) {
  .quote-square {
    background-color: #0078D7;
    padding: 1.25rem 0;
    text-align: center; }
    .quote-square h5 {
      font-size: 1.125rem;
      line-height: 1.4375rem; }
    .quote-square p {
      color: #FFFFFF;
      font-weight: 700;
      font-size: 0.75rem;
      line-height: 0.875rem; }
  .little-line {
    border-bottom: 2px solid #FFFFFF;
    width: 10%;
    margin: 1.25rem auto; }
  .image-square img {
    width: 100%; } }

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .quote-square {
    height: 18.75rem;
    background-color: #0078D7;
    padding: 1.875rem 0;
    text-align: center; }
    .quote-square h5 {
      font-size: 1.125rem;
      line-height: 1.5rem; }
    .quote-square p {
      color: #FFFFFF;
      font-weight: 700;
      font-size: 0.875rem;
      line-height: 1.125rem; }
  .little-line {
    border-bottom: 2px solid #FFFFFF;
    width: 10%;
    margin: 1.25rem auto; }
  .image-square {
    height: 18.75rem; }
    .image-square img {
      height: 100%;
      width: 100%; } }

@media screen and (min-width: 64em) {
  .quote-square {
    height: 18.75rem;
    background-color: #0078D7;
    padding: 1.875rem 0;
    text-align: center; }
    .quote-square h5 {
      font-size: 1.25rem;
      line-height: 1.625rem; }
    .quote-square p {
      color: #FFFFFF;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.25rem; }
  .little-line {
    border-bottom: 2px solid #FFFFFF;
    width: 10%;
    margin: 1.25rem auto; }
  .image-square {
    height: 18.75rem; }
    .image-square img {
      height: 100%;
      width: 100%; } }

.hideTestimonial {
  display: none; }

.contact-card {
  padding: 15px; }

.contact-card i {
  padding-bottom: 20px; }

.contact-card p {
  line-height: 0.7rem; }

#message {
  color: #FFFFFF;
  background-color: #0078D7; }
  #message a {
    color: #FFFFFF !important; }

#message label {
  color: white; }

.success {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; }

.error {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid rgba(185, 74, 72, 0.3);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; }

.form-button .button {
  margin-top: 0.9375rem !important;
  background-color: #01C485; }

#footer {
  background-color: #292929;
  min-height: 10vh;
  color: #FFFFFF; }
  #footer i {
    padding-top: -1.25rem !important; }

.facebook-light i {
  color: #FFFFFF; }

.twitter-light i {
  color: #FFFFFF; }

.linkedin-light i {
  color: #FFFFFF; }

.facebook-light i:hover {
  color: #3B5998; }

.twitter-light i:hover {
  color: #55ACEE; }

.linkedin-light i:hover {
  color: #007BB5; }

#footer a {
  color: #FFFFFF; }

.stubborn-center {
  text-align: center !important; }
  .stubborn-center ul {
    text-align: center !important; }

.darker {
  padding: 0.9375rem 0 0.3125rem;
  background-color: #000000; }

#blog {
  background-color: #EFEFEF; }
  #blog h2 {
    font-weight: 700;
    color: #0078D7;
    padding-left: 3vw; }

.main-blog-img img {
  height: 25vh;
  margin-bottom: 3.125rem; }

.second-blog-img img {
  width: 25vw;
  padding-bottom: 1.25rem;
  padding-top: 1.25rem; }

.white_bg {
  background-color: #FFFFFF !important; }

html * {
  font-family: 'Raleway', sans-serif; }

p {
  font-family: 'Lato', sans-serif;
  color: #7A7A7A;
  font-size: 1rem;
  line-height: 1.5rem; }

.blurb {
  padding-bottom: 0.9375rem; }

h1 {
  font-size: 2.625rem;
  font-weight: 700;
  color: #494C55; }
  h1 .subheader {
    font-size: 2.25rem;
    font-weight: 400; }

#hero h1 {
  color: #FFFFFF; }

#hero h1.subheader {
  margin-bottom: 1.25rem; }

#hero p {
  color: #FFFFFF; }

.contact-sub p {
  color: #FFFFFF; }

h2 {
  font-size: 2.25rem;
  font-weight: 300;
  margin-bottom: 1.25rem; }
  h2 b {
    font-weight: 700; }

h3 {
  font-size: 1.75rem;
  font-weight: 400; }

h4 {
  font-size: 1.25rem; }

i {
  color: #0078D7;
  padding-top: 1.25rem; }

#solutions p {
  font-size: 0.8125rem;
  text-align: justify; }

#solutions h4 {
  padding-top: 0.3125rem; }

.hero-blurb p {
  font-size: 1.25rem;
  text-shadow: 1px 1px #000000; }

.hero-blurb-standout {
  margin-top: 2.1875rem;
  margin-bottom: -1.25rem;
  font-size: 1.5rem; }

.easy {
  font-family: 'Nunito', sans-serif;
  color: #292929; }

.forms {
  font-family: 'Nunito', sans-serif;
  color: #0078D7; }