@import url('https://fonts.googleapis.com/css?family=Poppins:400,700,900');
@import url('https://fonts.googleapis.com/css?family=Lexend:200,300,400,500,700,900');

:root{
    --color-primary:#96ddf8;
    --color-primary-dark:#27657e;
    --color-secondary:#fff;
    --color-silver:#737373;
    --color-placeholder:#414141;
    --color-discret:#353535;
    --color-discret-alt:#191919;
    --color-bg:#000;
    --gradient-primary:linear-gradient(to bottom, #96ddf8, #27657e);

    --alert-success:#00C514;
    --alert-success-bg:#dcffd8;
    --alert-info:#005b90;
    --alert-info-bg:#c6eaff;
    --alert-warning:#da6900;
    --alert-warning-bg:#ffe1c5;
    --alert-error:#900100;
    --alert-error-bg:#ffcdcd;

    --grid-card-width: 12vw;
    --grid-card-height: calc(var(--grid-card-width) * 1.333);
    --grid-card-gap: calc((80vw - var(--grid-card-width)*6)/7);
}

*{
    box-sizing:border-box;
}

.mobile-only {
    display:none;
}

#page .hide {
    display:none!important;
}

.popup-content, body {
	width: 90vw;
	margin: auto;
	max-width: 950px;
	height: 100vh;
	overflow: auto;
}

.popup .overlay-area {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right:0;
    bottom:0;
    cursor:pointer;
}

body{
    font-family:'Lexend', 'Poppins', sans-serif;
    font-size:16px;
	font-weight:400;
    background:var(--color-bg);
    color:var(--color-secondary);
    user-select:none;
}

.bigger-txt {
    font-size:13px;
}

body.locked{
    overflow:hidden!important;
}

.screen-title{
	padding: 10px 0;
    border-bottom:1px solid var(--color-discret);
    background:#000;
    margin:0 0 15px;
}

