html,
body {
    width: 100%;
    font: 100% "Lato", sans-serif;
    font-weight: 300;
    height: 100%;
    background: url(pattern-3333.jpg); 
 }
 span .title a {
color: green;

 }

.blue-bg {
 
  color: #333333;
  height: 100%; }

.circle {
  font-weight: bold;
  font-size:20;
  text-shadow: 1px 2px #000;
  box-shadow: 2px 3px #000;
  padding: 15px 20px;
  border-radius: 50%;
  background-color: #5AB334;
  border: 3px solid white;
  color: #white;
  max-height: 60px;
  z-index: 2; }
.end {padding-left: 3px;}
.end2 {padding-left: 3px;}

.how-it-works.row {
  display: flex; }
  .how-it-works.row .col-2 {
    display: inline-flex;
    align-self: stretch;
    align-items: center;
    justify-content: center; }
    .how-it-works.row .col-2::after {
      content: '';
      position: absolute;
      border-left: 3px solid #fff;
      z-index: 1; }
  .how-it-works.row .col-2.bottom::after {

  outline: 17px solid #8d8d8d;
  border-radius:3%;
    height: 50%;
    left: 50%;
    top: 50%; }

.how-it-works.row .col-2.full::after {
	border-radius:3%;
	outline: 17px solid #8d8d8d;
	height: 110%;
	left: calc(50% - 3px);
}

.how-it-works.row .col-2.fullleft::after {
	z-index:1;
	border-radius:1%;
	outline: 17px solid #8d8d8d;
	height: 110%;
	left: calc(50% - 0px);
}

.how-it-works.row .col-2.top::after {
	margin-left:-3px;
	outline: 17px solid #8d8d8d;
	border-radius:3%;
	height: 50%;
	left: 50%;
	top: -2px;
}

.timeline .div39 {
	padding: 0;
	height: 39px;
}

.timeline .div37 {
	padding: 0;
	height: 37px;
}

.timeline hr {
  border-top: 3px dashed #fff;
  background: #8d8d8d;
  box-shadow: 5px 10px #888888;
  outline: 17px solid #8d8d8d;
  margin: 0;
  top: 17px;
  position: relative; }

.timeline .col-2 {
  display: flex;
  overflow: hidden; }

.timeline .corner {
  
  border: 3px solid #fff;
  width: 100%;
  position: relative;
  border-radius: 15px; }

.timeline .top-right {

z-index:10;
  background: #8d8d8d;
  outline: 17px solid #8d8d8d;
  left: 50%;
  top: -50%; }

.timeline .left-bottom {

z-index:10;
background: #8d8d8d;
  outline: 17px solid #8d8d8d;
  left: -50%;
  top: calc(50% - 3px); }

.timeline .top-left {
z-index:10;
background: #8d8d8d;
  outline: 17px solid #8d8d8d;
  left: -50%;
  top: -50%; }

.timeline .right-bottom {
	z-index:10;
	background: #8d8d8d;
	outline: 17px solid #8d8d8d;
	left: 50%;
	top: calc(50% - 4px);
}
.col-6 {
	border: 1px solid white;
	color: white;
	background-color: #4f9c2e;
	border-radius: 7px;
	margin-bottom: 10px;
	margin-top: 4px;
	padding: 10px 2px 4px 2px;
	box-shadow: 3px 3px #333;
	}
span.circle-image img {
	border-radius: 50%; 
	background-color: #5AB334; 
	border: 1px solid white;
	transition: background-color 1s, border 1s;
	cursor: pointer;
	}
span.circle-image img:hover {
	background-color: white; 
	border: 1px solid black; 
	box-shadow: 2px 2px #333;
	}
	
h5 a {color: white; transition: text-shadow 1s;}
h5 a:hover {text-decoration: none; color: yellow;  text-shadow: 2px 2px #333;}

.motor {margin-top: -8px; }

@media (max-width: 767px) {
.how-it-works.row .col-2.full::after {
	 border-radius:1%;
   }		
   .how-it-works.row .col-2.fullleft::after {   border-radius:1%;
 }
 }
 i.fa  {color: white;}
   a:hover i.fa {color: yellow;}