.mobile-sub-nav {
  background-color: #D6D6E5;
  height: 44px;
}
.mobile-sub-nav.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.mobile-sub-nav.fixed-top + #home {
  padding-top: 44px;
}
@media only screen and (min-width: 768px) {
  .mobile-sub-nav.fixed-top + #home {
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) {
  .mobile-sub-nav {
    display: none;
  }
}
.mobile-sub-nav #vi-scroll-container {
  white-space: nowrap;
  overflow: hidden;
  height: 100%;
  padding-left: 20px;
}
.mobile-sub-nav #vi-scroll-container .fade {
  opacity: 30%;
}
.mobile-sub-nav #vi-scroll-container .active {
  transform: scale(1.3);
}
.mobile-sub-nav #vi-scroll-container .vi-nav-point {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.mobile-sub-nav #vi-scroll-container .vi-nav-point:hover {
  cursor: pointer;
}
.mobile-sub-nav #vi-scroll-container .vi-nav-point img {
  height: auto;
  width: 18px;
}
.mobile-sub-nav #vi-scroll-container .vi-nav-point .vi-nav-number {
  position: absolute;
  color: #6660AF;
  font-size: 10px;
  font-weight: 900;
  left: -8px;
  bottom: 0;
}
.mobile-sub-nav #vi-scroll-container .vi-nav-divider {
  display: inline-block;
  width: 37px;
  height: 1px;
  background: #6660AF;
  margin-left: 6px;
  margin-right: 6px;
  vertical-align: middle;
}
.panel {
  min-height: calc(100vh + 20px);
  position: sticky;
  top: 0;
  align-items: center;
  justify-content: center;
  clear: both;
}
.sidebar {
  display: none;
}
@media only screen and (min-width: 1300px) {
  .sidebar {
    display: block;
    position: relative;
    width: 260px;
    float: left;
  }
}
.sidebar .line {
  height: 100%;
  width: 4px;
  background-color: #D6D6E4;
  margin: 0 auto;
}
.sidebar .sidebar-animation {
  width: 202px;
  height: 202px;
  position: absolute;
  top: 0;
  left: calc(150px - 126px);
}
.content {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .content {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 1300px) {
  .content {
    width: calc(100% - 400px);
    padding-left: 260px;
  }
}
#home {
  display: block !important;
  opacity: 1;
  margin-left: 0;
  margin-bottom: 0;
  min-height: calc(100vh - 48px - 49px);
}
#home .mainImage {
  position: relative;
  text-align: center;
  margin-bottom: 42px;
}
@media only screen and (min-width: 768px) {
  #home .mainImage {
    width: 100%;
    margin: 47px 0 8% 0;
  }
}
#home .mainImage .desktop {
  display: none;
}
@media only screen and (min-width: 768px) {
  #home .mainImage .desktop {
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  #home .mainImage .mobile {
    display: none;
  }
}
#home .mainImage img {
  max-width: 100%;
  width: 100%;
}
#home .mainImage .title {
  position: absolute;
  width: 261px;
  max-width: calc(100vw - 60px);
  text-align: left;
  background: #6660AF;
  border: 1px solid #707070;
  bottom: -18px;
  right: 0;
  padding: 34px 29px 29px 29px;
}
@media only screen and (min-width: 1000px) {
  #home .mainImage .title {
    width: 770px;
    bottom: -10%;
    right: unset;
    left: 0;
    padding: 43px 60px;
  }
}
#home .mainImage .title h1 {
  font-size: 20px;
  line-height: 22px;
  color: white;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1000px) {
  #home .mainImage .title h1 {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 25px;
  }
}
#home .mainImage .title p {
  font-size: 15px;
  font-weight: 400;
  color: white;
}
@media only screen and (min-width: 1000px) {
  #home .mainImage .title p {
    font-size: 20px;
  }
}
#home .mainImage .title .desktopButton {
  text-transform: uppercase;
  margin-top: 27px;
  font-weight: 700;
  font-size: 17px;
  text-align: center;
}
@media only screen and (min-width: 1000px) {
  #home .mainImage .title .desktopButton {
    display: block;
    margin-top: 33px;
    text-align: left;
  }
}
#home .mainImage .title .desktopButton .button {
  display: inline-block;
  width: 100%;
  max-width: 341px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  margin: 0;
  color: #6660AF;
  background-color: white;
  text-align: center;
}
#home .mainImage .title .desktopButton .video-button {
  color: white;
  display: inline-flex;
  border-bottom: 2px solid white;
  margin-top: 14px;
}
@media only screen and (min-width: 1000px) {
  #home .mainImage .title .desktopButton .video-button {
    margin-left: 48px;
    margin-top: 0;
  }
}
#home .mainImage .title .desktopButton .video-button:hover {
  cursor: pointer;
}
#home .mainImage .title .desktopButton .video-button svg {
  margin-right: 5px;
}
#home .mainImage .background-video-container {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  top: 0;
}
#home .mainImage .background-video-container iframe {
  box-sizing: border-box;
  height: 56.25vw;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  width: 210vh;
  max-width: unset;
}
#home #home-words {
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media only screen and (min-width: 768px) {
  #home #home-words {
    width: 1640px;
    max-width: calc(100% - 64px - 37px);
    margin: 0 auto 242px;
  }
}
#home #home-words::-webkit-scrollbar {
  display: none;
}
#home #home-words table {
  width: 1639px;
  color: #6660AF;
  opacity: 50%;
  text-transform: uppercase;
  font-size: 30px;
}
#home #home-words table td {
  text-align: center;
}
#getToKnow {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  #getToKnow::before {
    content: url('/wp-content/themes/logimate/images/get_to_know_swirl.png');
    position: absolute;
    left: 0;
    top: -50%;
  }
}
#getToKnow #getToKnow_area {
  top: -12px;
}
#getToKnow .heading {
  width: 310px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #getToKnow .heading {
    width: calc(100% - 60px);
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1300px) {
  #getToKnow .heading {
    margin: 0 auto 0 60px;
  }
}
#getToKnow .heading h2 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 47px;
  padding-bottom: 18px;
  line-height: 37px;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  #getToKnow .heading h2 {
    padding-bottom: 58px;
  }
}
@media only screen and (min-width: 768px) {
  #getToKnow .heading h2 {
    font-size: 60px;
    line-height: 70px;
  }
}
#getToKnow .text {
  width: 310px;
  margin: 0 auto 10px auto;
  line-height: 25px;
  font-size: 16px;
  font-weight: 300;
}
@media only screen and (min-width: 768px) {
  #getToKnow .text {
    width: 631px;
    max-width: calc(100% - 32px);
    margin-left: 0;
    text-align: right;
    font-size: 19px;
  }
}
#getToKnow .animation {
  margin-top: -20px;
  width: 100%;
  height: 250px;
}
@media only screen and (min-width: 768px) {
  #getToKnow .animation {
    height: 608px;
    width: unset;
    margin-top: -70px;
    overflow: hidden;
    z-index: -1;
  }
}
@media only screen and (min-width: 1300px) {
  #getToKnow .animation {
    margin-top: -180px;
  }
}
@media only screen and (max-width: 370px) {
  #getToKnow .animation {
    height: 200px;
  }
}
@media only screen and (min-width: 768px) {
  #getToKnow .animation svg {
    transform: translate3d(164px, 0px, 0px) !important;
  }
}
#connection {
  align-items: flex-start !important;
  display: block;
  margin-top: -20px;
}
#connection .content {
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  #connection .content {
    padding-bottom: 155px;
  }
}
@media only screen and (min-width: 1300px) {
  #connection .content .inner {
    padding-top: 100px;
  }
}
#connection .sidebar .sidebar-animation {
  top: -30px;
}
#connection.panel {
  padding-top: 0;
  clear: both;
}
#connection .inner {
  padding-top: 47px;
}
@media only screen and (min-width: 768px) {
  #connection .inner {
    width: 100%;
    max-width: 1377px;
    margin: 0 auto 0 0;
    padding-top: 0;
  }
}
#connection .heading {
  width: 310px;
  margin: 0 auto;
  white-space: normal;
}
@media only screen and (min-width: 768px) {
  #connection .heading {
    width: calc(100% - 60px);
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1300px) {
  #connection .heading {
    margin: 0 auto 0 60px;
  }
}
#connection .heading h2 {
  line-height: 37px;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  #connection .heading h2 {
    font-size: 60px;
    line-height: 70px;
  }
}
#connection .main {
  background-color: #D6D6E5;
  padding: 65px 0;
  margin-top: -25px;
  box-shadow: 0 3px 60px rgba(0, 0, 0, 0.16);
}
@media only screen and (min-width: 768px) {
  #connection .main {
    width: calc(100% - 32px);
    max-width: 571px;
    padding: 50px 0 0;
    display: inline-block;
  }
}
#connection .main .pre-heading {
  width: 310px;
  margin: 0 auto 15px auto;
  display: flex;
  align-items: center;
  font-size: 17px;
  text-transform: uppercase;
  color: #6660AF;
  line-height: 20px;
  font-weight: 900;
}
@media only screen and (min-width: 768px) {
  #connection .main .pre-heading {
    width: 100%;
    max-width: 466px;
  }
}
#connection .main .pre-heading svg {
  vertical-align: center;
}
#connection .main .pre-heading div {
  transform: translateX(-5px);
}
#connection .text {
  width: 315px;
  margin: 18px auto 0 auto;
  line-height: 20px;
  font-size: 16px;
  font-weight: 300;
  white-space: normal;
}
@media only screen and (min-width: 768px) {
  #connection .text {
    width: 100%;
    max-width: 466px;
    margin-top: -40px;
    padding-bottom: 50px;
  }
}
#connection .text a {
  margin-top: 20px;
  font-size: 17px;
  font-weight: 900;
  line-height: 20px;
  color: #6660AF;
  text-transform: uppercase;
  position: relative;
}
#connection .text a:after {
  position: absolute;
  content: url("/wp-content/themes/logimate/images/arrow.svg");
  width: 52px;
  height: 42px;
  bottom: 2px;
  right: -60px;
}
#connection .text .spacer {
  height: 25px;
}
#connection .animation {
  margin-top: -20px;
  width: 100%;
  height: 252px;
}
@media only screen and (min-width: 768px) {
  #connection .animation {
    height: 500px;
    margin-top: -170px;
    margin-left: 20px;
  }
}
#connection .points {
  margin-top: 40px;
  vertical-align: top;
}
@media only screen and (min-width: 768px) {
  #connection .points {
    float: right;
  }
}
@media only screen and (min-width: 1100px) {
  #connection .points {
    display: inline-block;
    float: unset;
  }
}
#connection .points ul {
  max-width: 375px;
  padding: 0;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #connection .points ul {
    max-width: 100%;
  }
}
#connection .points li {
  width: 100%;
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  font-size: 18px;
  line-height: 20px;
  font-weight: 300;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  #connection .points li {
    margin-bottom: 10px;
  }
}
#connection .points li .icon {
  width: 60px;
  height: 50px;
  background-size: 200%;
  background-position: center;
  margin: 0 20px;
}
#connection .points li .text {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  padding-right: 13px;
  padding-bottom: 0;
  align-self: center;
}
#connection .points img {
  margin-right: 20px;
  height: 40px;
}
#connection .image img {
  max-width: 100%;
}
@media only screen and (min-width: 768px) {
  #connection .image img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  #connection .image .mobile {
    display: none;
  }
}
#connection .image .desktop {
  display: none;
}
@media only screen and (min-width: 768px) {
  #connection .image .desktop {
    display: block;
    margin-top: -20px;
  }
}
@media only screen and (min-width: 1300px) {
  #connection .image .desktop {
    margin-top: -98px;
  }
}
#connection .image .desktop img {
  height: 365px;
}
#pricing {
  align-items: flex-start !important;
  display: block;
  position: relative;
  overflow: hidden;
  clear: both;
  padding-top: 0;
}
#pricing .content {
  padding-top: 65px;
}
@media only screen and (min-width: 768px) {
  #pricing .content {
    padding-top: 125px;
  }
}
@media only screen and (min-width: 768px) {
  #pricing {
    background-image: url("/wp-content/themes/logimate/images/pricing-back.svg");
    background-repeat: no-repeat;
    background-position: bottom -20px right 40px;
  }
}
#pricing .sidebar .sidebar-animation {
  width: 178px;
  height: 178px;
  left: calc(150px - 89px);
  top: 0;
}
@media only screen and (min-width: 768px) {
  #pricing .inner {
    width: 100%;
    max-width: 1377px;
    margin: 0 auto 0 0;
  }
}
#pricing .heading {
  width: 310px;
  margin: 0 auto;
  z-index: 50;
}
@media only screen and (min-width: 768px) {
  #pricing .heading {
    width: calc(100% - 60px);
    max-width: 1000px;
  }
}
#pricing .heading h2 {
  line-height: 37px;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  #pricing .heading h2 {
    font-size: 60px;
    line-height: 70px;
    max-width: 800px;
  }
}
#pricing .heading p {
  font-size: 16px;
  font-weight: 300;
}
#pricing .main {
  padding: 65px 0 0 0;
  margin-top: -25px;
}
@media only screen and (min-width: 768px) {
  #pricing .main {
    width: calc(100% - 60px);
    max-width: 1000px;
    padding: 45px 0;
    margin: 0 auto;
  }
}
#pricing .main .text {
  width: 310px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
  z-index: 50;
}
@media only screen and (min-width: 768px) {
  #pricing .main .text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: calc(100% - 32px);
  }
}
@media only screen and (min-width: 1300px) {
  #pricing .main .text {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  #pricing .main .text div {
    margin-right: 30px;
    max-width: 401px;
  }
  #pricing .main .text div:last-of-type {
    margin-right: 0;
  }
}
#pricing .main .text .middle {
  margin-top: 25px;
}
@media only screen and (min-width: 768px) {
  #pricing .main .text .middle {
    margin-top: 0;
  }
}
#pricing .main .text a {
  margin-top: 30px;
  display: block;
  width: 264px;
  height: 40px;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  line-height: 40px;
  background-color: #6660AF;
}
@media only screen and (min-width: 768px) {
  #pricing .main .text a {
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) {
  #pricing .main .animation .mobile {
    display: none;
  }
}
#pricing .main .animation .mobile img {
  margin: 30px auto 0 auto;
  display: block;
}
#pricing .main .animation .mobile p {
  font-size: 16px;
  font-weight: 300;
  width: 310px;
  margin: 15px auto;
  text-align: center;
}
#pricing .main .animation .desktop {
  display: none;
  position: relative;
}
@media only screen and (min-width: 768px) {
  #pricing .main .animation .desktop {
    display: block;
  }
}
#pricing .main .animation .desktop td {
  text-align: center;
  font-size: 16px;
  font-weight: 300;
}
#privateNote {
  display: block;
  padding-top: 0;
  margin-top: -20px;
}
#privateNote .content {
  padding-top: 61px;
}
@media only screen and (min-width: 768px) {
  #privateNote .content {
    padding-top: 131px;
  }
}
#privateNote .sidebar .sidebar-animation {
  top: 0;
  width: 178px;
  height: 178px;
  left: calc(150px - 109px);
}
@media only screen and (min-width: 768px) {
  #privateNote .inner {
    width: 100%;
    max-width: 1124px;
    margin: 0 auto 0 0;
  }
}
#privateNote .heading {
  width: 310px;
  margin: 0 auto;
  z-index: 50;
}
@media only screen and (min-width: 768px) {
  #privateNote .heading {
    width: calc(100% - 60px);
    max-width: 1000px;
  }
}
#privateNote .heading h2 {
  line-height: 37px;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  #privateNote .heading h2 {
    font-size: 60px;
    line-height: 70px;
  }
}
#privateNote .heading p {
  font-size: 16px;
  font-weight: 300;
}
#privateNote .main {
  z-index: 10;
  padding: 65px 0 85px 0;
  background-color: #D6D6E5;
  width: 100%;
  max-width: 1000px;
  margin: -20px auto 0 auto;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  #privateNote .main {
    margin-top: -30px;
  }
}
#privateNote .main .animation {
  height: 280px;
}
@media only screen and (min-width: 768px) {
  #privateNote .main .animation {
    height: 500px;
    width: 1200px;
    transform: translateX(-20%);
    margin-top: -50px;
  }
}
@media only screen and (min-width: 1100px) {
  #privateNote .main .animation {
    height: 500px;
    width: 1809px;
    transform: translateX(-23%);
    margin-top: -50px;
  }
}
#privateNote .main .text {
  width: 302px;
  max-width: 807px;
  text-align: center;
  font-size: 16px;
  font-weight: 300;
  margin: -30px auto 0 auto;
}
@media only screen and (min-width: 768px) {
  #privateNote .main .text {
    width: 807px;
    max-width: 100%;
    font-size: 19px;
    padding-right: 30px;
    box-sizing: border-box;
  }
}
@media only screen and (min-width: 1100px) {
  #privateNote .main .text {
    padding-right: 0;
  }
}
#privateNote .image {
  width: calc(100% - 20px);
  margin: 30px auto 0 auto;
}
@media only screen and (min-width: 768px) {
  #privateNote .image {
    max-width: 1124px;
  }
}
#privateNote .image img {
  width: 100%;
}
#privateNote .image .desktop {
  display: none;
}
@media only screen and (min-width: 768px) {
  #privateNote .image .desktop {
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 768px) {
  #privateNote .image .mobile {
    display: none;
  }
}
#goGreen {
  align-items: flex-start !important;
  display: block;
}
@media only screen and (min-width: 768px) {
  #goGreen::before {
    content: url('/wp-content/themes/logimate/images/gogreen_swirl.png');
    position: absolute;
    left: 0;
    top: -40%;
  }
}
#goGreen .sidebar .sidebar-animation {
  width: 197px;
  height: 197px;
  left: calc(150px - 114px);
}
#goGreen .inner {
  padding-top: 65px;
}
@media only screen and (min-width: 768px) {
  #goGreen .inner {
    width: 100%;
    max-width: 1377px;
    margin: 0 auto 0 0;
    padding-top: 220px;
  }
}
#goGreen .heading {
  width: 310px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #goGreen .heading {
    width: calc(100% - 60px);
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1300px) {
  #goGreen .heading {
    margin: 0 auto 0 60px;
  }
}
#goGreen .heading h2 {
  line-height: 37px;
  text-transform: uppercase;
  color: #89997A;
}
@media only screen and (min-width: 768px) {
  #goGreen .heading h2 {
    font-size: 60px;
    line-height: 70px;
  }
}
#goGreen .heading img {
  width: 200px;
}
#goGreen .main {
  padding: 65px 0 0 0;
}
@media only screen and (min-width: 768px) {
  #goGreen .main {
    width: calc(100% - 32px);
    max-width: 1124px;
    padding: 50px 0;
    margin-top: -30px;
    display: inline-block;
  }
}
@media only screen and (min-width: 768px) {
  #goGreen .main .mobile {
    display: none;
  }
}
#goGreen .main .mobile img {
  width: 100%;
}
#goGreen .main .mobile .text {
  background-color: #B8C7AC;
  color: #ffffff;
  font-weight: 500;
  line-height: 25px;
  padding: 55px 22px 55px 43px;
  margin-top: -6px;
}
#goGreen .main .mobile .bulletPoints .item img {
  width: 20px;
  margin-right: 12px;
}
#goGreen .main .desktop {
  display: none;
}
@media only screen and (min-width: 768px) {
  #goGreen .main .desktop {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
}
#goGreen .main .desktop .animation,
#goGreen .main .desktop img,
#goGreen .main .desktop .bulletPoints {
  width: 50%;
}
#goGreen .main .desktop .text {
  width: calc(50% - 65px);
  max-width: 720px;
  background-color: #B8C7AC;
  color: #ffffff;
  font-weight: 500;
  line-height: 25px;
  padding: 55px 22px 55px 43px;
}
@media only screen and (min-width: 768px) {
  #goGreen .main .desktop .text {
    width: calc(50% - 120px);
    padding: 80px 66px 64px 84px;
    box-shadow: 0 3px 60px rgba(0, 0, 0, 0.16);
    font-size: 23px;
    font-weight: 600;
  }
}
@media only screen and (min-width: 768px) {
  #goGreen .main .desktop img {
    margin-top: -92px;
  }
}
#goGreen .main .bulletPoints {
  margin-top: -10px;
  padding-top: 20px;
}
#goGreen .main .bulletPoints .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 40px;
  font-weight: 800;
  color: #89997A;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  #goGreen .main .bulletPoints .item {
    text-align: left;
    justify-content: left;
    padding-left: 40px;
    font-size: 20px;
    line-height: 22px;
    margin-bottom: 40px;
  }
}
#goGreen .main .bulletPoints .item img {
  width: 26px;
  margin-right: 20px;
}
@media only screen and (min-width: 768px) {
  #goGreen .main .bulletPoints .item img {
    margin-top: 0;
  }
}
#goGreen .main .animation {
  height: 200px;
  transform: scale(1.5);
}
@media only screen and (min-width: 768px) {
  #goGreen .main .animation {
    width: calc(50% - 70px) !important;
    height: 400px;
    transform: translate(38%, -7%);
  }
}
#clientFeeling {
  display: block;
  margin-top: 0;
}
#clientFeeling .sidebar .sidebar-animation {
  width: 178px;
  height: 178px;
  left: calc(150px - 108px);
}
#clientFeeling .inner {
  padding-top: 49px;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner {
    padding-top: 177px;
    width: 100%;
    max-width: 1124px;
    margin: 0 auto 0 0;
  }
}
#clientFeeling .inner .vi-customer-feeling {
  width: calc(100% - 60px);
  max-width: 1000px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .vi-customer-feeling {
    margin: 0;
  }
}
#clientFeeling .inner .vi-customer-feeling .vi-customer-feeling-placeholder {
  width: 200px;
  height: 250px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .vi-customer-feeling .vi-customer-feeling-placeholder {
    width: 50%;
    display: inline-block;
  }
}
#clientFeeling .inner .vi-customer-feeling .vi-customer-feeling-placeholder .animation {
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .vi-customer-feeling .vi-customer-feeling-placeholder .animation {
    height: 500px;
    width: 1500px;
    transform: translate(-32%, -50px);
  }
}
@media only screen and (min-width: 1100px) {
  #clientFeeling .inner .vi-customer-feeling .vi-customer-feeling-placeholder .animation {
    transform: translate(-24%, -50px);
  }
}
#clientFeeling .inner .vi-customer-feeling .text {
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
  font-weight: 300;
  box-sizing: border-box;
  line-height: 25px;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .vi-customer-feeling .text {
    width: 49%;
    font-size: 19px;
    line-height: unset;
    padding-top: 23px;
    padding-left: 40px;
  }
}
@media only screen and (min-width: 1100px) {
  #clientFeeling .inner .vi-customer-feeling .text {
    padding-top: 63px;
  }
}
#clientFeeling .inner .vi-customer-feeling .text .gogreen-list {
  color: #6660AF;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .vi-customer-feeling .text .gogreen-list {
    font-size: 23px;
  }
}
#clientFeeling .inner .vi-customer-feeling .text .gogreen-list:first-of-type {
  padding-top: 30px;
}
#clientFeeling .inner .vi-customer-feeling .text .gogreen-list img {
  width: auto;
  height: 12px;
  align-self: center;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .vi-customer-feeling .text .gogreen-list img {
    height: 27px;
  }
}
#clientFeeling .inner .vi-customer-feeling .text .gogreen-list .gogreen-text {
  padding-left: 15px;
}
#clientFeeling .inner .bottom {
  text-align: center;
  color: #6660AF;
  font-size: 20px;
  font-weight: 900;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .bottom {
    margin-top: -130px;
  }
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .bottom .mobile {
    display: none;
  }
}
#clientFeeling .inner .bottom .desktop {
  display: none;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .bottom .desktop {
    display: block;
  }
}
#clientFeeling .inner .bottom .image {
  width: 884px;
  max-width: 100%;
  height: auto;
}
#clientFeeling .inner .bottom .star-text-container {
  text-transform: uppercase;
  max-width: calc(100% - 60px);
  width: 300px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .bottom .star-text-container {
    display: inline-flex;
    width: auto;
    max-width: unset;
    margin: 0;
  }
}
#clientFeeling .inner .bottom .star-text-container .customer-stars {
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .inner .bottom .star-text-container .customer-stars {
    padding-right: 7px;
  }
}
#clientFeeling .heading {
  width: 310px;
  margin: 0 auto;
  z-index: 50;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .heading {
    width: calc(100% - 60px);
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1300px) {
  #clientFeeling .heading {
    margin: 0 auto;
  }
}
#clientFeeling .heading h2 {
  line-height: 37px;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .heading h2 {
    font-size: 60px;
    line-height: 70px;
    max-width: 100px;
  }
}
#clientFeeling .heading p {
  font-size: 16px;
  font-weight: 300;
}
#clientFeeling .main {
  z-index: 10;
  padding: 65px 0 85px 0;
  background-color: #D6D6E5;
  width: 100%;
  max-width: 1124px;
  margin: -20px auto 0 auto;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .main {
    margin-top: -30px;
  }
}
#clientFeeling .main .text {
  width: 302px;
  max-width: 807px;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  margin: -30px auto 0 auto;
}
@media only screen and (min-width: 768px) {
  #clientFeeling .main .text {
    width: 100%;
    font-size: 19px;
  }
}
.advantages {
  max-width: 100%;
  margin: 0 auto;
  clear: both;
  padding-top: 42px;
}
@media only screen and (min-width: 768px) {
  .advantages {
    max-width: calc(100% - 32px);
    padding-top: 150px;
  }
}
.advantages .heading h2 {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 28px 0;
}
@media only screen and (min-width: 768px) {
  .advantages .heading h2 {
    font-size: 40px;
    margin: 0 0 65px 0;
  }
}
.advantages .image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 87px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .advantages .image {
    margin-top: -20px;
    background-image: none !important;
    height: unset;
    margin-bottom: 67px;
  }
}
.advantages .image img {
  display: none;
  width: 100%;
  max-width: calc(100% - 32px);
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .advantages .image img {
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  .advantages .items {
    background-image: url('/wp-content/themes/logimate/images/price-line.svg');
    background-repeat: no-repeat;
  }
}
@media only screen and (min-width: 768px) {
  .advantages .items .row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
}
.advantages .items .item {
  width: 100%;
  max-width: 302px;
  margin: 0 auto 50px auto;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .advantages .items .item {
    width: 500px;
    min-width: 300px;
    max-width: calc(33.3333% - 20px);
    margin-bottom: 60px;
    padding: 0 10px;
  }
}
.advantages .items .item img {
  width: 83px;
}
.advantages .items .item h3 {
  font-size: 23px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .advantages .items .item h3 {
    margin-bottom: 35px;
  }
}
.advantages .items .item p {
  font-size: 16px;
  line-height: 25px;
  font-weight: 300;
}
@media only screen and (min-width: 768px) {
  .advantages .items .item p {
    font-size: 17px;
  }
}
#customers-section {
  padding: 72px 0 87px;
}
@media only screen and (min-width: 768px) {
  #customers-section {
    padding: 60px 0 47px;
  }
}
#customers-section #customers {
  position: relative;
  width: 100%;
  height: 766px;
  display: none;
}
@media only screen and (min-width: 768px) {
  #customers-section #customers {
    display: block;
  }
}
#customers-section #customers .c-container {
  position: relative;
}
#customers-section #customers .c-container .customer {
  display: inline-block;
  width: 100%;
  position: relative;
  margin-top: -2%;
}
@media only screen and (min-width: 768px) {
  #customers-section #customers .c-container .customer {
    width: 33.33%;
    margin-top: 0;
  }
}
#customers-section #customers .c-container .customer .c-text-block {
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 59px;
  padding-right: 20px;
  transform: scale(0.7);
  transform-origin: top right;
}
@media only screen and (min-width: 1100px) {
  #customers-section #customers .c-container .customer .c-text-block {
    transform: unset;
  }
}
#customers-section #customers .c-container .customer .c-text-block a .c-text-block-inner,
#customers-section #customers .c-container .customer .c-text-block .c-text-block-inner {
  position: relative;
  color: #6660AF;
  font-size: 17px;
  font-weight: 300;
}
#customers-section #customers .c-container .customer .c-text-block a .c-text-block-inner .c-line,
#customers-section #customers .c-container .customer .c-text-block .c-text-block-inner .c-line {
  background: black;
  width: 176px;
  height: 1px;
  transform: rotate(49deg);
  position: absolute;
  left: -140px;
  top: 50%;
}
#customers-section #customers .c-container .customer .customer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#customers-section #customers .c-container .customer .customer-review {
  opacity: 0;
  position: absolute;
  top: 30%;
  padding-left: 59px;
  box-sizing: border-box;
  margin-right: 20%;
  max-height: 65%;
  font-size: 20px;
  font-weight: 300;
  overflow: auto;
}
#customers-section #customers .headline {
  color: #6660AF;
  font-size: 30px;
  font-weight: 900;
  position: absolute;
  width: 100%;
  text-transform: uppercase;
  bottom: 100%;
  max-width: 296px;
  z-index: 11;
}
@media only screen and (min-width: 768px) {
  #customers-section #customers .headline {
    padding-bottom: 42px;
    text-align: center;
    font-size: 40px;
    bottom: 0;
    max-width: 100%;
  }
}
@media only screen and (min-width: 1100px) {
  #customers-section #customers .headline {
    padding-bottom: 95px;
    font-size: 60px;
  }
}
#customers-section #customers .swiper-button-next,
#customers-section #customers .swiper-button-prev {
  height: 46px;
  width: 25px;
}
#customers-section #customers .swiper-button-next:after {
  content: url("/wp-content/themes/logimate/images/right_arrow.svg");
}
#customers-section #customers .swiper-button-prev:after {
  content: url("/wp-content/themes/logimate/images/left_arrow.svg");
}
@media only screen and (min-width: 768px) {
  #customers-section #customers-mobile {
    display: none;
  }
}
#customers-section #customers-mobile .c-container {
  position: relative;
}
#customers-section #customers-mobile .c-container .customer {
  height: 161px;
  position: relative;
}
#customers-section #customers-mobile .c-container .customer .c-text-block {
  position: absolute;
  left: 50%;
  top: 0;
  padding-top: 59px;
  padding-right: 20px;
  transform: scale(0.7);
  transform-origin: top left;
}
@media only screen and (max-width: 370px) {
  #customers-section #customers-mobile .c-container .customer .c-text-block {
    left: 25%;
  }
}
#customers-section #customers-mobile .c-container .customer .c-text-block a .c-text-block-inner,
#customers-section #customers-mobile .c-container .customer .c-text-block .c-text-block-inner {
  position: relative;
  color: #6660AF;
  font-size: 17px;
  font-weight: 300;
}
#customers-section #customers-mobile .c-container .customer .c-text-block a .c-text-block-inner .c-line,
#customers-section #customers-mobile .c-container .customer .c-text-block .c-text-block-inner .c-line {
  background: black;
  width: 176px;
  height: 1px;
  transform: rotate(49deg);
  position: absolute;
  left: -140px;
  top: 50%;
}
#customers-section #customers-mobile .c-container .customer .customer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#customers-section #customers-mobile .c-container .customer .customer-review {
  font-size: 16px;
  font-weight: 300;
  opacity: 0;
  position: absolute;
  top: 150px;
  z-index: 0;
  padding-left: 26px;
  padding-right: 26px;
}
#customers-section #customers-mobile .c-container .headline {
  font-size: 30px;
  font-weight: 900;
  color: #6660AF;
  max-width: 274px;
  position: absolute;
  top: -60px;
  text-transform: uppercase;
}
#contact {
  margin-bottom: 61px;
}
@media only screen and (min-width: 768px) {
  #contact {
    margin-bottom: 43px;
  }
}
#contact .background-header {
  font-size: 40px;
  font-weight: 900;
  color: #6660AF;
  opacity: 4%;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  #contact .background-header {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1100px) {
  #contact .background-header {
    font-size: 200px;
  }
}
#contact .contact-box {
  margin-top: 3px;
  margin-left: 36px;
}
@media only screen and (min-width: 768px) {
  #contact .contact-box {
    margin-top: -50px;
    margin-left: 60px;
  }
}
@media only screen and (min-width: 1100px) {
  #contact .contact-box {
    height: 321px;
  }
}
#contact .contact-box .header-container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 224px;
  padding-bottom: 66px;
}
@media only screen and (min-width: 768px) {
  #contact .contact-box .header-container {
    margin-left: 31px;
    display: inline-block;
    width: 20%;
    max-width: unset;
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 1100px) {
  #contact .contact-box .header-container {
    width: 33%;
  }
}
#contact .contact-box .header-container .header-text {
  color: #6660AF;
  font-size: 35px;
  font-weight: 900;
  text-transform: uppercase;
  position: absolute;
  top: -31px;
  left: -7px;
}
@media only screen and (min-width: 768px) {
  #contact .contact-box .header-container .header-text {
    top: -39px;
    left: -37px;
    font-size: 50px;
  }
}
@media only screen and (min-width: 1100px) {
  #contact .contact-box .header-container .header-text {
    font-size: 80px;
    top: -63px;
  }
}
#contact .contact-box .header-container img {
  width: 100%;
  height: auto;
}
#contact .contact-box .text-box {
  color: #6660AF;
  font-size: 14px;
  width: 100%;
  max-width: 265px;
  display: block;
  vertical-align: top;
  font-weight: 400;
}
@media only screen and (min-width: 768px) {
  #contact .contact-box .text-box {
    display: inline-block;
    width: 75%;
    height: 100%;
    max-width: unset;
  }
}
@media only screen and (min-width: 1100px) {
  #contact .contact-box .text-box {
    width: 60%;
    font-size: 17px;
  }
}
#contact .contact-box .text-box .text-left,
#contact .contact-box .text-box .text-right,
#contact .contact-box .text-box .button {
  display: block;
  vertical-align: top;
  box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
  #contact .contact-box .text-box .text-left,
  #contact .contact-box .text-box .text-right,
  #contact .contact-box .text-box .button {
    display: inline-flex;
    width: 32%;
    height: 100%;
    padding-left: 50px;
  }
}
#contact .contact-box .text-box .text-left div,
#contact .contact-box .text-box .text-right div,
#contact .contact-box .text-box .button div {
  align-self: center;
}
#contact .contact-box .text-box .text-left a,
#contact .contact-box .text-box .text-right a,
#contact .contact-box .text-box .button a {
  font-weight: 400;
}
#contact .contact-box .text-box .text-left {
  padding-bottom: 28px;
}
@media only screen and (min-width: 768px) {
  #contact .contact-box .text-box .text-left {
    padding-bottom: 0;
  }
}
#contact .contact-box .text-box .text-right {
  padding-bottom: 53px;
}
@media only screen and (min-width: 768px) {
  #contact .contact-box .text-box .text-right {
    padding-bottom: 0;
  }
}
#contact .contact-box .text-box .button {
  text-align: center;
}
#contact .contact-box .text-box .button div {
  color: white;
  background: #6660AF;
  padding: 12px 0;
  width: 100%;
}
.home-video-container {
  transition: background-color 250ms linear;
  display: none;
  background: rgba(0, 0, 0, 0);
  left: 0;
  position: fixed;
  height: 100%;
  top: 0;
  width: 100%;
  z-index: 999999;
}
.home-video-container.visible {
  display: flex;
  background: rgba(0, 0, 0, 0.6);
}
.home-video-container .close-button {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999999;
  height: 34px;
  width: 34px;
  text-align: center;
  background: #6660AF;
}
.home-video-container .close-button:hover {
  cursor: pointer;
}
.home-video-container .vimeo-iframe {
  width: 100%;
}
.home-video-container .BorlabsCookie {
  margin-left: auto;
  margin-right: auto;
}
/*# sourceMappingURL=home.css.map */