/*
    Theme Name: Bell
    Theme URL: https://bootstrapmade.com/bell-free-bootstrap-4-template/
    Author: BootstrapMade.com
    Author URL: https://bootstrapmade.com
*/

html, body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-align: center;
	vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
}

p {
  line-height: 1.55;
  color: #333;
  font-size: 400;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 62px;
}

h2 {
  font-size: 30px;
  margin-bottom: 65px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

/* ==================================================
  General
  ================================================== */
a {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

/* ==================================================
  Elements
  ================================================== */
.btn {
  background-color: #199EB8;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #fff;
  padding: 15px 45px;
  border-radius: 50px;
  margin:2px;
}

.btn:hover {
  background-color: #E04F00;
  color: #fff;
}

.btn:focus {
  color: #fff;
}

.btn-ghost {
  border: 3px solid #fff;
  background-color: transparent;
}

.btn-ghost:hover {
  background-color: #fff;
  color: #199EB8;
}

section {
  padding: 85px 0;
}

.card {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
}

a:hover {
  text-decoration: none !important;
}

.scrolltop {
  display: none;
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #199EB8;
  color: #fff;
  text-align: center;
  font-size: 24px;
}

.scrolltop:hover, .scrolltop:active, .scrolltop:focus {
  color: #fff !important;
  opacity: .75;
}

/* ==================================================
  Hero Styling
================================================== */
.hero {
  display: table;
  position: relative;
  background-image: url(../img/cover.jpg);
  background-size: cover;
  padding: 80px 0;
  color: #fff;
  width: 100%;
  height: 100vh;
}

.hero:after {
  content: '';
  z-index: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.65);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.hero-brand {
  margin-bottom: 45px;
  display: inline-block;
}

.hero-brand-type {
	color:#ff8400;
}

.hero-brand:hover {
  opacity: .75;
}

.tagline {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-size: 26px;
  margin: 0 0 75px 0;
  color: #fff;
}

/* ==================================================
  Header Styling
================================================== */
#header {
  background: #199EB8;
  height: 70px;
}

#header #logo {
  margin: 14px 25px 0 0;
}

#header #logo h1 {
  font-size: 36px;
  margin: 0;
  padding: 2px 0;
  line-height: 1;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#header #logo h1 a, #header #logo h1 a:hover {
  color: #fff;
}

#header #logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
}

@media (max-width: 768px) {
  #header {
    height: 50px;
  }
  #header #logo {
    margin: 10px 0 0 0;
  }
  #header #logo h1 {
    padding: 2px 0;
    font-size: 26px;
  }
  #header #logo img {
    max-height: 30px;
  }
}

#header .social-nav {
  margin-top: 15px;
}

#header .social-nav a {
  font-size: 24px;
  margin-left: 15px;
  color: #fff;
}

#header .social-nav a:hover {
  color: rgba(255, 255, 255, 0.75);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.nav-menu li {
  position: relative;
  white-space: nowrap;
	text-align: left;
}

.nav-menu > li {
  float: left;
}

.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
  display: block;
}

.nav-menu ul ul {
  top: 0;
  left: 100%;
}

.nav-menu ul li {
  min-width: 180px;
}

/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
  padding-right: 30px;
}

.sf-arrows .sf-with-ul:after {
  content: "\f107";
  position: absolute;
  right: 15px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
}

.sf-arrows ul .sf-with-ul:after {
  content: "\f105";
}

/* Nav Meu Container */
#nav-menu-container {
  margin: 0;
}

@media (max-width: 768px) {
  #nav-menu-container {
    display: none;
  }
}

/* Nav Meu Styling */
.nav-menu a {
  padding: 22px 15px 18px 15px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  outline: none;
	text-align: left;
}

.nav-menu a:hover, .nav-menu li:hover > a {
  color: rgba(255, 255, 255, 0.7);
}

.nav-menu .menu-active > a {
  color: rgba(255, 255, 255, 0.7);
}
.nav-menu .menu-active {
	background: #199EB8;
}

.nav-menu ul {
  margin: 4px 0 0 15px;
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
}

.nav-menu ul li {
  background: #fff;
  border-top: 1px solid #f4f4f4;
}

.nav-menu ul li:first-child {
  border-top: 0;
}

.nav-menu ul li:hover {
  background: #199EB8;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.nav-menu ul li a {
  color: #333;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  padding: 10px 15px;
}

.nav-menu ul li a:hover {
  color: #fff;
}

.nav-menu ul ul {
  margin: 0;
}

/* Mobile Nav Toggle */
#mobile-nav-toggle {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  margin: 8px 10px 0 0;
  border: 0;
  background: none;
  font-size: 24px;
  display: none;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  outline: none;
  cursor: pointer;
}

