@media screen and (max-width: 767px) {
    html { overflow: hidden; overflow-y: auto; position: relative; min-width: 320px; }
    body { font-size: 14px; line-height: 20px; font-weight: 400; overflow: hidden; overflow-y: auto; position: relative; min-width: 320px; }

    #page-wrap { padding: 10px 10px 0; }
    .content-wrap { max-width: 100%; padding: 0 20px; margin: 0 auto; }
    #main-content { min-height: calc(100vh - 280px); background-color: transparent; }
    .error-layout #site-head { padding-bottom: 0; }

    h1 { font: 400 30px/1 SST, Arial, Helvetica; margin: 0 0 1em; }

    .mg-cols { display: block; width: auto; }
    .mg-cols > .mg-col { display: block; }

    #site-head { margin: -10px -10px 0; padding: 0 0 110px; }
    #site-head.unsubscribe { padding: 0; }
    #site-head .content-wrap { padding: 0; }
    #site-head header { height: 90px; margin: 0; }
    #site-head header .logo { font-size: 20px; margin-left: 5px; padding: 0; }
    #site-head header .logo svg { max-width: 190px; }
    #site-head header .logo img { margin-top: 4px; max-height: 12px; max-width: 42px; }

    #site-foot { margin: 0 -10px; }
    #site-foot .content-wrap { padding: 0; }
    #site-foot footer { margin: 0; height: 200px; padding: 25px 20px; }

    .auth-block { background-color: #fff; height: auto; margin: -110px -10px 0; padding: 40px 20px; }
    .auth-block > .content-wrap { padding: 0; }

    .auth-block .auth-tabs-wrap { height: auto; margin: 0 -10px; }
    .auth-block .auth-tabs-wrap:after { clear: both; content: ""; display: table; }
    .auth-block .auth-tabs { width: 50%; float: left; }
    .auth-block .auth-tabs-wrap .rotate-wrap { height: 100%; width: 200%; -moz-transform: translateZ(calc(-50vw + 20px)); -ms-transform: translateZ(calc(-50vw + 20px)); -o-transform: translateZ(calc(-50vw + 20px)); -webkit-transform: translateZ(calc(-50vw + 20px)); transform: translateZ(calc(-50vw + 20px)); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
    .auth-block .auth-tabs-wrap .login-tabs { position: relative; -moz-transform: rotateY(0) translateZ(calc(50vw - 20px)); -ms-transform: rotateY(0) translateZ(calc(50vw - 20px)); -o-transform: rotateY(0) translateZ(calc(50vw - 20px)); -webkit-transform: rotateY(0) translateZ(calc(50vw - 20px)); transform: rotateY(0) translateZ(calc(50vw - 20px)); -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
    .auth-block .auth-tabs-wrap .register-tabs { -moz-transform: rotateY(90deg) translateZ(calc(50vw - 20px)); -ms-transform: rotateY(90deg) translateZ(calc(50vw - 20px)); -o-transform: rotateY(90deg) translateZ(calc(50vw - 20px)); -webkit-transform: rotateY(90deg) translateZ(calc(50vw - 20px)); transform: rotateY(90deg) translateZ(calc(50vw - 20px)); -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
    [active-auth="register"] .auth-tabs-wrap .login-tabs { -moz-transform: rotateY(-90deg) translateZ(calc(50vw - 20px)); -ms-transform: rotateY(-90deg) translateZ(calc(50vw - 20px)); -o-transform: rotateY(-90deg) translateZ(calc(50vw - 20px)); -webkit-transform: rotateY(-90deg) translateZ(calc(50vw - 20px)); transform: rotateY(-90deg) translateZ(calc(50vw - 20px)); }
    [active-auth="register"] .auth-tabs-wrap .register-tabs { -moz-transform: rotateY(0) translateZ(calc(50vw - 20px)); -ms-transform: rotateY(0) translateZ(calc(50vw - 20px)); -o-transform: rotateY(0) translateZ(calc(50vw - 20px)); -webkit-transform: rotateY(0) translateZ(calc(50vw - 20px)); transform: rotateY(0) translateZ(calc(50vw - 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 { padding: 30px 30px 20px; max-height: 460px; }
    [active-tabid="login-em"][active-auth="login"] .auth-block #login-em { padding: 30px; }

    .auth-tab-forms { margin: 0 -10px; }
    .auth-tab-forms .form-content { left: 0; margin: 0 auto; }
    .auth-tab-forms p { clear: both; }
    .auth-tab-forms .avatar { height: 70px; position: static; width: auto; margin: 0 0 1em; }
    .auth-tab-forms .avatar img { height: 70px; width: auto; border-radius: 35px; display: block; margin: 0 auto; }
    .auth-tab-forms .mg-col { padding: 0; position: relative; }
    .auth-tab-forms .mg-col + .mg-col { padding: 0; width: auto; margin-top: 20px; }
    .auth-tab-forms .state2 .mg-col .avatar { float: left; width: 50%; margin-bottom: 0; }
    .auth-tab-forms .state2 .mg-col + .mg-col .avatar { float: right; margin-bottom: 1em; }

    .auth-block #login-fb,
    .auth-block #login-gp,
    .auth-block #login-em { min-width: 0; width: 100%; max-width: 480px !important; }

    .auth-tabs header form { display: block; }
    .auth-tabs header form > * { height: 75px; padding: 25px; width: auto; display: block; }
    .auth-tabs form input[type=submit] { position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; display: block; opacity: 0; }

    .auth-tabs header form > * > * { height: 100%; text-align: center; }
    .auth-tabs span > span,
    .auth-tabs span > strong { display: inline-block; vertical-align: middle; }
    .auth-tabs .fb > span:before,
    .auth-tabs .gp > span:before,
    .auth-tabs .em > span:before { background: rgba(0, 0, 0, 0) none no-repeat scroll 50% 50%; background-size: 100% auto; content: ""; display: inline-block; height: 21px; margin: 0 10px 0 0; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; vertical-align: middle; width: 32px; }
    .auth-tabs .fb > span:before { background-image: url("../images/ico-fb.png"); width: 11px; }
    .auth-tabs .gp > span:before { background-image: url("../images/ico-gp.png"); width: 32px; }
    .auth-tabs .em > span:before { background-image: url("../images/ico-email.png"); width: 28px; }
    .auth-block footer a { height: 80px; }
    .auth-block footer strong { display: block; }

    .what-is-block { padding: 50px 0; }
    .what-is-block ol { display: block; max-width: 480px; margin: 0 auto; }
    .what-is-block ol > li:before { padding: 0; text-align: left; width: 1.2em; }
    .what-is-block ol li { display: block; padding: 0 2.15em; position: relative; vertical-align: top; }
    .what-is-block ol h3 { margin: 1em 0; }


    .register-block { margin: -110px -10px 0; height: auto; }
    .register-block > .content-wrap { padding: 0; }

    .register-steps header { display: block; height: 160px; width: 100%; font-size: 12px; background-color: #0775d4; }
    .register-steps header > * { display: table; float: left; height: 50%; width: 33.33333%; width: calc(100% / 3); padding: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-width: 0 0 0 1px; }
    .register-steps header > * > span { display: table-cell; height: 100%; vertical-align: middle; text-align: center; }
    .register-steps header > * > span > span { display: block; }
    .register-steps .lo { float: none; width: 100%; font-size: 16px; border-width: 0 0 1px; }
    .register-steps .acc { background-color: #0775d4; color: #fff; border-left-width: 0; }
    .register-steps .loc { background-color: #0663b3; color: #fff; }
    .register-steps .cem { background-color: #055192; color: #fff; }
    .register-steps footer { display: none; }

    .register-steps header > * > span:before { display: block; margin: 0 auto; visibility: hidden; }
    [active-reg-step="1"] .register-steps header > * > span:before { display: none; }
    [active-reg-step="2"] .register-steps .acc > span:before,
    [active-reg-step="3"] .register-steps .acc > span:before,
    [active-reg-step="3"] .register-steps .loc > span:before,
    [active-reg-step="3"] .register-steps .cem > span:before { visibility: visible; }

    .step-content { margin: 0 auto; max-width: 480px; padding: 25px 0; }

    .default-form .choose-channel-row label { float: none; margin: 0 auto 5px; }

    .ticked-content { margin: 0 0 0 60px; }
    .step-3 .step-content,
    .pwd-steps-block .step-1 .step-content { padding-bottom: 70px; padding-top: 50px; }

    .pwd-steps-block header > * { width: 50%; }
}

@media screen and (min-width: 436px) and (max-width: 767px) {
    .default-form .choose-channel-row label { float: left; margin: 0 0 10px 5px; }
    .default-form .choose-channel-row label:nth-of-type(2n-1) { clear: left; margin-left: 0; }
    .default-form .choose-channel-row label:nth-of-type(2n-1):nth-last-of-type(2),
    .default-form .choose-channel-row label:nth-of-type(2n-1):nth-last-of-type(1),
    .default-form .choose-channel-row label:nth-of-type(2n):nth-last-of-type(1),
    .default-form .choose-channel-row label:nth-of-type(2n):nth-last-of-type(1) { margin-bottom: 0; }
}