/* Flexbox Part 1 */

#flex-section1 ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0 40px;
}

/* end Flexbox Part 1 */


/* Flexbox Part 2 */

#flex-section2 ul {
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	padding: 0;
}

#flex-section2 li {
	flex: 1 1 0;
}

#flex-section2 .item1 {
	order: 0;
}

#flex-section2 .item2 {
	order: 2;
}

#flex-section2 .item3 {
	order: 1;
}

/* end Flexbox Part 2 */


/* Flexbox Part 3 */

#flex-section3 .box {
	align-items: center;
	display: flex;
	justify-content: center;
}

#flex-section3 .tags ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* end Flexbox Part 3 */


/* Grid Part 1 */

#grid-section1 .grid {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(4,1fr);
	height: 220px;
}

/* end Grid Part 1 */


/* Grid Part 2 */

#grid-section2 .gridboxblue {
	grid-column: 2 / 4;
	grid-row: 1 / 4;
	position: relative;
}

#grid-section2 .gridboxred {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}

/* end Grid Part 2 */


/* Grid Part 3 */

#grid-section3 .grid {
	display: grid;
	grid-template-columns: 3fr 1fr;
	grid-template-rows: 1fr 3fr 1fr;
	height: 520px;
	grid-gap: 10px;
}

#grid-section3 .box1 {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

#grid-section3 .box2 {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

#grid-section3 .box3 {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

#grid-section3 .box4 {
	grid-column: 1 / 3;
	grid-row: 3 / 4;
}

/* end Grid Part 3 */


/* Transition Part */

#transition-section .box a {
	display: inline-block;
	background-color: #ccc;
	color: #000;
	padding: 20px;
	text-decoration: none;
	transition: color .3s, background-color .3s;
}

#transition-section .box a:hover {
	background-color: #cc0000;
	color: #fff;
	transition: color .5s, background-color .5s;
}

/* end Transition Part */