#mobile-nav-toggle i {
  color: #fff;
}

@media (max-width: 768px) {
  #mobile-nav-toggle {
    display: inline;
  }
}

/* Mobile Nav Styling */
#mobile-nav {
  position: fixed;
  top: 0;
  padding-top: 18px;
  bottom: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.9);
  left: -260px;
  width: 260px;
  overflow-y: auto;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

#mobile-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#mobile-nav ul li {
  position: relative;
}

#mobile-nav ul li a {
  color: #fff;
  font-size: 16px;
  overflow: hidden;
  padding: 10px 22px 10px 15px;
  position: relative;
  text-decoration: none;
  width: 100%;
  display: block;
  outline: none;
}

#mobile-nav ul li a:hover {
  color: #fff;
}

#mobile-nav ul li li {
  padding-left: 30px;
}

#mobile-nav ul .menu-has-children i {
  position: absolute;
  right: 0;
  z-index: 99;
  padding: 15px;
  cursor: pointer;
  color: #fff;
}

#mobile-nav ul .menu-has-children i.fa-chevron-up {
  color: #199EB8;
}

#mobile-nav ul .menu-item-active {
  color: #199EB8;
}

#mobile-body-overly {
  width: 100%;
  height: 100%;
  z-index: 997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  display: none;
}

/* Mobile Nav body classes */
body.mobile-nav-active {
  overflow: hidden;
}

body.mobile-nav-active #mobile-nav {
  left: 0;
}

body.mobile-nav-active #mobile-nav-toggle {
  color: #fff;
}

/* ==================================================
  Stats Styling
================================================== */
.stats-row {
  margin-top: 65px;
}

.stats-col .circle {
  display: inline-block;
  width: 160px;
  height: 160px;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #666;
  border: 6px solid #199EB8;
  border-radius: 50%;
  padding: 55px 15px 0 15px;
  position: relative;
}

.stats-col .circle .stats-no {
  color: #fff;
  width: 70px;
  height: 70px;
  line-height: 70px;
  top: -25px;
  right: -15px;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: #E04F00;
  position: absolute;
  border-radius: 50%;
  font-weight: 700;
}

/* ==================================================
  Parallax Styling
  ================================================== */
.block {
  color: #fff;
  /*height: 490px;*/
  overflow: hidden;
  padding-top: 85px;
	margin-left: auto;
	margin-right: auto;
}

.block h2 {
  margin-bottom: 15px;
}

.block p {
  color: #fff;
  margin-bottom: 45px;
	text-align: justify;
	margin-left: auto;
	margin-right: auto;
	max-width: 1140px;
}

/* ==================================================
  Features Styling
  ================================================== */
.features {
  padding-bottom: 45px;
}

.features h2 {
  color: #199EB8;
}

.feature-col {
  display: table;
  padding-bottom: 45px;
}

.feature-col > div > div {
  display: table-cell;
  vertical-align: middle;
}

.feature-col > div > div:last-child {
  padding-left: 20px;
}

.feature-col .feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 15px;
  color: #fff;
  font-size: 38px;
  text-align: center;
  line-height: 70px;
  border-radius: 50%;
  display: inline-block;
}

.purple {
	background: #3473c1;
}

.green {
	background: #39a075;
}

.feature-icon-white {
	color: #fff;
  font-size: 58px;
}

.features p {
	text-align: justify;
}

.features h4 {
	text-align: left;
}

.features h4 span {
	color: #71b0ff;
}

.features h4 i {
	color: #52dea3;
}

@media only screen and (max-width: 425px) {
	.feature-icon-white {
	  font-size: 15px;
	}
}

@media only screen and (min-width: 426px) and (max-width: 768px)  {
	.feature-icon-white {
	  font-size: 35px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
	.feature-icon-white {
	  font-size: 45px;
	}
}

.feature-col h3 {
  color: #199EB8;
}

.feature-col p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #999;
}

