div {
	margin:0;
	padding:0;
}

.examples {
	display:block;
	width:100%;
	height:100%;
	padding-top:80px;
}

.examples-container {
	display: grid;
	grid:
	'item1 item2 item3'
	'item4 item5 item6';
	grid-gap: 0;
	padding: 0 2%;
	height:80vh;
}

.item1 {
	grid-area: item1;
}
.item2 {
	grid-area: item2;
}
.item3 {
	grid-area: item3;
}
.item4 {
	grid-area: item4;
}
.item5 {
	grid-area: item5;
}
.item6 {
	grid-area: item6;
}

.item1 .innerContainer .flip-box .flip-box-inner .flip-box-front, .item1 .innerContainer .flip-box .flip-box-inner .flip-box-back {
	background-color:#432580;
	color:white;
	border-radius: 25px;
}
.item2 .innerContainer .flip-box .flip-box-inner .flip-box-front, .item2 .innerContainer .flip-box .flip-box-inner .flip-box-back {
	background-color:#7cc242;
	color:white;
	border-radius: 25px;
}
.item3 .innerContainer .flip-box .flip-box-inner .flip-box-front, .item3 .innerContainer .flip-box .flip-box-inner .flip-box-back {
	background-color:#fdbf57;
	color:white;
	border-radius: 25px;
}
.item4 .innerContainer .flip-box .flip-box-inner .flip-box-front, .item4 .innerContainer .flip-box .flip-box-inner .flip-box-back {
	background-color:#ed1b2e;
	color:white;
	border-radius: 25px;
}
.item5 .innerContainer .flip-box .flip-box-inner .flip-box-front, .item5 .innerContainer .flip-box .flip-box-inner .flip-box-back {
	background-color:#432580;
	color:white;
	border-radius: 25px;
}
.item6 .innerContainer .flip-box .flip-box-inner .flip-box-front, .item6 .innerContainer .flip-box .flip-box-inner .flip-box-back {
	background-color:#7cc242;
	color:white;
	border-radius: 25px;
}

.flip-box-back {
	padding: 2em;
}

._odd, ._even {
	display:inline-block;
	height:42vh;
	text-align: center;
	padding: 10px;
	font-size: 30px;
	border:1px dotted white;
	overflow:hidden;
	border-radius: 25px;
}

.innerContainer {
	display:block;
	width:100%;
	height:100%;
	padding:10px;
}

._odd .innerContainer {
	background-color: rgba(255, 255, 255, 1);
	border:1px solid black;
	border-radius: 25px;
}

._even .innerContainer {
	background-color: rgba(255, 255, 255, 1);
	border:1px solid black;
	border-radius: 25px;
}
.flip-box {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {
	background-color: rgba(255, 255, 255, 1);
	color: black;
	text-align:center;
}
.flip-box-front:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
/* Style the back side */
.flip-box-back {
	background-color: rgba(255, 255, 255, 1);
	color: black;
	transform: rotateY(180deg);
	text-align:center;
}
.flip-box-back:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.iHeader {
	display: inline-block;
	vertical-align: middle;
	font-family: 'Roboto Black', sans-serif;
	font-size:24pt;
	width:100%;
}
.iText {
	display: inline-block;
	vertical-align: middle;
    font-family: 'Roboto Bold', sans-serif;
	font-size:16pt;
	width:100%;
}
@media (max-width: 1800px) {
	.iHeader {
		font-size:16pt;
	}
	.iText {
		font-size:16pt;
	}
}
@media (max-width: 1600px) {
	.iHeader {
		font-size:15pt;
	}
	.iText {
		font-size:15pt;
	}
}
@media (max-width: 1420px) {
	.iHeader {
		font-size:14pt;
	}
	.iText {
		font-size:14pt;
	}
}

@media (max-width: 1280px) {
	.iHeader {
		font-size:13pt;
	}
	.iText {
		font-size:13pt;
	}
	
}
@media (max-width: 1080px) {
	.iHeader {
		font-size:12pt;
	}
	.iText {
		font-size:12pt;
	}
	.examples-container {
		display: grid;
		grid:
		'item1 item2
		'item3 item4'
		'item5 item6';
		grid-gap: 0;
		padding: 0 2%;
		height:80vh;
	}
}

@media (max-height: 1100px) {
	.iHeader {
		font-size:20pt;
	}
	.iText {
		font-size:14pt;
	}

}

@media (max-height: 850px) {
	.iHeader {
		font-size:18pt;
	}
	.iText {
		font-size:12pt;
	}

}

@media only screen and (max-width:900px) {
	.iHeader {
		font-size:16pt;
	}
	.iText {
		font-size:12pt;
	}
	.examples-container {
		display: grid;
		grid:
		'item1'
		'item2'
		'item3'
		'item4'
		'item5'
		'item6';
		grid-gap: 0;
		padding: 0 2%;
		height:80vh;
	}
}