.chart {
	border: 1px solid #cccccc;
	/*padding:30px;*/
	position: relative;
}

.chart h3 {
	background-color: #40454c;
	color: #ffffff;
	font-family: 'Oswald', sans-serif !important;
	text-transform: uppercase;
	padding:10px 30px;
	margin-top: 0 !important;
}

.chart p {
	padding: 5px 30px 5px 30px;
}

.arrow-down::after {
    content: url("http://www.sfu.ca/content/dam/sfu/sexual-violence/images/arrows/arrow-down.png");
    position: absolute;
	bottom: -99px;
	left: 42%;
}

.arrow-left::before {
    content: url("http://www.sfu.ca//content/dam/sfu/sexual-violence/images/arrows/arrow-left.png");
    position: absolute;
	left: -92px;
	top: 0;
}

.chart.arrow-down {
	margin-bottom: 90px;
}

.chart.arrow-left {
	margin-left: 66px;
}

.chart-steps {
	border-bottom: 2px solid #dedede;
	padding-left: 171px;
}

.chart-steps p.steps {
    background-color: #40454c;
    width: 118px;
    padding: 4px 18px;
    color: #ffffff;
    display: inline-block;
    text-transform: uppercase;
    font-family: Oswald;
    height: 36px;
    position: relative;
	left: -169px;
	top: 60px;
}

.chart-steps p.steps::after {
    width: 0;
	height: 0;
	border-top: 18px solid transparent;
	border-left: 24px solid #40454c;
	border-bottom: 18px solid transparent;
	position: relative;
	left: 100px;
	top: -32px;
	content: "";
	display:block;
}

@media(max-width:979px){
   .chart-steps p.steps {
        color: #ffffff !important;
   }
   
   .chart-steps p.steps::after {
       top: -34px;
   }
}

@media(max-width:575px){
  
}