/* ==================================================
  Call-to-action Styling
  ================================================== */
	.features-padding {
		padding: 25px 0;
	}
	.features-padding h2{
	margin-bottom: 10px !important;
}
	.sidebyside {
		position: relative;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

	}
	.sidebyside-left-back {
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		transition: all .3s ease;
		background-color: #4f48cb;
		z-index: 0;
		text-align: left;
		opacity: 0;
	}
	.sidebyside-left-over {
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		transition: all .3s ease;
		z-index: 2;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
	}
	.sidebyside-right-back {
		position: absolute;
		top: 0;
		right: 0;
		left: auto;
		width: 50%;
		transition: all .3s ease;
		background-color: #5aa331;
		z-index: 0;
		text-align: right;
		opacity: 0;
	}
	.sidebyside-right-over {
		position: absolute;
		top: 0;
		right: 0;
		left: auto;
		width: 50%;
		transition: all .3s ease;
		z-index: 2;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
	}
	.sidebyside-right-over:hover ~ .sidebyside-right-back{
		opacity: 0.5 !important;
	}
	.sidebyside-left-over:hover ~ .sidebyside-left-back{
		opacity: 0.5 !important;
	}

	.cricle-for-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20%;
		width: 20%;
		border: 1px solid #fff;
		border-radius: 20%;
		opacity: 0.3;
	}

	.cricle-h3 {
		color: #fff;
		opacity: 0.3;
	}

	@media only screen and (max-width: 375px) {
		.cricle-h3 {
			font-size: 12px;
		}
	}

	.cricle-mr {
		margin-right: 30%;
	}

	.cricle-ml {
		margin-left: 30%;
	}

.cta {
  background-color: #199EB8;
	background: repeating-linear-gradient(45deg, #1ba6c1 0%, #1ba6c1 10%, #199EB8 0%, #199EB8 50%) 0 / 15px 15px;
  padding: 0 0;
}

.cta h2 {
  margin-bottom: 5px;
}

.cta h2,
.cta p {
  color: #fff;
}

.cta p {
  margin-bottom: 0;
  opacity: .75;
}

.cta .btn-ghost {
  position: relative;
  top: 13px;
}

/* ==================================================
  Portfolio Styling
  ================================================== */
.portfolio {
  background-color: #edf6ff;
  padding-bottom: 0;
}

.portfolio h2 {
  color: #199EB8;
  margin-bottom: 25px;
}

.portfolio p {
	text-align: justify;
	margin-top: 40px;
	margin-bottom: 40px;
}

.portfolio-grid {
  margin-top: 65px;
}

.portfolio-grid .row {
  margin: 0;
}

.portfolio-grid .row > div {
  padding: 0;
}

.portfolio-grid .row > div .card img {
  width: 100%;
}

.portfolio-grid .row > div .card .portfolio-over {
  position: absolute;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.portfolio-grid .row > div .card .portfolio-over > div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.portfolio-grid .row > div .card .portfolio-over .card-title {
  color: #fff;
  font-size: 30px;
}

.portfolio-grid .row > div .card .portfolio-over .card-text {
  color: #fff;
  opacity: .75;
  padding: 0 45px;
}

.portfolio-grid .row > div .card:hover .portfolio-over {
  opacity: 1;
  visibility: visible;
}

#img-src {
	height: 250px;
	object-fit: cover;
	object-position: 50% 50%;
}

/* ====== Modal Style ============================ */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* ==================================================
  Team Styling
  ================================================== */
.team h2 {
  color: #199EB8;
}

.team .col-sm-3 {
  padding: 0;
}

.team .card > a {
  display: block;
}

.team .card img {
  width: 100%;
}

.team .card h4 {
  color: #fff;
  text-transform: uppercase;
}

.team .card p {
  font-size: 11px;
  color: #fff;
  opacity: .75;
  margin: 0;
  padding: 0 35px;
}

.team .card .social-nav {
  margin-bottom: 45px;
}

.team .card .social-nav a {
  color: #fff;
  font-size: 16px;
  margin: 0 4px;
}

.team .card .social-nav a:hover {
  opacity: .75;
}

.team .card:hover .team-over {
  opacity: 1;
  visibility: visible;
}

.team .card:hover .card-title-wrap {
  background-color: #199EB8;
}

.team .card:hover .card-title-wrap .card-title, .team .card:hover .card-title-wrap .card-text {
  color: #fff;
}

.team .team-over {
  padding-top: 45px;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.team .card-title-wrap {
  padding: 15px 25px;
  position: relative;
  z-index: 9;
  background-color: #fff;
}

.team .card-title-wrap .card-title, .team .card-title-wrap .card-text {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  display: block;
  margin: 0;
}

.team .card-title-wrap .card-title {
  font-size: 24px;
  color: #333;
}

.team .card-title-wrap .card-text {
  font-size: 18px;
  color: #999;
}

/* ==================================================
  Contact Section
  ================================================== */
#contact {
  background: #f7f7f7;
  padding: 80px 0;
}

#contact h2 {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  color: #199EB8;
}

#contact .info i {
  font-size: 22px;
  color: #199EB8;
  float: left;
}

#contact .info p {
  padding: 0 0 0 30px;
  line-height: 24px;
	text-align: left;
}

