/* Steps Boxes 3 */
.stepbox3-box { position: relative; padding: 0; margin-bottom: 80px; box-shadow: none; }
.stepbox3-box:after { border-color: transparent; border-top-color: #eee; border-width: 10px; margin-left: -10px; left: 10%;}
.stepbox3-box:before { border-color: transparent; border-top-color: #ccc; border-width: 13px; margin-left: -13px; left: 10%;}
.stepbox3-box[data-align=right]:after,
.stepbox3-box[data-align=right]:before {right: 10%; left:auto; margin-left: 0;}
.stepbox3-box[data-align=right]:before {margin-right: -13px;}
.stepbox3-box[data-align=center]:after,
.stepbox3-box[data-align=center]:before {left: 50%; }
.stepbox3-box[data-align=center]:after {border-top-color: #fff;}
.stepbox3-number { padding: 0;height: 100%; position:relative; width: 100%; left: 0;top: 0; bottom: 0;  text-align: center; float:left;}
.stepbox3-number-sp { font-size:100px; font-weight:900; color: #333; vertical-align: middle; position: relative; top: 50%; line-height: 1; display: block; }
.stepbox3-content {padding: 25px 35px 20px 35px; float:left; font-size: 14px; line-height: 30px; color: #929292; background-color: #fff }
.stepbox3-title {  font-size: 14px; text-transform: uppercase; font-weight: bold; color: #333; }
.stepbox3-box[data-align=right] .stepbox3-number {left:auto; right:0; border-right:0; }
.stepbox3-box[data-align=right] .stepbox3-content {margin-left:auto; padding: 25px 35px 20px 35px; color: #929292; line-height: 30px; font-size: 14px; }
.stepsbox3--dark .stepbox3-box:after { border-top-color: #111;}
.stepsbox3--dark .stepbox3-box:before { border-top-color: #343434;}
.stepsbox3--dark .stepbox3-box[data-align=center]:after {border-top-color: #000;}
.stepsbox3--dark .stepbox3-content { color: #6D6D6D; background-color: #000 }
.stepsbox3--dark .stepbox3-title { color: #CCCCCC; }

@media (min-width: 992px) {
	.stepbox3-number {width: 240px; position: absolute;}
	.stepbox3-number-sp { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
	.stepbox3-content {margin-left: 240px;}
	.stepbox3-content:before,
	.stepbox3-content:after { -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
	.stepbox3-content:before { position: absolute; content: ''; top: 0; width: 2px; height: 100%; background-color: #cd2122; }
	.stepbox3-box:hover .stepbox3-content:before { width: 5px; }
	.stepbox3-box[data-align=right] .stepbox3-content { text-align: right; margin-left:auto; margin-right:240px;}
	.stepbox3-box[data-align=left] .stepbox3-content:before {  left: 240px; }
	.stepbox3-box[data-align=right] .stepbox3-content:before { right: 240px; }
	.stepbox3-content:after { position: absolute; content: ''; border: 14px solid; border-color: transparent; top: 50%; margin-top: -14px; }
	.stepbox3-box[data-align=left] .stepbox3-content:after { left: 242px; border-left-color: #cd2122; }
	.stepbox3-box[data-align=right] .stepbox3-content:after { right: 242px; border-right-color: #cd2122; }
	.stepbox3-box[data-align=left]:hover .stepbox3-content:after { left: 245px; }
	.stepbox3-box[data-align=right]:hover .stepbox3-content:after { right: 245px; }
	.stepbox3-box:after,
	.stepbox3-number:before,
	.stepbox3-number:after { background-color: #F1F1F1 !important; }
	.stepbox3-box:after { position: absolute; content: ''; width: calc(100% - 234px); height: 6px; bottom: -43px; }
	.stepbox3-box[data-align=left]:after { left: 130px; }
	.stepbox3-box[data-align=right]:after { right: 114px; }
	.stepbox3-number:before,
	.stepbox3-number:after { position: absolute; content: ''; width: 6px; height: 50px; }
	.stepbox3-number:before { top: -37px; }
	.stepbox3-number:after { bottom: -37px; }
	.stepbox3-box:first-child .stepbox3-number:before,
	.stepbox3-box.last .stepbox3-number:after,
	.stepbox3-box.last:after { content: none; }
    .stepbox3-box.last { margin-bottom: 0 }
    .stepsbox3--dark .stepbox3-box:after,
	.stepsbox3--dark .stepbox3-number:before,
	.stepsbox3--dark .stepbox3-number:after { background-color: #0E0E0E !important; }
}