/******************************* 
GENERAL
*******************************/

@font-face {
	font-family: "PressStart";
	src:url(../fonts/prstart.ttf);
}
@font-face {
	font-family: "BeneScriptine";
	src:url(../fonts/BeneScriptineRegular.ttf);
}
@font-face {
	font-family: "TolkienRegular";
	src:url(../fonts/TolkienRegular.ttf);
}
body {
	background-color: #e5d7cf;
	font-family: PressStart, Garamond, Arial, sans-serif;
	font-size: 1.111em;
	color: #000;
	line-height: 1.8em;
}
.wrapper {
	width: 70%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wrapper-games {
	width: 65%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wrapper-contact {
	width: 65%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.clear {
	display: block;
	clear: both;
}
h1 {
	font-family: BeneScriptine, Garramond, Arial, sans-serif;
	font-size: 3.2em;
	color: #464646;
	margin-bottom: 2.5vw;
}
h2 {
	color: #FFF;
	font-size: 1.2em;
	padding-bottom: 5vh;
}
h3 {
	font-family: Garamond, Arial, sans-serif;
	color: #464646;
	font-size: 1.9em;
	text-align: left;
	margin-bottom: 2vh;
}
p {
	font-family: Garamond, Arial, sans-serif;
	font-size: 1.4em;
	line-height: 1.4em;
	text-align: left;
}
.stroke {
    text-shadow:
    -0.08em -0.08em 0 #000,
    0.08em -0.08em 0 #000,
    -0.08em 0.08em 0 #000,
    0.08em 0.08em 0 #000;
}
a:link, a:visited, a:active, a:hover, a:focus { color: #0011FF; text-decoration: underline;
}
.division {
	display: block;
	width: 90%;
	margin: 2vw auto 2vw auto;
}
.marioerror {
	float: left;
}

/******************************* 
PRELOAD
*******************************/

#preload01 { 
	background: url(../images/title2.png) no-repeat -9999px -9999px;
}
#preload02 { 
	background: url(../images/logo2.png) no-repeat -9999px -9999px;
}
#preload03 { 
	background: url(../images/division2.png) no-repeat -9999px -9999px;
}

/******************************* 
TITLE
*******************************/

header {
	position: relative;
	height: 60vh; /* Header takes up 60% of vertical space regardless of window size */
	max-width: 100%;
	background-color:#e5d7cf;
}
#title-position {
	z-index: 9999;
	position: absolute;
	left: 0px;
	right: 0px;
	text-align: center;
}
#title {
	max-width: 100vw;
    height: 20vh;
}	

/******************************* 
VIDEO
*******************************/

#header-position {
	height: 60vh;
	overflow: hidden;
}
#home-video {
	width: 100%;
	background: url(../images/background1.png) no-repeat;
	background-size: cover;
}

/******************************* 
NAVIGATION
*******************************/

#logo-position {
	z-index: 9998;
	position: absolute;
	bottom: -3vh;
}
#logo {
	width: 18vw;
	height: auto;
}
#transition {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 6vh;
	background-image: linear-gradient(transparent, #f27b30 100%);
}
#navigation {
	position: relative;
	width: 100%;
	height:6vh;
	background-image: linear-gradient(#f27b30 1%, #e5d7cf);
}
#navigation-links {
	position: absolute;
	bottom: 40%;
	left: 0vw;
	right: 0vw;
	text-align: center;
}
#navigation-links ul li {
	display: inline;
	margin: 0px 1vw;
}
#navigation-links ul li a {
	display: inline-block;
	padding: 1vw;
}

#navigation-links a:link { color: #9E0002; font-size: 1em; text-decoration: none; }
#navigation-links a:visited { color: #9E0002; font-size: 1em; text-decoration: none; }
#navigation-links a:active { color: #157D10; font-size: 1.111em; text-decoration: none; }
#navigation-links a:hover { color: #125F0C; font-size: 1.111em; text-decoration: none; }
#navigation-links a:focus { color: #125F0C; font-size: 1.111em; text-decoration: none; }

