.n0,
.n1 {
	position: relative;
	width: 90%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 5px;
	border-radius: 6px;
	border: 2px solid #999;
	box-shadow: 1px 1px 5px #aaa;
	background-color: #fff;
	z-index: 1;
}
.res_sh1 .n0 {
	margin: 20px 0% 40px 0;
	background-color: lavender;
}
.res_sh2 .n0 {
	margin: 20px 0 40px 9%;
	background-color: lavender;
}
.res_sh3 .n0 {
	margin: 20px 0 40px 9%;
	background-color: lavender;
}
.res_sh4 .n0 {
	margin: 20px 0 40px 9%;
	background-color: lavender;
}
.res_sh5 .n0 {
	margin: 20px 0 40px 9%;
	background-color: lavender;
}
.res_sh6 .n0 {
	margin: 20px 0 40px 9%;
	background-color: lavender;
}
.res_sh7 .n0 {
	margin: 20px 0 40px 9%;
	background-color: lavender;
}
.res_sh8 .n0 {
	margin: 20px 0 40px 9%;
	background-color: lavender;
}
.res_sh9 .n0 {
	margin: 20px 0 40px 9%;
	background-color: lavender;
}
.res_sh10 .n0 {
	margin: 20px 0 40px 9%;
	background-color: lavender;
}

.res_sh1 .n1 {
	margin: 20px 20% 40px 0;
}

.res_sh2 .n1  {
	margin: 20px 0 40px 9%;
	background-color: snow;
}
.res_sh3 .n1  {
	margin: 20px 0 40px 9%;
	background-color: floralwhite;
}
.res_sh4 .n1  {
	margin: 20px 0 40px 9%;
	background-color: antiquewhite;
}
.res_sh5 .n1  {
	margin: 20px 0 40px 9%;
	background-color: papayawhip;
}
.res_sh6 .n1  {
	margin: 20px 0 40px 9%;
	background-color: blanchedalmond;
}
.res_sh7 .n1  {
	margin: 20px 0 40px 9%;
	background-color: navajowhite;
}
.res_sh8 .n1  {
	margin: 20px 0 40px 9%;
	background-color: peachpuff;
}
.res_sh9 .n1  {
	margin: 20px 0 40px 9%;
	background-color: sandybrown;
}
.res_sh10 .n1  {
	margin: 20px 0 40px 9%;
	background-color: orange;
}

.n0::before,
.n1::before {
	position: absolute;
	content: "";
	top: 16px;
	width: 10px;
	height: 10px;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	background-color: #fff;
	z-index: 2;
}
.res_sh1 .n0::before {
	right: -7px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	background-color: lavender;
}
.res_sh2 .n0::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: lavender;
}
.res_sh3 .n0::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: lavender;
}
.res_sh4 .n0::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: lavender;
}
.res_sh5 .n0::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: lavender;
}
.res_sh6 .n0::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: lavender;
}
.res_sh7 .n0::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: lavender;
}
.res_sh8 .n0::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: lavender;
}
.res_sh9 .n0::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: lavender;
}
.res_sh10 .n0::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: lavender;
}

.res_sh1 .n1::before {
	right: -7px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);

}

.res_sh2 .n1::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: snow;
}
.res_sh3 .n1::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: floralwhite;
}
.res_sh4 .n1::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: antiquewhite;
}
.res_sh5 .n1::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: papayawhip;
}
.res_sh6 .n1::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: blanchedalmond;
}
.res_sh7 .n1::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: navajowhite;
}
.res_sh8 .n1::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: peachpuff;
}
.res_sh9 .n1::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: sandybrown;
}
.res_sh10 .n1::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	background-color: orange;
}


.res_sh1 ::after {
	right: -110px;
}
.res_sh2 ::after ,
.res_sh3 ::after ,
.res_sh4 ::after ,
.res_sh5 ::after ,
.res_sh6 ::after ,
.res_sh7 ::after ,
.res_sh8 ::after ,
.res_sh9 ::after ,
.res_sh10 ::after  {
	left: -110px;
}
@media screen and (max-width: 620px) {
	.n0,
	.n1 {
		width: 95%
	}
	.res_sh1 {
		margin-right: 3%;
	}
	.res_sh2 ,
	.res_sh3 ,
	.res_sh4 ,
	.res_sh5 ,
	.res_sh6 ,
	.res_sh7 ,
	.res_sh8 ,
	.res_sh9 ,
	.res_sh10 {
		margin-left: 3%;
	}
}
@media screen and (max-width: 478px) {
	.n0::after ,
	.n1::after {
		width: 3px;
		height: 3px;
		border-radius: 30px;
	}
	.res_sh1::after {
		right: -84px;
	}
	.res_sh2 ::after ,
	.res_sh3 ::after ,
	.res_sh4 ::after ,
	.res_sh5 ::after ,
	.res_sh6 ::after ,
	.res_sh7 ::after ,
	.res_sh8 ::after ,
	.res_sh9 ::after ,
	.res_sh10::after {
		left: -84px;
	}
}