img {
	max-width: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

video {
    max-width: 100%;
    max-height: 100vh;
}

h1 {
    font-size:35px;
    font-weight:700;
    margin:0;
}

h2,h3,.h2-style {
    line-height:1;
    font-size:25px;
    font-weight:bold;
    margin:0;
    display:inline-block;
}

h3,.h3-style {
    font-size:30px;
    margin:0 0 5px;
}

h4,.h4-style {
    font-size:20px;
    font-weight:500;
    margin:0 0 5px;
}

.fields{
	max-width: 400px;
    margin:auto;
    text-align:left;
}

.discret-info{
    color:var(--color-placeholder);
}

.pop-logo{
    margin:35px auto;
}

.fields label, .fields .label{
    position:relative;
    display:block;
    margin:25px 0 10px;
}

.fields > label:first-child, .fields > .label:first-child{
    margin:0 0 10px;
}

label > span, .label, .label > span{
    color:var(--color-silver);
    font-size:12px;
}

label > span:first-child{
    display:block;
}

.field-file {
	margin-top: 5px;
}

a, .lnk, p .fake-link{
    color:var(--color-secondary);
}

a:hover, .lnk:hover{
    color:var(--color-primary);
}

p {
	margin: 20px 0;
}

.red, a.red{
    color:var(--color-primary);
}

a.red:hover{
    color:#fff;
}

.fake-link{
    cursor:pointer;
    color:#fff;
}

.fake-link:hover{
    text-decoration:none;
}

.clickable{
    cursor:pointer;
    user-select:none;
}

nav .lnk {
    user-select:none;
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    font-weight:700;
    transition:.4s;
    cursor:pointer;
}

nav .lnk:hover, nav .lnk.active, nav .lnk:hover i::before, nav .lnk.active i::before {
    color: var(--color-primary);
}

.bubble {
    position: absolute;
    color: #fff;
    top: -5px;
    right: 0;
    background: var(--color-primary);
    padding: 2px 5px;
    border-radius: 50px;
    font-size: .7em;
}

.logo {
	display: block;
	width: 300px;
}

[class*="btn"]{
    display:inline-block!important;
    font-weight: 700;
    font-size:15px;
    padding:10px 15px;
    background:var(--color-primary);
    border:1px solid var(--color-primary);
    color:var(--color-primary-dark);
    border-radius:25px;
    transition:.4s;
    cursor:pointer;
    outline:none;
    text-decoration:none;
}

[class*="btn"].with-icon > i {
    float: right;
    position: relative;
    right: 10px;
    font-size: 17px;
}

[class*="btn"].full{
    width:100%;
    display:block!important;
    text-align:center;
}

[class*="btn"].maxed{
    max-width:276px;
    margin-left:auto!important;
    margin-right:auto!important;
}

[class*="btn"].small{
    padding:7px 30px;
}

[class*="btn"].white{
    background:#fff;
    border:1px solid #fff;
}

[class*="btn"][disabled],[class*="btn"][disabled]:hover{
    background:var(--color-discret);
    border:1px solid var(--color-discret);
    color:var(--color-silver);
}

[class*="btn"].white:hover{
    background:var(--color-primary-dark);
    color:#fff;
}

[class*="btn"]:hover{
    background:#ffffff00;
    color:#fff;
}

[class*="btn-lite"]{
    background:none;
    color:#fff;
}

[class*="btn-lite"]:hover{
    background:var(--color-primary);
    color:var(--color-primary-dark);
}

[class*="btn-lite"].white{
    background:#fff0;
    color:#fff;
}

[class*="btn-lite"].white:hover{
    background:#fff;
    color:#000;
}

.form-style {
	padding: 25px;
}

.fields .msg {
	display: block;
	text-align: center;
}

.fields > .msg {
	position: initial;
}

.fields .checkbox-field .msg {
	bottom: -20px;
}

.fields .field-file + .msg {
	left: initial;
	bottom: 8px;
}

.fields .msg.err > span {
	display: inline-block;
	background: var(--color-primary);
	padding: 3px 6px;
	border-radius: 15px;
    color:var(--color-secondary);
    margin-top:15px;
}

.alert {
    width:400px;
    max-width:100%;
	display: block;
	padding: 10px;
	border-radius: 15px;
    margin:15px auto;
}

.alert.success {
    border:1px solid var(--alert-success);
	background: var(--alert-success-bg);
    color:var(--alert-success);
}

.alert.error {
    border:1px solid var(--alert-error);
	background: var(--alert-error-bg);
    color:var(--alert-error);
}

.alert.error .fake-link{
    color:var(--alert-error);
}

.alert.info {
    border:1px solid var(--alert-info);
	background: var(--alert-info-bg);
    color:var(--alert-info);
}

.alert.info .fake-link{
    color:var(--alert-info);
}

.multisteps > .step {
	display: none;
}

.multisteps > .step.active {
	display: block;
}

input[type="text"],
input[type="mail"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea,
.radio-buttons span,
.radio-select > .selected,
.radio-select > .options > .options-wrapper{
    width:100%;
    max-width:100%;
	border: 1px solid #fff;
	background: none;
	color: #fff;
	padding: 10px 15px;
	border-radius: 5px;
    outline:none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color-discret);
    opacity: 1; /* Firefox */
}
  
::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--color-discret);
}
  
::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--color-discret);
}

.grid.code-number {
    grid-template-columns: repeat(6, 12.5%);
    gap: 5%;
    margin: auto;
    max-width: 80%;
}

.discret{
    font-weight:300;
}

.code-number > input {
	border: none;
	border-bottom: 2px solid var(--color-primary);
	border-radius: 0;
	text-align: center;
    font-size:25px;
    padding:10px 0;
}

input[readonly]{
    user-select:none;
    background:#39383d;
}

input[type="file"]{
    display:none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #4d4d4d;
    opacity: 1; /* Firefox */
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #4d4d4d;
}
  
::-ms-input-placeholder { /* Microsoft Edge */
    color: #4d4d4d;
}

.checkbox-field{
    cursor:pointer;
    color:var(--color-secondary);
}

.checkbox {
	position: relative;
	border: 1px solid var(--color-primary);
	float: left;
	margin: 4px 10px 0 0;
    width:15px;
    height:15px;
}

.filename {
    padding: 10px;
    color: #a1a1a1;
}

input[type="checkbox"]{
    width:15px;
    height:15px;
    opacity:0;
}