/******************************* 
WELCOME
*******************************/

#main-heading {
	text-align: center;
	margin-top: 6%;
}

/******************************* 
LATEST VIDEOS
*******************************/

#recent {
	text-align: center;
}
#videoplayer {
	text-align: center;
	height: 33vw;
	width: 60vw;
}

/******************************* 
FOOTER
*******************************/

#transition-footer {
	width: 100%;
	height: 6vh;
	margin-top: 3vw;
	background-image: linear-gradient(transparent, #f27b30 100%);
}
footer {
	background-color: #f27b30;
	padding-bottom: 2vw;
}
#social-media {
	width: 25%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2vw;
	border-bottom: 0.1em solid #000000;
}
#social-media ul {
	text-align: center;
}
#social-media ul li {
	display: inline-block;
}
#social-media img {
	width: 2.5vw;
	padding-right: 0.7vw;
	opacity: 0.7;
}
#social-media img:hover, footer img:focus {
	opacity: 1.0;
}
#copyright p {
	text-align: center;
	padding-top: 1vw;
}

/******************************* 
GAMES
*******************************/

#gamesbg {
	width: 100%;
	opacity: 0.45;
}
#header-alt {
	position: relative;
	height: 40vh;
	max-width: 100%;
	background-color:#e5d7cf;
}
#header-position-alt {
	height: 40vh;
	overflow: hidden;
}
#logo-alt {
	width: 15vw;
	height: auto;
}
#gamelist li {
	display: inline;
}
#gamelist a:link, #gamelist a:visited, #gamelist a:active, #gamelist a:hover, #gamelist a:focus { color: #000; text-decoration: none;
}
.gameslot {
	float: left;
	margin: 2vw 0.72vw;
	background-color: #f27b30;
	box-shadow: 1vh 1vh 1vh #888888;
}
.gameslot:hover {
	background-color: #FF6300;
}
.gameslot img {
	width: 14.65vw;
	height: auto;
}
.gameicon {
	display: inline-block;
}
.gameslot p {
	text-align: center;
	padding-bottom: 1vh;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.4em;
}

/******************************* 
ABOUT
*******************************/

.imgleft {
	width: 11vw;
	height: auto;
	float: left;
	margin-right: 3vw;
	margin-bottom: 0vh;
}
.imgright {
	width: 11vw;
	height: auto;
	float: right;
	margin-left: 3vw;
	margin-bottom: 0vh;
}
#gabriel {
	height: 40vh;
	background-image: url(../images/link.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 25vh;
}
#zoe {
	height: 40vh;
	background-image: url(../images/samus.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 22vh;
}
#bowser {
	margin-top: 4vh;
	height: 35vh;
	background-image: url(../images/bowser2.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 30vh;
}
#player4 {
	margin-top: 4vh;
	height: 35vh;
	background-image: url(../images/ninja.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 30vh;
}

/******************************* 
CONTACT
*******************************/

#contactform {
	display: inline-block;
	width: 100%;
 	margin: 0 auto;
}
#contactform ol {
	background-image: url(../images/postman.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 15vw;
}
#contactform ol li {
	list-style-type: none;
	margin-bottom: 3vh;
}
input, textarea	{
	width: 25vw;
	border: 1px #000 solid;
	padding: 0.5em;
	text-align: center;
	font-family: Gills Sans, Arial, sans-serif;
	font-size: 1.1em;
	box-shadow: 1vh 1vh 1vh #888888;
}
input:focus, textarea:focus	{
	background-color: #F29961;
}
textarea {
	height: 20vh; 
	resize:none;
}
label {
	font-family: Garamond, Arial, sans-serif;
	font-size: 1.4em;
}
select {
	width: 25vw;
	padding: 0.5em;
	text-align: center;
	font-family: Gills Sans, Arial, sans-serif;
	font-size: 1.1em;
	box-shadow: 1vh 1vh 1vh #888888;
}
.submit	{
	font-family: Garamond, Arial, sans-serif;
	width: 10vw;
	cursor: pointer;
}
.submit:hover {
	background-color: #F29961;
}
.error p {
	color: red;
	font-weight: bold;
	text-align: center;
	font-size: 1em;
	margin-top: 1em;
}

