@charset "utf-8";

#whiteout, #splash_ad_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../images/black.png');
display: none;
z-index: 101;
}

#splash_ad_container {
   background: none;
}

#popup_contents {
background: #fff;
text-align: center;
padding: 15px;
}

#popup_message {
margin-bottom: 15px;
font-family: robotolight;
font-size: 20px;
}

.popup_button {
padding: 5px 10px;
background: #00659e;
border: 1px solid #fff;
color: #fff;
font-family: robotolight;
font-size: 14px;
cursor: pointer;
margin: 10px 10px 0;
display: inline-block;
}

.popup_button:hover {
background: #004166;
}

#login, #popup {
display: none;
border: 3px solid #fff;
background: #fff;
width: 400px;
margin: 0 auto;
color: #3d3d3d;
}

#login {
   width: 800px;
   border: none;
}

#login_left, #login_right {
   width: 400px;
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
}

#login_left {
   padding: 15px;
   font-family: robotolight;
   font-size: 14px;
   line-height: 1.8em;
}

#login_right {
   padding: 20px 0 10px;
}

#logout {
display: none;
border: 3px solid #fff;
background: #fff;
width: 250px;
margin: 0 auto;
padding: 15px;
color: #3d3d3d;
font-family: robotolight;
font-size: 16px;
text-align: center;
}

#login_title {
color: #00659e;
font-family: robotobold;
font-size: 24px;
}

#login_close {
   position: absolute;
   top: 0;
   right: 0;
   padding: 10px;
   cursor: pointer;
   font-family: robotobold;
   font-size: 12px;
   color: #00659e;
   z-index: 9999;
}

#login_message {
display: none;
color: #f03;
font-family: robotolight;
font-size: 16px;
text-align: center;
margin: 15px 0;
}

.login_header {
   font-family: robotobold;
   font-size: 14px;
   color: #848484;
   width: 346px;
   margin: 0 auto;
}

.login_text {
border: 1px solid #3c3c3c;
font-family: robotolight;
font-size: 14px;
padding: 5px 10px;
width: 324px;
display: block;
margin: 5px auto 15px;
}

#login_other {
font-size: 10px;
font-family: robotolight;
color: #3c3c3c;
width: 346px;
height: 20px;
margin: 15px auto;
}

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

input[type="checkbox"] + label span {
display: inline-block;
width: 20px;
height: 20px;
margin: 0;
vertical-align: -6px;
background: url('../images/login_checkbox.png');
cursor: pointer;
}

input[type="checkbox"]:checked + label span {
background-position: 0 -20px;
}

#login_forgot {
color: #3c3c3c;
position: absolute;
top: 4px;
right: 0;
}

#login_button {
color: #fff;
background: #00659e;
display: block;
width: 346px;
text-align: center;
font-family: robotolight;
font-size: 19px;
padding: 5px 0;
margin: 0 auto 5px;
cursor: pointer;
border-radius: 0.2em;
}

#login_button:hover {
background: #004166;
}

#login_divider {
   width: 346px;
   margin: 15px auto;
   text-align: center;
   font-family: robotolight;
   font-size: 12px;
   color: #848484;
}

#login_divide_left, #login_divide_right {
   border-top: 1px solid #d5d5d5;
   width: 120px;
   height: 0;
   position: absolute;
   top: 8px;
   z-index: 1;
}

#login_divide_left {
   left: 0;
}

#login_divide_right {
   right: 0;
}

#login_divide_title {
   display: inline-block;
   padding: 0 8px;
   background: #fff;
   z-index: 10;
}

#login_alts {
width: 346px;
height: 52px;
margin: 0 auto;
text-align: center;
}

#login_fb, #login_gp, #login_tw {
display: inline-block;
margin: 0 3px;
width: 52px;
height: 52px;
box-sizing: border-box;
padding: 5px;
cursor: pointer;
}

#login_fb {
background: url('../images/login_fb.png') no-repeat center center;
}

#login_gp {
background: url('../images/login_gp.png') no-repeat center center;
}

#login_tw {
background: url('../images/login_tw.png') no-repeat center center;
display: none;
}

#login_fb:hover, #login_gp:hover, #login_tw:hover {
   background-color: #80b2ce;
   border: 2px solid #00659e;
   border-radius: 0.5em;
}

#login_register {
background: #ccc;
width: 100%;
text-align: center;
color: #4c4c4c;
font-family: robotolight;
font-size: 16px;
padding: 15px 0;
}

#login_register a {
font-family: robotobold;
color: #00659e;
}

#floatingBarsG{
position:relative;
width:30px;
height:37px}

.blockG{
position:absolute;
background-color:#FFFFFF;
width:5px;
height:12px;
-moz-border-radius:4px 4px 0 0;
-moz-transform:scale(0.4);
-moz-animation-name:fadeG;
-moz-animation-duration:0.48s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
-webkit-border-radius:4px 4px 0 0;
-webkit-transform:scale(0.4);
-webkit-animation-name:fadeG;
-webkit-animation-duration:0.48s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-ms-border-radius:4px 4px 0 0;
-ms-transform:scale(0.4);
-ms-animation-name:fadeG;
-ms-animation-duration:0.48s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:normal;
-o-border-radius:4px 4px 0 0;
-o-transform:scale(0.4);
-o-animation-name:fadeG;
-o-animation-duration:0.48s;
-o-animation-iteration-count:infinite;
-o-animation-direction:normal;
border-radius:4px 4px 0 0;
transform:scale(0.4);
animation-name:fadeG;
animation-duration:0.48s;
animation-iteration-count:infinite;
animation-direction:normal;
}