.checkbox > .checkmark{
    display:none;
    content:"";
    position:absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox > input:checked + .checkmark{
    display:block;
}

.radio-buttons input, .radio-select input, .field-file input{
    display:none;
}

.radio-buttons label{
    display:inline-block;
    margin-left:35px;
}

.radio-buttons label:first-child{
    margin-left:0;
}

.radio-buttons span {
    color:#fff;
	width: auto;
	display: inline-block;
	cursor: pointer;
	border: none;
	padding: 5px 0;
	margin: 0;
    border-bottom:3px solid #d8001700;
    position:relative;
    top:2px;
    border-radius:0;
}

.radio-buttons input:checked+span, .radio-buttons span:hover{
    color:var(--color-primary);
    border:none;
    border-bottom:3px solid var(--color-primary);
}

.radio-select{
    position:relative;
    cursor:pointer;
}

.radio-select > .marker {
	position: absolute;
	right: 20px;
	top: 12px;
    transition:.4s;
    color:#39383d;
}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(../img/calendar.png) no-repeat;
    width: 15px;
    height: 15px;
    border-width: thin;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

[name="code"]{
    max-width:200px;
}

.radio-select.opened + .marker {
	transform:rotate(-90deg);
}

.radio-select > .options{
    transition:.4s;
    height:0px;
    overflow:hidden;
}

.radio-select > .options > .options-wrapper {
	border-radius: 20px;
    padding:0;
}

.radio-select .options-wrapper > label {
	padding: 10px;
	display: block;
	margin: 0;
	border-top: 1px solid #1a1a1a;
    cursor:pointer;
}

.radio-select .options-wrapper > label:first-child {
	border-top:none;
}

.radio-select .options-wrapper > label:hover{
	color:var(--color-secondary);
}

.pwd-security-level {
	background: #d9d9d9;
	height: 3px;
    text-align: left;
    line-height:0;
}

.pwd-security-level > .level{
    display:inline-block;
	background: inherit;
    height:inherit;
    transition:.4s;
    width:0%;
}

.pwd-security-level > .level.low{
    background:var(--color-primary);
}

.pwd-security-level > .level.medium{
    background:#904600;
}

.pwd-security-level > .level.high{
    background:#006790;
}

.pwd-security-level > .level.max,
.pwd-security-level > .level.incredible{
    background:#419000;
}

.buttons.grid {
	margin: 50px 0 0 0;
}

.btn-red,.btn-red.small{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:var(--color-secondary);
}

.btn-red:hover,.btn-red.small:hover{
    background:#ffffff00;
}

.btn-lite-red{
    background:none!important;
    color:var(--color-primary)!important;
    border-color:var(--color-primary)!important;
}

.btn-lite-red:hover{
    background:var(--color-primary)!important;
    color:#fff!important;
}

nav > ul, footer ul{
	list-style: none;
}

nav > ul > li, footer ul > li{
	display:inline-block;
    margin:0 27px 20px;
}

nav > ul > li:first-child{
    margin-left: 0;
}

.offline-view footer {
    border-top:1px solid var(--color-primary);
    padding:60px 0 80px;
    text-align: center;
    font-size:20px;
    font-weight:700;
    width:100%;
    margin-top:-1px;
    position:relative;
    z-index:1;
}

.offline-view footer .logo {
    margin:0 auto 60px;
}

.offline-view footer ul{
    display:inline;
    margin:10px 0;
    padding:0;
}

.offline-view footer ul > li > a{
    color:var(--color-discret);
}

.offline-view footer ul > li > a:hover{
    color:var(--color-secondary);
}

.block{
    padding:15px;
}

.transition{
    transition:.4s;
}

[class*="grid"]{
    display:grid;
    grid-template-columns:repeat(2, 50% 50%);
    align-items: center;
}

[class*="grid"].pad > div{
    padding:15px;
}

[class*="grid"].top{
    align-items:start;
}

[class*="grid"].bot{
    align-items:end;
}

[class*="grid"].x3 {
	grid-template-columns: repeat(3, 32%);
	row-gap: 5px;
	column-gap: 2%;
}

[class*="grid"].x5{
    grid-template-columns:repeat(5, 19%);
    row-gap:15px;
    column-gap:1.25%;
}

[class*="grid"].x9{
    grid-template-columns:repeat(9, 10%);
    row-gap:15px;
    column-gap:1.25%;
}

.grid-1-4{
    grid-template-columns:25% 75%;
}

.grid-1-4.gap{
    grid-template-columns:23% 73%;
    column-gap:4%;
}

.jcenter{
    justify-items:center;
}

.aleft{
    text-align:left;
}

.aright{
    text-align:right;
}

.acenter{
    text-align:center;
}

.iblock{
    display:inline-block;
}

.lmTop{
    margin-top:30px;
}

.mTop{
    margin-top:25px;
}

.smTop{
    margin-top:20px;
}

.xsmTop{
    margin-top:10px;
}

.pTop{
    padding-top:25px;
}

.social-links{
    margin-bottom:60px;
}

.social-links > a{
    color:var(--color-secondary);
    display:inline-block;
    font-size:22px;
    margin-right:20px;
    transition:.4s;
    text-decoration: none;
}

.social-links > a:last-child {
	margin: 0;
}

.social-links > a:hover{
    color:var(--color-primary);
}

.legals {
    margin: 0 auto 60px;
    max-width: 75vw;
}

.legals a {
    font-size:20px;
    color:#fff!important;
    font-weight:500;
}

.legals a:hover {
    text-decoration:underline;
}

.popup{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:0%;
    overflow:hidden;
    transition:.4s;
    z-index:1;
    background:var(--color-bg);
}

.popup-head {
    position:relative;
    text-align:center;
	padding: 10px 5vw;
    border-bottom:1px solid var(--color-discret);
	width: 100%;
}

.popup-head > h2 {
    display: inline-block;
}

.popup .close {
    cursor:pointer;
	display: inline-block;
    font-size:15px;
	padding: 8.5px 1.5vw;
    transform: rotate(180deg);
	position: absolute;
	left: 0;
	top: 0;
}

.popup.lv2{
    z-index:2;
}

.popup.lv3{
    z-index:3;
}

.popup.from-right{
    left:initial;
    right:0;
}

.popup.from-bot{
    width:100%;
    top:100%;
    left:0;
    right:0;
}

.popup.from-top{
    width:100%;
    top:0;
    left:0;
    right:0;
    bottom:100%;
}

.popup.opened{
    width:100%;
}

.popup.from-bot.opened{
    top:0%;
}

.popup.from-top.opened{
    bottom:0%;
}

.popup form {
	text-align: center;
}

.popup.no-closing .close{
    display:none;
}

.screen-title > h2, .popup-head > h2{
    font-size:13px;
    font-weight:600;
}

.radio-buttons {
    font-size:13px;
    border-bottom: 1px solid #d8001652;
	margin: 34.5px 0 0 0;
}

::-webkit-scrollbar {
    width: 8px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px var(--color-discret); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--color-primary);
    -webkit-box-shadow: inset 0 0 2px var(--color-discret) 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: var(--color-discret); 
}

