/* 
Sxyzm Hex Colors:
Black:      #0c0a09
Dark Grey:  #454342
Mid Grey:   #74726f
Light Grey: #b0aeaa
VL Grey:    #dcdcdb
VVL:        #eeeeed
White:      #fffffe
Gold:       #f1d03c
Teal:       #13af9f

Brown:      #743f1f
Red:        #ce232a
Pink:       #ea9dbb
Orange:     #e5702a
Yellow:     #fff36f
Lime:       #91c33f
Forest:     #007945
Sky:        #9dd6ea
Navy:       #1e71ab
Violet:     #602a7a
*/

#header {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #454342; 
    margin-left: auto;
    margin-right: auto;
    padding-top: 0%;
    padding-bottom: 0%;
    padding-right: 2%;
    padding-left: 2%;
    color: #fffffe;
    text-align: center; 
    font-weight: bold; 
    position: fixed; /* Fixed position - sit on top of the page */
    top: 0; 
    left:0;
    width: 100%; /* Full width */
    transition: 0.2s; 
    /*box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0);*/
    max-height:120px;
}

.headerRow{
    
    margin: 0px;
}
.headerRow:after {
    content:"";
    display: table;
    clear: both;
}
.headerMenu{
    float:right;
    margin-left: auto;
    margin-right:0px;
    text-align: right; 
    width:auto;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 0px;
}
.headerGlow{
    color:#fffffe;
}
.headerLeft{
    display: block;
    margin-left: 2%;
    margin-right: auto;
    height: auto;
    width: auto;
    padding-top: 5px;
    padding-bottom: 0px;
    float:left;
    text-align: left;
    max-height:110px;
}
.headerRight{
    display: block;
    margin-left: auto;
    margin-right:2.5%;
    right: 0px;
    width: auto;
    height:50%;
    margin-top: 1.5%;
    float:right;
    font-size: 22.5px;
    padding-top: 1%;
    max-height:110px;
    
}
.orderList{
    font-family: monospace;
    font-size: 80%;
    color: #9dd6ea;
    font-weight:normal;
    margin:-1px;
}
.formLink{
    color:#0c0a09;
}
.formLink:hover{
    color:#9dd6ea;
}
.formLinkLight{
    color:#fffffe;
}
.formLinkLight:hover{
    color:#9dd6ea;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 6.8%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: 100%;
}
.spacerHeader{
    margin-left:-1%;
    margin-right:-1%;
    margin-top:-80;
    height:80;
    background-color:#0c0a09;
}
.containerBorder{
    margin-left: -1%;
    margin-right: -1%;
    background-color: #0c0a09;
}
.containerBorder2{
    margin-left: 0px;
    margin-right: 0px;
    
}
.borderImg{
    height:auto;
    width:100%;
}
.titleImg{
    width:80%;
}
.bodyTitle{
    text-align: center;
    font-size: 400%;
    font-weight: bolder;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 10%;
    margin-bottom: 10%;
}

.bodyTitleGames{
    text-align: center;
    font-size: 400%;
    font-weight: bolder;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 5%;
    margin-bottom: 5%;
}
.bodyTitle2{
    text-align: center;
    font-size: 280%;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 4%;
    margin-bottom: 4%;
}
.bodyTitle3{
    text-align: justify;
    font-size: 135%;
    margin-top: 0%;
    margin-bottom: 10%;
    padding-top: 0%;
}
.bodyText{
    margin-left: 15%;
    margin-right: 15%;
    text-align: justify;
    font-size: 130%;
}
.bodyTextContact{
    margin-left: 15%;
    margin-right: 15%;
    text-align: center;
    font-size: 130%;
    
}

