body{
    font-family: arial; 
	font-size: 80%; 
	line-height: 1.2em; 
	width: 100%; 
	margin: 0; 
	padding: 0; 
	background: rgba(0,0,0,.93);
	color: #ddd;
}

a {
  color: yellow;
  text-decoration: none;
}

.header-left img {
	max-width: 300px;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
}
.container{
    width:77%;
    margin: 0 auto;
		#top:0px;
		#position:fixed;
		#z-index:100;
		#background-color: #000;
}
header{
    width: 100%;
    height: auto;
    background: black;
	position:fixed;
	z-index:100;
	top:0;
	left:0;
}

.header-left,
.header-right{
    position: relative;
    color: white;
    float: left;
}
.header-left{
    width: 30%;
}
.header-right label{
    position: absolute;
    top: -5.7em;
    right: -30px;
    cursor: pointer;
}
.header-right span{
    position: relative;
    width: 2em;
    height: 2em;
    background: rgba(255,255,255,.3);
    -webkit-transition: all .3s ease;
}
.header-right span:hover{
    background: rgba(255,255,255,.6);
}
.header-right span:before,
.header-right span:after{
    content: '';
    position: absolute;
    width: 2em;
    height: .5em;
    top: 4px;
    left: 0;
    background: black;
}
.header-right span:after{
    top: 14px;
}
.header-right{
    width: 70%;
    text-align: right;
}
#open{
    display: none;
}
h1{
    font-weight: 300;
    line-height: 40px;
}
a{
    text-decoration: none;
    color: white;
}
nav>a{
	margin-top:25px;
    position: relative;
    display: inline-block;
    font-size: 15px;
	font-weight: 600;
    line-height: 40px;
    padding: 0 2em;
    -webkit-transition: all .3s ease;
}

nav>a:hover{
    background: rgba(255,255,255,.9);
    color: black;
}
.hidden-desktop{
    display: none;
}

.active-menu {
	color: #fed700;
	pointer-events: none;
}

section{
    width: 100%;
    height: auto;
}
.section-left,
.section-right{
    float: left;
}
.section-left{
    width: 70%;
    padding: 3em 0;
}
.section-right{
    width: 30%;
}
.section-title,
.section-tagline{
    color: white;
    font-weight: 300;
    margin: 0;
    padding: 0;
    -webkit-transition: all .4s ease;
}
.section-title{
    font-size: 4em;
    margin-bottom: .3em;
    text-shadow: 0 3px 0px black,
                 0 4px 0px rgba(150,150,150,.5);
}
.section-tagline{
    font-size: 1em;
}
.learn-more{
    display: table;
    margin: 3em auto 0;
    padding: 1em 6em;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.8);
    background: #EAAF00;
    background-image: -webkit-linear-gradient(#EAAF00 0%, #D78100 100%);
    font-size: 1.2em;
}
.learn-more:hover{
    background: #EAAF00;
}
.learn-more:active{
    box-shadow: inset 0 2px 0 rgba(0,0,0,.8);
}

.overlay a {
  font-family: 'Droid Serif', serif;
  font-size: 2.5em;
  display: block;
  padding-top: 32%;
  padding-bottom: 38%;
  color: #eeeeee;
  text-shadow: -1px 0 3px black, 0 1px 3px black, 1px 0 3px black, 0 -1px 3px black;
}

.content {
	margin-top: 150px;
	#margin-bottom: 60px;
}

.quests {
	margin-left: 12%;
	width: 75%;
	margin-bottom: 3%;
}

.quest {
	width: 100%;
	min-height: 100px;
	overflow: hidden;
	margin-bottom: 2%;
}

.quests img{
	float:left;
	margin: 0 12px 5px 0;
	width:12%;
}

.quests p{
	font-size: 1.45em;
	margin-top:0;
	text-align: justify;
	line-height: 110%;

}

.quests p span{
	color: #fed700;
	font-weight: bold;
}

.masonry {
    #column-count: 2;
    #column-gap: 0em;
	margin-left: 13%;
	width: 82%;
	display: table;
}

.item {
    border: solid 1px #fed700;
    display: block;
    margin: 0 6vw 6vw 0;
    width: 33vw;
	height: 33vw;
	float:left;
}

.masonry_small {
    column-count: 3;
    column-gap: 1em;
	margin-left: 13%;
	width: 82%;
}

.item_small {
    #border: solid 1px #fed700;
    margin: 0 6vw 6vw 0;
    width: 18vw;
	height: auto;
	float:left;
}

.item_small img{
	max-width:100%;
	max-height:100%;
	vertical-align: middle;
}

.bg {
	padding: 5px;
	background-color:white;
}

.type {
    max-width: 41%;
    max-height: 41%;
	margin: 1px 0 0 3px;
}

.upper p{
	font-size: 1.8em;
}