.ogp-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 20px;
}
.ogp-ellipsis div {
	position: absolute;
	top: 5px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--color-primary);
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.ogp-ellipsis div:nth-child(1) {
	left: 8px;
	animation: ogp-ellipsis1 0.6s infinite;
}
.ogp-ellipsis div:nth-child(2) {
	left: 8px;
	animation: ogp-ellipsis2 0.6s infinite;
}
.ogp-ellipsis div:nth-child(3) {
	left: 32px;
	animation: ogp-ellipsis2 0.6s infinite;
}
.ogp-ellipsis div:nth-child(4) {
	left: 56px;
	animation: ogp-ellipsis3 0.6s infinite;
}
@keyframes ogp-ellipsis1 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes ogp-ellipsis3 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}
@keyframes ogp-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(24px, 0);
	}
}

@media (min-width: 1000px) {
    .popup-content, body{
        border-left:1px solid var(--color-primary);
        border-right:1px solid var(--color-primary);
    }

    .page-wrapper {
        padding: 40px;
    }

    .offline-view .page-wrapper {
        max-width:950px;
        margin:auto;
    }

    .page-wrapper.sides {
        padding: 0 40px;
    }

    .screen-title{
        padding: 62px 0 10px;
        border-bottom:1px solid var(--color-discret);
        background:#000;
        margin:0 0 15px;
    }

    .popup .overlay-area {
        width: initial;
        z-index: -1;
        right: 0;
    }

    .radio-buttons {
        margin: 34.5px auto 0;
        width: 90%;
    }

    .popup.connect .radio-buttons {
        margin: 34.5px auto 40px;
    }

    .popup.connect .forgot-pw-area {
        padding: 10px 0 30px;
    }
}

