﻿#site-head { background-color: #1f2024; color: #fff; }
#site-head header { height: 150px; padding: 0 0; }
#site-head header > .content-wrap { height: 100%; }
#site-head header .logo { font-size: 26px; height: 100%; display: block; padding: 0 0 30px; overflow: hidden; text-decoration: none; }
#site-head header .logo svg { display: inline-block; width: 11.6923em; height: 100%; fill: #fff; vertical-align: middle; }
#site-head header .logo img { display: inline-block; vertical-align: middle; margin-left: 8px; margin-top: 8px; max-width: 70px; max-height: 20px; object-fit: contain; }

#site-foot footer { background-color: #1f2024; color: #fff; font: 300 13px/1 SST; min-height: 170px; padding: 40px 20px; margin: -50px auto 0; position: relative; }

#site-foot a { display: block; text-decoration: none; }
#site-foot a:hover { text-decoration: underline; }
#site-foot .title { font-size: 18px; font-weight: 700; }
#site-foot li { margin: 10px 0; line-height: 20px; }

#main-content { background-color: #f1f5f9; min-height: calc(100vh - 390px); }

.auth-block { line-height: 20px; font-size: 14px; font-weight: 300; position: relative; z-index: 1; padding: 90px 0 50px; }
.auth-block h1 { margin: 0 0 .5em; }
.auth-block h3 { font-weight: 400; }


