@charset "UTF-8";

/* **************************************************
Name: procurement-social-boxflow.css
***************************************************** */
.BoxFlow{
	display:flex;
	flex-wrap: nowrap;
	justify-content: center;
}
.BoxFlow li {
	font-weight:bold;
	font-size:100%;
	text-align:center;
	padding:15px;
	line-height: 1.5;
	word-wrap:break-word;
	position: relative;
	z-index: 0;
	clear: both;
	min-height:2em;
	box-sizing:border-box;
}
.BoxFlow li:not(:last-child):after {
	content: "";
	position: absolute;
	display: block;
	border-style: solid;
}
.BoxFlow{
	margin-bottom:15px;
}
.BoxFlow li span{
	display:block;
	margin:auto;
	width:calc(100% - 30px);
	padding:15px 0;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-shadow:none !important;
}
.BoxFlow li{
	border-radius:5px;
	font-size:75%;
	width:calc(100% - 10px - 3em*4 - 15em - 9em*3);
	background: #f2f2f2;
	border: 1px solid #ffcbcf;
	color:#000;
	background-color:#ffcbcf;
	min-height:calc(4em + 10px);
}
.BoxFlow li:not(:last-child) {
	margin-right:3em;
}
/*
.BoxFlow li:nth-child(1){
	min-width:19em;
}
.BoxFlow li:nth-child(2){
	width:15em;
	min-width:10em;
}
.BoxFlow li:nth-child(3),
.BoxFlow li:nth-child(4){
	width:9em;
	min-width:8em;
}
.BoxFlow li:nth-child(5){
	width:9em;
	min-width:9em;
}
*/
.BoxFlow li:after {
	top: 50%;
	margin-top: -1.5em;
	border-width: 1.5em 0 1.5em 1.5em;
	right: calc(-1.5em - 10px);
	z-index: -1;
	border-color: transparent transparent transparent #000;
}

@media screen and (min-width: 995px) and (max-width: 1304px){
	.BoxFlow li{
		min-height:6em;
	}
}
@media screen and (min-width: 995px) {
	.BoxFlow li:first-child {
	 width:70%;
	}
}
@media screen and (max-width: 994px) {
	.BoxFlow{
		flex-wrap:wrap;
		justify-content: flex-start;
	}
	.BoxFlow li{
		font-size:90%;
		width:80% !important;
		margin-left:auto;
		margin-right:auto;
		min-height:4em;
	}
	.BoxFlow li:not(:last-child){
		margin-right:auto;
		margin-bottom:3em;
	}
	.BoxFlow li:after{
		margin-top:initial;
		top:initial;
		left: 50%;
		margin-left: -1.5em;
		border-width: 1.5em 1.5em 0 1.5em;
		right: auto;
		bottom: calc(-1.5em - 15px);
		border-color: #000 transparent transparent transparent;
	}
}
@media screen and (max-width: 399px) {
	.BoxFlow li:nth-child(1){
		min-width:auto;
	}
}