@media (max-width: 714px) {

    :root{
        --grid-card-width: 33vw;
        --grid-card-height: calc(var(--grid-card-width) * 1.333);
        --grid-card-gap: calc((100vw - var(--grid-card-width)*3)/4);
    }

    input,textarea,select{
        font-size:13px;
    }

    body{
        width:initial;
        height:initial;
        max-width:100vw;
    }

    body, p a, a{
        font-size:10px;
    }

    h2,.h2-style {
        font-size:20px;
    }

    h3,.h3-style {
        font-size:18px;
        margin:0 0 5px;
    }

    h4,.h4-style {
        font-size:14px;
    }

    #connect-form, #register-form {
        max-width: initial;
    }

    .screen-title {
        position:sticky;
        top:0;
    }

    .form-style {
        border:none;
        border-radius: 0;
        padding:25px 0;
    }

    .radio-buttons {
        margin: 0 0 0 -5vw;
    }

    #top-nav {
        text-align: center;
    }

    #top-nav .logo {
        margin: auto;
    }

    .nav_menu{
        background:#000;
    }

    .nav_menu > nav{
        width:100%;
        text-align:center;
    }

    .nav {
        white-space: nowrap;
        padding: 0;
        font-size: 0;
    }

    nav > ul > li{
        width:20%;
        margin-left:0;
        font-size: 7.5pt;
        vertical-align:top;
    }

    nav > ul > li > .lnk, .creator-view nav .lnk.messages {
        font-size:23px;
        padding:20px 10px;
        border-bottom:3px solid #0e0d1200;
    }

    nav > ul > li > .lnk:hover, nav > ul > li > .lnk.active {
        border-bottom-color:var(--color-primary);
    }

    nav .lnk.messages{
        padding:10px 10px 17px;
    }

    nav .lnk.up-media {
        padding: 10px 10px 15px;
    }
    
    .lnk.up-media > span i {
        font-size: 23px;
        position: relative;
        left: 0.5px;
        top: -0.5px;
    }

    nav .circle {
        display: inline-block;
        background: var(--color-primary);
        border-radius: 50px;
        padding: 9px 0 0;
        width: 40px;
        height: 40px;
        text-align: center;
    }

    .page-wrapper {
        padding: 0 5vw;
    }

    .code-process.page-wrapper {
        padding: 0 3vw;
    }

    .bubble {
        top:3px;
        right:3px;
        background:var(--gradient-primary);
        font-size: .5em;
        line-height: 1em;
        font-weight:bold;
        padding:5px 3px;
    }

    .creator-view nav .bubble{
        top:10px;
        right:0;
    }

    nav .lnk:hover, nav .lnk.active,
    nav .lnk:hover i::before, nav .lnk.active i::before {
        background: none!important;
        border-radius: 0!important;
        color: #fff!important;
    }

    .desktop-only {
        display:none;
    }
    .mobile-only {
        display:block;
    }

    [class*="btn"] {
        padding: 10px;
    }

    [class*="btn"].small {
        padding: 5px 10px;
    }
    
    footer {
        position: initial;
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 70px;
    }

    .offline-view footer {
        font-size: 12px;
        margin-bottom: 0;
    }

    .social-links {
        margin: 60px 0;
    }

    .profile.card .metas .actions {
        padding: 2px 2px 0 0;
    }

    footer .legals a {
        font-size: 12px;
        color: #fff!important;
        font-weight: 500;
    }

    .popup-logo {
        width: 180px;
        position: relative;
        top: -2vh;
    }

    .popup-content h2 {
        top:initial!important;
    }
    
    .popup-content {
        overflow: initial;
    }

    .popup-content .page-wrapper {
        padding-left:0;
        padding-right:0;
    }

    label .btn{
        margin-top:5px;
    }
    
    .popup-head {
        padding: 10px 5vw;
        width: 100vw;
        margin: 0 0 0 -5vw;
    }

    .popup .close {
        padding: 8.5px 5vw;
    }

    .popup:not([class*="tier-panel"]) .overlay-area {
        display:none;
    }

    #infos-form > .grid {
        display: block;
    }

    #infos-form [class*="btn"] {
        font-size: 1.2em !important;
    }
}