@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');
					  
			  
#svg-library {
  display: none;
}



@-webkit-keyframes avAnimationEntry {
  from {
    -webkit-transform: scale3d(0.62, 0.62, 0.62);
            transform: scale3d(0.62, 0.62, 0.62);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes avAnimationEntry {
  from {
    -webkit-transform: scale3d(0.62, 0.62, 0.62);
            transform: scale3d(0.62, 0.62, 0.62);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.av-animation {
  position: relative;
  width: 502px;
  height: 502px;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
          animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.av-animation-entry-animated .av-animation {
  -webkit-animation-name: avAnimationEntry;
          animation-name: avAnimationEntry;
}
.av-animation svg {
  width: 100%;
  height: 100%;
}

.av-animation-laptop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 165px;
  height: 115px;
  margin-top: -57.5px;
  margin-left: -82.5px;
}
.av-animation-laptop svg {
  fill: #9B75FF;
}

.av-animation-tick,
.av-animation-frame,
.av-animation-icon,
.av-animation-circle {
  position: absolute;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

@-webkit-keyframes avAnimationTickEntry {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  62% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes avAnimationTickEntry {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  62% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.av-animation-tick {
  top: 212px;
  left: 216px;
  width: 69px;
  height: 49px;
  will-change: transform;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
          animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.av-animation-entry-animated .av-animation-tick {
  -webkit-animation-name: avAnimationTickEntry;
          animation-name: avAnimationTickEntry;
}

.av-animation-frame {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #00BA5D;
  border-radius: 2px;
}

.av-animation-circle {
  top: 50%;
  left: 50%;
  width: 33px;
  height: 33px;
  border: 1.25px dashed #00BA5D;
  border-radius: 50%;
  -webkit-transition: border-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-color: transparent;
  -webkit-transform: scale3d(1, 1, 1) translate(-50%, -50%);
          transform: scale3d(1, 1, 1) translate(-50%, -50%);
}
.section:not([data-av-animation="all"]) .av-animation-circle {
  background-color: #fff;
  top: calc(50% + 15px);
  width: 214px;
  height: 214px;
}

.av-animation-icon {
  top: 16px;
  left: 25px;
  width: 18px;
  height: 18px;
}
.av-animation-icon svg {
  fill: #00BA5D;
}

.av-animation-texts {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 214px;
  height: 214px;
  margin-top: -107px;
  margin-left: -107px;
  padding: 0 24px;
  text-align: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  color: #41424E;
  font-size: 13px;
  line-height: 1.45;
}

.av-animation-text {
  display: none;
}
[data-av-animation="1"] .av-animation-text[data-av-animation-text="1"] {
  display: block;
}
[data-av-animation="2"] .av-animation-text[data-av-animation-text="2"] {
  display: block;
}
[data-av-animation="3"] .av-animation-text[data-av-animation-text="3"] {
  display: block;
}
[data-av-animation="4"] .av-animation-text[data-av-animation-text="4"] {
  display: block;
}
[data-av-animation="5"] .av-animation-text[data-av-animation-text="5"] {
  display: block;
}
[data-av-animation="6"] .av-animation-text[data-av-animation-text="6"] {
  display: block;
}
[data-av-animation="7"] .av-animation-text[data-av-animation-text="7"] {
  display: block;
}
[data-av-animation="8"] .av-animation-text[data-av-animation-text="8"] {
  display: block;
}

.av-animation-title {
  font-weight: bold;
  margin-bottom: 7px;
}

.av-animation-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin-top: -36px;
  margin-left: -36px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
.av-animation-item svg {
  will-change: fill;
  -webkit-transition: fill 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: fill 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  fill: rgba(155, 117, 255, 0.38);
}
[data-av-animation="all"] .av-animation-item svg {
  fill: #9B75FF;
}
[data-av-animation="1"] .av-animation-item[data-av-animation-item="1"] svg {
  fill: #00BA5D;
}
[data-av-animation="2"] .av-animation-item[data-av-animation-item="2"] svg {
  fill: #00BA5D;
}
[data-av-animation="3"] .av-animation-item[data-av-animation-item="3"] svg {
  fill: #00BA5D;
}
[data-av-animation="4"] .av-animation-item[data-av-animation-item="4"] svg {
  fill: #00BA5D;
}
[data-av-animation="5"] .av-animation-item[data-av-animation-item="5"] svg {
  fill: #00BA5D;
}
[data-av-animation="6"] .av-animation-item[data-av-animation-item="6"] svg {
  fill: #00BA5D;
}
[data-av-animation="7"] .av-animation-item[data-av-animation-item="7"] svg {
  fill: #00BA5D;
}
[data-av-animation="8"] .av-animation-item[data-av-animation-item="8"] svg {
  fill: #00BA5D;
}
.av-animation-item:nth-child(1) {
  -webkit-transform: rotate(-112.5deg) translate3d(179px, 0, 0) rotate(22.5deg);
          transform: rotate(-112.5deg) translate3d(179px, 0, 0) rotate(22.5deg);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.av-animation-item:nth-child(2) {
  -webkit-transform: rotate(-67.5deg) translate3d(179px, 0, 0) rotate(-22.5deg);
          transform: rotate(-67.5deg) translate3d(179px, 0, 0) rotate(-22.5deg);
  -webkit-transition-delay: 0.0375s;
          transition-delay: 0.0375s;
}
.av-animation-item:nth-child(3) {
  -webkit-transform: rotate(-22.5deg) translate3d(179px, 0, 0) rotate(-67.5deg);
          transform: rotate(-22.5deg) translate3d(179px, 0, 0) rotate(-67.5deg);
  -webkit-transition-delay: 0.075s;
          transition-delay: 0.075s;
}
.av-animation-item:nth-child(4) {
  -webkit-transform: rotate(22.5deg) translate3d(179px, 0, 0) rotate(-112.5deg);
          transform: rotate(22.5deg) translate3d(179px, 0, 0) rotate(-112.5deg);
  -webkit-transition-delay: 0.1125s;
          transition-delay: 0.1125s;
}
.av-animation-item:nth-child(5) {
  -webkit-transform: rotate(67.5deg) translate3d(179px, 0, 0) rotate(-157.5deg);
          transform: rotate(67.5deg) translate3d(179px, 0, 0) rotate(-157.5deg);
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.av-animation-item:nth-child(6) {
  -webkit-transform: rotate(112.5deg) translate3d(179px, 0, 0) rotate(-202.5deg);
          transform: rotate(112.5deg) translate3d(179px, 0, 0) rotate(-202.5deg);
  -webkit-transition-delay: 0.1875s;
          transition-delay: 0.1875s;
}
.av-animation-item:nth-child(7) {
  -webkit-transform: rotate(157.5deg) translate3d(179px, 0, 0) rotate(-247.5deg);
          transform: rotate(157.5deg) translate3d(179px, 0, 0) rotate(-247.5deg);
  -webkit-transition-delay: 0.225s;
          transition-delay: 0.225s;
}
.av-animation-item:nth-child(8) {
  -webkit-transform: rotate(202.5deg) translate3d(179px, 0, 0) rotate(-292.5deg);
          transform: rotate(202.5deg) translate3d(179px, 0, 0) rotate(-292.5deg);
  -webkit-transition-delay: 0.2625s;
          transition-delay: 0.2625s;
}
.av-animation-entry-animated .av-animation-item {
  opacity: 1;
}
.av-animation-entry-animated .av-animation-item:nth-child(1) {
  -webkit-transform: rotate(-90deg) translate3d(179px, 0, 0) rotate(90deg);
          transform: rotate(-90deg) translate3d(179px, 0, 0) rotate(90deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(2) {
  -webkit-transform: rotate(-45deg) translate3d(179px, 0, 0) rotate(45deg);
          transform: rotate(-45deg) translate3d(179px, 0, 0) rotate(45deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(3) {
  -webkit-transform: rotate(0deg) translate3d(179px, 0, 0) rotate(0deg);
          transform: rotate(0deg) translate3d(179px, 0, 0) rotate(0deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(4) {
  -webkit-transform: rotate(45deg) translate3d(179px, 0, 0) rotate(-45deg);
          transform: rotate(45deg) translate3d(179px, 0, 0) rotate(-45deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(5) {
  -webkit-transform: rotate(90deg) translate3d(179px, 0, 0) rotate(-90deg);
          transform: rotate(90deg) translate3d(179px, 0, 0) rotate(-90deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(6) {
  -webkit-transform: rotate(135deg) translate3d(179px, 0, 0) rotate(-135deg);
          transform: rotate(135deg) translate3d(179px, 0, 0) rotate(-135deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(7) {
  -webkit-transform: rotate(180deg) translate3d(179px, 0, 0) rotate(-180deg);
          transform: rotate(180deg) translate3d(179px, 0, 0) rotate(-180deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(8) {
  -webkit-transform: rotate(225deg) translate3d(179px, 0, 0) rotate(-225deg);
          transform: rotate(225deg) translate3d(179px, 0, 0) rotate(-225deg);
}
			  

		  

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

body {
  background: #fff;
  color: #444444;
  font-family: "helvetica", sans-serif;
  font-weight:300 ;
	line-height: 1.6;
}

a {
  color: #3094db;
  transition: 0.5s;
}

a:hover,
a:active,
a:focus {
  color: #6abcf6;
  outline: none;
  text-decoration: none;
}

p {
  padding: 0;
  margin: 0 0 20px 0;
	font-size:15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "helvetica", sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0;
}

/* Back to top button */

.back-to-top {
  position: fixed;
  display: none;
  background: #3094db;
  color: #fff;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 1;
  font-size: 16px;
  border-radius: 50%;
  right: 25px;
bottom: 60px;
  transition: background 0.5s;
  z-index: 11;
}

.back-to-top i {
  padding-top: 12px;
  color: #fff;
}

/* Prelaoder */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #000;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #444;
  border-top: 6px solid #3094db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

#header {
  padding: 20px 0;
  height: 92px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
}

#header.header-scrolled {
  background: rgba(0, 0, 0, 0.9);
  padding: 20px 0;
  height: 82px;
  transition: all 0.5s;
}

#header #logo {
  float: left;
}

#header #logo h1 {
  font-size: 34px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
}

#header #logo h1 a,
#header #logo h1 a:hover {
  color: #fff;
  padding-left: 10px;
 /* border-left: 4px solid #3094db;*/
}

#header #logo img {
  padding: 0;
  margin: 0;
}

/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/

#intro {
  display: table;
  width: 100%;
  height: 100vh;
  background: #000;
}

#intro .carousel-item {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#intro .carousel-item::before {
  content: '';
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#intro .carousel-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#intro .carousel-background img {
  max-width: 100%;
}

#intro .carousel-content {
  text-align: center;
}

#intro h2 {
  color: #fff;
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
}

#intro p {
  width: 80%;
  margin: 0 auto 30px auto;
  color: #fff;
}

#intro .carousel-fade {
  overflow: hidden;
}

#intro .carousel-fade .carousel-inner .carousel-item {
  transition-property: opacity;
}

#intro .carousel-fade .carousel-inner .carousel-item,
#intro .carousel-fade .carousel-inner .active.carousel-item-left,
#intro .carousel-fade .carousel-inner .active.carousel-item-right {
  opacity: 0;
}

#intro .carousel-fade .carousel-inner .active,
#intro .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
#intro .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
  opacity: 1;
  transition: 0.5s;
}

#intro .carousel-fade .carousel-inner .carousel-item-next,
#intro .carousel-fade .carousel-inner .carousel-item-prev,
#intro .carousel-fade .carousel-inner .active.carousel-item-left,
#intro .carousel-fade .carousel-inner .active.carousel-item-right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#intro .carousel-control-prev,
#intro .carousel-control-next {
  width: 10%;
}

#intro .carousel-control-next-icon,
#intro .carousel-control-prev-icon {
  background: none;
  font-size: 32px;
  line-height: 1;
}

#intro .carousel-indicators li {
  cursor: pointer;
}

#intro .btn-get-started {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  color: #fff;
  background: #3094db;
}

#intro .btn-get-started:hover {
  background: #fff;
  color: #3094db;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Download Button */
.downloadbtn {
  border: 2px solid #fff;
  position: relative;
  top: -2px;
  border-radius: 0px;
  padding: 10px 18px !important;
}
/* 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;
}

.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 {
  float: right;
  margin: 0;
}

/* Nav Meu Styling */

.nav-menu a {
  padding: 10px ;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: "roboto mono", sans-serif;
  font-weight: 700;
  font-size: 13px;
  outline: none;
	text-transform: uppercase;
}

.nav-menu li:hover > a,
.nav-menu > .menu-active > a {
  color: #3094db;
}

.nav-menu > li {
  margin-left: 10px;
}

.nav-menu ul {
  margin: 4px 0 0 0;
  padding: 10px;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  background: #fff;
}

.nav-menu ul li {
  transition: 0.3s;
}

.nav-menu ul li a {
  padding: 10px;
  color: #333;
  transition: 0.3s;
  display: block;
  font-size: 13px;
  text-transform: none;
}

.nav-menu ul li:hover > a {
  color: #3094db;
}

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

/* Mobile Nav Toggle */

#mobile-nav-toggle {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  margin: 20px 20px 0 0;
  border: 0;
  background: none;
  font-size: 24px;
  display: none;
  transition: all 0.4s;
  outline: none;
  cursor: pointer;
}

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

/* Mobile Nav Styling */

#mobile-nav {
  position: fixed;
  top: 0;
  padding-top: 18px;
  bottom: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.8);
  left: -330px;
  width: 330px;
  overflow-y: auto;
  transition: 0.4s;
}

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

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

#mobile-nav ul li a {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  overflow: hidden;
  padding: 10px 22px 10px 15px;
  position: relative;
  text-decoration: none;
  width: 100%;
  display: block;
  outline: none;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}

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

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

#mobile-nav ul li.menu-active a {
  color: #3094db;
}

#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: #3094db;
}

#mobile-nav ul .menu-has-children li a {
  text-transform: none;
}

#mobile-nav ul .menu-item-active {
  color: #3094db;
}

#mobile-body-overly {
  width: 100%;
  height: 100%;
  z-index: 997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  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;
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/

/* Sections Header
--------------------------------*/

.section-header h3 {
  font-size: 32px;
  color: #111;
  text-align: center;
  font-weight: 700;
  position: relative;
  padding-bottom: 25px;
  font-family:"playfair display", sans-serif;
}

.section-header h3::before {
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #bbb;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-header h3::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #3094db;
  bottom: 0;
  left: calc(50% - 20px);
}

.section-header p {
  text-align: center;
  color: #333;
}

/* Section with background
--------------------------------*/

.section-bg {
  background: #f7f7f7;
}

/* Featured Services Section
--------------------------------*/

#featured-services {
  background: #000;
}

#featured-services .box {
  padding: 30px 20px;
}

#featured-services .box-bg {
  background-image: linear-gradient(0deg, #000000 0%, #242323 50%, #000000 100%);
}

#featured-services i {
  color: #3094db;
  font-size: 48px;
  display: inline-block;
  line-height: 1;
}

#featured-services h4 {
  font-weight: 400;
  margin: 15px 0;
  font-size: 18px;
}

#featured-services h4 a {
  color: #fff;
}

#featured-services h4 a:hover {
  color: #3094db;
}

#featured-services p {
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  margin-bottom: 0;
}

/* About Us Section
--------------------------------*/

#about {
  background: url("../img/about-bg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 60px 0 40px 0;
  position: relative;
}

#about::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 9;
}

#about .container {
  position: relative;
  z-index: 10;
}

#about .about-col {
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

#about .about-col .img {
  position: relative;
}

#about .about-col .img img {
  border-radius: 4px 4px 0 0;
}

#about .about-col .icon {
  width: 64px;
  height: 64px;
  padding-top: 8px;
  text-align: center;
  position: absolute;
  background-color: #3094db;
  border-radius: 50%;
  text-align: center;
  border: 4px solid #fff;
  left: calc( 50% - 32px);
  bottom: -30px;
  transition: 0.3s;
}

#about .about-col i {
  font-size: 36px;
  line-height: 1;
  color: #fff;
  transition: 0.3s;
}

#about .about-col:hover .icon {
  background-color: #fff;
}

#about .about-col:hover i {
  color: #3094db;
}

#about .about-col h2 {
  color: #000;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  padding: 0;
  margin: 40px 0 12px 0;
}

#about .about-col h2 a {
  color: #000;
}

#about .about-col h2 a:hover {
  color: #3094db;
}

#about .about-col p {
  font-size: 14px;
  line-height: 24px;
  color: #333;
  margin-bottom: 0;
  padding: 0 20px 20px 20px;
}

/* Services Section
--------------------------------*/

#services {
  background: #fff;
  background-size: cover;
  padding: 60px 0 40px 0;
}

#services .box {
  margin-bottom: 30px;
}

#services .icon {
  float: left;
}

#services .icon i {
  color: #3094db;
  font-size: 36px;
  line-height: 1;
  transition: 0.5s;
}

#services .title {
  margin-left: 60px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

#services .title a {
  color: #111;
}

#services .box:hover .title a {
  color: #3094db;
}

#services .description {
  font-size: 14px;
  margin-left: 60px;
  line-height: 24px;
  margin-bottom: 0;
}

/* Call To Action Section
--------------------------------*/

#aboutqoute {
  
  background-size: cover;
  padding: 80px 0;
}

#aboutqoute h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

#aboutqoute p {
  color: #fff;
}

#aboutqoute .cta-btn {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #fff;
  color: #fff;
}

#aboutqoute .cta-btn:hover {
  background: #3094db;
  border: 2px solid #3094db;
}


#regquote {
  
  background-size: cover;
  padding: 80px 0;
}

#regquote h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

#regquote p {
  color: #fff;
}

#regquote .cta-btn {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #fff;
  color: #fff;
}

#regquote .cta-btn:hover {
  background: #3094db;
  border: 2px solid #3094db;
}

#portfolioqoute {
  
  background-size: cover;
  padding: 80px 0;
}

#portfolioqoute h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

#portfolioqoute p {
  color: #fff;
}

#portfolioqoute .cta-btn {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #fff;
  color: #fff;
}

#portfolioqoute .cta-btn:hover {
  background: #3094db;
  border: 2px solid #3094db;
}

#newclientsqoute {
  
  background-size: cover;
  padding: 80px 0;
}

#newclientsqoute h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

#newclientsqoute p {
  color: #fff;
}

#newclientsqoute .cta-btn {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #fff;
  color: #fff;
}

#leadership1 {
  
  background-size: cover;
  padding: 80px 0;
}

#leadership1 h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

#leadership1 p {
  color: #fff;
}

#leadership1 .cta-btn {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #fff;
  color: #fff;
}

#leadership1 .cta-btn:hover {
  background: #3094db;
  border: 2px solid #3094db;
}

#call-to-action {
  background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(0, 0, 0, 0.1)), url(../img/call-to-action-bg.jpg) fixed center center;
  background-size: cover;
  padding: 80px 0;
}

#call-to-action h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

#call-to-action p {
  color: #fff;
}

#call-to-action .cta-btn {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #fff;
  color: #fff;
}

#call-to-action .cta-btn:hover {
  background: #3094db;
  border: 2px solid #3094db;
}

/* Call To Action Section
--------------------------------*/



#skills .progress {
  height: 24px;
  margin-bottom: 10px;
}

#skills .progress .skill {

  font-family:roboto mono,sans-serif;
  line-height: 30px;
  padding: 0;
  margin: 0 0 0 10px;
  font-size:10px;
  font-weight:bold;

}

#skills .progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 10px 0 0;
}

#skills .progress-bar {
  width: 1px;
  text-align: left;
  transition: .9s;
}


#skills1 .progress {
  height: 24px;
  margin-bottom: 10px;
}

#skills1 .progress .skill {

  font-family:roboto mono,sans-serif;
  line-height: 30px;
  padding: 0;
  margin: 0 0 0 10px;
  font-size:10px;
  font-weight:bold;

}

#skills1.progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 10px 0 0;
}

#skills1 .progress-bar {
  width: 1px;
  text-align: left;
  transition: .9s;
}

/* Facts Section
--------------------------------*/

#facts {
  background: url("../img/facts-bg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 60px 0 0 0;
  position: relative;
}

#facts::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.88);
  z-index: 9;
}

#facts .container {
  position: relative;
  z-index: 10;
}

#facts .counters span {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 48px;
  display: block;
  color: #3094db;
}

#facts .counters p {
  padding: 0;
  margin: 0 0 20px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #111;
}

#facts .facts-img {
  text-align: center;
  padding-top: 30px;
}

/* Portfolio Section
--------------------------------*/

#portfolio {
  
}

#portfolio #portfolio-flters {
  padding: 0;
  margin: 5px 0 35px 0;
  list-style: none;
  text-align: center;
}

#portfolio #portfolio-flters li {
  cursor: pointer;
  margin: 15px 15px 15px 0;
  display: inline-block;
  padding: 10px 20px;
  font-size: 12px;
  line-height: 20px;
  color: #666666;
  border-radius: 4px;
  text-transform: uppercase;
  background: #fff;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

#portfolio #portfolio-flters li:hover,
#portfolio #portfolio-flters li.filter-active {
  background: #3094db;
  color: #fff;
}

#portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

#portfolio #portfolio-flters1 {
  padding: 0;
  margin: 5px 0 35px 0;
  list-style: none;
  text-align: center;
}

#portfolio #portfolio-flters1 li {
  cursor: pointer;
  margin: 15px 15px 15px 0;
  display: inline-block;
  padding: 10px 20px;
  font-size: 12px;
  line-height: 20px;
  color: #666666;
  border-radius: 4px;
  text-transform: uppercase;
  background: #fff;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

#portfolio #portfolio-flters1 li:hover,
#portfolio #portfolio-flters1 li.filter-active {
  background: #3094db;
  color: #fff;
}

#portfolio #portfolio-flters1 li:last-child {
  margin-right: 0;
}


#portfolio .portfolio-wrap {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

#portfolio .portfolio-wrap:hover {
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
}

#portfolio .portfolio-item {
  position: relative;
  height: 360px;
  overflow: hidden;
}

#portfolio .portfolio-item figure {
  background: #e1e1e5;
  overflow: hidden;
  height: 240px;
  position: relative;
  border-radius: 4px 4px 0 0;
  margin: 0;
}

#portfolio .portfolio-item figure:hover img {
  opacity: 0.4;
  transition: 0.3s;
}

#portfolio .portfolio-item figure .link-preview,
#portfolio .portfolio-item figure .link-details {
  position: absolute;
  display: inline-block;
  opacity: 0;
  line-height: 1;
  text-align: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s linear;
}

#portfolio .portfolio-item figure .link-preview i,
#portfolio .portfolio-item figure .link-details i {
  padding-top: 6px;
  font-size: 22px;
  color: #333;
}

#portfolio .portfolio-item figure .link-preview:hover,
#portfolio .portfolio-item figure .link-details:hover {
  background: #3094db;
}

#portfolio .portfolio-item figure .link-preview:hover i,
#portfolio .portfolio-item figure .link-details:hover i {
  color: #fff;
}

#portfolio .portfolio-item figure .link-preview {
  left: calc(50% - 38px);
  top: calc(50% - 18px);
}

#portfolio .portfolio-item figure .link-details {
  right: calc(50% - 38px);
  top: calc(50% - 18px);
}

#portfolio .portfolio-item figure:hover .link-preview {
  opacity: 1;
  left: calc(50% - 44px);
}

#portfolio .portfolio-item figure:hover .link-details {
  opacity: 1;
  right: calc(50% - 44px);
}

#portfolio .portfolio-item .portfolio-info {
  background: #fff;
  text-align: center;
  padding: 30px;
  height: 90px;
  border-radius: 0 0 3px 3px;
}

#portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 0;
}

#portfolio .portfolio-item .portfolio-info h4 a {
  color: #333;
}

#portfolio .portfolio-item .portfolio-info h4 a:hover {
  color: #3094db;
}

#portfolio .portfolio-item .portfolio-info p {
  padding: 0;
  margin: 0;
  color: #b8b8b8;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
}

/* Clients Section
--------------------------------*/

#clients {
  padding: 60px 0;
}

#clients img {
  max-width: 100%;
  opacity: 0.5;
  transition: 0.3s;
  padding: 15px 0;
}

#clients img:hover {
  opacity: 1;
}

#clients .owl-nav,
#clients .owl-dots {
  margin-top: 5px;
  text-align: center;
}

#clients .owl-dot {
  display: inline-block;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ddd;
}

#clients .owl-dot.active {
  background-color: #3094db;
}

/* Testimonials Section
--------------------------------*/





#testimonials .testimonial-item {
  text-align: center;
}

#testimonials .testimonial-item .testimonial-img {
  width: 120px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: 0 auto;
}

#testimonials .testimonial-item h3 {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: #111;
    font-family: playfair display, serif;
}

#testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0 0 15px 0;
}

#testimonials .testimonial-item .quote-sign-left {
  margin-top: -15px;
  padding-right: 10px;
  display: inline-block;
  width: 37px;
}

#testimonials .testimonial-item .quote-sign-right {
  margin-bottom: -15px;
  padding-left: 10px;
  display: inline-block;
  max-width: 100%;
  width: 37px;
}

#testimonials .testimonial-item p {
    margin: 0 auto 15px auto;
    line-height: 30px;
    padding-top: 30px;
    font-size: 16px;
    color: #444;
	font-family: playfair display, serif;
}

#testimonials .owl-nav,
#testimonials .owl-dots {
  margin-top: 5px;
  text-align: center;
}

#testimonials .owl-dot {
  display: inline-block;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ddd;
}

#testimonials .owl-dot.active {
  background-color: #3094db;
}

/* Team Section
--------------------------------*/

#team {
  background: #fff;
  padding: 60px 0;
}

#team .member {
  text-align: center;
  margin-bottom: 20px;
  background: #000;
  position: relative;
}

#team .member .member-info {
  opacity: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  transition: 0.2s;
}

#team .member .member-info-content {
  margin-top: -50px;
  transition: margin 0.2s;
}

#team .member:hover .member-info {
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
  transition: 0.4s;
}

#team .member:hover .member-info-content {
  margin-top: 0;
  transition: margin 0.4s;
}

#team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
  color: #fff;
}

#team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: #fff;
}

#team .member .social {
  margin-top: 15px;
}

#team .member .social a {
  transition: none;
  color: #fff;
}

#team .member .social a:hover {
  color: #3094db;
}

#team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/* Contact Section
--------------------------------*/

#contact {
  padding: 100px 0;
}

#contact .contact-info {
  margin-bottom: 20px;
  text-align: center;
}

#contact .contact-info i {
  font-size: 48px;
  display: inline-block;
  margin-bottom: 10px;
  color: #fff;
}

#contact .contact-info address,
#contact .contact-info p {
  margin-bottom: 0;
  color: #000;
}

#contact .contact-info h3 {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #999;
}

#contact .contact-info a {
  color: #fff;
}

#contact .contact-info a:hover {
  color: #3094db;
}

#contact .contact-address,
#contact .contact-phone,
#contact .contact-email {
  margin-bottom: 20px;
}

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

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

#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 {

  padding: 10px 14px;
  border-radius: 0px;
  box-shadow: none;
  font-size: 15px;
  border: 0px none;

}

