/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/



/* flow chart css */ 


.position {
  text-align:center;
  color:#fff;
  line-height:22px;
  padding-top:10px;
   padding-bottom:10px;
}
@media (max-width:767px) {
  
 .level {
  
  text-align:center;
}
.level.lev-one.top-level {
    margin-bottom: 70px;
}
  
  .position {
  display:block ;
 background-color: rgba(255, 255, 255, 0.33);

  max-width:200px;

  }
 .lev-two .position {
   margin-left:100px;
margin-bottom: 50px;
    position:relative;
 
}

  .lev-two .position:before {
    position:absolute;
    content:"";
    width:50px;
    height:calc(100% + 50px);
    border-bottom:1px solid #333333;
    border-left:1px solid #333333;
    left:-50px;
    bottom:50%;
  }

  .lev-two .position:first-child:before {
    height:100%;
    
    
  } 
  
}



@media (min-width:768px) {

.level {
  
  text-align:center;


}
.top-level {
    margin-bottom: 100px;
}
.position {
  display:inline-block;

width: calc(14.28% + 40px);

  vertical-align:top;
  position:relative;
}

.lev-two .position:nth-child(even) {

margin-top:130px;
  
}

.lev-two .position:nth-child(even):before {
    content: "";
    position: absolute;
    height: 180px;
    border-left: 1px solid #333333;
    top: -180px;
  
}


.lev-two .position {
  margin-left:-20px;
  margin-right:-20px;
}



.lev-two .position:before {
    content: "";
    position: absolute;
    height: 50px;
    border-left: 1px solid #333333;
    top: -50px;
    width: calc(100% - 40px);
    border-top: 1px solid #333333;
    left:50%
}

.lev-two .position:nth-last-child(1):before {
    content: "";
    position: absolute;
    height: 50px;
    border-left: 1px solid #333333;
    top: -50px;
    width: calc(100% - 20px);
    border-top: none;
}



.flow-chart {
    position: relative;
  
}

.top-level .position:after {
  content: "";
    position: absolute;
    height: 50px;
    border-left: 1px solid #333333;
    bottom: -50px; 
    width: calc(100% - 40px);
    left: 50%;

  
}
	
	.mid-level .position:after {
  content: "";
    position: absolute;
    height: 50px;
    border-left: 1px solid #fff;
    bottom: -50px; 
    width: calc(100% - 40px);
    left: 50%;

  
}
}