@import url("style.layout.css");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700");
/*old**/
.opt .button { background: #bebebe4d;}
/* new */
body{-webkit-font-smoothing: antialiased; font-family: 'Poppins',sans-serif;
	--vis2:#bea056;
	--wht: #fff;
	--blk: #000;
}
nav{ display: flex; z-index: 3; justify-content: space-between; align-items: center; background: var(--blk); color: var(--wht); font-size: 12px;}
nav big > div, nav h2, .dark { color: var(--vis2); }
nav big { font-size: 100%; }
nav input, nav small, nav big, nav h2 { width: 33.3%; }
nav input { border-radius: 5px; padding: 11px; border: 1px solid #d8d2c0; }
nav big > div { font-size: 16px; font-weight: 700; }
nav small {  font-family: monospace; font-family:16px;  }
nav small.soon, nav small.rush { font-size: 21px; }
nav small.rush { text-shadow: 0 0 15px #F00, 0 0 15px #F00; }
nav.home {background:transparent; }
.dark{ background-color: rgba(0,0,0,0.93); font-size:initial;  }
.dark b{ top: -1px; border-left: 2px solid var(--vis2); border-bottom: 2px solid var(--vis2); margin-right: 4px; }
.dark b:after{    position: absolute; content: ''; border: 7px solid rgba(0,0,0,0); border-bottom: 7px solid var(--vis2); top: -11px; left: -8px;}
.grp > b { font-size: 100%; font-weight: bold; letter-spacing: 2px; font-family:inherit;
    text-transform: uppercase; color: rgb(93, 68, 13); border-bottom: 1px solid var(--vis2); padding-bottom: 10px; margin-bottom: 10px;}
.opt{grid-gap: 0; padding: 0;}
.opt > div { padding: 10px; color: var(--wht); background: var(--vis2); font-size: 14px; }
.opt.sel > div { background-color: #f3f3f3; color: #989898;  }
.opt div.on { position: relative; background: var(--blk); color: var(--wht); font-weight: normal;}
.pop {  max-width: 500px; margin: 0 auto; border-radius: 0; box-shadow: 0 4px 6px #0000004a; background: #000; color: #fff; }
.pop h2, .pop label, .pop .x { color:var(--wht); }
.pop .x { background: #ffffff3b; width: 40px; height: 40px; text-align: center; line-height: 40px; font-weight: 500; top: -2; right: 0; font-size: 20px; }
.pop h2 { text-align:center; padding: 0 0 7px; margin: 20px 0; border-bottom:1px solid var(--vis2);}
.pop label { font-size: 12px; font-weight: bold; color: var(--vis2); }
ul li { background-color: #a8b2b9; padding: 4px; width: 19px; line-height: 20px; font-size: 12px; margin-right:2px;}
li.good { background-color: var(--vis2); }
ul.foot {background: var(--blk); color: var(--wht); }
ul.foot li { margin: 1px; }
li.best { background: #21c7c3;}

.dark > div {padding: 76px 0 58px 27px;z-index: 1;}
.dark .logo{
	padding:0; margin:0;width: 350px; height:134px; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index:1;
	background:url('logo.2020.png') no-repeat; background-size:cover;
}

video { position: absolute; min-width: 100%; min-height: 100%; width: auto!important; height: auto!important; top: 50%; left: 50%; object-fit: contain; transform: translate(-50%,-50%); }
.dark:after{content: '';top: 0;left: 0;width: 100%;height: 100%;position: absolute; background: linear-gradient(#00000078 40%,#000 100%);}

@media only screen and (min-width: 760px){
	.pop { top:30px; }
	.pop img { width: 300px; }
	.pop_bg{z-index:3; left:0;right:0;top:0;bottom:0;position:fixed; background:linear-gradient(90deg,var(--wht),var(--blk),var(--wht)) }
}

@media only screen and (max-width: 768px){
    .pop{left:0;top:0;height:100vh;z-index:3;right:0; overflow:scroll;}
    nav input {padding: 9px 11px;}
    .pop img {width: 210px;}
    .dark .logo {width: 200px; height:77px;}
    .dark:after{content: '';top: 0;left: 0;right:0;bottom: 100%;position: absolute;background: background: linear-gradient(#00000078 40%,#000 100%); }
}