#rotateG_01{
left:0;
top:13px;
-moz-animation-delay:0.18s;
-moz-transform:rotate(-90deg);
-webkit-animation-delay:0.18s;
-webkit-transform:rotate(-90deg);
-ms-animation-delay:0.18s;
-ms-transform:rotate(-90deg);
-o-animation-delay:0.18s;
-o-transform:rotate(-90deg);
animation-delay:0.18s;
transform:rotate(-90deg);
}

#rotateG_02{
left:4px;
top:5px;
-moz-animation-delay:0.24s;
-moz-transform:rotate(-45deg);
-webkit-animation-delay:0.24s;
-webkit-transform:rotate(-45deg);
-ms-animation-delay:0.24s;
-ms-transform:rotate(-45deg);
-o-animation-delay:0.24s;
-o-transform:rotate(-45deg);
animation-delay:0.24s;
transform:rotate(-45deg);
}

#rotateG_03{
left:13px;
top:1px;
-moz-animation-delay:0.3s;
-moz-transform:rotate(0deg);
-webkit-animation-delay:0.3s;
-webkit-transform:rotate(0deg);
-ms-animation-delay:0.3s;
-ms-transform:rotate(0deg);
-o-animation-delay:0.3s;
-o-transform:rotate(0deg);
animation-delay:0.3s;
transform:rotate(0deg);
}

#rotateG_04{
right:4px;
top:5px;
-moz-animation-delay:0.36s;
-moz-transform:rotate(45deg);
-webkit-animation-delay:0.36s;
-webkit-transform:rotate(45deg);
-ms-animation-delay:0.36s;
-ms-transform:rotate(45deg);
-o-animation-delay:0.36s;
-o-transform:rotate(45deg);
animation-delay:0.36s;
transform:rotate(45deg);
}

#rotateG_05{
right:0;
top:13px;
-moz-animation-delay:0.42000000000000004s;
-moz-transform:rotate(90deg);
-webkit-animation-delay:0.42000000000000004s;
-webkit-transform:rotate(90deg);
-ms-animation-delay:0.42000000000000004s;
-ms-transform:rotate(90deg);
-o-animation-delay:0.42000000000000004s;
-o-transform:rotate(90deg);
animation-delay:0.42000000000000004s;
transform:rotate(90deg);
}

#rotateG_06{
right:4px;
bottom:3px;
-moz-animation-delay:0.48s;
-moz-transform:rotate(135deg);
-webkit-animation-delay:0.48s;
-webkit-transform:rotate(135deg);
-ms-animation-delay:0.48s;
-ms-transform:rotate(135deg);
-o-animation-delay:0.48s;
-o-transform:rotate(135deg);
animation-delay:0.48s;
transform:rotate(135deg);
}

#rotateG_07{
bottom:0;
left:13px;
-moz-animation-delay:0.5399999999999999s;
-moz-transform:rotate(180deg);
-webkit-animation-delay:0.5399999999999999s;
-webkit-transform:rotate(180deg);
-ms-animation-delay:0.5399999999999999s;
-ms-transform:rotate(180deg);
-o-animation-delay:0.5399999999999999s;
-o-transform:rotate(180deg);
animation-delay:0.5399999999999999s;
transform:rotate(180deg);
}

#rotateG_08{
left:4px;
bottom:3px;
-moz-animation-delay:0.6s;
-moz-transform:rotate(-135deg);
-webkit-animation-delay:0.6s;
-webkit-transform:rotate(-135deg);
-ms-animation-delay:0.6s;
-ms-transform:rotate(-135deg);
-o-animation-delay:0.6s;
-o-transform:rotate(-135deg);
animation-delay:0.6s;
transform:rotate(-135deg);
}

@-moz-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-webkit-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-ms-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-o-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@media only screen and (max-width:1024px) {
   #whiteout {
      background: #115269;
      top: 82px;
   }

   #whiteout_td {
      padding: 25px;
      vertical-align: top;
   }

   #login {
      width: 100%;
      max-width: 400px;
   }

   #login_title {
      font-size: 20px;
   }

   #login_left {
      padding-bottom: 0;
      font-size: 12px;
   }

   #login_right {
      padding-top: 0;
   }

   #login_register {
      font-size: 14px;
   }
}

@media only screen and (max-width:575px) {
   #whiteout {
      top: 59px;
   }
}

@media only screen and (max-width:460px) {
   .login_text {
      width: 80%;
   }

   .login_header {
      box-sizing: border-box;
      width: 100%;
      padding: 0 15px;
   }

   #login_alts {
      width: 100%;
   }

   #login_divider {
      box-sizing: border-box;
      width: 100%;
      padding: 0 15px;
   }

   #login_left, #login_right {
      width: 100%;
   }

   #login_other, #login_button {
      width: 85%;
   }
}