#contact .form button[type="submit"] {
  background: #3094db;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  cursor: pointer;
  width: 100%;
  border-radius: 4px;
}

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

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

#footer {
  background: #11243c;
  padding: 0 0 30px 0;
  color: #eee;
  font-size: 14px;
}

#footer .footer-top {
  background: #111;
  padding: 60px 0 30px 0;
}

#footer .footer-top .footer-info {
  margin-bottom: 30px;
}

#footer .footer-top .footer-info h3 {
  font-size: 34px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 10px;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  border-left: 4px solid #3094db;
}

#footer .footer-top .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Montserrat", sans-serif;
  color: #eee;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #333;
  color: #eee;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #3094db;
  color: #fff;
}

#footer .footer-top h4 {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top h4::before,
#footer .footer-top h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
}

#footer .footer-top h4::before {
  right: 0;
  background: #555;
}

#footer .footer-top h4::after {
  background: #3094db;
  width: 60px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 8px;
  color: #ddd;
}

#footer .footer-top .footer-links ul li {
  border-bottom: 1px solid #333;
  padding: 10px 0;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: #eee;
}

#footer .footer-top .footer-links ul a:hover {
  color: #3094db;
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact p {
  line-height: 26px;
}

#footer .footer-top .footer-newsletter {
  margin-bottom: 30px;
}

#footer .footer-top .footer-newsletter input[type="email"] {
  border: 0;
  padding: 6px 8px;
  width: 65%;
}

#footer .footer-top .footer-newsletter input[type="submit"] {
  background: #3094db;
  border: 0;
  width: 35%;
  padding: 6px 0;
  text-align: center;
  color: #fff;
  transition: 0.3s;
  cursor: pointer;
}

#footer .footer-top .footer-newsletter input[type="submit"]:hover {
  background: #13a456;
}

#footer .copyright {
  text-align: center;
  padding-top: 30px;
}

#footer .credits {
  text-align: center;
  font-size: 13px;
  color: #ddd;
}
.logoblock{width:20%; float: left; position: relative; top:-5px;} 


#home .centerFront {
  position: absolute;
  text-align: left;
  top: 23%;
  width: 100%;
  padding: 0px 280px;
  color: #fff;
 
}
.watchvideobutton {
  position: relative;
  z-index: 990;
  cursor: pointer !important;
}
.subtitletext {
  font-size: 14px;
  letter-spacing: 4px;
  font-family: "roboto mono", sans-serif;
  font-weight: bold;
	
}
.hptextbody.mt-20 {
  margin-top: 60px;
}
.footertextarea{
  

  text-transform: uppercase;
  font-weight: 700;
  color: #fff !important;
  font-size: 11px;
  letter-spacing: 0.1em;}

  .footertextarea a{

    color: #fff !important;
}
.d-none{display:none;}
.pt-10{padding-top:11px;}


/*jibari css*/
ol {
    padding-left: 20px;
    padding-top: 20px;
}
.pointerblock{cursor:pointer}
.webviewproblem{display: block}
.mobileviewproblem{display: none}

			.textdescp{font-size:10px; font-weight:bold; color:#888; letter-spacing: 2px; margin-top: 10px;}
	
.lessonli li {
    padding-bottom: 20px;
}
.active {
    color: #3094db !important;
}

.projectsections p {
    font-family: helvetica, sans-serif;
}
.plans {
  margin: 30px auto;
  overflow: hidden;
}

.plan {
  float: left;
  margin: 20px 2px;
  padding: 15px 25px;
  text-align: center;
  background: white;
  background-clip: padding-box;
  border: 2px solid #e5ded6;
  border-color: rgba(0, 0, 0, 0.1);
}

.plan-title {

margin-bottom: 12px;
font-size: 18px;
color: #222;
font-family: playfair display, serif;
font-weight: bold;

}

.plan-price {
  margin-bottom: 20px;
  line-height: 1;
  font-size: 28px;
  font-weight: bold;
  color: #fd935a;
}

.plan-unit {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: normal;
  color: #aaa;
}

.plan-features {
  margin: 20px auto 15px;
  padding: 15px 0 0 15px;
  border-top: 1px solid #e5ded6;
  text-align: left;
}

.plan-feature {
  line-height: 20px;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

.plan-feature + .plan-feature {
  margin-top: 5px;
}

.plan-feature-unit {
  margin-left: 2px;
  font-size: 16px;
}

.plan-feature-name {
  font-size: 13px;
  font-weight: normal;
  color: #aaa;
}

.plan-button {
  position: relative;
  display: block;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.1);
  background: #fd935c;
  border-bottom: 2px solid #cf7e3b;
  border-color: rgba(0, 0, 0, 0.15);
  border-radius: 30px;
}

.plan-button:active {
  top: 2px;
  margin-bottom: 2px;
  border-bottom: 0;
}

.plan-highlight {
  margin-top: 0;
  margin-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
  border: 2px solid #3094db;
}
.plan-highlight:hover {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
  border: 2px solid #1a2b66;
  -webkit-transition: width 4s; /* Safari */
  transition: width 4s;
  margin-bottom: 20px;
}

.plan-highlight .plan-button {
  font-size: 14px;
  line-height: 30px;
  background: #3094db;
  border-color: #3094db;
  border-color: rgba(0, 0, 0, 0.15);
}
.plan-highlight .plan-button:hover {
  font-size: 14px;
  line-height: 30px;
  background: #1a2b66;
  border-color: #1a2b66;
  color:#fff;
  border-color: rgba(0, 0, 0, 0.15);
  -webkit-transition: width 2s; /* Safari */
  transition: width 2s;
}

.plan-recommended {
  width: 160px;
  margin: -15px auto 15px;
  padding-bottom: 2px;
  line-height: 22px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px rgba(0, 0, 0, 0.05);
  background: #3094db;
}



		  .tooltip {
  font-size: 10px;
}
		  
.font_bold {
    font-weight: bold;
}
	#top-menu {
    position: fixed;
    z-index: 1;
    background: transparent;
    
    top: 250px;
   
}

#top-menu li {
    float: left;
}

#top-menu a {
    display: block;
    padding-bottom: 15px;
   
    -webkit-transition: .5s all ease-out;
    -moz-transition: .5s all ease-out;
    transition: .5s all ease-out;
   
    color: #aaa;
    text-decoration: none;
}

#top-menu a:hover {
    color: #000;
}

#top-menu li.active a {
    border-top: 3px solid #333;
    color: #333;
}
		#top-menu li {
    float: none;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
	
	.sectionprojectboxhead{padding-top:100px;}
	.sectionprojectboxheadproblem {
    padding-top: 100px;
    padding-left: 55px;
}

.sectionheadingproject {

    color: #000;
    margin: 20px 0px 10px;
    font-family: playfair display, helvetica, sans-serif ;
    font-weight: bold;

}
	.sectionheadingproblem {

   color: #000;
margin: 150px 0px 10px;
font-family: "playfair display", helvetica, sans-serif;
font-weight: bold;

}
	.projectspecs{padding-top: 98px;}
	.projectspecs h1{font-size:11px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; margin-bottom: 5px;}
	.projectspecs p {
    font-size: 12px;
    margin-bottom: 15px;
}
	.introforproject h1{font-size:20px; font-weight: 300; line-height: 30px;}
	.introforproject {
    padding-right: 40px;
}
	.projectimagespec{padding: 30px; }
	.sectionprojectproblembox{padding-right: 0px;}
	.sectionprojectproblemboximage{padding-right: 0px;}
	.projectimagessolution{padding: 40px 15px 0px;}
	.solutiontextbox {
    padding-left: 15px;
}
	.projectresults{padding: 40px}
	.resultsbox {
    border: 1px solid #aaa;
    padding: 25px;
    text-align: left;
}
	.resultsbox span {
    font-size: 68px;
		font-family: 'DM Serif Text', serif;
}
strong{font-weight: bold !important}
	#learningsection{padding-bottom: 40px;}
	
		.projectbgmain{color: #fff; background: #ddd; padding: 150px 650px 100px 140px; }



.mtabackground{ background:url(../img/portfolio_homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995;}

.ricohbackground{ background:url(../img/portfolio_ricoh-homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }

.citibackground{ background:url(../img/portfolio_citi-homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }

.uabackground{ background:url(../img/portfolio_ua-homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }

.bluetowersbackground{ background:url(../img/portfolio_bluetowers-homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }

.copstopcoachbackground{ background:url("../img/portfolio_copstopcoach-homescreen.jpg"); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }

.vmlyrbackground{ background:url(../img/portfolio_vmlyr-homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }
.dowbackground{ background:url(../img/portfolio_dow-homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }
.lsbackground{ background:url(../img/portfolio_ls-homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }

.backourbizbackground{ background:url(../img/portfolio_backourbiz-homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }

.gmbackground{ background:url(../img/portfolio_gm-homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }

.theavebackground{ background:url(../img/portfolio_theave-homescreen.jpg); background-size: cover;
background-repeat: no-repeat;position: relative; z-index: 995; background-color:#000; }

		.maintitleproject{}
		.maintitleproject h1 {
    font-size: 60px;
    font-family: playfair display, helvetica, sans-serif;
    font-weight: bold;
    
}
		.maintitleproject h2{font-size: 24px;
font-family: playfair display, helvetica, sans-serif;
font-style: italic;}
	.maintitleproject p {
    font-size: 18px;
    margin-bottom: 40px;
}
		.maintitleproject small{font-size:12px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;}
		.mainboxproject{padding-bottom: 20px;}
				
		
		
		#stickThis {
    padding: 5px;
    background-color: #ccc;
    font-size: 1.5em;
    width: 300px;
    text-align: center;
    font-weight: bold;
    border: 2px solid #444;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#stickThis.stick {
    margin-top: 0;
    position: fixed;
    top: 0;
    z-index: 9999;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}



			#sticker ul {

    margin-left: 0px;
				padding: 0px;

}
			#sticker .scrolly {
    color: #aaa;
    font-size: 11px;
    text-decoration: ;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
	#sticker .scrolly .active {
    color: #000;
}

	
div#wrapper {
	margin:0 auto;
	width:900px;
	background:#FFF;
}
div#mainContent {
	float:left;
	width: 100%;
}
div#sideBar {
	left: 150px;
    padding: 40px 20px;
    margin-left: 30px;
    float: left;
    position: absolute;
   left: 90px;
    z-index: 992;
    margin-right: 100px;
	width:250px;
}
.clear { 
	clear:both; 
}
div#sticker {
	
	margin:0px 0 20px 0px;
	width:240px;
}
.stick {
	position:fixed;
	top:325px;
}
.addsectionarea {
    padding: 30px 55px  100px;
}
		.projectbuttontop{margin-bottom: 80px;}
	.projectbuttontoplink {
   border: 2px solid #fff;
padding: 10px 40px;
color: #fff;
font-weight: bold;
}
	


	.textforportfolio h1{font-size: 24px;
padding-bottom: 20px;
font-family: playfair display, helvetica, sans-serif;
font-weight: bold;}
				.textforportfolio p{font-size:15px;}
			.skilltextforportfolio h1{font-size: 24px;
padding-bottom: 20px;
font-family: playfair display, helvetica, sans-serif;
font-weight: bold;}
				.industrytextareabox {
    padding-bottom: 16px;
					width: 100%;width: 100%;
}
				
				.iconblockindustryicon{float: left; font-size: 24px;
padding-right: 15px;}
				.iconblockindustrytext{float: left;
padding-top: 4px; }
				.textforportfolio {
    padding-right: 80px;
    padding-left: 40px;
}
			
			.padding-blockarea {
    padding: 25px;
   
}
				.bgbl {
    padding: 40px 30px 30px;
}
.work-linkblock:hover {
    background: #000;
    color: #fff !important;
    cursor: pointer;
}
			/*	.padding-blockarea:hover {
  transition: 0.8s;
   
					background: #efefef;
}*/
					.work-image{font-size:10px;}
					.work-box{padding: 30px 50px 50px 50px; background: #fff;    }
					.work-smalltext{font-size: 9px;
font-weight: bold;
color: #aaa;
text-transform: uppercase;
margin-bottom: 5px;}
					.work-heading{font-size: 20px;
font-family: playfair display, sans-serif;
font-weight: bold;
margin-bottom: 15px;}
					.work-boxtext{font-size: 14px;}
					.work-boxtextarea{font-size: 9px;
font-weight: bold;
color: #aaa;
text-transform: uppercase;
margin-bottom: 5px;}
					.work-linkblock{border: 2px solid #000;
text-align: center;
padding: 8px;
display: block;
font-size: 12px;
text-transform: uppercase;
color: #000;
font-weight: bold;}
.progress-bar-develop {
  background-color: #3094db !important;
	font-size: 8px;
}
.progress-bar-design {
  background-color: #1abc9c !important;
	font-size: 8px;
}
.progress-bar-stack {
  background-color: #2c3e50 !important;
	font-size: 8px;
}

.progress.progressheight {
    height: 20px;
    font-weight: bold;
	margin-bottom: 25px;
}
.sectionleader{margin-top: -150px;}
.imageblockleader{padding-bottom: 0px !important;}
.card-body {

    padding: 15px;
    font-size: 14px;
}


.textheading{display: block;
font-weight: bold;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 16px;
padding-top: 5px;
color: #000;
}
.col-md-8.center-block {
    margin-left: auto;
    margin-right: auto;
}
.center-block {
    margin-left: auto;
    margin-right: auto;
	float: none;
}
.col-md-6.col-sm-6.col-xs-12 {
    width: 50%;
}

#video1 .modal-content.modalvideo {

    background: #000;

}
.pt-02{padding-top:2px;}
.ptb-20{padding:20px 0px;}
.pb-10{padding-bottom:10px;}
.pb-40{padding-bottom:40px;}
.pt-20{padding-top:20px;}
.pt-40{padding-top:40px;}
.sectionblockarea{padding:100px 0px;}
.sectionspecializeblock{padding:60px 0px;}
.sectionspecializeborder{border-top:1px solid #aaa; width:100%; text-align:center;}
.sectionspecializebordertop{margin-top:-13px;}
.sectionspecializetext{padding:0px 20px; color: #000;
  font-family: 'roboto mono',sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 0 15px; text-transform:uppercase; background:#fff;}
  .imgleft-nopad{padding-left:0px;}
 .imgleft-nopadimage{padding-left:0px;}
.imgright-nopad{padding-right:0px;}
.sectionheading {
color:#000;
  margin: 60px 0px 10px;
  font-family: "playfair display", helvetica, sans-serif;
  font-weight: bold;

}

/*Qoute area*/
.qoutebottom-name{ color: #fff; font-family: 'roboto mono',sans-serif;
  font-size: 12px;
     font-weight: 700;
     letter-spacing: 4px;
     padding: 10px 15px;
     text-transform: uppercase;
     background: transparent;
     border-top: 2px solid #fff; width:400px; margin-left:auto; margin-right:auto; }


     .qoutetop-name{ color: #fff; font-family: 'roboto mono',sans-serif;
      font-size: 12px;
         font-weight: 700;
         letter-spacing: 4px;
         padding: 10px 15px;
         text-transform: uppercase;
         background: transparent;
         border-bottom: 2px solid #fff; width:400px; margin-left:auto; margin-right:auto; }


.qoutearea{padding-bottom:30px;}
     .qoutenamearea{padding-top:30px;}
     .qoutetextarea {
      font-size: 28px;
      margin: 20px 0px;
      font-family: "playfair display", Helvetica, sans-serif;
  }


     .qoutebg{background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(0, 0, 0, 0.1)), url(../img/last-bg.jpg) fixed center center;}
/*Qoute area*/
/*Recognitions area*/
.recognitiontextarea{padding:40px 0px 0px;}
.sitetext{padding:20px 0px; text-align:left;}
/*Recognitions area*/

/*deals area*/
.dealsbg{background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(0, 0, 0, 0.1)), url(../img/deals-bg.jpg) fixed center center;}
.idvdealbg {
    padding: 5px 5px 10px;
    background: #eee;
    font-size: 10px;
    margin-bottom: 30px;
    height: 160px;
}
.idvdealbgarea{padding:0px 5px; font-weight:bold;}
.idvdealbgareatext{padding-top:0px; color: #000; font-size:12px;}
.idvdealwin{padding:3px 5px; background:#1B9230; color:#fff; font-weight:bold;}
.idvdealtext{padding-top:4px; color: #666;}
.idvlink{padding: 3px 14px;
  background: #3094db;
  color: #fff;
  font-weight: bold;
  border-radius: 30px;}
  .titleblk{float:left;}
  .winblk{float:right;}
  .cityblk{float:left; padding-right:10px;}
  .deliveblk{float:left;}
  .commentblk{padding-bottom:10px;line-height: 12px;}

  .commentblk span {

    font-weight: normal;
    font-size: 10px;
    font-style: italic;
    line-height: 14px;

}
/*deals area*/

/*about area*/
.aboutbg{background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(0, 0, 0, 0.1)), url(../img/call-to-action-bg.jpg) fixed center center;}

/*about area*/


/*Project area*/
.projectbg{background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(0, 0, 0, 0.1)), url(../img/projects-bg.jpg) fixed center center;}
.projectblock{padding:40px 0px;}
.projectblockbottom{margin-top:60px;}

.projectsections {
    font-size: 12px;
    height: 220px;
}
.projectname {
    font-size: 18px;
    color: #3094db;
    margin-bottom: 10px;
    font-family: playfair display, sans-serif;
    font-weight: bold;
}
  .projectdescription {

    font-size: 14px;
    margin: 5px 0px 10px;
    font-family: roboto mono, sans-serif;
    font-weight: bold;
    line-height: 20px;

}
/*Project area*/




.f-none{float: none !important;}


.card-header {
  padding: 0px 0px 5px 0px;
margin-bottom: 0;
color: inherit;
background-color: transparent;
border-bottom: 1px solid #bbb;
font-weight: normal;
font-size: 14px;


}
.fas.fa-angle-down.rotate-icon {

  float: right;
  position: relative;
  top: 4px;

}
.abouthr {

  width: 30px;
  border: 1px solid #333;
  margin-top: 10px;
  margin-bottom: 20px;
  float: left;

}.abouthrwhite {

  width: 30px;
  border: 1px solid #fff;
  margin-top: 10px;
  margin-bottom: 20px;
  float: left;

}
.watchvideobutton{border: 2px solid #fff;
  color: #fff;
  padding: 15px 40px;
  border-radius: 0px; font-weight:bold;}


  .mobileintrobg{display:none !important;}

  .mobilehptextintro {
    position: absolute;
    z-index: 989;
    top: 120px;
}



#typea {
  font-size: 30px;
  font-weight: bold;
  font-family:"playfair display", Helvetica, sans-serif
}
.mobiletextboxarea{text-align:center; margin:0px 20px;}













































/* aboutme Section
--------------------------------*/



#aboutme .box {
  margin-bottom: 30px;
}

#aboutme .icon {
  float: left;
}

#aboutme .icon i {
  color: #3094db;
  font-size: 36px;
  line-height: 1;
  transition: 0.5s;
}

#aboutme .title {
  margin-left: 60px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

#aboutme .title a {
  color: #111;
}

#aboutme .box:hover .title a {
  color: #3094db;
}

#aboutme .description {
  font-size: 14px;
  margin-left: 60px;
  line-height: 24px;
  margin-bottom: 0;
}






.iconblock .box {
  margin-bottom: 30px;
}

.iconblock .icon {
  float: left;
}

.iconblock .icon i {
  color: #3094db;
  font-size: 36px;
  line-height: 1;
  transition: 0.5s;
}

.iconblock .title {
  margin-left: 60px;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 18px;
	font-family:"playfair display", helvetica, sans-serif;
}

.iconblock .title a {
  color: #111;
}

.iconblock .box:hover .title a {
  color: #3094db;
}

.iconblock .description {
  font-size: 15px;
  margin-left: 60px;
  line-height: 21px;
  margin-bottom: 0;
}

/* aboutme Section
--------------------------------*/

.img-responsive{width:100%;}
.headertext{font-size:21px; padding-bottom: 0px; margin-bottom: 0px;}
blockquote {
  background: #eeeeee;
  border-left: 4px solid #3094db;
  margin: 1.5em 0px;
  padding: 30px;
  font-size:20px;
  font-family: "playfair display", Helvetica, sans-serif;
  /*quotes: "\201C""\201D""\2018""\2019";*/
}
blockquote:before {
  color: #ccc;
 /* content: open-quote;*/
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  /*position: absolute ;*/
   right: 0;
   bottom: 0;
   width: 100%;
   min-height: 100%;
 }

 #type{
  font-size: 54px;
  font-weight:800;
  position: relative;
  top: 40%;
  text-align: center;
  margin-top: 100px;
  font-family:"playfair display", Helvetica, sans-serif
  }
  #type:after{
  background: #ffffff;
  content: " ";
  width: 2px;
  height: 1.2em;
  margin-left: 2px;
  position: absolute;
  animation: blink 0.5s infinite;
  }
  @keyframes blink{
  from{opacity: 1;}
  to{opacity: 0;}
  }

  .hptextheading{ line-height: 64px; font-weight: 800; font-size:54px; display: inline; font-family:"playfair display", Helvetica, sans-serif}
.hptextbody{ line-height: inherit;  font-size:24px; margin:20px 20px; } 


#arrowbutton i {

  -webkit-animation: scroll 2s linear 1s infinite;
  animation: scroll 2s linear 1s infinite;
  position: absolute;
  color: #fff;
  z-index: 998;

}

@-webkit-keyframes scroll {
  0% {
    margin-top: -10px;
    opacity: 0;
  }
  50% {
    margin-top: 0;
    opacity: 1;
  }
  100% {
    margin-top: 10px;
    opacity: 0;
  }
}

@keyframes scroll {
  0% {
    margin-top: -10px;
    opacity: 0;
  }
  50% {
    margin-top: 0;
    opacity: 1;
  }
  100% {
    margin-top: 10px;
    opacity: 0;
  }
}

#fixed_footer {position:fixed; bottom:0; z-index:999; width:100%; height:40px; margin:0;}
#fixed_footer_more_info {display:none; width:100%; height:224px; background: rgba(218,218,218,0.94) top left repeat; bottom:40px; position:absolute; z-index:8;}
#fixed_footer_more_info .content_wrapper {background:transparent;}
#fixed_footer_more_info .footer_links {height:265px; line-height:25px; color:#444444; overflow:hidden; border-bottom:1px solid #c3c3c3; margin-left: auto;margin-right: auto;overflow: hidden;width: 1090px; padding-top:20px; }
#fixed_footer_more_info .footer_links .footer_links_section {width:25%; padding:0px 25px; float:left; display:inline; margin:0;}
#fixed_footer_more_info .footer_links ul {padding:13px 0 0; margin:0; list-style:none;}
#fixed_footer_more_info .footer_links li {padding:0; margin:0;}
#fixed_footer_more_info .footer_links li.footer_links_title {font-size:15px; text-transform:uppercase;}
#fixed_footer_more_info .footer_links a {color:#444444; text-decoration:none;}
#fixed_footer_more_info .footer_links a:hover {color:#d9001b; text-decoration:none;}
#fixed_footer_more_info .footer_copyright {font-size:11px; padding:0px 0 0; color:#797979; width: 1090px;margin-left: auto;margin-right: auto;border-top: 1px solid;}
#fixed_footer_more_info .footer_copyright .content_left {float:left; padding:0 0 0 10px;}
#fixed_footer_more_info .footer_copyright .content_right {float:right; text-align:right; padding:0 10px 0 0;}
#fixed_footer_more_info .footer_copyright a {text-decoration:none; color:#797979;}
#fixed_footer_more_info .footer_copyright a:hover {text-decoration:none; color:#d9001b;}
#fixed_footer_more_info .footer_company_info {text-align:center; font-size:10px; color:#797979; clear:both;}
#fixed_footer_more_info .footer_company_info p {padding:0; margin:0;}
#fixed_footer_more_info .footer_company_info a {text-decoration:none; color:#797979;}
#fixed_footer_more_info .footer_company_info a:hover {text-decoration:none; color:#D9001B;}
#footer_bar {height:40px; background:#000; z-index:100;}
#footer_bar_content {padding: 0px 30px; font-family: roboto mono,sans-serif;}
#footer_bar_content #footer_bar_trust_pilot {overflow:hidden; height:40px; float:left;}
#footer_bar_review_stars {padding:11px 0 0 10px; float:left; width:107px;}
#footer_bar_review_total {padding:12px 0 0; float:left; text-transform:uppercase; font-weight:700; color:#fff; font-size:11px; letter-spacing:0.1em;}
#footer_bar_review_total a {text-decoration:none; color:#fff;}
#footer_bar_content #footer_bar_trust_pilot img {display:inline;}
#footer_bar_content #footer_bar_more_info { height:39px; line-height: 16px; display: none; text-transform:uppercase; letter-spacing:0.1em; text-align:center; cursor:pointer; padding:11px 0 0 0; font-weight:700; color:#fff; font-size:12px;}
#footer_bar_content #footer_bar_more_info.footer_info_selected {background-position: bottom center;}
#blog_footer #footer_bar_review_total {float:none; width:auto;}
#footer_bar_content #footer_bar_live_chat {overflow:hidden; height:40px; width:97px; float:left;}
#footer_bar_content #footer_bar_live_chat a {display:block; height:40px; width:97px;}
#footer_bar_content #footer_bar_social_links ul {padding:0; margin:0; list-style:none; padding:0 0 0 9px;}
#footer_bar_content #footer_bar_social_links li {padding:0; margin:0; height:52px; width:40px; float:left; display:inline;}
#footer_bar_content #footer_bar_social_links li a {display:block; height:52px; width:100%;}
#footer_bar_content #footer_bar_social_links li a span {display:none;}
#footer_bar_content #footer_bar_social_links li.footer_bar_social_link_1 a {background-position:-9px -40px;}
#footer_bar_content #footer_bar_social_links li.footer_bar_social_link_2 a {background-position:-49px -40px;}
#footer_bar_content #footer_bar_social_links li.footer_bar_social_link_3 a {background-position:-89px -40px;}
#footer_bar_content #footer_bar_social_links li.footer_bar_social_link_4 a {background-position:-129px -40px;}
#footer_bar_content #footer_bar_social_links li.footer_bar_social_link_5 a {background-position:-169px -40px;}
#footer_bar_content #footer_bar_social_links li.footer_bar_social_link_6 a {background-position:-209px -40px;}
#footer_bar_content #footer_bar_social_links li.footer_bar_social_link_7 a {background-position:-249px -40px;}
#footer_price_sash {position:fixed; bottom:40px; z-index:9999; width:212px; height:212px; margin:0; }
#footer_price_sash a span {display:none;}




