md-input-container .md-input, md-input-container.md-input-invalid .md-input {
    border-bottom: solid 1px #e1e1e1
}

body, md-input-container label {
    -webkit-font-smoothing: antialiased
}

@font-face {
    font-family: login-svg-font-icons;
    src: url(svg-font/login-svg-font-icons.eot);
    src: url(svg-font/login-svg-font-icons.eot?#iefix) format("embedded-opentype"), url(svg-font/login-svg-font-icons.woff) format("woff"), url(svg-font/login-svg-font-icons.ttf) format("truetype"), url(svg-font/login-svg-font-icons.svg?#login-svg-font-icons) format("svg");
    font-weight: 400;
    font-style: normal
}
body{

    font-family: HelveticaNeueW01-Thin, HelveticaNeueW02-Thin, HelveticaNeueW10-35Thin, sans-serif;
}
h1,h2,h3,h4,h5{

    font-family: HelveticaNeueW01-Thin, HelveticaNeueW02-Thin, HelveticaNeueW10-35Thin, sans-serif;
}
.login-svg-font-icons, [class*=" login-svg-font-icons-"]:before, [class^=login-svg-font-icons-]:before {
    font-family: login-svg-font-icons;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

md-input-container, md-input-container .md-input {
    font-family: HelveticaNeueW01-Thin, HelveticaNeueW02-Thin, HelveticaNeueW10-35Thin, sans-serif;
    font-size: 20px;
    height: 36px
}

.login-svg-font-icons-Wixblack:before {
    content: "\f101"
}

.login-svg-font-icons-error-icon:before {
    content: "\f102"
}

.login-svg-font-icons-error:before {
    content: "\f103"
}

.login-svg-font-icons-fazebook:before {
    content: "\f104"
}

.login-svg-font-icons-info:before {
    content: "\f105"
}

.login-svg-font-icons-v:before {
    content: "\f106"
}

.login-svg-font-icons-wix-logo:before {
    content: "\f107"
}

.login-svg-font-icons-x:before {
    content: "\f108"
}

login-dialog ~ .wix-tooltip {
    -webkit-animation: opac .3s ease-in;
    animation: opac .3s ease-in
}

login-dialog ~ .wix-tooltip.placement-left {
    -webkit-transform: translate(2px, -5px);
    -ms-transform: translate(2px, -5px);
    transform: translate(2px, -5px)
}

login-dialog ~ .wix-tooltip.placement-right {
    -webkit-transform: translate(-8px, -13px);
    -ms-transform: translate(-8px, -13px);
    transform: translate(-8px, -13px)
}

@-webkit-keyframes opac {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes opac {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

md-input-container {
    width: 100%
}

md-input-container .label {
    /**/
    color: #ffffff !important
}

md-input-container .md-input {
    box-shadow: 0 0 0 1000px #fff inset !important
}

md-input-container .md-input.ng-dirty:not(:focus) {
    border-width: 0 0 1px
}

md-input-container .error {
    visibility: hidden;
    position: absolute;
    color: transparent;
    opacity: 0;
    transition: opacity .3s ease-in
}

md-input-container.md-input-focused .label {

    /*color: #162d3d !important     ;*/
    color: #ffffff !important
}

md-input-container:not(.md-input-focused) .md-input:hover {
    border-bottom: solid 1px #162d3d
}

.ng-submitted md-input-container:not(.md-input-focused) .md-input.ng-invalid, .ng-submitted md-input-container:not(.md-input-focused).has-error .md-input, md-input-container:not(.md-input-focused).md-input-invalid.has-error .md-input.ng-touched:not(.ng-invalid-required) {
    border-bottom: solid 2px #f2564d
}

.ng-submitted md-input-container.has-error:not(.md-input-focused) .error, md-input-container.has-error:not(.md-input-focused) .md-input.ng-touched:not(.ng-invalid-required) ~ .error {
    position: absolute;
    color: #f2564d;
    visibility: visible;
    opacity: 1
}

md-input-container .md-placeholder, md-input-container label:not(.md-no-float):not(.md-container-ignore) {
    padding-left: 12px
}

md-input-container .md-input, md-input-container .md-input.ng-invalid.ng-dirty, md-input-container.md-input-focused .md-input {
    padding-bottom: 9px;
    padding-left: 11px      ;
    color:white;
}

.login md-input-container .md-input, .login md-input-container .md-input.ng-invalid.ng-dirty, .login md-input-container.md-input-focused .md-input {
    padding-bottom: 10px
}

md-input-container .md-input[type=password] {
    letter-spacing: 2px
}

mobile-input label {
    height: 29px
}

mobile-input md-input-container:not(.new).md-input-focused label, mobile-input md-input-container:not(.new).md-input-has-value label {
    -webkit-transform: translate3d(0, 0, 0) scale(.75) !important;
    transform: translate3d(0, 0, 0) scale(.75) !important;
    width: 118%;
    letter-spacing: 1px
}

mobile-input md-input-container:not(.new).md-input-focused .md-input {
    border-bottom: solid 2px #3899ec !important
}

mobile-input .error-label {
    display: none;
    font-size: 12px;
    margin-top: 30px;
    margin-right: 5px
}

mobile-input .placeholder-label {
    display: block
}

.ng-submitted mobile-input .has-error:not(.md-input-focused) .error-label, mobile-input .has-error:not(.md-input-focused) .md-input.ng-touched:not(.ng-invalid-required) ~ .error-label {
    color: #f2564d;
    height: auto;
    white-space: normal;
    display: block
}

.ng-submitted mobile-input .has-error:not(.md-input-focused) .error-label .placeholder-label, mobile-input .has-error:not(.md-input-focused) .md-input.ng-touched:not(.ng-invalid-required) ~ .error-label .placeholder-label {
    display: none
}

.container.desktop {
    height: 100%;
    overflow: hidden
}

.container.desktop .wix-button {
    padding-top: 8px;
    padding-bottom: 14px;
    min-width: 120px;
    height: 48px;
    font-size: 20px
}

.container.desktop .wix-button.is-button-outline:hover {
    box-shadow: inset 0 0 0 1px #4eb7f5 !important
}

.container.desktop .wix-button.is-button-outline:not(:hover):not(:focus) {
    background-color: #fff
}

.container.desktop .wix-button:focus:not(:active) {
    background: #4eb7f5;
    color: #fff !important;
    box-shadow: none
}

.container.desktop button:not(.wix-button-redesign):not(.social-btn):focus:not(:hover) {
    outline: #daeffe solid 3px
}

.container.desktop button:not(.wix-button-redesign):not(.social-btn):hover, .container.desktop login .login-buttons .sozial-login:hover:focus, .container.desktop signup .login-buttons .sozial-login:hover:focus {
    outline: 0
}

.container.desktop .header {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    z-index: 4
}

.container.desktop .header .wix-logo, .container.desktop .header .x-close {
    margin: 60px
}

.container.desktop .header .wix-logo {
    height: 29px
}

.container.desktop .header .x-close {
    font-size: 22px;
    line-height: 0;
    height: 22px
}

.container.desktop desktop-input {
    position: relative;
    width: 100%
}

.container.desktop desktop-input md-input-container input, .container.desktop desktop-input md-input-container label {
    font-size: 24px;
    font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif
}

.container.desktop desktop-input md-input-container input {
    transition: border-bottom .3s, border-color .3s, border-width .3s, border .3s ease-in-out;
    line-height: 1
}

.container.desktop desktop-input md-input-container.md-input-focused .md-input {
    border-bottom: solid 1px #e1e1e1 !important
}

.container.desktop desktop-input md-input-container.md-input-focused .focus-line {
    border-bottom: solid 2px #3899ec;
    width: 99.6%;
    height: 2px;
    position: absolute;
    top: 34px;
    left: 1px
}

.container.desktop desktop-input md-input-container .focus-line {
    transition: width .3s ease-in-out
}

.container.desktop desktop-input md-input-container:not(.md-input-focused) .focus-line {
    width: 0
}

.container.desktop desktop-input md-input-container.md-input-focused label, .container.desktop desktop-input md-input-container.md-input-has-value label {
    -webkit-transform: translate3d(0, 6px, 0) scale(.67);
    transform: translate3d(0, 6px, 0) scale(.67)
}

.container.desktop desktop-input md-input-container .error {
    font-size: 35px;
    right: 12px;
    bottom: 18px
}

.container.desktop login .remember-me-and-forgot-password {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 25px;
    margin-top: 6px
}

.container.desktop login, .container.desktop signup {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: HelveticaNeueW01-Thin, HelveticaNeueW02-Thin, HelveticaNeueW10-35Thin, sans-serif;
    font-size: 16px;
    height: 100%;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.desktop login terms-of-use, .container.desktop signup terms-of-use {
    width: 427px;
    text-align: center;
    margin-top: 68px;
    line-height: 1.5
}

.container.desktop login terms-of-use.small, .container.desktop signup terms-of-use.small {
    font-size: 14px;
    font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif;
    color: #858f96
}

.container.desktop login .recaptcha-widget, .container.desktop signup .recaptcha-widget {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    -webkit-transform: scale(.85);
    -ms-transform: scale(.85);
    transform: scale(.85);
    margin-bottom: -9px;
    margin-left: -28px
}

.container.desktop login .signin-section md-input-container, .container.desktop signup .signin-section md-input-container {
    margin: 15px 0
}

.container.desktop login .signin-section md-input-container input, .container.desktop login .signin-section md-input-container label, .container.desktop signup .signin-section md-input-container input, .container.desktop signup .signin-section md-input-container label {
    font-size: 20px;
    font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif
}

.container.desktop login .login, .container.desktop login .signup, .container.desktop signup .login, .container.desktop signup .signup {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.container.desktop login .login .title, .container.desktop login .signup .title, .container.desktop signup .login .title, .container.desktop signup .signup .title {
    text-align: center;
    font-size: 72px;
    margin-bottom: 27px;
    font-family: HelveticaNeueW01-Thin, HelveticaNeueW02-Thin, HelveticaNeueW10-35Thin, sans-serif;
    color: #20303c
}

.container.desktop login .login .already-user, .container.desktop login .login .new-user, .container.desktop login .signup .already-user, .container.desktop login .signup .new-user, .container.desktop signup .login .already-user, .container.desktop signup .login .new-user, .container.desktop signup .signup .already-user, .container.desktop signup .signup .new-user {
    color: #20303c;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 5px
}

.container.desktop login .login .divider, .container.desktop login .signup .divider, .container.desktop signup .login .divider, .container.desktop signup .signup .divider {
    width: 1px;
    opacity: .8;
    background-color: #858f96;
    margin: 0 71px
}

.container.desktop login .login .signin-section, .container.desktop login .signup .signin-section, .container.desktop signup .login .signin-section, .container.desktop signup .signup .signin-section {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.container.desktop login .login .signin-section .signin-with-email, .container.desktop login .signup .signin-section .signin-with-email, .container.desktop signup .login .signin-section .signin-with-email, .container.desktop signup .signup .signin-section .signin-with-email {
    width: 360px
}

.container.desktop login .login .signin-section .signin-with-email.wide, .container.desktop login .signup .signin-section .signin-with-email.wide, .container.desktop signup .login .signin-section .signin-with-email.wide, .container.desktop signup .signup .signin-section .signin-with-email.wide {
    width: 800px
}

.container.desktop login .login .signin-section .signin-with-email .button-spinner, .container.desktop login .signup .signin-section .signin-with-email .button-spinner, .container.desktop signup .login .signin-section .signin-with-email .button-spinner, .container.desktop signup .signup .signin-section .signin-with-email .button-spinner {
    width: 105px;
    height: 43px
}

.container.desktop login .login-btn button, .container.desktop login .signup-btn button, .container.desktop signup .login-btn button, .container.desktop signup .signup-btn button {
    height: 30px;
    width: 123px;
    font-size: 20px
}

.container.desktop login .login-button, .container.desktop signup .login-button {
    width: 100%;
    height: 50px;
    padding-top: 25px
}

.container.desktop login .login-button .spinner-container, .container.desktop login .login-button .wix-button, .container.desktop signup .login-button .spinner-container, .container.desktop signup .login-button .wix-button {
    min-width: 168px
}

.container.desktop login .login-buttons, .container.desktop signup .login-buttons {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 50px;
    padding-top: 25px
}

.container.desktop login .login-buttons .sozial-login-icons, .container.desktop signup .login-buttons .sozial-login-icons {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.container.desktop login .login-buttons .sozial-login-icons .space, .container.desktop signup .login-buttons .sozial-login-icons .space {
    width: 12px
}

.container.desktop login .login-buttons .sozial-login-icons .sozial-spinner, .container.desktop signup .login-buttons .sozial-login-icons .sozial-spinner {
    position: relative;
    height: 48px;
    width: 130px
}

.container.desktop login .login-buttons .sozial-login-icons .sozial-spinner .spinner-container, .container.desktop signup .login-buttons .sozial-login-icons .sozial-spinner .spinner-container {
    position: absolute;
    width: 130px;
    height: 48px;
    top: 0;
    z-index: 1
}

.container.desktop login .login-buttons .sozial-login-icons .sozial-spinner .sozial-login, .container.desktop signup .login-buttons .sozial-login-icons .sozial-spinner .sozial-login {
    position: absolute;
    top: 0;
    z-index: 5
}

.container.desktop login .login-buttons .text-or-with-sozial, .container.desktop signup .login-buttons .text-or-with-sozial {
    color: #66737c;
    font-size: 16px;
    margin-right: 13px;
    font-family: HelveticaNeueW01-55Roma, HelveticaNeueW02-55Roma, HelveticaNeueW10-55Roma, sans-serif;
    max-width: 144px
}

.container.desktop login .login-buttons .sozial-login, .container.desktop signup .login-buttons .sozial-login {
    min-width: 130px;
    height: 48px;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 999px;
    border: 0;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    outline: 0;
    padding-right: 12px;
    padding-top: 0;
    font-family: HelveticaNeueW01-55Roma, HelveticaNeueW02-55Roma, HelveticaNeueW10-55Roma, sans-serif;
    transition: opacity .3s
}

.container.desktop login .login-buttons .sozial-login:hover, .container.desktop signup .login-buttons .sozial-login:hover {
    opacity: .7
}

.container.desktop login .login-buttons .sozial-login:focus, .container.desktop signup .login-buttons .sozial-login:focus {
    outline: #daeffe solid 3px
}

.container.desktop login .login-buttons .sozial-login .text, .container.desktop signup .login-buttons .sozial-login .text {
    margin-top: 3px;
    display: inline-block
}

.container.desktop login .login-buttons .sozial-login.fazebook-login-icon, .container.desktop signup .login-buttons .sozial-login.fazebook-login-icon {
    background-color: #3b5998
}

.container.desktop login .login-buttons .sozial-login.fazebook-login-icon .sozial-icon, .container.desktop signup .login-buttons .sozial-login.fazebook-login-icon .sozial-icon {
    margin-right: 10px
}

.container.desktop login .login-buttons .sozial-login.zoogle-login-icon, .container.desktop signup .login-buttons .sozial-login.zoogle-login-icon {
    background-color: #d34836
}

.container.desktop login .login-buttons .sozial-login.zoogle-login-icon .sozial-icon, .container.desktop signup .login-buttons .sozial-login.zoogle-login-icon .sozial-icon {
    margin-right: 7px
}

.container.desktop login .login-buttons .sozial-login .sozial-icon, .container.desktop signup .login-buttons .sozial-login .sozial-icon {
    font-size: 19px;
    line-height: 0;
    margin-top: 3px;
    display: inline-block
}

.container.desktop .remember-me-section {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    cursor: pointer
}

.container.desktop .remember-me-section wix-checkbox {
    margin-right: 5px
}

.container.desktop .remember-me-section wix-checkbox input:focus:not(:checked) + .wix-checkbox-inner {
    background-color: #e6f5fe !important;
    color: #3899eb !important
}

.container.desktop .remember-me-section wix-checkbox input:focus:checked + .wix-checkbox-inner {
    background-color: #4eb7f5 !important;
    color: #fff !important;
    border: 1px solid #4eb7f5
}

.container.desktop .remember-me-section wix-checkbox input:checked + .wix-checkbox-inner {
    border: 1px solid #3899eb
}

.container.desktop .remember-me-text {
    color: #20303c;
    line-height: 1
}

.container.desktop .remember-me-text:hover + wix-checkbox input:not(:checked) + .wix-checkbox-inner {
    background-color: #e6f5fe !important;
    color: #3899eb !important
}

.container.desktop .remember-me-text:hover + wix-checkbox input:checked + .wix-checkbox-inner {
    background-color: #4eb7f5 !important;
    color: #fff !important;
    border: 1px solid #4eb7f5
}

.container.desktop .button-spinner {
    position: relative;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 105px
}

.container.desktop .button-spinner > .wix-button {
    transition: background-color .3s, color .3s, background .3s, box-shadow .1s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.container.desktop .button-spinner .spinner-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.container.desktop .button-spinner .spinner-container, .container.desktop .sozial-spinner .spinner-container {
    width: 120px;
    height: 48px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.desktop .social-button .spinner-container, .container.desktop .sozial-button-and-spinner .spinner-container {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.desktop social-signin {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.container.desktop social-signin .signin-sozial-title {
    font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: #20303c;
    margin-bottom: 30px;
    margin-top: -8px;
    width: 100%
}

.container.desktop social-signin .sozial-login {
    height: 48px;
    cursor: pointer;
    border: 0;
    background-color: transparent;
    padding: 0
}

.container.desktop social-signin .sozial-login .icon-and-text {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.container.desktop social-signin .sozial-login.ng-hide {
    display: none !important
}

.container.desktop social-signin .sozial-login:hover:focus {
    outline: 0
}

.container.desktop a:focus:not(:hover), .container.desktop social-signin .sozial-login:focus {
    outline: #daeffe solid 3px
}

.container.desktop social-signin .icon {
    width: 58px;
    height: 48px;
    color: #fff;
    font-size: 23px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.container.desktop social-signin .signin-sozial-fazebook .icon {
    background-color: #3b5998
}

.container.desktop social-signin .signin-sozial-fazebook .signin-button-text {
    color: #3b5998;
    border: 1px solid #3b5998
}

.container.desktop social-signin .signin-sozial-fazebook:hover {
    background: rgba(59, 89, 152, .1)
}

.container.desktop social-signin .signin-sozial-zoogle .icon {
    background-color: #d34836
}

.container.desktop social-signin .signin-sozial-zoogle .signin-button-text {
    color: #d34836;
    border: 1px solid #d34836
}

.container.desktop social-signin .signin-sozial-zoogle:hover {
    background: rgba(211, 72, 54, .1)
}

.container.desktop social-signin .signin-button-text {
    width: 239px;
    height: 46px;
    font-family: HelveticaNeueW01-55Roma, HelveticaNeueW02-55Roma, HelveticaNeueW10-55Roma, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    transition: background .3s
}

.container.desktop social-signin .fazebook-container {
    margin-bottom: 24px
}

.container.desktop social-signin .sozial-button-and-spinner {
    position: relative;
    height: 48px;
    width: 297px
}

.container.desktop account-verification, .container.desktop email-verified-confirmation, .container.desktop enter-email, .container.desktop forgot-password, .container.desktop forgot-password-confirmation, .container.desktop login, .container.desktop reset-password, .container.desktop reset-password-confirmation, .container.desktop signup {
    margin-top: -156px
}

.container.desktop .content {
    margin-bottom: 20px
}

.container.desktop .forgot-password-link {
    color: #20303c;
    height: 20px;
    line-height: 1
}

.container.desktop .forgot-password-link:hover {
    color: #459fed
}

.container.desktop a:hover {
    outline: 0
}

.container.desktop account-verification, .container.desktop email-verified-confirmation, .container.desktop enter-email, .container.desktop forgot-password, .container.desktop forgot-password-confirmation, .container.desktop reset-password, .container.desktop reset-password-confirmation {
    color: #162d3d;
    height: 100vh;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.desktop account-verification form, .container.desktop email-verified-confirmation form, .container.desktop enter-email form, .container.desktop forgot-password form, .container.desktop forgot-password-confirmation form, .container.desktop reset-password form, .container.desktop reset-password-confirmation form {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.container.desktop account-verification form .title, .container.desktop email-verified-confirmation form .title, .container.desktop enter-email form .title, .container.desktop forgot-password form .title, .container.desktop forgot-password-confirmation form .title, .container.desktop reset-password form .title, .container.desktop reset-password-confirmation form .title {
    margin-bottom: 30px;
    font-size: 64px;
    line-height: 80px
}

.container.desktop account-verification form .content, .container.desktop email-verified-confirmation form .content, .container.desktop enter-email form .content, .container.desktop forgot-password form .content, .container.desktop forgot-password-confirmation form .content, .container.desktop reset-password form .content, .container.desktop reset-password-confirmation form .content {
    font-size: 20px;
    font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif;
    margin-bottom: 73px
}

.container.desktop account-verification form desktop-input, .container.desktop email-verified-confirmation form desktop-input, .container.desktop enter-email form desktop-input, .container.desktop forgot-password form desktop-input, .container.desktop forgot-password-confirmation form desktop-input, .container.desktop reset-password form desktop-input, .container.desktop reset-password-confirmation form desktop-input {
    width: 570px
}

.container.desktop account-verification form desktop-input md-input-container, .container.desktop email-verified-confirmation form desktop-input md-input-container, .container.desktop enter-email form desktop-input md-input-container, .container.desktop forgot-password form desktop-input md-input-container, .container.desktop forgot-password-confirmation form desktop-input md-input-container, .container.desktop reset-password form desktop-input md-input-container, .container.desktop reset-password-confirmation form desktop-input md-input-container {
    margin-bottom: 44px
}

.container.desktop forgot-password .title-and-instructions {
    width: 100%
}

.container.desktop forgot-password .back-next-buttons {
    width: 570px;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.container.desktop account-verification .input-info {
    width: 570px
}

.container.desktop account-verification .button-and-forgot-password {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 48px
}

.container.desktop account-verification .forgot-password-link {
    font-size: 16px;
    font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif
}

.container.mobile {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: HelveticaNeueW01-Thin, HelveticaNeueW02-Thin, HelveticaNeueW10-35Thin, sans-serif;
    font-size: 16px;
    box-sizing: border-box
}

.container.mobile forgot-password {
    margin-bottom: 6px
}

.container.mobile forgot-password .back-next-buttons {
    margin-top: 15px
}

@media only screen and (max-width: 480px) {
    .container.mobile forgot-password .back-next-buttons {
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around
    }

    .container.mobile .header .wix-logo {
        height: 40px
    }
}

@media only screen and (min-width: 480px) {
    .container.mobile forgot-password .back-next-buttons {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .container.mobile forgot-password .back-next-buttons .back-btn {
        margin-right: 24px
    }
}

.container.mobile forgot-password-confirmation .button {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.mobile forgot-password-confirmation .content {
    line-height: 24px;
    margin-bottom: 33px
}

.container.mobile email-verified-confirmation .button {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.mobile email-verified-confirmation .button .wix-button {
    line-height: 2.5
}

.container.mobile email-verified-confirmation .content {
    line-height: 24px;
    margin-bottom: 33px
}

.container.mobile enter-email .title {
    font-size: 32px;
    margin-bottom: 30px
}

.container.mobile enter-email .button-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.mobile enter-email .enter-email-send, .container.mobile enter-email .spinner-container {
    margin-top: 12px
}

.container.mobile .header {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    padding: 25px;
    box-sizing: border-box
}

.container.mobile .header .x-close {
    font-size: 14px
}

@media only screen and (min-width: 480px) {
    .container.mobile enter-email .enter-email-send, .container.mobile enter-email .spinner-container {
        margin-top: 22px
    }

    .container.mobile .header .wix-logo {
        height: 40px
    }
}

.container.mobile mobile-input {
    width: 100%;
    margin-bottom: 13px
}

.container.mobile mobile-input md-input-container {
    font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif;
    font-size: 16px;
    height: auto
}

.container.mobile mobile-input md-input-container .md-placeholder, .container.mobile mobile-input md-input-container label:not(.md-no-float):not(.md-container-ignore) {
    padding-left: 12px
}

.container.mobile mobile-input md-input-container .md-input {
    padding-bottom: 12px
}

.container.mobile mobile-input md-input-container .md-input, .container.mobile mobile-input md-input-container .md-input.ng-invalid.ng-dirty, .container.mobile mobile-input md-input-container.md-input-focused .md-input {
    font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif;
    font-size: 16px;
    padding-left: 7px;
    height: 26px
}

.container.mobile mobile-input md-input-container .md-input.ng-invalid.ng-dirty, .container.mobile mobile-input md-input-container.md-input-focused .md-input {
    padding-bottom: 11px
}

.container.mobile mobile-input md-input-container i {
    font-size: 28px;
    right: 2px;
    top: -20px
}

.container.mobile login, .container.mobile signup {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 100%;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 380px
}

@media only screen and (min-width: 480px) {
    .container.mobile login .login-btn, .container.mobile login .signup-btn, .container.mobile signup .login-btn, .container.mobile signup .signup-btn {
        margin-bottom: 24px
    }
}

@media only screen and (max-width: 480px) {
    .container.mobile login .login .new-user, .container.mobile login .signup .already-user, .container.mobile signup .login .new-user, .container.mobile signup .signup .already-user {
        font-size: 15px;
        margin-bottom: 1px
    }
}

@media only screen and (min-width: 480px) {
    .container.mobile login .login .new-user, .container.mobile login .signup .already-user, .container.mobile signup .login .new-user, .container.mobile signup .signup .already-user {
        font-size: 16px;
        margin-bottom: 10px
    }

    .container.mobile login .email-section, .container.mobile signup .email-section {
        margin-top: 10px
    }

    .container.mobile login terms-of-use, .container.mobile signup terms-of-use {
        font-size: 13px;
        line-height: 1.5
    }

    .container.mobile login .forgot-password-link, .container.mobile signup .forgot-password-link {
        font-size: 16px
    }
}

@media only screen and (max-width: 480px) {
    .container.mobile login .or-use-email, .container.mobile signup .or-use-email {
        font-size: 13px;
        font-family: HelveticaNeueW01-Thin, HelveticaNeueW02-Thin, HelveticaNeueW10-35Thin, sans-serif
    }

    .container.mobile login .or-use-email .text, .container.mobile signup .or-use-email .text {
        margin: 20px 16px
    }
}

.container.mobile .login .sozial-buttons .sozial-login, .container.mobile .signup .sozial-buttons .sozial-login, .container.mobile account-verification .button-and-forgot-password .forgot-password-link, .container.mobile login .forgot-password-link, .container.mobile login terms-of-use, .container.mobile signup terms-of-use, .container.mobile thank-you {
    font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif
}

@media only screen and (min-width: 480px) {
    .container.mobile login .or-use-email, .container.mobile signup .or-use-email {
        font-size: 14px;
        font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif;
        margin-top: 20px
    }

    .container.mobile login .or-use-email .text, .container.mobile signup .or-use-email .text {
        margin: 20px 24px;
        line-height: 1
    }

    .container.mobile login .sozial-buttons .sozial-login, .container.mobile signup .sozial-buttons .sozial-login {
        font-size: 20px;
        height: 54px
    }
}

@media only screen and (max-width: 480px) {
    .container.mobile login .sozial-buttons .sozial-login.zoogle-login-button, .container.mobile signup .sozial-buttons .sozial-login.zoogle-login-button {
        margin-top: 12px;
        margin-bottom: 10px
    }
}

@media only screen and (min-width: 480px) {
    .container.mobile login .sozial-buttons .sozial-login.zoogle-login-button, .container.mobile signup .sozial-buttons .sozial-login.zoogle-login-button {
        margin-top: 18px;
        margin-bottom: 7px
    }
}

.container.mobile login terms-of-use, .container.mobile signup terms-of-use {
    text-align: center;
    color: #858f96;
    font-size: 11px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px
}

.container.mobile login terms-of-use .terms-of-use, .container.mobile signup terms-of-use .terms-of-use {
    width: 100%
}

.container.mobile signup .signup-buttons {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 8px
}

.container.mobile signup .signup-buttons .text-or {
    font-size: 12px;
    margin-left: 1px
}

.container.mobile signup .signup-buttons .signup-btn {
    margin-bottom: 0;
    margin-top: 0
}

.container.mobile signup .signup-buttons .signup-btn + .spinner-container {
    margin-bottom: 0
}

.container.mobile login .forgot-password-link {
    margin-bottom: 10px;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    font-size: 14px
}

.container.mobile login .login-btn {
    margin-bottom: 15px;
    width: 200px
}

.container.mobile login .sozial-signin-icons {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px
}

.container.mobile .login, .container.mobile .signup {
    width: 100%;
    height: 100%
}

.container.mobile .login .form-header, .container.mobile .signup .form-header {
    position: relative;
    z-index: 3;
    text-align: center
}

.container.mobile .login .email-no-focus, .container.mobile .signup .email-no-focus {
    width: 100%;
    transition: opacity .3s, -webkit-transform .7s ease-in;
    transition: opacity .3s, transform .7s ease-in;
    overflow: hidden
}

.container.mobile .login .form-content, .container.mobile .signup .form-content {
    transition: -webkit-transform .3s ease-in;
    transition: transform .3s ease-in
}

.container.mobile .login.is-email-focus, .container.mobile .signup.is-email-focus {
    height: 183px
}

.container.mobile .login.is-email-focus .form-content, .container.mobile .signup.is-email-focus .form-content {
    -webkit-transform: translateY(-183px);
    -ms-transform: translateY(-183px);
    transform: translateY(-183px)
}

.container.mobile .login.is-email-focus .email-no-focus, .container.mobile .signup.is-email-focus .email-no-focus {
    opacity: 0;
    z-index: 1
}

.container.mobile .login .email-section, .container.mobile .signup .email-section {
    margin-bottom: 12px;
    outline: 0;
    width: 100%
}

.container.mobile .login .email-focus, .container.mobile .signup .email-focus {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.container.mobile .login .or-use-email, .container.mobile .signup .or-use-email {
    color: #20303c;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 10px;
    font-size: 13px
}

.container.mobile .login .or-use-email .text, .container.mobile .signup .or-use-email .text {
    margin: 20px 16px;
    white-space: nowrap
}

.container.mobile .login .or-use-email .separator, .container.mobile .signup .or-use-email .separator {
    border-top: 1px solid #e0e3e5;
    height: 0;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.container.mobile .login .login-link, .container.mobile .login .signup-link, .container.mobile .signup .login-link, .container.mobile .signup .signup-link {
    white-space: nowrap
}

.container.mobile .login .title, .container.mobile .signup .title {
    font-size: 36px;
    padding-bottom: 7px;
    padding-top: 33px;
    text-align: center
}

@media only screen and (max-width: 480px) {
    .container.mobile .login .title, .container.mobile .signup .title {
        padding-bottom: 0;
        font-size: 36px
    }
}

@media only screen and (min-width: 480px) {
    .container.mobile .login.is-email-focus .form-content, .container.mobile .signup.is-email-focus .form-content {
        -webkit-transform: translateY(-190px);
        -ms-transform: translateY(-190px);
        transform: translateY(-190px)
    }

    .container.mobile .login .title, .container.mobile .signup .title {
        margin-bottom: 13px;
        font-size: 40px
    }
}

@media only screen and (max-height: 800px) {
    .container.mobile .login .title, .container.mobile .signup .title {
        margin-top: 33px
    }
}

@media only screen and (min-height: 800px) and (max-height: 1100px) {
    .container.mobile .login .title, .container.mobile .signup .title {
        margin-top: 90px
    }
}

@media only screen and (min-height: 1100px) {
    .container.mobile .login .title, .container.mobile .signup .title {
        margin-top: 190px
    }
}

.container.mobile .login .already-user, .container.mobile .login .new-user, .container.mobile .signup .already-user, .container.mobile .signup .new-user {
    margin-bottom: 33px;
    font-size: 14px;
    font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif;
    text-align: center
}

.container.mobile .login .login-btn, .container.mobile .login .signup-btn, .container.mobile .signup .login-btn, .container.mobile .signup .signup-btn {
    font-size: 16px;
    margin-bottom: 10px
}

.container.mobile .login .login-btn + .spinner-container, .container.mobile .login .signup-btn + .spinner-container, .container.mobile .signup .login-btn + .spinner-container, .container.mobile .signup .signup-btn + .spinner-container {
    margin-bottom: 19px
}

.container.mobile .login .sozial-icons, .container.mobile .signup .sozial-icons {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.container.mobile .login .sozial-icons .sozial-login, .container.mobile .signup .sozial-icons .sozial-login {
    border-radius: 50%;
    height: 100%;
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.container.mobile .login .sozial-icons .sozial-login.fazebook-login-button, .container.mobile .signup .sozial-icons .sozial-login.fazebook-login-button {
    color: #3b5998;
    border: 1px solid #3b5998
}

.container.mobile .login .sozial-icons .sozial-login.zoogle-login-button.old, .container.mobile .signup .sozial-icons .sozial-login.zoogle-login-button.old {
    color: #d34836;
    border: 1px solid #d34836
}

.container.mobile .login .sozial-icons .sozial-login.zoogle-login-button.new, .container.mobile .signup .sozial-icons .sozial-login.zoogle-login-button.new {
    border: 1px solid #4285f4
}

.container.mobile .login .sozial-icon-container, .container.mobile .signup .sozial-icon-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 40px;
    width: 42px
}

.container.mobile .login .sozial-icon-container.fazebook-container, .container.mobile .signup .sozial-icon-container.fazebook-container {
    margin-right: 9px
}

.container.mobile .login .sozial-buttons, .container.mobile .signup .sozial-buttons {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.container.mobile .login .sozial-buttons .sozial-login, .container.mobile .signup .sozial-buttons .sozial-login {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 999px;
    border: 0;
    color: #fff;
    font-size: 16px;
    padding: 4px 12px;
    cursor: pointer;
    outline: 0;
    margin-bottom: 2px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.mobile .login .sozial-buttons .sozial-login.fazebook-login-button, .container.mobile .signup .sozial-buttons .sozial-login.fazebook-login-button {
    background-color: #3b5998
}

.container.mobile .login .sozial-buttons .sozial-login.zoogle-login-button, .container.mobile .signup .sozial-buttons .sozial-login.zoogle-login-button {
    background-color: #d34836;
    margin-top: 12px;
    margin-bottom: 10px
}

.container.mobile .login .sozial-buttons .sozial-spinner-container, .container.mobile .signup .sozial-buttons .sozial-spinner-container {
    height: 48px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.mobile .login .sozial-buttons .fazebook + .sozial-spinner-container, .container.mobile .signup .sozial-buttons .fazebook + .sozial-spinner-container {
    margin-bottom: 2px
}

.container.mobile .login .sozial-buttons .zoogle + .sozial-spinner-container, .container.mobile .signup .sozial-buttons .zoogle + .sozial-spinner-container {
    margin-top: 12px;
    margin-bottom: 10px
}

@media only screen and (max-width: 446px) {
    .container.mobile .recaptcha-widget {
        margin-left: 3px;
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }
}

.container.mobile .recaptcha-widget > div {
    margin-bottom: 10px
}

.container.mobile thank-you {
    font-size: 16px;
    margin-top: 102px;
    margin-bottom: 50px
}

.container.mobile thank-you .title {
    font-size: 32px;
    margin-bottom: 26px
}

.container.mobile thank-you .sub-title {
    margin-bottom: 12px
}

.container.mobile thank-you .user-email {
    margin-bottom: 28px;
    font-weight: 700
}

.container.mobile thank-you .content {
    margin-bottom: 48px;
    line-height: 24px
}

.container.mobile account-verification .input-info {
    width: 100%
}

.container.mobile account-verification .button-and-forgot-password {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.container.mobile account-verification .button-and-forgot-password .spinner-container, .container.mobile account-verification .button-and-forgot-password .verify-btn {
    margin: 10px 0
}

@media only screen and (min-width: 480px) {
    .container.mobile account-verification .button-and-forgot-password .spinner-container, .container.mobile account-verification .button-and-forgot-password .verify-btn {
        margin: 20px 0 0
    }
}

.container.mobile account-verification .button-and-forgot-password .forgot-password-link {
    margin-bottom: 8px;
    font-size: 13px
}

@media only screen and (min-width: 480px) {
    .container.mobile account-verification .button-and-forgot-password .forgot-password-link {
        margin-top: 24px;
        font-size: 16px
    }
}

.container.mobile reset-password form .title {
    font-size: 32px;
    margin-bottom: 30px
}

.container.mobile reset-password form md-input-container {
    margin: 24px 0
}

.container.mobile reset-password form .button-spinner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.mobile reset-password form .reset-btn, .container.mobile reset-password form .spinner-container {
    margin-top: 12px
}

.container.mobile reset-password-confirmation .button {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.mobile reset-password-confirmation .button .wix-button {
    line-height: 2.5
}

.container.mobile reset-password-confirmation .content {
    line-height: 24px;
    margin-bottom: 33px
}

.container.mobile .title {
    font-size: 32px;
    margin-bottom: 26px
}

.container.mobile .content {
    font-size: 16px;
    margin-bottom: 38px
}

.container.mobile .wix-button {
    font-size: 16px;
    min-width: 106px;
    height: 42px
}

@media only screen and (min-width: 480px) {
    .container.mobile reset-password form .reset-btn, .container.mobile reset-password form .spinner-container {
        margin-top: 22px
    }

    .container.mobile .content {
        font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif;
        margin-bottom: 50px
    }

    .container.mobile .wix-button {
        font-size: 20px;
        min-width: 118px;
        height: 54px;
        margin-top: 16px
    }
}

.container.mobile .spinner-container {
    min-width: 106px;
    height: 42px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container.mobile account-verification, .container.mobile email-verified-confirmation, .container.mobile enter-email, .container.mobile forgot-password, .container.mobile forgot-password-confirmation, .container.mobile reset-password, .container.mobile reset-password-confirmation, .container.mobile thank-you {
    padding: 0 20px
}

.container.mobile account-verification form, .container.mobile email-verified-confirmation form, .container.mobile enter-email form, .container.mobile forgot-password form, .container.mobile forgot-password-confirmation form, .container.mobile reset-password form, .container.mobile reset-password-confirmation form, .container.mobile thank-you form {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 50px
}

@media only screen and (max-height: 800px) {
    .container.mobile account-verification form, .container.mobile email-verified-confirmation form, .container.mobile enter-email form, .container.mobile forgot-password form, .container.mobile forgot-password-confirmation form, .container.mobile reset-password form, .container.mobile reset-password-confirmation form, .container.mobile thank-you form {
        margin-top: 102px
    }
}

@media only screen and (min-height: 800px) and (max-height: 1100px) {
    .container.mobile account-verification form, .container.mobile email-verified-confirmation form, .container.mobile enter-email form, .container.mobile forgot-password form, .container.mobile forgot-password-confirmation form, .container.mobile reset-password form, .container.mobile reset-password-confirmation form, .container.mobile thank-you form {
        margin-top: 123px
    }
}

@media only screen and (min-height: 1100px) {
    .container.mobile account-verification form, .container.mobile email-verified-confirmation form, .container.mobile enter-email form, .container.mobile forgot-password form, .container.mobile forgot-password-confirmation form, .container.mobile reset-password form, .container.mobile reset-password-confirmation form, .container.mobile thank-you form {
        margin-top: 223px
    }
}

.container.mobile account-verification form .title, .container.mobile email-verified-confirmation form .title, .container.mobile enter-email form .title, .container.mobile forgot-password form .title, .container.mobile forgot-password-confirmation form .title, .container.mobile reset-password form .title, .container.mobile reset-password-confirmation form .title, .container.mobile thank-you form .title {
    margin-bottom: 30px
}

@media only screen and (max-width: 480px) {
    .container.mobile account-verification form .title, .container.mobile email-verified-confirmation form .title, .container.mobile enter-email form .title, .container.mobile forgot-password form .title, .container.mobile forgot-password-confirmation form .title, .container.mobile reset-password form .title, .container.mobile reset-password-confirmation form .title, .container.mobile thank-you form .title {
        font-size: 32px;
        width: 234px
    }
}

@media only screen and (min-width: 480px) {
    .container.mobile account-verification form .title, .container.mobile email-verified-confirmation form .title, .container.mobile enter-email form .title, .container.mobile forgot-password form .title, .container.mobile forgot-password-confirmation form .title, .container.mobile reset-password form .title, .container.mobile reset-password-confirmation form .title, .container.mobile thank-you form .title {
        font-size: 40px
    }
}

body.marketing-design {
    background-color: #1f77ff;

}

body.marketing-design .container.mobile {
    color: #fff
}

body.marketing-design .container.mobile .wix-logo {
    -webkit-filter: brightness(100);
    filter: brightness(100)
}

body.marketing-design .container.mobile .form-header {
    font-family: HelveticaNeueW01-65Medi, HelveticaNeueW02-65Medi, HelveticaNeueW10-65Medi, sans-serif;
    background-color: #1f77ff
}

body.marketing-design .container.mobile .or-use-email {
    color: unset
}

body.marketing-design .container.mobile md-input-container .md-input {
    color: #fff;
    box-shadow: unset !important
}

body.marketing-design .container.mobile md-input-container input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #1f77ff inset !important
}

body.marketing-design .container.mobile md-input-container .label {
    color: unset !important
}

body.marketing-design .container.mobile md-input-container.has-error .error-label, body.marketing-design .container.mobile md-input-container.has-error i.error {
    color: #11418c !important
}

body.marketing-design .container.mobile .ng-submitted md-input-container.has-error input, body.marketing-design .container.mobile md-input-container.has-error input.md-input.ng-invalid.ng-dirty {
    border-bottom-color: #11418c
}

body.marketing-design .container.mobile a {
    color: #fff;
    text-decoration: underline
}

body.marketing-design .container.mobile .wix-button {
    color: #fff;
    background-color: #f96132;
    font-weight: 600
}

body.marketing-design .container.mobile .wix-button.is-button-outline {
    color: #f96132 !important;
    background-color: #1f77ff;
    box-shadow: inset 0 0 0 1px #f96132 !important
}

body.marketing-design .container.mobile social-signin .sozial-icons .sozial-login.fazebook-login-button, body.marketing-design .container.mobile social-signin .sozial-icons .sozial-login.zoogle-login-button {
    background-color: #fff;
    border: none
}

body.marketing-design .container.mobile terms-of-use {
    color: #fff
}

body.marketing-design .container.mobile forgot-password {
    background-color: unset
}

body {
    margin: 0;
    -moz-osx-font-smoothing: grayscale
}

a {
    color: #459fed;
    text-decoration: none
}

.container, body, html {
    width: 100%;
    height: 100%;
    display: block;
    color: #162d3d
}

md-progress-circular .md-inner .md-left .md-half-circle, md-progress-circular .md-inner .md-right .md-half-circle {
    border-color: #459fed
}

.header {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.header .x-close {
    color: #20303c;
    font-size: 25px;
    cursor: pointer;
    outline: 0
}

.wix-button {
    line-height: 1.5
}

.login-svg-font-icons-fazebook:before {
    margin-bottom: 2px
}

.login-svg-font-icons-zoogle:before {
    content: "\f109";
    margin-bottom: 2px;
    margin-left: 1px
}


@media only screen and (max-height: 942px) {
    .container.desktop .button-spinner .spinner-container {
        margin-top: -3px;
        width: 105px
    }

    .container.desktop md-input-container:not(.new) {
        font-size: 20px;
        height: 31px
    }

    .container.desktop md-input-container:not(.new) .md-placeholder, .container.desktop md-input-container:not(.new) label:not(.md-no-float) {
        padding-left: 9px;
        margin-bottom: 0
    }

    .container.desktop md-input-container:not(.new) .md-input, .container.desktop md-input-container:not(.new) .md-input.ng-invalid.ng-dirty, .container.desktop md-input-container:not(.new).md-input-focused .md-input {
        font-size: 20px;
        padding-bottom: 6px;
        padding-left: 5px
    }

    .container.desktop .wix-button {
        min-width: 105px;
        font-size: 16px;
        height: 43px;
        padding-top: 8px
    }

    .container.desktop desktop-input md-input-container input, .container.desktop desktop-input md-input-container label {
        font-size: 20px
    }

    .container.desktop desktop-input md-input-container.md-input-focused label, .container.desktop desktop-input md-input-container.md-input-has-value label {
        -webkit-transform: translate3d(0, 4px, 0) scale(.67);
        transform: translate3d(0, 4px, 0) scale(.67)
    }

    .container.desktop desktop-input md-input-container .error {
        font-size: 32px;
        bottom: 14px
    }

    .container.desktop login terms-of-use, .container.desktop signup terms-of-use {
        margin-top: 39px;
        font-size: 14px;
        width: 363px;
        line-height: 24px
    }

    .container.desktop login .login .title, .container.desktop login .signup .title, .container.desktop signup .login .title, .container.desktop signup .signup .title {
        font-size: 56px;
        margin-bottom: 17px
    }

    .container.desktop login .login .already-user, .container.desktop login .login .new-user, .container.desktop login .signup .already-user, .container.desktop login .signup .new-user, .container.desktop signup .login .already-user, .container.desktop signup .login .new-user, .container.desktop signup .signup .already-user, .container.desktop signup .signup .new-user {
        font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif;
        font-size: 20px;
        margin-bottom: 34px
    }

    .container.desktop login .login-buttons .text-or-with-sozial, .container.desktop signup .login-buttons .text-or-with-sozial {
        font-size: 16px
    }

    .container.desktop login .login-buttons .sozial-login, .container.desktop signup .login-buttons .sozial-login {
        height: 43px
    }

    .container.desktop account-verification form .title, .container.desktop email-verified-confirmation form .title, .container.desktop enter-email form .title, .container.desktop forgot-password form .title, .container.desktop forgot-password-confirmation form .title, .container.desktop reset-password form .title, .container.desktop reset-password-confirmation form .title {
        font-size: 56px;
        margin-bottom: 17px;
        font-family: HelveticaNeueW01-Thin, HelveticaNeueW02-Thin, HelveticaNeueW10-35Thin, sans-serif
    }

    .container.desktop account-verification form .content, .container.desktop email-verified-confirmation form .content, .container.desktop enter-email form .content, .container.desktop forgot-password form .content, .container.desktop forgot-password-confirmation form .content, .container.desktop reset-password form .content, .container.desktop reset-password-confirmation form .content {
        font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, sans-serif
    }

    .container.desktop account-verification form .md-input, .container.desktop email-verified-confirmation form .md-input, .container.desktop enter-email form .md-input, .container.desktop forgot-password form .md-input, .container.desktop forgot-password-confirmation form .md-input, .container.desktop reset-password form .md-input, .container.desktop reset-password-confirmation form .md-input {
        padding-bottom: 5px !important
    }
}

md-input-container {
    display: inline-block;
    position: relative;
    padding: 2px;
    margin: 18px 0;
    vertical-align: middle
}

md-input-container input {
    -moz-appearance: none;
    -webkit-appearance: none
}

md-input-container label {
    left: 0;
    right: auto;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    position: absolute;
    bottom: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    pointer-events: none;
    z-index: 1;
    -webkit-transform: translate3d(0, 28px, 0) scale(1);
    transform: translate3d(0, 28px, 0) scale(1);
    transition: -webkit-transform .4s cubic-bezier(.25, .8, .25, 1);
    transition: transform .4s cubic-bezier(.25, .8, .25, 1);
    max-width: 100%
}

[dir=rtl] md-input-container label {
    left: auto;
    right: 0;
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top
}

md-input-container .md-input {
    float: left;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    display: block;
    margin-top: 0;
    background: 0 0;
    border-width: 0 0 1px;
    line-height: 26px;
    -ms-flex-preferred-size: 26px;
    border-radius: 0;
    border-style: solid;
    width: 100%;
    box-sizing: border-box
}

[dir=rtl] md-input-container .md-input {
    float: right
}

md-input-container .md-input:focus {
    outline: 0
}

md-input-container .md-input:invalid {
    outline: 0;
    box-shadow: none
}

md-input-container.md-input-focused label, md-input-container.md-input-has-placeholder label, md-input-container.md-input-has-value label {
    -webkit-transform: translate3d(0, 6px, 0) scale(.75);
    transform: translate3d(0, 6px, 0) scale(.75);
    transition: -webkit-transform cubic-bezier(.25, .8, .25, 1) .4s, width cubic-bezier(.25, .8, .25, 1) .4s;
    transition: transform cubic-bezier(.25, .8, .25, 1) .4s, width cubic-bezier(.25, .8, .25, 1) .4s
}

md-input-container.md-input-has-value label {
    transition: none
}

spinner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

spinner .spinner {
    -webkit-animation: rotator 1.9s linear infinite;
    animation: rotator 1.9s linear infinite
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }
}

@keyframes rotator {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }
}

spinner .path {
    stroke-dasharray: 188;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    stroke: #459fed;
    -webkit-animation: dash 1.9s ease-in-out infinite;
    animation: dash 1.9s ease-in-out infinite
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 188
    }
    50% {
        stroke-dashoffset: 47;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg)
    }
    100% {
        stroke-dashoffset: 188;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg)
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 188
    }
    50% {
        stroke-dashoffset: 47;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg)
    }
    100% {
        stroke-dashoffset: 188;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg)
    }
}


@font-face {
    font-family: wix-style-svg-font-icons;
    src: url(svg-font/wix-style-svg-font-icons.eot);
    src: url(svg-font/wix-style-svg-font-icons.eot?#iefix) format("embedded-opentype"), url(svg-font/wix-style-svg-font-icons.woff) format("woff"), url(svg-font/wix-style-svg-font-icons.ttf) format("truetype"), url(svg-font/wix-style-svg-font-icons.svg?#wix-style-svg-font-icons) format("svg");
    font-weight: 400;
    font-style: normal
}

.error.ng-invalid.ng-dirty.md-autocomplete-input:not(.suppress-error) + .icon, .error2.ng-invalid.ng-dirty.md-autocomplete-input:not(.suppress-error) + .icon, .ng-submitted .error.ng-invalid.md-autocomplete-input:not(.suppress-error) + .icon, .ng-submitted .error2.ng-invalid.md-autocomplete-input:not(.suppress-error) + .icon, .ng-submitted .wix-input input.error.ng-invalid:not(.suppress-error) + .icon, .ng-submitted .wix-input input.error2.ng-invalid:not(.suppress-error) + .icon, .ng-submitted .wix-input textarea.error.ng-invalid:not(.suppress-error) + .icon, .ng-submitted .wix-input textarea.error2.ng-invalid:not(.suppress-error) + .icon, .ng-submitted .wix-textarea textarea.error.ng-invalid:not(.suppress-error) + .icon, .ng-submitted .wix-textarea textarea.error2.ng-invalid:not(.suppress-error) + .icon, .ng-submitted wix-input-container input.error.ng-invalid:not(.suppress-error) + .icon, .ng-submitted wix-input-container input.error2.ng-invalid:not(.suppress-error) + .icon, .step:before, .wix-breadcrumbs .breadcrumb + .breadcrumb:before, .wix-input .ng-submitted input.error.ng-invalid:not(.suppress-error) + .icon, .wix-input .ng-submitted input.error2.ng-invalid:not(.suppress-error) + .icon, .wix-input .ng-submitted textarea.error.ng-invalid:not(.suppress-error) + .icon, .wix-input .ng-submitted textarea.error2.ng-invalid:not(.suppress-error) + .icon, .wix-input input.error.ng-invalid.ng-dirty:not(.suppress-error) + .icon, .wix-input input.error2.ng-invalid.ng-dirty:not(.suppress-error) + .icon, .wix-input textarea.error.ng-invalid.ng-dirty:not(.suppress-error) + .icon, .wix-input textarea.error2.ng-invalid.ng-dirty:not(.suppress-error) + .icon, .wix-list-item .wix-list-icon.wix-list-actions, .wix-list-item .wix-list-icon.wix-list-draggable, .wix-style-svg-font-icons, .wix-table-card-list-item .wix-table-card-list-icon.wix-table-card-list-actions, .wix-table-card-list-item .wix-table-card-list-icon.wix-table-card-list-draggable, .wix-textarea .ng-submitted textarea.error.ng-invalid:not(.suppress-error) + .icon, .wix-textarea .ng-submitted textarea.error2.ng-invalid:not(.suppress-error) + .icon, .wix-textarea textarea.error.ng-invalid.ng-dirty:not(.suppress-error) + .icon, .wix-textarea textarea.error2.ng-invalid.ng-dirty:not(.suppress-error) + .icon, .wix-toggle span .toggle-circle:before, [class*=" wix-style-svg-font-icons-"]:before, [class^=wix-style-svg-font-icons-]:before, md-select ._md-select-value ._md-select-icon, md-select ._md-select-value .md-select-icon, md-select .md-select-value ._md-select-icon, md-select .md-select-value .md-select-icon, wix-checkbox [type=checkbox]:checked + .wix-checkbox-inner, wix-checkbox [type=checkbox]:indeterminate + .wix-checkbox-inner, wix-input-container .ng-submitted input.error.ng-invalid:not(.suppress-error) + .icon, wix-input-container .ng-submitted input.error2.ng-invalid:not(.suppress-error) + .icon, wix-input-container input.error.ng-invalid.ng-dirty:not(.suppress-error) + .icon, wix-input-container input.error2.ng-invalid.ng-dirty:not(.suppress-error) + .icon {
    font-family: wix-style-svg-font-icons;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.wix-style-svg-font-icons-arrow-down:before, md-select ._md-select-value ._md-select-icon:before, md-select ._md-select-value .md-select-icon:before, md-select .md-select-value ._md-select-icon:before, md-select .md-select-value .md-select-icon:before {
    content: "\f101"
}

.dp-header .dp-prev:before, .wix-style-svg-font-icons-arrow-left:before {
    content: "\f102"
}

.dp-header .dp-next:before, .step:before, .wix-breadcrumbs .breadcrumb + .breadcrumb:before, .wix-style-svg-font-icons-arrow-right:before {
    content: "\f103"
}

.wix-style-svg-font-icons-arrow-top:before {
    content: "\f104"
}

.wix-style-svg-font-icons-arrow-up:before {
    content: "\f105"
}

.wix-style-svg-font-icons-arrow-vertical:before {
    content: "\f106"
}

.wix-notification-general.is-notification-closable-with-icon .wix-notification-icon:before, .wix-notification-general.is-notification-closable-with-icon-dark .wix-notification-icon:before, .wix-style-svg-font-icons-bulb:before {
    content: "\f107"
}

.wix-style-svg-font-icons-chat:before {
    content: "\f108"
}

.wix-notification-success.is-notification-closable-with-icon .wix-notification-icon:before, .wix-notification-success.is-notification-closable-with-icon-dark .wix-notification-icon:before, .wix-style-svg-font-icons-check:before, wix-checkbox [type=checkbox]:checked + .wix-checkbox-inner:before {
    content: "\f109"
}

.wix-notification-error.is-notification-closable .wix-notification-close-button:before, .wix-notification-error.is-notification-closable-with-icon .wix-notification-close-button:before, .wix-notification-error.is-notification-closable-with-icon-dark .wix-notification-close-button:before, .wix-notification-error.is-notification-closable-with-inner-button .wix-notification-close-button:before, .wix-notification-general.is-notification-closable .wix-notification-close-button:before, .wix-notification-general.is-notification-closable-with-icon .wix-notification-close-button:before, .wix-notification-general.is-notification-closable-with-icon-dark .wix-notification-close-button:before, .wix-notification-general.is-notification-closable-with-inner-button .wix-notification-close-button:before, .wix-notification-success.is-notification-closable .wix-notification-close-button:before, .wix-notification-success.is-notification-closable-with-icon .wix-notification-close-button:before, .wix-notification-success.is-notification-closable-with-icon-dark .wix-notification-close-button:before, .wix-notification-success.is-notification-closable-with-inner-button .wix-notification-close-button:before, .wix-notification-warning.is-notification-closable .wix-notification-close-button:before, .wix-notification-warning.is-notification-closable-with-inner-button .wix-notification-close-button:before, .wix-style-svg-font-icons-close:before {
    content: "\f10a"
}

.wix-style-svg-font-icons-data-picker-arrow:before {
    content: "\f10b"
}

.wix-list-item .wix-list-icon.wix-list-actions:before, .wix-style-svg-font-icons-dots:before, .wix-table-card-list-item .wix-table-card-list-icon.wix-table-card-list-actions:before {
    content: "\f10c"
}

.wix-style-svg-font-icons-download:before {
    content: "\f10d"
}

.wix-list-item .wix-list-icon.wix-list-draggable:before, .wix-style-svg-font-icons-drag:before, .wix-table-card-list-item .wix-table-card-list-icon.wix-table-card-list-draggable:before {
    content: "\f10e"
}

.wix-style-svg-font-icons-duplication:before {
    content: "\f10f"
}

.wix-style-svg-font-icons-finder:before {
    content: "\f110"
}

.wix-style-svg-font-icons-help:before {
    content: "\f111"
}

.wix-style-svg-font-icons-hidden:before {
    content: "\f112"
}

.wix-style-svg-font-icons-image:before {
    content: "\f113"
}

.wix-style-svg-font-icons-info:before {
    content: "\f114"
}

.wix-style-svg-font-icons-move:before {
    content: "\f115"
}

.wix-style-svg-font-icons-partial-check:before, wix-checkbox [type=checkbox]:indeterminate + .wix-checkbox-inner:before {
    content: "\f116"
}

.wix-style-svg-font-icons-pen-outline:before {
    content: "\f117"
}

.wix-style-svg-font-icons-pen:before {
    content: "\f118"
}

.wix-notification-error.is-notification-closable-with-icon .wix-notification-icon:before, .wix-notification-error.is-notification-closable-with-icon-dark .wix-notification-icon:before, .wix-style-svg-font-icons-plaster:before {
    content: "\f119"
}

.wix-style-svg-font-icons-plus-new:before {
    content: "\f11a"
}

.wix-style-svg-font-icons-plus-with-circle:before {
    content: "\f11b"
}

.wix-style-svg-font-icons-plus:before {
    content: "\f11c"
}

.wix-style-svg-font-icons-remove:before {
    content: "\f11d"
}

.wix-style-svg-font-icons-replace:before {
    content: "\f11e"
}

.wix-style-svg-font-icons-search-new:before {
    content: "\f11f"
}

.wix-style-svg-font-icons-search:before {
    content: "\f120"
}

.wix-style-svg-font-icons-toggle-off:before, .wix-toggle span .toggle-circle:before {
    content: "\f121"
}

.wix-style-svg-font-icons-toggle-on:before, .wix-toggle [type=checkbox]:checked + span .toggle-circle:before {
    content: "\f122"
}

.wix-style-svg-font-icons-trash-can:before {
    content: "\f123"
}

.wix-style-svg-font-icons-validation:before {
    content: "\f124"
}

.wix-style-svg-font-icons-view:before {
    content: "\f125"
}

.wix-style-svg-font-icons-visibilty:before {
    content: "\f126"
}

.wix-style-svg-font-icons-x:before {
    content: "\f127"
}

.step:first-child:before, .wix-modal .wix-modal--footer:after {
    content: ''
}

.wix-toggle [type=checkbox], wix-checkbox [type=checkbox], wix-radio [type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    opacity: 0
}

.wix-link {
    color: #3899ec;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: visible;
    width: auto;
    background: 0 0;
    border: 0;
    display: inline;
    font: inherit;
    margin: 0;
    padding: 0;
    outline: 0;
    cursor: pointer
}

.wix-link::-moz-focus-inner {
    border: 0;
    padding: 0
}

.wix-link[disabled] {
    color: #dadada
}

.wix-button, .wix-button-danger, .wix-button-emphasize, .wix-button-invert, .wix-button-invert-light, .wix-button-market, .wix-button-premium, .wix-button-transparent {
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    border-radius: 999px;
    border: none;
    color: #fff;
    font-family: HelveticaNeueW01-55Roma, HelveticaNeueW02-55Roma, HelveticaNeueW10-55Roma, sans-serif;
    font-size: 16px;
    line-height: 36px;
    padding: 0 24px;
    cursor: pointer;
    outline: 0;
    -webkit-font-smoothing: antialiased
}

.disabled.wix-button, .disabled.wix-button-danger, .disabled.wix-button-danger:active, .disabled.wix-button-danger:hover, .disabled.wix-button-emphasize, .disabled.wix-button-emphasize:active, .disabled.wix-button-emphasize:hover, .disabled.wix-button-invert, .disabled.wix-button-invert-light, .disabled.wix-button-invert-light:active, .disabled.wix-button-invert-light:hover, .disabled.wix-button-invert:active, .disabled.wix-button-invert:hover, .disabled.wix-button-market, .disabled.wix-button-market:active, .disabled.wix-button-market:hover, .disabled.wix-button-premium, .disabled.wix-button-premium:active, .disabled.wix-button-premium:hover, .disabled.wix-button-transparent, .disabled.wix-button-transparent:active, .disabled.wix-button-transparent:hover, .disabled.wix-button:active, .disabled.wix-button:hover, [disabled].wix-button, [disabled].wix-button-danger, [disabled].wix-button-danger:active, [disabled].wix-button-danger:hover, [disabled].wix-button-emphasize, [disabled].wix-button-emphasize:active, [disabled].wix-button-emphasize:hover, [disabled].wix-button-invert, [disabled].wix-button-invert-light, [disabled].wix-button-invert-light:active, [disabled].wix-button-invert-light:hover, [disabled].wix-button-invert:active, [disabled].wix-button-invert:hover, [disabled].wix-button-market, [disabled].wix-button-market:active, [disabled].wix-button-market:hover, [disabled].wix-button-premium, [disabled].wix-button-premium:active, [disabled].wix-button-premium:hover, [disabled].wix-button-transparent, [disabled].wix-button-transparent:active, [disabled].wix-button-transparent:hover, [disabled].wix-button:active, [disabled].wix-button:hover {
    color: #f1f1f1;
    cursor: default
}

.disabled.wix-button-danger:not(.wix-button-transparent):not(.is-button-outline), .disabled.wix-button-danger:not(.wix-button-transparent):not(.is-button-outline):active, .disabled.wix-button-danger:not(.wix-button-transparent):not(.is-button-outline):hover, .disabled.wix-button-emphasize:not(.wix-button-transparent):not(.is-button-outline), .disabled.wix-button-emphasize:not(.wix-button-transparent):not(.is-button-outline):active, .disabled.wix-button-emphasize:not(.wix-button-transparent):not(.is-button-outline):hover, .disabled.wix-button-invert-light:not(.wix-button-transparent):not(.is-button-outline), .disabled.wix-button-invert-light:not(.wix-button-transparent):not(.is-button-outline):active, .disabled.wix-button-invert-light:not(.wix-button-transparent):not(.is-button-outline):hover, .disabled.wix-button-invert:not(.wix-button-transparent):not(.is-button-outline), .disabled.wix-button-invert:not(.wix-button-transparent):not(.is-button-outline):active, .disabled.wix-button-invert:not(.wix-button-transparent):not(.is-button-outline):hover, .disabled.wix-button-market:not(.wix-button-transparent):not(.is-button-outline), .disabled.wix-button-market:not(.wix-button-transparent):not(.is-button-outline):active, .disabled.wix-button-market:not(.wix-button-transparent):not(.is-button-outline):hover, .disabled.wix-button-premium:not(.wix-button-transparent):not(.is-button-outline), .disabled.wix-button-premium:not(.wix-button-transparent):not(.is-button-outline):active, .disabled.wix-button-premium:not(.wix-button-transparent):not(.is-button-outline):hover, .disabled.wix-button-transparent:not(.wix-button-transparent):not(.is-button-outline), .disabled.wix-button-transparent:not(.wix-button-transparent):not(.is-button-outline):active, .disabled.wix-button-transparent:not(.wix-button-transparent):not(.is-button-outline):hover, .disabled.wix-button:not(.wix-button-transparent):not(.is-button-outline), .disabled.wix-button:not(.wix-button-transparent):not(.is-button-outline):active, .disabled.wix-button:not(.wix-button-transparent):not(.is-button-outline):hover, [disabled].wix-button-danger:not(.wix-button-transparent):not(.is-button-outline), [disabled].wix-button-danger:not(.wix-button-transparent):not(.is-button-outline):active, [disabled].wix-button-danger:not(.wix-button-transparent):not(.is-button-outline):hover, [disabled].wix-button-emphasize:not(.wix-button-transparent):not(.is-button-outline), [disabled].wix-button-emphasize:not(.wix-button-transparent):not(.is-button-outline):active, [disabled].wix-button-emphasize:not(.wix-button-transparent):not(.is-button-outline):hover, [disabled].wix-button-invert-light:not(.wix-button-transparent):not(.is-button-outline), [disabled].wix-button-invert-light:not(.wix-button-transparent):not(.is-button-outline):active, [disabled].wix-button-invert-light:not(.wix-button-transparent):not(.is-button-outline):hover, [disabled].wix-button-invert:not(.wix-button-transparent):not(.is-button-outline), [disabled].wix-button-invert:not(.wix-button-transparent):not(.is-button-outline):active, [disabled].wix-button-invert:not(.wix-button-transparent):not(.is-button-outline):hover, [disabled].wix-button-market:not(.wix-button-transparent):not(.is-button-outline), [disabled].wix-button-market:not(.wix-button-transparent):not(.is-button-outline):active, [disabled].wix-button-market:not(.wix-button-transparent):not(.is-button-outline):hover, [disabled].wix-button-premium:not(.wix-button-transparent):not(.is-button-outline), [disabled].wix-button-premium:not(.wix-button-transparent):not(.is-button-outline):active, [disabled].wix-button-premium:not(.wix-button-transparent):not(.is-button-outline):hover, [disabled].wix-button-transparent:not(.wix-button-transparent):not(.is-button-outline), [disabled].wix-button-transparent:not(.wix-button-transparent):not(.is-button-outline):active, [disabled].wix-button-transparent:not(.wix-button-transparent):not(.is-button-outline):hover, [disabled].wix-button:not(.wix-button-transparent):not(.is-button-outline), [disabled].wix-button:not(.wix-button-transparent):not(.is-button-outline):active, [disabled].wix-button:not(.wix-button-transparent):not(.is-button-outline):hover {
    background: #c8c8c8
}

.wix-button-danger::-moz-focus-inner, .wix-button-emphasize::-moz-focus-inner, .wix-button-invert-light::-moz-focus-inner, .wix-button-invert::-moz-focus-inner, .wix-button-market::-moz-focus-inner, .wix-button-premium::-moz-focus-inner, .wix-button-transparent::-moz-focus-inner, .wix-button::-moz-focus-inner {
    border: 0;
    padding: 0
}

.is-button-outline.disabled.wix-button, .is-button-outline.disabled.wix-button-danger, .is-button-outline.disabled.wix-button-emphasize, .is-button-outline.disabled.wix-button-invert, .is-button-outline.disabled.wix-button-invert-light, .is-button-outline.disabled.wix-button-market, .is-button-outline.disabled.wix-button-premium, .is-button-outline.disabled.wix-button-transparent, .is-button-outline.wix-button, .is-button-outline.wix-button-danger, .is-button-outline.wix-button-emphasize, .is-button-outline.wix-button-invert, .is-button-outline.wix-button-invert-light, .is-button-outline.wix-button-market, .is-button-outline.wix-button-premium, .is-button-outline.wix-button-transparent, .is-button-outline[disabled].wix-button, .is-button-outline[disabled].wix-button-danger, .is-button-outline[disabled].wix-button-emphasize, .is-button-outline[disabled].wix-button-invert, .is-button-outline[disabled].wix-button-invert-light, .is-button-outline[disabled].wix-button-market, .is-button-outline[disabled].wix-button-premium, .is-button-outline[disabled].wix-button-transparent {
    background: 0 0
}

.is-button-outline.wix-button-danger:active:not(.disabled):not([disabled]), .is-button-outline.wix-button-danger:hover:not(.disabled):not([disabled]), .is-button-outline.wix-button-emphasize:active:not(.disabled):not([disabled]), .is-button-outline.wix-button-emphasize:hover:not(.disabled):not([disabled]), .is-button-outline.wix-button-invert-light:active:not(.disabled):not([disabled]), .is-button-outline.wix-button-invert-light:hover:not(.disabled):not([disabled]), .is-button-outline.wix-button-invert:active:not(.disabled):not([disabled]), .is-button-outline.wix-button-invert:hover:not(.disabled):not([disabled]), .is-button-outline.wix-button-market:active:not(.disabled):not([disabled]), .is-button-outline.wix-button-market:hover:not(.disabled):not([disabled]), .is-button-outline.wix-button-premium:active:not(.disabled):not([disabled]), .is-button-outline.wix-button-premium:hover:not(.disabled):not([disabled]), .is-button-outline.wix-button-transparent:active:not(.disabled):not([disabled]), .is-button-outline.wix-button-transparent:hover:not(.disabled):not([disabled]), .is-button-outline.wix-button:active:not(.disabled):not([disabled]), .is-button-outline.wix-button:hover:not(.disabled):not([disabled]) {
    box-shadow: none
}

.is-button-outline.disabled.wix-button, .is-button-outline.disabled.wix-button-danger, .is-button-outline.disabled.wix-button-emphasize, .is-button-outline.disabled.wix-button-invert, .is-button-outline.disabled.wix-button-invert-light, .is-button-outline.disabled.wix-button-market, .is-button-outline.disabled.wix-button-premium, .is-button-outline.disabled.wix-button-transparent, .is-button-outline[disabled].wix-button, .is-button-outline[disabled].wix-button-danger, .is-button-outline[disabled].wix-button-emphasize, .is-button-outline[disabled].wix-button-invert, .is-button-outline[disabled].wix-button-invert-light, .is-button-outline[disabled].wix-button-market, .is-button-outline[disabled].wix-button-premium, .is-button-outline[disabled].wix-button-transparent {
    color: #c8c8c8;
    box-shadow: inset 0 0 0 1px #c8c8c8
}

a.wix-button, a.wix-button-danger, a.wix-button-emphasize, a.wix-button-invert, a.wix-button-invert-light, a.wix-button-market, a.wix-button-premium, a.wix-button-transparent {
    display: inline-block;
    text-decoration: none
}

a.wix-button-danger:hover:not(.wix-button-invert):not(.wix-button-transparent):not(.wix-button-emphasize):not(.disabled):not([disabled]), a.wix-button-emphasize:hover:not(.wix-button-invert):not(.wix-button-transparent):not(.wix-button-emphasize):not(.disabled):not([disabled]), a.wix-button-invert-light:hover:not(.wix-button-invert):not(.wix-button-transparent):not(.wix-button-emphasize):not(.disabled):not([disabled]), a.wix-button-invert:hover:not(.wix-button-invert):not(.wix-button-transparent):not(.wix-button-emphasize):not(.disabled):not([disabled]), a.wix-button-market:hover:not(.wix-button-invert):not(.wix-button-transparent):not(.wix-button-emphasize):not(.disabled):not([disabled]), a.wix-button-premium:hover:not(.wix-button-invert):not(.wix-button-transparent):not(.wix-button-emphasize):not(.disabled):not([disabled]), a.wix-button-transparent:hover:not(.wix-button-invert):not(.wix-button-transparent):not(.wix-button-emphasize):not(.disabled):not([disabled]), a.wix-button:hover:not(.wix-button-invert):not(.wix-button-transparent):not(.wix-button-emphasize):not(.disabled):not([disabled]) {
    text-decoration: none;
    color: #fff
}

.wix-button {
    background: #3899ec
}

.wix-button.is-button-outline:not(:hover):not(.pseudo-class-hover):not(.disabled):not([disabled]):not(:active):not(.pseudo-class-active) {
    color: #3899ec;
    box-shadow: inset 0 0 0 1px #3899ec
}

.wix-button:hover {
    background: #4eb7f5
}

.wix-button:active {
    background: #3899ec
}

.wix-button-premium {
    background: #aa4dc8
}

.wix-button-premium.is-button-outline:not(:hover):not(.pseudo-class-hover):not(.disabled):not([disabled]):not(:active):not(.pseudo-class-active) {
    color: #aa4dc8;
    box-shadow: inset 0 0 0 1px #aa4dc8
}

.wix-button-premium:hover {
    background: #cd68ed
}

.wix-button-premium:active {
    background: #aa4dc8
}



[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
    display: none !important;
}



.wExtra{}
.wExtra.container login .login .title, .wExtra.container login .signup .title, .wExtra.container signup .login .title, .wExtra.container signup .signup .title {
    text-align: center;
    font-size: 56px;
    margin-bottom: 17px;
    font-family: HelveticaNeueW01-Thin,HelveticaNeueW02-Thin,HelveticaNeueW10-35Thin,sans-serif;
    color: #20303c;
}

.wExtra.container login .login .already-user, .wExtra.container login .login .new-user, .wExtra.container login .signup .already-user, .wExtra.container login .signup .new-user, .wExtra.container signup .login .already-user, .wExtra.container signup .login .new-user, .wExtra.container signup .signup .already-user, .wExtra.container signup .signup .new-user {

    font-family: HelveticaNeueW01-45Ligh,HelveticaNeueW02-45Ligh,HelveticaNeueW10-45Ligh,sans-serif;
    font-size: 20px;
    margin-bottom: 34px;
}




.wExtra.container login terms-of-use, .wExtra.container signup terms-of-use {
    text-align: center;
    margin-top: 18px;
    line-height: 1.5;
}


.wExtra.container login terms-of-use.small, .wExtra.container signup terms-of-use.small{
    font-size: 14px;
    font-family: HelveticaNeueW01-45Ligh,HelveticaNeueW02-45Ligh,HelveticaNeueW10-45Ligh,sans-serif;
    color: #858f96;
}





body.darkmode{background-color:rgba(0,0,0,.96);}
body.darkmode md-input-container .md-input,body.darkmode  md-input-container.md-input-invalid .md-input{border-color:rgba(255,255,255,.1);  box-shadow: 0 0 0 1000px transparent inset !important}


/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
    color: #333;
    text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {

}

.cover-container {
    max-width: 42em;
}


/*
 * Header
 */

.nav-masthead .nav-link {
    padding: .25rem 0;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    background-color: transparent;
    border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
    border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
    margin-left: 1rem;
}

.nav-masthead .active {
    color: #fff;
    border-bottom-color: #fff;
}
@media only screen and (max-width: 600px) {
    .konum {
        max-width: 300px!important;
        right: 0px!important;
        left: 0px!important;
        top: 50%!important;
        margin-left: auto!important;
        margin-right: auto!important;
    }
    body{
        min-height: 0vh!important;
    }
}


video::-webkit-media-controls-enclosure {
    display:none !important;
}

#owl-demo .item img {
    display: block;
    width: 100%;
    height: 100vh;

    background-size: cover;
    object-fit: cover;


}

.owl-carousel {
    height: 100%;
}

.videoarka {

    object-fit: cover;
    position: fixed;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;

}

.konum {
    top: 50%;
    background-color: white;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 10%), 0 10px 30px 0 rgb(0 0 0 / 20%);
    border-radius: 10px;
    right: unset;
    left: 92px;
    position: absolute;
    z-index: 2;
    /* margin-top: -13em; height: 26em;*/
    width: 100%;
    max-width: 420px;
    display:none;

}

.form-group {
    margin: 0;

}

.form-group ~ .form-group {
    border-top: 1px solid rgba(0, 0, 0, .10);

}

.form-group input {
    padding-top: 10px;
    border: 0;
}

.weatra-login-area {
}

.weatra-login-area .title {
    margin-left: 10px;
}

.weatra-login-button {

    margin: auto;
    background: #409fff;
    border: 1px solid #409fff;
    border-radius: 1.25em;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    height: 2.5em;
    outline: 0;
    font-weight: 500;
    font-family: -apple-system, \.SFNSText-Regular, San Francisco, Roboto, Segoe UI, Helvetica Neue, Lucida Grande, sans-serif;
    transition: border-color .2s cubic-bezier(.77, 0, .175, 1), background-color .2s cubic-bezier(.77, 0, .175, 1), color .2s cubic-bezier(.77, 0, .175, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 9.75em;


}

.weatra-login-button:hover {
    background: #babcbf;
    border-color: #babcbf;
    color: #fff;
    cursor: default;
}

video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
}

.video-mask {
    background-size: cover;
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.nav {
    background: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(23, 24, 26, .11);
    border-radius: 5px;
    overflow: hidden;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: border-color .5s ease, opacity .4s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 40;

}

.nav .nav__item {
    align-items: center;
    display: flex;
    border-right: 1px solid #d4d7d9;
    flex-grow: 1;
    justify-content: center;
    transition: background-color .2s ease-out;
}

.nav .nav__item .nav__label {
    color: #17181a;
    font-weight: 500;
    font-family: -apple-system, \.SFNSText-Regular, San Francisco, Roboto, Segoe UI, Helvetica Neue, Lucida Grande, sans-serif;
    font-size: .875em;
    padding: 0 12px;
    text-decoration: none;
}

.nav .nav__label {
    cursor: pointer;
    display: inline-block;
    height: auto;
    line-height: 2.375rem;
    position: relative;
    transition: color .2s ease-out;
}

.nav .nav__items, .nav .nav__subitems {
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.nav .nav__items {
    display: flex;
}

/*
Page: https://fossheim.io
Patreon: https://patreon.com/fossheim
Buy Me A Coffee: https://buymeacoffee.com/fossheim

Inspired by the Muson toy synth.
*/


:root {
    --letter-1: #2E1F23;
    --letter-2: #1A1A24;

    --button-1: #171310;
    --button-2: #18171F;
    --button-3: #353541;
    --button-4: #302E33;

    --center-1: #0F1622;
    --center-2: #171D33;
    --center-3: #222632;
    --center-4: #313842;

    --center-5: #1C1F30;
    --center-6: #3D3A4D;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
    /*background-image: linear-gradient(90deg, #999999, #000000);*/
    min-height: 100vh;
    background-image: linear-gradient(to right, #2c3782 calc(60% - 150px), #39469f calc(60% - 150px), #39469f 60%, #4856b5 60%, #4856b5 calc(60% + 150px), #5b6ac6 calc(60% + 150px), #5b6ac6 100%);
}

.muson {
    display: block;

    position: absolute;
    top: 120px;
    top: calc(50vh - 300px);
    left: 0;
    right: 0;

    margin: 0 auto;

    width: 790px;
    height: 610px;

    border-radius: 6px;

    background-color: #FFD9D0;
    background-image: linear-gradient(
            135deg,
            #EFC4BB,
            #F6D0C7,
            #FDE0DA
    );

    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
    3.5px 0 2.5px -2.5px #AE857F inset,
    4.5px 0 2.5px -2.5px #D8B5AF inset,
    5.5px 0 2.5px -2.5px #DBBBB0 inset,
    6.5px 0 2.5px -2.5px #DFBDB1 inset,
    -3px 0 2px -2px #F9EAE5 inset,
    -3.5px 0 2px -2px #FFF0ED inset,
    -4.5px 0 2px -2px #FDDFD4 inset,
    -5.5px 0 2px -2px #FEE1DB inset,
    0 2px 2px -2px #EBCDCF inset,
    0 4px 2px -2px #EEC8C7 inset,
    0 5px 2px -2px #F4CFC7 inset,
    0 -2px 1.5px -1.5px #E8D4DD inset,
    0 -4.5px 1.5px -1.5px #F4CFC7 inset,
    0 -5px 1.5px -1.5px #FFFDFB inset,
    -30px -30px 10px rgba(114, 86, 98, 0.05),
    -25px -25px 10px rgba(114, 86, 98, 0.1),
    -20px -20px 10px rgba(114, 86, 98, 0.075),
    -10px -10px 10px rgba(114, 86, 98, 0.1),
    -5px -5px 10px rgba(114, 86, 98, 0.125),
    -50px -90px 30px rgba(114, 86, 98, 0.15),
    -45px -80px 30px rgba(114, 86, 98, 0.125),
    -40px -70px 30px rgba(114, 86, 98, 0.1),
    -35px -60px 30px rgba(114, 86, 98, 0.075),
    -45px -50px 30px rgba(114, 86, 98, 0.05),
    -2px 0 5px rgba(137, 124, 142, 0.5),
    0 0 10px rgba(137, 124, 142, 0.1),
    0 0 20px rgba(137, 124, 142, 0.05),
    0 0 50px rgba(255, 245, 250, 0.5);
}

.top-bar {
    display: block;
    width: 805px;
    height: 220px;
    margin-left: -8px;
    border-radius: 6px 6px 2px 2px;
    background-image: linear-gradient(#FAD2CA, #F9D1C7);

    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
    3.5px 0 2.5px -2.5px #AE857F inset,
    4.5px 0 2.5px -2.5px #D8B5AF inset,
    5.5px 0 2.5px -2.5px #DBBBB0 inset,
    6.5px 0 2.5px -2.5px #DFBDB1 inset,
    -3px 0 2px -2px #F9EAE5 inset,
    -3.5px 0 2px -2px #FFF0ED inset,
    -4.5px 0 2px -2px #FDDFD4 inset,
    -5.5px 0 2px -2px #FEE1DB inset,
    0 2px 2px -2px #EBCDCF inset,
    0 4px 2px -2px #EEC8C7 inset,
    0 5px 2px -2px #F4CFC7 inset,
    0 -2px 1.5px -1.5px #F9D1C7 inset,
    0 -4.5px 1.5px -1.5px #F9D1C7 inset,
    0 -5px 1.5px -1.5px #FFEAE4 inset,
    2px 12px 1.5px -6px #F9D1C7,
    1px 11px 1.5px -6px #F9D1C7,
    1px 10px 1.5px -6px #F9D1C7,
    1px 9px 1.5px -5px #F9D1C7,
    1px 8px 1.5px -5px #F9D1C7,
    1px 7px 1.5px -5px #F9D1C7,
    1px 6px 1.5px -5px #F9D1C7,
    3px 5px 1.5px -2px #F9D1C7,
    2px 4px 1.5px -2px #F9D1C7,
    1px 3px 1.5px -2px #F9D1C7,
    3px 13px 1px -6px #F9D1C7,
    3px 12px 4px -6px rgba(126, 80, 67, 0.25),
    -2px 25px 30px -3px rgba(126, 80, 67, 0.025),
    -2px 35px 35px -3px rgba(126, 80, 67, 0.075);

    position: relative;
}

.muson-frame {
    display: block;
    width: 310px;
    height: 165px;
    background-color: transparent;

    position: absolute;
    top: 25px;
    right: 65px;

    border-radius: 1px;

    box-shadow: 1px -1px 1px #DEB3AC inset,
    -2px 0 1px -1px #FFDBD3 inset,
    0 -1.5px 1px #FFDFD3 inset,
    0 70.25px 1px -70px #B58475;
}

.muson-frame:before {
    content: "";
    display: block;
    width: 320px;
    height: 25px;
    border-radius: 0 0 2px 2px;

    background-color: transparent;

    position: absolute;

    top: -25px;
    left: -10px;

    box-shadow: -0.5px 1.25px 0.75px -0.25px #D4A89D,
    0.5px 0 0.75px -0.25px #F3C9BD,
    0 -1px 0.5px -0.5px rgba(243, 204, 197, 1),
    0 -1px 1px #F7CBC0 inset,
    0 0 3px 4px #FCD1CA inset;
}

.muson-frame:after {
    content: "";
    display: block;
    width: 45px;
    height: 39px;
    border-radius: 0.5px;

    background-image: radial-gradient(rgba(255, 222, 213, 0.25), rgba(255, 222, 213, 0) 60%),
    repeating-linear-gradient(#F8D2C5 0 24%, #FDD9C9 25% 49%, #F6D1BF 50% 74%, #FDD4C0 75% 100%);
    background-size: 100% 100%, 4px 4px;

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    opacity: 0.95;

    box-shadow: 0 -1.5px 1px -0.5px #DEB3AC inset,
    0 -2px 1px -0.5px #FFDFD3 inset,
    -1px 0 1px #FFDED5 inset,
    1px 0 1px -0.5px #FFDED5,
    1px 0 1px #FBD5CA inset,
    -1px 0 1px -0.5px #FBD5CA,
    0 1.75px 1px -1px #B58475;
}

.rainbow {
    display: block;
    width: 290px;
    height: 120px;

    position: absolute;
    top: 7px;
    left: 8px;

    background-color: #fff;
    background-image: linear-gradient(#1E202F 0 12%,
    #495AC2 12.5% 24.5%,
    #1250C7 25% 37%,
    #039CEC 37.5% 49.5%,
    #DFC63F 50% 62%,
    #FED13F 62.5% 74.5%,
    #FC672F 75% 87%,
    #FD3A48 87.5% 100%
    );

    border-radius: 1px;

    box-shadow: 0 -2px 2px -2px rgba(255, 220, 211, 1) inset,
    0px 0 1.25px 1px #FEDDD6 inset,
    0 0 1px 1.5px rgba(82, 58, 56, 0.5) inset,
    0 0 2.5px 3px rgba(82, 58, 56, 0.2) inset,
    0 0 4px 5px rgba(82, 58, 56, 0.1) inset,
    -1px 0 1px #DDDAE3,
    0 0 5px 3px #F6DACF;
}

.speaker-bar {
    display: block;
    width: 365px;
    height: 219px;

    background-color: transparent;

    border-radius: 6px 6px 2px 2px;
    position: absolute;
    top: 1px;
    left: 2px;

    box-shadow: 0 -10px 2px -2px #F9D1C7 inset,
    0 0 1px #F9D1C7,
    -10px 0 3px -3px #FFE0D3 inset,
    5px 0 3px -3px #FFE0D3,
    7px 0 2px -5px rgba(166, 122, 111, 0.15),
    21px 0 3px -20px rgba(95, 64, 56, 0.15),
    -9px -5px 5px rgba(254, 210, 201, 0.5) inset;

}

.speakers {
    display: block;
    width: 175px;
    height: 180px;

    border-radius: 100px;

    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 15px;

    background-image: linear-gradient(90deg, transparent, #E8C2B6 20% 80%, transparent),
    linear-gradient(transparent 0 12.5%,
            #EECEC1 12.5% 25%,
            #67473C 37.5% 50%,
            #4A251F 50% 62.5%,
            transparent 82% 100%
    ), linear-gradient(
            #EEC4B4,
            #E8C6BC
    );
    background-size: 6px 100%, 9px 9px, 100% 100%;
    background-repeat: no-repeat, repeat, repeat;
    background-position: center center, top left, top left;

    box-shadow: 0 0 2px 0.5px #F9D1C7,
    -1.75px -1.75px 1.5px -1px #F9D1C7,
    -2px -2px 5px -2px #F9D1C7,
    -5px -25px 20px -5px rgba(83, 23, 0, 0.05) inset,
    -5px -15px 15px -5px rgba(83, 23, 0, 0.05) inset,
    -10px -35px 30px -10px rgba(83, 23, 0, 0.025) inset,
    5px 25px 20px -5px rgba(255, 243, 238, 0.1) inset,
    5px 15px 15px -5px rgba(255, 243, 238, 0.05) inset,
    10px 35px 30px -10px rgba(255, 243, 238, 0.025) inset,
    0 0 2px 0.5px #FEDCD3 inset,
    -2px -2px 5px -1px rgba(245, 203, 191, 0.5) inset,
    0 14px 1px 25.5px #F6D0C7 inset,
    0 14px 1px 26.5px #EFC1B2 inset,
    0 14px 1px 30px #F0C3B0 inset;
}

.key-container {
    display: grid;
    width: 435px;
    height: 100px;

    grid-template-columns: repeat(10, 1fr);
    column-gap: 3px;

    position: absolute;
    bottom: 35px;
    left: 177px;
    border-radius: 1px;
    background-color: #821510;

    box-shadow: -10px -10px 10px -5px rgba(58, 12, 2, 0.2),
    -2px 0 1px #BCA7A6 inset,
    1px 1px 1px 1px #E8D1C9,
    2px 2px 2px 1px #FFE3D5,
    3px 3px 4px 1px #FDE0D2,
    -1px -1px 1px 0 #8E675F;
}

.key-container > div {
    background-color: #fff;
    background-image: linear-gradient(90deg,
    #E7EDF9,
    #F0F4FD
    );
    border-radius: 5px;
    position: relative;
    top: -3px;
    left: -2px;
    height: 100%;
    height: calc(100% + 2px);


    box-shadow: -5px 0 4px -2px #EDECFA inset,
    -8px 0 6px -6px #EBEFF8 inset,
    3px 0 1px -1px #E9D4CF inset,
    6px 0 5px -5px #E1E8FA inset,
    0 0 0.25px 0.25px #E9D4CF,
    -0.75px -0.75px 1px -0.5px #E9D4CF,
    0 1px 1px #BEA19B,
    -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
    -7px -3px 7px rgba(201, 149, 135, 0.55),
    -10px -10px 15px rgba(201, 149, 135, 0.25);
}

.letter-container {
    display: grid;
    width: 450px;
    height: 66px;

    background-color: transparent;

    grid-template-columns: repeat(10, 1fr);
    column-gap: 1px;

    position: absolute;
    bottom: 145px;
    left: 170px;

    border-radius: 3px;

    box-shadow: -0.5px -0.5px 0.75px #B98A7A,
    -2px -2px 2px #E0B9A8,
    0.5px 0.5px 1px -0.25px #E1B8A6 inset,
    1px 1px 1px 0.5px #E9BCA9 inset,
    4px 4px 4px rgba(251, 228, 222, 0.25) inset;

    padding: 5px;
}

.letter-container > div {
    background-color: #19161D;
    background-image: linear-gradient(
            var(--letter-1) 20%,
            var(--letter-2) 30% 50%,
            #2C2934 50%,
            #1C1B29,
            #342127
    );

    border-radius: 1px;

    box-shadow: 0 0.5px 0.5px #A6857E inset,
    0 1px 2px rgba(67, 38, 40, 0.25) inset,
    0.5px 0 0.25px rgba(105, 90, 95, 0.5),
    0 -1px 0.5px #4D3326 inset,
    0 -15px 5px -5px #2A1A1A inset,
    0 1px 1px #D6B6A7,
    0 5px 3px #F0D0C1,
    0 12px 5px rgba(26, 26, 36, 0.1) inset;

    position: relative;
}

.letter-container > div:nth-child(2) {
    --letter-1: #D55622;
    --letter-2: #E05F0B;
}

.letter-container > div:nth-child(3) {
    --letter-1: #FE3339;
    --letter-2: #FE3336;
}

.letter-container > div:nth-child(4) {
    --letter-1: #F84524;
    --letter-2: #FA5229;
}

.letter-container > div:nth-child(5) {
    --letter-1: #F78336;
    --letter-2: #FA9634;
}

.letter-container > div:nth-child(6) {
    --letter-1: #FDC32A;
    --letter-2: #FCDA47;
}

.letter-container > div:nth-child(7) {
    --letter-1: #DEBF27;
    --letter-2: #D8D03D;
}

.letter-container > div:nth-child(8) {
    --letter-1: #03A7DA;
    --letter-2: #0BB3FA;
}

.letter-container > div:nth-child(9) {
    --letter-1: #2D50B4;
    --letter-2: #3362CA;
}

.letter-container > div:nth-child(10) {
    --letter-1: #734897;
    --letter-2: #6D56BE;
}

.letter-container > div > p {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 13px;
    color: #E6DFEF;
    font-family: sans-serif;
    text-shadow: 0.15px 0 0.5px #E6DFEF,
    -0.15px 0 0.5px #E6DFEF,
    1px 0 1px #33292A,
    -2px 0 2px #1A1420;
}

.button-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    column-gap: 1px;

    width: 450px;
    height: 65px;
    border-radius: 2px;

    position: absolute;
    left: 170px;
    bottom: 220px;

    background-color: transparent;

    box-shadow: 0 0 2px #DDABA0 inset,
    0 0 1px #DDABA0,
    0 -1px 2px #F1CBC2,
    0 -1.5px 2px #FDE4DD,
    0 1px 2px #E9CDBF,
    0 1.5px 2px #FADACF,
    0 1.5px 1.5px -0.5px #D69C8E inset,
    0 10px 10px -5px #E0B2A2 inset,
    0 -10px 5px -5px rgba(178, 83, 65, 1) inset;
}

.button-container .button {
    border-radius: 3px;

    background-image: linear-gradient(
            var(--button-1),
            var(--button-2),
            var(--button-3),
            var(--button-4)
    );

    box-shadow: 0 0 0.25px var(--button-3),
    -0.5px -0.75px 1px rgba(241, 249, 255, 0.15) inset,
    -0.75px -1.5px 1.5px rgba(44, 6, 13, 0.05) inset,
    0 -0.5px 0.75px 0.25px var(--button-1),
    0 0.5px 0.75px 0.25px var(--button-4),
    0 -0.75px 2px -0.75px var(--button-1),
    0 0.75px 2px -0.75px var(--button-4),
    -0.5px -2px 3px 0.75px rgba(44, 6, 13, 0.9),
    -15px -20px 20px 2px rgba(150, 90, 64, 0.35),
    -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
    -7px -3px 7px rgba(201, 149, 135, 0.55),
    -10px -10px 15px rgba(201, 149, 135, 0.25);

    position: relative;
    bottom: -3px;
    left: -1.5px;

    z-index: 11;

    height: 100%;
    height: calc(100% - 3px);
}

.button-container .button:nth-child(2) {
    --button-1: #884B36;
    --button-2: #8A4631;
    --button-3: #BD6E48;
    --button-4: #C2724D;

    --center-1: #AC5B3D;
    --center-2: #AE5E43;
    --center-3: #BD6E48;
    --center-4: #AA624A;
    --center-5: #AE5E3D;
    --center-6: #C77E5B;

    z-index: 10;
}

.button-container .button:nth-child(3) {
    --button-1: #C1353E;
    --button-2: #C22B3A;
    --button-3: #E42D49;
    --button-4: #E32C3E;

    --center-1: #D5132B;
    --center-2: #DD1F3B;
    --center-3: #E42849;
    --center-4: #E33E50;
    --center-5: #D51A39;
    --center-6: #F44661;

    z-index: 9;
}

.button-container .button:nth-child(4) {
    --button-1: #CC3929;
    --button-2: #D73825;
    --button-3: #FD5332;
    --button-4: #F2501F;

    --center-1: #F83D1E;
    --center-2: #FD4022;
    --center-3: #FC4D2E;
    --center-4: #FF5A3D;
    --center-5: #F0361F;
    --center-6: #FF6959;

    z-index: 8;
}

.button-container .button:nth-child(5) {
    --button-1: #F2AC26;
    --button-2: #F0AC19;
    --button-3: #F0B31C;
    --button-4: #ECAF19;

    --center-1: #E8A321;
    --center-2: #F0AD14;
    --center-3: #F3B61D;
    --center-4: #F1A943;
    --center-5: #EBAA09;
    --center-6: #FBC131;

    z-index: 7;
}

.button-container .button:nth-child(6) {
    --button-1: #FCB829;
    --button-2: #F7CF31;
    --button-3: #FFDB3C;
    --button-4: #FBDB4C;

    --center-1: #FFD531;
    --center-2: #F6DC41;
    --center-3: #FFDA3B;
    --center-4: #FFE470;
    --center-5: #FFD038;
    --center-6: #FFE160;

    z-index: 6;
}

.button-container .button:nth-child(7) {
    --button-1: #B5D496;
    --button-2: #A1D890;
    --button-3: #B5F4A7;
    --button-4: #B3EAA4;

    --center-1: #BDE899;
    --center-2: #B8ED9F;
    --center-3: #C6F6AA;
    --center-4: #B7E6B8;
    --center-5: #C6F6AC;
    --center-6: #D9FEBB;

    z-index: 5;
}

.button-container .button:nth-child(8) {
    --button-1: #3F88B5;
    --button-2: #3494C7;
    --button-3: #0FCEFB;
    --button-4: #15CAF7;

    --center-1: #26B7F0;
    --center-2: #05BEFF;
    --center-3: #04C6FB;
    --center-4: #23D7FF;
    --center-5: #08C2F5;
    --center-6: #22D9FF;

    z-index: 4;
}

.button-container .button:nth-child(9) {
    --button-1: #4058A2;
    --button-2: #3C5FB9;
    --button-3: #0D7BF4;
    --button-4: #2680F8;

    --center-1: #1864DC;
    --center-2: #0071F1;
    --center-3: #1A7DE5;
    --center-4: #346DD4;
    --center-5: #016EE3;
    --center-6: #5298F0;

    z-index: 3;
}

.button-container .button:nth-child(10) {
    --button-1: #3D306E;
    --button-2: #503C79;
    --button-3: #6A5ABD;
    --button-4: #6A5ABD;

    --center-1: #5141A3;
    --center-2: #5647AE;
    --center-3: #6052B3;
    --center-4: #6758AB;
    --center-5: #574DAE;
    --center-6: #7B6BCE;

    z-index: 2;
}

.button-container .button .center {
    display: block;
    width: 100%;
    height: 35px;

    width: calc(100% + 2px);

    border-radius: 2px;

    position: absolute;
    top: 15px;
    left: -1px;

    background-image: linear-gradient(
            var(--center-1),
            var(--center-2),
            var(--center-3)
    );

    box-shadow: 0 0 0.5px var(--center-3),
    -3px -20px 14px 3px rgba(20, 7, 14, 0.15),
    3px 20px 14px -3px rgba(241, 249, 255, 0.025),
    -3px -17px 14px -3px rgba(241, 249, 255, 0.025),
    0 -20px 10px -10px rgba(44, 6, 13, 0.05) inset,
    0 -0px 10px -10px rgba(44, 6, 13, 0.05) inset,
    0 30px 20px -10px rgba(241, 249, 255, 0.05) inset,
    0 -0.25px 0.75px 0.25px var(--center-1),
    0 0.5px 0.75px 0.25px var(--center-3),
    0 -0.75px 2px -0.75px var(--center-1),
    0 0.75px 2px -0.75px var(--center-3),
    0 1px 1.75px -0.75px var(--center-4) inset,
    0 -3px 4px -3px var(--center-5) inset,
    0 3px 3px -3px var(--center-6),
    0 -4px 7px -4px var(--center-1),
    0 4px 7px -4px var(--center-6);
}

.button-container .button .center:nth-child(1) {
    z-index: 22;
}

.button-container .button .center:nth-child(2) {
    z-index: 21;
}

.button-container .button .center:nth-child(3) {
    z-index: 20;
}

.button-container .button .center:nth-child(4) {
    z-index: 19;
}

.button-container .button .center:nth-child(5) {
    z-index: 18;
}

.button-container .button .center:nth-child(6) {
    z-index: 17;
}

.button-container .button .center:nth-child(7) {
    z-index: 16;
}

.button-container .button .center:nth-child(8) {
    z-index: 15;
}

.button-container .button .center:nth-child(9) {
    z-index: 14;
}

.button-container .button .center:nth-child(10) {
    z-index: 13;
}

.range-container {
    display: block;
    width: 490px;
    height: 92px;
    background-color: transparent;

    position: absolute;
    left: 150px;
    bottom: 290px;

    border-radius: 0 0 6px 6px;

    box-shadow: -1px 1px 3px -1px #945A42,
    0.5px -1px 1px #945A42 inset,
    -4px 2px 7px -2.25px #BD8974,
    1px -1px 1px -1px #BD8974 inset,
    1px -1px 1.5px -1px #CF9981 inset,
    -0.5px -0.5px 0.5px #FFEDE0 inset,
    -1.5px -1.5px 2px -1px #FFE8DB inset,
    -4px -1.5px 4px -2px #FEDACA inset,
    2px 1px 2px -1px #FEDACA,
    0 0 10px #FBDAD1,
    -10px 10px 25px rgba(60, 3, 0, 0.015);
}

.range-plate {
    display: block;
    width: 455px;
    height: 65px;

    position: absolute;
    left: 17px;
    top: 11px;

    border-radius: 1.5px;

    background-color: #BBC9E6;

    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
    linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
    radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
    radial-gradient(#7B84A3, #929CB7, #BBC9E6);
    background-size: 100% 4px,
    20% 100%,
    200px 200px,
    200% 300%;
    background-repeat: repeat,
    repeat,
    no-repeat,
    no-repeat;
    background-position: center center,
    center center,
    center center,
    100% 50%;

    box-shadow: 0 0 1px 0.25px #F6D0C7 inset,
    0 -0.5px 0.75px 0.5px #8D6E6C inset,
    0 0.75px 0.5px 0.25px #E7C9C7,
    0 0.5px 2.5px 1.5px #F6D5CE,
    0 0 10px rgba(100, 98, 120, 0.25) inset;

}

.ranges {
    list-style-type: none;
    font-family: sans-serif;
    font-weight: 600;
    color: #1F233E;

    font-size: 8px;
    position: absolute;
    top: 6px;

    text-shadow: 0 0 0.2px #1F233E,
    0 0 1px #BCBCD0;
}

.ranges li {
    margin-bottom: 6px;
}

.left .ranges {
    left: 27px;
}

.left .ranges li:first-child {
    margin-left: 10px;
}

.left .ranges li:last-child {
    margin-left: 6px;
}

.left .slider-wrapper {
    width: 50px;
    height: 50px;

    background-color: #606B89;

    position: absolute;
    left: 50.25px;
    top: 9.25px;

    border-radius: 50px;

    background-image: linear-gradient(20deg, #484653, #606B89, #8792AE);

    box-shadow: -0.5px 0.5px 0.5px #606B89,
    0 0 1px 0.15px #606B89 inset,
    0 0 1px 0.25px #606B89,
    0 0 4px 1px #7886A1,
    0 15px 10px -2px rgba(51, 46, 52, 0.25),
    -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
    -12px -25px 17px 4px rgba(62, 21, 8, 0.22),
    -30px -45px 25px 4px rgba(62, 21, 8, 0.125),
    -45px -50px 35px 8px rgba(62, 21, 8, 0.125),
    -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
    0 0 20px 3px rgba(202, 206, 217, 0.75);
}

.left .slider {
    display: block;
    width: 50px;
    height: 50px;

    background-color: black;

    border-radius: 100px;

    position: absolute;
    left: -3.25px;
    top: -3.25px;

    background-image: linear-gradient(90deg, rgba(17, 18, 23, 0.5), transparent),
    radial-gradient(#1A2332, #1C1F2D 66%, transparent 69%),
    linear-gradient(90deg, rgba(17, 18, 23, 0.75), transparent),
    linear-gradient(rgba(24, 31, 49, 0.9), transparent),
    linear-gradient(45deg, transparent 30%, #7C899C, transparent 70%),
    linear-gradient(-45deg, transparent 30%, #7C899C, transparent 70%),
    radial-gradient(#1A2332, #1C1F2D, #10172A);

    box-shadow: 0 0 1px 0.75px #10172A,
    0 0 2px 0.75px rgba(67, 68, 88, 0.5);
}

.left p {
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: 600;
    font-size: 6.5px;
    color: #1F233E;
    letter-spacing: 0.75px;

    position: absolute;
    left: 107px;
    top: 29px;

    text-shadow: 0 0 0.2px #1F233E,
    0 0 1px #959AB2;
}

.center p, .center ul li {
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: 600;
    font-size: 6px;
    color: #1F233E;
    letter-spacing: 0.5px;

    text-shadow: 0 0 0.2px #1F233E,
    0 0 1px #959AB2;

    list-style-type: none;
}

.center p {
    text-align: center;

    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.center ul {
    position: absolute;
    bottom: 6px;
    left: 200px;
}

.center ul li {
    display: inline-block;
    margin-right: 6px;
}

.switch-wrapper {
    display: block;
    width: 35px;
    height: 17px;

    background-color: #0B090E;

    border-radius: 35px;

    position: absolute;
    left: 210px;
    top: 22px;

    background-image: linear-gradient(rgba(30, 31, 57, 0), rgba(30, 31, 57, 0.5), rgba(30, 31, 57, 0)),
    linear-gradient(#09080E, #0A090F);

    box-shadow: 0 0.5px 0.5px #353245 inset,
    0 -0.25px 0.5px #4F515E inset,
    0 -0.75px 0.75px #30354B inset,
    0 1px 1px -0.25px #55515F inset,
    0 1.25px 1px -0.5px #28252E inset,
    0 0 5px 1px #1E1F39 inset,
    0 0 0.5px 0.25px #353245,
    0 0 1px #B4B9CC,
    0 0.15px 2.5px -0.5px #9FA5BE,
    0 10px 10px -3px rgba(208, 209, 227, 0.5),
    0 20px 20px rgba(208, 209, 227, 0.35);
}

.switch-button {
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 15px;

    background-color: #140E1C;

    position: absolute;
    top: 0.35px;
    left: 0.45px;

    background-image: radial-gradient(rgba(208, 209, 227, 0.5), rgba(208, 209, 227, 0) 40%),
    linear-gradient(90deg, #140E1C, #2D2C3C);

    background-repeat: no-repeat,
    no-repeat;

    background-size: 120% 140%,
    100% 100%;

    background-position: 3px 3px,
    top left;

    box-shadow: 0 0 0.5px 0.75px #9A9CA9 inset,
    0 0 0.15px #9A9CA9,
    0 0 0.5px 0.25px #1B1B25,
    0 0 1px #1E1E26,
    0 5px 10px -2px rgba(51, 46, 52, 0.25),
    -5px -10px 10px 2px rgba(62, 21, 8, 0.15),
    -10px -17px 20px 5px rgba(62, 21, 8, 0.1),
    -20px -23px 25px 6px rgba(62, 21, 8, 0.15),
    -30px -35px 30px 10px rgba(62, 21, 8, 0.1);
}


.right .slider-wrapper {
    width: 50px;
    height: 50px;

    background-color: #606B89;

    position: absolute;
    right: 50.25px;
    top: 9.25px;

    border-radius: 50px;

    background-image: linear-gradient(20deg, #3C3642, #4B485B, #535166);

    box-shadow: -0.5px 0.5px 0.5px #606B89,
    0 0 1px 0.15px #606B89 inset,
    0 0 1px 0.25px #606B89,
    0 0 4px 1px #7886A1,
    0 15px 10px -2px rgba(51, 46, 52, 0.25),
    -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
    -12px -25px 17px 4px rgba(62, 21, 8, 0.15),
    -30px -45px 25px 4px rgba(62, 21, 8, 0.075),
    -45px -50px 35px 8px rgba(62, 21, 8, 0.075),
    -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
    0 0 20px 3px rgba(202, 206, 217, 0.75);
}

.right .slider {
    display: block;
    width: 50px;
    height: 50px;

    background-color: black;

    border-radius: 100px;

    position: absolute;
    left: 3.5px;
    top: -3.5px;

    background-image: radial-gradient(#1F273A, rgba(22, 26, 38, 1) 66%, transparent 69%),
    linear-gradient(90deg, rgba(22, 26, 38, 0.75), transparent),
    linear-gradient(rgba(24, 31, 49, 0.9), transparent),
    linear-gradient(45deg, transparent 30%, #7C899C, transparent 70%),
    linear-gradient(-45deg, transparent 30%, #7C899C, transparent 70%),
    radial-gradient(#1F273A, #212C42, #171D2D);

    box-shadow: 0 0 1px 0.75px rgba(22, 26, 38, 1),
    0 0 2px 0.75px rgba(67, 68, 88, 0.5);
}

.right ul, .right p {
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: 600;
    color: #1F233E;

    font-size: 6.5px;

    letter-spacing: 0.5px;

    text-shadow: 0 0 0.2px #1F233E,
    0 0 1px #BCBCD0;
}

.right ul {
    list-style-type: none;

    position: absolute;
    left: 415px;
    top: 9px;
}

.right ul li {
    margin-bottom: 9px;
}

.right ul li:first-child {
    margin-left: -7px;
}

.right ul li:last-child {
    margin-left: -5px;
}

.right p {
    position: absolute;
    top: 30px;
    left: 325px;
}

.speed-container {
    display: block;
    width: 40px;
    height: 150px;

    background-color: #656581;

    border-radius: 1px;

    position: absolute;
    left: 60px;
    top: 360px;

    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
    linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
    radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
    radial-gradient(#7B84A3, #929CB7, #BBC9E6);
    background-size: 100% 4px,
    20% 100%,
    200px 200px,
    200% 300%;
    background-repeat: repeat,
    repeat,
    no-repeat,
    no-repeat;
    background-position: center center,
    center center,
    center center,
    100% 50%;


    box-shadow: 0 0 1px #E1C3B8 inset,
    0 0 1px 0.5px #DFC6C1,
    0 0 2px 1px #E2C1BA,
    0.5px 0 0.5px 0.5px #929CB7 inset,
    -0.5px 0 0.5px 0.5px #929CB7 inset;
}

.speed-container p {
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: 600;
    color: #1F233E;

    font-size: 7px;

    letter-spacing: 0.5px;

    text-shadow: 0 0 0.2px #1F233E,
    0 0 1px #929CB7;
}

.speed-container p:first-child {
    position: absolute;
    top: 5px;
    left: 10px;
}

.speed-container p:last-child {
    position: absolute;
    bottom: 3px;
    left: 9px;
}

.speed-slider {
    display: block;
    width: 5px;
    height: 100px;
    border-radius: 6px;
    background-color: #120D14;

    position: absolute;
    top: 25px;
    left: 17px;

    background-image: linear-gradient(#120D14, #1B0B15, #1D1419);

    box-shadow: -0.75px 0 1px #9391A5 inset,
    0.75px 0 1px #A79DA8 inset,
    -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
    0 0 3px #9FA7AA;
}

.speed-button-container {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 30px;

    background-color: #fff;

    position: absolute;
    top: 35px;
    left: 8px;

    background-image: linear-gradient(70deg, #63687E 80%, #9A9BBA);

    box-shadow: 0 0 1px #63687E,
    0 0 0.5px #63687E,
    0 0 4px 0.5px #63687E;
}

.speed-button {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 30px;

    background-color: #000;

    position: absolute;
    left: -3.5px;
    top: -1px;

    background-image: radial-gradient(#353B51, #1E2736, #262739);

    box-shadow: 0 0 0.5px 0.25px #262739,
    0 0 4px rgba(19, 18, 32, 0.5),
    8px 10px 10px rgba(51, 46, 52, 0.25),
    -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
    -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
    -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
    -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
    -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
    0 0 20px 3px rgba(202, 206, 217, 0.75);
}


.vol-container {
    display: block;
    width: 40px;
    height: 150px;

    background-color: #656581;

    border-radius: 1px;

    position: absolute;
    right: 60px;
    top: 360px;

    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
    linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
    radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
    radial-gradient(#7B84A3, #929CB7, #BBC9E6);
    background-size: 100% 4px,
    20% 100%,
    200px 200px,
    200% 300%;
    background-repeat: repeat,
    repeat,
    no-repeat,
    no-repeat;
    background-position: center center,
    center center,
    center center,
    100% 50%;


    box-shadow: 0 0 1px #E1C3B8 inset,
    0 0 1px 0.5px #DFC6C1,
    0 0 2px 1px #E2C1BA,
    0.5px 0 0.5px 0.5px #929CB7 inset,
    -0.5px 0 0.5px 0.5px #929CB7 inset;
}

.vol-container p {
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: 600;
    color: #1F233E;

    font-size: 7px;

    letter-spacing: 0.5px;

    text-shadow: 0 0 0.2px #1F233E,
    0 0 1px #929CB7;
}

.vol-container p:first-child {
    position: absolute;
    top: 5px;
    left: 10px;
}

.vol-container p:last-child {
    position: absolute;
    bottom: 3px;
    left: 10px;
}

.vol-slider {
    display: block;
    width: 5px;
    height: 100px;
    border-radius: 6px;
    background-color: #120D14;

    position: absolute;
    top: 25px;
    left: 17px;

    background-image: linear-gradient(#120D14, #1B0B15, #1D1419);

    box-shadow: -0.75px 0 1px #9391A5 inset,
    0.75px 0 1px #A79DA8 inset,
    -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
    0 0 3px #9FA7AA;
}

.vol-button-container {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 30px;

    background-color: #fff;

    position: absolute;
    top: 60px;
    left: 12px;

    background-image: linear-gradient(70deg, #63687E 80%, #9A9BBA);

    box-shadow: 0 0 1px #63687E,
    0 0 0.5px #63687E,
    0 0 4px 0.5px #63687E;
}

.vol-button {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 30px;

    background-color: #000;

    position: absolute;
    left: 3px;
    top: 1px;

    background-image: radial-gradient(#353B51, #1E2736, #262739);

    box-shadow: 0 0 0.5px 0.25px #262739,
    0 0 4px rgba(19, 18, 32, 0.5),
    8px 10px 10px rgba(51, 46, 52, 0.25),
    -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
    -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
    -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
    -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
    -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
    0 0 20px 3px rgba(202, 206, 217, 0.75);
}


@media screen and (max-height: 750px) {
    .muson {
        transform: scale(0.89);
    }
}

@media screen and (max-width: 670px) {
    .muson {
        transform: scale(0.9);
    }
}









:root{
    --overlay-color-1: #5b6ac6;
    --overlay-color-2: #5b6ac6;
    --anim-duration: 4s;
}

#bg_gradient {
    opacity: 0.8;
    background: none;
    position: fixed;
    left: 0;bottom: 0;right: 0;top: 0;
    z-index: 0;
}

#bg_gradient:after,
#bg_gradient:before {
    content: '';
    display: block;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

#bg_gradient:before {
    background: linear-gradient(135deg, var(--overlay-color-2) 0%, var(--overlay-color-1) 100%);
    animation: OpacityAnim var(--anim-duration) ease-in-out 0s infinite alternate;
}

#bg_gradient:after {
    background: linear-gradient(135deg, var(--overlay-color-1) 0%, var(--overlay-color-2) 100%);
    animation: OpacityAnim var(--anim-duration) ease-in-out calc(-1 * var(--anim-duration)) infinite alternate;
}

@keyframes OpacityAnim {
    0%{opacity: 1.0}
    100%{opacity: 0.0}
}