#contact .form #sendmessage {
  color: #199EB8;
  border: 1px solid #199EB8;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show {
  display: block;
}

#contact .form .validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}

#contact .form input, #contact .form textarea {
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#contact .form button[type="submit"] {
  background: #199EB8;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

#contact .form button[type="submit"]:hover {
  background: #23c2e1;
}

/* ==================================================
  Footer Styling
  ================================================== */
.site-footer {
  background-color: #111;
  padding: 0;
}

.site-footer h2, .site-footer p {
  color: #fff;
}

.site-footer p {
  opacity: .75;
  line-height: 2.0925;
}

.site-footer h2,
.site-footer .btn {
  margin-bottom: 25px;
}

.site-footer .social-nav a {
  color: #fff;
  opacity: .25;
}

.site-footer .social-nav a:hover {
  opacity: 1;
}

.site-footer .bottom {
  background-color: #000;
  padding: 20px 0;
}

.site-footer .bottom .list-inline, .site-footer .bottom p {
  margin: 0;
}

.site-footer .bottom .list-inline {
  position: relative;
  top: 5px;
}

.site-footer .bottom .list-inline a {
  color: #fff;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  margin-right: 15px;
}

.site-footer .bottom .list-inline a:hover {
  color: #199EB8;
}

.site-footer .credits {
  color: #ddd;
}

.site-footer .credits a {
  color: #199EB8;
}

/*َcanvas*/
canvas {position: absolute; z-index: 1; margin: 0 auto; display: block; left:0px; vertical-align:baseline;}
/*َEnd Canvas*/
.home-titr-20 { width:100px; display:inline-block; text-align:left;}
.home-titr-80 { width:50px; display:inline-block; text-align:right;}
/*Logo*/
.logo {
	-webkit-filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;

/*
-webkit-filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.8));
filter: drop-shadow(12px 12px 7px rgba(255, 255, 255, 0.8));*/

}

.logo:hover{
-webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1));
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1));
}

.logo-type {
	opacity: 0.3;
}

#request-workflow-illustration {
	margin-bottom:35px;
}