/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-img-replace {
  /* replace text with a background-image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* -------------------------------- 

Main components 

-------------------------------- */






.cd-scroll-down {
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 20px;
  width: 38px;
  height: 44px;
  background: url("../img/cd-arrow-bottom.svg") no-repeat center center;
}

/* No Touch devices */
.cd-nav-trigger {
  display: none;
}

.no-touch #cd-vertical-nav {
  position: fixed;
  right: 40px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 999;
}
.no-touch #cd-vertical-nav li {
  text-align: right;
}
.no-touch #cd-vertical-nav a {
  display: inline-block;
  /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.no-touch #cd-vertical-nav a:after {
  content: "";
  display: table;
  clear: both;
}
.no-touch #cd-vertical-nav a span {
  float: right;
  display: inline-block;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
}
.no-touch #cd-vertical-nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.no-touch #cd-vertical-nav a:hover .cd-label {
  opacity: 1;
}
.no-touch #cd-vertical-nav a.is-selected .cd-dot {
  background-color: #3094db;
}
.no-touch #cd-vertical-nav .cd-dot {
  position: relative;
  /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
  top: 8px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #888888;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.no-touch #cd-vertical-nav .cd-label {
  position: relative;
  margin-right: 10px;
  padding: .4em .5em;
  color: #3094db;
  font-size: 14px;
  font-size: 0.875rem;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

/* Touch devices */
.touch .cd-nav-trigger {
  display: block;
  z-index: 2;
  position: fixed;
  bottom: 30px;
  right: 5%;
  height: 44px;
  width: 44px;
  border-radius: 0.25em;
  background: rgba(255, 255, 255, 0.9);
}
.touch .cd-nav-trigger span {
  position: absolute;
  height: 4px;
  width: 4px;
  background-color: #3e3947;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  background-color: inherit;
  border-radius: inherit;
}
.touch .cd-nav-trigger span::before {
  top: -9px;
}
.touch .cd-nav-trigger span::after {
  bottom: -9px;
}

.touch #cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 5%;
  bottom: 30px;
  width: 90%;
  max-width: 400px;
  max-height: 90%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  border-radius: 0.25em;
  background-color: rgba(255, 255, 255, 0.9);
}
.touch #cd-vertical-nav a {
  display: block;
  padding: 1em;
  border-bottom: 1px solid rgba(62, 57, 71, 0.1);
}
.touch #cd-vertical-nav a span:first-child {
  display: none;
}
.touch #cd-vertical-nav a.is-selected span:last-child {
  color: #3094db;
}
.touch #cd-vertical-nav.open {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger {
  background-color: transparent;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span {
  background-color: rgba(62, 57, 71, 0);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
  background-color: #3e3947;
  height: 3px;
  width: 20px;
  border-radius: 0;
  left: -8px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 1px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  bottom: 0;
}
.touch #cd-vertical-nav li:last-child a {
  border-bottom: none;
}
.footerlinksites  {font-weight: bold;
  text-align: center;
 margin-bottom: 0px;
padding: 8px 20px;
border: 2px solid #000;
font-size: 10px;
border-radius: 30px;
color: #000;
text-transform: uppercase;}

.illustration.illustration-mobile {
    position: relative;
top: 10px;
}
.headline-4 {
    font-family: "playfair display", helvetica, sans-serif;
font-size: 18px;
color: #000;
text-align: center;
font-weight: bold;
}
.spectrum-illustration p {
	color: #5D5D5D;
	line-height: 1.4em
}
.illustration {
	transform: scale(0.5);
	transform-origin: top left;
	margin-bottom: -50px;
	width: 220px;
	height: 160px;
	position: relative;
	background-image: url("../img/about.svg")
}
.illustration-web {
	background-position: 8px 8px
}
.illustration-dev {
	background-position: 25px -179px
}
.illustration-mobile {
	background-position: 0 -380px
}
.principles .headline-4 {
	margin-bottom: 1em
}
.principles p {
	color: #979797;
	line-height: 1.4em
}
.testimonials-stat span {
	display: block;
	font-size: 1.625rem
}
.testimonials-stat .number {
	color: #3094db;
	font-weight: 500;
	line-height: 1.42em;
	margin-bottom: 4px
}
.testimonials-stat .description {
	font-weight: 300;
	line-height: 1.2em
}
.testimonials-quote {
	margin: 0 auto;
	max-width: 900px
}
.testimonials-quote .text-1 {
	font-weight: 300;
	line-height: 1.42em
}
.testimonials-cite {
	font-style: normal
}
.testimonials-cite img {
	border-radius: 100%;
	max-width: 50px;
	margin-right: 20px
}
.testimonials-cite span {
	display: block
}
.testimonials-cite .author {
	font-size: 1.25rem;
	font-weight: 500;
	margin-bottom: 10px
}
.testimonials-cite .title {
	font-size: 1rem;
	color: #5D5D5D
}
#line-web.animate {
	animation: dash-1 1.2s linear alternate forwards;
	animation-delay: .25s
}
#line-mobile.animate {
	animation: dash-2 .7s ease alternate forwards;
	animation-delay: .25s
}
#line-dev.animate {
	animation: dash-2 .9s linear alternate forwards;
	animation-delay: .25s
}
.blob {
	background: #3094db;
	width: 16px;
	height: 16px;
	position: absolute;
	border-radius: 100%;
	transition: .25s;
	transform: scale(0)
}
#blob-1 {
	top: 1px;
	left: 72px
}
#blob-1.animate {
	transform: scale(1);
	animation: blob-1 1.2s linear alternate forwards;
	animation-delay: .25s
}
#blob-2 {
	top: 22px;
	left: 40px
}
#blob-2.animate {
	transform: scale(1);
	animation: blob-2 .9s ease alternate forwards;
	animation-delay: .25s
}
#blob-3 {
	top: 104px;
	left: 18px
}
#blob-3.animate {
	transform: scale(1);
	animation: blob-3 .9s linear alternate forwards;
	animation-delay: .25s
}
@keyframes dash-1 {
from {
stroke-dashoffset:385
}
to {
stroke-dashoffset:0
}
}
@keyframes dash-2 {
from {
stroke-dashoffset:138
}
to {
stroke-dashoffset:0
}
}
@keyframes blob-1 {
0% {
transform:scale(1) translateX(0) translateY(0)
}
19% {
transform:scale(1) translateX(-70px)
}
56% {
transform:scale(1) translateX(-70px) translateY(141px)
}
75% {
transform:scale(1) translateX(0) translateY(141px)
}
100% {
transform:scale(1) translateX(70px) translateY(72px)
}
}
@keyframes blob-2 {
0% {
transform:scale(1) translateX(0) translateY(0)
}
100% {
transform:scale(1) translateX(141px) translateY(95px)
}
}
@keyframes blob-3 {
0% {
transform:scale(1) translateX(0) translateY(0)
}
40% {
transform:scale(1) translateX(33px) translateY(34px)
}
100% {
transform:scale(1) translateX(120px) translateY(34px)
}
}

@media (min-width: 576px) {
.illustration {
    transform: scale(0.5);
    transform-origin: top right;
    float: none;
    margin: 0 -70px -60px 0;
    position: relative;
    right: 0px;
}

}

@media (min-width: 768px) {

.illustration {
	transform: scale(0.7);
	margin: 0 -20px -30px 0
}
.testimonials-cite img {
	max-width: 70px;
	margin-right: 24px
}
}

@media (min-width: 1024px) {
	

.illustration {
	transform: scale(1);
	float: none;
	margin: 0 auto 50px auto
}
.spectrum-illustration {
	text-align: center
}
.spectrum-illustration p {
	padding: 0 5%
}

}

@media (min-width: 1400px) {
.principles p {
	padding-right: 10%
}

}

@media (min-width: 1640px) {

}
.scroll-button {
	font-size: 1.375rem;
	padding-left: 40px;
	color: #3094db;
	position: relative
}
.scroll-button:before {
	content: "⟶";
	position: absolute;
	left: 0;
	transition: .3s transform
}
.scroll-button:hover {
	color: #000
}
.scroll-button:hover:before {
	transform: rotate(90deg)
}
.work-stats .number {
	font-size: 5.375rem;
	font-weight: 700;
	line-height: .8em;
	letter-spacing: -.04em;
	display: block;
	margin-bottom: .2em
}
.work-stats br {
	display: none
}
.work-stats .description {
	font-size: 1.625rem;
	color: rgba(255,255,255,0.6)
}
.work-areas .text-2 {
	color: #5D5D5D;
	line-height: 1.4em
}
.work-capabilities {
	border-bottom: 1px solid rgba(93,93,93,0.2)
}
.work-map {
	position: relative
}
.work-map svg {
	max-width: 100%;
	height: auto
}
.work-map svg circle {
	opacity: 0
}
.work-map svg.animate circle {
	animation: places 1s ease alternate forwards
}
.work-map svg.animate circle:nth-child(3) {
	animation-delay: .15s
}
.work-map svg.animate circle:nth-child(4) {
	animation-delay: .3s
}
.work-map svg.animate circle:nth-child(5) {
	animation-delay: .45s
}
.work-map svg.animate circle:nth-child(6) {
	animation-delay: .6s
}
.work-map svg.animate circle:nth-child(7) {
	animation-delay: .75s
}
.work-map svg.animate circle:nth-child(8) {
	animation-delay: .9s
}
.work-map svg.animate circle:nth-child(9) {
	animation-delay: 1.05s
}
.work-map svg.animate circle:nth-child(10) {
	animation-delay: 1.2s
}
.work-map svg.animate circle:nth-child(11) {
	animation-delay: 1.35s
}
.work-map svg.animate circle:nth-child(12) {
	animation-delay: 1.5s
}
.work-map svg.animate circle:nth-child(13) {
	animation-delay: 1.65s
}
.work-map svg.animate circle:nth-child(14) {
	animation-delay: 1.8s
}
.work-map svg.animate circle:nth-child(15) {
	animation-delay: 1.95s
}
.work-map svg.animate circle:nth-child(16) {
	animation-delay: 2.1s
}


@media (max-width: 1024px) {
	.illustration.illustration-mobile {
    position: relative;
    top: 6px;
}


	.headline-4 {
    font-family: helvetica;
    font-size: 18px;
    color: #000;
    text-align: center;
    font-weight: 700;
    padding-top: 20px;
}
}
@media (max-width: 991px) {
.illustration {
  
    transform-origin: top left;
   
    right: -16px;
	}
.container.spectrum {
    padding-top: 0px !important;
}	
}


@media (max-width: 767px) {
.illustration {
    transform-origin: top right;
    right: -60px;
	transform: scale(0.65);
}
}

}
}


@keyframes places {
from {
opacity:0
}
to {
opacity:1
}
}
#projects {
	position: relative;
	top: 0;
	outline: none
}
.masonry-row {
	transform: translateZ(100px)
}
.project {
	display: block;
	transform-style: preserve-3d;
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	margin-bottom: 20px
}
.project:active {
	-webkit-filter: brightness(1.1);
	filter: brightness(1.1)
}
.project a {
	display: block;
	color: #FFF
}
.project-header {
	padding: 30px 25px 15px 25px;
	position: absolute;
	z-index: 1
}
.project-header small {
	font-size: 1.125rem;
	color: rgba(255,255,255,0.6);
	display: block;
	margin-top: .8em
}
.project .image {
height:calc(100vw * 1.1);
	width: 100%
}
.project img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-o-object-fit: cover;
	object-position: center center;
	-o-object-position: center center
}

@media (min-width: 576px) {
.project {
	margin-bottom: 30px
}
.project-header {
	padding: 40px 30px 10px 30px
}
.work-clients .text-1 {
	padding-right: 10%
}
}

@media (min-width: 768px) {
#projects {
	top: -120px
}
.project {
	width: calc(50% - 2.5%);
margin-bottom:calc(100vw * 0.05)
}
.project:nth-child(odd) {
	margin-top: -130px
}
.project-header {
	padding: 60px 50px 30px 50px
}
.project .image {
height:calc(100vw * 0.6)
}
}

@media (min-width: 1024px) {
.project:nth-child(odd) {
	margin-top: -200px
}
.work-map {
	padding-right: 10%
}
}

@media (min-width: 1400px) {
#projects {
	top: -170px
}
.project {
	margin-bottom: 90px;
	width: calc(50% - 2.8rem)
}
.project:nth-child(odd) {
	margin-top: -250px
}
.project .image {
	height: 900px
}
.work-stats .number {
	display: inline;
	float: left;
	margin-right: 2rem;
	margin-bottom: 0;
	font-size: 4.125rem
}
.work-stats .description {
	font-size: 1.625rem
}
.work-stats br {
	display: block
}
}

@media (min-width: 1600px) {
.work-stats .number {
	font-size: 5.375rem
}
.work-stats .description {
	font-size: 2rem
}
.work-map-text {
	padding-right: 8%
}
}
.piece-services {
	font-size: 1.375rem;
	padding-right: 10%;
	line-height: 1.4em;
	margin-top: .5em;
	color: rgba(93,93,93,0.7)
}
.piece-services .service:after {
	content: ","
}
.piece-services .service:last-child:after {
	content: ""
}
.piece-slide img {
	display: block;
	max-width: 100%;
	min-width: 100%
}
.piece-fullscreen {
	height: 400px
}
.piece-fullscreen img {
	object-fit: cover;
	-o-object-fit: cover;
	object-position: 50% 50%;
	-o-object-position: center center;
	max-width: 100%;
	width: 100%;
	height: 100%
}
.piece-text {
	font-size: 1.375rem;
	line-height: 1.4em
}
.piece-text>* {
	margin: .6em 0
}
.piece-text h2, .piece-text h3 {
	font-weight: 500;
	font-size: 1.625rem
}
.piece-text blockquote p {
	color: #3094db;
	font-size: 1.625rem;
	font-weight: 500;
	line-height: 1.4em
}
.piece-text blockquote footer {
	margin-top: 1em
}
.piece-text blockquote cite {
	color: #5D5D5D;
	font-size: 1.375rem;
	font-style: normal
}
.piece-text a {
	color: #3094db;
	font-weight: 500;
	border-bottom: 2px solid rgba(40,69,255,0.15)
}
.piece-text a:hover {
	color: #001cbf;
	border-bottom-color: rgba(40,69,255,0.3)
}
.piece-caption {
	font-size: 1rem;
	padding-top: 1rem;
	color: #5D5D5D
}
.piece-caption h2, .piece-caption h3 {
	font-size: 1rem
}
.piece-next {
	color: #000;
	border-top: 1px solid rgba(93,93,93,0.2)
}
.piece-next-image-wrap {
	overflow: hidden;
	position: relative
}
.piece-next .text-blue {
	font-size: 1.25rem
}
.piece-next .text-1 {
	opacity: .7;
	transition: .3s
}
.piece-next .text-2 {
	color: rgba(93,93,93,0.6);
	margin-top: .5em
}
.piece-next img {
	max-width: 100%;
	display: block;
	transition: .3s;
	transform: scale(1.03)
}
.piece-next:hover img {
	transform: scale(1)
}
.piece-next:hover .text-1 {
	opacity: 1
}
.gallery {
	display: block;
	position: relative;
	pointer-events: none;
	cursor: zoom-in
}
.gallery img {
	transition: .3s
}
.gallery .enlarge {
	position: absolute;
	background: rgba(111,111,111,0.3);
	color: #FFF;
	font-size: .9rem;
	padding: 0 1rem 1px 2.5rem;
	border-radius: 90px;
	font-weight: 500;
	position: absolute;
	bottom: 20px;
	left: 20px;
	line-height: 2.6em;
	z-index: 1;
	transition: .3s;
	opacity: 0
}
.gallery .enlarge:before {
	content: "+";
	font-weight: 500;
	font-size: 1.8em;
	left: 1rem;
	top: -1px;
	position: absolute
}
.gallery:hover img {
	transform: scale(1.006)
}
.gallery:hover .enlarge {
	opacity: 1
}

@media (min-width: 576px) {
.piece-fullscreen {
	height: 100vh
}
.gallery {
	pointer-events: all
}
}

@media (min-width: 1024px) {
.piece-caption {
	font-size: 0.875rem
}
.piece-next .text-1 {
	padding-top: calc(1.25rem + 25px)
}
}
.blog-header .text-1 {
	max-width: 490px
}
.blog-index article {
	position: relative
}
.blog-index a {
	color: #3094db
}
.blog-index a:hover {
	color: #000
}
.blog-index h2 {
	font-size: 1.75rem;
	font-weight: 500;
	letter-spacing: -0.026em
}
.blog-index .category-head {
	font-size: 1.75rem;
	font-weight: 500;
	letter-spacing: -0.026em;
	border-bottom: 1px solid #000;
	padding-bottom: 40px;
	display: block;
	position: relative;
	padding-left: 50px;
	margin-bottom: 20px;
	color: #000
}
.blog-index .category-head:before {
	content: "➝";
	transform: rotate(-180deg);
	position: absolute;
	left: 0px;
	transition: 0.2s
}
.blog-index .category-head:hover:before {
	transform: rotate(-180deg) translateX(8px)
}
.blog-featured img {
	max-width: 100%
}
.blog-featured .card {
	background: #FFF;
	padding: 20px 0 30px 0;
	border-bottom: 1px solid #3094db
}
.blog-featured .timestamp {
	margin-bottom: 10px
}
.blog-article {
	border-bottom: 1px solid #3094db;
	padding: 30px 0
}
.blog-article:last-child {
	border: none
}
.blog-article h2 {
	margin-bottom: 10px
}
.timestamp {
	font-size: 0.975rem;
	color: rgba(93,93,93,0.7);
	display: block
}
.format-blog {
	max-width: 812px
}

@media (min-width: 768px) {
.blog-article {
	padding: 40px 0 40px 50px
}
.blog-featured .card {
	position: absolute;
	left: 20px;
	bottom: 20px;
	padding: 30px 30px 26px 30px;
	border: none
}
}
.contact-intro .text-1 {
	max-width: 660px
}
.contact-link {
	font-size: calc(100vw / 12);
	font-weight: 500;
	color: #3094db;
	display: inline-block;
	position: relative
}
.contact-link:before {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	max-width: 0;
	color: #000;
	content: attr(data-hover);
	transition: max-width .4s
}
.contact-link:hover:before {
	max-width: 100%
}
.contact-link:active {
	transform: translateY(3px)
}
.contact-more h2 {
	color: rgba(93,93,93,0.5);
	font-weight: normal;
	font-size: 1.625rem
}
.contact-map {
	height: 100vw;
	background: url("../images/nuremberg.gif");
	background-size: cover;
	background-position: 45% center
}

@media (min-width: 576px) {
.contact-map {
	height: calc(100vw / 2);
	background-position: center center
}
}

@media (min-width: 768px) {
.contact-link {
	font-size: 3.125rem
}
.contact-map {
	height: calc(100vw / 3)
}
}
.faq-question {
	border-bottom: 1px solid rgba(93,93,93,0.3)
}
.faq-question .headline-4 {
	font-weight: normal;
	padding: 1.5em 0;
	position: relative;
	transition: .3s;
	cursor: pointer
}
.faq-question .headline-4:hover {
	color: #0024f2
}
.faq-question .headline-4:before {
	transform: rotate(90deg)
}
.faq-question .headline-4.expanded {
	color: #000
}
.faq-question .headline-4.expanded:before {
	transform: rotate(135deg);
	background: #5D5D5D
}
.faq-question .headline-4.expanded:after {
	transform: rotate(45deg);
	background: #5D5D5D
}
.faq-question .format {
	display: none;
	padding-bottom: 2.5rem
}
.faq-question p {
	margin: 0
}

@media (min-width: 576px) {
h1.faq {
	padding-left: 3.75rem
}
.faq-headline {
	margin-left: 3.75rem
}
.faq-question {
	margin-left: 3.75rem
}
.faq-question .headline-4:before, .faq-question .headline-4:after {
	width: 25px;
	height: 1px;
	border-radius: 1px;
	background: #A8A8A8;
	transition: .3s;
	content: "";
	position: absolute;
	left: -3.75rem;
	top: 50%
}
}
.error {
	background: url("../images/bruce.jpg");
	background-size: cover;
	background-position: center center;
	color: #FFF
}
.error-container {
	min-height: calc(100vh - 120px)
}
.error-header {
	padding: 20px 0 10px 0
}
.error-message {
	text-align: center
}
.error-message span {
	font-size: 1.625rem
}
.error-message h1 {
	font-size: 3rem;
	margin-top: .4em
}
.error-footer {
	text-align: center;
	display: block;
	padding: 20px 0 60px 0;
	font-size: 6rem;
	font-family: "Menlo", monospace;
	mix-blend-mode: overlay
}

@media (min-width: 768px) {
.error-header {
	padding: 40px 0 20px 0
}
.error-message span {
	font-size: calc(100vw / 35)
}
.error-message h1 {
	font-size: calc(100vw / 15);
	margin-top: .2em
}
}



@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-150px * 7));
            transform: translateX(calc(-150px * 7));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-150px * 7));
            transform: translateX(calc(-150px * 7));
  }
}
.slider {
  background: white;
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  /*width: 960px;*/
}
.slider::before, .slider::after {
  background: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
 width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: -webkit-box;
  display: flex;
 /* width: calc(250px * 14);*/
}
.slider .slide {
  height: 100px;
  width: 250px;
}
.text-2 {
    font-size: 15px;
    text-align: center;
}
.collapsed {
    color: #000;
}

.bg-main {
    background-color: #3094db !important;
}


.icon {
  position: relative;
  width: 32px;
  height: 32px;
  display: block;
  fill: rgba(51, 51, 51, 0.5);
  margin-right: 20px;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.icon.active {
  fill: #E74C3C;
}

.icon.big {
  width: 64px;
  height: 64px;
  fill: rgba(51, 51, 51, 0.5);
}

#wrapper {
 
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: left;
          justify-content: left;
  overflow: hidden;
}

#left-side {
  height: 70%;
  width: 25%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
#left-side ul li {
  padding-bottom: 0px;
  display: -webkit-box;
  display: flex;
 
  cursor: pointer;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
	
	
	
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 16px;
    padding-top: 5px;
    color: #000;

	
	
}
#left-side ul li:hover {
  color: #333333;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
#left-side ul li:hover > .icon {
  fill: #333;
}
#left-side ul li.active {
  color: #333333;
}
#left-side ul li.active:hover > .icon {
  fill: #6abcf6;
}

#border {
      height: 380px;
    width: 1px;
    background-color: #aaa;

}
#border #line.one {
  width: 5px;
  height: 54px;
  background-color: #6abcf6;
  margin-left: -2px;
  margin-top: 35px;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
#border #line.two {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 89px;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
#border #line.three {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 143px;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
#border #line.four {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 197px;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

#right-side {
  height: 350px;
  width: 75%;
  overflow: hidden;
}
#right-side #first, #right-side #second, #right-side #third, #right-side #fourth {
  height: 300px;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
  margin-top: -300px;
  opacity: 0;
}
#right-side #first h1, #right-side #second h1, #right-side #third h1, #right-side #fourth h1 {
  font-weight: 800;
  color: #333;
}
#right-side #first p, #right-side #second p, #right-side #third p, #right-side #fourth p {
      padding-left: 30px;
    padding-right: 30px;
    font-size: 14px;
}
#right-side #first.active, #right-side #second.active, #right-side #third.active, #right-side #fourth.active {
  margin-top: 0px;
  opacity: 1;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}

.intro-text {
  font-size: 28px;
  font-style: italic;
  line-height: 14px;
}

.intro-text span {
  font-size: 10px;
}

.wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.iconblockedgroup {
  width: 100%;
  list-style: none;
  padding: 0;
  text-align: justify;
}
.iconblockedgroup::after {
   width: 100%;
  display: inline-block;
  content: ".";
  visibility: hidden;
}

.iconblocked {
   text-align: left;
   width: 220px;
   display: inline-block;
   margin-right: 0;
   padding-bottom: 30px;
}

.iconblocked  .image {
  display: table;
  vertical-align: bottom;
  width: 100%;
  min-height: 108px;
  max-height: 108px;
  height: 108px;
  margin-bottom: 25px;
}
.iconblocked  .image .row {
  display: table-cell;
  vertical-align: bottom;
  width: 100%;
}


.svgAnimPanel {
  width: 33.33%;
  float: left;
}
.svgAnimPanel:hover {
  box-shadow: inset 0 0 0 1px #ccc;
}
.svgAnimPanel svg {
  margin: 10px 10px 0px 10px;
}

/***
    Prevent animnation on Explorer
    ***/
.isIE .svgAnimPanel:hover .svg-icon, .isIE .svgAnimPanel:hover .svg-icon * {
  -webkit-animation-name: none !important;
          animation-name: none !important;
}

.icon-agile-software #seconds {
  -webkit-transform: rotateZ(0deg);
  -webkit-transform-origin: center left;
  transform: rotateZ(0deg);
  transform-origin: center left;
}
.icon-agile-software #fill_circle {
  -webkit-transform: rotateZ(0deg);
  -webkit-transform-origin: 48px 54px;
  transform: rotateZ(0deg);
  transform-origin: 48px 54px;
}
.icon-agile-software #fill_circle_mask {
  -webkit-transform: rotateZ(0deg);
  -webkit-transform-origin: 48px 54px;
  transform: rotateZ(0deg);
  transform-origin: 48px 54px;
}

.svgAnimPanel:hover .icon-agile-software #start_button {
  -webkit-animation: clock_start 0.2s linear, clock_start 0.2s linear 1.4s;
  animation: clock_start 0.2s linear, clock_start 0.2s linear 1.4s;
}
.svgAnimPanel:hover .icon-agile-software #seconds {
  -webkit-animation: clock_rotate 0.75s 2 linear 0.1s;
  animation: clock_rotate 0.75s 2 linear 0.1s;
}
.svgAnimPanel:hover .icon-agile-software #fill_circle {
  -webkit-animation: clock_rotate_fill 1.5s linear 0.1s;
  animation: clock_rotate_fill 1.5s linear 0.1s;
}
.svgAnimPanel:hover .icon-agile-software #fill_circle_mask {
  -webkit-animation: clock_rotate_mask 1.5s linear 0.1s;
  animation: clock_rotate_mask 1.5s linear 0.1s;
}
.svgAnimPanel:hover .icon-agile-software #main_circle {
  -webkit-animation: clock_main_circle 1.5s linear 0.1s;
  animation: clock_main_circle 1.5s linear 0.1s;
}

