body {
    position:relative;
}
html {
    scroll-behavior:smooth;
}
div.comparison_content  {
    scroll-margin-top:80px
}

#top-navigation-cloud .top-navigation ul>li a.btn{
        --btn-font-size: var(--label-s);
    display: inline-flex;
    font-size: var(--btn-font-size);
}
.product-wrapper h4.weight-normal{
	font-weight: 400;
}

h2.lg{
    font-weight:700;
}
.featured-connectors {
    background: url(img/categories.svg) no-repeat top center;
    background-size: cover;
    padding: 280px 0 80px;
   
}
.block-section {
    padding: 140px 0 0;
}
.sync-comparison + .insights .customers-awards:after{
    opacity:0;
}
.site-nav, #header_buffer, .top-level-nav .nav-items, .top-level-nav .contact-info {
    display: none;
}
#top-navigation-cloud .top-navigation.singleBtn ul{
    float: none;
    text-align: right;
}
.top-navigation.singleBtn ul li{
    padding: 19px 0 15px;
}
#top-navigation-cloud .top-navigation.singleBtn ul > li a:not(.btn).simple {
    padding: 0 15px;
}
.hero_sync {
    background:url("img/left-backdrop.svg") no-repeat left center;
    background-size:cover;
    padding:6.5em 0 4em;
	position: relative;
	overflow: hidden
}

.hero-illustration{
	position: relative;
}
.illustration-wrapper{
	position: relative;
	width:100%;
	right: 0;
	top: 0;
}
.illustration-img{
	display: flex;
    width: 100%;
    justify-content: flex-end;
	position: relative;
/*
    align-items: center;
	height: 450px;
*/
}
.illustration-img img{
	width:800px;
	position: absolute;
	top: -60px;
    right: -100px;
}
.typed-animation {
    font-weight:400;
}
.logo_bar {

    padding:var(--space-48) 0;
    text-align:center;
}
.logo_bar_logo_wrapper {
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    justify-content:space-between;
}
.logo_bar_logo_item {
    flex:0 0 16.667%;
    max-width:16.667%;
    padding:1em 0;
}
.logo_bar_logo_item img {
    width:100px;
    display:block;
    margin:0 auto;
    filter:grayscale(100%);
    opacity:0.8;
}
@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-200px * 6));
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-200px * 6));
  }
}
.slider {

  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  -webkit-animation: scroll 30s linear infinite;
          animation: scroll 30s linear infinite;
  display: flex;
  width: calc(200px * 12);
}
.slider .slide {
  height: 100px;
  width: 200px;
	    display: flex;
    align-items: center;
    justify-content: center;
}
.slider .slide img{
	width:140px;
	max-width: 100%;
	filter: grayscale(100%);
    opacity: 0.8;
}
.side_navigation {
    list-style:none;
    margin:0;
    padding:0;
	max-width: 258px;
}
.side_navigation li {
    font-size:16px;
    line-height:24px;
}
.side_navigation li a {
    transition:0.2s ease-in-out;
    color:#777;
}
.side_navigation li a.active {
    font-weight:700;
    color:#00A0FF;
}
.side_navigation.fixed {
    position:fixed;
    top:80px;
}
.comparison_content {
    padding:0 0 100px;
}
.table-wrapper {
    width:100%;
    overflow-x:scroll;
}
.table {
    display:table;
    border-collapse:separate;
}
.theader,.tr {
    display:table-row;
}
.td {
    display:table-cell;
}
.th {
    display:table-cell;
    background:#ECEEF4;
    border-bottom:3px solid #B9B9B9;
    border-top:1px solid #B9B9B9;
    padding:20px 15px;
    border-left:1px dotted #B9B9B9;
    vertical-align:middle;
    width:33.333%;
}
.th:first-child {
    border-left:1px solid #B9B9B9;
    border-top-left-radius:10px;
    font-weight:700;
    font-size:1.2rem;
}
.th:last-child {
    border-right:1px solid #B9B9B9;
    border-top-right-radius:10px;
}
.th img {
    width:120px;
    max-width:100%;
    display:block;
    margin:0 auto;
}
.td {
    display:table-cell;
    background:#ffffff;
    border-bottom:1px dotted #B9B9B9;
    padding:20px 15px;
    border-left:1px dotted #B9B9B9;
    vertical-align:middle;
    text-align:center;
    width:33.333%;
}
.td:first-child {
    border-left:1px solid #B9B9B9;
    font-weight:700;
    text-align:left;
    background:#F8F9FB;
}
.td:last-child {
    border-right:1px solid #B9B9B9;
}
.tr:last-child .td {
    border-bottom:1px solid #B9B9B9;
}
.tr:last-child .td:first-child {
    border-bottom-left-radius:10px;
}
.tr:last-child .td:last-child {
    border-bottom-right-radius:10px;
}
.table-icon {
    font-size:1.5rem;
}
.offset-anchor {
    position:relative;
    top:-150px
}
.offset-anchor-less {
    position:relative;
    top:-50px
}
.callout-box {
    width:100%;
    text-align:center;
    box-shadow:4px 5px 20px rgb(35 30 32 / 10%);
    border-radius:10px;
    box-sizing:border-box;
    background:#ffffff;
    padding:50px;
}
.callout-box p {
    margin:0;
}
.testimonial {
    padding:80px 0 0;
}
#icon-data-boxes,.insights,#bottom-cta {
    background-color:var(--surface-fill-2);
}
#site-footer {
    position:relative;
    z-index: 2;
}
.nav-pills>li.active>a {
    background:#00a0ff;
}

.nav-pills>li.active>a:hover{
	background: #1f5b8e
}

@media (max-width:1199px) {
	.hero_sync{
		background-position: 50% 50%;
	}
	.side_navigation.fixed{
		max-width: 212.5px;
	}
}
@media (max-width:991px) {
	.hero_sync{
		background-position: 50% 50%;
	}
	.illustration-img img{
		right: -250px;
		top:0;
		width: 90%;
	}
	 
    	
	
	.side_navigation.fixed{
		max-width: 157.5px;
	}
}
@media (max-width:767px) {
    #sticky-nav {
        display: none;
    }
	.illustration-img img{
		right: -250px;
		top:0;
		width: 100%;
	}
	.hero_sync{
		background-position: 45% 50%;
	}
	#top-navigation-cloud .container{width:100%}
}
@media (max-width:575px) {

	.hero_sync{
		background-position: left center;
	}


	.hero-illustration{
		display: none
	}
	

}