@-webkit-keyframes offset {
    0% {
        stroke-dashoffset: 1210
    }
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes offset {
    0% {
        stroke-dashoffset: 1210
    }
    100% {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes fade {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fade {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

#APIECO{margin-left: auto; margin-right: auto; z-index: 0;}
#APIECO a:hover text {
  fill: #00ff6e
}

#APIECO #ee-gorilla {
  transition: opacity .3s ease;
  cursor: pointer
}

#APIECO #ee-gorilla:hover {
  opacity: .7
}
#APIECO.animate #ee-support-dashed{stroke:#199eb8}
#APIECO.animate #ee-support-fill{opacity:0;-webkit-animation-name:fade;animation-name:fade;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-delay:4s;animation-delay:4s}
#APIECO.animate #ee-support{stroke:#70d8ec;-webkit-animation-name:offset;animation-name:offset;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-direction:forwards;animation-direction:forwards;stroke-dasharray:1200;stroke-dashoffset:1200;-webkit-animation-duration:3.5s;animation-duration:3.5s;-webkit-animation-delay:1s;animation-delay:1s}
#APIECO.animate #ee-support-right-dot{opacity:0;-webkit-animation-name:fade;animation-name:fade;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:4.25s;animation-delay:4.25s}

.clear-both {
	clear: both;
}
/*Extra information*/
.icon {
	position: relative;
}
.icon:before {
	position: absolute;
	display: block;
	left: 10px;
	top: 18px;
	width: 16px;
	height: 16px;
	content: '';
}
.icon-x:before {
	background: url(../img/icon-x.svg) center top no-repeat;
}
.icon-check:before {
	background: url(../img/icon-checkmark.svg) center top no-repeat;
}
.extra-img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/*Jobs*/
#jobs .feature-col .feature-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 15px;
  color: #199eb8;
  font-size: 38px;
  text-align: center;
  line-height: 70px;
  border-radius: 50%;
  display: inline-block;
}

/*Earth*/
@media (max-width: 450px) {
.HUBINNO-Distributed-Network {
width: 260px;
}
}

@media (max-width: 850px) and (min-width: 451px)  {
.HUBINNO-Distributed-Network {
width: 700px;
}
}

/*features-stats-container*/
.features-stats {
	background: url(../img/Stats-bg.jpg);
	min-height: 220px;
	padding: 30px 0px 60px 0;
}
.features-stats h2 {
	color: #fff;
	margin-bottom: 20px;
}
.features-stats-container {
	text-align: center;
	background-color: #fff;
	padding: 20px 13px;
	margin: 0 auto;
	max-width: 1140px;
}

.features-stat-val {
	font-weight: 700;
	font-size: 26px;
	position: relative;
	color: #199eb8;
	font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.features-stat-val .infinity {
	font-size: 55px;
	font-weight: 400;
	line-height: 0.7;
}

.features-stat-title {
	font-weight: 600;
	font-size: 12px;
}

.features-stats-container .col-md-3 {
	border-right: 2px solid #edf0f2;
}

.features-stats-container .col-md-3:last-child {
	border-right: 0;
}

/*Preloader*/
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row nowrap;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background: none repeat scroll 0 0 #fff;
	/*background: repeat scroll 0 0 #f9f9f9 url("../images/Pattern/9.png");*/
	text-align: left;
}
.rtl{
	direction:rtl;
}
.ltr{
	direction:ltr;
}
#the_text{ margin-bottom:30px;}
#Preload-Text{
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
	padding: 10px;
	border-radius: 5px;
}
.sk-spinner-rotating-plane.sk-spinner {
	width: 180px;
	height: 40px;
	background-color: #199eb8;
	border-radius: 5%;
	-webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
	animation: sk-rotatePlane 1.2s infinite ease-in-out;
	margin: 0 auto;
}
@keyframes sk-rotatePlane {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
/* ==================================================
  Responsive Styling
  ================================================== */
@media (max-width: 61.9em) {
  section {
    padding: 35px 0;
  }
	.cta {
    padding: 0px 0;
  }
  .features {
    padding-bottom: 5px;
  }
  p,
  .block p {
		margin: 0;
  }
  .hero-brand {
    margin-bottom: 35px;
  }
  .tagline {
    margin: 35px 0;
  }
  h1 {
    font-size: 32px;
    margin: 0;
  }
  h2,
  .tagline {
    font-size: 24px;
  }
  h2 {
    margin-bottom: 25px;
  }
  h3 {
    font-size: 14px;
  }
  .hero {
    padding: 75px 0;
  }
  .stats-col {
    margin-bottom: 25px;
  }
  .block {
    height: auto;
  }
  .feature-col {
    padding-bottom: 30px;
  }
  .portfolio-grid .card h3.card-title {
    font-size: 18px !important;
  }
  .portfolio-grid .card .card-text {
    font-size: 13px;
  }
  .team .team-over {
    padding-top: 20px;
  }
  .team .card .social-nav {
    margin-bottom: 15px;
    padding: 0;
  }
  .site-footer .social-nav {
    margin-bottom: 35px;
  }
  .site-footer .list-inline {
    text-align: center;
    padding-bottom: 15px;
  }
  .site-footer .list-inline li {
    display: inline-block;
  }
}

@media (max-width: 1025px) {
  .block {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/*Animation*/
@-webkit-keyframes kongGrats {
    0%,
    100% {
        fill: #062F4D
    }
    25% {
        fill: #9649ff
    }
    50% {
        fill: #088be8
    }
    75% {
        fill: #21bb55
    }
}

@keyframes kongGrats {
    0%,
    100% {
        fill: #062F4D
    }
    25% {
        fill: #9649ff
    }
    50% {
        fill: #088be8
    }
    75% {
        fill: #21bb55
    }
}

@-webkit-keyframes error-breakLeft {
    0% {
        -webkit-transform: translateX(15px);
        transform: translateX(15px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes error-breakLeft {
    0% {
        -webkit-transform: translateX(15px);
        transform: translateX(15px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes error-breakRight {
    0% {
        -webkit-transform: translateX(-15px);
        transform: translateX(-15px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes error-breakRight {
    0% {
        -webkit-transform: translateX(-15px);
        transform: translateX(-15px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes error-break {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    30% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    60% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

@keyframes error-break {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    30% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    60% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

@-webkit-keyframes statsFade {
    0%,
    33% {
        opacity: 0
    }
    10% {
        opacity: 1
    }
}

@keyframes statsFade {
    0%,
    33% {
        opacity: 0
    }
    10% {
        opacity: 1
    }
}

@-webkit-keyframes plugins-moveLeft {
    from {
        background-position: 0 0
    }
    to {
        background-position: -988px 0
    }
}

@keyframes plugins-moveLeft {
    from {
        background-position: 0 0
    }
    to {
        background-position: -988px 0
    }
}

@-webkit-keyframes plugins-moveRight {
    from {
        background-position: 0 0
    }
    to {
        background-position: 988px 0
    }
}

@keyframes plugins-moveRight {
    from {
        background-position: 0 0
    }
    to {
        background-position: 988px 0
    }
}

@-webkit-keyframes offset {
    0% {
        stroke-dashoffset: 1210
    }
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes offset {
    0% {
        stroke-dashoffset: 1210
    }
    100% {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes fade {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fade {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes server-flash {
    0%,
    100%,
    44% {
        opacity: 0
    }
    14%,
    50% {
        opacity: 1
    }
}

@keyframes server-flash {
    0%,
    100%,
    44% {
        opacity: 0
    }
    14%,
    50% {
        opacity: 1
    }
}

@-webkit-keyframes gears {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes gears {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes flash {
    0%,
    100%,
    44% {
        opacity: 0
    }
    14%,
    50% {
        opacity: 1
    }
}


@keyframes flash {
    0%,
    100%,
    44% {
        opacity: 0
    }
    14%,
    50% {
        opacity: 1
    }
}

@-webkit-keyframes computer {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes computer {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

/*4459*/
.carousel-indicators,
.heading-divide {
    display: -webkit-box;
    display: -ms-flexbox
}

/*10788*/
a.no-decoration {
    text-decoration: none;
    cursor: pointer
}

/*10864*/
@media (min-width:768px) {
    .heading-1.hero-kong,
    h1.hero-kong {
        font-size: 50px;
        line-height: 60px
    }
}

.home .kong-masthead .hero-kong span {
    font-weight: 100
}

/*10941*/
p.lrg {
    font-size: 19px;
    line-height: 24px;
    font-weight: 400;
    color: rgba(0, 0, 0, .7)
}

/*10969*/
a.no-decoration {
    color: initial
}

/*11001*/
.pt-0x,
.py-0x {
    padding-top: 0
}

/*11309*/
.mb-1x,
.my-1x {
    margin-bottom: 1rem
}

/*11324*/
.pt-2x,
.py-2x,
.whr-group {
    padding-top: 2rem
}

.pb-2x,
.py-2x {
    padding-bottom: 2rem
}
/*11250*/
.mb-0x,
.my-0x {
    margin-bottom: 0
}

/*11330*/
.pb-2x,
.py-2x {
    padding-bottom: 2rem
}

/*11351*/
.mb-2x,
.my-2x {
    margin-bottom: 2rem
}
/*11406*/
.pt-4x,
.py-4x {
    padding-top: 4rem
}


.pb-4x,
.py-4x {
    padding-bottom: 4rem
}
/*11431*/
.mb-4x,
.my-4x {
    margin-bottom: 4rem
}

/*12032*/
.pt-md-0x,
    .py-md-0x {
        padding-top: 0
    }
    .pb-md-0x-,
    .py-md-0x {
        padding-bottom: 0
    }

/*12164*/
.pb-md-4x-,
    .py-md-4x {
        padding-bottom: 4rem
    }

/*13058*/
.heading-divide {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.heading-divide::after,
.heading-divide::before {
    content: '';
    height: 1px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border-bottom: 1px solid #E0E1E2
}

.heading-divide::before {
    margin-right: .75em
}


.heading-divide::after {
    margin-left: .75em
}

/*14190*/
.home .kong-masthead .hero-kong {
    font-size: 60px;
    line-height: 70px;
    font-weight: 300;
    color: #fff
}


/*14247*/
.home .kong-unleashed .unleashed-intro {
    background-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1229" height="371" viewBox="0 0 1229 371" version="1.1">\a<defs>\a <linearGradient id="a" x1="49.5979965%" x2="49.5979965%" y1="67.4427083%" y2="0%">\a <stop stop-color="%23FFF" stop-opacity="0" offset="0%"></stop>\a <stop stop-color="%23FFF" offset="100%"></stop>\a </linearGradient>\a</defs>\a<g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1" transform="translate(-1 -2)" opacity=".1">\a <path stroke="%23231F20" stroke-width="1.5" d="M649.525176 364.384617V330.0151l75.248069-75.202907v-37.312034"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M648.525176 288.61912v-89.771769l60.496054-59.461018" id="path-3"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M693.634015 217.500159l69.432068-69.387432V73.6805363"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M728.345249 109.702199V38.276077"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M689.650011 107.000734V2.9715537"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M617.19714 365.384617v-39.29021l-33.672033-33.642391v-74.951857" id="path-4"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M617.19714 289.453942V181.523267l-70.336069-70.290851V38.279275"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M546.861071 182.186841l-39.584039-39.550596V41.6805363"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M585 365.384617v-39.953784"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M546.861071 289.453942v-71.953783l-73.152072-73.105044V37.6367106"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M617.19714 145.585551V44.6797368l-36.616036-36.592496"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M654.19714 105.585551V33.6797368l-30.616036-30.592496"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M765.079685 216.92213l35.680035-35.665092v-35.673086l71.19207-71.146302"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M871.95499 145.585551l72.776071-72.7292853V1.6060307" id="path-5"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M850.102968 168.859402l-49.488048 49.456233"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M799.798119 73.6781378l37.640037-37.6158388V14.6044318"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M799 36.8737778V3.6084293"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M871.95499 38.279275l36.288035-36.2567118"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M941.899859 145.679091l73.200071-73.1450183V11.6036323"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M976 15.136563V68.775687"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M506.704231 237.775935l-35.680035-35.657096v-35.673087l-71.19207-71.1542967"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M387.399314 139.331967l49.496049 49.456234"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M448.344974 95.2898563L363.872891 10.872079"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M361.774489 118.142378L288.582417 44.99736"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M278.774489 106.142378L180 3"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M325 31l42.200041 42.1729117"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M252 3l5.200041 5.1729117"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M904.712622 182.186841h72.504071l73.104067-73.057074"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M868.102986 216.446436l-36.192035 36.168768h-63.952063l-40.968041 40.949697"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M1085.916 72.8114945l71.33607-71.2902093"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M1230.55764 3.3722636l-34.71354 34.7135357h-32.34403"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M1155.97047 75.8335534l-69.24007 69.1955546" id="path-2"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M1020.00154 184.544527l-37.872042 37.84769h-73.888073l-34.448033 34.441877"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M505.38423 287.61912l-33.688033-33.666375h-71.864071l-68.840067-68.787817" id="path-1"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M399.860926 214.657984l-71.36807-71.330183h-71.00807l-66.984065-66.941003"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M186.743117 149.114484L45 3"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M114.915046.2333125l38.584038 38.559233"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M325.172853 215.516633H291.46082l-33.976034-33.954191h-39.432038"></path>\a <path stroke="%23231F20" stroke-width="1.5" d="M34.4608198 38.516633L.4847865 4.562442"></path>\a <g class="solid-dots">\a <circle cx="155" cy="39" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="189" cy="75" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="186" cy="149" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="219" cy="181" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="279" cy="106" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="285" cy="42" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="323" cy="28" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="385" cy="138" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="474" cy="37" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="508" cy="37" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="547" cy="37" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="582" cy="8" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="690" cy="110" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="729" cy="110" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="763" cy="73" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="799" cy="39" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="837" cy="15" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="871" cy="38" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="871" cy="75" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="871" cy="146" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle r="5" fill="%23000" fill-opacity=".85">\a <animateMotion keyPoints="1;0" keyTimes="0;1" calcMode="linear" dur="2s" repeatCount="indefinite">\a <mpath xlink:href="%23path-5"></mpath>\a </animateMotion>\a </circle>\a <circle cx="1022" cy="181" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="1050" cy="110" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="1086" cy="146" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle r="5" fill="%23000" fill-opacity=".85">\a <animateMotion calcMode="linear" dur="2s" repeatCount="indefinite">\a <mpath xlink:href="%23path-2"></mpath>\a </animateMotion> \a </circle>\a <circle cx="1164" cy="38" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="1015" cy="15" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="976" cy="15" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="801" cy="220" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="724" cy="215" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="727" cy="294" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="649" cy="292" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle r="5" fill="%23000" fill-opacity=".85">\a <animateMotion keyPoints="1;0" keyTimes="0;1" calcMode="linear" dur="3s" repeatCount="indefinite">\a <mpath xlink:href="%23path-3"></mpath>\a </animateMotion>\a </circle>\a <circle cx="618" cy="366" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle r="5" fill="%23000" fill-opacity=".85">\a <animateMotion keyPoints="1;0" keyTimes="0;1" calcMode="linear" dur="2s" repeatCount="indefinite">\a <mpath xlink:href="%23path-4"></mpath>\a </animateMotion>\a </circle>\a <circle cx="585" cy="326" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="508" cy="237" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle cx="508" cy="289" r="5" fill="%23000" fill-opacity=".85"></circle>\a <circle r="5" fill="%23000" fill-opacity=".85">\a <animateMotion keyPoints="1;0" keyTimes="0;1" calcMode="linear" dur="2s" repeatCount="indefinite">\a <mpath xlink:href="%23path-1"></mpath>\a </animateMotion>\a </circle>\a <circle cx="361" cy="7" r="5" fill="%23000" fill-opacity=".85"></circle>\a </g>\a <g class="open-dot">\a <circle cx="37.5" cy="41.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="259.5" cy="11.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="364.5" cy="120.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="369.5" cy="74.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="396.5" cy="93.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="451.5" cy="97.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="440.5" cy="191.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="401.5" cy="216.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="327.5" cy="181.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="327.5" cy="215.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="546.5" cy="292.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="583.5" cy="214.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="585.5" cy="368.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="649.5" cy="368.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="617.5" cy="292.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="617.5" cy="149.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="654.5" cy="109.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="711.5" cy="137.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="728.5" cy="34.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="797.5" cy="75.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="763.5" cy="218.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="690.5" cy="220.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="851.5" cy="166.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="870.5" cy="214.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="901.5" cy="181.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="940.5" cy="147.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="976.5" cy="72.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="1084.5" cy="74.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="1158.5" cy="73.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="870.5" cy="259.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a <circle cx="548.5" cy="185.5" r="3.75" stroke="%23000" stroke-opacity=".85" stroke-width="1.5"></circle>\a </g>\a <path fill="url(%23a)" d="M1 2h1231v375H1"></path>\a</g></svg>\a');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

@media (min-width:992px) {
    .home .kong-unleashed .unleashed-intro {
        background-size: contain
    }
}

.home .plugins-banner {
    overflow: hidden
}

@media (min-width:768px) {
    .home .plugins-banner {
        background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, .01) 25%, rgba(255, 255, 255, .01) 75%, #fff 100%)
    }
}

.home .plugins-banner .kongIcon img {
    box-shadow: 0 0 20px 20px #fff
}

.home .plugins-banner svg .dot-solid {
    -webkit-animation: kongGrats .5s linear infinite;
    animation: kongGrats .5s linear infinite
}

.home .scrolling-icons {
    position: absolute;
    top: calc(50% - 30px);
    width: 972px;
    height: 70px;
    overflow: hidden;
    background-repeat: repeat-x;
    z-index: -1
		-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
		opacity: 0.2;
}

.home .scrolling-icons:hover {
		-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
		filter: grayscale(0%);
}
/*14294*/
.home .scrolling-icons.plugins-left {
    right: calc(50% + 44px);
    background-image: url(../img/plugins-left.jpg);
    background-position: 0 top;
    -webkit-animation: plugins-moveRight 40s linear infinite;
    animation: plugins-moveRight 40s linear infinite
}

.home .scrolling-icons.plugins-right {
    left: calc(50% + 43px);
    background-image: url(../img/plugins-right.jpg);
    background-position: 0 top;
    -webkit-animation: plugins-moveLeft 40s linear infinite;
    animation: plugins-moveLeft 40s linear infinite
}

/*14781*/
.page-kong-enterprise-edition .kong-enterprise-intro .heading-divide {
    font-weight: 500;
    color: rgba(0, 0, 0, .7)
}


/*API Gateway flow animation*/
.page-api-gateway svg {
    /*width: 50%*/
}

.page-api-gateway .cluster-lights {
    -webkit-animation: server-flash .6s infinite ease-in-out;
    animation: server-flash .6s infinite ease-in-out
}

.page-api-gateway .cluster-lights.light-1 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.page-api-gateway #request-workflow-illustration:hover .computer-line {
    opacity: 0;
    -webkit-animation: computer 1s forwards infinite;
    animation: computer 1s forwards infinite
}

.page-api-gateway #request-workflow-illustration:hover .computer-line.computer-line-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.page-api-gateway #request-workflow-illustration:hover .computer-line.computer-line-2 {
    -webkit-animation-delay: .33s;
    animation-delay: .33s
}

.page-api-gateway #request-workflow-illustration:hover .computer-line.computer-line-3 {
    -webkit-animation-delay: .66s;
    animation-delay: .66s
}

.page-api-gateway #request-workflow-illustration:hover .light {
    -webkit-animation: flash 1.5s forwards infinite;
    animation: flash 1.5s forwards infinite
}

.page-api-gateway #request-workflow-illustration:hover .light.even {
    -webkit-animation-delay: .25s;
    animation-delay: .25s
}

.page-api-gateway #request-workflow-illustration:hover .light.odd {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.page-api-gateway #request-workflow-illustration:hover .gear {
    -webkit-animation: gears 5s infinite linear;
    animation: gears 5s infinite linear
}

.page-api-gateway #request-workflow-illustration:hover .gear.gear-1 {
    -webkit-transform-origin: 27px 23px;
    transform-origin: 27px 23px
}

.page-api-gateway #request-workflow-illustration:hover .gear.gear-2 {
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
    -webkit-transform-origin: 48px 35px;
    transform-origin: 48px 35px
}

.page-api-gateway .dark>li {
    font-size: 15px;
    color: #FAFBFC
}