@-webkit-keyframes clock_start {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(-3px, 3px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@-webkit-keyframes clock_rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
  }
}
@-webkit-keyframes clock_main_circle {
  0% {
    fill: #12C4E8;
  }
  37.5% {
    fill: #12C4E8;
  }
  37.51% {
    fill: #ff550e;
  }
  87.5% {
    fill: #ff550e;
  }
  87.51% {
    fill: #12C4E8;
  }
  100% {
    fill: #12C4E8;
  }
}
@-webkit-keyframes clock_rotate_fill {
  0% {
    fill: #ff550e;
  }
  50% {
    -webkit-transform: rotateZ(360deg);
  }
  37.5% {
    fill: #ff550e;
  }
  37.51% {
    fill: #12C4E8;
  }
  50.01% {
    -webkit-transform: rotateZ(0deg);
  }
  87.5% {
    fill: #12C4E8;
  }
  87.51% {
    fill: #ff550e;
  }
  100% {
    -webkit-transform: rotateZ(360deg);
    fill: #ff550e;
  }
}
@-webkit-keyframes clock_rotate_mask {
  12.5% {
    -webkit-transform: rotateZ(0deg);
    fill: #12C4E8;
  }
  12.51% {
    -webkit-transform: rotateZ(180deg);
    fill: #ff550e;
  }
  37.5% {
    -webkit-transform: rotateZ(180deg);
    fill: #ff550e;
  }
  37.51% {
    -webkit-transform: rotateZ(0deg);
    fill: #ff550e;
  }
  50% {
    -webkit-transform: rotateZ(0deg);
    fill: #ff550e;
  }
  50.01% {
    -webkit-transform: rotateZ(0deg);
  }
  62.5% {
    -webkit-transform: rotateZ(0deg);
    fill: #ff550e;
  }
  62.51% {
    -webkit-transform: rotateZ(180deg);
    fill: #12C4E8;
  }
  87.5% {
    -webkit-transform: rotateZ(180deg);
  }
  87.51% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(0deg);
    fill: #12C4E8;
  }
}
@keyframes clock_start {
  50% {
    -webkit-transform: translate(-3px, 3px);
            transform: translate(-3px, 3px);
  }
}
@keyframes clock_rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes clock_main_circle {
  0% {
    fill: #12C4E8;
  }
  37.5% {
    fill: #12C4E8;
  }
  37.51% {
    fill: #ff550e;
  }
  87.5% {
    fill: #ff550e;
  }
  87.51% {
    fill: #12C4E8;
  }
  100% {
    fill: #12C4E8;
  }
}
@keyframes clock_rotate_fill {
  0% {
    fill: #ff550e;
  }
  50% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
  37.5% {
    fill: #ff550e;
  }
  37.51% {
    fill: #12C4E8;
  }
  50.01% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  87.5% {
    fill: #12C4E8;
  }
  87.51% {
    fill: #ff550e;
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
    fill: #ff550e;
  }
}
@keyframes clock_rotate_mask {
  12.5% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    fill: #12C4E8;
  }
  12.51% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
    fill: #ff550e;
  }
  37.5% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
    fill: #ff550e;
  }
  37.51% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    fill: #ff550e;
  }
  50% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    fill: #ff550e;
  }
  50.01% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  62.5% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    fill: #ff550e;
  }
  62.51% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
    fill: #12C4E8;
  }
  87.5% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
  }
  87.51% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    fill: #12C4E8;
  }
}
.icon-user-experience #icon-ux_zoom {
  -webkit-transform-origin: 90px 83px;
  transform-origin: 90px 83px;
}
.icon-user-experience #icon-ux_zoom_circle_check {
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.icon-user-experience #icon-ux_hand {
  -webkit-transform-origin: 0px -20px;
  transform-origin: 0px -20px;
}
.icon-user-experience #icon-ux_zoom, .icon-user-experience #icon-ux_zoom_circle_check {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.icon-user-experience #icon-ux_img_block-vertical {
  opacity: 0;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.icon-user-experience #icon-ux_hand {
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}

.svgAnimPanel:hover .icon-user-experience #icon-ux_zoom {
  -webkit-animation: ux_zoom 2s forwards;
  animation: ux_zoom 2s forwards;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_zoom_circle_check {
  -webkit-animation: ux_zoom_check 2s forwards;
  animation: ux_zoom_check 2s forwards;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_zoom_circle_bg {
  -webkit-animation: ux_zoom_bg 2s forwards;
  animation: ux_zoom_bg 2s forwards;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_panel_highlight {
  -webkit-animation: panel_highlight 2s linear;
  animation: panel_highlight 2s linear;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_hand {
  -webkit-animation: ux_cursor_move 2s linear;
  animation: ux_cursor_move 2s linear;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_hand_open {
  -webkit-animation: ux_cursor_open 2s linear;
  animation: ux_cursor_open 2s linear;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_img_block {
  -webkit-animation: ux_panel_move 2s linear;
  animation: ux_panel_move 2s linear;
}

@-webkit-keyframes ux_zoom {
  40% {
    -webkit-transform: rotateZ(0deg) translateX(0);
  }
  60% {
    -webkit-transform: rotateZ(-10deg) translateX(-10px);
  }
  80% {
    -webkit-transform: rotateZ(10deg) translateX(0);
  }
}
@-webkit-keyframes ux_zoom_check {
  10% {
    -webkit-transform: scale(1);
  }
  30% {
    -webkit-transform: scale(0.2);
    opacity: 0;
  }
  79% {
    -webkit-transform: scale(0.2);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  90% {
    -webkit-transform: scale(4);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes ux_zoom_bg {
  10% {
    fill: #12C4E8;
  }
  30% {
    fill: #93DCEC;
  }
  80% {
    fill: #93DCEC;
  }
  90% {
    fill: #12C4E8;
  }
}
@-webkit-keyframes ux_cursor_move {
  0% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  10% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
  }
  30% {
    -webkit-transform: scale(0.4) translate(81px, 180px);
  }
  50% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
  }
  70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
    opacity: 0;
  }
}
@-webkit-keyframes ux_cursor_open {
  0%, 5% {
    opacity: 1;
  }
  5.01% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.01%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes ux_panel_move {
  10% {
    -webkit-transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes ux_zoom {
  40% {
    -webkit-transform: rotateZ(0deg) translateX(0);
            transform: rotateZ(0deg) translateX(0);
  }
  60% {
    -webkit-transform: rotateZ(-10deg) translateX(-10px);
            transform: rotateZ(-10deg) translateX(-10px);
  }
  80% {
    -webkit-transform: rotateZ(10deg) translateX(0);
            transform: rotateZ(10deg) translateX(0);
  }
}
@keyframes ux_zoom_check {
  10% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0;
  }
  79% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  90% {
    -webkit-transform: scale(4);
            transform: scale(4);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes ux_zoom_bg {
  10% {
    fill: #12C4E8;
  }
  30% {
    fill: #93DCEC;
  }
  80% {
    fill: #93DCEC;
  }
  90% {
    fill: #12C4E8;
  }
}
@keyframes ux_cursor_move {
  0% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
            transform: scale(0.4) translate(31px, 180px);
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  10% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
            transform: scale(0.4) translate(31px, 180px);
  }
  30% {
    -webkit-transform: scale(0.4) translate(81px, 180px);
            transform: scale(0.4) translate(81px, 180px);
  }
  50% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
            transform: scale(0.4) translate(31px, 180px);
  }
  70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
            transform: scale(0.4) translate(31px, 180px);
    opacity: 0;
  }
}
@keyframes ux_cursor_open {
  0%, 5% {
    opacity: 1;
  }
  5.01% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.01%, 100% {
    opacity: 1;
  }
}
@keyframes ux_panel_move {
  10% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(20px, 0);
            transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.icon-business-and-strategy #icon-board_paper, .icon-business-and-strategy #icon-board_staple {
  -webkit-transform-origin: 0 0%;
  transform-origin: 0 0%;
}
.icon-business-and-strategy #icon-board_paper {
  -webkit-transform: rotateZ(0) rotateX(0) translate(0, 0) scale(1);
  transform: rotateZ(0) rotateX(0) translate(0, 0) scale(1);
}
.icon-business-and-strategy #icon-board_circle,
.icon-business-and-strategy #icon-board_cross,
.icon-business-and-strategy #icon-board_arrow,
.icon-business-and-strategy #icon-board_arrow-line path,
.icon-business-and-strategy #icon-board_arrow-end {
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.svgAnimPanel:hover .icon-business-and-strategy #icon-board_staple {
  -webkit-animation: strategy_staple 0.45s ease-in forwards;
  animation: strategy_staple 0.45s ease-in forwards;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_paper {
  -webkit-animation: strategy_delete_paper 0.45s ease-in forwards;
  animation: strategy_delete_paper 0.45s ease-in forwards;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_circle {
  -webkit-animation: strategy_draw_circle 0.75s ease-in 0.45s forwards;
  animation: strategy_draw_circle 0.75s ease-in 0.45s forwards;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_cross {
  -webkit-animation: strategy_draw_cross 0.75s ease-in 0.45s forwards;
  animation: strategy_draw_cross 0.75s ease-in 0.45s forwards;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line path {
  -webkit-animation: strategy_draw_arrow_line 1.5s ease-in 0.45s forwards;
  animation: strategy_draw_arrow_line 1.5s ease-in 0.45s forwards;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-b {
  -webkit-animation-name: strategy_draw_arrow_line-b;
  animation-name: strategy_draw_arrow_line-b;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-c {
  -webkit-animation-name: strategy_draw_arrow_line-c;
  animation-name: strategy_draw_arrow_line-c;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-d {
  -webkit-animation-name: strategy_draw_arrow_line-d;
  animation-name: strategy_draw_arrow_line-d;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-e {
  -webkit-animation-name: strategy_draw_arrow_line-e;
  animation-name: strategy_draw_arrow_line-e;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-f {
  -webkit-animation-name: strategy_draw_arrow_line-f;
  animation-name: strategy_draw_arrow_line-f;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-g {
  -webkit-animation-name: strategy_draw_arrow_line-g;
  animation-name: strategy_draw_arrow_line-g;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-end {
  -webkit-animation: strategy_draw_arrow_line-end 1.5s ease-in 0.45s forwards;
  animation: strategy_draw_arrow_line-end 1.5s ease-in 0.45s forwards;
}


/*style for section skillset*/



.svgAnimPanel {
  width: 100%;
  float: none;
}
.svgAnimPanel:hover {
  box-shadow: inset 0 0 0 1px #ccc;
}
.svgAnimPanel svg {
  margin: 30px 20px 5px 20px;
}

/***
    Prevent animnation on Explorer
    ***/
.isIE .svgAnimPanel:hover .svg-icon, .isIE .svgAnimPanel:hover .svg-icon * {
  -webkit-animation-name: none !important;
          animation-name: none !important;
}

.icon-agile-software #seconds {
  -webkit-transform: rotateZ(0deg);
  -webkit-transform-origin: center left;
  transform: rotateZ(0deg);
  transform-origin: center left;
}
.icon-agile-software #fill_circle {
  -webkit-transform: rotateZ(0deg);
  -webkit-transform-origin: 48px 54px;
  transform: rotateZ(0deg);
  transform-origin: 48px 54px;
}
.icon-agile-software #fill_circle_mask {
  -webkit-transform: rotateZ(0deg);
  -webkit-transform-origin: 48px 54px;
  transform: rotateZ(0deg);
  transform-origin: 48px 54px;
}

.svgAnimPanel:hover .icon-agile-software #start_button {
  -webkit-animation: clock_start 0.2s linear, clock_start 0.2s linear 1.4s;
  animation: clock_start 0.2s linear, clock_start 0.2s linear 1.4s;
}
.svgAnimPanel:hover .icon-agile-software #seconds {
  -webkit-animation: clock_rotate 0.75s 2 linear 0.1s;
  animation: clock_rotate 0.75s 2 linear 0.1s;
}
.svgAnimPanel:hover .icon-agile-software #fill_circle {
  -webkit-animation: clock_rotate_fill 1.5s linear 0.1s;
  animation: clock_rotate_fill 1.5s linear 0.1s;
}
.svgAnimPanel:hover .icon-agile-software #fill_circle_mask {
  -webkit-animation: clock_rotate_mask 1.5s linear 0.1s;
  animation: clock_rotate_mask 1.5s linear 0.1s;
}
.svgAnimPanel:hover .icon-agile-software #main_circle {
  -webkit-animation: clock_main_circle 1.5s linear 0.1s;
  animation: clock_main_circle 1.5s linear 0.1s;
}

@-webkit-keyframes clock_start {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(-3px, 3px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@-webkit-keyframes clock_rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
  }
}
@-webkit-keyframes clock_main_circle {
  0% {
    fill: #12C4E8;
  }
  37.5% {
    fill: #12C4E8;
  }
  37.51% {
    fill: #ff550e;
  }
  87.5% {
    fill: #ff550e;
  }
  87.51% {
    fill: #12C4E8;
  }
  100% {
    fill: #12C4E8;
  }
}
@-webkit-keyframes clock_rotate_fill {
  0% {
    fill: #ff550e;
  }
  50% {
    -webkit-transform: rotateZ(360deg);
  }
  37.5% {
    fill: #ff550e;
  }
  37.51% {
    fill: #12C4E8;
  }
  50.01% {
    -webkit-transform: rotateZ(0deg);
  }
  87.5% {
    fill: #12C4E8;
  }
  87.51% {
    fill: #ff550e;
  }
  100% {
    -webkit-transform: rotateZ(360deg);
    fill: #ff550e;
  }
}
@-webkit-keyframes clock_rotate_mask {
  12.5% {
    -webkit-transform: rotateZ(0deg);
    fill: #12C4E8;
  }
  12.51% {
    -webkit-transform: rotateZ(180deg);
    fill: #ff550e;
  }
  37.5% {
    -webkit-transform: rotateZ(180deg);
    fill: #ff550e;
  }
  37.51% {
    -webkit-transform: rotateZ(0deg);
    fill: #ff550e;
  }
  50% {
    -webkit-transform: rotateZ(0deg);
    fill: #ff550e;
  }
  50.01% {
    -webkit-transform: rotateZ(0deg);
  }
  62.5% {
    -webkit-transform: rotateZ(0deg);
    fill: #ff550e;
  }
  62.51% {
    -webkit-transform: rotateZ(180deg);
    fill: #12C4E8;
  }
  87.5% {
    -webkit-transform: rotateZ(180deg);
  }
  87.51% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(0deg);
    fill: #12C4E8;
  }
}
@keyframes clock_start {
  50% {
    -webkit-transform: translate(-3px, 3px);
            transform: translate(-3px, 3px);
  }
}
@keyframes clock_rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes clock_main_circle {
  0% {
    fill: #12C4E8;
  }
  37.5% {
    fill: #12C4E8;
  }
  37.51% {
    fill: #ff550e;
  }
  87.5% {
    fill: #ff550e;
  }
  87.51% {
    fill: #12C4E8;
  }
  100% {
    fill: #12C4E8;
  }
}
@keyframes clock_rotate_fill {
  0% {
    fill: #ff550e;
  }
  50% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
  37.5% {
    fill: #ff550e;
  }
  37.51% {
    fill: #12C4E8;
  }
  50.01% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  87.5% {
    fill: #12C4E8;
  }
  87.51% {
    fill: #ff550e;
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
    fill: #ff550e;
  }
}
@keyframes clock_rotate_mask {
  12.5% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    fill: #12C4E8;
  }
  12.51% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
    fill: #ff550e;
  }
  37.5% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
    fill: #ff550e;
  }
  37.51% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    fill: #ff550e;
  }
  50% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    fill: #ff550e;
  }
  50.01% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  62.5% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    fill: #ff550e;
  }
  62.51% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
    fill: #12C4E8;
  }
  87.5% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
  }
  87.51% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    fill: #12C4E8;
  }
}
.icon-user-experience #icon-ux_zoom {
  -webkit-transform-origin: 90px 83px;
  transform-origin: 90px 83px;
}
.icon-user-experience #icon-ux_zoom_circle_check {
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.icon-user-experience #icon-ux_hand {
  -webkit-transform-origin: 0px -20px;
  transform-origin: 0px -20px;
}
.icon-user-experience #icon-ux_zoom, .icon-user-experience #icon-ux_zoom_circle_check {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.icon-user-experience #icon-ux_img_block-vertical {
  opacity: 0;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.icon-user-experience #icon-ux_hand {
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}

