/*------------------------------------------------
   basic css , complete on Index inline
-------------------------------------------------*/
html, body{
margin:auto;
font-family:sans-serif;
font-size:20px;
font-weight:lighter;
text-align:left;
color:black;
background-size:cover;
	background-color:black;
}

.bgIMG {
position:fixed; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:100%;
height:100%;
background-size:cover;
z-index:-1;
transition: background-image 0.0s ease-in-out;
}
.PageTop {
margin-top: -10px;
width: 100%;
font-size: 36px;
font-weight: lighter;
opacity: 1;
}
hr {
padding:0;
margin:0;
opacity:0.7;
}

#defaultItem{
position:relative; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:1345px;	
font-size:34px;
display:block;
color:white;
text-decoration:none;
border:4px solid white;
}
#defaultDesc {
position:relative;
margin:0px 0px -2px 0px;
display:block;
width:1215px;
left:100px;
bottom:25px;
font-size:22px;
font-weight:lighter;
opacity:0.7;
}
.item {
position:relative; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:1345px;
}
.item a {
font-size:34px;
display:block;
color:white;
text-decoration:none;
border:4px solid transparent;
}
.item a:hover { 
width:1345px;
border:4px solid white;
}
.iconZ {
font-family:'Icons';
font-weight:normal;
font-style:normal;
font-size:55px;
display:inline-block;
line-height:1;
text-transform:none;
letter-spacing:normal;
word-wrap:normal;
white-space:nowrap;
direction:ltr;
padding:12px 15px 12px 20px;
vertical-align:middle;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.Title {
padding:3px 0px 25px 10px;
margin:0px 0px -15px 0px;
width:1000px;
display:inline-block;
vertical-align:middle;
}
.Desc {
position:relative;
margin:0px 0px -2px 0px;
display:none;
width:1215px;
left:100px;
bottom:25px;
font-size:22px;
font-weight:lighter;
opacity:0.7;
}
.item a:hover .Desc{ 
display:block;
}
.Divider {
width:1260px;
margin:-3px 0px -2px 90px;
vertical-align:middle;
border-style:solid;
border-width:2px 0px 2px 0px;
border-color:transparent transparent rgba(255, 255, 255, 0.3) transparent;
}
.exploitWIN {
position:fixed; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%; 
min-width:100%;
min-height:100%;
overflow:hidden;
}
.txt1 {
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:900;
height:30;
top:0;
bottom:100;
font-size:32px;
text-align:center;
color: yellow;
text-shadow: 4px 4px 4px black;
}
.container {
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:1000px;  
height:15px;
top:80;
border:2px solid rgba(255,255,255,0.6);
background-color:#000000;
}
.txt2 {
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:600;
height:30;
top:180;

font-size:28px;
font-weight:bold;
text-align:center;
text-shadow: 4px 4px 4px black;
opacity:0.7;
}
.AniGif {
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:1000px;
height:15px;
top:80;
border:2px solid rgba(255,255,255,0.6);
}

.Ani0 {
position:absolute;
width:500px;
height:100%;
top:0;
animation:slidez0 2s;
animation-direction:normal;
animation-timing-function:ease-out;
animation-fill-mode:forwards;
}
.Ani1 {
position:absolute;
width:300px;
height:100%;
top:0;
animation:slidez1 1s;
animation-direction:normal;
animation-timing-function:ease-out;
animation-fill-mode:forwards;
}
.Ani2 {
position:absolute;
width:300px;
height:100%;
top:0;
animation:slidez2 1s;
animation-direction:normal;
animation-timing-function:ease-out;
animation-fill-mode:forwards;
}
.Ani3 {
position:absolute;
width:300px;
height:100%;
top:0;
animation:slidez3 1s;
animation-direction:normal;
animation-timing-function:ease-out;
animation-fill-mode:forwards;
}
.AniDone {
position:absolute;
width:300px;
height:100%;
top:0;
animation:slidez4 1s;
animation-direction:normal;
animation-timing-function:ease-out;
animation-fill-mode:forwards;
}
@keyframes slidez0 {
from {left:0px; width:0px; background:rgba(255,255,255,0.9);}
to {left:0px; width:500px;background:rgba(255,255,255,0.9);}
}
@keyframes slidez1 {
from {left:0px; width:0px; background:rgba(255,255,255,0.9);}
to {left:0px; width:300px;background:rgba(255,255,255,0.9);}
}
@keyframes slidez2 {
from {left:0px; width:301px; background:rgba(255,255,255,0.9);}
to {left:0px; width:500px;background:rgba(255,255,255,0.9);}
}
@keyframes slidez3 {
from {left:0px; width:501px; background:rgba(255,255,255,0.9);}
to {left:0px; width:850px;background:rgba(255,255,255,0.9);}
}
@keyframes slidez4 {
from {left:0px; width:851px; background:rgba(255,255,255,0.9);}
to {left:0px; width:1000px;background:rgba(255,255,255,0.9);}
}
#Tick {margin:auto;
display:inline-block;
vertical-align:middle;
height:50px;
width:50px;
border:0px solid #ccc;
}

.info {
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:1200px;
height:30px;
bottom:180px;
font-size:32px;
text-align:center;
}
.txt {
position:absolute;
left:235px;
top:390px;
width:265px;
height:54px;
text-align:center;
font-weight:normal;
line-height:24px;
letter-spacing:2px;
padding:3 0 0 0;
z-index:100;
}
#cacheInfo{
position:absolute;bottom:10px;left:15px;font-size:32px;text-shadow: 4px 4px 4px black;font-weight:bold;display:inline-block;z-index:1;
}

#CacheProgress {
position:fixed;left:0;right:0;top:50;bottom:10px;max-width:100%;max-height:100%;margin:auto;
width:1076px;height:15px;
background-color:#1B3D8F;box-shadow:0 0 0 2px #BBCEEF;
}
#CacheBar {
width:0%;height:100%;background-color:green;
}
.cacheUPDbg {transition:opacity 1000ms;
position:fixed;left:0;right:0;top:0;bottom:0;max-width:100%;max-height:100%;margin:auto;	
width:100%;height:100%;
background:url("1.jpg");
opacity:1;display:none;z-index:900;
}
.cacheUPD {
position:fixed;left:0%;right:0;top:280px;bottom:0px;max-width:100%;max-height:100%;margin:auto;	
width:1100px;height:400px;
line-height:30px;align-items:left;
font-family:sans-serif;font-size:32px;text-shadow: 4px 4px 4px black;text-align:center;color:white;z-index:901;
}

#msgs2 {
 font-weight:bold;
 text-shadow: 4px 4px 4px black;
 padding-right: 00px;
 margin-right: 00px;
 font-size:17px;
}
.pointer {cursor: pointer;}

#msgs {
text-shadow: 4px 4px 4px black;
 font-size:32px;
}
#done {
text-shadow: 4px 4px 4px black;

 font-size:32px;
}
#fail {
text-shadow: 4px 4px 4px black;
 font-size:32px;
}
.card {
 width:12%;
 margin:6.5px;
 background:rgba(0,0,0,0.5);
 display:inline-block;
 margin-left:15px;
}
.card-action div{
 font-size:15px;
 line-height:20px;
}
 .alert 
{
    display:inline-block;
    width: 70%;
    height:8%; 
    margin: auto;
    text-align: center;
    padding: 5;
    background-color: rgba(255, 0, 0, 0.3);/* red with opacity */
  }