@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400';


.ofb-game-content {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
list-style: none;
}

.ofb-game-content {
	line-height: 1;
}

#Perkins_explain {
width: 800px;
height: 600px;
margin: 0 auto;
}
body {
	-webkit-text-size-adjust: none;
}


/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	.ofb-game-content {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {

		html, .ofb-game-content {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}



/* Type */

	.ofb-game-content {
        padding: 15px;
		background-color: #3e3e3e;
		color: rgba(255, 255, 255, 0.65);
	}

	.ofb-game-content, input, select, textarea {
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 17pt;
		font-weight: 300;
		line-height: 1.65;
	}


	p {
		margin: 0 0 2em 0;
	}

	h1, h2 {
		font-weight: 300;
		line-height: 1.5;
		margin: 0 0 0.7em 0;
		letter-spacing: -0.025em;
	}


	h1 {
		font-size: 4em;
		line-height: 1.2;
        font-weight: 600;
	}

	h2 {
		font-size: 1.25em;
        margin-top: 1.5rem;
	}


	@media screen and (max-width: 736px) {

		h1 {
			font-size: 2em;
		}

	}

	h1, h2, h3, h4, h5, h6 {
		color: #ffffff;
	}


/* Button */


	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		border-radius: 8px;
		border: 0;
		cursor: pointer;
		display: inline-block;
		font-weight: 300;
		height: 2.75em;
		line-height: 2.75em;
		min-width: 9.25em;
		padding: 0 1.5em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

	.button {
		background-color: transparent;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
		color: #ffffff !important;
		font-weight: 500;
	}

		.button:hover {
			/* background-color: rgba(88, 188, 255, 0.075); */
			background-color: #f8f8f8dc;
			color: #000 !important;

		}


		.button:active {
			background-color: rgba(255, 255, 255, 0.2);
		}


/* Section/Article */

	.ofb-main-three{
		text-align: center;
	}

	.ofb-game-title {
		margin-bottom: 6em;
	}

.ofb-learn-button {
    padding: 0;
}
.ofb-learn-button li {
    margin: 0 auto;
}

		.ofb-game-title h2 {
			font-size: 2em;
		}

	

		.ofb-game-title p {
			font-size: 1.25em;
			letter-spacing: -0.025em;
		}

		.ofb-game-title {
			text-align: center;
		}

	.ofb-game-title {
		margin-top: 3em;
	}

	@media screen and (max-width: 736px) {

		.ofb-game-title {
			margin-bottom: 0;
		}

			.ofb-game-title h2 {
				font-size: 1.5em;
			}

			.ofb-game-title p {
				font-size: 1em;
				letter-spacing: 0;
			}

				.ofb-game-title p br {
					display: none;
				}

		.ofb-game-title {
			margin-top: 0;
		}

	}

/* Features */

	.ofb-features {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		width: calc(100% + 2em);
		margin: 0 0 3em -2em;
		padding: 0;
		list-style: none;
	}

		.ofb-features li {
			width: calc(33.33333% - 2em);
			margin-left: 2em;
			margin-top: 3em;
			padding: 0;
/*            margin-bottom: 2rem;*/
		}

			.ofb-features li:nth-child(1), .ofb-features li:nth-child(2), .ofb-features li:nth-child(3) {
				margin-top: 0;
			}

			.ofb-features li > :last-child {
				margin-bottom: 0;
				font-size: 1.2rem;
			}
			.ofb-features li img {
				margin-bottom: 19px;
				border-radius: 10px;
				box-shadow: 7px 7px 1px 2px rgb(148, 148, 148);
			}

		@media screen and (max-width: 980px) {

			.ofb-features li {
				width: calc(50% - 2em);
			}

				.ofb-features li:nth-child(3) {
					margin-top: 3em;
				}

		}

		@media screen and (max-width: 736px) {

			.ofb-features {
				width: 100%;
				margin: 0 0 2em 0;
			}

				.ofb-features li {
					width: 100%;
					margin-left: 0;
					margin-top: 2em;
				}

					.ofb-features li:nth-child(2), .ofb-features li:nth-child(3) {
						margin-top: 2em;
					}

		}



/* Wrapper */

#wrapper {
    max-width: 1000px;
    margin: 0 auto;
}
	
		@media screen and (max-width: 480px) {

			#wrapper {
				max-width: calc(100% - 2em);
			}
            h1 {
                font-size: 2rem;
            }

		}

		@media screen and (max-width: 360px) {

			#wrapper {
				max-width: 100%;
			}

		}