@font-face {
	font-family: "BebasNeue Bold";
	src: url("fonts/BebasNeue Bold.otf");
}
@font-face {
	font-family: "BebasNeue Book";
	src: url("fonts/BebasNeue Book.otf");
}
@font-face {
	font-family: "Cabin Regular";
	src: url("fonts/Cabin-Regular.otf");
}
@font-face {
	font-family: "Cabin Italic";
	src: url("fonts/Cabin-Italic.otf");
}

body {
	margin: 0px;
}

#header, #footer {
	display: flex;
    flex-wrap: wrap;
	align-items: center;
    justify-content: space-between;
	
	background: black;
	
	padding: 20px 20px;
}

#footer {
	padding: 10px 20px;
}

#header .logo, #footer .logo {
	padding-right: 20px;
}

#header div {
    display: inline-flex;
    align-items: center;
}

.title-colour {
	font-family: 'BebasNeue Book', Arial, sans-serif;
	font-size: 48px;
	font-weight: 600;
	color: #FF9000;
}

.title-white {
	font-family: 'BebasNeue Book', Arial, sans-serif;
	font-size: 48px;
	color: white;
}

.social-bar {
	flex-grow: 1;
	display: inline-flex;
	align-items: center;
    padding: 10px 0px;
    justify-content: flex-end;
}

.socialmedia-btn {
	background-repeat: no-repeat;
	background-position: center;
    width: 40px;
    height: 40px;
	padding: 0px 10px;
}

.divider {
	border-left: solid 1px #FF9000;
	padding-left: 20px;
	margin-left: 20px;
	height: 40px;
}

.txt-link {
	font-family: 'BebasNeue Book', Arial, sans-serif;
	color: white;
	text-decoration: none;
}

.txt-link:hover {
	color: #FF9000;
}

.pad {
	padding-left: 10px;
}

.socialmedia-btn-twitter {
	background-image: url("images/TwitterIcon.png");
}
.socialmedia-btn-facebook {
	background-image: url("images/FacebookIcon.png");
}
.socialmedia-btn-youtube {
	background-image: url("images/YouTubeIcon.png");
	
	width: 50px;
}

.socialmedia-btn-twitter:hover {
	background-image: url("images/TwitterIconHover.png");
}
.socialmedia-btn-facebook:hover {
	background-image: url("images/FacebookIconHover.png");
}
.socialmedia-btn-youtube:hover {
	background-image: url("images/YouTubeIconHover.png");
	
	width: 50px;
}

.game {	
    position: relative;
	
	background: black;
    background-position: center; 
    background-repeat: no-repeat;
}

.game-savageslopes {
	background-image: url("images/SavageSlopesScreenshot.png");
}
.game-discstorm {
	background-image: url("images/DiscStormScreenshot.png");
}
.game-outofoffice {	
	background-image: url("images/OutOfOfficeScreenshot.png");
}

.character-popup {
	position: absolute;
	pointer-events: none;
    height: 100%;
    width: 100%;
}

.character-popup img {	
	position: absolute;
	bottom: 0px;
	
    height: calc(100% - 10px);
    max-height: 462px;
}

.game-outofoffice .character-popup img, .game-savageslopes .character-popup img {
	right: 10px;
    max-height: 454px;
}

.game-info-wrapper {
	padding: 30px;
}

.game-info {
	padding: 30px;
	max-width: 30%;
	
	background: rgba(0, 0, 0, 0.8);
	color: white;
}

.game-discstorm .game-info {
    margin-left: auto;
    margin-right: 20px;
}

.game-name {
	font-family: 'BebasNeue Bold', Arial, sans-serif;
	font-size: 40px;
}

.game-blurb {
	font-family: 'Cabin Italic', Arial, sans-serif;
	font-size: 14px;
	padding-top: 5px;
}

.game-desc {
	font-family: 'Cabin Regular', Arial, sans-serif;
	font-size: 18px;
	padding: 10px 0px;
}

.game-action, .game-trailer {
	font-family: 'Cabin Regular', Arial, sans-serif;
	
	display: inline-block;
	
	color: white;
	text-decoration: none;
	padding: 20px;
	opacity: 1;
}

.button-row {
	display: flex;
	padding-top: 10px;
	align-content: center;
}

.button-row a {
	display:inline-flex;
	align-items: center;
}

.button-row a img {
	padding-right: 10px;
}

.game-action {
	background: #FF9000;
	margin-right: 20px;
}

.game-trailer {
	display: inline-block;
	background: black;
}

.bottom-row {
	padding: 20px;
}

.bottom-title {
	font-family: 'BebasNeue Bold', Arial, sans-serif;
	font-size: 40px;
	color: #FF9000;
}

.bottom-content {
	font-family: 'Cabin Regular', Arial, sans-serif;
	font-size: 20px;
}

#email {
	width: 50%;
}
#mce-EMAIL {
	width: 100%;
}

#email, #submit {
    display: inline-block;
}

#mce-EMAIL, #mc-embedded-subscribe {
	font-family: 'Cabin Regular', Arial, sans-serif;
	font-size: 20px;
    padding: 10px;
    height: 50px;
}

#mc-embedded-subscribe {
	background: #FF9000;
	margin-right: 20px;
    color: inherit;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

#team-area {
	display: flex;
	background: #EBEBEB;
    padding: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

#team-area .team-member {
    display: inline-flex;
    justify-content: center;
    padding: 10px;
}

.team-member-pixel {
	padding-right: 20px;
}

.team-member-name {
	font-family: 'BebasNeue Bold', Arial, sans-serif;
	font-size: 30px;
	color: #FF9000;
}

.team-member-job {
	font-family: 'Cabin Regular', Arial, sans-serif;
	font-size: 16px;
	padding: 5px 0px;
}

.team-member-twitter {
	font-family: 'Cabin Regular', Arial, sans-serif;
	font-size: 16px;
}

@media (max-width: 1024px) {
	.character-popup {
		display: none;
	}
	
	.game-info {
		max-width: 90%;	
	}	
}

@media (min-width: 1025px) {
	.bottom-row {
		display: flex;
	}
		
	.bottom-section {
		width: 50%;
		padding:0px 20px;
	}
}