.svgAnimPanel:hover .icon-user-experience #icon-ux_zoom {
  -webkit-animation: ux_zoom 2s forwards;
  animation: ux_zoom 2s forwards;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_zoom_circle_check {
  -webkit-animation: ux_zoom_check 2s forwards;
  animation: ux_zoom_check 2s forwards;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_zoom_circle_bg {
  -webkit-animation: ux_zoom_bg 2s forwards;
  animation: ux_zoom_bg 2s forwards;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_panel_highlight {
  -webkit-animation: panel_highlight 2s linear;
  animation: panel_highlight 2s linear;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_hand {
  -webkit-animation: ux_cursor_move 2s linear;
  animation: ux_cursor_move 2s linear;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_hand_open {
  -webkit-animation: ux_cursor_open 2s linear;
  animation: ux_cursor_open 2s linear;
}
.svgAnimPanel:hover .icon-user-experience #icon-ux_img_block {
  -webkit-animation: ux_panel_move 2s linear;
  animation: ux_panel_move 2s linear;
}

@-webkit-keyframes ux_zoom {
  40% {
    -webkit-transform: rotateZ(0deg) translateX(0);
  }
  60% {
    -webkit-transform: rotateZ(-10deg) translateX(-10px);
  }
  80% {
    -webkit-transform: rotateZ(10deg) translateX(0);
  }
}
@-webkit-keyframes ux_zoom_check {
  10% {
    -webkit-transform: scale(1);
  }
  30% {
    -webkit-transform: scale(0.2);
    opacity: 0;
  }
  79% {
    -webkit-transform: scale(0.2);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  90% {
    -webkit-transform: scale(4);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes ux_zoom_bg {
  10% {
    fill: #12C4E8;
  }
  30% {
    fill: #93DCEC;
  }
  80% {
    fill: #93DCEC;
  }
  90% {
    fill: #12C4E8;
  }
}
@-webkit-keyframes ux_cursor_move {
  0% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  10% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
  }
  30% {
    -webkit-transform: scale(0.4) translate(81px, 180px);
  }
  50% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
  }
  70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
    opacity: 0;
  }
}
@-webkit-keyframes ux_cursor_open {
  0%, 5% {
    opacity: 1;
  }
  5.01% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.01%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes ux_panel_move {
  10% {
    -webkit-transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes ux_zoom {
  40% {
    -webkit-transform: rotateZ(0deg) translateX(0);
            transform: rotateZ(0deg) translateX(0);
  }
  60% {
    -webkit-transform: rotateZ(-10deg) translateX(-10px);
            transform: rotateZ(-10deg) translateX(-10px);
  }
  80% {
    -webkit-transform: rotateZ(10deg) translateX(0);
            transform: rotateZ(10deg) translateX(0);
  }
}
@keyframes ux_zoom_check {
  10% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0;
  }
  79% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  90% {
    -webkit-transform: scale(4);
            transform: scale(4);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes ux_zoom_bg {
  10% {
    fill: #12C4E8;
  }
  30% {
    fill: #93DCEC;
  }
  80% {
    fill: #93DCEC;
  }
  90% {
    fill: #12C4E8;
  }
}
@keyframes ux_cursor_move {
  0% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
            transform: scale(0.4) translate(31px, 180px);
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  10% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
            transform: scale(0.4) translate(31px, 180px);
  }
  30% {
    -webkit-transform: scale(0.4) translate(81px, 180px);
            transform: scale(0.4) translate(81px, 180px);
  }
  50% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
            transform: scale(0.4) translate(31px, 180px);
  }
  70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.4) translate(31px, 180px);
            transform: scale(0.4) translate(31px, 180px);
    opacity: 0;
  }
}
@keyframes ux_cursor_open {
  0%, 5% {
    opacity: 1;
  }
  5.01% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.01%, 100% {
    opacity: 1;
  }
}
@keyframes ux_panel_move {
  10% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(20px, 0);
            transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.icon-business-and-strategy #icon-board_paper, .icon-business-and-strategy #icon-board_staple {
  -webkit-transform-origin: 0 0%;
  transform-origin: 0 0%;
}
.icon-business-and-strategy #icon-board_paper {
  -webkit-transform: rotateZ(0) rotateX(0) translate(0, 0) scale(1);
  transform: rotateZ(0) rotateX(0) translate(0, 0) scale(1);
}
.icon-business-and-strategy #icon-board_circle,
.icon-business-and-strategy #icon-board_cross,
.icon-business-and-strategy #icon-board_arrow,
.icon-business-and-strategy #icon-board_arrow-line path,
.icon-business-and-strategy #icon-board_arrow-end {
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.svgAnimPanel:hover .icon-business-and-strategy #icon-board_staple {
  -webkit-animation: strategy_staple 0.45s ease-in forwards;
  animation: strategy_staple 0.45s ease-in forwards;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_paper {
  -webkit-animation: strategy_delete_paper 0.45s ease-in forwards;
  animation: strategy_delete_paper 0.45s ease-in forwards;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_circle {
  -webkit-animation: strategy_draw_circle 0.75s ease-in 0.45s forwards;
  animation: strategy_draw_circle 0.75s ease-in 0.45s forwards;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_cross {
  -webkit-animation: strategy_draw_cross 0.75s ease-in 0.45s forwards;
  animation: strategy_draw_cross 0.75s ease-in 0.45s forwards;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line path {
  -webkit-animation: strategy_draw_arrow_line 1.5s ease-in 0.45s forwards;
  animation: strategy_draw_arrow_line 1.5s ease-in 0.45s forwards;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-b {
  -webkit-animation-name: strategy_draw_arrow_line-b;
  animation-name: strategy_draw_arrow_line-b;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-c {
  -webkit-animation-name: strategy_draw_arrow_line-c;
  animation-name: strategy_draw_arrow_line-c;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-d {
  -webkit-animation-name: strategy_draw_arrow_line-d;
  animation-name: strategy_draw_arrow_line-d;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-e {
  -webkit-animation-name: strategy_draw_arrow_line-e;
  animation-name: strategy_draw_arrow_line-e;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-f {
  -webkit-animation-name: strategy_draw_arrow_line-f;
  animation-name: strategy_draw_arrow_line-f;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-line #icon-board_arrow-line-g {
  -webkit-animation-name: strategy_draw_arrow_line-g;
  animation-name: strategy_draw_arrow_line-g;
}
.svgAnimPanel:hover .icon-business-and-strategy #icon-board_arrow-end {
  -webkit-animation: strategy_draw_arrow_line-end 1.5s ease-in 0.45s forwards;
  animation: strategy_draw_arrow_line-end 1.5s ease-in 0.45s forwards;
}

@-webkit-keyframes strategy_delete_paper {
  60% {
    -webkit-transform: rotateZ(-10deg) translate(5px, 15px);
  }
  99% {
    -webkit-transform: rotateZ(10deg) rotateX(-50deg) translate(50px, 100px) scale(0.8);
  }
  100% {
    -webkit-transform: rotateZ(0) rotateX(0) translate(0, 0) scale(1);
  }
}
@-webkit-keyframes strategy_staple {
  0% {
    -webkit-transform: rotateX(0);
  }
  20% {
    -webkit-transform: rotateX(50deg);
  }
  100% {
    -webkit-transform: rotateX(0);
  }
}
@-webkit-keyframes strategy_draw_circle {
  0% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
}
@-webkit-keyframes strategy_draw_cross {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes strategy_draw_arrow_line {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
@-webkit-keyframes strategy_draw_arrow_line-b {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
@-webkit-keyframes strategy_draw_arrow_line-c {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
}
@-webkit-keyframes strategy_draw_arrow_line-d {
  0% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
}
@-webkit-keyframes strategy_draw_arrow_line-e {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
@-webkit-keyframes strategy_draw_arrow_line-f {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
@-webkit-keyframes strategy_draw_arrow_line-g {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
}
@-webkit-keyframes strategy_draw_arrow_line-end {
  0% {
    opacity: 0;
  }
  85% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}
@keyframes strategy_delete_paper {
  60% {
    opacity: 1;
    -webkit-transform: rotateZ(-10deg) translate(5px, 15px);
            transform: rotateZ(-10deg) translate(5px, 15px);
  }
  99% {
    -webkit-transform: rotateZ(10deg) rotateX(-50deg) translate(50px, 100px) scale(0.8);
            transform: rotateZ(10deg) rotateX(-50deg) translate(50px, 100px) scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateZ(0) rotateX(0) translate(0, 0) scale(1);
            transform: rotateZ(0) rotateX(0) translate(0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes strategy_staple {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  20% {
    -webkit-transform: rotateX(50deg);
            transform: rotateX(50deg);
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}
@keyframes strategy_draw_circle {
  0% {
    opacity: 0;
    -webkit-transform: scale(10);
            transform: scale(10);
  }
  65% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes strategy_draw_cross {
  0% {
    opacity: 0;
    -webkit-transform: scale(10);
            transform: scale(10);
  }
  60% {
    opacity: 0;
    -webkit-transform: scale(10);
            transform: scale(10);
  }
  85% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes strategy_draw_arrow_line {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
@keyframes strategy_draw_arrow_line-b {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
@keyframes strategy_draw_arrow_line-c {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
}
@keyframes strategy_draw_arrow_line-d {
  0% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
}
@keyframes strategy_draw_arrow_line-e {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
@keyframes strategy_draw_arrow_line-f {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
@keyframes strategy_draw_arrow_line-g {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
}
@keyframes strategy_draw_arrow_line-end {
  0% {
    opacity: 0;
  }
  85% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}
.icon-cloud .ball {
  -webkit-transform-origin: center center;
  transform-origin: center center;
  opacity: 0;
  -webkit-transform: translate(0, 0) scale(0);
  transform: translate(0, 0) scale(0);
}
.icon-cloud .arrow {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0, 0) scale(1);
}
.icon-cloud #icon-cloud_reflection {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 41.5px 30.5px;
  transform-origin: 41.5px 30.5px;
}

.svgAnimPanel .icon-cloud .ball {
  opacity: 1;
  -webkit-animation: cloud_ball 2s ease-in-out infinite;
  animation: cloud_ball 2s ease-in-out infinite;
}
.svgAnimPanel .icon-cloud #ball2 {
  -webkit-animation: cloud_ball 2s ease-in-out 0.0133333333s infinite;
  animation: cloud_ball 2s ease-in-out 0.0133333333s infinite;
}
.svgAnimPanel .icon-cloud #ball3 {
  -webkit-animation: cloud_ball 2s ease-in-out 0.0266666667s infinite;
  animation: cloud_ball 2s ease-in-out 0.0266666667s infinite;
}
.svgAnimPanel .icon-cloud #ball4 {
  -webkit-animation: cloud_ball 2s ease-in-out 0.04s infinite;
  animation: cloud_ball 2s ease-in-out 0.04s infinite;
}
.svgAnimPanel .icon-cloud #ball5 {
  -webkit-animation: cloud_ball 2s ease-in-out 0.0533333333s infinite;
  animation: cloud_ball 2s ease-in-out 0.0533333333s infinite;
}
.svgAnimPanel .icon-cloud #ball6 {
  -webkit-animation: cloud_ball 2s ease-in-out 0.0666666667s infinite;
  animation: cloud_ball 2s ease-in-out 0.0666666667s infinite;
}
.svgAnimPanel .icon-cloud #ball7 {
  -webkit-animation: cloud_ball 2s ease-in-out 0.08s infinite;
  animation: cloud_ball 2s ease-in-out 0.08s infinite;
}
.svgAnimPanel .icon-cloud #ball8 {
  -webkit-animation: cloud_ball 2s ease-in-out 0.0933333333s infinite;
  animation: cloud_ball 2s ease-in-out 0.0933333333s infinite;
}
.svgAnimPanel .icon-cloud #ball9 {
  -webkit-animation: cloud_ball 2s ease-in-out 0.1066666667s infinite;
  animation: cloud_ball 2s ease-in-out 0.1066666667s infinite;
}
.svgAnimPanel .arrow {
  -webkit-animation: cloud_arrow 2s infinite;
  animation: cloud_arrow 2s infinite;
}
.svgAnimPanel #icon-cloud_arrow_bottom {
  -webkit-animation: cloud_arrow_down 2s infinite;
  animation: cloud_arrow_down 2s infinite;
}
.svgAnimPanel #icon-cloud_reflection {
  -webkit-animation: cloud_reflection 1s linear infinite;
  animation: cloud_reflection 1s linear infinite;
}

@-webkit-keyframes cloud_arrow {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
  }
  50% {
    -webkit-transform: translate(0, -2px) scale(1.2);
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
  }
}
@-webkit-keyframes cloud_arrow_down {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
  }
  50% {
    -webkit-transform: translate(0, 2px) scale(1.2);
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
  }
}
@-webkit-keyframes cloud_reflection {
  0% {
    -webkit-transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes cloud_ball {
  0% {
    -webkit-transform: translate(0, 0) scale(0);
  }
  4% {
    -webkit-transform: translate(0px, -17px) scale(1);
  }
  5% {
    -webkit-transform: translate(5px, -22px);
  }
  12% {
    -webkit-transform: translate(29px, -22px);
  }
  14% {
    -webkit-transform: translate(37px, -29px);
  }
  16% {
    -webkit-transform: translate(40px, -37px);
  }
  20% {
    -webkit-transform: translate(37px, -48px);
  }
  24% {
    -webkit-transform: translate(27px, -52px);
  }
  26% {
    -webkit-transform: translate(23px, -62px);
  }
  30% {
    -webkit-transform: translate(14px, -65px);
  }
  32% {
    -webkit-transform: translate(6px, -73px);
  }
  36% {
    -webkit-transform: translate(-4px, -75px);
  }
  40% {
    -webkit-transform: translate(-17px, -72px);
  }
  43% {
    -webkit-transform: translate(-24px, -64px);
  }
  46% {
    -webkit-transform: translate(-27px, -55px);
  }
  50% {
    -webkit-transform: translate(-37px, -49px);
  }
  53% {
    -webkit-transform: translate(-42px, -40px);
  }
  56% {
    -webkit-transform: translate(-39px, -29px);
  }
  59% {
    -webkit-transform: translate(-30px, -23px);
  }
  66% {
    -webkit-transform: translate(-7px, -23px);
  }
  69% {
    -webkit-transform: translate(-2px, -29px) scale(1);
  }
  72% {
    -webkit-transform: translate(0px, -36px) scale(0.2);
  }
  80% {
    -webkit-transform: translate(0px, -52px) scale(0);
  }
  100% {
    -webkit-transform: translate(0px, -52px) scale(0);
  }
}
@keyframes cloud_arrow {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0, -2px) scale(1.2);
            transform: translate(0, -2px) scale(1.2);
    opacity: .75;
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes cloud_arrow_down {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0, 2px) scale(1.2);
            transform: translate(0, 2px) scale(1.2);
    opacity: .75;
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes cloud_reflection {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    opacity: 1;
  }
}
@keyframes cloud_ball {
  0% {
    -webkit-transform: translate(0, 0) scale(0);
            transform: translate(0, 0) scale(0);
    opacity: 1;
  }
  4% {
    -webkit-transform: translate(0px, -17px) scale(1);
            transform: translate(0px, -17px) scale(1);
  }
  5% {
    -webkit-transform: translate(5px, -22px);
            transform: translate(5px, -22px);
  }
  12% {
    -webkit-transform: translate(29px, -22px);
            transform: translate(29px, -22px);
  }
  /* long */
  14% {
    -webkit-transform: translate(37px, -29px);
            transform: translate(37px, -29px);
  }
  16% {
    -webkit-transform: translate(40px, -37px);
            transform: translate(40px, -37px);
  }
  20% {
    -webkit-transform: translate(37px, -48px);
            transform: translate(37px, -48px);
  }
  24% {
    -webkit-transform: translate(27px, -52px);
            transform: translate(27px, -52px);
  }
  26% {
    -webkit-transform: translate(23px, -62px);
            transform: translate(23px, -62px);
  }
  30% {
    -webkit-transform: translate(14px, -65px);
            transform: translate(14px, -65px);
  }
  32% {
    -webkit-transform: translate(6px, -73px);
            transform: translate(6px, -73px);
  }
  36% {
    -webkit-transform: translate(-4px, -75px);
            transform: translate(-4px, -75px);
  }
  40% {
    -webkit-transform: translate(-17px, -72px);
            transform: translate(-17px, -72px);
  }
  43% {
    -webkit-transform: translate(-24px, -64px);
            transform: translate(-24px, -64px);
  }
  46% {
    -webkit-transform: translate(-27px, -55px);
            transform: translate(-27px, -55px);
  }
  50% {
    -webkit-transform: translate(-37px, -49px);
            transform: translate(-37px, -49px);
  }
  53% {
    -webkit-transform: translate(-42px, -40px);
            transform: translate(-42px, -40px);
  }
  56% {
    -webkit-transform: translate(-39px, -29px);
            transform: translate(-39px, -29px);
  }
  59% {
    -webkit-transform: translate(-30px, -23px);
            transform: translate(-30px, -23px);
  }
  66% {
    -webkit-transform: translate(-7px, -23px);
            transform: translate(-7px, -23px);
  }
  /* long */
  69% {
    -webkit-transform: translate(-2px, -29px) scale(1);
            transform: translate(-2px, -29px) scale(1);
    opacity: 1;
  }
  72% {
    -webkit-transform: translate(0px, -36px) scale(0.2);
            transform: translate(0px, -36px) scale(0.2);
    opacity: .5;
  }
  80% {
    -webkit-transform: translate(0px, -52px) scale(0);
            transform: translate(0px, -52px) scale(0);
  }
  100% {
    -webkit-transform: translate(0px, -52px) scale(0);
            transform: translate(0px, -52px) scale(0);
    opacity: 0;
  }
}
.icon-big-data #icon-laptop_line_3_circle {
  opacity: 1;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

.svgAnimPanel .icon-big-data #icon-laptop_line_3_circle {
  -webkit-animation: big-data-ball 3s linear infinite;
  animation: big-data-ball 3s linear infinite;
}

@-webkit-keyframes big-data-ball {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
  }
  5% {
    -webkit-transform: translate(14px, 0) scale(1);
  }
  /* line 4 */
  5.01% {
    -webkit-transform: translate(-24px, 44px) scale(0.3);
  }
  7% {
    -webkit-transform: translate(-24px, 44px) scale(0.6);
  }
  13% {
    -webkit-transform: translate(-24px, -8px) scale(0.6);
  }
  20% {
    -webkit-transform: translate(-56px, -8px) scale(1);
  }
  25% {
    -webkit-transform: translate(-72px, -8px) scale(1);
  }
  /* line 5 */
  25.01% {
    -webkit-transform: translate(-19px, 44px) scale(0.3);
  }
  27% {
    -webkit-transform: translate(-19px, 44px) scale(0.6);
  }
  33% {
    -webkit-transform: translate(-19px, 23px) scale(0.6);
  }
  40% {
    -webkit-transform: translate(-10px, 23px) scale(1);
  }
  45% {
    -webkit-transform: translate(14px, 23px) scale(1);
  }
  /* line 1 */
  45.01% {
    -webkit-transform: translate(-40px, 44px) scale(0.3);
  }
  47% {
    -webkit-transform: translate(-40px, 44px) scale(0.6);
  }
  53% {
    -webkit-transform: translate(-40px, 23px) scale(0.6);
  }
  60% {
    -webkit-transform: translate(-49px, 23px) scale(1);
  }
  65% {
    -webkit-transform: translate(-72px, 23px) scale(1);
  }
  /* line 2 */
  65.01% {
    -webkit-transform: translate(-35px, 44px) scale(0.3);
  }
  67% {
    -webkit-transform: translate(-35px, 44px) scale(0.6);
  }
  73% {
    -webkit-transform: translate(-35px, -15px) scale(0.6);
  }
  80% {
    -webkit-transform: translate(-2px, -15px) scale(1);
  }
  85% {
    -webkit-transform: translate(14px, -15px) scale(1);
  }
  /* line 3 */
  85.01% {
    -webkit-transform: translate(-30px, 44px) scale(0.3);
  }
  87% {
    -webkit-transform: translate(-30px, 44px) scale(0.6);
  }
  93% {
    -webkit-transform: translate(-30px, 0) scale(0.6);
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
  }
}
@keyframes big-data-ball {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  5% {
    -webkit-transform: translate(14px, 0) scale(1);
            transform: translate(14px, 0) scale(1);
    opacity: 0;
  }
  /* line 4 */
  5.01% {
    -webkit-transform: translate(-24px, 44px) scale(0.3);
            transform: translate(-24px, 44px) scale(0.3);
    opacity: 0;
  }
  7% {
    -webkit-transform: translate(-24px, 44px) scale(0.6);
            transform: translate(-24px, 44px) scale(0.6);
    opacity: 1;
  }
  13% {
    -webkit-transform: translate(-24px, -8px) scale(0.6);
            transform: translate(-24px, -8px) scale(0.6);
  }
  20% {
    -webkit-transform: translate(-56px, -8px) scale(1);
            transform: translate(-56px, -8px) scale(1);
    opacity: 1;
  }
  25% {
    -webkit-transform: translate(-72px, -8px) scale(1);
            transform: translate(-72px, -8px) scale(1);
    opacity: 0;
  }
  /* line 5 */
  25.01% {
    -webkit-transform: translate(-19px, 44px) scale(0.3);
            transform: translate(-19px, 44px) scale(0.3);
    opacity: 0;
  }
  27% {
    -webkit-transform: translate(-19px, 44px) scale(0.6);
            transform: translate(-19px, 44px) scale(0.6);
    opacity: 1;
  }
  33% {
    -webkit-transform: translate(-19px, 23px) scale(0.6);
            transform: translate(-19px, 23px) scale(0.6);
  }
  40% {
    -webkit-transform: translate(-10px, 23px) scale(1);
            transform: translate(-10px, 23px) scale(1);
    opacity: 1;
  }
  45% {
    -webkit-transform: translate(14px, 23px) scale(1);
            transform: translate(14px, 23px) scale(1);
    opacity: 0;
  }
  /* line 1 */
  45.01% {
    -webkit-transform: translate(-40px, 44px) scale(0.3);
            transform: translate(-40px, 44px) scale(0.3);
    opacity: 0;
  }
  47% {
    -webkit-transform: translate(-40px, 44px) scale(0.6);
            transform: translate(-40px, 44px) scale(0.6);
    opacity: 1;
  }
  53% {
    -webkit-transform: translate(-40px, 23px) scale(0.6);
            transform: translate(-40px, 23px) scale(0.6);
  }
  60% {
    -webkit-transform: translate(-49px, 23px) scale(1);
            transform: translate(-49px, 23px) scale(1);
    opacity: 1;
  }
  65% {
    -webkit-transform: translate(-72px, 23px) scale(1);
            transform: translate(-72px, 23px) scale(1);
    opacity: 0;
  }
  /* line 2 */
  65.01% {
    -webkit-transform: translate(-35px, 44px) scale(0.3);
            transform: translate(-35px, 44px) scale(0.3);
    opacity: 0;
  }
  67% {
    -webkit-transform: translate(-35px, 44px) scale(0.6);
            transform: translate(-35px, 44px) scale(0.6);
    opacity: 1;
  }
  73% {
    -webkit-transform: translate(-35px, -15px) scale(0.6);
            transform: translate(-35px, -15px) scale(0.6);
  }
  80% {
    -webkit-transform: translate(-2px, -15px) scale(1);
            transform: translate(-2px, -15px) scale(1);
    opacity: 1;
  }
  85% {
    -webkit-transform: translate(14px, -15px) scale(1);
            transform: translate(14px, -15px) scale(1);
    opacity: 0;
  }
  /* line 3 */
  85.01% {
    -webkit-transform: translate(-30px, 44px) scale(0.3);
            transform: translate(-30px, 44px) scale(0.3);
    opacity: 0;
  }
  87% {
    -webkit-transform: translate(-30px, 44px) scale(0.6);
            transform: translate(-30px, 44px) scale(0.6);
    opacity: 1;
  }
  93% {
    -webkit-transform: translate(-30px, 0) scale(0.6);
            transform: translate(-30px, 0) scale(0.6);
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
.icon-nosql .water, .icon-nosql #disk_border_top {
  opacity: 1;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.svgAnimPanel .icon-nosql #fill_wall_top {
  -webkit-animation: empty-water-top 2s linear alternate infinite;
  animation: empty-water-top 2s linear alternate infinite;
}
.svgAnimPanel .icon-nosql #fill_ceiling_top {
  -webkit-animation: empty-water-top-ceiling 2s linear alternate infinite;
  animation: empty-water-top-ceiling 2s linear alternate infinite;
}
.svgAnimPanel .icon-nosql #fill_wall_middle {
  -webkit-animation: empty-water-middle 2s linear alternate infinite;
  animation: empty-water-middle 2s linear alternate infinite;
}
.svgAnimPanel .icon-nosql #fill_ceiling_middle {
  -webkit-animation: empty-water-middle-ceiling 2s linear alternate infinite;
  animation: empty-water-middle-ceiling 2s linear alternate infinite;
}
.svgAnimPanel .icon-nosql #fill_wall_bottom {
  -webkit-animation: empty-water-bottom 2s linear alternate infinite;
  animation: empty-water-bottom 2s linear alternate infinite;
}
.svgAnimPanel .icon-nosql #fill_ceiling_bottom {
  -webkit-animation: empty-water-bottom-ceiling 2s linear alternate infinite;
  animation: empty-water-bottom-ceiling 2s linear alternate infinite;
}
.svgAnimPanel .icon-nosql #disk_border_top {
  -webkit-animation: wall-fall 2s linear alternate infinite;
  animation: wall-fall 2s linear alternate infinite;
}
.svgAnimPanel .icon-nosql #disk_border_middle {
  -webkit-animation: disk_border_middle 2s linear alternate infinite;
  animation: disk_border_middle 2s linear alternate infinite;
}

@-webkit-keyframes empty-water-top {
  0% {
    -webkit-transform: translate(0, 0);
  }
  35% {
    -webkit-transform: translate(0, 14px);
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 14px);
    opacity: 0;
  }
}
@-webkit-keyframes empty-water-top-ceiling {
  0% {
    -webkit-transform: translate(0, 0);
  }
  1% {
    -webkit-transform: translate(0, 3px);
  }
  35% {
    -webkit-transform: translate(0, 17px);
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 16px);
    opacity: 0;
  }
}
@-webkit-keyframes empty-water-middle {
  0%, 40% {
    -webkit-transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(0, 14px);
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 14px);
    opacity: 0;
  }
}
@-webkit-keyframes empty-water-middle-ceiling {
  0%, 40% {
    -webkit-transform: translate(0, 0);
  }
  41% {
    -webkit-transform: translate(0, 3px);
  }
  75% {
    -webkit-transform: translate(0, 16px);
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 16px);
    opacity: 0;
  }
}
@-webkit-keyframes empty-water-bottom {
  0%, 80% {
    -webkit-transform: translate(0, 0);
  }
  90% {
    -webkit-transform: translate(0, 3px);
  }
  100% {
    -webkit-transform: translate(0, 6px);
  }
}
@-webkit-keyframes empty-water-bottom-ceiling {
  0%, 80% {
    -webkit-transform: translate(0, 0);
  }
  80.1% {
    -webkit-transform: translate(0, 4px);
  }
  90% {
    -webkit-transform: translate(0, 7px);
  }
  100% {
    -webkit-transform: translate(0, 10px);
  }
}
@-webkit-keyframes wall-fall {
  0%, 30% {
    -webkit-transform: translate(0, 0);
  }
  36% {
    -webkit-transform: translate(0, 16px);
  }
  38% {
    -webkit-transform: translate(0, 12px);
  }
  40%, 70% {
    -webkit-transform: translate(0, 16px);
  }
  76% {
    -webkit-transform: translate(0, 32px);
  }
  78% {
    -webkit-transform: translate(0, 28px);
  }
  80%, 100% {
    -webkit-transform: translate(0, 32px);
  }
}
@-webkit-keyframes disk_border_middle {
  0%, 40% {
    opacity: 1;
  }
  45%, 100% {
    opacity: 0;
  }
}
@keyframes empty-water-top {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  35% {
    -webkit-transform: translate(0, 14px);
            transform: translate(0, 14px);
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 14px);
            transform: translate(0, 14px);
    opacity: 0;
  }
}
@keyframes empty-water-top-ceiling {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  1% {
    -webkit-transform: translate(0, 3px);
            transform: translate(0, 3px);
  }
  35% {
    -webkit-transform: translate(0, 17px);
            transform: translate(0, 17px);
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 16px);
            transform: translate(0, 16px);
    opacity: 0;
  }
}
@keyframes empty-water-middle {
  0%, 40% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(0, 14px);
            transform: translate(0, 14px);
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 14px);
            transform: translate(0, 14px);
    opacity: 0;
  }
}
@keyframes empty-water-middle-ceiling {
  0%, 40% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  41% {
    -webkit-transform: translate(0, 3px);
            transform: translate(0, 3px);
  }
  75% {
    -webkit-transform: translate(0, 16px);
            transform: translate(0, 16px);
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 16px);
            transform: translate(0, 16px);
    opacity: 0;
  }
}
@keyframes empty-water-bottom {
  0%, 80% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  90% {
    -webkit-transform: translate(0, 3px);
            transform: translate(0, 3px);
  }
  100% {
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px);
  }
}
@keyframes empty-water-bottom-ceiling {
  0%, 80% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  80.1% {
    -webkit-transform: translate(0, 4px);
            transform: translate(0, 4px);
  }
  90% {
    -webkit-transform: translate(0, 7px);
            transform: translate(0, 7px);
  }
  100% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
}
@keyframes wall-fall {
  0%, 30% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  36% {
    -webkit-transform: translate(0, 16px);
            transform: translate(0, 16px);
  }
  38% {
    -webkit-transform: translate(0, 12px);
            transform: translate(0, 12px);
  }
  40%, 70% {
    -webkit-transform: translate(0, 16px);
            transform: translate(0, 16px);
  }
  76% {
    -webkit-transform: translate(0, 32px);
            transform: translate(0, 32px);
  }
  78% {
    -webkit-transform: translate(0, 28px);
            transform: translate(0, 28px);
  }
  80%, 100% {
    -webkit-transform: translate(0, 32px);
            transform: translate(0, 32px);
  }
}
@keyframes disk_border_middle {
  0%, 40% {
    opacity: 1;
  }
  45%, 100% {
    opacity: 0;
  }
}


