﻿html,
body {
  margin: 0;
  height: 100%;
}
body {
  width: 1px;
  min-width: 100%;
  font-family: Arial;
  font-weight: 300;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-button {
  width: 8px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: #eee;
  border: thin solid lightgray;
  box-shadow: 0 0 3px #dfdfdf inset;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #999;
  border: thin solid gray;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #7d7d7d;
}
a:hover {
  text-decoration: none;
}
.SquareBox {
  position: relative;
  display: inline-block;
}
.SquareBox::before {
  content: "";
  padding-bottom: 100%;
  display: block;
}
.SquareBox50 {
  position: relative;
  display: inline-block;
}
.SquareBox50::before {
  content: "";
  padding-bottom: 50%;
  display: block;
}
.Animate {
  -moz-transform: rotate(0) scale(1, 1) translate(0, 0) !important;
  -ms-transform: rotate(0) scale(1, 1) translate(0, 0) !important;
  -o-transform: rotate(0) scale(1, 1) translate(0, 0) !important;
  -webkit-transform: rotate(0) scale(1, 1) translate(0, 0) !important;
  transform: rotate(0) scale(1, 1) translate(0, 0) !important;
  opacity: 1 !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.Image {
  background: center center no-repeat;
  background-size: cover;
}
#TopSliderContainer {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.display-4 {
  font-family: Roboto;
  font-weight: 300;
}
.AnimateROX80 {
  opacity: 0;
  -moz-transform: rotateX(80deg) tra-nslateY();
  -ms-transform: rotateX(80deg) tra-nslateY();
  -o-transform: rotateX(80deg) tra-nslateY();
  -webkit-transform: rotateX(80deg) tra-nslateY();
  transform: rotateX(80deg) translateY(-70px);
  -moz-transition: transform .7s .2s, opacity .7s .2s;
  -o-transition: transform .7s .2s, opacity .7s .2s;
  -webkit-transition: transform .7s .2s, opacity .7s .2s;
  transition: transform .7s .2s, opacity .7s .2s;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
.AnimateL30 {
  opacity: 0;
  -moz-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  -o-transform: translateX(-30px);
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
  -moz-transition: transform .7s .2s, opacity .7s .2s;
  -o-transition: transform .7s .2s, opacity .7s .2s;
  -webkit-transition: transform .7s .2s, opacity .7s .2s;
  transition: transform .7s .2s, opacity .7s .2s;
}
.AnimateT30 {
  opacity: 0;
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  -moz-transition: transform .7s .2s, opacity .7s .2s;
  -o-transition: transform .7s .2s, opacity .7s .2s;
  -webkit-transition: transform .7s .2s, opacity .7s .2s;
  transition: transform .7s .2s, opacity .7s .2s;
}
.AnimateR30 {
  opacity: 0;
  -moz-transform: translateX(30px);
  -ms-transform: translateX(30px);
  -o-transform: translateX(30px);
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -moz-transition: transform .7s .2s, opacity .7s .2s;
  -o-transition: transform .7s .2s, opacity .7s .2s;
  -webkit-transition: transform .7s .2s, opacity .7s .2s;
  transition: transform .7s .2s, opacity .7s .2s;
}
.AnimateS0 {
  /*opacity: 0;*/
  -moz-transform: scale(0.01, 0.01);
  -ms-transform: scale(0.01, 0.01);
  -o-transform: scale(0.01, 0.01);
  -webkit-transform: scale(0.01, 0.01);
  transform: scale(0.01, 0.01);
  -moz-transition: transform .7s .2s, opacity .7s .2s;
  -o-transition: transform .7s .2s, opacity .7s .2s;
  -webkit-transition: transform .7s .2s, opacity .7s .2s;
  transition: transform .7s .2s, opacity .7s .2s;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.AnimateRO30 {
  opacity: 0;
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -moz-transition: transform .7s .2s, opacity .7s .2s;
  -o-transition: transform .7s .2s, opacity .7s .2s;
  -webkit-transition: transform .7s .2s, opacity .7s .2s;
  transition: transform .7s .2s, opacity .7s .2s;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
#HeaderVideo {
  position: relative;
  margin-top: 64px;
  z-index: -1;
  height: 0;
  width: 100%;
  padding-bottom: 56.3758%;
  pointer-events: none;
}
#HeaderVideo video {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
}
#HeaderVideo #OverVideo {
  left: 10%;
  top: 20%;
  color: #fff;
  font-size: 4vw;
  text-shadow: 2px 2px 4px #333;
  position: absolute;
  z-index: 2000;
  font-family: Roboto;
  font-weight: 300;
}
#HeaderImage {
  margin-top: 64px;
  width: 100%;
}
#HeaderImage img#CoverImage {
  width: 100%;
}
.navbar {
  background-color: transparent;
  border-bottom: 1px solid #00acee;
}
.navbar #Logo {
  height: 40px;
}
.navbar .nav-item .nav-link {
  color: #333 !important;
}
.navbar .nav-item.active .nav-link {
  color: #fff !important;
  background-color: #00acee !important;
  padding: 0 .5rem;
  margin: .5rem 0;
  border-radius: 5px;
}
@media (max-width: 767px) {
  .navbar .nav-item .dropdown-menu {
    border: none;
  }
}
.navbar .material-icon {
  background: no-repeat center center;
  background-size: 100% 100%;
}
.container #ContactForm {
  background-color: #00acee;
  color: #fff;
  z-index: 10000;
}
.container #ContactForm #ContactTitle {
  font-size: 80%;
}
.container #ContactForm input {
  background-color: inherit;
  border-color: #eee;
  color: inherit;
}
.container #ContactForm button {
  color: #000;
  background-color: #ffc905;
  border: none;
}
.container #ContactForm input::-webkit-input-placeholder {
  color: #dde !important;
}
.container #ContactForm input:-moz-placeholder {
  /* Firefox 18- */
  color: #dde !important;
}
.container #ContactForm input::-moz-placeholder {
  /* Firefox 19+ */
  color: #dde !important;
}
.container #ContactForm input:-ms-input-placeholder {
  color: #dde !important;
}
@media (max-width: 767.98px) {
  .container #ContactForm {
    margin-top: 0;
  }
}
.container .MarketingPlatform img {
  max-width: 100%;
}
.container .MarketingPlatform h3 {
  font-size: 4vw;
  color: #00acee;
}
.container .MarketingPlatform h5 {
  font-size: 2vw;
}
.container .MarketingPlatform table {
  height: 100%;
}
@media (max-width: 767.98px) {
  .container .MarketingPlatform img {
    max-width: 50%;
  }
  .container .MarketingPlatform h3 {
    font-size: 6vw;
    padding: 0 30px;
  }
  .container .MarketingPlatform h5 {
    font-size: 4vw;
    padding: 10px 30px;
  }
}
.container #ExpandBusiness {
  font-size: 0;
}
.container #ExpandBusiness p.Header {
  font-size: 4vw;
  width: 100%;
  color: #00acee;
}
.container #ExpandBusiness #ToolSentence {
  font-size: 2vw;
}
.container #ExpandBusiness #ToolImages {
  text-align: center;
}
.container #ExpandBusiness #ToolImages .ToolItem {
  width: calc(25% - 15px);
  max-width: 300px;
  margin: 20px 10px 0;
  display: inline-block;
}
.container #ExpandBusiness #ToolImages .ToolItem .Image {
  width: 60%;
  position: relative;
}
.container #ExpandBusiness #ToolImages .ToolItem:nth-child(4n+1) {
  margin-left: 0;
}
.container #ExpandBusiness #ToolImages .ToolItem:nth-child(4n) {
  margin-right: 0;
}
.container #ExpandBusiness #ToolImages .ToolItem .Title {
  font-size: calc(5px + 2vw);
  text-align: center;
  margin: 10px 0 0;
  color: #00acee;
}
.container #ExpandBusiness #ToolImages .ToolItem .Description {
  text-align: center;
  font-size: calc(5px + 1vw);
}
@media (max-width: 767.98px) {
  .container #ExpandBusiness p.Header {
    font-size: calc(4vw + 8px);
  }
  .container #ExpandBusiness #ToolSentence {
    font-size: calc(2vw + 8px);
  }
  .container #ExpandBusiness #ToolImages .ToolItem {
    width: calc(50% - 10px);
    margin: 15px 10px 0;
  }
  .container #ExpandBusiness #ToolImages .ToolItem:nth-child(2n+1) {
    margin-left: 0;
  }
  .container #ExpandBusiness #ToolImages .ToolItem:nth-child(2n) {
    margin-right: 0;
  }
  .container #ExpandBusiness #ToolImages .ToolItem .Title {
    font-size: calc(5px + 3vw);
  }
  .container #ExpandBusiness #ToolImages .ToolItem .Description {
    font-size: calc(5px + 2vw);
  }
}
.container #Quote {
  color: #333;
  background-color: #dcddde;
}
.container #Quote #BGDark {
  padding: 10px 20px;
}
.container #Quote #BGDark table {
  margin: 0 auto;
}
.container #Quote #BGDark table td {
  padding: 10px 20px;
}
.container #Quote #BGDark table td img {
  max-width: 100px;
  max-height: 100px;
  vertical-align: middle;
}
.container #Quote #BGDark table td #QTitle {
  font-size: calc(10px + 1.5vw);
  display: block;
  color: #00acee;
}
.container #Quote #BGDark table td #QMessage {
  font-size: calc(10px + 0.75vw);
  margin: 0;
}
.container #SuccessTriangle {
  font-size: calc(1vw + 8px);
}
.container #SuccessTriangle img {
  width: 100%;
}
.container #SuccessTriangle #MobileMarketing {
  font-size: calc(4vw + 4px);
  color: #00acee;
}
.container #SuccessTriangle #EcoSystem {
  font-size: calc(4vw + 4px);
  color: #ffc905;
}
.container #SuccessTriangle table {
  height: 100%;
}
@media (max-width: 767.98px) {
  .container #SuccessTriangle {
    font-size: calc(2vw + 8px);
  }
  .container #SuccessTriangle #MobileMarketing {
    font-size: calc(6vw + 4px);
  }
  .container #SuccessTriangle #EcoSystem {
    font-size: calc(6vw + 4px);
  }
}
.container #VVINPreferredPartners {
  font-size: calc(1vw + 8px);
}
.container #VVINPreferredPartners #Title {
  font-size: calc(2vw + 8px);
  color: #00acee;
}
@media (max-width: 767.98px) {
  .container #VVINPreferredPartners {
    /*font-size: ~"calc(2vw + 8px)";*/
  }
  .container #VVINPreferredPartners #Title {
    font-size: calc(3vw + 4px);
  }
}
.container #Clients {
  background-color: #bfeafa;
  font-size: 0;
}
.container #Clients p.Header {
  font-size: 3vw;
  width: 100%;
}
.container #Clients #CollapsibleClients {
  width: 100%;
  font-size: 0;
}
.container #Clients .btn {
  min-width: 150px;
}
.container #Clients #ClientImages .ClientItem {
  display: inline-block;
  width: calc(16.66% - 16px);
  margin: 20px 9px 0;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
  border: 1px solid #00acee;
  -moz-transition: border-radius 0.4s;
  -o-transition: border-radius 0.4s;
  -webkit-transition: border-radius 0.4s;
  transition: border-radius 0.4s;
}
.container #Clients #ClientImages .ClientItem .Image {
  width: 100%;
  background-size: 71% auto;
  position: relative;
}
.container #Clients #ClientImages .ClientItem .Image .QRImage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: center center no-repeat;
  background-size: 0;
  /*opacity: 0;*/
  -moz-transition: opacity 0.4s, background-size 0.4s;
  -o-transition: opacity 0.4s, background-size 0.4s;
  -webkit-transition: opacity 0.4s, background-size 0.4s;
  transition: opacity 0.4s, background-size 0.4s;
}
.container #Clients #ClientImages .ClientItem .Image.AnimationComplete {
  -moz-transition: opacity 0.4s, background-size 0.4s;
  -o-transition: opacity 0.4s, background-size 0.4s;
  -webkit-transition: opacity 0.4s, background-size 0.4s;
  transition: opacity 0.4s, background-size 0.4s;
}
.container #Clients #ClientImages .ClientItem:nth-child(6n+1) {
  margin-left: 0;
}
.container #Clients #ClientImages .ClientItem:nth-child(6n) {
  margin-right: 0;
}
.container #Clients #ClientImages .ClientItem:hover {
  border-radius: 5%;
}
.container #Clients #ClientImages .ClientItem:hover .Image.Animate {
  background-size: 0;
}
.container #Clients #ClientImages .ClientItem:hover .Image.Animate .QRImage {
  background-size: 80%;
}
@media (max-width: 767.98px) {
  .container #Clients p.Header {
    font-size: calc(3vw + 4px);
  }
  .container #Clients #ClientImages .ClientItem {
    width: calc(50% - 10px);
    margin: 15px 10px 0;
  }
  .container #Clients #ClientImages .ClientItem:nth-child(2n+1) {
    margin-left: 0;
  }
  .container #Clients #ClientImages .ClientItem:nth-child(2n) {
    margin-right: 0;
  }
}
.container #BusinessPartners {
  background-color: #bfeafa;
  font-size: 0;
}
.container #BusinessPartners p.Header {
  font-size: 3vw;
  width: 100%;
}
.container #BusinessPartners #BusinessClientImages .ClientItem {
  display: inline-block;
  width: calc(33.33% - 32px);
  margin: 20px 16px 0;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
  border: 1px solid #00acee;
  -moz-transition: border-radius 0.4s;
  -o-transition: border-radius 0.4s;
  -webkit-transition: border-radius 0.4s;
  transition: border-radius 0.4s;
}
.container #BusinessPartners #BusinessClientImages .ClientItem .Image {
  width: 100%;
  background-size: 71% auto;
  position: relative;
}
.container #BusinessPartners #BusinessClientImages .ClientItem .Image .QRImage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: center center no-repeat;
  background-size: 0;
  -moz-transition: opacity 0.4s, background-size 0.4s;
  -o-transition: opacity 0.4s, background-size 0.4s;
  -webkit-transition: opacity 0.4s, background-size 0.4s;
  transition: opacity 0.4s, background-size 0.4s;
}
.container #BusinessPartners #BusinessClientImages .ClientItem .Image.AnimationComplete {
  -moz-transition: opacity 0.4s, background-size 0.4s;
  -o-transition: opacity 0.4s, background-size 0.4s;
  -webkit-transition: opacity 0.4s, background-size 0.4s;
  transition: opacity 0.4s, background-size 0.4s;
}
.container #BusinessPartners #BusinessClientImages .ClientItem:hover {
  border-radius: 5%;
}
.container #BusinessPartners #BusinessClientImages .ClientItem:hover .Image.Animate {
  background-size: 0;
}
.container #BusinessPartners #BusinessClientImages .ClientItem:hover .Image.Animate .QRImage {
  background-size: 80%;
}
@media (max-width: 767.98px) {
  .container #BusinessPartners p.Header {
    font-size: calc(5vw + 4px);
  }
  .container #BusinessPartners #BusinessClientImages .ClientItem {
    width: calc(50% - 32px);
  }
}
.container #SolutionPartners {
  font-size: 0;
}
.container #SolutionPartners p.Header {
  font-size: 3vw;
  width: 100%;
  color: #00acee;
}
.container #SolutionPartners #SolutionClientImages .ClientItem {
  display: inline-block;
  width: calc(33.33% - 32px);
  margin: 20px 16px 0;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
  border: 1px solid #00acee;
  -moz-transition: border-radius 0.4s;
  -o-transition: border-radius 0.4s;
  -webkit-transition: border-radius 0.4s;
  transition: border-radius 0.4s;
}
.container #SolutionPartners #SolutionClientImages .ClientItem .Image {
  width: 100%;
  background-size: 71% auto;
  position: relative;
}
.container #SolutionPartners #SolutionClientImages .ClientItem .Image .QRImage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: center center no-repeat;
  background-size: 0;
  -moz-transition: opacity 0.4s, background-size 0.4s;
  -o-transition: opacity 0.4s, background-size 0.4s;
  -webkit-transition: opacity 0.4s, background-size 0.4s;
  transition: opacity 0.4s, background-size 0.4s;
}
.container #SolutionPartners #SolutionClientImages .ClientItem .Image.AnimationComplete {
  -moz-transition: opacity 0.4s, background-size 0.4s;
  -o-transition: opacity 0.4s, background-size 0.4s;
  -webkit-transition: opacity 0.4s, background-size 0.4s;
  transition: opacity 0.4s, background-size 0.4s;
}
.container #SolutionPartners #SolutionClientImages .ClientItem:hover {
  border-radius: 5%;
}
.container #SolutionPartners #SolutionClientImages .ClientItem:hover .Image.Animate {
  background-size: 0;
}
.container #SolutionPartners #SolutionClientImages .ClientItem:hover .Image.Animate .QRImage {
  background-size: 80%;
}
@media (max-width: 767.98px) {
  .container #SolutionPartners p.Header {
    font-size: calc(5vw + 4px);
  }
  .container #SolutionPartners #SolutionClientImages .ClientItem {
    width: calc(50% - 32px);
  }
}
.container #WhoWeAre p.Header {
  font-size: 4vw;
  width: 100%;
  color: #00acee;
}
.container #WhoWeAre table {
  height: 100%;
}
.container #WhoWeAre table p:not(.Header) {
  line-height: normal;
  font-size: 1.5vw;
}
.container #WhoWeAre img {
  width: 100%;
}
@media (max-width: 767.98px) {
  .container #WhoWeAre p.Header {
    font-size: calc(5vw + 8px);
    margin-top: 10px;
  }
  .container #WhoWeAre table p:not(.Header) {
    font-size: calc(3vw + 4px);
  }
}
.container #Footer {
  background-color: #00acee;
  color: #fff;
  font-size: calc(1vw + 8px);
}
.container #Footer p.Header {
  font-size: calc(3vw + 4px);
}
.container #Footer p.Title {
  font-size: calc(1.5vw + 4px);
}
.container #Footer #FooterLogo {
  width: 80%;
}
.container #Footer hr {
  border-top: 1px solid #fff;
}
.container #Footer a.Link {
  display: block;
  color: #fff;
  font-size: 16px;
}
.container #Footer a.Link.Active {
  color: #ffc905;
}
.container #Footer p.Address {
  font-size: 16px;
}
.container #Footer a.Social {
  font-size: 0;
  vertical-align: bottom;
}
.container #Footer a.Social img {
  max-width: 20%;
  vertical-align: bottom;
}
.container #Footer #Copyright {
  color: #00acee;
  font-size: 12px;
}
@media (max-width: 767.98px) {
  .container #Footer p.Title {
    font-size: calc(2vw + 8px);
    margin-top: 10px;
  }
  .container #Footer a.Link,
  .container #Footer p.Address {
    font-size: 14px;
  }
}
