body            { padding: 0; margin: 0; background: #f3f3f3; }
a 				{ color: blue; text-decoration: none; outline: none; }

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
  40% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}

.mobile-hambu   { display: none; }
.fulli          { width: 100%; position: relative; }

.main-tab          { position: fixed; transition: 0.5s all; z-index: 10; top: 0px; left: 0px; width: 100%; background: rgba(34,34,34,0.95); font-family: 'Open Sans', sans-serif; font-weight: 600; height: 56px; }
.main-tab-wrap     { position: relative; margin: 0 auto; width: 1800px; height: 56px; }
.main-logo         { position: absolute; top: 12px; height: 36px; width: auto; z-index: 9; left: 15px; }
.main-buttons-list { position: absolute; bottom: 0px; right: 10px; }
.main-button       { user-select: none; font-weight: 600; position: relative; cursor: pointer; line-height: 56px; transition: 0.2s all; color: white; float: left; margin: 0 10px; font-size: 20px; }
.main-nick         { font-weight: 500; text-transform: uppercase; font-size: 16px; transition: color 0.5s, max-width 2s; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-nick:hover   { max-width: 1000px; }
.main-spread       { height: 26px; background: #aaa; width: 1px; margin: 16px 10px 0 10px; float: left; }
.main-logout       { user-select: none; font-weight: 600; position: relative; cursor: pointer; line-height: 56px; transition: 0.2s all; color: #777; transition: 0.15s color; float: left; margin: 0 5px; font-size: 16px }
.main-logout:hover { color: #aaa }
.main-button:hover { color: #ADD1FC }
.mobile-button     { display: none; margin: 0; }
.mobile-button2    { display: none; margin: 0; }
.mobile-button3    { display: none; margin: 0; }
.mobile-full       { display: none; background: rgba(0,0,0,0.6); position: fixed; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; }

.back              { background: url(http://res.frozent.pl/m/login.jpeg); position: fixed; top: -5%; left: -5%; width: 110%; height: 110%; background-size: cover; background-position: bottom }

.big-left          { position: relative; vertical-align: top; display: inline-block; overflow: hidden; width: 300px; background: rgba(0,0,0,0.5); }
.title             { font-family: 'Open Sans', sans-serif; color: white; padding: 10px 20px 2px 20px; font-size: 24px; font-weight: bold; }
.log               { font-family: 'Open Sans', sans-serif;  background: transparent; border: 0; border-bottom: 2px #444 solid; padding: 5px; font-size: 18px; color: white; position: relative; display: block; margin-left: 20px; width: 250px; transition: 0.3s border, 5000s background, 5000s color }
.log-pass          { margin-bottom: 10px; }
.label-pass        { color: #aaa; font-size: 12px; margin-top: 5px; }
.err               { color: #FF5C5C; font-family: 'Open Sans', sans-serif; margin-top: 10px; font-size: 12px; margin-left: 20px; margin-right: 20px; }
.label             { color: #ccc; font-family: 'Open Sans', sans-serif; margin-top: 10px; font-size: 12px; margin-left: 20px }
.label-but         { font-family: 'Open Sans', sans-serif; margin-left: 20px; cursor: pointer; user-select: none; transition: 0.2s color }
.log2              { cursor: pointer; font-family: 'Open Sans', sans-serif;  background: transparent; border: 0; border: 1px solid #444; border-radius: 5px; padding: 5px; font-size: 18px; color: white; font-weight: bold; position: relative; display: block; margin: 13px 0px 15px 20px; width: 260px; background: transparent; transition: 0.3s all; }
.log-register      { margin-left: 0; margin-top: 20px; text-align: center; margin-bottom: 5px; }
.log-rules         { position: relative; }
.log-checki        { position: absolute; top: 0; left: 0; margin-left: 10px; }
.log-reg-span      { font-family: 'Open Sans', sans-serif; color: #ccc; margin-left: 30px; margin-right: 20px; font-size: 12px; }
.log-reg-span a    { color: #ADD1FC }

.log2:focus        { outline: 0 }
.log2:hover        { background: rgba(0,0,0,0.2); border-color: #ADD1FC}
.label-but:hover   { color: #ADD1FC }
.log:hover         { border-color: #5e7187 }
.log:focus         { outline: 0 }
.log:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus { border-bottom-color: goldenrod; }

.big-tab           { position: absolute; top: calc(50% - 156px); left: calc(50% - 384px); }
.big-right         { display: inline-block; background: #000000b3; width: 412px; padding: 10px 25px; margin-left: 5px; vertical-align: top; }
.big-right-title   { color: #bababa; font-size: 24px; margin-bottom: 5px; font-weight: 700; font-family: 'Open Sans', sans-serif; }
.big-right-subtitle{ color: #545454; font-size: 14px; margin-bottom: 15px; font-weight: 600; font-family: 'Open Sans', sans-serif; }
.big-right-why     { color: #79a8ef; font-size: 15px; font-family: 'Open Sans', sans-serif; margin: 10px 0; }
.big-right-fa      { color: #28609F; margin-right: 10px; }

#big-reg-form      { display: none; }
.big-er            { position: relative; vertical-align: top; display: inline-block; margin-left: 5px; width: 462px; overflow: hidden; background: #000000b3; }
.log-reg           { font-family: 'Open Sans', sans-serif; background: transparent; border: 0; border-bottom: 2px #444 solid; padding: 5px; font-size: 18px; color: white; position: relative; display: block; margin-left: 20px; width: 191px; transition: 0.3s border, 5000s background, 5000s color }
.colu              { position: relative; vertical-align: top; width: 231px; display: inline-block; }
.wrape             { position: relative; }
.log2_reg          { margin-top: 20px; }
.log-sho           { width: 40px; margin-left: 10px; text-align: center; display: inline-block; font-family: 'Open Sans', sans-serif; background: transparent; border: 0; border-bottom: 2px #444 solid; padding: 5px; font-size: 18px; color: white; position: relative; transition: 0.3s border, 5000s background, 5000s color }
.log-lon           { width: 63px; margin-left: 10px; text-align: center; display: inline-block; font-family: 'Open Sans', sans-serif; background: transparent; border: 0; border-bottom: 2px #444 solid; padding: 5px; font-size: 18px; color: white; position: relative; transition: 0.3s border, 5000s background, 5000s color }

.log-reg:hover, .log-sho:hover, .log-lon:hover    { border-color: #5e7187 }
.log-reg:focus, .log-sho:focus, .log-lon:focus    { outline: 0 }
.log-reg:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,
.log-sho:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,
.log-lon:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus { border-bottom-color: goldenrod; }

.spinner           { margin: 0px auto; width: 70px; text-align: center; }
.spinner > div     { width: 9px; height: 9px; background-color: #aaa; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
.spinner .bounce1  { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2  { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }

@media (max-width: 1800px) and (min-width: 971px){
	.main-tab-wrap     { position: relative; margin: 0 auto; width: 100%; height: 56px; }
}
@media (max-width: 1200px) and (min-width: 1001px){
    .main-tab-wrap     { position: relative; margin: 0 auto; width: 100%; height: 56px; }
}
@media (max-width: 1000px) and (min-width: 768px){
	.main-tab-wrap     { position: relative; margin: 0 auto; width: 100%; height: 56px; }
    .main-logo         { position: absolute; top: 17px; height: 26px; width: auto; z-index: 9; left: 17px; }
}
@media (max-width: 767px) and (min-width: 120px){
	.main-tab          { position: fixed; transition: 0.5s all; z-index: 10; top: 0px; left: 0px; width: 100%; background: rgba(34,34,34,0.95); height: 54px; }
	.main-tab-wrap     { position: relative; margin: 0 auto; width: 100%; height: 54px; }
	.main-logo         { position: absolute; top: 15px; height: 24px; width: auto; z-index: 9; left: 10px; }
	.main-buttons-list { position: absolute; bottom: 0px; right: 90px; }
	.main-button, .main-nick, .main-spread, .main-logout       { display: none; }

	.mobile-button     { font-family: 'Open Sans', sans-serif; font-weight: 600; text-align: center; display: none; background: rgba(50,50,50,0.95); user-select: none; cursor: pointer; transition: 0.5s all; white-space: nowrap; position: relative; overflow: hidden; width: calc(100% - 30px); border-bottom: 1px solid #111; cursor: pointer; transition: 0.5s all; color: white; float: left; padding: 10px 15px; font-size: 24px; }
	.mobile-button2    { font-family: 'Open Sans', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; font-weight: 500; text-align: center; display: none; background: rgba(35,35,35,0.95); user-select: none; cursor: pointer; transition: 0.5s all; white-space: nowrap; position: relative; overflow: hidden; width: calc(100% - 130px); border-bottom: 1px solid #111; cursor: pointer; transition: 0.5s all; color: white; float: left; padding: 15px 15px; line-height: 24px; }
	.mobile-button3    { font-family: 'Open Sans', sans-serif; font-weight: 500; text-align: center; display: none; background: rgba(20,20,20,0.95); user-select: none; cursor: pointer; transition: 0.5s all; white-space: nowrap; position: relative; overflow: hidden; width: 70px; border-bottom: 1px solid #111; cursor: pointer; transition: 0.5s all; color: white; float: left; padding: 15px 15px; line-height: 24px; }
	.mobile-but-fix    { z-index: 10; position: fixed; top: 52px; left: 0; right: 0; }
	.mobile-hambu      { color: white; font-size: 24px; position: absolute; right: -65px; top: -45px; display: inline-block; cursor: pointer; }
    
    
    .big-tab           { position: relative; top: initial; left: initial; margin-top: 80px; }
    .big-left          { vertical-align: initial; display: block; width: calc(100% - 40px); margin: auto; }
    .big-right         { vertical-align: initial; display: block; width: calc(100% - 90px); margin: 20px auto; }
    .log2              { width: calc(100% - 40px); }
    .log               { width: calc(100% - 50px); }
    .log-register      { width: 100%; }
    
    .big-er            { vertical-align: initial; display: block; width: calc(100% - 40px); margin: 20px auto; }
    .log-reg           { width: calc(100% - 40px); }
    .log-sho           { width: calc(25% - 34px); }
    .log-lon           { width: calc(50% - 20px); }
    .log-reg-span      { margin-top: 20px; }
    .colu              { width: 50%; }
}