/******************************* 
DONATE
*******************************/

#donatediv {
	background-image: url(../images/luigicoins.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60vw;
}
#expenses {
	font-family: Gills Sans, Arial, sans-serif;
	font-size: 1.2em;
	margin: 2vh 0;
}
#paypal {
	opacity: 0.8;
	width: 15vw;
}
#paypal:hover {
	opacity: 1;
	width: 16vw;
}

/******************************* 
INDIVIDUAL GAME
*******************************/

#title-game {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 55vw;
}
#navigation-game {
	left: 0vw;
	right: 0vw;
	text-align: center;
	margin-bottom: 15vh;
}
#navigation-game ul li {
	display: inline;
	margin: 0px 2vw;
}

#navigation-game a:link { color: #9E0002; font-size: 1em; text-decoration: none; }
#navigation-game a:visited { color: #9E0002; font-size: 1em; text-decoration: none; }
#navigation-game a:active { color: #157D10; font-size: 1.111em; text-decoration: none; }
#navigation-game a:hover { color: #125F0C; font-size: 1.111em; text-decoration: none; }
#navigation-game a:focus { color: #125F0C; font-size: 1.111em; text-decoration: none; }

#left-box {
	width: 60%;
	float: left;
}
#right-box {
	width: 30%;
	float: right;
}
#playlists {
	height: 22vw;
	width: 40vw;
	margin-bottom: 2vh;
}
#seriestextdiv {
	background-color: #f27b30;
	box-shadow: 1vh 1vh 1vh #888888;
	padding: 1.2vw;
	margin-bottom: 2vh;
}
.seriestext {
	font-size: 1.2em;
}

/******************************* 
LOTRO
*******************************/

#maintable {
	font-family: TolkienRegular, Garramond, Arial, sans-serif;
	font-size: 1.5em;
	text-align: center;
}
#maintable p {
	font-size: 0.83em;
	margin-bottom: 3vh;
}
#maintable h1 {
	font-family: TolkienRegular, Garramond, Arial, sans-serif;
	font-size: 2em;
	margin-top: 3vh;
	margin-bottom: 3vh;
}
#maintable table {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3vh;
}
#maintable th {
	font-size: 1.6em;
	border-bottom: solid black medium;
	padding-bottom: 0.5em;
	border-right: none;
}
tr:nth-child(even) {
	background: #F29961;
	}
#maintable td {
	border-bottom: solid #C0C0C0 thin;
	border-right: solid #C0C0C0 thin;
	padding: 0.4em 0.9em;
	font-size: 0.9em;
}
#maintable tr:hover {
	background-color: #f27b30;
}
#maintable tr th:hover {
	background-color: #e5d7cf;
}

#maintable a:link { color: #000; text-decoration: none; }
#maintable a:visited { color: #000; text-decoration: none; }
#maintable a:active { color: #000; text-decoration: none; }
#maintable a:hover { color: #000; text-decoration: none; }
#maintable a:focus { color: #000; text-decoration: none; }

#maintable p a:link { color: blue; text-decoration: underline; }
#maintable p a:visited { color: blue; text-decoration: underline; }
#maintable p a:active { color: blue; text-decoration: underline; }
#maintable p a:hover { color: blue; text-decoration: underline; }
#maintable p a:focus { color: blue; text-decoration: underline; }