.bottom p{
	padding:0;
	margin:0;
	font-size: 2.2em;
	text-align: center;
	vertical-align: middle;
	display: table-cell;   
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .box{
        width: 49%;
        margin-bottom: 5%;
    }

    ul li:nth-child(3) .box{
        clear: both;
    }

    ul li:nth-child(2n) .box{
        margin-right: 0;
        clear: right;
    }
	
	.quests img{
		width:17%;
	}
	
  .overlay a {
	  font-size: 1.8em;
	}
	
	.upper p{
		font-size: 1.5em;
	}
	
	.bottom p{
		font-size: 1.5em;
	}
	
	.content {
		margin-top: 150px;
	}
	
	.quests p{
		font-size: 1.5em;
	}
}

@media (max-width: 1280px){
	.upper p{
		font-size: 1.5em;
	}
	
	.bottom p{
		font-size: 1.7em;
	}
}

/* Small monitor */
@media (max-width: 979px){
    nav>a{
        padding: 0 0.9em;
    }
    .section-left,
    .section-right{
        width: 100%;
    }
    .section-left{
        text-align: center;
    }
    .section-right{
        padding: 0 0 2em;
    }
    .section-title{
        font-size: 4em;
        margin-bottom: .2em;
    }
    .section-tagline{
        font-size: 1.3em;
    }
    .learn-more{
        margin: 0 auto;
    }
	
	.overlay a {
	  font-size: 2em;
	}
	
	.upper p{
		font-size: 1.2em;
	}
	
	.bottom p{
		font-size: 1.5em;
	}
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .container{
        width: 95%;
    }
    nav>a{
        padding: 0 2em;
		margin-top:0;
		line-height: 35px;
    }
	
	.header-left img {
		max-width: 250px;
	}
	
    h1{
        padding: .5em 0;
    }
    .header-left,
    .header-right{
        width: 100%;
        text-align: center;
    }
    .section-left,
    .section-right{
        width: 100%;
    }
    .section-left{
        text-align: center;
        padding: 2em 0;
    }
    .section-right{
        padding: 1em 0 2em;
    }
    .section-title{
        font-size: 3em;
        margin-bottom: .2em;
    }
    .section-tagline{
        font-size: 1.3em;
    }
    .learn-more{
        margin: 0 auto;
    }
	
	.overlay a {
	  font-size: 2.5em;
	}
	
	.content {
		margin-top: 170px;
	}
	
	.quests {
		margin-left: 12%;
		width: 77%;
		margin-bottom: 6%;
	}
	
	.masonry {
		column-count: 1;
		margin-left: 18%;
		width: 62%;
		margin-top: 170px;
	}
	
	.item{
		width: 63vw;
		height: 63vw;
	}
	
	.upper p{
		font-size: 1.4em;
	}
	
	.bottom p{
		font-size: 1.8em;
	}
	
	.quests img{
		width:20%;
	}
	
	.quests p{
		font-size: 1.3em;
	}
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
    body{
         
    }
    .container{
        width: 90%;
    }
	.overlay a{
		font-size: 1.8em;
	}
	
    nav{
        height: 0;
        overflow: hidden;
        -webkit-transition: all .3s ease;
    }
    input[type="checkbox"]:checked + nav{
        height: 170px;
    }
    nav>a{
        padding: 0 1em;
        display: block;
        border-bottom: solid 1px rgba(255,255,255,.1);
		margin-top:0;
		line-height: 40px;
    }
	
	.header-left img {
		max-width: 300px;
	}
	
    h1{
        padding: .5em 0;
    }
    .header-left,
    .header-right{
        width: 100%;
        text-align: center;
    }
    .section-left,
    .section-right{
        width: 100%;
    }
    .section-left{
        text-align: center;
        padding: 1em 0;
    }
    .section-right{
        text-align: center;
        padding: 1em 0 2em;
    }
    .section-title{
        font-size: 2.4em;
        margin-bottom: 0;
    }
    .section-tagline{
        font-size: 1em;
    }
    .learn-more{
        display: table;
        margin: 0 auto;
    }
    .hidden-desktop{
        display: block;
    }
	
	.type{
		margin:0 0 -3px 3px;
	}
	
	.upper p{
		font-size: 0.95em;
	}
	
	.bottom p{
		font-size: 1.5em;
	}
	
	.quests p{
		font-size: 1.2em;
	}
	
	.masonry {
		margin-top: 130px;
		margin-left: 8%;
		width: 85%;
	}
	
	.item{
		width: 78vw;
		height: 78vw;
	}
	
	.content {
		margin-top: 130px;
	}
	
	.quests {
		margin-left: 9%;
		width: 80%;
	}
	
	.masonry_small {
		column-count: 2;
		#column-gap: 0em;
		margin-left: 13%;
		width: 82%;
		#display: table;
	}
	
	.item_small {

    width: 35vw;

	
}
	
}

.upper {
	width: 100%;
	height: 12%;
	position: relative;
	float: left;
	display:table;
	background-color: rgba(255,255,255,0.1);
}