.tab1{
    tab-size: 4;
    
}
.statusText{
    font-family: monospace;
    margin-left: 5%;
    font-size: 100%;
    font-weight:normal;
    width:100%;
    
}
.textHidden1{
    color:rgb(0,0,0,0);
}
.textHidden2{
    color:rgb(0,0,0,0);
    font-size: 150%;
}
.gameTitleImg{
    padding: 3%;
    margin-left: 10%;
    width:80%;
    
}
.gameTable {
  background-color: #eeeeed;
  color: #454342;
  cursor: pointer;
    float:left;
  padding: 1%;
  width: 100%;
  border: none;
  outline: none;
  transition: 0.4s;
    font-size: 100%;
}
.gameTableHEAD {
  background-color: #0c0a09;
  color: #fffffe;
  cursor: pointer;
    float:left;
  padding: 1%;
  width: 100%;
  border: none;
  outline: none;
  transition: 0.4s;
    font-size: 100%;
}
.active, .gameTable:hover {
  background-color: #dcdcdb;
    color: #0c0a09;
    box-shadow: 1px 1px 6px #0c0a09;
}
.active2, .gameTableHEAD:hover {
  background-color: #454342;
    box-shadow: 1px 1px 6px #0c0a09;
}
.gameTableDesHEAD {
  padding: 1% 5%;
  background-color: #74726f;
    color: #fffffe;
  display: none;
  overflow: hidden;
  float:left;
  width: 100%;
    font-size:90%;
}
.gameTableDes {
  padding: 1% 5%;
  background-color: #fffffe;
  display: none;
  overflow: hidden;
  float:left;
  width: 100%;
    font-size:100%;
}
.gameTableDesImgBox{
    float:left;
    width:75%;
}
.gameTableDesImg{
    width:100%;
    
}
.gameTableDesDesBox{
    
}
.gameTableDesDes{
    
}
.gameTableDesLinkBox{
    text-align: right;
}
.gameTableDesLink{
    text-align: center;
    color:#000;
}
.th1{
    width:4%;
}
.th2{
    width:10%;
}
.th3{
    width:15%;
}
.th4{
    width:auto;
}
.th5{
    width:7%;
}
.th6{
    width:7%;
}
.th7{
    width:7%;
}


.containerLight{
    background-color: #fffffe;
    margin-left:-1%;
    margin-right:-1%;
    color: #0c0a09;
    display: flex;
    flex-direction: column;
    
}
.containerDark{
    background-color: #454342;
    margin-left:-1%;
    margin-right:-1%;
    color: #fffffe;
    display: flex;
    flex-direction: column;
    
}
.containerContent{
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
    display:block;
    
    
}
.containerLeft{
    width:50%;
    margin-left:0%;
    float:left;
}
.containerFull{
    width:100%;
    margin-left:0%;
    float:left;
}
.containerRight{
    width:50%;
    float:left;
    padding-top: 2%;

}
.containerImg{
    padding: 5%;
    
}

.comingSoon{
    padding-top: 25%;
    font-size: 60px;
    padding-bottom: 25%;
    font-weight: bolder;
    color: #9dd6ea;
}
.gameLogo{
    width:80%;
}
.janitorsLogo{
    width:90%;
}
.pnpCover{
    width:60%;
    padding:20%;
}
.containerContentGameBox{
    margin-left: 10%;
    margin-right: 10%;
    display:block;
    margin-top: 8%;
    margin-bottom: 10%;
   
    
}
.containerBox{
    width:40%;
    padding:5%;
    float:left;
    display: block;
}
.containerMetrics{
    width:60%;
    margin-left: 20%;
    margin-right: 20%;
    float:left;
    display: block;
}
.containerGameplay{
    width:30%;
    padding-top:0%;
    padding-bottom: 5%;
    padding-left: 0%;
    padding-right: 5%;
    float:left;
    display: block;
}
.containerGameplayLast{
    width:30%;
    padding-top:0%;
    padding-bottom: 5%;
    padding-left: 0%;
    padding-right: 0%;
    float:left;
    display: block;
}
.boxImg{
    width:100%;
    
}
.containerDes{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 8%;
    margin-bottom: 10%;
    display:block;
    
    
}

.gameTile{
    width:80%;
    margin-left: 10%;
    margin-right:10%;
    padding:1%;
    border: solid #0c0a09 1px;
    background-color: #eeeeef;
    box-shadow: 1px 1px 6px #0c0a09;
}
.gameTileImg{
    width: 25%;
    float: Left;
}
.gameTileText{
    width: 60%;
    margin-left: 7.5%;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    float: Left;
    text-align: left;
    color:#000000;
    font-size: 120%;
    text-align: justify;
}
.descriptionText{
    width:65%;
    float:left;
    display:block;
}
.descriptionSUText{
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
    float:left;
    display:block;
}
.descriptionSU2Text{
    margin-left: 5%;
    margin-right: 5%;
    text-align: justify;
    font-size: 130%;
}