.lotroYT{
	width: 35%;
}
#questbox {
	width: 50%;
	float: left;
	margin-rigth: 5%;
}
#deedbox {
	width: 45%;
	float: right;
}
.completering {
	width: 1em;
}
	
/******************************* 
1870PX MEDIA QUERY
*******************************/

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

#maintable h2 {
	font-size: 1.15em;
}
}

/******************************* 
1590PX MEDIA QUERY
*******************************/

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

#maintable h2 {
	font-size: 1em;
}
}

/******************************* 
1390PX MEDIA QUERY
*******************************/

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

#maintable h2 {
	font-size: 0.9em;
}
}

/******************************* 
1300PX MEDIA QUERY
*******************************/

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

.wrapper {
	width: 80%;
}
.gameslot p {
	font-size: 1em;
}
p {
	font-size: 1.3em;
}
.imgleft, .imgright {
	width: 15vw;
}
.wrapper-contact {
	width: 80%
}
input, textarea, select	{
	width: 35vw;
}
.submit {
	width: 12vw;
}
#title-game {
	width: 60vw;
}
#playlists {
	height: 28vw;
	width: 50vw;
}
}

/******************************* 
1260PX MEDIA QUERY
*******************************/

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

header, #header-position {
	height: 40vh;
}
#title {
    height: 17vh;
}
#transition {
	height: 6vh;
}
#navigation {
	height: 3vh;
}
#logo, #logo-alt {
	width: 20vw;
}

#navigation-links a:link { color: #9E0002; font-size: 0.95em; }
#navigation-links a:visited { color: #9E0002; font-size: 0.95em; }
#navigation-links a:active { color: #157D10; font-size: 0.98em; }
#navigation-links a:hover { color: #125F0C; font-size: 0.98em; }
#navigation-links a:focus { color: #125F0C; font-size: 0.98em; }

.wrapper {
	width: 80%;
}
h1 {
	font-size: 2.6em;
}
p {
	font-size: 1.3em;
}
.division {
	width: 95%;
	height: 5.5vw;
	margin: 1.5vw auto 1.5vw auto;
}
#social-media {
	width: 30%;
}
#social-media img {
	width: 3.5vw;
}
.wrapper-games {
	width: 90%;
}
.gameslot {
	margin: 2vw 1vw;
}
.gameslot img {
	width: 20.5vw;
}
.gameslot p {
	font-size: 1.1em;
}
#donatediv {
	background-size: 90vw;
}
#paypal {
	width: 18vw;
}
#paypal:hover {
	width: 19vw;
}
#maintable h2 {
	font-size: 0.8em;
}
}

/******************************* 
1050PX MEDIA QUERY
*******************************/

@media screen and (max-width:1051px) {
	
.wrapper-contact {
	width: 90%
}
input, textarea, select	{
	width: 40vw;
}
.submit {
	width: 15vw;
}
#contactform ol {
	background-size: 20vw;
}
h3 {
	font-size: 1.7em;
}
.seriestext {
	font-size: 1.05em;
}
#title-game {
	width: 70vw;
}
}

/******************************* 
960PX MEDIA QUERY
*******************************/

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

header, #header-position, #header-alt, #header-position-alt {
	height: 25vh;
}
#title {
    height: 12vh;
}
#transition {
	height: 4vh;
}
#logo, #logo-alt {
	width: 17vw;
}

#navigation-links a:link { color: #9E0002; font-size: 0.8em; }
#navigation-links a:visited { color: #9E0002; font-size: 0.8em; }
#navigation-links a:active { color: #157D10; font-size: 0.83em; }
#navigation-links a:hover { color: #125F0C; font-size: 0.83em; }
#navigation-links a:focus { color: #125F0C; font-size: 0.83em; }

