/**
 * Styles for the infographic
 */
 .infographic-wrapper {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	max-width: 750px;
 	margin: 0 auto !important;
  position: relative;
 }

 .infographic-wrapper .right {
 	justify-content: flex-end;
 }

 .infographic-node .icon {
 	max-width: 120px;
  position: absolute;
 }

 .infographic-node.double {
   margin-bottom: 1.4em !important;
 }

 .infographic-node.right .icon {
   right: -120px;
   bottom: -4em;
  }
 .infographic-node.left .icon {
   left: -120px;
   bottom: -4em;
 }

 .infographic-node.double .icon:first-child {
   left: -120px;
   bottom: -4em;
 }
 .infographic-node.double .icon:last-child {
   right: -120px;
   bottom: -4em;
 }

 .infographic-node {
 	display: flex;
  position: relative;
  z-index: 2;
 }

 .infographic-node .description p {
   font-weight: 400 !important;
 }

 .infographic-node .data {
 	width: 50%;
 	display: flex;
  padding-bottom: 0.25em !important;
 	align-content: baseline;
 	align-items: flex-end;
 	border-bottom: 1px solid #95989A !important;
 }
 .infographic-node:first-child {
   background-color: white !important;
 }

 .infographic-node.right .year {
   margin-left: 0.3em !important;
  }
 .infographic-node.left .year {
    margin-right: 0.3em !important;
 }
 .infographic-node.double .data.left .year {
   margin-right: 0.3em !important;
  }
 .infographic-node.double .data.right .year{
    margin-left: 0.3em !important;
 }

 .infographic-node.right .data .description {
   text-align: right !important;
   padding-left: 1.5em !important;
   flex: 1;
 }
 .infographic-node.left .data .description {
   padding-right: 1.5em !important;
   flex: 1;
 }
 .infographic-node.double .data.right .description {
   text-align: right !important;
   padding-left: 2em !important;
   flex: 1;
 }
 .infographic-node.double .data.left .description {
   padding-right: 1.5em !important;
   flex: 1;
 }

 .infographic-node .data .year {
 	font-size: 32px;
 }

 .infographic-wrapper .ball {
 	width: 21px;
 	height: 21px;
 	border-radius: 50% !important;
  position: absolute;
  left: 48.6%;
  bottom: -10px;
 }

 .infographic-wrapper .ball.green {
 	background: #8DC53F;
 }

 .infographic-wrapper .ball.blue {
 	background: #276092;
 }

 .infographic-glue {
   top: 0px;
   height: 100%;
   position: absolute;
   z-index: 0;
   width: 50%;
   border-right: 1px solid #95989A !important;
 }

 @media only screen and (max-width: 768px) {
   .infographic-wrapper {
     margin-right: 1em !important;
   }

   .infographic-node .data {
     	width: 100%;
      padding: 1em 0 !important;
   }
   .infographic-node.double {
     flex-wrap: wrap;
   }
   .infographic-node .icon {
   	 display: none;
   }
   .infographic-node.right .data {
     flex-direction: row-reverse;
     justify-content: flex-end;
   }
   .infographic-node.right .data .description {
     text-align: left !important;
     padding-left: 0em !important;
   }
   .infographic-node.right .data .year{
      margin-left: 0em !important;
      margin-right: 0.3em !important;
   }
   .infographic-node.double .data.left {
     border-bottom: none !important;
   }
   .infographic-node.double .data.right {
     flex-direction: row-reverse;
   }
   .infographic-node.double .data.right .description {
     text-align: left !important;
     padding-left: 0em !important;
     padding-right: 1.5em !important;
   }
   .infographic-node.double .data.right .year {
     margin-left: 0em !important;
     margin-right: 0.3em !important;
   }

   .infographic-wrapper .ball {
      left: 100%;
   }

   .infographic-glue {
     width: calc(100% + 11px);
   }
 }