@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');

.contentWrapper{
	max-width: 730px;
}
.STACgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	text-align: center;
	width: 100%;
	max-width: 730px;
}
.STACgrid .contWrapper{
	width: 190px;
	height: 120px;
	padding: 15px 30px;
	border-radius: 50%;
	background-color: #fcc000;
	display: table-cell;
	vertical-align: middle;
	z-index: 2;
	position: relative;
}
.STACgrid p{
	font-family: 'Lato', sans-serif;
	font-size: 1em;
}

.Row1Col1 {
	grid-area: 1 / 1 / 2 / 2;
	margin: 20px;
	justify-self: center;
}
.Row1Col2 {
	grid-area: 1 / 2 / 2 / 3;
	margin: 20px;
	justify-self: center;
	position: relative;
	z-index: 2;
}
.Row1Col2::after{
	position: absolute;
	content: '';
	width: 6px;
	height: 100%;
	border-left:6px solid #000;
	bottom: -50%;
	z-index: 0;
}
.Row1Col3 {
	grid-area: 1 / 3 / 2 / 4;
	margin: 20px;
	justify-self: center;
}
.Row2Col1 {
	grid-area: 2 / 1 / 3 / 2;
	margin: 20px;
	justify-self: center;
	position: relative;
	z-index: 4;
}
.Row2Col1::after{
	position: absolute;
	content: '';
	width: 6px;
	height: 150px;
	border-left:6px solid #000;
	bottom: -50%;
	z-index: 0;
}

.Row2Col2 {
	grid-area: 2 / 2 / 3 / 3;
	margin: 20px;
	justify-self: center;
	position: relative;
	z-index: 3;
}
.Row2Col2::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 6px;
	border-top:6px solid #000;
	top: 45%;
	left: -100%;
	z-index: 0;
}
.Row2Col2::after{
	position: absolute;
	content: '';
	width: 100%;
	height: 6px;
	border-top:6px dotted #000;
	top: 45%;
	right: -99%;
	z-index: 0;
}

.Row2Col3 {
	grid-area: 2 / 3 / 3 / 4;
	margin: 20px;
	justify-self: center;
	position: relative;
	z-index: 3;
}
.Row2Col3::after{
	position: absolute;
	content: '';
	width: 6px;
	height: 150px;
	border-left:6px solid #000;
	bottom: -50%;
	z-index: 0;
}

.Row3Col1 {
	grid-area: 3 / 1 / 4 / 2;
	margin: 20px;
	justify-self: center;
	position: relative;
	z-index: 4;
}
/*.Row3Col2::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 6px;
	border-top:6px dotted #000;
	left: -50%;
	bottom: 100%;
	z-index: 0;
	transform: rotate(-40deg);
}*/
.Row3Col2 {
	grid-area: 3 / 2 / 4 / 3;
	margin: 20px;
	justify-self: center;
	position: relative;
	z-index: 2;
	width: 100%;
}
.Row3Col2::after{
	position: absolute;
	content: '';
	width: 100%;
	height: 6px;
	border-top:6px dotted #000;
	right: -50%;
	bottom: 100%;
	z-index: 0;
	transform: rotate(40deg);
}
.Row3Col3 {
	grid-area: 3 / 3 / 4 / 4;
	margin: 20px;
	justify-self: center;
	position: relative;
	z-index: 4;
}

.STACkey{
	width: auto;
	float: right;
}
.STACkey p{
	font-weight: 700;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	position: relative;
	display: block;
	margin-bottom: 0px;
}
.STACkey .hardLine{
	content: '';
	width: 50px;
	height: 6px;
	border-top: 6px solid #000;
	display: inline-block;
	margin-right: 10px;
	position: relative;
	top: 4px;
}
.STACkey .dottedLine{
	content: '';
	width: 50px;
	height: 6px;
	border-top: 6px dotted #000;
	display: inline-block;
	margin-right: 10px;
	position: relative;
	top: 4px;
}


@media (max-width: 600px){
	.STACgrid{max-width: none;}
	.STACgrid .contWrapper{width: 140px; background-color: #FFF; padding: 10px;
	border-radius: 0; font-size: 16px;}
}
@media (max-width: 470px){
	.STACgrid .contWrapper{width: 100px; height: 90px; background-color: #FFF; padding: 10px;
	border-radius: 0; font-size: 14px;}
	.Row1Col1, .Row1Col2, .Row1Col3, .Row2Col1, .Row2Col2, .Row2Col3, .Row3Col1, .Row3Col2, .Row3Col3{margin: 10px;}
	.STACgrid p{margin: 0;}
}
@media (max-width: 390px){
	.STACgrid .contWrapper{font-size: 12px; padding: 5px; height: 70px;}
	.Row1Col2::after{border-left: 3px solid #000;}
	.Row2Col2::before{border-top: 3px solid #000;}
	.Row2Col2::after{border-top: 3px dotted #000;}
	.Row2Col1::after{border-left: 3px solid #000; height: 100px;}
	.Row2Col3::after{border-left:3px solid #000; height: 100px;}
	.Row3Col2::before, .Row3Col2::after{border-top:3px dotted #000;}
}