[class^="w-icon-"], [class*=" w-icon-"] {
	font-family: 'webflow-icons' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
.w-icon-slider-right:before {
	content: "\e600"
}
.w-icon-slider-left:before {
	content: "\e601"
}
.w-icon-nav-menu:before {
	content: "\e602"
}
.w-icon-arrow-down:before, .w-icon-dropdown-toggle:before {
	content: "\e603"
}
.w-icon-file-upload-remove:before {
	content: "\e900"
}
.w-icon-file-upload-icon:before {
	content: "\e903"
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.w-block {
	display: block
}
.w-inline-block {
	max-width: 100%;
	display: inline-block
}
.w-clearfix:before, .w-clearfix:after {
	content: " ";
	display: table;
	grid-column-start: 1;
	grid-row-start: 1;
	grid-column-end: 2;
	grid-row-end: 2
}
.w-clearfix:after {
	clear: both
}
.w-hidden {
	display: none
}
.w-button {
	display: inline-block;
	padding: 9px 15px;
	background-color: #3898EC;
	color: white;
	border: 0;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
	border-radius: 0
}
.w-embed:after {
	clear: both
}
.w-video {
	width: 100%;
	position: relative;
	padding: 0
}
.w-video iframe, .w-video object, .w-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
.w-icon-file-upload-icon, .w-icon-file-upload-uploading {
	display: inline-block;
	margin-right: 8px;
	width: 20px
}
.w-icon-file-upload-uploading {
	height: 20px
}
.w-container {
	margin-left: auto;
	margin-right: auto;
	max-width: 940px
}
.w-container:before, .w-container:after {
	content: " ";
	display: table;
	grid-column-start: 1;
	grid-row-start: 1;
	grid-column-end: 2;
	grid-row-end: 2
}
.w-container:after {
	clear: both
}
.w-container .w-row {
	margin-left: -10px;
	margin-right: -10px
}
.w-row:before, .w-row:after {
	content: " ";
	display: table;
	grid-column-start: 1;
	grid-row-start: 1;
	grid-column-end: 2;
	grid-row-end: 2
}
.w-row:after {
	clear: both
}
.w-row .w-row {
	margin-left: 0;
	margin-right: 0
}
.w-col {
	position: relative;
	float: left;
	width: 100%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px
}
.w-col .w-col {
	padding-left: 0;
	padding-right: 0
}
.w-col-1 {
	width: 8.33333333%
}
.w-col-2 {
	width: 16.66666667%
}
.w-col-3 {
	width: 25%
}
.w-col-4 {
	width: 33.33333333%
}
.w-col-5 {
	width: 41.66666667%
}
.w-col-6 {
	width: 50%
}
.w-col-7 {
	width: 58.33333333%
}
.w-col-8 {
	width: 66.66666667%
}
.w-col-9 {
	width: 75%
}
.w-col-10 {
	width: 83.33333333%
}
.w-col-11 {
	width: 91.66666667%
}
.w-col-12 {
	width: 100%
}
.w-hidden-main {
	display: none !important
}


@media screen and (max-width:479px) {
.w-container {
	max-width: none
}
.w-hidden-main {
	display: inherit !important
}
.w-hidden-medium {
	display: inherit !important
}
.w-hidden-small {
	display: inherit !important
}
.w-hidden-tiny {
	display: none !important
}
.w-col {
	width: 100%
}
.w-col-tiny-1 {
	width: 8.33333333%
}
.w-col-tiny-2 {
	width: 16.66666667%
}
.w-col-tiny-3 {
	width: 25%
}
.w-col-tiny-4 {
	width: 33.33333333%
}
.w-col-tiny-5 {
	width: 41.66666667%
}
.w-col-tiny-6 {
	width: 50%
}
.w-col-tiny-7 {
	width: 58.33333333%
}
.w-col-tiny-8 {
	width: 66.66666667%
}
.w-col-tiny-9 {
	width: 75%
}
.w-col-tiny-10 {
	width: 83.33333333%
}
.w-col-tiny-11 {
	width: 91.66666667%
}
.w-col-tiny-12 {
	width: 100%
}
}
.w-widget {
	position: relative
}
.w-widget-map {
	width: 100%;
	height: 400px
}
.w-widget-map label {
	width: auto;
	display: inline
}
.w-widget-map img {
	max-width: inherit
}
.w-widget-map .gm-style-iw {
	text-align: center
}
.w-widget-map .gm-style-iw>button {
	display: none !important
}
.w-widget-twitter {
	overflow: hidden
}

@media screen and (max-width:991px) {
.w-nav[data-collapse="medium"] .w-nav-menu {
	display: none
}
.w-nav[data-collapse="medium"] .w-nav-button {
	display: block
}
}

@media screen and (max-width:767px) {
.w-nav[data-collapse="small"] .w-nav-menu {
	display: none
}
.w-nav[data-collapse="small"] .w-nav-button {
	display: block
}
.w-nav-brand {
	padding-left: 10px
}
}

@media screen and (max-width:479px) {
.w-nav[data-collapse="tiny"] .w-nav-menu {
	display: none
}
.w-nav[data-collapse="tiny"] .w-nav-button {
	display: block
}
}
.w-tabs {
	position: relative
}
.w-tabs:before, .w-tabs:after {
	content: " ";
	display: table;
	grid-column-start: 1;
	grid-row-start: 1;
	grid-column-end: 2;
	grid-row-end: 2
}
.w-tabs:after {
	clear: both
}
.w-tab-menu {
	position: relative
}
.w-tab-link {
	position: relative;
	display: inline-block;
	vertical-align: top;
	text-decoration: none;
	padding: 9px 30px;
	text-align: left;
	cursor: pointer;
	color: #222222;
	background-color: #dddddd
}
.w-tab-link.w--current {
	background-color: #C8C8C8
}
.w-tab-link:focus {
	outline: 0
}
.w-tab-content {
	position: relative;
	display: block;
	overflow: hidden
}
.w-tab-pane {
	position: relative;
	display: none
}
.w--tab-active {
	display: block
}


.project-title {
	margin-top: 10px;
font-family: "playfair display", helvetica, sans-serif;
font-size: 22px;
line-height: 26px;
font-weight: 500;
margin-bottom: 10px;
text-align: left;
}
.project-description {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-right: 0px;
	text-align: left;
}
.div-block-51 {
	position: static;
	bottom: 0px;
}
.timeline-line {
	height: 1px;
	margin-top: 30px;
	margin-left: -20px;
	background-color: transparent;
	background-image: -webkit-gradient(linear, left top, right top, color-stop(1%, hsla(0, 0%, 86.7%, 0)), color-stop(12%, #999));
	background-image: linear-gradient(90deg, hsla(0, 0%, 86.7%, 0) 1%, #999 12%);
}
.timeline {
	position: relative;
	display: block;
	
	color: #676767;
	text-decoration: none;
}
.timeline:hover {
	color: #555;
}
.tabs-menu-4 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-left: 35px;
	padding-bottom: 35px;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.timeline-event {
	padding: 9px 10px;
	border-style: none;
	border-radius: 100px;
	
	border: 1px solid #192a56;
	background-color: #3094db;
	position: relative;
top: -5px;
}
.timeline-event:hover {
	border-style: none;
	background-image: none;
	background-color: #192a56;
	border:1px solid #3094db;
}
.timeline-event.w--current {
	
	background-color: #192a56;
	border:1px solid #3094db;
	
}


.tabs-3 {
	margin-top: -22px;
}
.timeline-pre-label {
	position: relative;
	-webkit-box-flex: 0;
	-webkit-flex: 0 auto;
	-ms-flex: 0 auto;
	flex: 0 auto;
	font-family: 'Roboto Mono', sans-serif;
	color: #636363;
	font-size: 10px;
	line-height: 15px;
	text-align: center;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.timeline-year {
	position: relative;
	-webkit-box-flex: 0;
	-webkit-flex: 0 auto;
	-ms-flex: 0 auto;
	flex: 0 auto;
	font-family: 'Helvetica', sans-serif;
	color: #636363;
	font-size: 10px;
	line-height: 15px;
	text-align: left;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.image-15 {
	margin-bottom: -25px;
}
.div-block-55 {
	position: static;
	bottom: 0px;
	padding-right: 30px;
}
.nbu {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding: 30px;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
	border: 1px solid #ddd;
	border-radius: 5px;
	color: #676767;
	text-decoration: none;
}
.nbu:hover {
	color: #555;
}
.hubspot-work-thumb {
	height: 250px;
	margin-top: 4px;
	border: 0px solid #ccc;
	border-radius: 8px;
	background-image: url("../img/leadership.jpg");
	background-position: 0px 0px;
	background-size: cover;
}
.ai-work-thumb {
	height: 250px;
	margin-top: 4px;
	border: 0px solid #ccc;
	border-radius: 8px;
	background-image: url("../img/xu.jpg");
	background-position: 0px 0px;
	background-size: cover;
}
.sir-work-thumb {
	height: 250px;
	margin-top: 4px;
	border: 0px solid #ccc;
	border-radius: 8px;
	background-image: url("../img/design.jpg");
	background-position: 0px 0px;
	background-size: cover;
}
.kf-work-thumb {
	height: 250px;
	margin-top: 4px;
	border: 0px solid #ccc;
	border-radius: 8px;
	background-image: url("../img/development.jpg");
	background-position: 0px 0px;
	background-size: cover;
}
.pb-work-thumb {
	height: 250px;
	margin-top: 4px;
	border: 0px solid #ccc;
	border-radius: 8px;
	background-image: url("../img/teach.jpg");
	background-position: 0px 0px;
	background-size: cover;
}
.g-work-thumb {
	height: 250px;
	margin-top: 4px;
	border: 0px solid #ccc;
	border-radius: 8px;
	background-image: url("../img/ibm.jpg");
	background-position: 0px 0px;
	background-size: cover;
}
.image-16 {
	position: absolute;
	left: auto;
	top: 0%;
	right: 0%;
	bottom: auto;
	z-index: 1;
}
.div-block-57 {
	position: relative;
}
.image-17 {
	position: relative;
	z-index: 2;
}
.image-18 {
	position: absolute;
	left: auto;
	top: 0%;
	right: 0%;
	bottom: auto;
	z-index: 0;
}
.work-vr {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding: 30px;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	grid-auto-columns: 1fr;
	grid-column-gap: 16px;
	grid-row-gap: 16px;
	-ms-grid-columns: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	-ms-grid-rows: auto auto;
	grid-template-rows: auto auto;
	border-bottom-style: none;
	border-radius: 5px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
	background-image: linear-gradient(180deg, #fff, #fff);
	box-shadow: 1px 1px 3px 0 #dadada;
	-webkit-transition: box-shadow 300ms ease, -webkit-transform 300ms ease;
	transition: box-shadow 300ms ease, -webkit-transform 300ms ease;
	transition: transform 300ms ease, box-shadow 300ms ease;
	transition: transform 300ms ease, box-shadow 300ms ease, -webkit-transform 300ms ease;
	color: #676767;
	text-decoration: none;
}
.heading-4 {
	line-height: 50px;
	text-align: center;
}
.overlay-divider {
	display: none;
}
.signup-logos {
	display: none;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.column-43 {
	padding-right: 10px;
	padding-left: 10px;
}
.process-snapshot {
	margin-right: 0px;
	margin-left: 0px;
}
.work-section {
	padding-bottom: 50px;
}
.work-bg-title {
	padding-top: 50px;
	font-size: 50px;
	line-height: 60px;
}
.work-title {
	font-size: 25px;
	line-height: 35px;
}
.div-block-50 {
	margin-top: 50px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	-ms-grid-rows: auto auto;
	grid-template-rows: auto auto;
}
.work.hubspot-work.mobile {
	margin-right: 25px;
	margin-bottom: 15px;
	margin-left: 25px;
	padding-top: 30px;
	padding-right: 0px;
	padding-left: 25px;
}
.work.mobile {
	margin-right: 25px;
	margin-bottom: 15px;
	margin-left: 25px;
	padding-right: 25px;
	padding-left: 25px;
}
.project-description {
	font-size: 15px;
}
.timeline-line {
	width: 99%;
}
.timeline {
	margin-right: 10px;
	margin-left: 10px;
	padding-right: 15px;
	padding-left: 15px;
}

#w-node-7c2a791c845b-bdf5239a {
	-ms-grid-row: 1;
	grid-row-start: 1;
	-ms-grid-row-span: 2;
	grid-row-end: 3;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-column-span: 2;
	grid-column-end: 3;
}
#w-node-8ac1a4b10085-bdf5239a {
	-ms-grid-row: 1;
	grid-row-start: 1;
	-ms-grid-row-span: 1;
	grid-row-end: 2;
	-ms-grid-column: 3;
	grid-column-start: 3;
	-ms-grid-column-span: 4;
	grid-column-end: 7;
}
/*circle of design*/
				  
			  
#svg-library {
  display: none;
}



@-webkit-keyframes avAnimationEntry {
  from {
    -webkit-transform: scale3d(0.62, 0.62, 0.62);
            transform: scale3d(0.62, 0.62, 0.62);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes avAnimationEntry {
  from {
    -webkit-transform: scale3d(0.62, 0.62, 0.62);
            transform: scale3d(0.62, 0.62, 0.62);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.av-animation {
  position: relative;
  width: 502px;
  height: 502px;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
          animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	    left: 60px;
    top: -40px;

}
.av-animation-entry-animated .av-animation {
  -webkit-animation-name: avAnimationEntry;
          animation-name: avAnimationEntry;
	position: relative;
left: 60px;
top: -30px;
}
.av-animation svg {
  width: 100%;
  height: 100%;
}

.av-animation-laptop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 165px;
  height: 115px;
  margin-top: -57.5px;
  margin-left: -82.5px;
}
.av-animation-laptop svg {
  fill: #3094db;
}

.av-animation-tick,
.av-animation-frame,
.av-animation-icon,
.av-animation-circle {
  position: absolute;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

@-webkit-keyframes avAnimationTickEntry {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  62% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes avAnimationTickEntry {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  62% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.av-animation-tick {
  top: 212px;
  left: 216px;
  width: 69px;
  height: 49px;
  will-change: transform;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
          animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.av-animation-entry-animated .av-animation-tick {
  -webkit-animation-name: avAnimationTickEntry;
          animation-name: avAnimationTickEntry;
}

.av-animation-frame {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #3094db;
  border-radius: 2px;
}

.av-animation-circle {
  top: 50%;
  left: 50%;
  width: 33px;
  height: 33px;
  border: 1.25px dashed #3094db;
  border-radius: 50%;
  -webkit-transition: border-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-color: transparent;
  -webkit-transform: scale3d(1, 1, 1) translate(-50%, -50%);
          transform: scale3d(1, 1, 1) translate(-50%, -50%);
}
.section:not([data-av-animation="all"]) .av-animation-circle {
  background-color: #fff;
  top: calc(50% + 15px);
  width: 214px;
  height: 214px;
}

.av-animation-icon {
  top: 16px;
  left: 25px;
  width: 18px;
  height: 18px;
}
.av-animation-icon svg {
  fill: #888888;
}

.av-animation-texts {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 214px;
  height: 214px;
  margin-top: -107px;
  margin-left: -107px;
  padding: 0 24px;
  text-align: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  color: #41424E;
  font-size: 13px;
  line-height: 1.45;
}

.av-animation-text {
  display: none;
}
[data-av-animation="1"] .av-animation-text[data-av-animation-text="1"] {
  display: block;
}
[data-av-animation="2"] .av-animation-text[data-av-animation-text="2"] {
  display: block;
}
[data-av-animation="3"] .av-animation-text[data-av-animation-text="3"] {
  display: block;
}
[data-av-animation="4"] .av-animation-text[data-av-animation-text="4"] {
  display: block;
}
[data-av-animation="5"] .av-animation-text[data-av-animation-text="5"] {
  display: block;
}
[data-av-animation="6"] .av-animation-text[data-av-animation-text="6"] {
  display: block;
}
[data-av-animation="7"] .av-animation-text[data-av-animation-text="7"] {
  display: block;
}
[data-av-animation="8"] .av-animation-text[data-av-animation-text="8"] {
  display: block;
}

.av-animation-title {
  font-weight: bold;
  margin-bottom: 7px;
}

.av-animation-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin-top: -36px;
  margin-left: -36px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
.av-animation-item svg {
  will-change: fill;
  -webkit-transition: fill 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: fill 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  fill: rgba(48, 148, 219, 0.38);
}
[data-av-animation="all"] .av-animation-item svg {
  fill: #888;
}
[data-av-animation="1"] .av-animation-item[data-av-animation-item="1"] svg {
  fill: #3094db;
}
[data-av-animation="2"] .av-animation-item[data-av-animation-item="2"] svg {
  fill: #3094db;
}
[data-av-animation="3"] .av-animation-item[data-av-animation-item="3"] svg {
  fill: #3094db;
}
[data-av-animation="4"] .av-animation-item[data-av-animation-item="4"] svg {
  fill: #3094db;
}
[data-av-animation="5"] .av-animation-item[data-av-animation-item="5"] svg {
  fill: #3094db;
}
[data-av-animation="6"] .av-animation-item[data-av-animation-item="6"] svg {
  fill: #3094db;
}
[data-av-animation="7"] .av-animation-item[data-av-animation-item="7"] svg {
  fill: #3094db;
}
[data-av-animation="8"] .av-animation-item[data-av-animation-item="8"] svg {
  fill: #3094db;
}
.av-animation-item:nth-child(1) {
  -webkit-transform: rotate(-112.5deg) translate3d(179px, 0, 0) rotate(22.5deg);
          transform: rotate(-112.5deg) translate3d(179px, 0, 0) rotate(22.5deg);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.av-animation-item:nth-child(2) {
  -webkit-transform: rotate(-67.5deg) translate3d(179px, 0, 0) rotate(-22.5deg);
          transform: rotate(-67.5deg) translate3d(179px, 0, 0) rotate(-22.5deg);
  -webkit-transition-delay: 0.0375s;
          transition-delay: 0.0375s;
}
.av-animation-item:nth-child(3) {
  -webkit-transform: rotate(-22.5deg) translate3d(179px, 0, 0) rotate(-67.5deg);
          transform: rotate(-22.5deg) translate3d(179px, 0, 0) rotate(-67.5deg);
  -webkit-transition-delay: 0.075s;
          transition-delay: 0.075s;
}
.av-animation-item:nth-child(4) {
  -webkit-transform: rotate(22.5deg) translate3d(179px, 0, 0) rotate(-112.5deg);
          transform: rotate(22.5deg) translate3d(179px, 0, 0) rotate(-112.5deg);
  -webkit-transition-delay: 0.1125s;
          transition-delay: 0.1125s;
}
.av-animation-item:nth-child(5) {
  -webkit-transform: rotate(67.5deg) translate3d(179px, 0, 0) rotate(-157.5deg);
          transform: rotate(67.5deg) translate3d(179px, 0, 0) rotate(-157.5deg);
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.av-animation-item:nth-child(6) {
  -webkit-transform: rotate(112.5deg) translate3d(179px, 0, 0) rotate(-202.5deg);
          transform: rotate(112.5deg) translate3d(179px, 0, 0) rotate(-202.5deg);
  -webkit-transition-delay: 0.1875s;
          transition-delay: 0.1875s;
}
.av-animation-item:nth-child(7) {
  -webkit-transform: rotate(157.5deg) translate3d(179px, 0, 0) rotate(-247.5deg);
          transform: rotate(157.5deg) translate3d(179px, 0, 0) rotate(-247.5deg);
  -webkit-transition-delay: 0.225s;
          transition-delay: 0.225s;
}
.av-animation-item:nth-child(8) {
  -webkit-transform: rotate(202.5deg) translate3d(179px, 0, 0) rotate(-292.5deg);
          transform: rotate(202.5deg) translate3d(179px, 0, 0) rotate(-292.5deg);
  -webkit-transition-delay: 0.2625s;
          transition-delay: 0.2625s;
}
.av-animation-entry-animated .av-animation-item {
  opacity: 1;
}
.av-animation-entry-animated .av-animation-item:nth-child(1) {
  -webkit-transform: rotate(-90deg) translate3d(179px, 0, 0) rotate(90deg);
          transform: rotate(-90deg) translate3d(179px, 0, 0) rotate(90deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(2) {
  -webkit-transform: rotate(-45deg) translate3d(179px, 0, 0) rotate(45deg);
          transform: rotate(-45deg) translate3d(179px, 0, 0) rotate(45deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(3) {
  -webkit-transform: rotate(0deg) translate3d(179px, 0, 0) rotate(0deg);
          transform: rotate(0deg) translate3d(179px, 0, 0) rotate(0deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(4) {
  -webkit-transform: rotate(45deg) translate3d(179px, 0, 0) rotate(-45deg);
          transform: rotate(45deg) translate3d(179px, 0, 0) rotate(-45deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(5) {
  -webkit-transform: rotate(90deg) translate3d(179px, 0, 0) rotate(-90deg);
          transform: rotate(90deg) translate3d(179px, 0, 0) rotate(-90deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(6) {
  -webkit-transform: rotate(135deg) translate3d(179px, 0, 0) rotate(-135deg);
          transform: rotate(135deg) translate3d(179px, 0, 0) rotate(-135deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(7) {
  -webkit-transform: rotate(180deg) translate3d(179px, 0, 0) rotate(-180deg);
          transform: rotate(180deg) translate3d(179px, 0, 0) rotate(-180deg);
}
.av-animation-entry-animated .av-animation-item:nth-child(8) {
  -webkit-transform: rotate(225deg) translate3d(179px, 0, 0) rotate(-225deg);
          transform: rotate(225deg) translate3d(179px, 0, 0) rotate(-225deg);
}
		  

.icon1,
.icon2,
.icon3,
.icon4,
.icon5,
.icon6 {
  width: 140px;
  height: 140px;
  display: inline-block;
  margin: 0px 25px;
}

.icon5 {
  transform: translateY(-15px);
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}


/************* ICON1 *****************/

.section1 {
  animation: setblue ease 6s 5s infinite;
}

.section2 {
  fill: #cccccc;
  animation: setblue ease 6s 1s infinite;
}

.section3 {
  animation: setblue ease 6s 3.2s infinite;
}

@keyframes setblue {
  0% {
    fill: #cccccc;
  }
  15% {
    fill: #3094db;
  }
  30% {
    fill: #cccccc;
  }
}
/*
.stick {
  animation: fadeInLeft both 1s 0.8s, stick ease 6s 2s infinite;
  transition: all 1s cubic-bezier(.1, .8, .2, 1);
}

@keyframes stick {
  0% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(40px, 0);
  }
  45% {
    transform: translate(40px, 0);
  }
  60% {
    transform: translate(0, -20px);
  }
  75% {
    transform: translate(0, -20px);
  }
  100% {
    transform: translate(0, 0);
  }
}*/


/************* ICON2 *****************/

.ratio_line {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: ratio-line ease 6s infinite;
}

.ratio_box {
  opacity: 0;
  animation: ratio-box ease 6s infinite;
}

.ratio_frame {
  animation: low ease 6s infinite;
}

.ratio_head {
  animation: low ease 6s infinite;
}

.ratio_image {
  animation: low ease 6s infinite;
}

.ratio_text {
  animation: low ease 6s infinite;
}

@keyframes ratio-line {
  0% {
    stroke-dashoffset: 320;
    opacity: 1;
  }
  20% {
    stroke-dashoffset: 320;
  }
  70% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes ratio-box {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes low {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}


/************* ICON3 *****************/

.pen-line1 {
  animation: setblue ease 6s 4s infinite;
}

.pen-line2 {
  animation: setblue ease 6s 2s infinite;
}

.pen {
  opacity: 0;
  animation: fadeInLeft both 1s 1s, pen ease 6s 1s infinite;
}

@keyframes pen {
  0% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(5px, 5px);
  }
  45% {
    transform: translate(5px, 5px);
  }
  60% {
    transform: translate(-2px, -2px);
  }
  75% {
    transform: translate(-2px, -2px);
  }
  100% {
    transform: translate(0, 0);
  }
}


/************* ICON4 *****************/

.line1 {
  opacity: 0;
  animation: fadeInLeft both 1s 0.4s, coding1 ease 6s 4s infinite;
}

.line2 {
  opacity: 0;
  animation: fadeInLeft both 1s 0.6s, coding2 ease 6s 4s infinite;
}

.line3 {
  opacity: 0;
  animation: fadeInLeft both 1s 0.8s, coding3 ease 6s 4s infinite;
}

.line4 {
  opacity: 0;
  animation: fadeInLeft both 1s 1.0s, coding4 ease 6s 4s infinite;
}

.line5 {
  opacity: 0;
  animation: fadeInLeft both 1s 1.2s, coding5 ease 6s 4s infinite;
}

.line6 {
  opacity: 0;
  animation: fadeInLeft both 1s 1.4s, coding6 ease 6s 4s infinite;
}

.line7 {
  opacity: 0;
  animation: fadeInLeft both 1s 1.6s, coding6 ease 6s 4s infinite;
}
.line8 {
  opacity: 0;
  animation: fadeInLeft both 1s 0.4s, coding1 ease 6s 4s infinite;
}
.line9 {
  opacity: 0;
  animation: fadeInLeft both 1s 0.6s, coding2 ease 6s 4s infinite;
}

@keyframes coding1 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  14% {
    transform: translate(0, -10px);
    opacity: 0;
  }
  15% {
    transform: translate(0, 45px);
  }
  30% {
    transform: translate(0, 40px);
    opacity: 1;
  }
  45% {
    transform: translate(0, 30px);
  }
  60% {
    transform: translate(0, 20px);
  }
  75% {
    transform: translate(0, 10px);
  }
  90% {
    transform: translate(0, 5px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes coding2 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  15% {
    transform: translate(0, -5px);
    opacity: 1;
  }
  29% {
    transform: translate(0, -10px);
    opacity: 0;
  }
  30% {
    transform: translate(0, 40px);
  }
  45% {
    transform: translate(0, 30px);
    opacity: 1;
  }
  60% {
    transform: translate(0, 20px);
  }
  75% {
    transform: translate(0, 10px);
  }
  90% {
    transform: translate(0, 5px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes coding3 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  15% {
    transform: translate(0, -5px);
  }
  30% {
    transform: translate(0, -10px);
    opacity: 1;
  }
  44% {
    transform: translate(0, -20px);
    opacity: 0;
  }
  45% {
    transform: translate(0, 30px);
  }
  60% {
    transform: translate(0, 20px);
    opacity: 1;
  }
  75% {
    transform: translate(0, 10px);
  }
  90% {
    transform: translate(0, 5px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes coding4 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  15% {
    transform: translate(0, -5px);
  }
  30% {
    transform: translate(0, -10px);
  }
  45% {
    transform: translate(0, -20px);
    opacity: 1;
  }
  59% {
    transform: translate(0, -30px);
    opacity: 0;
  }
  60% {
    transform: translate(0, 20px);
  }
  75% {
    transform: translate(0, 10px);
    opacity: 1;
  }
  90% {
    transform: translate(0, 5px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes coding5 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  15% {
    transform: translate(0, -5px);
  }
  30% {
    transform: translate(0, -10px);
  }
  45% {
    transform: translate(0, -20px);
  }
  60% {
    transform: translate(0, -30px);
    opacity: 1;
  }
  74% {
    transform: translate(0, -40px);
    opacity: 0;
  }
  75% {
    transform: translate(0, 10px);
  }
  90% {
    transform: translate(0, 5px);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes coding6 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  15% {
    transform: translate(0, -5px);
  }
  30% {
    transform: translate(0, -10px);
  }
  45% {
    transform: translate(0, -20px);
  }
  60% {
    transform: translate(0, -30px);
  }
  75% {
    transform: translate(0, -40px);
    opacity: 1;
  }
  89% {
    transform: translate(0, -50px);
    opacity: 0;
  }
  90% {
    transform: translate(0, 10px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}


/************* ICON5 *****************/

.file1 {
  opacity: 0;
  animation: fadeInLeft both 1s 1s, file ease 6s 2.6s infinite;
}

.file2 {
  opacity: 0;
  animation: fadeInLeft both 1s 1.2s, file2 ease 6s 2.6s infinite;
}

.file3 {
  opacity: 0;
  animation: fadeInLeft both 1s 1.4s, file3 ease 6s 2.6s infinite;
}

@keyframes file {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  70% {
    transform: translate(0, -25px);
    opacity: 0;
  }
  71% {
    transform: translate(0, 30px);
    opacity: 0;
  }
  72% {
    transform: translate(0, 30px);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes file2 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  50% {
    transform: translate(0, -20px);
    opacity: 0;
  }
  51% {
    transform: translate(0, 40px);
    opacity: 0;
  }
  52% {
    transform: translate(0, 40px);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes file3 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  20% {
    transform: translate(0, -15px);
    opacity: 0;
  }
  21% {
    transform: translate(0, 70px);
    opacity: 0;
  }
  22% {
    transform: translate(0, 70px);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}


/************* ICON6 *****************/

.cloud {
  opacity: 0;
  animation: cloud ease 6s 1s infinite;
}

.truck {
  animation: truck ease 6s 1s infinite;
}

.wheel1,
.wheel2,
.wheel3 {
  animation: wheel linear 3s 1s infinite;
  transform-origin: 50% 50%;
}

@keyframes truck {
  0% {
    transform: translate(0, 0);
  }
  13% {
    transform: translate(0, -1px);
  }
  26% {
    transform: translate(0, 1px);
  }
  39% {
    transform: translate(0, -1px);
  }
  52% {
    transform: translate(0, 1px);
  }
  65% {
    transform: translate(0, -1px);
  }
  78% {
    transform: translate(0, 1px);
  }
  91% {
    transform: translate(0, -1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes cloud {
  0% {
    transform: translate(5px, 0);
    opacity: 0;
  }
  50% {
    transform: translate(5px, 0);
    opacity: 0;
  }
  51% {
    transform: translate(0, 0);
    opacity: 1;
  }
  52% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-5px, 0);
    opacity: 0;
  }
}

@keyframes wheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


				
.blocknumber {
    font-size: 16px;
    font-weight: bold;
    font-family: helvetica;
    background: #fff;
    margin: 0px;
    width: 50px;
    
    color: #000;
    text-align: center;
    height: 20px;
    position: relative;
    top: -3px;
}
					.titlewords{font-size: 10px !important;
letter-spacing: 1px; color: #888}
					
					.no-js .owl-carousel, .owl-carousel.owl-loaded {
   display: block;
background: #eee;
padding: 60px 0px;
border-radius: 8px;
}
				 .blockareatextsection{padding-bottom: 30px !important; padding-top: 30px !important}
		  .skillblock{padding-bottom: 10px;}
		  .skillblockmb{margin-bottom: 5px !important;}
		   .skillblocktext{font-size:10px;}
			   .textblockskills{padding:20px 0px}
			   .textblockskillsbox{padding: 0px 30px 100px 30px ;}
			   .textboxskillset{font-size:14px; width: 20%;}
			    .textboxskillset h3{color: #000;
font-family: 'helvetica',sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0px;
padding: 0 15px;
text-transform: uppercase;
background: #fff; margin-bottom: 0px;}
			   .textblockulclass{padding: 15px !important;}
			   .textblockulclass li{font-size:12px !important; list-style-type: none !important;}
		  .boxforsections{padding-bottom:50px !important;}
		  
		  .boxforsectionsarea{padding-top: 0px !important;}
		  .iconrightblock{padding-right: 20px;}
			  .pullleftblock{float:left; width: 40%}
			    .pullleftblockclass{font-weight: 700;
margin-bottom: 5px;
font-size: 18px;
font-family: helvetica, sans-serif;
line-height: 24px;}
			  .pullleftblocktextblock{font-size: 13px;

line-height: 21px;
margin-bottom: 0;}
	.iconscreens{overflow: hidden !important;}
	.ulblockarea{padding-left: 10px !important; padding-right: 30px !important;}
		.headerclassblock{font-size: 18px !important; padding-left: 30px !important; padding-bottom: 0px !important; font-family:"playfair display", helvetica, sans-serif; font-weight: bold;}
					
					.textblockareaawards{float:none; margin-left:auto; margin-right: auto}
					
					.textblockareaawardsblock{padding:10px 0px 0px 0px;
margin-left: auto;
margin-right: auto; }
			  
			  .timelineyearhead{padding: 40px 0px 0px 30px;}
			  
		.buttonboxareasquare{border:2px solid #333 !important; padding: 20px !important; font-size:12px !important; color:#000 !important; letter-spacing: 2px !important;}

.icon.smalliconlist {
    display: none;
}

	.blockbio {
    height: 700px;
    overflow: hidden;
}
.skillblockarea{ height:400px;}
.logoblockareas{display: none}
.projectmaintexts{font-size:21px !important;}

.problemboxarea {
    padding-left: 80px;
}
.counterboxarea {
    padding: 30px;
}


	* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}


.imgcycle{max-width: 100%;
	vertical-align: middle;
	display: inline-block}
.w-block {
	display: block
}
.w-inline-block {
	max-width: 100%;
	display: inline-block
}
.w-clearfix:before, .w-clearfix:after {
	content: " ";
	display: table;
	grid-column-start: 1;
	grid-row-start: 1;
	grid-column-end: 2;
	grid-row-end: 2
}
.w-clearfix:after {
	clear: both
}
.w-hidden {
	display: none
}
.w-button {
	display: inline-block;
	padding: 9px 15px;
	background-color: #3898EC;
	color: white;
	border: 0;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
	border-radius: 0
}

.w-col {
	position: relative;
	float: left;
	width: 100%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px
}
.w-col .w-col {
	padding-left: 0;
	padding-right: 0
}
.w-col-1 {
	width: 8.33333333%
}
.w-col-2 {
	width: 16.66666667%
}
.w-col-3 {
	width: 25%
}
.w-col-4 {
	width: 33.33333333%
}
.w-col-5 {
	width: 41.66666667%
}
.w-col-6 {
	width: 50%
}
.w-col-7 {
	width: 58.33333333%
}
.w-col-8 {
	width: 66.66666667%
}
.w-col-9 {
	width: 75%
}
.w-col-10 {
	width: 83.33333333%
}
.w-col-11 {
	width: 91.66666667%
}
.w-col-12 {
	width: 100%
}
.w-hidden-main {
	display: none !important
}

@media screen and (max-width:991px) {
.w-container {
	max-width: 728px
}
.w-hidden-main {
	display: inherit !important
}
.w-hidden-medium {
	display: none !important
}
.w-col-medium-1 {
	width: 8.33333333%
}
.w-col-medium-2 {
	width: 16.66666667%
}
.w-col-medium-3 {
	width: 25%
}
.w-col-medium-4 {
	width: 33.33333333%
}
.w-col-medium-5 {
	width: 41.66666667%
}
.w-col-medium-6 {
	width: 50%
}
.w-col-medium-7 {
	width: 58.33333333%
}
.w-col-medium-8 {
	width: 66.66666667%
}
.w-col-medium-9 {
	width: 75%
}
.w-col-medium-10 {
	width: 83.33333333%
}
.w-col-medium-11 {
	width: 91.66666667%
}
.w-col-medium-12 {
	width: 100%
}
.w-col-stack {
	width: 100%;
	left: auto;
	right: auto
}
}

@media screen and (max-width:767px) {
.w-hidden-main {
	display: inherit !important
}
.w-hidden-medium {
	display: inherit !important
}
.w-hidden-small {
	display: none !important
}
.w-row, .w-container .w-row {
	margin-left: 0;
	margin-right: 0
}
.w-col {
	width: 100%;
	left: auto;
	right: auto
}
.w-col-small-1 {
	width: 8.33333333%
}
.w-col-small-2 {
	width: 16.66666667%
}
.w-col-small-3 {
	width: 25%
}
.w-col-small-4 {
	width: 33.33333333%
}
.w-col-small-5 {
	width: 41.66666667%
}
.w-col-small-6 {
	width: 50%
}
.w-col-small-7 {
	width: 58.33333333%
}
.w-col-small-8 {
	width: 66.66666667%
}
.w-col-small-9 {
	width: 75%
}
.w-col-small-10 {
	width: 83.33333333%
}
.w-col-small-11 {
	width: 91.66666667%
}
.w-col-small-12 {
	width: 100%
}
}

@media screen and (max-width:479px) {
.w-container {
	max-width: none
}
.w-hidden-main {
	display: inherit !important
}
.w-hidden-medium {
	display: inherit !important
}
.w-hidden-small {
	display: inherit !important
}
.w-hidden-tiny {
	display: none !important
}
.w-col {
	width: 100%
}
.w-col-tiny-1 {
	width: 8.33333333%
}
.w-col-tiny-2 {
	width: 16.66666667%
}
.w-col-tiny-3 {
	width: 25%
}
.w-col-tiny-4 {
	width: 33.33333333%
}
.w-col-tiny-5 {
	width: 41.66666667%
}
.w-col-tiny-6 {
	width: 50%
}
.w-col-tiny-7 {
	width: 58.33333333%
}
.w-col-tiny-8 {
	width: 66.66666667%
}
.w-col-tiny-9 {
	width: 75%
}
.w-col-tiny-10 {
	width: 83.33333333%
}
.w-col-tiny-11 {
	width: 91.66666667%
}
.w-col-tiny-12 {
	width: 100%
}
}
.page-container {
	position: static;
	display: block;
	max-width: 1220px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 25px;
	padding-left: 0px;
	clear: none;
}
.page-container.email-section {
	margin-top: 125px;
}
.page-container.flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 80%;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}










.phase-label-text {
	margin-top: -27px;
	margin-bottom: 5px;
	margin-left: 0px;
	opacity: 0.6;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 11px;
	text-align: center;
}
.work-hero-preview {
	box-shadow: 0 10px 37px -4px rgba(0, 0, 0, 0.2);
}
.work-hero-preview.mobile {
	display: none;
}
.work-intro-block {
	padding: 25px 40px 45px;
	border: 1px solid #ddd;
	border-radius: 5px;
}
.heading-5 {
	text-align: center;
}
.heading-5.light {
	color: #fff;
}
.columns-17 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
.quarter-label {
	font-size: 20px;
	line-height: 26px;
	font-weight: 900;
}
.div-block-75 {
	padding: 5px 10px 5px 22px;
	background-color: #eee;
}
.columns-18 {
	position: relative;
	top: -144px;
	z-index: -1;
}
.div-block-76 {
	padding: 5px 10px 5px 45px;
	background-color: #eee;
}
.cta {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 60px;
	padding: 7px 5px 5px;
	float: left;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	border: 1px solid #d1d1d1;
	border-radius: 5px;
	-webkit-transition: background-color 300ms ease, border 300ms ease, box-shadow 300ms ease, -webkit-transform 300ms ease;
	transition: background-color 300ms ease, border 300ms ease, box-shadow 300ms ease, -webkit-transform 300ms ease;
	transition: background-color 300ms ease, border 300ms ease, box-shadow 300ms ease, transform 300ms ease;
	transition: background-color 300ms ease, border 300ms ease, box-shadow 300ms ease, transform 300ms ease, -webkit-transform 300ms ease;
	color: #636363;
	text-decoration: none;
}
	
	
	
	


				.boxbottom{padding-bottom: 80px;}
		.ptbox {
    padding-top: 18px;
			font-family: helvetica, sans-serif !important;
}
/*--------------------------------------------------------------
# Responsive Media Queries
--------------------------------------------------------------*/
@media only screen and (min-width: 768px) {
  .touch .cd-nav-trigger, .touch #cd-vertical-nav {
    bottom: 40px;
  }
}


@media (min-width: 768px) {
  #contact .contact-address,
  #contact .contact-phone,
  #contact .contact-email {
    padding: 20px 0;
  }

  #contact .contact-phone {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
}

@media (min-width: 992px) {
  #testimonials .testimonial-item p {
    width: 80%;
  }
}

@media (min-width: 1024px) {
  #header #logo {
    padding-left: 30px;
  }

  #intro p {
    width: 60%;
  }

  #intro .carousel-control-prev,
  #intro .carousel-control-next {
    width: 5%;
  }

  #nav-menu-container {
    padding-right: 30px;
  }
  
}





.textshowprojects{display:none;}


.arrowdown{font-size:34px; padding-top:50px;}
.arrowbtnlink{color:#fff;}
.arrowsvg{width: 7%;
  margin-left: auto;
  margin-right: auto; }

@media (max-width: 2000px) {
  .logoblock{width:15%;  top:-10px;} 
	.problemboxarea {
    padding-left: 200px;
}
	
}
@media (max-width: 1900px) {
  
	.problemboxarea {
    padding-left: 160px;
}
}


@media (max-width: 1800px) {
  .logoblock{width:15%;  top:-10px;} 
	.problemboxarea {
    padding-left: 135px;
}
}
@media (max-width: 1700px) {
  .logoblock{width:15%;  top:-4px;} 
	.problemboxarea {
    padding-left: 105px;
}
}
@media (max-width: 1650px) {
.problemboxarea {
    padding-left: 86px;
}
}
@media (max-width: 1600px) {
  .logoblock{width:18%;  top:-10px;} 
	.sectionleader {
    margin-top: -100px;
}
	.problemboxarea {
    padding-left: 56px;
}
}


@media (max-width: 1500px) {


.mtabackground {

  
    background-position-x: -50px;

}
	.ricohbackground {

  
    background-position-x: -50px;

}
	.theavebackground {

  
    background-position-x: -50px;

}
	.gmbackground {

  
    background-position-x: -50px;

}
	.citibackground {

  
    background-position-x: -50px;

}
	.uabackground {

  
    background-position-x: -50px;

}
	.bluetowersbackground {

  
    background-position-x: -50px;

}
	.copstopcoachbackground {

  
    background-position-x: -50px;

}
	.vmlyrbackground {

  
    background-position-x: -50px;

}
	.dowbackground {

  
    background-position-x: -50px;

}
	.lsbackground {

  
    background-position-x: -50px;

}
	.backourbizbackground {

  
    background-position-x: -50px;

}

	.problemboxarea {
    padding-left: 30px;
}
	#border {
    height: 370px;
    width: 1px;
    background-color: #aaa;
}
	.sectionleader {
    margin-top: 0px;
}
  .logoblock{width:18%;  top:-5px;} 
  #home .centerFront {
    top: 18%;
    padding: 0px 250px;
}
	.imgicons {
    padding-right: 40px;
}
	.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
    left: 30px;
    top: -30px;
}
	
	
	.av-animation {
    position: relative;
    width: 502px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: 30px;
    top: -40px;
}
}
@media (max-width: 1400px) {
	
	.mtabackground {
    background-position-x: -130px;
}
	.ricohbackground {
    background-position-x: -130px;
}
	.theavebackground {
    background-position-x: -130px;
}
	.gmbackground {
    background-position-x: -130px;
}
	.citibackground {
    background-position-x: -130px;
}
	.problemboxarea {
    padding-left: 5px;
}
	.uabackground {
    background-position-x: -130px;
}
	.bluetowersbackground {
    background-position-x: -130px;
}
		.copstopcoachbackground {
    background-position-x: -130px;
}
		.vmlyrbackground {
    background-position-x: -130px;
}
		.dowbackground {
    background-position-x: -130px;
}
		.lsbackground {
    background-position-x: -130px;
}
	.backourbizbackground {
    background-position-x: -130px;
}
	
	.av-animation {
    position: relative;
    width: 502px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: 20px;
    top: -40px;
}
	.ulblockarea {
    padding-left: 10px !important;
    padding-right: 30px !important;
    position: relative !important;
    top: -50px !important;
}
	#border {
    height: 450px;
    width: 1px;
    background-color: #aaa;
}
	.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.95);
}
	.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
    left: 10px;
    top: -30px;
}
		.imgicons {
    padding-right: 100px;
}
	.sectionleader {
    margin-top: -50px;
}
  .arrowdown{font-size:34px; padding-top:20px;}
  .logoblock{width:20%;  top:-6px;} 
  .projectblockbottom {
    margin-top: 0px;
  }
  .projectblock blockquote {
    margin-top: 0px;
  }
	.imageblockleader {
    padding-bottom: 40px !important;
}
	#right-side {
    height: 450px;
    width: 75%;
    overflow: hidden;
}
	
}
@media (max-width: 1300px) {
		.ptbox {
    padding-top: 30px;
			font-family: helvetica, sans-serif !important;
}
	.mtabackground {
    background-position-x: -250px;
}
		.ricohbackground {
    background-position-x: -250px;
}
		.theavebackground {
    background-position-x: -250px;
}
		.gmbackground {
    background-position-x: -250px;
}
		.citibackground {
    background-position-x: -250px;
}
	.uabackground {
    background-position-x: -250px;
}
	.bluetowersbackground {
    background-position-x: -250px;
}
	.copstopcoachbackground {
    background-position-x: -250px;
}
		.vmlyrbackground {
    background-position-x: -250px;
}
		.dowbackground {
    background-position-x: -250px;
}
		.lsbackground {
    background-position-x: -250px;
}
	.backourbizbackground {
    background-position-x: -250px;
}
	.col-md-12.counterboxarea {
    padding: 15px 55px;
}
	.introforproject.imagenopadding {
    margin-left: -15px;
    margin-right: -15px;
}
	
	.introforproject.problemboxarea {
    padding-left: 10px ;
}
	.sectionprojectboxheadproblem {
    padding-top: 50px;
    padding-left: 55px;
}
	.sectionheadingproblem {
    color: #000;
    margin: 50px 0px 10px;
}
	.introforproject {
    padding-right: 40px;
    padding-left: 40px;
}
	.projectimagespec {
    padding: 20px 55px;
}
		.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.9);

}
	.section.av-animation-entry-animated.av-animation-out-viewport {
    transform: scale(0.9);
}
	
	.av-animation {
    position: relative;
    width: 502px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: -10px;
    top: -40px;
}
	
	
	.ulblockarea {
    padding-left: 10px !important;
    padding-right: 30px !important;
    position: relative !important;
    top: -100px !important;
}
	
	#right-side {
    height: 500px;
    width: 75%;
    overflow: hidden;
}
	

  .hptextheading{ line-height: 54px; font-weight: bold; font-size:44px; display: inline;}

 #type{
  font-size: 44px;
  font-weight:bold;
  position: relative;
  top: 40%;
  text-align: center;
  margin-top: 100px;

  }
.texthideprojects1300{
  display: none;
}
.textshowprojects{display:inherit;}

#home .centerFront {
  top: 20%;
  padding: 0px 100px;
}
	.icon1, .icon2, .icon3, .icon4, .icon5, .icon6 {
    width: 140px;
    height: 140px;
    display: inline-block;
    margin: 0px 15px 0px 15px;
}
	
	.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
    left: -20px;
    top: -60px;
}
	.av-animation-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  margin-top: -36px;
  margin-left: -36px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
}

@media (max-width: 1250px) {
	.ptbox {
    padding-top: 35px;
			font-family: helvetica, sans-serif !important;
		
}
	.quarter-label{font-size: 14px !important;}
.mtabackground {
    background-position-x: -400px;
}
	.ricohbackground {
    background-position-x: -400px;
}
	.theavebackground {
    background-position-x: -400px;
}
	.gmbackground {
    background-position-x: -400px;
}
	.citibackground {
    background-position-x: -400px;
}
	.uabackground {
    background-position-x: -400px;
}
}

@media (max-width: 1200px) {
	.ptbox {
    padding-top: 40px;
			font-family: helvetica, sans-serif !important;
		
}

	.mtabackground {
    background-position-x: -180px;
}
	.ricohbackground {
    background-position-x: -180px;
}
	.theavebackground {
    background-position-x: -180px;
}
	.gmbackground {
    background-position-x: -180px;
}
	.citibackground {
    background-position-x: -180px;
}
	.uabackground {
    background-position-x: -180px;
}
	.bluetowersbackground {
    background-position-x: -180px;
}
		.copstopcoachbackground {
    background-position-x: -180px;
}
		.vmlyrbackground {
    background-position-x: -180px;
}
		.dowbackground {
    background-position-x: -180px;
}
		.lsbackground {
    background-position-x: -180px;
}
		.backourbizbackground {
    background-position-x: -180px;
}
	.resultsbox span {
    font-size: 28px;
    font-family: 'DM Serif Text', serif;
}
	
	.sectionprojectboxhead.topothersectionhead {
    padding-top: 50px;
}
	
	.projectbgmain {
    padding: 150px 500px 100px 140px;
}
	.mainboxproject {
    padding-bottom: 0px;
}
	.maintitleproject h1 {
    font-size: 54px;
    font-family: playfair display, helvetica, sans-serif;
    font-weight: bold;
}
	.skillblockarea{ height:350px;}
		.av-animation {
    position: relative;
    width: 502px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: -40px;
    top: -40px;
}
	
	.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.9);
}
	
	.imgicons {
    padding-right: 0px;
}
	.pullleftblockclass {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 14px;
    font-family: helvetica, sans-serif;
    line-height: 20px;
}
	.pullleftblocktextblock {
    font-size: 12px;
    line-height: 21px;
    margin-bottom: 0;
}
	.icon1, .icon2, .icon3, .icon4, .icon5, .icon6 {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0px 15px 0px 15px;
}
  .arrowdown{font-size:34px; padding-top:10px;}
  .winblk {
    float: none;
    padding: 3px 0px;
}
.titleblk {
  float: none;
}
  .logoblock{width:22%;  top:-4px;} 
  .sectionheading {
    margin: 0px 0px 10px;
}

blockquote {
 
  font-size: 16px;
}

#home .centerFront {
  top: 15%;
  padding: 0px 100px;
}


}

@media (max-width: 1199px) {
	.page-container {
  
    padding-right: 0px;
    padding-left: 0px;
}
	.ptbox {
    padding-top: 58px;
			font-family: helvetica, sans-serif !important;
		
		
}
	.quarter-label{font-size: 13px !important; position: relative; right:10px}
	.introforproject.problemboxarea {
    padding-left: 90px;
}
	.work-box {
    padding: 30px;
}
	.projectmaintexts{font-size:18px !important;}
	.iconblockindustrytext {
    float: left;
    padding-top: 7px;
    font-size: 13px;
}
	.idvdealbg {
    padding: 5px 5px 10px;
    background: #eee;
    font-size: 10px;
    margin-bottom: 30px;
    height: 210px;
}
.projectsections {
    font-size: 12px;
    height: 280px;
}
}


@media (max-width: 1100px) {
	
	.mtabackground {
    background-position-x: -400px;
}
	.ricohbackground {
    background-position-x: -400px;
}
	.theavebackground {
    background-position-x: -400px;
}
	.gmbackground {
    background-position-x: -400px;
}
	.citibackground {
    background-position-x: -400px;
}
	.uabackground {
    background-position-x: -400px;
}
	.bluetowersbackground {
    background-position-x: -400px;
}
		.copstopcoachbackground {
    background-position-x: -400px;
}
	.vmlyrbackground {
    background-position-x: -400px;
}
	.dowbackground {
    background-position-x: -400px;
}
	.lsbackground {
    background-position-x: -400px;
}
			.backourbizbackground {
    background-position-x: -400px;
}
	.introforproject.problemboxarea {
    padding-left: 60px;
}
	.nav-menu > li {
    margin-left: 6px;
}
	
	
	.leadershipblock{max-width:100%;}
	
	
	.projectblockbottom {
    margin-top: 0px;
}

	
	.hptextbody {
    line-height: auto;
    font-size: 24px;
    margin: 10px 20px 20px;
    text-align: center;
  }
	 .desktopintrobg{display:none;}
  .mobileintrobg{display:inherit !important;}
	
	
	#cd-vertical-nav{display:none}
	
		.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.8);

}
	.section.av-animation-entry-animated.av-animation-out-viewport {
    transform: scale(0.8);
}

	.projectblock.areablockbottom {
    padding-bottom: 0px;
}
	
	.ulblockarea {
    padding-left: 10px !important;
    padding-right: 30px !important;
    position: relative !important;
    top: -150px !important;
}
	#border {
    height: 500px;
    width: 1px;
    background-color: #aaa;
}
	#right-side {
    height: 600px;
    width: 75%;
    overflow: hidden;
}
		.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.8);
}
	.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
    left: -50px;
    top: -100px;
}
	.imgicons {
    padding-right: 50px;
		display: none;
}

.logoblock {

  width: 22%;
  top: -1px;

}
#home .centerFront {
  top: 15%;
  padding: 0px 100px;
}
.hptextbody {
  line-height: auto;
  font-size: 24px;
  margin: 20px 60px;
}
.hptextheading{ line-height: 60px; font-weight: bold; font-size:50px; display: inline;}

#type{
  font-size: 34px;
  font-weight:bold;
  position: relative;
  top: 40%;
  text-align: center;
  margin-top: 100px;
  }
	
	#typea{
  font-size: 50px;
 
  }
	
  #intro h2 {
    font-size: 13px;
    text-align: center;
    font-family: 'roboto mono',sans-serif;
    letter-spacing: 4px;
    font-weight: 700;
    margin-bottom: 14px;
}
#sticker .scrolly {
    color: #aaa;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0px;
}
}



@media (max-width: 1024px) {
	.mtabackground {
    background-position-x: -500px;
}
	.ricohbackground {
    background-position-x: -500px;
}
	.theavebackground {
    background-position-x: -500px;
}
	.gmbackground {
    background-position-x: -500px;
}
	.citibackground {
    background-position-x: -500px;
}
 .uabackground {
    background-position-x: -500px;
}
 .bluetowersbackground {
    background-position-x: -500px;
}
	 .copstopcoachbackground {
    background-position-x: -500px;
}
		 .vmlyrbackground {
    background-position-x: -500px;
}
		 .lsbackground {
    background-position-x: -500px;
}
		 .dowbackground {
    background-position-x: -500px;
}
		 .backourbizbackground {
    background-position-x: -500px;
}
  #home .centerFront {
    top: 12%;
    padding: 0px 100px;
  }

  .introforproject.problemboxarea {
    padding-left: 30px;
}
  
  
  }
@media (max-width: 1000px) {
  .logoblock{width:22%;  top:-10px;} 


  .nav-menu a {
    padding: 10px 8px;


}




@media (max-width: 991px) {

.plan-title {
    margin-bottom: 12px;
    font-size: 12px;
    color: #222;
    font-family: playfair display, serif;
    font-weight: bold;
}
	.ptbox {
    padding-top: 80px;
			font-family: helvetica, sans-serif !important;
		
		
}
	.quarter-label{font-size: 10px !important; position: relative; right:15px}
	.w-col-3 {
    width: 25% !important;
}
	.mtabackground {
    background-position-x: -450px;
}
	.ricohbackground {
    background-position-x: -450px;
}
	.theavebackground {
    background-position-x: -450px;
}
	.gmbackground {
    background-position-x: -450px;
}
	.citibackground {
    background-position-x: -450px;
}
	.uabackground {
    background-position-x: -450px;
}
	.bluetowersbackground {
    background-position-x: -450px;
}
	.copstopcoachbackground {
    background-position-x: -450px;
}
	.vmlyrbackground {
    background-position-x: -450px;
}
	.dowbackground {
    background-position-x: -450px;
}
	.lsbackground {
    background-position-x: -450px;
}
	.backourbizbackground {
    background-position-x: -450px;
}
	.hptextbody.slideshowtexttop {
    margin-top: 20px !important;
		 margin-bottom: 40px !important;
}
	.resultsbox {
    margin-bottom: 30px;
    text-align: center;
}
	.col-md-12.counterboxarea {
    padding: 15px 30px;
}
	.resultsbox span {
    font-size: 48px;
    font-family: 'DM Serif Text', serif;
}
	.col-md-12.projectimagespec.productspectopsection {
    padding-top: 0px;
}
	.imagesmallproduct{padding-bottom: 40px;}
	.projectimagespec.imagenopadding.row {
    padding-bottom: 0px;
}
	.sectionprojectproblemboximage {
    padding-right: 0px;
    padding-left: 75px;
    padding-top: 50px;
}
	.sectionprojectboxheadproblem {
    padding-top: 0px;
    padding-left: 55px;
}
	.introforproject.problemboxarea {
    padding-left: 75px;
    padding-right: 195px;
}
	.abouthr.projecttab {
    float: left;
}
	.introforproject {
    padding-right: 15px;
    padding-left: 15px;
}
	.projectspecs {
    padding-top: 0px;
}
.projectimagespec {
    padding: 30px;
}
.projectheadingarea {

    text-align: left !important;

}
	.projectbgmain {
    padding: 150px 400px 100px 140px;
}
	.iconblockindustrytext {
    float: left;
    padding-top: 5px;
    font-size: 15px;
}
	
	.industrytextareabox {
    padding-bottom: 15px;
    width: 100%;
}
.project-title {

    margin-top: 0px;
    font-family: "playfair display", helvetica, sans-serif;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    margin-bottom: 10px;
    text-align: left;
    padding-top: 5px;

}
	
	.idvdealbg {
    padding: 5px 5px 10px;
    background: #eee;
    font-size: 10px;
    margin-bottom: 30px;
    height: 260px;
}
		.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.95);

}
	.section.av-animation-entry-animated.av-animation-out-viewport {
    transform: scale(0.95);
}
	.skillblockarea{ height:450px;}
	.av-animation {
    position: relative;
    width: 502px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: 90px;
    top: -40px;
}
	
	#testimonials .testimonial-item {
    text-align: center;
    padding: 25px;
}
	
	.timeline-year {
    position: relative;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
    font-family: 'helvetica', sans-serif;
    color: #636363;
    font-size: 10px;
    line-height: 15px;
    text-align: left;
    letter-spacing: 0;
    text-transform: uppercase;
}
	.timelineyearhead {
    padding: 0px 0px 0px 30px;
}
	
	.blockbio {
    height: auto;
    overflow: hidden;
}
	.bottomparea{margin-bottom:0px;}
	.ulblockarea {
    padding-left: 10px !important;
    padding-right: 30px !important;
    position: relative !important;
    top: 0px !important;
}
	#right-side #first.active, #right-side #second.active, #right-side #third.active, #right-side #fourth.active {
    margin-top: 100px;
    opacity: 1;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
	.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.95);
}
	.av-animation-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 82px;
  margin-top: -36px;
  margin-left: -36px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
	.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
    left: 75px;
    top: -50px;
}
	
	p {
    padding: 0;
    margin: 0 0 30px 0;
    font-size: 16px;
}
		.pullleftblockclass {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 18px;
    font-family: helvetica, sans-serif;
    line-height: 20px;
			padding-top: 20px;
}
	.pullleftblocktextblock {
    font-size: 13px;
    line-height: 21px;
    margin-bottom: 0;
}
	.icon1, .icon2, .icon3, .icon4, .icon5, .icon6 {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0px 15px 0px 15px;
}
  
	
	.pullleftblock {
    float: left;
    width: 75%;
}
	.boxforsections {
    padding-bottom: 20px !important;
}
  .arrowdown{font-size:34px; padding-top:0px;}
  .companyname{display: none;}

  .hptextbody.mt-20 {
    margin-top: 40px;
  }

  #home .centerFront {
    top: 12%;
    padding: 0px 60px;
  }

  .textblockpd{padding-left:110px; padding-right:110px;}
  .projectblockbottom {
    margin-top: 0px;
    margin-left: 0px;
    padding-top: 0px;
}
.headertext {
  font-size: 19px;
  padding-bottom: 40px;
  margin-bottom: 0px;
}
.section-header h3 {
  font-size: 28px;
  color: #111;
  text-align: center;
  font-weight: 700;
  position: relative;
  padding-bottom: 25px;
}
.sectionheading {
  margin: 0px 0px 10px;
  text-align: center;
}
.abouthr {
  width: 30px;
  border: 1px solid #333;
  margin-top: 20px;
  margin-bottom: 20px;
  float: none;
}
.projectblock {
  padding: 0px ;
}
  .texthideprojects1300{
    display: inline;
  }
  .textshowprojects{display:none;}
  .pt-20-991{padding-top:40px;}
  .imgleft-nopad{padding-left:0px;}
	  .imgleft-nopadimage{padding-left:15px;}
  .imgright-nopad{padding-right:0px;}
  #header.header-scrolled {

    height: 76px;

  
  }
  #fixed_footer_more_info {

    display: none;
    width: 100%;
    height: 140px !important;
    background: rgba(218,218,218,0.94) top left repeat;
    bottom: 40px;
    position: absolute;
    z-index: 8;

}
.nav-menu a {
  padding: 8px 4px;

  font-size: 12px;
}
.dnone-991{display:none;}
  	.w-col.w-col-3 {
    width: 40%;
}
	.timelineyearhead {
    padding: 0px 0px 0px 30px;
    width: 75%;
}
	
}
@media (max-width: 900px) {
	
	.mtabackground {
    background-position-x: -500px;
}
	.ricohbackground {
    background-position-x: -500px;
}
	.theavebackground {
    background-position-x: -500px;
}
	.gmbackground {
    background-position-x: -500px;
}
	
	.citibackground {
    background-position-x: -500px;
}
	.uabackground {
    background-position-x: -500px;
}
	.bluetowersbackground {
    background-position-x: -500px;
}
		.copstopcoachbackground {
    background-position-x: -500px;
}
		.vmlyrbackground {
    background-position-x: -500px;
}
		.dowbackground {
    background-position-x: -500px;
}
		.lsbackground {
    background-position-x: -500px;
}
		.backourbizbackground {
    background-position-x: -500px;
}

	
	div#sideBar {
    left: 150px;
    padding: 40px 20px;
    margin-left: 30px;
    float: left;
    position: absolute;
    left: 50px;
    z-index: 992;
    margin-right: 100px;
    width: 250px;
}
	.projectspecs {
    padding-top: 0px;
    padding-left: 15px;
}
	.projectimagespec {
    padding: 0px 30px 30px 45px;
}
	.introforproject {
    padding-right: 15px;
    padding-left: 30px;
}
	
	
	.projectbgmain {
    padding: 150px 350px 100px 100px;
}
	.maintitleproject h1 {
    font-size: 48px;
}
	.maintitleproject p {
    font-size: 16px;
    margin-bottom: 40px;
}
	
	.w-col.w-col-3 {
    width: 50%;
}
	.timelineyearhead {
    padding: 0px 0px 0px 30px;
    width: 75%;
}
	
  .hptextbody.mt-20 {
    margin-top: 25px;
  }
  .logoblock{width:22%;  top:-10px;} 
  .nav-menu a {
    padding: 8px 1px;
  
    font-size: 11px;
  }


  .hptextbody {
    line-height: auto;
    font-size: 20px;
    margin: 10px 20px;
  }
  .hptextheading{ line-height: 30px; font-weight: bold; font-size:40px; display: inline;}
  
  #type{
    font-size: 40px;
    font-weight:bold;
    position: relative;
    top: 40%;
    text-align: center;
    margin-top: 100px;
    }

    .watchvideobutton{border: 2px solid #fff;
      color: #fff;
      padding: 10px 40px;
      border-radius: 0px; font-weight:bold;}

      #home .centerFront {
        top: 11%;
        padding: 0px 40px;
      }

      .subtitletext {
        font-size: 12px;
        letter-spacing: 4px;
        font-family: "roboto mono", sans-serif;
        font-weight: bold;
      }

     	#typea{
  font-size: 40px;
 
  }


}


	
	
	@media (max-width: 825px) {
		
	
	
	.introforproject.problemboxarea {
    padding-left: 20px;
    padding-right: 85px;
}
	.sectionprojectproblemboximage {
    padding-right: 0px;
    padding-left: 20px;
    padding-top: 50px;
}
	}