.auth-block .auth-tabs { color: #fff; font-size: 16px; position: absolute; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.auth-tabs footer { display: table; width: 100%; table-layout: fixed; }
.auth-tabs form > * { padding: 0 0 0 25px; text-decoration: none; color: inherit; position: relative; }
.auth-tabs form input[type=submit] { position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: 80px; width: 100%; display: block; opacity: 0; }
.auth-tabs .fb,
.auth-block .fb,
.auth-block .fb .avatar { background-color: #38559e; color: #fff; }
.auth-tabs .gp,
.auth-block .gp,
.auth-block .gp .avatar { background-color: #d32f2f; color: #fff; }
.auth-block .em { background-color: #fff; }
.auth-tabs .em { background-color: #044175; color: #fff; }
.auth-tabs form > * > span { display: block; overflow: hidden; }
.auth-tabs span > span { display: inline-block; }
.auth-block footer { background-color: #0775d4; color: #fff; }
.auth-block footer a { display: table-cell; text-align: center; height: 60px; vertical-align: middle; }
.register-tabs .lo { background-color: #0775d4; color: #fff; }

.auth-block .gp .field-validation-error { color: #fff !important; font-weight: bold; }

.forgot-password,
.forgot-active .login-form { display: none; }
.forgot-active .forgot-password { display: block; }

.login-form.default-form textarea, .login-form.default-form input, .login-form.default-form .custom-sel .val,
.forgot-password.default-form textarea, .forgot-password.default-form input, .forgot-password.default-form .custom-sel .val,
.reg-form.default-form textarea, .reg-form.default-form input, .reg-form.default-form .custom-sel .val { font: 300 16px/38px SST }

.reg-form label { font-size: 14px; }
.reg-form .inp-wrap .isCheckbox span { font-size: 13px; }


.auth-tab-forms { position: relative; }
/*.auth-tab-forms .form-content { position: absolute; left: 25%; right: 0; top: 0; overflow: hidden; padding: 0; -moz-transition: opacity 0.3s, max-width 0s 0.3s, max-height 0s 0.3s, padding 0s 0.3s; -o-transition: opacity 0.3s, max-width 0s 0.3s, max-height 0s 0.3s, padding 0s 0.3s; -webkit-transition: opacity 0.3s, max-width 0s 0.3s, max-height 0s 0.3s, padding 0s 0.3s; transition: opacity 0.3s, max-width 0s 0.3s, max-height 0s 0.3s, padding 0s 0.3s; max-width: 0; max-height: 0; opacity: 0; }*/
.auth-tab-forms .form-content { margin: 0 0 0 auto; position: relative; left: 33.3333%; top: 0; overflow: hidden; padding: 0; -moz-transition: opacity 0.3s, max-width 0s 0.3s, max-height 0.3s, padding 0s 0.3s; -o-transition: opacity 0.3s, max-width 0s 0.3s, max-height 0.3s, padding 0s 0.3s; -webkit-transition: opacity 0.3s, max-width 0s 0.3s, max-height 0.3s, padding 0s 0.3s; transition: opacity 0.3s, max-width 0s 0.3s, max-height 0.3s, padding 0s 0.3s; max-width: 0; max-height: 0; opacity: 0; }

.auth-tab-forms .lnk-no-link-acc { display: block; text-align: center; font: 300 14px/15px SST; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 15px 0 20px; margin: 20px 0 0; }
.auth-tab-forms .default-form .inp-wrap,
.auth-tab-forms .default-form .err-block,
.auth-tab-forms .default-form .field-validation-error,
.auth-tab-forms .default-form .btn-row { width: auto; float: none; }
.auth-tab-forms .default-form fieldset { margin: 0 0 2em; }
.auth-tab-forms .fb .inp-wrap,
.auth-tab-forms .gp .inp-wrap { color: #fff; }
.auth-tab-forms .fb input[type="text"],
.auth-tab-forms .fb input[type="password"],
.auth-tab-forms .fb input[type="email"],
.auth-tab-forms .gp input[type="text"],
.auth-tab-forms .gp input[type="password"],
.auth-tab-forms .gp input[type="email"] { border-color: #fff; }
/*.auth-tab-forms .default-form .err-block,
.auth-tab-forms .default-form .field-validation-error,
.auth-tab-forms .default-form .err-msg { color: #fff; }*/
/*.auth-tab-forms .default-form .err-block:before,
.auth-tab-forms .default-form .field-validation-error:before { content: "!Error: "; display: inline-block; }*/
.auth-tab-forms ::-webkit-input-placeholder { opacity: inherit; color: inherit; }
.auth-tab-forms :-moz-placeholder { opacity: inherit; color: inherit; }
.auth-tab-forms ::-moz-placeholder { opacity: inherit; color: inherit; }
.auth-tab-forms :-ms-input-placeholder { opacity: inherit; color: inherit; }
.auth-tab-forms .lnk-forgot-pw { font-size: 14px; text-align: right; }
.auth-tab-forms .btn-link-my-acc { font: 300 16px/20px SST; height: 60px; padding: 20px 0; background-color: #0775d4; width: 100%; display: block; color: #fff; }
.auth-tab-forms p { margin: 0 0 1em; }

.auth-tab-forms .fb,
.auth-tab-forms .gp { padding-bottom: 0 !important; }

.auth-tab-forms .fb { }

.auth-tab-forms .gp { }
.auth-tab-forms .gp .btn-link-my-acc { background-color: #fff; color: #0887f5; }
.auth-tab-forms .gp .btn-link-my-acc:hover,
.auth-tab-forms .gp .btn-link-my-acc:focus { background-color: #0887f5; color: #fff; }

.auth-tab-forms .em { font-size: 12px; left: auto !important; max-width: 382px !important; min-width: 372px; padding-top: 20px; }

.auth-tab-forms .forgot-password { padding-bottom: 20px; }

[active-tabid="login-fb"][active-auth="login"] .auth-block #login-fb,
[active-tabid="login-gp"][active-auth="login"] .auth-block #login-gp,
[active-tabid="login-em"][active-auth="login"] .auth-block #login-em { -moz-transition: opacity 0.3s, max-width 0s, max-height 0.3s, padding 0s; -o-transition: opacity 0.3s, max-width 0s, max-height 0.3s, padding 0s; -webkit-transition: opacity 0.3s, max-width 0s, max-height 0.3s, padding 0s; transition: opacity 0.3s, max-width 0s, max-height 0.3s, padding 0s; max-width: 502px; opacity: 1; }
[active-tabid="login-fb"][active-auth="login"] .auth-block #login-fb,
[active-tabid="login-gp"][active-auth="login"] .auth-block #login-gp { padding: 40px 20px 20px; max-height: 420px; }
[active-tabid="login-em"][active-auth="login"] .auth-block #login-em { padding: 20px; max-height: 420px; }

#main-content { -moz-transition: background 0.5s; -o-transition: background 0.5s; -webkit-transition: background 0.5s; transition: background 0.5s; }
.auth-block footer,
.auth-tabs form > *,
.form-content { -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }
.grayscaled[active-tabid="login-fb"] .login-tabs a:not(.fb),
.grayscaled[active-tabid="login-fb"] .form-content:not(.fb),
.grayscaled[active-tabid="login-gp"] .login-tabs a:not(.gp),
.grayscaled[active-tabid="login-gp"] .form-content:not(.gp),
.grayscaled[active-tabid="login-em"] .login-tabs .ext-login,
.grayscaled[active-tabid="login-em"] .form-content:not(.em),
.grayscaled #main-content > :not(.auth-block),
.grayscaled .auth-block footer { filter: grayscale(1); -webkit-filter: grayscale(1); }
.grayscaled #main-content { background-color: #afafaf; }

.what-is-block { padding: 75px 0; }
.what-is-block ol { counter-reset: ol-counter; list-style: none outside none; display: table; table-layout: fixed; width: 100%; border-collapse: collapse; }
.what-is-block ol li { padding: 0 1.5em 0 4em; position: relative; display: table-cell; vertical-align: top; }
.what-is-block ol h3,
.what-is-block ol > li:before { font-size: 25px; line-height: 1; font-weight: 400; }
.what-is-block ol > li:before { counter-increment: ol-counter; content: counter(ol-counter, decimal); font-weight: 700; position: absolute; left: 0; top: 0; width: 4em; margin: 0; text-align: right; padding: 0 2.5em 0 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.auth-block .auth-tabs-wrap { position: relative; -moz-perspective: 2000px; -ms-perspective: 2000px; -webkit-perspective: 2000px; perspective: 2000px; height: 80px; /*-moz-perspective-origin: 50% 140px; -ms-perspective-origin: 50% 140px; -webkit-perspective-origin: 50% 140px; perspective-origin: 50% 140px;*/ }
.auth-block .auth-tabs-wrap .rotate-wrap { height: 100%; -moz-transform: translateZ(-70px); -ms-transform: translateZ(-70px); -o-transform: translateZ(-70px); -webkit-transform: translateZ(-70px); transform: translateZ(-70px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.auth-block .auth-tabs-wrap .login-tabs { -moz-transform: rotateX(0) translateZ(70px); -ms-transform: rotateX(0) translateZ(70px); -o-transform: rotateX(0) translateZ(70px); -webkit-transform: rotateX(0) translateZ(70px); transform: rotateX(0) translateZ(70px); -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }
.auth-block .auth-tabs-wrap .register-tabs { -moz-transform: rotateX(-90deg) translateZ(70px); -ms-transform: rotateX(-90deg) translateZ(70px); -o-transform: rotateX(-90deg) translateZ(70px); -webkit-transform: rotateX(-90deg) translateZ(70px); transform: rotateX(-90deg) translateZ(70px); -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }
.auth-block .auth-tabs-wrap .register-steps { -moz-transform: rotateX(-180deg) translateZ(70px); -ms-transform: rotateX(-180deg) translateZ(70px); -o-transform: rotateX(-180deg) translateZ(70px); -webkit-transform: rotateX(-180deg) translateZ(70px); transform: rotateX(-180deg) translateZ(70px); -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .auth-block .auth-tabs-wrap { -moz-perspective: inherit; -ms-perspective: inherit; -webkit-perspective: inherit; perspective: inherit; }
}

[active-auth="login"] .login-tabs { z-index: 1; }
[active-auth="register"] .register-tabs { z-index: 1; }
[active-auth="register"] .auth-tabs-wrap .login-tabs { -moz-transform: rotateX(90deg) translateZ(70px); -ms-transform: rotateX(90deg) translateZ(70px); -o-transform: rotateX(90deg) translateZ(70px); -webkit-transform: rotateX(90deg) translateZ(70px); transform: rotateX(90deg) translateZ(70px); }
[active-auth="register"] .auth-tabs-wrap .register-tabs { -moz-transform: rotateX(0) translateZ(70px); -ms-transform: rotateX(0) translateZ(70px); -o-transform: rotateX(0) translateZ(70px); -webkit-transform: rotateX(0) translateZ(70px); transform: rotateX(0) translateZ(70px); }
[active-auth="register"] .auth-tabs-wrap .register-steps { -moz-transform: rotateX(-90deg) translateZ(70px); -ms-transform: rotateX(-90deg) translateZ(70px); -o-transform: rotateX(-90deg) translateZ(70px); -webkit-transform: rotateX(-90deg) translateZ(70px); transform: rotateX(-90deg) translateZ(70px); }

.auth-contents { overflow: hidden; }
.auth-contents-wrap { position: relative; }
.auth-contents-wrap > div { position: absolute; left: 0; top: 0; width: 100%; -moz-transition: all 0.5s 0s; -o-transition: all 0.5s 0s; -webkit-transition: all 0.5s 0s; transition: all 0.5s 0s; }

.auth-contents-wrap .auth-login-content { opacity: 0; }
.auth-contents-wrap .auth-register-content { opacity: 0; }
[active-auth="login"] .auth-login-content { opacity: 1; }
[active-auth="register"] .auth-register-content { opacity: 1; }

.register-block { line-height: 20px; font-size: 14px; font-weight: 700; position: relative; z-index: 1; text-align: center; }
.register-block .register-steps { color: #fff; font-size: 16px; position: relative; }
.register-steps header { -moz-transition: background-color 0.5s; -o-transition: background-color 0.5s; -webkit-transition: background-color 0.5s; transition: background-color 0.5s; color: #fff; background-color: #0775d4; }
.register-steps footer { background-color: #0775d4; color: #fff; font-weight: 300; text-align: center; height: 60px; padding: 20px; overflow: hidden; position: relative; max-height: 60px; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }
.register-steps .lo { font-weight: 300; }
.register-steps header > * > span:before { content: ""; background: url("../images/tick-fff.svg") no-repeat 50% 50% transparent; background-size: 100% 100%; width: 1.0625em; height: 0.875em; margin: 0 1em 0 -2.0625em; }
.register-steps .lo > span:before { display: none; }

.register-block.reg-fb .register-steps footer { background-color: #38559e; color: #fff; }
.register-block.reg-gp .register-steps footer { background-color: #d32f2f; color: #fff; }
/*.register-block.reg-em .register-steps footer { background-color: #044175; color: #fff; }*/

.register-steps-block { min-height: 0; overflow: hidden; position: relative; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; }
.step-contents { position: relative; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }
.step-contents > div { position: absolute; top: 0; width: 100%; -moz-transition: position 0s 0s, visibility 0s 0.5s; -o-transition: position 0s 0s, visibility 0s 0.5s; -webkit-transition: position 0s 0s, visibility 0s 0.5s; transition: position 0s 0s, visibility 0s 0.5s; visibility: hidden; }
.step-contents > div:nth-of-type(1) { left: 0; }
.step-contents > div:nth-of-type(2) { left: 100%; }
.step-contents > div:nth-of-type(3) { left: 200%; }
.step-content { background-color: #fff; }
.step-3 .step-content { background-color: transparent; padding-bottom: 120px; padding-top: 120px; }
.step-3 .ticked-content:before { background-image: url("../images/ico-conf-em-fff.svg"); }

.pwd-steps-block .step-1 .step-content { padding-bottom: 120px; padding-top: 120px; }

[active-reg-step="1"] .step-contents { -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); }
[active-reg-step="2"] .step-contents { -moz-transform: translate(-100%); -ms-transform: translate(-100%); -o-transform: translate(-100%); -webkit-transform: translate(-100%); transform: translate(-100%); }
[active-reg-step="3"] .step-contents { -moz-transform: translate(-200%); -ms-transform: translate(-200%); -o-transform: translate(-200%); -webkit-transform: translate(-200%); transform: translate(-200%); }
[active-reg-step="3"] #main-content { background-color: #0775d4; color: #fff; }
[active-reg-step="3"] .register-steps footer { max-height: 0; padding: 0; }

[active-reg-step="1"] .step-1 { visibility: visible; -moz-transition: position 0s 0s, visibility 0s 0s; -o-transition: position 0s 0s, visibility 0s 0s; -webkit-transition: position 0s 0s, visibility 0s 0s; transition: position 0s 0s, visibility 0s 0s; }
[active-reg-step="2"] .step-2 { visibility: visible; -moz-transition: position 0s 0s, visibility 0s 0s; -o-transition: position 0s 0s, visibility 0s 0s; -webkit-transition: position 0s 0s, visibility 0s 0s; transition: position 0s 0s, visibility 0s 0s; }
[active-reg-step="3"] .step-3 { visibility: visible; -moz-transition: position 0s 0s, visibility 0s 0s; -o-transition: position 0s 0s, visibility 0s 0s; -webkit-transition: position 0s 0s, visibility 0s 0s; transition: position 0s 0s, visibility 0s 0s; }

#loc-reg-block,
#sony-direct-select,
#sony-distibutors-select,
#store-locate-block { display: none; }

.location-name { font-style: normal; }
