@charset "utf-8";
/* CSS Document */
* {
    transition: ease .2s;
}
:root {
    --bg-col-sol1:rgba(18,18,18,1);
    --bg-col-sol2:rgba(33,33,33,1);
    --bg-col-sol3:rgba(66,66,66,1);
    --bg-col-faint1:rgba(18,18,18,.3);
    --bg-col-faint2:rgba(33,33,33,.3);
    --bg-col-faint3:rgba(66,66,66,.3);
    --bg-col-main1:rgba(18,18,18,.5);
    --bg-col-main2:rgba(33,33,33,.5);
    --bg-col-main3:rgba(66,66,66,.5);
    --bg-col-main4:rgba(18,18,18,.7);
    --bg-col-shad1:rgba(0,0,0,.7);
    --bg-col-shad2:rgba(33,33,33,.5);
    --bg-col-glow:rgba(255,255,255,.7);
    --text-col-sol1:rgba(255,255,255,1);
    --text-col-sol2:rgba(250,250,250,1);
    --text-col-main1:rgba(255,255,255,.7);
    --text-col-main2:rgba(250,250,250,.7);
    --text-col-alt1:rgba(18,18,18,1);
    --text-col-alt2:rgba(18,18,18,.7);
    --text-col-glow:rgba(255,255,255,.5);
    --bg-col-fd1:rgba(255,143,0,1);
    --bg-col-fd2:rgba(255,143,0,.5);
    --bg-col-fdd1:rgba(81,45,168,1);
    --bg-col-fdd2:rgba(81,45,168,.5);
    --bg-col-ld1:rgba(0,121,107,1);
    --bg-col-ld2:rgba(0,121,107,.5);
    --bg-col-mic1:rgba(2,136,209,1);
    --bg-col-mic2:rgba(2,136,209,.5);
    --bg-col-noreq1:rgba(213,0,0,1);
    --bg-col-noreq2:rgba(213,0,0,.5);
    --bg-col-chkbox1:rgba(250,250,250,.3);
    --bg-col-chkbox2:rgba(76,175,80,1);
    --bg-col-chkbox3:rgba(76,175,80,.5);
    --bg-blur:10px;
    --bg-night-blur:10px;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
    position: fixed;
    right:0;
    transition: ease .2s;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0,0,0,.7); 
  border-radius: 0px;
    transition: ease .2s;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(250,250,250,.1); 
  border-radius: 0px;
    transition: ease .2s;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(250,250,250,.2); 
    transition: ease .2s;
}
html {
    padding:0;
    margin:0;
    font-family: "Product Sans","Roboto","Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
}
body {
    background: url(../images/background.png) rgba(33,33,33,1);
    background-position:top;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-blend-mode: normal;
}
#comingsoon {
    background:rgba(0,0,0,.3);
    height:200px;
    width:200px;
    position:fixed;
    top:50%;
    left:50%;
    display:inline-block;
    border-radius: 100%;
    box-shadow: inset 0px 0px 10px 1px rgba(0,0,0,0.3);
    font-family: "Roboto","Segoe UI",Arial,sans-serif;
    transform-origin: center;
    transform: translate(-50%,-50%);
}
#comingtext {
    height: auto;
    width:auto;
    margin: auto;
    display:inline-block;
    transform-origin: center;
    transform: translate(-50%,-42%);
    position: absolute;
    top:50%;
    left:50%;
}
.coming {
    text-align: center;
    color:rgba(255,255,255,1);
    font-size: 24px;
    display:block;
}
.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%,-50%);
    width: 100%;
    min-height: 1080px;
}
@media (max-width:1920px) {
    .fullscreen-bg__video {
        height:100%;
        width:auto;
    }
}
nav {
    width:calc(100% - 10px);
    height:100px;
    background:var(--bg-col-main4);
    backdrop-filter:blur(20px);
    position:sticky;
    top:0px;
    left:5px;
    margin-top:10px;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.7);
    border-radius:50px 10px 10px 50px;
    z-index:10000;
}
.primary-nav.sticking {
    width:100%;
    height:100px;
    background:var(--bg-col-sol1);
    position:sticky;
    top:0px;
    left:0px;
    box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
    border-radius:0px;
    z-index: 10000;
}
.light {
    width:25%;
    margin:0;
    height:100px;
    position:absolute;
    z-index:-1;
    user-select: none;
    top:0;
    left:0;
    box-shadow:0px 0px 0px rgba(0,0,0,0);
    transition-duration: 0s !important;
}
.redl {
    top:0;
    left:0;
}
.greenl {
    top:0;
    left:25%;
}
.yellowl {
    top:0;
    left:50%;
}
.bluel {
    top:0;
    left:75%;
}
.primary-nav.sticking .redl {
    top:0;
    left:0;
    box-shadow:0px 10px 50px rgba(244,67,54,.7);
    transition-duration: 0.2s !important;
}
.primary-nav.sticking .greenl {
    top:0;
    left:25%;
    box-shadow:0px 10px 50px rgba(76,175,80,.7);
    transition-duration: 0.2s !important;
}
.primary-nav.sticking .yellowl {
    top:0;
    left:50%;
    box-shadow:0px 10px 50px rgba(255,235,59,.7);
    transition-duration: 0.2s !important;
}
.primary-nav.sticking .bluel {
    top:0;
    left:75%;
    box-shadow:0px 10px 50px rgba(33,150,243,.7);
    transition-duration: 0.2s !important;
}
.primary-nav.sticking .glowblock {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100px;
    z-index:-1;
    background:var(--bg-col-sol1);
    transition-duration: 0s !important;
}
#navimg {
    height:100px;
    width:100px;
    overflow:hidden;
    margin:0;
    display: inline-flex;
}
#dwslogo {
    height:90px;
    margin-top:5px;
    margin-left:5px;
    border-radius:100%;
    box-shadow:
    0px 0px 10px rgba(255,255,255,.1),
    -1px -1px 2px rgba(244,67,54,.5),
    -1px 1px 2px rgba(76,175,80,.5),
    1px 1px 2px rgba(255,235,59,.5),
    1px -1px 2px rgba(33,150,243,.5);
    z-index: 10001;
}
#pages {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    position: absolute;
    top:5px;
    height:90px;
    width:calc(100% - 72.5px);
    list-style-type: none;
    margin-left:-30px;
}
#pages a {
    height:90px;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    background-color: var(--bg-col-main4);
    color:var(--text-col-main1);
    border-radius: 5px;
    margin:0 2.5px;
    flex:auto;
    position: relative;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
}
#pages a:hover,
#pages a:focus,
#pages a:visited {
    background-color: var(--bg-col-sol3);
    box-shadow:
    0px 0px 10px rgba(255,255,255,.1),
    -1px -1px 2px rgba(244,67,54,.5),
    -1px 1px 2px rgba(76,175,80,.5),
    1px 1px 2px rgba(255,235,59,.5),
    1px -1px 2px rgba(33,150,243,.5),
    inset 0px 0px 20px rgba(255,255,255,.1) ;
}
#pages :nth-last-child(0) {
    border-radius: 5px 45px 45px 5px;
}
.primary-nav.sticking #pages a {
    background-color:var(--bg-col-main2);
}
.primary-nav.sticking #pages a:hover,
.primary-nav.sticking #pages a:focus,
.primary-nav.sticking #pages a:visited {
    background-color: var(--bg-col-sol3);
    box-shadow:
    0px 0px 10px rgba(255,255,255,.1),
    -1px -1px 2px rgba(244,67,54,.5),
    -1px 1px 2px rgba(76,175,80,.5),
    1px 1px 2px rgba(255,235,59,.5),
    1px -1px 2px rgba(33,150,243,.5),
    inset 0px 0px 20px rgba(255,255,255,.1) ;
}
#pages a li {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.place {
    width:calc(90% - 10px);
    margin: 10px auto;
    background-color: var(--bg-col-main1);
    border-radius:10px;
    min-height:300px;
    color:#fafafa;
    padding:10px;
}
.place p {
    margin: auto;
    vertical-align: middle;
    color:rgba(0,0,0,.5);
    text-align:center;
    line-height:300px;
    font-size:50px;
    text-shadow:0px 0px 10px rgba(100,100,100,.5);
}