@media (max-width: 768px) {
	
		.mtabackground {
    background-position-x: -580px;
}
		.ricohbackground {
    background-position-x: -580px;
}
		.theavebackground {
    background-position-x: -580px;
}
		.gmbackground {
    background-position-x: -580px;
}
	.citibackground {
    background-position-x: -580px;
}
	.uabackground {
    background-position-x: -580px;
}
		.bluetowersbackground {
    background-position-x: -580px;
}
			.copstopcoachbackground {
    background-position-x: -680px;
}
			.dowbackground {
    background-position-x: -680px;
}
			.vmlyrbackground {
    background-position-x: -680px;
}
			.lsbackground {
    background-position-x: -680px;
}
			.backourbizbackground {
    background-position-x: -680px;
}
	
	.col-md-12.counterboxarea {
    padding: 15px 50px;
}
	.introforproject.problemboxarea {
    padding-left: 20px;
    padding-right: 85px;
}
	.sectionprojectproblemboximage {
    padding-right: 0px;
    padding-left: 20px;
    padding-top: 50px;
}
#sticker .scrolly {
    font-size: 10px;
}
	.mobilehptextintro {
    position: absolute;
    z-index: 989;
    top: 250px;
}
	.slider {
    background: white;
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 400px;
}
	.pullleftblock {
    float: left;
    width: 80%;
}
  
 
  .hptextbody {
    line-height: auto;
    font-size: 20px;
    margin: 10px 20px 20px;
  }
  #home .centerFront {
    top: 11%;
    padding: 0px 40px;
  }
  
  .dnone-768{display:none;}
  .show-768{display:inherit !important;}
  #header.header-scrolled {

    height: 72px;

  
  }
  .logoblock {

    width: 22%;
    top: -3px;

}
  .downloadbtn{border: 2px solid #fff;
    position: relative;
     top: -2px; margin-top:10px;}

  .back-to-top {
    bottom: 44px;
  }

  #header #logo h1 {
    font-size: 28px;
  }

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

  
  #nav-menu-container {
    display: none;
  }

  #mobile-nav-toggle {
    display: inline;
  }

	.textblockpd {
    padding-left: 100px;
    padding-right: 100px;
}
}