.descriptionTextNote{
    margin-left: 20%;
    margin-right: 20%;
    text-align: justify;
    font-style: italic;
    font-size: 130%;
}
.descriptionImg{
    width:30%;
    float:left;
    display:block;
    border: 3px solid #454342;
}
.list1{
    list-style-type: square;
    margin-top: 1%;
    margin-bottom: 1%;
}
.list2{
    text-align: left;
    align-content: ;
    list-style-type: square;
    margin-top: 1%;
    margin-left: 10%;
    margin-right:10%;
    margin-bottom: 1%;
}

.sellSheetpdf{
    -webkit-overflow-scrolling: touch;
  	overflow-y: scroll;
    
    margin-left: 5%;
    width:90%;
    height:100%;
}
.sellsheetpdf iframe{
    margin-left: 5%;
    width:90%;
    height:900px;
}

#footer {
    font-family: Arial, Helvetica, sans-serif;
    color: #0c0a09;
    background-color: #fffffe;
}
.footerCenter{
display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    padding: 1%;
    text-align: center;
    
}
.footerMenu{
    color:#0c0a09;
}
.footerMenuSub{
    color:#0c0a09;
}
.copyright{
    color:#74726f;
}

a:link, a:visited {
    
     text-align: center; 
    text-decoration: none;
    display: inline-block;
    padding:10px;
    
}

a:hover, a:active {
   text-align: center;
    border-radius: 5px;
    color:#9dd6ea;
    border:none;
    text-decoration: none;
    box-shadow: 1px 1px 6px #9dd6ea;
}



