.tooltip,
.container__sources:before,
.container__build:before,
.container__deploy:before {
  position: absolute;
  right: 0;
  bottom: 100%;
  color: #fff;
  background: #ffb238;
  padding:  0.75rem;
  border-radius: 2.5px;
}

.container-flowchart {
	width: 100%;
	padding: 10vh 0;
	background: #fff;
	border-radius: 3px;
}
.container-flowchart svg {
  height: 20rem;
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.container-flowchart svg line {
  stroke: #FF0049;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-dasharray: 2px 20px;
  animation: animateline 2s linear both infinite;
}
.container-flowchart h3 {
  font-size: 18px;
  color: #273C47;
}
.container-flowchart p {
  font-size: 18px;
  font-weight: 300;
}
.container__sources {
  display: flex;
  border-radius: 8px;
  padding: 1.5rem;
  background: #f9f9f9;
  position: relative;
}
.container__sources:before {
  content: ''; /* Text */
}
.container__sources div {
  text-align: left;
  margin: 0 1rem;
}
.container__build {
  padding: 10vh 10vw;
  border-radius: 8px;
  background: #f9f9f9;
  position: relative;
}
.container__build:before {
  content: '';
}
.container__build div {
  margin: 2rem 0;
}
.container__build div svg {
  width: 4rem;
  height: auto;
  fill: #FF0049;
}
.container__deploy {
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
  position: relative;
}
.container__deploy:before {
  content: 'deploy';
}
@media (max-width: 700px) {
  .container__sources {
    flex-direction: column;
  }
  .container__sources div {
    margin: 1rem 0;
  }
}
@-moz-keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}
@-webkit-keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}
@-o-keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}
@keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}



/* Custom */

h2.flowchart-step-number {
	font-size: 35px;
	color: #FF0049;
	text-align: center;
}

h2.flowchart-step-number span {
	display: block;
	margin-top: 10px;
	color: #ff1e66 !important;
	font-weight: 300 !important;
}


img.flowchart_step_1_devices_img {
	width: 80px;
	display: table !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 10px;
}

.flowchart-step {
	padding-top: 20px;	
}

.flowchart-step p {
	line-height: 29px !important;
}

.flowchart-step .well {
	background-color: #fff !important;
}

.flowchart-step .well-step-1-devices {
	height: 200px;
}

.flowchart-step .well h3 {
	text-align: center;
	height: 50px;
}

.flowchart-step p, .flowchart-step span {
	text-align: center;
	font-weight: 400 !important;
}

.flowchart-step-number-overview-text {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

.flowchart-step-number-overview-text p {
	text-align: center !important;
}

.how-it-works-step2-text-container {
	height: 150px;
	overflow-y: scroll;
}

.how-it-works-step3-text-container {
	height: 300px;
	overflow-y: scroll;
}

.how-it-works-step3-text-container h3 {
	text-align: center;
	font-weight: 400;
	margin-bottom: 20px;
	font-size: 35px;
}

.how-it-works-step3-text-container p {
	font-size: 19px;
}

/* Custom */