.wrapper {
	width: 90%;
}
h1 {
	font-size: 2.2em;
}
p {
	font-size: 1.22em;
}
.division {
	height: 6vw;
	margin: 1.2vw auto 1.2vw auto;
}
#videoplayer {
	text-align: center;
	height: 40vw;
	width: 70vw;
}
#social-media {
	padding-top: 7vw;
	width: 35%;
}
#social-media img {
	width: 4vw;
}
.gameslot {
	margin: 2vw 1.15vw;
}
.gameslot img {
	width: 27.7vw;
}
.gameslot p {
	font-size: 1.08em;
}
.imgleft, .imgright {
	width: 20vw;
}
#gabriel {
	margin-top: 2vh;
}
input, textarea, select	{
	width: 40vw;
}
.submit {
	width: 15vw;
}
#contactform ol {
	background-size: 20vw;
}
input, textarea, select	{
	font-size: 1em;
}
label {
	font-size: 1.2em;
}
#contactform ol {
	background-size: 25vw;
}
#paypal {
	width: 20vw;
}
#paypal:hover {
	width: 21vw;
}
#playlists {
	height: 31vw;
	width: 55vw;
}
#maintable h2 {
	display: none;
}
}

/******************************* 
850PX MEDIA QUERY
*******************************/

@media screen and (max-width:851px) {
#left-box {
	width: 100%;
	margin-bottom: 2vh;
}
#right-box {
	width: 100%;
}
#title-game {
	width: 80vw;
}
#playlists {
	height: 42vw;
	width: 75vw;
}
#seriestextdiv {
	background-color: #e5d7cf;
	box-shadow: 0vh 0vh 0vh #888888;
	padding: 0vw;
	margin-bottom: 2vh;
}
.seriestext {
	font-size: 1.2em;
}
#navigation-game {
	margin-bottom: 10vh;
}
}

/******************************* 
750PX MEDIA QUERY
*******************************/

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

header, #header-position, #header-alt, #header-position-alt {
	height: 10vh;
}
#title {
    height: 11vh;
}
#transition {
	display: none;
}
#navigation {
	height:0vh;
	padding-top: 6vh;
	padding-bottom: 6vh;
	background: none;
}
#logo, #logo-alt {
	display: none;
}

#navigation-links a:link { color: #9E0002; font-size: 0.995em; }
#navigation-links a:visited { color: #9E0002; font-size: 0.995em; }
#navigation-links a:active { color: #157D10; font-size: 0.995em; }
#navigation-links a:hover { color: #125F0C; font-size: 0.995em; }
#navigation-links a:focus { color: #125F0C; font-size: 0.995em; }

.wrapper {
	width: 95%;
}
#main-heading {
	margin-top: 15vw;
}
h1 {
	margin-top: 2vw;
}
.division {
	width: 98%;
}
#videoplayer {
	text-align: center;
	height: 45vw;
	width: 80vw;
}
#social-media {
	width: 60%;
}
#social-media img {
	width: 7vw;
}
.imgleft, .imgright {
	width: 25vw;
}
#donatediv {
	background-image: none;
}
#paypal {
	width: 90vw;
}
#paypal:hover {
	width: 90vw;
}
#expenses {
	font-size: 0.95em;
}
#title-game {
	width: 85vw;
}
#playlists {
	height: 53vw;
	width: 95vw;
}
#navigation-game {
	margin-bottom: 7vh;
}
}

/******************************* 
680PX MEDIA QUERY
*******************************/

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

.gameslot p {
	font-size: 0.9em;
}
#title-game {
	width: 90vw;
}
}

/******************************* 
580PX MEDIA QUERY
*******************************/

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

.gameslot p {
	font-size: 0.85em;
}
input, textarea, select	{
	width: 60vw;
}
.submit {
	width: 25vw;
}
#contactform ol {
	background-image: none;
}
#title-game {
	width: 95vw;
}
}

/******************************* 
550PX MEDIA QUERY
*******************************/