/* Responsive columns - one column layout (vertical) on medium screens */
@media screen and (max-width: 1150px) and (min-width:810px) {
    #header {
        max-height:100px;
    }
    .headerLeft {
        max-height:90px;
        max-width:39%;
    }
    .HeaderRight {
        max-height:90px;
        padding-top: 0%;
    }

    .headerMenu {
        max-height:90px;
    }

}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 820px) and (min-width:540px) {
    #header {
        padding-left: 2%;
        padding-right: 2%;
        padding-bottom: 1%;
        padding-top: 0px;
        max-height:80px;
    }
    .headerLeft {
        width: auto;
        max-width:39%;
        display: block;
        padding-top: 0px;
        margin-left: 0%;
        padding-bottom: 0px;
        align-content: center;
        float:left;
        max-height:70px;
        
    }
    .HeaderRight {
        width: 60%; 
        font-size: 30%; 
        margin-top: 0px;
        padding-top: 0px; 
        padding-bottom: 0px;
        display: block;
        margin-left: auto;
        margin-right: 0%;
        max-height:70px;
        
    }
    .headerMenu {
        width: auto; 
        padding-top: 5%;
        padding-bottom: 0px;
        padding-right: 1%;
        padding-left: 0px;
        margin-right: 1%;
        float:right;
        font-size:300%;
        max-height:70px;
    }
    
    body {
    padding-top: 0px;
    background-size: 100%;
}
    .spacerHeader{
        
    height:130px;
}
    .containerBorder{
    margin-left: -2%;
    margin-right: -2%;
}
    .containerContent{
        width:90%;
        display:block;
        margin-bottom: 0px;
    }
    .containerLeft{
        margin-top: 15%;
        width:100%;
        display:block;
    }
    .containerRight{
        width:100%;
        display:block;
    }
    .containerImg{
        width:90%;
        display:block;
    }
    .bodyTitle{
        width:80%;
        margin-left: 10%;
        margin-right: 10%;
        font-size: 230%;
        margin-top: 20%;
        margin-bottom: 20%;
        
    }
    .bodyTitle2{
    margin-top:8%;
    margin-bottom: 8%;
        font-size: 200%
}
    .bodyTitle3{
        width:90%;
        display:block;
    }
    .bodyText{
        width:90%;
        margin-left: 5%;
    }
    .bodyTextContact{
        margin-left: 10%;
        margin-right:10%;
        text-align: justify;
    }
    .containerContentGameBox{
        margin-left: 20%;
        margin-right: 20%;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .containerBox{
        padding-left:0px;
        padding-right: 0px;
        
        width:100%;
        align-content: center;
    }
    .containerDes{
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 5%;
        margin-right: 5%;
    }
    .descriptionText{
        width:100%;
    }
    .descriptionTextNote{
        width:80%;
        margin-left: 10%;
    }
    .descriptionImg{
        margin-top: 5%;
        margin-bottom: 5%;
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
    }
    .gameTable {
    font-size: 75%;
}
    .gameTableHEAD {
    font-size: 75%;
}
    .gameTableDesHEAD {
    font-size:75%;
}
    .gameTableDes {
    font-size:75%;
}
    .gameTitleImg{
    margin-left: 0%;
    
}
    
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 550px) and (min-width:330px) {
    
    
    .statusText{
    font-size: 70%;
    
}
    
    
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 550px) {
    #header {
        padding-left: 2%;
        padding-right: 2%;
        padding-bottom: 1%;
        padding-top: 0px;
        max-height:80px;
    }
    .headerLeft {
        width: auto;
        max-width:39%;
        display: block;
        padding-top: 0px;
        margin-left: 0%;
        padding-bottom: 0px;
        align-content: center;
        float:left;
        max-height:70px;
        
    }
    .HeaderRight {
        width: 60%; 
        font-size: 20%; 
        margin-top: 0px;
        padding-top: 0px; 
        padding-bottom: 0px;
        display: block;
        margin-left: auto;
        margin-right: 0%;
        max-height:70px;
        
    }
    .headerMenu {
        width: auto; 
        padding-top: 5%;
        padding-bottom: 0px;
        padding-right: 1%;
        padding-left: 0px;
        margin-right: 1%;
        float:right;
        font-size:300%;
        max-height:70px;
    }
    
    body {
    padding-top: 0px;
    background-size: 100%;
}
    .spacerHeader{
    margin-left: -5%;
    margin-right: -5%;
    height:130px;
}
    .containerBorder{
    margin-left: -5%;
    margin-right: -5%;
}
    .containerContent{
        width:90%;
        display:block;
        margin-bottom: 0px;
    }
    .containerLeft{
        margin-top: 15%;
        width:100%;
        display:block;
    }
    .containerRight{
        width:100%;
        display:block;
    }
    .containerImg{
        width:90%;
        display:block;
    }
    .bodyTitle{
        width:80%;
        margin-left: 10%;
        margin-right: 10%;
        font-size: 230%;
        margin-top: 20%;
        margin-bottom: 20%;
        
    }
    .bodyTitle2{
    margin-top:8%;
    margin-bottom: 8%;
        font-size: 200%
}
    .bodyTitle3{
        width:90%;
        display:block;
    }
    .bodyText{
        width:90%;
        margin-left: 5%;
    }
    .bodyTextContact{
        margin-left: 10%;
        margin-right:10%;
        text-align: justify;
    }
    .containerContentGameBox{
        margin-left: 20%;
        margin-right: 20%;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .containerBox{
        padding-left:0px;
        padding-right: 0px;
        
        width:100%;
        align-content: center;
    }
    .containerDes{
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 5%;
        margin-right: 5%;
    }
    .descriptionText{
        width:100%;
    }
    .descriptionTextNote{
        width:80%;
        margin-left: 10%;
    }
    .descriptionImg{
        margin-top: 5%;
        margin-bottom: 5%;
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
    }
    
    .gameTable {
    font-size: 50%;
}
    .gameTableHEAD {
    font-size: 50%;
}
    .gameTableDesHEAD {
    font-size:50%;
}
    .gameTableDes {
    font-size:50%;
}
    .gameTitleImg{
    margin-left: 0%;
    
}
    
    
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 340px) {
    .statusText{
    font-size: 50%;
    
}
    
    
}