.upper div{
	position: relative;
	float: left;
	text-align: center;
	height:100%;
	display:table;
}

.upper div p{
	display: table-cell;
	vertical-align:middle;
}

.gametype{
	width: 25%;
}

.status{
	width: 50%;
	border-bottom-left-radius: 1.25em;
	border-bottom-right-radius: 1.25em;
}

.price{
	width: 25%;
}

.middle {
	width: 100%;
	height: 71%;
	position: relative;
	float: left;
}

.middle:hover .overlay {
  opacity: 1;
  visibility: visible;
}

.middle:active .overlay {
  #pointer-events: none;
}

.middle:hover img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
	text-align: center;
}

.anons {
    max-width: 100%;
    max-height: 100%;
	display: block;
	margin:auto;
	width:100%;
	object-fit: contain;
}


.bottom {
	width: 100%;
	height: 17%;
	position: relative;
	float: left;
	display: table; 
	background-color: rgba(255,255,255,0.1);
	#border-bottom-left-radius: 8px;
	#border-bottom-right-radius: 8px;
}

.active {
	background-color: rgba(00, 204, 00,0.95);
	color: #000;
}

.future {
	background-color: rgba(254,215,0, 0.95);
	color: #000;
}

.finished {
	background-color: rgba(254,0,0, 0.85);
	color: #000;
}

.archived {
	background-color: rgba(254,215,0, 0.95);
	color: #000;
}

.footer-distributed{
	background-color: #292c2f;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: normal 16px sans-serif;
	padding: 15px 35px;
}

.footer-distributed .footer-left p{
	color:  #8f9296;
	font-size: 14px;
	margin: 0;
}

.footer-distributed .footer-left p a{
	color:  #fed700;
}

/* Footer links */
.footer-distributed p.footer-links{
	font-size:18px;
	font-weight: bold;
	color:  #ffffff;
	margin: 0 0 10px;
	padding: 0;
}

.footer-distributed p.footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-right{
	float: right;
	margin-top: 6px;
	margin-right: 200px;
	max-width: 250px;
}

.footer-distributed .footer-left{
	max-width: 250px;
	margin-left: 200px;
}

.footer-distributed .footer-right a{
	display: inline-block;
	width: 35px;
	height: 35px;
	background-color:  #33383b;
	border-radius: 2px;
	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;
	margin-left: 3px;
}

.footer-distributed .footer-right p a{
	width:auto;
	background-color:  transparent;
	border-radius: 0px;
	font-size: 15px;
}

.footer-left i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 5px 10px 10px 0px;
	vertical-align: middle;
}

.footer-distributed .footer-left i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}

.footer-distributed .footer-left p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
}

.footer-distributed .footer-left p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}

.footer-distributed .footer-left p a{
	text-decoration: underline;
}

/* If you don't want the footer to be responsive, remove these media queries */
@media (max-width: 900px) {

	.footer-distributed .footer-left,
	.footer-distributed .footer-right{
		text-align: center;
	}

	.footer-distributed .footer-right{
		float: none;
		margin: 0 auto 20px;
	}

	.footer-distributed .footer-left p.footer-links{
		line-height: 1.8;
	}
	
	.footer-distributed .footer-left i{
		margin-left: 0;
	}
	
	.footer-distributed .footer-left{
		text-align: left;
		margin: 0 auto;
	}
}

section {
  display: none;
  padding: 20px 0 0;
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 35px;
  font-weight: 600;
  text-align: center;
  color: #fff;
}

label:hover {
  color: #ccc;
  cursor: pointer;
}

input:checked + label {
  color: #fed700;
  border-top: 2px solid #fed700;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

.text{
  font-weight: 600;
  text-align: center;
  color:#fed700;
  margin:0 0 20px -6vw;
}

.tasktable {
	width:90%; 
	border:1px solid #fed700; 
	margin-left:5%;
	margin-bottom: 20px;
	border-spacing:10px 10px;
}

.tasktable td {
	width:25%; 
	padding-top:17%; 
	position: relative;
}

.tasktable img {
	display:block; 
	width:100%; 
	height:100%; 
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

#frmtask {
	#margin-left:5%;
	color: #FED700;
	font-size: 16px;
	margin-bottom: 20px;
}

#frmtask input {
	display: initial;
}

#frmtask .button {
    background-color: #FED700;
    border: none;
    color: black;
    padding: 1px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 100px;
    cursor: pointer;
}
 .answer {
	 font-weight:bold;
	 color: green;
	 font-size: 16px;
 }
 
  .wrong {
	 font-weight:bold;
	 color: red;
	 font-size: 16px;
 }
 
.hover1:hover, .hover1:active, .hover1:focus {
	display: block;
	color: red;
	cursor:pointer;
	font-size: 2em;
}

.hover2:hover, .hover2:active, .hover2:focus {
	display: block;
	color: blue;
	cursor:pointer;
	font-size: 2em;
}