@media screen and (max-width:551px) {
	#navigation-game ul li {
		display: block;
		margin: 5vw 1vw;
	}
	#navigation-game ul li a {
		display: block;
		width: 100%;
		background-color: #B3A8A1;
}
	#navigation-game {
		margin-bottom: 3vh;
}
#questbox {
	width: 100%;
	float: left;
}
#deedbox {
	width: 100%;
	float: right;
}
}

/******************************* 
540PX MEDIA QUERY
*******************************/

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

header, #header-position, #header-alt, #header-position-alt {
	height: 9vh;
}
#title {
    height: 10vh;
}
#header-position, #header-position-alt {
	display: none;
}
#navigation {
	padding-top: 9vh;
}
#navigation-links {
	bottom: auto;
}
#navigation-links ul li {
	display: block;
	margin: 5vw 1vw;
}
#navigation-links ul li a {
	display: block;
	width: 100%;
	background-color: #B3A8A1;
}

#navigation-links a:link { color: #9E0002; font-size: 1em; }
#navigation-links a:visited { color: #9E0002; font-size: 1em; }
#navigation-links a:active { color: #157D10; font-size: 1em; }
#navigation-links a:hover { color: #125F0C; font-size: 1em; }
#navigation-links a:focus { color: #125F0C; font-size: 1em; }

.wrapper {
	width: 98%;
}
#main-heading {
	margin-top: 60vw;
}
h1 {
	font-size: 1.9em;
}
p {
	line-height: 1.5em;
}
.division {
	display: none;
}
#videoplayer {
	text-align: center;
	height: 57vw;
	width: 100vw;
}
#social-media {
	width: 95%;
}
#social-media img {
	width: 10vw;
}
#copyright p {
	font-size: 0.8em;
}
.gameslot img {
	display: none;
}
.gameslot {
	width: 100%;
	margin: 2vw 1.15vw;
}
.gameslot p {
	font-size: 1.2em;
}
.imgleft, .imgright {
	display: none;
}
input, textarea, select	{
	width: 80vw;
}
.submit {
	width: 35vw;
}
.error p {
	font-size: 0.9em;
}
#maintable h1 {
	font-family: TolkienRegular, Garramond, Arial, sans-serif;
	font-size: 1.8em;
	margin-bottom: 3vh;
}
}

/******************************* 
480PX MEDIA QUERY
*******************************/

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

#navigation {
	padding-top: 7vh;
}
p {
	font-size: 1.1em;
}
h2 {
	font-size: 1em;
}
#maintable h1 {
	font-size: 1.3em;
}
#maintable td {
	font-size: 0.8em;
}
.lotroYT{
	width: 50%;
}
}

/******************************* 
360PX MEDIA QUERY
*******************************/

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

#title {
    height: 10vh;
}
#navigation {
	padding-top: 8vh;
}
#main-heading {
	margin-top: 68vw;
}
h1 {
	font-size: 1.7em;
}
#gabriel {
	margin-top: 3vh;
	height: 55vh;
}
#zoe {
	height: 47vh;
}
#bowser {
	height: 37vh;
}
.seriestext {
	font-size: 1.1em;
}
#maintable h1 {
	font-size: 1.1em;
}
#left-box h3 {
	font-size: 1.4em;
}
#maintable td {
	font-size: 0.74em;
}
}

/******************************* 
320PX MEDIA QUERY
*******************************/

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

#title {
    height: 11vh;
}
#navigation {
	padding-top: 9vh;
}
#main-heading {
	padding-top: 4vh;
}
#copyright p {
	font-size: 0.7em;
}
h2 {
	font-size: 0.9em;
}
#gabriel {
	margin-top: 3vh;
	height: 80vh;
}
#zoe {
	height: 62vh;
}
#bowser {
	height: 55vh;
}
.lotroYT{
	width: 60%;
}
}

/******************************* 
HEIGHT MEDIA QUERY
*******************************/

@media screen and (min-height:1200px) {

footer {
	background-color: #f27b30;
	padding-bottom: 9vw;
}


}