html, body { height: 100%; width: 100%; }
body { margin:0; padding:0; background-color: #FFFFFF; overflow: hidden; font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 500; color: #909090;}

a { text-decoration: none; }

#bg_prod { width: 100%; height: 100%; box-sizing: border-box;  overflow: hidden; background:#303030}

@media all and (min-width: 1081px)  {

#bg_prod { position: fixed; top:0; left:0; right:0; bottom:0; z-index: 10; background-position: 30% 50%; background-repeat: no-repeat; background-size: cover; -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear; transition: all 0.7s linear;  }

.moire { filter: blur(14px); -webkit-filter: blur(14px); }

#loading { position: fixed; z-index: 15; top: 0; left: 0; text-align: center; bottom:0; right:0; width: 300px; height: 90px; background: rgba(0,0,0,0.3); border-radius:9px; box-sizing: border-box; margin: auto; }
#loading div { position: absolute; height: 20px; top: 0; left: 0; bottom:0; right:0;  margin: auto; }
#loading div span , #loading div i { display: inline-block; vertical-align: middle; }
#loading div i { color: #95a78d; font-size: 22px; }
#loading div span  {color: #D3D3D3; font-size: 18px; font-weight: 300; margin-left: 10px;  }

#toolbox { position: fixed; overflow: auto; display: none; z-index: 20; background: rgba(0,0,0,0.88);   transition: all 0.5s ease-in-out; border-radius: 3px; padding: 10px; right: 10px; top: 10px; bottom: 10px; width: 25%; }
 
#toolbox.hidden { right: -24%;    }
#toolbox.opaq { opacity: 0.24;    }

#tasss {  display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; }
.tgrp { display: inline-block; vertical-align: top; padding-bottom: 50px;}
.tgrp .a { font-size: 16px; color: #D8D8D8; padding: 1px 0 12px 2px; }

.asset { display: block; margin-bottom: 12px; text-align: center; }
.asset:hover div , .asset.sel:hover div , .asset.sel div { transition: all 0.1s  }
.asset:hover span , .asset.sel:hover span , .asset.sel span  { color: #bae33e; }
.asset div {  display: block; margin: auto; overflow: hidden; width: 46px; height: 46px; border-radius: 40px; box-shadow: 0 0 3px 1px #4a4a4a; text-align: center; position: relative; background-color: transparent; }
.asset div img {  width: 100%; height: auto; display: block;  margin: auto; }
.asset span  { display: block; height: 26px; line-height: 26px; border-bottom: 0 none; vertical-align: middle; color: #4e4e4e; margin: 0 0 0 5px; }


#load_assets { display: none; position: fixed; top:0; left:0; width: 150px; height: 60px; z-index: 30; opacity: 0.2; background: #FFFFFF; color: #000000; font-size: 11px; overflow: hidden; }
#load_assets img { width: 20px; height: 20px; }

#logo { margin: 10px auto 30px auto; width: 60%; display: block;}
#logo img  { width: 100%; height: auto; }

#buttons {   padding-left: 10px; padding-right: 10px; box-sizing: border-box;  min-height: 30px;   }
.btn { height: 30px; line-height: 30px; margin-right: 50px;  }
.btn:hover span { text-decoration: underline; color: #FFFFFF }
.btn i , .btn span { vertical-align: middle; display: inline-block; }
.btn i { color: #94a68c ; margin-right: 6px; font-size: 22px;}
.btn span { color: #D0D0D0 ; font-size: 14px; font-weight: 300 }
#info {   }
#download {   }
#download_m { display: none !important }

#hide { position: fixed; top: 10px; right: 32px; z-index: 10000; }
#hide:hover i  { color: #ffffff }
#hide i {color: #94a68c ; font-size: 22px; }

#show_m { display: none !important; }
#show {position: fixed; top: 50%; right: 34px; display: none; z-index: 10000; }
#show:hover i  { color: #ffffff }
#show i {color: #94a68c ; font-size: 42px; }


#infobox { position: fixed; z-index: 40; top: 100px; left: 20%; width: 40%; box-sizing: border-box; padding: 24px 19px; border-radius: 5px; background-color: #94a68c; }
#infobox a { color: #ffffff;  }
#infobox .a { color: #ffffff; font-weight: 400; font-size: 20px;  }
#infobox .b { color: #f0f0f0; font-weight: 400; font-size: 14px; padding-top: 10px; line-height: 22px;  }
#infoclose { top:10px; right: 12px; position: absolute; }
#infoclose:hover i  { color: #ffffff }
#infoclose i { color: #e0e0e0 ; font-size: 18px; }

#cdiv { opacity:1; display: none; }

}

@media all and (max-width: 1080px)  {

#bg_prod { background-position: 29% 0; background-repeat: no-repeat;    background-size: auto 80%;  xxbackground-size: cover; -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear; transition: all 0.7s linear; transition: all 0.7s linear; }

#bg_prod {   }

.moire { filter: blur(14px); -webkit-filter: blur(14px); }

#loading { position: fixed; z-index: 15; top: 0; left: 0; text-align: center; bottom:0; right:0; width: 300px; height: 90px; background: rgba(0,0,0,0.3); border-radius:9px; box-sizing: border-box; margin: auto; }
#loading div { position: absolute; height: 20px; top: 0; left: 0; bottom:0; right:0;  margin: auto; }
#loading div span , #loading div i { display: inline-block; vertical-align: middle; }
#loading div i { color: #95a78d; font-size: 22px; }
#loading div span  {color: #D3D3D3; font-size: 18px; font-weight: 300; margin-left: 10px;  }

#toolbox { position: fixed; box-sizing: border-box; overflow: auto;  display: none; z-index: 20; background: rgba(0,0,0,0.8); transition: all 0.35s ease-in-out; border-radius: 3px; padding: 20px 10px 10px 10px; right: 0; left:0; top: 10%; bottom: 0;  }
#toolbox.hidden_m { top: 90%; bottom: -120%; }


#tasss {  display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; }
.tgrp { display: inline-block; vertical-align: top; padding-bottom: 50px;}
.tgrp .a { font-size: 16px; color: #D8D8D8; padding: 1px 0 12px 2px; }

.asset { display: block; margin-bottom: 5px; text-align: center; }
.asset:hover span , .asset.sel:hover span , .asset.sel span  { color: #bae33e;  transition: all 0.1s }
.asset div { margin: auto; text-align: center; position: relative; background-color: transparent; width: 49px; height: 49px; border-radius: 45px; overflow: hidden; box-shadow: 0 0 3px 1px #4a4a4a; }
.asset div img { width: 100%; height: auto; margin: auto; display: block; }
.asset span  { height: 26px; line-height: 26px; display: block; vertical-align: middle; color: #5c5c5c; margin: 0 0 0 5px; }


#load_assets {display: none; position: fixed; top:0; left:0; width: 150px; height: 60px; z-index: 30; opacity: 0.2; background: #FFFFFF; color: #000000; font-size: 11px; overflow: hidden; }
#load_assets img { width: 20px; height: 20px; }

#logo { width: 40%; display: block;}
#logo img  { width: 100%; height: auto; }

#buttons {  padding-left: 10px; padding-right: 10px; box-sizing: border-box;  min-height: 30px;   }
.btn { height: 30px; line-height: 30px; }
.btn:hover span { text-decoration: underline; color: #FFFFFF }
.btn i , .btn span { vertical-align: middle; display: inline-block; }
.btn i { color: #94a68c ; margin-right: 6px; font-size: 22px;}
.btn span { color: #D0D0D0 ; font-size: 14px; font-weight: 300 }
#info { float: left }
#download { display: none !important; }
#download_m { float: right }

#hide { position: fixed; top: 8%; left: 0; right:0; z-index: 10000; margin: auto; text-align: center; display: none; }
#hide:hover i  { color: #ffffff }
#hide i {color: #94a68c ; font-size: 32px; }

#show { display: none !important; }
#show_m { position: fixed; top: 88%; left: 0; right:0; z-index: 10000; margin: auto; text-align: center; display: block;}
#show_m:hover i  { color: #ffffff }
#show_m i {color: #94a68c ; font-size: 42px; }


#infobox { position: fixed; z-index: 40; top: 5%; left: 10%; right: 10%; bottom:5%; box-sizing: border-box; padding: 24px 19px; border-radius: 2px; background-color: #94a68c; }
#infobox .a { color: #ffffff; font-weight: 400; font-size: 20px;  }
#infobox .b { color: #f0f0f0; font-weight: 400; font-size: 14px; padding-top: 10px; line-height: 22px;  }
#infoclose { top:10px; right: 12px; position: absolute; }
#infoclose:hover i  { color: #ffffff }
#infoclose i { color: #e0e0e0 ; font-size: 18px; }

#cdiv { opacity:0; display: none; }




















}