@media (max-width: 767px) {
	.w-col.w-col-3.imagetimeline {
    width: 100% !important;
}
	.spinningagile{display: none;}
	.webviewproblem{display: none}
.mobileviewproblem{display: block}
	.mtabackground{ background:url(../img/portfolio_homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
	.ricohbackground{ background:url(../img/portfolio_ricoh-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
		.theavebackground{ background:url(../img/portfolio_theave-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
	.citibackground{ background:url(../img/portfolio_citi-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
	.uabackground{ background:url(../img/portfolio_ua-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
	.bluetowersbackground{ background:url(../img/portfolio_bluetowers-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
	.copstopcoachbackground{ background:url(../img/portfolio_copstopcoach-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
		.vmlyrbackground{ background:url(../img/portfolio_vmlyr-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
		.lsbackground{ background:url(../img/portfolio_ls-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
		.dowbackground{ background:url(../img/portfolio_dow-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
	
		.backourbizbackground{ background:url(../img/portfolio_backourbiz-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
	.gmbackground{ background:url(../img/portfolio_gm-homescreen_mobile.jpg); background-size: 100%;
background-repeat: no-repeat;position: relative; z-index: 995;  background-position-y: -100px;}
	
	#top-menu li {
    float: left;
    list-style-type: none;
    padding: 0px 10px;
    margin: 0px;
		display: none;
}
	.resultsbox span {
    font-size: 62px;
    font-family: 'DM Serif Text', serif;
}
	.col-md-12.counterboxarea {
    padding: 30px;
}
	.sectionprojectproblemboximage {
    padding-right: 50px;
    padding-left: 150px;
    padding-top: 50px;
}
.sectionprojectproblembox {
    padding-right: 10px;
}
	.introforproject.problemboxarea {
    padding-left: 150px;
    padding-right: 50px;
}
.sectionprojectboxheadproblem {

    padding-top: 50px;
    padding-left: 0px;

}
	.sectionprojectboxhead {
    padding-top: 50px;
}
	.introforproject {
    padding-right: inherit;
    padding-left: inherit;
}
	.projectspecs {
    padding-top: 0px;
    padding-left: 0px;
}
	.projectimagespec {
    padding: 0px 30px;
}
	.projectbgmain {
    padding: 100px 50px 250px 50px;
    text-align: center;
}
	.projectheadingarea {
    text-align: center !important;
    font-size: 18px;
}
	.abouthrwhite.smallindent {
    float: none;
}
	.textforportfolio {
    padding-right: 40px;
    padding-left: 40px;
}
	.skilltextforportfolio {
    padding: 0px 40px;
}
	.industrytextareabox {
    padding-bottom: 10px;
    width: 100%;
}
	.idvdealbg {
    padding: 5px 5px 10px;
    background: #eee;
    font-size: 10px;
    margin-bottom: 30px;
    height: 200px;
}
	
	.projectsections {
    font-size: 12px;
    height: 200px;
}
.pullleftblock {
    float: left;
    width: 70%;
}
	
	.imgicons {
    padding-right: 0px;
		display: inherit;
}
	
#cd-vertical-nav {
    display: block !important;
}
.av-animation {
    position: relative;
    width: 502px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: -10px;
    top: -40px;
}
	
		.w-col.w-col-3 {
    width: 100%;
}
	.timelineyearhead {
    padding: 20px 0px 0px 30px;
    width: 100%;
}
	.tabs-menu-4.w-tab-menu {
    margin-left: 0px;
}
	
	#right-side {
    height: 550px;
    width: 75%;
    overflow: hidden;
}
	#right-side #first.active, #right-side #second.active, #right-side #third.active, #right-side #fourth.active {
    margin-top: 50px;
    opacity: 1;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
	
	.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.95);
    height: 420px;
}
	.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
    left: -20px;
    top: -40px;
}
	.textboxskillset {
    font-size: 14px;
    width: 33%;
}
.footerlinksites {

  display: none;

}
#fixed_footer_more_info {
  display: none;
  width: 100%;
  height: 80px !important;
  background: rgba(218,218,218,0.94) top left repeat;
  bottom: 40px;
  position: absolute;
  z-index: 8;
}
	.sectionheadingproblem {
    color: #000;
    margin: 20px 0px 10px;
}
}
@media (max-width: 700px) {
	.mtabackground{  background-position-y: 0px;}
	.ricohbackground{  background-position-y: 0px;}
	.theavebackground{  background-position-y: 0px;}
	.gmbackground{  background-position-y: 0px;}
	.citibackground{  background-position-y: 0px;}
	.uabackground{  background-position-y: 0px;}
	.bluetowersbackground{  background-position-y: 0px;}
	.copstopcoachbackground{  background-position-y: 0px;}
	.lsbackground{  background-position-y: 0px;}
	.vmlyrbackground{  background-position-y: 0px;}
	.dowbackground{  background-position-y: 0px;}
	.backourbizbackground{  background-position-y: 0px;}
	.sectionprojectproblemboximage {
    padding-right: 50px;
    padding-left: 125px;
    padding-top: 50px;
}

	.introforproject.problemboxarea {
    padding-left: 125px;
    padding-right: 100px;
}
	
  .arrowsvg{width: 10%;
    margin-left: auto;
    margin-right: auto; }
  .arrowdown{font-size:34px; padding-top:50px; }
  .hptextheading{ line-height: 52px; font-weight: bold; font-size:38px; display: inline;}
  .mobiletextboxarea{text-align:center; margin:16px 20px 20px;}
	#typea{font-size:38px;}
  
 
  .textblockpd{padding-left:100px; padding-right:100px;}
  .logoblock{width:25%;  top:0px;} 
	.svgAnimPanel svg {
    margin: 10px 0px 0px 0px;
}
	
}
@media (max-width: 600px) {
	
	.mtabackground{  background-position-y: 0px;}
	.ricohbackground{  background-position-y: 0px;}
	.theavebackground{  background-position-y: 0px;}
	.gmbackground{  background-position-y: 0px;}
	.citibackground{  background-position-y: 0px;}
	.uabackground{  background-position-y: 0px;}
	.bluetowersbackground{  background-position-y: 0px;}
		.copstopcoachbackground{  background-position-y: 0px;}
	.vmlyrbackground{  background-position-y: 0px;}
	.dowbackground{  background-position-y: 0px;}
	.lsbackground{  background-position-y: 0px;}
	.backourbizbackground{  background-position-y: 0px;}
	.projectbgmain {
    padding: 100px 50px 170px 50px;
    text-align: center;
}
	.sectionprojectproblemboximage {
    padding-right: 50px;
    padding-left: 75px;
    padding-top: 50px;
}
	.introforproject.problemboxarea {
    padding-left: 75px;
    padding-right: 50px;
}
	.projectbuttontop {
    margin-bottom: 40px;
}
	.maintitleproject h1 {
    font-size: 38px;
}
	.maintitleproject h2 {
    font-size: 20px;
}
	.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.8);
  
}
	.section.av-animation-entry-animated.av-animation-out-viewport {
    transform: scale(0.8);
		height: 300px;
}
	.skillblockarea {

    height: 300px;
}
	#w-node-8ac1a4b10085-bdf5239a {
    padding: 0px;
    margin: 0px;
}
	
	.av-animation-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 82px;
  margin-top: -36px;
  margin-left: -36px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}


.av-animation-entry-animated .av-animation {

    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
    left: 15px;
    top: -110px;

}
  .textblockpd{padding-left:50px; padding-right:50px;}
  .qoutetextarea {

    font-size: 22px;
    margin: 20px 0px;

}
  .dnone-600{display:none;}
  .logoblock{width:30%;  top:-3px;} 
  .qoutebottom-name {
    width: 280px;
}
.qoutetop-name {
  width: 280px;
}
	
	#right-side {
    height: 600px;
    width: 75%;
    overflow: hidden;
}
.av-animation {
    position: relative;
    width: 422px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: 20px;
    top: -40px;
	transform:scale(0.8);
}
	.av-animation-tick {
    top: 212px;
    left: 176px;
    width: 69px;
    height: 49px;
    will-change: transform;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
	.mobilehptextintro {
    position: absolute;
    z-index: 989;
    top: 120px;
}
}
	
	@media (max-width: 550px) {
	
	.mtabackground{  background-position-y: 0px; background-color: #000}
		.ricohbackground{  background-position-y: 0px; background-color: #000}
		.theavebackground{  background-position-y: 0px; background-color: #000}
		.gmbackground{  background-position-y: 0px; background-color: #000}
		.citibackground{  background-position-y: 0px; background-color: #000}
		.uabackground{  background-position-y: 0px; background-color: #000}
		.bluetowersbackground{  background-position-y: 0px; background-color: #000}
		.copstopcoachbackground{  background-position-y: 0px; background-color: #000}
		.lsbackground{  background-position-y: 0px; background-color: #000}
		.dowbackground{  background-position-y: 0px; background-color: #000}
		.vmlyrbackground{  background-position-y: 0px; background-color: #000}
		.backourbizbackground{  background-position-y: 0px; background-color: #000}
	.projectbgmain {
    padding: 100px 50px 100px 50px;
    text-align: center;
}
	}
	
@media (max-width: 500px) {
	.projectbuttontoplink.projectmobilebutton {
    background: #3094db ;
    color: #fff ;
}
	.mtabackground{  background-position-y: 20px; background-color: #000}
	.ricohbackground{  background-position-y: 20px; background-color: #000}
	.theavebackground{  background-position-y: 20px; background-color: #000}
	.gmbackground{  background-position-y: 20px; background-color: #000}
	.citibackground{  background-position-y: 20px; background-color: #000}
	.uabackground{  background-position-y: 20px; background-color: #000}
	.bluetowersbackground{  background-position-y: 20px; background-color: #000}
	.copstopcoachbackground{  background-position-y: 20px; background-color: #000}
	.vmlyrbackground{  background-position-y: 20px; background-color: #000}
	.dowbackground{  background-position-y: 20px; background-color: #000}
	.lsbackground{  background-position-y: 20px; background-color: #000}
	.backourbizbackground{  background-position-y: 20px; background-color: #000}
	.projectbgmain {
    padding: 100px 50px 100px 50px;
    text-align: center;
}
	.sectionprojectproblemboximage {
    padding-right: 50px;
    padding-left: 50px;
    padding-top: 50px;
}
	.introforproject.problemboxarea {
    padding-left: 50px;
    padding-right: 50px;
}
	
			.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.7);
}
		.section.av-animation-entry-animated.av-animation-out-viewport {
    transform: scale(0.7);
			padding-top:20px;
		
}
	
	.av-animation-tick {
    top: 212px;
    left: 216px;
    width: 69px;
    height: 49px;
    will-change: transform;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
	
	.skillblockarea {

    height: 350px;
}
	.av-animation {
    position: relative;
    width: 502px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: -20px;
    top: -40px;
		transform:scale(0.8);
}
	#right-side {
    height: 750px;
    width: 75%;
    overflow: hidden;
}
	
	
	
	.av-animation-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 82px;
  margin-top: -36px;
  margin-left: -36px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
	.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
   left: -50px;
top: -110px;
}
	
	
	
	
	
	.textboxskillset {
    font-size: 14px;
    width: 50%;
}
  .arrowdown {
    font-size: 34px;
    padding-top: 10px;
	  
}
  .arrowsvg{width: 12%;
    margin-left: auto;
    margin-right: auto; }
  .modal {
    position: fixed;
    top: 100px;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}
  .skills-content .col-lg-3.col-md-3.col-sm-6.col-xs-6 {

    padding: 5px;

}
  .logoblock{width:30%;  top:-1px;} 
  .sectionblockarea {
    padding: 80px 0px;
	  
	  
}
	
	.illustration {
    transform-origin: top right;
    right: -45px;
    transform: scale(0.65);
}
	.plans .col-lg-6.col-md-6.col-sm-6.col-xs-12 {
    width: 100%;
}
}
@media (max-width: 480px) {
	
	.mtabackground{  background-position-y: 200px; background-color: #000}
	.ricohbackground{  background-position-y: 200px; background-color: #000}
	.theavebackground{  background-position-y: 200px; background-color: #000}
	.gmbackground{  background-position-y: 200px; background-color: #000}
	.citibackground{  background-position-y: 200px; background-color: #000}
	.uabackground{  background-position-y: 200px; background-color: #000}
	.bluetowersbackground{  background-position-y: 200px; background-color: #000}
	.copstopcoachbackground{  background-position-y: 200px; background-color: #000}
	.lsbackground{  background-position-y: 200px; background-color: #000}
	.vmlyrbackground{  background-position-y: 200px; background-color: #000}
	.dowbackground{  background-position-y: 200px; background-color: #000}
	.backourbizbackground{  background-position-y: 200px; background-color: #000}
	.projectbgmain {
    padding: 100px 50px 200px 50px;
    text-align: center;
}
	
	.logoblockareas{display: inherit}
	.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.7);
		padding-top:30px;
		
    
}
	.section.av-animation-entry-animated.av-animation-out-viewport {
    transform: scale(0.6);
		padding-top:30px;
}
	.av-animation {
    position: relative;
    width: 122px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: 140px;
    top: -40px;
		transform:scale(0.7);
}
.av-animation-tick {
    top: 212px;
    left: 26px;
    width: 69px;
    height: 49px;
    will-change: transform;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
	
	#right-side {
    height: 600px;
    width: 75%;
    overflow: scroll;
}
	#right-side #first p, #right-side #second p, #right-side #third p, #right-side #fourth p {
    padding-left: 30px;
    padding-right: 30px;
    font-size: 12px;
}
	
	.svgAnimPanel svg {
    margin: 15px;
}
	#left-side {
    height: 70%;
    width: 40%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
	.ulblockarea {
    padding-left: 10px !important;
    padding-right: 10px !important;
    position: relative !important;
    top: 0px !important;
}
	.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.7);
		padding-top: 40px;
}
	.av-animation-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 82px;
  margin-top: -36px;
  margin-left: -36px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
	.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
   left: 130px;
top: -170px;
}
	
	.slider {
    background: white;
    height: 100px;
    margin: 0px;
    overflow: hidden;
    position: relative;
    width: 960px;
    width: 300px;
		display: none;
}
	
		.pullleftblockclass {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 16px;
    font-family: helvetica, sans-serif;
    line-height: 20px;
			padding-top: 20px;
}
	.pullleftblocktextblock {
    font-size: 12px;
    line-height: 21px;
    margin-bottom: 0;
}
	.icon1, .icon2, .icon3, .icon4, .icon5, .icon6 {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0px 15px 0px 15px;
}
  
	
	.pullleftblock {
    float: left;
    width: 60%;
}
	.illustration {
    transform-origin: top right;
    right: -30px;
    transform: scale(0.65);
}

  #footer_bar_content {
    padding: 0px 10px !important;
    font-family: roboto mono,sans-serif;
}
  .logoblock{width:35%;  top:-3px;} 
}

@media (max-width: 440px) {
	
	.mtabackground{  background-position-y: 200px; background-color: #000}
	.ricohbackground{  background-position-y: 200px; background-color: #000}
	.theavebackground{  background-position-y: 200px; background-color: #000}
	.gmbackground{  background-position-y: 200px; background-color: #000}
	.citibackground{  background-position-y: 200px; background-color: #000}
	.uabackground{  background-position-y: 200px; background-color: #000}
	.bluetowersbackground{  background-position-y: 200px; background-color: #000}
	.copstopcoachbackground{  background-position-y: 200px; background-color: #000}
	.vmlyrbackground{  background-position-y: 200px; background-color: #000}
	.dowbackground{  background-position-y: 200px; background-color: #000}
	.lsbackground{  background-position-y: 200px; background-color: #000}
	.backourbizbackground{  background-position-y: 200px; background-color: #000}
	.projectbgmain {
    padding: 100px 50px 75px 50px;
    text-align: center;
}
	
	
	.idvdealbg {
    padding: 5px 5px 10px;
    background: #eee;
    font-size: 10px;
    margin-bottom: 30px;
    height: 220px;
}
	.av-animation {
    position: relative;
    width: 122px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: 120px;
    top: -40px;
		transform:scale(0.7);
}
	
	#right-side #first p, #right-side #second p, #right-side #third p, #right-side #fourth p {
    padding-left: 30px;
    padding-right: 30px;
    font-size: 11px;
}
	
	.illustration {
    transform-origin: top right;
    right: 0px;
    transform: scale(0.65);
}

		.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.6);
}
	.av-animation-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 82px;
  margin-top: -36px;
  margin-left: -36px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
	

.av-animation-entry-animated .av-animation {

    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
    left: 115px;
    top: -220px;

}
	.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.7);
    padding-top: 80px;
    height: 270px;
}
.skillblockarea {

    height: 300px;
}
}
@media (max-width: 400px) {
	.mtabackground{  background-position-y: 200px; background-color: #000}
	.ricohbackground{  background-position-y: 200px; background-color: #000}
	.theavebackground{  background-position-y: 200px; background-color: #000}
	.gmbackground{  background-position-y: 200px; background-color: #000}
	.citibackground{  background-position-y: 200px; background-color: #000}
	.uabackground{  background-position-y: 200px; background-color: #000}
	.bluetowersbackground{  background-position-y: 200px; background-color: #000}
	.copstopcoachbackground{  background-position-y: 200px; background-color: #000}
	.vmlyrbackground{  background-position-y: 200px; background-color: #000}
	.dowbackground{  background-position-y: 200px; background-color: #000}
	.lsbackground{  background-position-y: 200px; background-color: #000}
	.backourbizbackground{  background-position-y: 200px; background-color: #000}
	.projectbgmain {
    padding: 100px 50px 20px 50px;
    text-align: center;
}
	.maintitleproject p {
    font-size: 14px;
    margin-bottom: 40px;
}
	
	.work-box {
    padding: 20px;
}
	
.skillblockarea {

    height: 300px;
}
	
.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.7);
		 padding-top: 180px;
		
    
}
	.section.av-animation-entry-animated.av-animation-out-viewport {
    transform: scale(0.7);
		 padding-top: 180px;
}
	
	
	.av-animation-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 82px;
  margin-top: -36px;
  margin-left: -36px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
	
	
	
.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
    left: 100px;
    top: -340px;
}
	
	
			.pullleftblockclass {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 14px;
    font-family: helvetica, sans-serif;
    line-height: 20px;
			padding-top: 20px;
}
	.pullleftblocktextblock {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 0;
}
	.pullleftblock {
    float: left;
    width: 50%;
}
	.illustration {
    transform-origin: top right;
    right: 0px;
    transform: scale(0.65);
}
  .arrowsvg{width: 14%;
    margin-left: auto;
    margin-right: auto; }
  .hptextheading{  font-weight: bold; font-size:28px; display: inline;line-height: 38px;}
  #typea {
    font-size: 28px;
    font-weight: bold;
  }
  .mobiletextboxarea{text-align:center; margin:16px 20px 20px;}
  #intro h2 {
    font-size: 10px;
    text-align: center;
    font-family: 'roboto mono',sans-serif;
    letter-spacing: 4px;
    font-weight: 700;
    margin-bottom: 14px;
}
  .logoblock{width:40%;  top:0px;} 
	.av-animation {
    position: relative;
    width: 122px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: 80px;
    top: -40px;
}
}

@media (max-width: 380px) {
	.maintitleproject p {
    font-size: 14px;
    margin-bottom: 40px;
    display: none;
}
	.maintitleproject h2 {
    font-size: 20px;
    margin-bottom: 50px;
}
	.mtabackground{  background-position-y: 150px; background-color: #000}
	.ricohbackground{  background-position-y: 150px; background-color: #000}
	.theavebackground{  background-position-y: 150px; background-color: #000}
	.gmbackground{  background-position-y: 150px; background-color: #000}
	.citibackground{  background-position-y: 150px; background-color: #000}
	.uabackground{  background-position-y: 150px; background-color: #000}
	.bluetowersbackground{  background-position-y: 150px; background-color: #000}
	.copstopcoachbackground{  background-position-y: 150px; background-color: #000}
	.dowbackground{  background-position-y: 150px; background-color: #000}
	.vmlyrbackground{  background-position-y: 150px; background-color: #000}
	.lsbackground{  background-position-y: 150px; background-color: #000}
	.backourbizbackground{  background-position-y: 150px; background-color: #000}
	.projectbgmain {
    padding: 100px 50px 10px 50px;
    text-align: center;
}
	
	.projectbgmain {
    padding: 80px 50px 100px 50px;
    text-align: center;
}
	.maintitleproject h1 {
    font-size: 34px;
}
	
	.idvdealbg {
    padding: 5px 5px 10px;
    background: #eee;
    font-size: 10px;
    margin-bottom: 30px;
    height: 250px;
}
	.projectsections {
    font-size: 12px;
    height: 250px;
}
	.timeline-event {
    padding: 5px;
    border-style: none;
    border-radius: 100px;
    border: 1px solid #192a56;
    background-color: #3094db;
    position: relative;
    top: -5px;
}
	
	.illustration {
    transform-origin: top right;
    right: 20px;
    transform: scale(0.65);
}
.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
   left: 90px;
top: -340px;
}
	
	.skillblockarea {

    height: 250px;
}
	
	.section.av-animation-entry-animated.av-animation-in-viewport {
    transform: scale(0.55);
		 padding-top: 180px;
		
    
}
	.section.av-animation-entry-animated.av-animation-out-viewport {
    transform: scale(0.55);
		 padding-top: 180px;
}
	
	
	.av-animation {
    position: relative;
    width: 122px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: 50px;
    top: -40px;
}
	
}

	
	
	
	
@media (max-width: 340px) {
	
	.mtabackground{  background-position-y: 200px; background-color: #000}
	.ricohbackground{  background-position-y: 200px; background-color: #000}
	.theavebackground{  background-position-y: 200px; background-color: #000}
	.gmbackground{  background-position-y: 200px; background-color: #000}
	.citibackground{  background-position-y: 200px; background-color: #000}
	.uabackground{  background-position-y: 200px; background-color: #000}
	.bluetowersbackground{  background-position-y: 200px; background-color: #000}
	.copstopcoachbackground{  background-position-y: 200px; background-color: #000}
	.dowbackground{  background-position-y: 200px; background-color: #000}
	.vmlyrbackground{  background-position-y: 200px; background-color: #000}
	.lsbackground{  background-position-y: 200px; background-color: #000}
	.backourbizbackground{  background-position-y: 200px; background-color: #000}
	.projectbgmain {
    padding: 100px 50px 100px 50px;
    text-align: center;
}
	.av-animation {
    position: relative;
    width: 122px;
    height: 502px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    left: 30px;
    top: -40px;
}
	.illustration {
    transform-origin: top right;
    right: 30px;
    transform: scale(0.65);
}
.av-animation-entry-animated .av-animation {
    -webkit-animation-name: avAnimationEntry;
    animation-name: avAnimationEntry;
    position: relative;
    left: 70px;
    top: -340px;
}

}

@media (max-width: 320px) {
	.mtabackground{  background-position-y: 180px; background-color: #000}
	.ricohbackground{  background-position-y: 180px; background-color: #000}
	.theavebackground{  background-position-y: 180px; background-color: #000}
	.gmbackground{  background-position-y: 180px; background-color: #000}
	.citibackground{  background-position-y: 180px; background-color: #000}
	.uabackground{  background-position-y: 180px; background-color: #000}
	.bluetowersbackground{  background-position-y: 180px; background-color: #000}
	.copstopcoachbackground{  background-position-y: 180px; background-color: #000}
	.vmlyrbackground{  background-position-y: 180px; background-color: #000}
	.lsbackground{  background-position-y: 180px; background-color: #000}
	.dowbackground{  background-position-y: 180px; background-color: #000}
	.backourbizbackground{  background-position-y: 180px; background-color: #000}
	.projectbgmain {
    padding: 100px 50px 100px 50px;
    text-align: center;
}
	
  .logoblock{width:40%;  top:2px;} 
  .mobilehptextintro {
    position: absolute;
    z-index: 989;
    top: 100px;
}
.mobiletextboxarea{text-align:center; margin:16px 20px 20px;}
	
.hptextheading{  font-weight: bold; font-size:28px; display: inline;line-height: 34px;}
#typea {
  font-size: 28px;
  font-weight: bold;
}
}



.font_playfair{font-family: "helvetica", serif;}
.font_helvetica{font-family: "Helvetica", sans-serif;}
.font_montserrat{font-family: "Montserrat",Helvetica,sans-serif;}
.font_bold{font-weight: bold;}
.font_normal{font-weight: normal;}
.font_thin{font-weight: 300;}
.font_blue{color: #3094db;}
.font_black{color: #000 !important;}
.projectsections p {

  font-family: 'helvetica', sans-serif;
  font-weight: 300;
  color: #777;
  font-size: 13px;
  line-height: 15px;

}
.whitecolor{color:#fff !important;}
#contact p{color:#fff;}

#contact .section-header h3{color:#fff;}
#contact .section-header h3::after {

  background: #fff;

}
.membershipbox h5 {

  font-family: helvetica;
  font-weight: bold;

}