@viewport {
	  width: device-width ;
	  zoom: 1.0 ;
	}
	@-ms-viewport {
  		width: device-width ;
	}

.dot {
    position:absolute;top:100px;left:-100px;
  height: 20px;
  width: 20px;
   /* opacity:.8;*/
background: rgb(255,204,0);
background: radial-gradient(circle at 40% 40%, rgba(255,204,0,1) 10%, rgba(253,29,29,1) 78%, rgba(57,0,0,1) 100%);
    border:#161616 .5px solid;
  border-radius: 50%;
  display: inline-block;
    box-shadow: 2px 4px 12px #000;
    text-align:center;margin:auto;font-size:.8em;font-family:Verdana;
}

.wrapClass { background:#666677;
    background: linear-gradient(90deg, #899 0%, #667 30%, #667 70%, #899 100%);
    padding-top:3%;padding-bottom:3%;
    height:75%;width:93%;
    margin-left:3%;margin-top:3%;
    border:#000 1px solid; 
    /*border-radius: 50%;*/
}
.gridBoxClass {
    height:100%;width:100%;opacity:1;
    background: #444;
    background: linear-gradient(0deg, rgba(82,32,32,1) 0%, rgba(120,120,120,1) 60%, rgba(72,52,52,1) 100%);
    box-shadow: 0 4px 12px #000;
    position:relative;
    /*border-radius: 50%;
    overflow:hidden;*/
}
.wrap2Class {
    margin-top:1%;margin-left:5%;
}
.lineClass {
    height:2px;width:100%;background:#000;position:absolute;top:-100px;left:0;opacity:.3;
}



@media screen and (max-width: 800px) {
    /* comes into effect for screens less than or equal to 320 pixels */ 
    body {
        padding:0;
        margin:0;
        overflow: hidden;
        background:#000;
    }
    .wrapClass {
        background:#000;
        background: linear-gradient(90deg, #000 0%, #000 100%);
        padding-top:8px;padding-bottom:0;
        height:100%;width:100%;
        margin-left:0;margin-top:0;
        border:0;
        border-radius: 0%;
        /*border:yellow 2px solid;*/
    }
    .gridBoxClass {
        /*margin-top:2%;margin-bottom:2%;height:98%;*/
    }
    .textboxClass {
        border-radius: 0%;
    }
    .wrap2Class {
        display:none;
    }
}