.nothing-new-examples {
	padding: 2em;
	background-color: #3a3a3a;
	position: relative;
}

.nothing-new-examples p {
	font-size: 16px;
	width: 125px;
	text-align: center;
	margin: 0;
	height: 25px;
	line-height: 25px;
}

.nothing-new-examples > div {
	display: flex;
	justify-content: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
	width: 200px;
	height: 200px;
	margin: 10vh 1em 35vh;
	background-color: red;
}

.nothing-new-examples > div > span {
	font-size: 16px;
	display: block;
	width: 25px;
	box-shadow: inset 0 0 1px;
	height: 25px;
	line-height: 25px;
}

.nothing-new-examples > .p-static {
	background-color: #BAA30B;
}
.nothing-new-examples > .p-static > p {
	background-color: #695C00;
	color: #fff;
}

.nothing-new-examples > .p-relative {
	background-color: #14327D;
}

.nothing-new-examples > .p-relative > p {
	background-color: #071A47;
	color: #fff;
	position: relative;
	top: 2em;
	left: 2em;
}


.nothing-new-examples > .p-absolute {
	background-color: #38137F;
}

.nothing-new-examples > .p-absolute > p {
	background-color: #1D0748;
	color: #fff;
	position: absolute;
	top: 15vh;
	right: 35vw;
}

.nothing-new-examples > .p-fixed {
	background-color: #43A30A;
}

.nothing-new-examples > .p-fixed > p {
	background-color: #225C00;
	color: #fff;
	position: fixed;
	top: 4vh;
	right: 4vh;
}

/*
	sticky colors
	#AC0A2D
	#610015
*/

.position-fixed-example,
.position-absolute-example,
.position-static-example,
.position-sticky-example,
.playground-example {
	padding: 1em;
	background-color: #3a3a3a;
}

.absolute-row,
.fixed-row,
.static-row,
.sticky-row,
.relative-row {
	transition: all .5s ease;
	transition-delay: .2s;
	padding: 1em .5em;
	border: 1px solid;
}



.static-row {
	background-color: #BAA30B;
}


.position-relative-example {
	padding: 1em;
	background-color: #3a3a3a;
}

.relative-row {
	background-color: #14327D;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.absolute-row {
	background-color: #38137F;
	position: absolute;
}


.fixed-row {
	background-color: #43A30A;
	position: fixed;
}

.sticky-row {
	position: sticky;
	background-color: #AC0A2D;
}

.setting-stacking-context-decoration {
	transition: all .3s ease;
	bottom: 0;
}

.playground-example {
	position: relative;
}

.playground-example::before {
	content : ' ';
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 1px;
	background-color: black;
	z-index: 2;
}

.s1,
.s2 {
	flex: 1;
	max-width: 50%;
	min-width: 50%;
}

.s1 p,
.s2 p {
  height: 200px;
  width: 200px;
  text-align: center;
  line-height: 200px;
}

.s1 {
	background-color: hsl(20, 22%, 60%);
}

.s2 {
	background-color: hsla(14, 39%, 50%, 1);
}

.s1::before {
	content: 's1';
	position: absolute;
	left: 1em;
	top: 50%;
}

.s2::before {
	content: 's2';
	position: absolute;
	right: 1em;
	top: 50%;
}

.s1 p:first-child {
  background-color: hsla(74, 42%, 60%, 1);
}
.s1 p:last-child {
  background-color: hsla(64, 12%, 60%, 1);
}

.s2 p:first-child {
  background-color: hsla(134, 32%, 60%, 1);
}

.s2 p:last-child {
  background-color: hsla(164, 42%, 60%, 1);
}


.s1_1 {
  margin-left: calc(100% - 150px);
}

.s1_2 {
  margin-left: calc(100% - 150px);
  margin-top: 75px;
}


.s2_1 {
  margin-left: -50px;
  margin-top: 150px;
}

.s2_2 {
  margin-left: -50px;
  margin-top: 50px;
}

.s1_2_1 {
  opacity: .95;
  float: left;

  margin-right: -225px;
  margin-left: 25px;
  margin-top: -25px;
  line-height: 50px;
  width: 125px;
  height: 50px;
  background-color: hsla(54, 2%, 60%, 1);

}