*::-webkit-scrollbar-thumb { background-color: #444; }
*::-webkit-scrollbar { width: 6px; height: 6px; background-color: #000; }


.pegileft { width: 60px; float: left; display: inline-block; margin: 0 0 20px 20px; clear: left; }
.pegileft img { max-width: 40px; }
.pegiright { width: 80%; float: left; display: inline-block; margin: 0 0 20px 0; }
h1 { margin: 40px 0 40px 0; }

video::-webkit-media-controls { display: none !important; }
video::-moz-media-controls { display: none !important; }


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

    .pegileft { margin: 0 0 20px 0px; }
}



.playbut { width: 100px; height: 100px; background-color: rgba(0,0,0,0.5); border-radius: 10px; z-index: 1000; overflow: hidden; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-image: url("/images/playbut.png"); background-position: center; background-size: 50px; background-repeat: no-repeat; pointer-events: none; }




.darker { background-color: #333; width: 100%; display: block; overflow: hidden; color: #fff; }
    .darker a { color: #00a8ff; }
        .darker a:visited { color: #00a8ff; }
        .darker a:hover { text-decoration: underline; }

    .darker h4 { color: #00a8ff; font-size: 20px; padding: 0;  font-weight: bold; }

.topbar { float: left; width: 100%; padding: 10px 40px 10px 40px; color: #fff; font-weight: bold; font-size: 40px; line-height: 120%; }
.toptext { font-weight: bold; font-size: 54px; line-height: 120%; width: 100%; padding: 10px 0 10px 0; }
.toptext40 { font-weight: bold; font-size: 36px; line-height: 120%; width: 100%; padding: 10px 0 10px 0; }


.backbut { display: inline; font-size: 18px; font-weight: bold; }
    .backbut a { margin: 4px 0 4px 0px; padding: 2px 10px 2px 10px; border: 2px solid #fff; border-radius: 8px; color: #fff; }
        .backbut a:visited { color: #fff; }
        .backbut a:hover { color: #fff; text-decoration: none; background-color: rgba(0,0,0,0.5); }

/*00a8ff */
.watchbut { display: inline; font-size: 18px; font-weight: bold; }
    .watchbut a { margin: 4px 0 4px 10px; padding: 2px 10px 2px 10px; border: 2px solid #fff; border-radius: 8px; color: #fff; }
        .watchbut a:visited { color: #fff; }
        .watchbut a:hover { background-color: rgba(0,0,0,0.5); color: #fff; text-decoration: none; }

.learnbut { display: inline; font-size: 24px; font-weight: bold; position: relative; top: 20px; }
    .learnbut a { margin: 4px 0 4px 10px; padding: 8px 20px 8px 20px; border: 2px solid #fff; border-radius: 8px; color: #fff; }
        .learnbut a:visited { color: #fff; }
        .learnbut a:hover { background-color: rgba(0,0,0,0.5); color: #fff; text-decoration: none; }


.critterbut { font-size: 24px; font-weight: bold; margin: 10px 10px 10px 0; padding: 8px 20px 8px 0px; white-space: nowrap; }
    .critterbut a { margin: 4px 0 4px 0px; padding: 8px 20px 8px 20px; border: 2px solid #00a8ff; border-radius: 8px; color: #00a8ff; text-decoration: none; }
        .critterbut a:visited { color: #00a8ff; text-decoration: none; }
        .critterbut a:hover { background-color: rgba(0,0,0,0.5); color: #fff; text-decoration: none; border-color: #fff; }

.shoprow { display: block; width: 100%; overflow: hidden; }
.shoptext { padding: 0 20px 0 20px; }
.shopframe { border-radius: 12px; border: 2px solid #fff; padding: 20px; width: 100%; display: block; min-height: 270px; overflow:hidden;}
.shop50 { float: left; width: 50%; padding: 0px 20px 0 20px; margin: 0; overflow: hidden; display:block; }
.serviceframe { border-radius: 12px; border: 2px solid #fff; padding: 20px; width: 100%; display: block; }


.game { position: relative; padding: 20px; max-width: 960px; display: block; margin: 0 auto 0 auto; column-count: 2; }

.gameicon { width: 100%; display: block; }
    .gameicon img { width: 150px; border-radius: 20px; }

.gameside { width: 400px; margin: 20px auto 0 auto; }
    .gameside img { max-width: 400px; margin: 10px auto 10px auto; }


.profimg { max-height: 260px; margin: 0 auto 0 auto; text-align: center; display: block; }

.gameside2 { width: 400px; margin: 20px auto 0 auto; }
    .gameside2 img { max-width: 400px; margin: 10px auto 10px auto; border-radius: 20px; border: 4px solid #000; }

.gamelogo { margin: 80px 0 0 0; }
.leftimg { border-radius: 20px; border: 4px solid #000; /*box-shadow: rgba(0,0,0,0.4) -2px 2px 2px; */ display: none; }


.gamelinks { margin: 50px auto 0 auto; text-align: center; }
    /** width: 400px;  margin: 50px auto 0 auto; display:block; }*/
    .gamelinks img { max-width: 256px; }


.gamebuts { position: relative; left: 0px; bottom: 0px; width: 100%; padding: 20px 0 20px 0; background-color: #000; }
    .gamebuts img { width: 256px; margin: 10px; display: inline; }

@media only screen and (max-width: 900px) {
    .game { column-count: 1; }
    /*flex-direction: column-reverse; }*/
    .gameside { max-width: 300px; }
        .gameside img { max-width: 300px; }
    .gameside2 { max-width: 300px; display: none; }
        .gameside2 img { max-width: 300px; }
    .leftimg { display: block; }
    .gamelogo { margin: 20px 0 20px 0; }
    .gamelinks { margin: 20px auto 0 auto; }
    .profimg { max-height: 200px; }
}


a { text-decoration: none; font-size: 20px; color: #00a8ff; text-decoration: none; }
    a:hover { text-decoration: underline; }
    a:visited { color: #00a8ff; }

/**
        #292D35
    #00a8ff


    */

:target { 
    scroll-margin-top: 60px;

}

.servicelogos { }
    .servicelogos img { width: 20%; 
                        max-width:200px; padding: 20px; box-sizing: border-box; filter: grayscale(100%) brightness(0.5); }



.loginbox { color: #ccc; width: 400px; display: block; padding: 40px; border-radius: 8px; margin: 0px auto 0 auto; background-color: rgba(0,0,0,0.7); position: relative; top: 60px; }


.imagehost { position: relative; display: block; height: 50vh; min-height: 400px; width: 100%; background-position: center; background-size: cover; }
    .imagehost img { }
.imagebox { position: absolute; left: 0px; top: 10px; z-index: 1000; color: #fff; font-size: 20px; /*background-color: rgba(1,1,1,0.7); */ background-color: #000; margin: 20px; padding: 20px; max-width: 500px; display: block; }
    .imagebox h1 { color: #00a8ff; font-size: 60px; }


.buynow { background-color: #000; padding: 0px; display: block; width: 180px; border: 0px solid #fff; }
    .buynow a { color: #fff; padding: 0px; }
        .buynow a:hover { text-decoration: none; color: #00a8ff; }
    .buynow:hover { }


.mainlogo2 { position: absolute; right: 20px; top: 16px; transition: opacity 1s; opacity: 1; padding: 0px 0 0px 0; }

.webhost { display: block; width: 100%; overflow: hidden; padding: 10px 0 10px 0; }
.web { margin: 5px 8px 5px 0px; font-weight: bold; font-size: 18px; padding: 2px 10px 2px 10px; float: left; border-radius: 8px; border: 2px solid #888; color: #888; }


.platform { margin: 5px 0 5px 8px; font-weight: bold; font-size: 18px; padding: 2px 10px 2px 10px; display: inline; border-radius: 8px; border: 2px solid #888; color: #888; }

.leftsoon { font-weight: bold; margin: 0 0 0 8px; font-size: 18px; background-color: #090; padding: 1px 10px 1px 10px; display: inline; position: relative; left: 0; top: -10px; border-radius: 6px; }
.leftnew { font-weight: bold; margin: 0 0 0 8px; font-size: 18px; background-color: #f00; padding: 1px 10px 1px 10px; display: inline; position: relative; left: 0; top: -10px; border-radius: 6px; }

.leftnotif { font-weight: bold; margin: 0 0 0 3px; font-size: 18px; background-color: #f00; text-align: center; width: 24px; height: 24px; display: inline-block; position: relative; left: 0; top: -10px; border-radius: 12px; overflow: hidden; }


.leftmenu { z-index: 3001; width: 320px; background-color: #222; color: #00a8ff; position: fixed; left: -370px; top: 0px; bottom: 0px; padding: 60px 0 0 0; height: 100%; overflow-y: scroll; overflow-x: hidden; transition: width 0.5s; transition: left 0.5s; scrollbar-base-color: #000; }
    .leftmenu a { color: #fff; width: 100%; display: block; padding: 4px 20px 4px 30px; text-wrap: none; white-space: nowrap; text-decoration: none; }
        .leftmenu a:hover { background-color: #333; color: #fff; text-decoration: none; }
        .leftmenu a:visited { background-color: #333; color: #fff; text-decoration: none; }

.lefttitle { display: block; width: 100%; padding: 4px 20px 4px 20px; margin: 5px 0 0px; 0; }

.lefticon { width: 40px; text-align: center; float: left; overflow: hidden; }
    .lefticon img { max-width: 24px; max-height: 24px; width: auto; height: auto; margin: 0 auto 0 auto; }

.leftmobilebut { z-index: 6000; padding: 18px 20px 18px 20px; position: absolute; left: 0px; top: 0px; }
.rightcontent { width: 100%; transition: left 1s; position: relative; top: 0; left: 0; }


.mainbut { color: #fff; padding: 0px; position: absolute; right: 20px; top: 14px; z-index: 3000; transition: opacity 1s; opacity: 1; }
    .mainbut a { border-radius: 4px; background-color: #000; color: #fff; text-decoration: none; padding: 10px 15px 10px 15px; margin: 0px 0px 0px 0px; }
        .mainbut a:hover { background-color: #0af; }

html { background-color: #000; }

body { background-color: #000; border: 0; color: #444; font-size: 20px; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; }

.center { text-align: center; }

.hostcanvas2d { display: inline; float: left; position: absolute; width: 100%; height: 100%; z-index: 50; }

h1 { font-size: 40px; font-weight: bold; color: #fff; margin: 20px 0 20px 0; width:100%; display:block; overflow:hidden; padding: 20px 0 20px 0; }
h2 { font-size: 30px; font-weight: bold; color: #fff; margin: 20px 0 20px 0; width:100%; display:block; overflow:hidden;}
h3 { font-size: 20px; font-weight: bold; color: #00a8ff; margin: 20px 0 20px 0; width: 100%; display: block; overflow: hidden; }
h4 { font-size: 20px; font-weight: bold; margin: 0px 0 0px 0; width: 100%; display: block; overflow: hidden; }


.mapcc { margin: 0; padding: 0; box-sizing: border-box; width: 100%; }

.contactbox { position: absolute; right: 20px; top: 160px; padding: 40px; background-color: rgba(0,0,0,0.5); color: #fff; }
    .contactbox a { color: #fff; }


/* the team -----------------------*/
.backgrey { width: 100%; background-color: #333; box-sizing: border-box; display: block; }
.backwhite { width: 100%; background-color: #fff; color: #000; display: block; padding: 0px; box-sizing: border-box; overflow: hidden; }

.backtop { background-color: #6e8296; padding: 20px 20px 20px 20px; width: 100%; color: #fff; font-size: 20px; }


.backcreature { background-image: url("/Images/banner_gameware2.jpg"); width: 100%; height: calc(30vw); background-repeat: no-repeat; background-position: center; background-size: cover; }
.backpond { background-image: url("/Images/robocod1.jpg"); width: 100%; height: calc(50vw); background-repeat: no-repeat; background-position: top center; background-size: cover; }

.backeu { background-image: url("/Images/back11.jpg"); width: 100%; height: calc(50vw); background-repeat: no-repeat; background-position: center; background-size: cover; }

.backava { background-image: url("/Images/ava1.jpg"); width: 100%; height: calc(50vw); background-repeat: no-repeat; background-position: center; background-size: cover; }

.backmonitor { background-image: url("/Images/monitor3.jpg"); width: 100%; height: calc(50vw); background-repeat: no-repeat; background-position: center; background-size: cover; }


.bigclear { width: 100%; position: absolute; top: 60px; z-index: 100; background-color: transparent; padding: 0px; font-size: 20px; color: #fff; overflow: hidden; }


.bigwhite { background-color: #fff; padding: 0px; font-size: 20px; color: #000; overflow: hidden; }

    .bigwhite h1 { color: #00a8ff; }
.biggray { background-color: #6e8296; font-size: 20px; color: #fff; padding: 0px; overflow: hidden; }
    .biggray h1 { color: #fff; }

.bigred { background-color: #fc471e; font-size: 20px; color: #fff; padding: 0px; margin: 20px; overflow: hidden; border-radius: 30px; }
    .bigred a { color: #ffffff; }


.bigblue { background-color: #0483AC; color: #fff; padding: 0px; overflow: hidden; }
    .bigblue h1 { color: #fff; }

.bigdark { background-color: #000; color: #fff; padding: 0px; overflow: hidden; }
    .bigdark h1 { color: #fff; }

.section30 { width: 25%; float: left; padding: 40px; box-sizing: border-box; }
.section70 { width: 75%; float: left; padding: 40px; box-sizing: border-box; }
.section40 { width: 40%; float: left; padding: 40px; box-sizing: border-box; }
.section60 { width: 60%; float: left; padding: 40px; box-sizing: border-box; }

.section100dark { float: left; width: 100%; padding: 0px; background-color: #f0f0f0; }
.section100 { float: left; width: 100%; padding: 10px 40px 20px 40px; }
.section50 { float: left; width: 50%; padding: 20px; }
.section33 { float: left; width: 33%; padding: 40px; }



.teamimage img { border-radius: 125px; width: 250px; height: 250px; }

/*scenes */


.popupfade { position: fixed; left: 0; top: 0; background-color: #000; opacity: 0.25; z-index: 5000; }
.popupscene { position: fixed; display: none; background-color: #fff; z-index: 5001; padding: 60px 0px 60px 0px; box-sizing: border-box; border-radius: 16px; box-shadow: 2px 4px 3px #aaaaaa; }


.scenetop { color: #444; font-size: 20px; margin-bottom: 20px; display: inline-block; width: 100%; }
    .scenetop img { width: 50%; max-width: 520px; float: left; margin-right: 20px; }
.scenetoptitle { font-size: 30px; font-weight: bold; margin-bottom: 0px; }
.scenetopdesc { font-size: 16px; }
.scenetop a { display: block; }
.sceneinfo { display: inline-block; }

.sceneholder { box-sizing: border-box; margin-left: auto; margin-right: auto; display: block; text-align: center; width: 100%; }

.scenebig { background-color: #fff; color: #000; box-sizing: border-box; width: 320px; margin: 10px 10px 10px 10px; padding: 0px; display: inline-block; min-height: 260px; box-shadow: 1px 2px 3px #dddddd; }
.scenetitle { float: left; display: inline; clear: none; color: #fff; background-color: #000; padding: 4px 8px 4px 8px; border-radius: 0px; margin-right: 8px; }

.scenestatus { position: absolute; top: 4px; right: 4px; display: inline; clear: none; color: #fff; padding: 4px 8px 4px 8px; border-radius: 4px; font-weight: bold; }
.scenestatusready { position: absolute; border-radius: 4px; top: 10px; right: 10px; display: inline; clear: none; color: #fff; background-color: #5a5; padding: 4px 8px 4px 8px; }

.scenebigleft { float: left; box-sizing: border-box; float: left; clear: both; display: inline-block; position: relative; left: 0; top: 0; }
/*.scenebigleft img { width: 100%;display:inline;  }
        .scenebigleft img:hover scenetitle a { opacity: 1.0; }*/

.sceneimg img { width: 100%; display: inline; }

.scenebigright { padding: 0px; clear: both; float: left; box-sizing: border-box; display: inline-block; text-align: left; }
.scenedescription { float: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #666; max-width: 300px; font-size: 14px; margin: 0px 0px 0px 10px; }


.sceneicons { width: 100%; clear: both; margin: 10px 0px 10px 10px; color: #fff; display: inline-block; }


.scenedummy { padding: 4px 8px 4px 8px; border-radius: 4px; background-color: #ccc; float: left; margin-right: 4px; font-size: 12px; }

.scenecloud { padding: 4px 8px 4px 8px; border-radius: 4px; background-color: #aa55aa; float: left; margin-right: 4px; font-size: 12px; }
    .scenecloud a { color: #fff; font-size: 12px; text-decoration: none; }


.scenedense { padding: 4px 8px 4px 8px; border-radius: 4px; background-color: #773377; float: left; margin-right: 4px; font-size: 10px; }
    .scenedense a { color: #fff; font-size: 12px; text-decoration: none; }

.scenepoisson { padding: 4px 8px 4px 8px; border-radius: 4px; background-color: #5555aa; float: left; margin-right: 4px; font-size: 12px; }
    .scenepoisson a { color: #fff; font-size: 12px; text-decoration: none; }

.scenemesh { padding: 4px 8px 4px 8px; border-radius: 4px; background-color: #55aaaa; float: left; margin-right: 4px; font-size: 12px; }
    .scenemesh a { color: #fff; font-size: 12px; text-decoration: none; }



/*button*/
input[type="submit"] { border-radius: 4px; padding: 8px 20px 8px 20px; background-color: #222; border: 0px; color: #fff; font-size: 16px; font-family: 'Open Sans','Helvetica', sans-serif; word-break: break-word; margin-right: 0px; }
    input[type="submit"]:hover { background-color: #00a8ff; }

/*textbox*/
input[type="text"], input[type="password"] { margin: 4px 0 0 0; border: 2px solid #292D35; background-color: #222; color: #fff; padding: 6px 10px 6px 10px; font-size: 16px; font-family: 'Open Sans','Helvetica', sans-serif; box-sizing: border-box; }

/*dropdownlist*/
.dropdownlist { border: 2px solid #292d35; padding: 6px 10px 6px 10px; font-size: 16px; font-family: 'Open Sans','Helvetica', sans-serif; }

/*link button*/
.linkbut { }
    .linkbut input[type="submit"] { background-color: #fff; color: #00a8ff; padding: 0px; word-wrap: normal; }
        .linkbut input[type="submit"]:hover { text-decoration: underline; }


h6 { font-size: 20px; font-weight: bold; color: #00a8ff; margin: 0; }




.projecttable { border-collapse: collapse; color: #000; padding: 0px; border: solid 1px #292d35; background-color: #fff; text-align: left; width: 100%; margin-bottom: 10px; }
    .projecttable tr { margin: 0px 0px 0px 0px; border: 0px solid #E4E6EB; }
    .projecttable th { background-color: #292D35; color: #fff; padding: 4px 8px 4px 8px; text-align: left; margin: 0px; font-weight: normal; height: 34px; border: 0px solid #fff; }
        .projecttable th a { color: #fff; }
            .projecttable th a:hover { text-decoration: underline; }
    .projecttable td { padding: 4px 4px 4px 4px; text-align: left; color: #000; border: 0px solid #fff; }
    .projecttable a { background-color: none; display: inline; color: #00a8ff; text-decoration: none; font-weight: normal; }
        .projecttable a:hover { text-decoration: underline; }

.tablecenter { text-align: center !important; }
.tableleft { text-align: left !important; }

/*#292D35   00a8ff */
.pagebutton { }
    .pagebutton a { border-radius: 4px; background-color: #fff; border: 1px solid #ccc; box-sizing: border-box; padding: 4px 10px 4px 10px; color: #ccc; min-width: 60px; float: left; text-align: center; margin: 0px 4px 0px 0px; }

        .pagebutton a:hover { background-color: #ddd; color: #000; text-decoration: none; }



.pagebuttonsel { }
    .pagebuttonsel a { border-radius: 4px; background-color: #00a8ff; border: 1px solid #666; box-sizing: border-box; padding: 4px 10px 4px 10px; color: #fff; min-width: 60px; float: left; text-align: center; margin: 0px 4px 0px 0px; }
        .pagebuttonsel a:hover { background-color: #888; color: #000; text-decoration: none; }


li { margin: 0px 0px 20px 0px; }



.pad { padding: 40px; }
.rightpad { padding: 40px; }

/* ------------------ survey ----------------------------------*/
.survey { background-color: #0af; color: #fff; width: 100%; padding: 20px; display: block; font-size: 18px; float: left; box-sizing: border-box; }
    .survey h1 { color: #fff; font-size: 30px; margin: 0; padding: 0; border: 0; }
.surveybut { display: block; margin-left: auto; margin-right: auto; }
    .surveybut a { margin: 0; border: 1px solid #fff; color: #fff; text-decoration: none; text-align: center; padding: 10px 10px 10px 10px; font-size: 20px; }
        .surveybut a:hover { background-color: #005588; color: #fff; text-decoration: none; }



/* -------------------- main menu---------------------- #292D35*/

.mobilebut { font-size: 40px; user-select: none; display: none; float: left; padding: 10px 0 0 20px; }

.mainmenubody { height: 60px; display: block; width: 100%; }

.mainmenu { z-index: 4000; height: 60px; display: block; width: 100%; padding: 0px; background-color: #000; border: 0; margin: 0; position: fixed; left: 0; top: 0; }
    .mainmenu img { float: left; clear: left; }
.mainmenuimagehost img { margin: -5px 0 0 0; padding: 0 40px 0 20px; }
.mainmenu a { color: #fff; text-decoration: none; }
    .mainmenu a:visited { color: #fff; text-decoration: none; }
    .mainmenu a:hover { color: #00a8ff; text-decoration: none; }

.dropdown { position: relative; display: none; float: left; }
    .dropdown a { text-decoration: none; }
        .dropdown a:hover { text-decoration: none; }

.dropmenu { background-color: transparent; color: #fff; padding: 16px 20px 10px 20px; border: none; cursor: pointer; font-weight: normal; margin: 0px 0px 0px 0px; }
    .dropmenu img { margin: 0px 0px -3px 0px; }

.droptitle { }

.dropdownitems { display: none; position: absolute; background-color: #292D35; min-width: 160px; white-space: nowrap; z-index: 50; /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */ }
    .dropdownitems a { color: #fff; padding: 10px 20px 10px 20px; text-decoration: none; display: block; }
        /*ff7744  1570a6*/
        .dropdownitems a:hover { background-color: #00a8ff; color: #fff; }

.dropdown:hover .dropdownitems { display: block; }
.dropdown:hover .dropmenu { color: #fff; background-color: #292D35; }

/*-------------------api -------------------*/
.apicontents { width: 25%; float: left; padding: 40px; box-sizing: border-box; background-color: #f0f0f0; margin-top: 40px; }
    .apicontents h6 { margin: 0 0 10px 0; }
    .apicontents a { text-decoration: none; color: #000; font-size: 16px; font-weight: bold; margin: 0 0 10px 0; display: block; padding: 0; border: 0; }
        .apicontents a:hover { text-decoration: underline; }

.apimain { width: 75%; float: left; padding: 40px; box-sizing: border-box; color: #000; word-break: break-word; }
    .apimain td { vertical-align: top; padding: 0 10px 0 0; }

.source { background-color: #F6F6F6; padding: 20px; box-sizing: border-box; font-family: 'Courier New'; font-size: 14px; }
    .source h1 { font-size: 14px; font-weight: bold; color: #06f; margin: 0; border: 0; padding: 0; display: inline; }
    /*keyword*/
    .source h2 { font-size: 14px; font-weight: bold; color: #080; margin: 0; border: 0; padding: 0; display: inline; }
    /*comment*/
    .source h3 { font-size: 14px; font-weight: bold; color: #A40; margin: 0; border: 0; padding: 0; display: inline; }
/*string*/

.apiget { background-color: #78CD51; padding: 4px 10px 4px 10px; color: #fff; width: 50px; display: inline; text-align: center; float: left; border-radius: 4px; }
.apipost { background-color: #36A9E1; padding: 4px 10px 4px 10px; color: #fff; width: 50px; display: inline; text-align: center; float: left; border-radius: 4px; }

/*------------------------- 3d viewer*/
.viewbanner { background-color: #292D35; width: 100%; height: 62px; padding: 0px 0px 0px 0px; text-align: center; }
.viewsection { width: 100%; height: 100%; z-index: 500; }

/*----------------------- header bar -------------------------*/

.title { color: #fff; font-size: 26px; }
    .title h1 { font-size: 72px; color: #fff; margin: 0; border: 0; padding: 0; }


.back1 { background-image: url("/Images/back11.jpg"); background-size: cover; background-position-y: top; background-attachment: inherit; background-repeat: no-repeat; min-height: 500px; color: #fff; padding: 40px; }

.backbox { max-width: 400px; /*	background-color:rgba(0,0,0,1);*/ background-color: #292D35; color: #fff; padding: 20px; font-size: 26px; font-weight: normal; }

.back2 { background-image: url("/Images/cover1.jpg"); background-size: cover; background-position: center; background-attachment: inherit; min-height: 500px; color: #fff; background-repeat: no-repeat; padding: 40px; }
.back3 { background-image: url("/Images/back10b.jpg"); background-size: cover; background-position: center; background-attachment: inherit; min-height: 500px; color: #fff; background-repeat: no-repeat; padding: 40px; }
.back4 { background-image: url("/Images/back14.jpg"); background-size: cover; background-position: center; background-attachment: inherit; min-height: 500px; color: #fff; background-repeat: no-repeat; padding: 40px; }
.back5 { background-image: url("/Images/back20.jpg"); background-size: cover; background-position: center; background-attachment: inherit; min-height: 500px; color: #fff; background-repeat: no-repeat; padding: 40px; }
.back6 { background-image: url("/Images/example1.jpg"); background-size: cover; background-position: center; background-attachment: inherit; min-height: 500px; color: #fff; background-repeat: no-repeat; padding: 40px; }


.tickoff { background-color: #aaa; padding: 0px; margin-top: 20px; margin-bottom: 20px; border-radius: 18px; width: 36px; height: 36px; text-align: center; margin-left: auto; margin-right: auto; }

.tickerror { background-color: #aa5555; padding: 0px; margin-top: 20px; margin-bottom: 20px; border-radius: 18px; width: 36px; height: 36px; text-align: center; margin-left: auto; margin-right: auto; }
    .tickerror img { margin-left: 2px; margin-top: 8px; }

.tickon { background-color: #55aa55; padding: 0px; margin-top: 20px; margin-bottom: 20px; border-radius: 18px; width: 36px; height: 36px; text-align: center; margin-left: auto; margin-right: auto; }
    .tickon img { margin-left: 2px; margin-top: 8px; }



.searchbox { background-color: #292d35; padding: 2px 2px 2px 2px; border-radius: 4px; float: right; box-sizing: border-box; margin-top: 10px; font-size: 16px; }
    .searchbox img { margin: 4px 8px 0 0; float: left; }

/* .top2 { width: 100%; height: 68px; background-color: #f00; }*/
.smallbanner { background-color: #3D4351; width: 100%; min-height: 68px; padding: 0px 0px 0px 0px; text-align: center; box-sizing: border-box; }
.transbanner { position: absolute; top: 0; background-color: rgba(0,0,0,0.7); width: 100%; min-height: 0px; box-sizing: border-box; }


.titlebanner { background-color: #3d4351; width: 100%; min-height: 60px; padding: 10px 20px 10px 20px; text-align: left; box-sizing: border-box; display: inline-block; color: #fff; font-size: 40px; }
    .titlebanner a { font-size: 40px; text-decoration: none; color: #fff; margin: 0 0px 0px 0px; }
        .titlebanner a:hover { text-decoration: underline; }
    .titlebanner h1 { color: #fff; }

.mainbanner { background-color: #3D4351; width: 100%; min-height: 100px; padding: 80px 0px 0px 0px; text-align: center; }
    .mainbanner h1 { font-size: 42px; font-weight: normal; color: #fff; }
    .mainbanner a { font-size: 42px; font-weight: normal; text-decoration: none; color: #fff; }

.banner { clear: both; width: 100%; height: 458px; background-image: url("/Images/sliderfade2.png"); background-size: cover; background-position-x: center; background-position-y: center; }

.bannerfbk { clear: both; width: 100%; background-image: url("/Images/banner_fbk.jpg"); background-size: cover; }

.header { box-sizing: border-box; color: #fff; font-size: 20px; }
    .header h1 { color: #fff; margin: 0; padding: 0; }
    .header a { color: #fff; font-size: 20px; text-decoration: none; }
        .header a:hover { color: #fff; text-decoration: underline; }



.headertitle { clear: both; width: 100%; height: 200px; background-color: #00a8ff; padding: 40px; box-sizing: border-box; color: #fff; font-size: 20px; background-image: url("/Images/sliderfade2.png"); background-size: cover; background-position-x: center; background-position-y: center; }


.login { width: 400px; margin-left: auto; margin-right: auto; padding: 40px; }

.logintable { padding: 10px 0 10px 0; }
    .logintable tr { }
    .logintable td { padding: 10px 0 10px 0; }

.text2 { column-count: 2; }
.width960 { max-width: 960px; margin-left: auto; margin-right: auto; word-wrap: break-word; box-sizing: border-box; }
.pad { padding: 20px; }

.fullsectiondark { width: 100%; clear: both; background-color: #f0f0f0; display: block; }
.fullsection { width: 100%; clear: both; display: block; box-sizing: border-box; }

.floatleft { float: left; }
.floatright { float: right; }


.datesection { width: 25%; float: left; padding: 10px; box-sizing: border-box; text-align: right; }
    .datesection a { text-decoration: none; color: #fff; }


.datemonth { background-color: #3D4351; width: 120px; height: 20px; font-size: 20px; color: #fff; padding: 5px 5px 0px 5px; text-align: center; border-radius: 4px 4px 0 0; }
.dateday { background-color: #3D4351; width: 120px; height: 50px; font-size: 42px; color: #fff; padding: 0px 5px 5px 5px; text-align: center; }
.dateyear { background-color: #292D35; width: 120px; height: 30px; font-size: 20px; color: #fff; padding: 5px; text-align: center; border-radius: 0 0 4px 4px; }

.newssection { width: 75%; float: left; padding: 10px 10px 0 10px; box-sizing: border-box; overflow: visible; }
/*newssection img { padding: 10px 0 10px 0; width: 100%; }*/

.newsbut { margin: 20px 0 0 0; }
    .newsbut a { background-color: #292D35; color: #FFF; padding: 6px 20px 6px 20px; text-decoration: none; border: 0px; border-radius: 4px; }
        .newsbut a:hover { background-color: #00a8ff; }

.newsshot { max-height: 400px; max-width: 100%; float: left; margin: 20px 20px 20px 0; /*box-shadow: rgba(0,0,0,0.4) -4px 4px 4px;*/ border-radius: 14px; border: 3px solid #000; }


.gamesection { width: 100%; position: relative; background-color: #004; display: block; overflow: hidden; }

.gameleft { border: 4px solid #0f0; position: absolute; }
.gameportrait { border: 4px solid #f00; position: absolute; }
.gameright { border: 4px solid #00f; position: absolute; }


.rogue1header { background-image: url("/images/games/rogue_header.jpg"); width: 100%; height: 60vw; min-height: 300px; max-height: 620px; background-position: center; background-repeat: no-repeat; background-size: cover; }
    .rogue1header img { width: 35vw; max-width: 350px; position: absolute; right: 10px; bottom: 10px; z-index: 2000; }
.roguetext { font-size: 30px; }


.videoheader { position: relative; background-color: #000; 
               width: 100%; height: 56.25vw; max-height: 620px; 
               min-height: 210px; background-position: center; 
               background-repeat: no-repeat; background-size: cover;
               
}
    .videoheader video { margin: 40px 0 40px 0; }

.videobut { position: absolute; left: 10px; bottom: 10px; z-index: 1050; }
    .videobut img { width: 60px; padding: 12px; z-index: 1060; }
        .videobut img:hover { background-color: rgba(0,0,0,0.5); }

.newsheader { background-image: url("/images/news_header.jpg"); width: 100%; height: 35vw; min-height: 200px; max-height: 450px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }

.aboutheader { position: relative; background-image: url("/images/header_about.jpg"); width: 100%; height: 45vw; min-height: 200px; max-height: 550px; background-position: center; background-repeat: no-repeat; background-size: cover; }

/*but for default page saying explore etc*/
.defaultbut { padding: 20px 40px 20px 40px; z-index: 2500; position: absolute; left: 0px; bottom: 0px; white-space: nowrap; background-color: rgba(0,0,0,0.5); }
    /*padding: 20px 40px 20px 40px; text-decoration: none; z-index: 2500; background-color: rgba(0,0,0,0.5); border-radius: 0px; font-weight: 
        normal; font-size: 20px; position: absolute; left: 0px; bottom: 0px; white-space: nowrap; }
*/
    .defaultbut a { padding: 20px 40px 20px 40px; color: #fff; text-decoration: none; margin: 0; }
        .defaultbut a:visited { color: #fff; }
        .defaultbut a:hover { text-decoration: none; color: #00a8ff; background-color: #000; }

.defaultsoon { position: absolute; right: 0px; top: 0px; z-index: 2000; padding: 5px 10px 5px 10px; background-color: #f00; font-weight: bold; border-radius: 0px; }

.vig { z-index: 1000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 100px rgba(0,0,0,0.95) inset; }

/*  <292d35*/
.footer { clear: both; display: block; background-color: #000; color: #999; margin: 0; width: 100%; float: left; }
    .footer a { color: #fff; text-decoration: none; }
        .footer a:visited { color: #fff; }
        .footer a:hover { color: #00a8ff; }

    .footer img { margin-top: 8px; }

.footercontainer { display: flex; justify-content: center; }
.footercontent50 { display: block; float: left; width: 340px; padding: 20px 20px 0 20px; text-align: left; box-sizing: border-box; }
.footerinfo { text-align: left; }
.footercopy { text-align: center; padding: 10px; clear: both; }
    .footercopy a { color: #999; }
        .footercopy a:visited { color: #999; }
        .footercopy a:hover { color: #00a8ff; }


.footersection { width: 100%; box-sizing: border-box; padding: 10px; background-color: #000; }

.footericon { margin: 0 10px 0 10px; }
    .footericon img { width: 60px; height: 60px; }

.footersocial { width: 100%; display: block; text-align: center; margin-left: auto; margin-right: auto; }
    .footersocial img { padding: 0px 10px 0px 10px; display: inline; }


.div20 { width: 100%; display: block; overflow: hidden; height: 20px; }
.div40 { width: 100%; display: block; overflow: hidden; height: 40px; }

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

    .section60 { width: 100%; float: none; }
    .section40 { width: 100%; float: none; padding: 40px 40px 0 40px; }

    .contactbox { position: inherit; float: left; right: initial; top: initial; width: 100%; background-color: #444; }

    .mainmenuimagehost img { display: none; }
    
    .width960 { width: 100%; }
       
    .apicontents { width: 100%; }
    .apimain { width: 100%; }
    .text2 { column-count: 1; }

    .roguetext { font-size: 25px; }

    .toptext40 { font-size: 30px; }

    .shop50 { padding: 0px 10px 0px 10px; }
}


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

    
    .shop50 { width: 100%; float: none; margin-bottom:20px;}
}

@media only screen and (max-width: 700px) {
    .section50 { width: 100%; float: none; }
}

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

        .footercontainer { display: block; }
        .footercontent50 { width: 100%; float: none; clear: both; padding: 20px; }
        .footerinfo { text-align: center; }

        .servicelogos img { width: 30%; }

        .imagebox { padding: 20px; }

        .topbar { padding: 20px; }

        .section100 { padding: 10px 10px 20px 10px; }
        .section50 { padding: 15px; }
        .section40 { padding: 15px; }
        .section60 { padding: 15px; }
        .shop50 { padding: 0px 10px 0px 10px; }
        .shoptext { padding: 0px; }

        .footerinfo { text-align: center; }

        .datesection { width: 100%; padding: 0 5px 0 5px; text-align: left; }
        .newssection { width: 100%; padding: 0 5px 0px 5px; }

        .rightpad { padding: 0px 40px 40px 40px; }

        /* .rogue1header { height: 350px; }*/
        /*  .rogue1header img { width: 180px; }*/
        .roguetext { font-size: 22px; }
    }