#top {
  background: url("/img/top.png") top center repeat-x;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000; }
  #top a {
    display: inline-block;
    padding: 40px;
    color: #fff;
    display: none; }
    #top a img {
      display: inline-block;
      float: left;
      margin-right: 12px;
      margin-top: 2px; }
  #top .menu {
    margin-top: 5px;
    width: auto;
    text-align: center; }
    #top .menu p {
      display: inline-block;
      color: #fff;
      border: 1px solid #f6d44e;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 12px;
      margin-left: 32px;
      font-weight: 600; }
      #top .menu p.green {
        border: 1px solid #a7ff7c; }
    #top .menu .language {
      position: relative;
      display: inline-block; }
      #top .menu .language h3 {
        font-size: 18px;
        color: #7179a2;
        margin-bottom: 6px; }
      #top .menu .language > ul {
        position: absolute;
        display: none;
        left: -3px;
        top: 28px;
        padding-bottom: 4px;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px; }
        #top .menu .language > ul li {
          display: block; }
          #top .menu .language > ul li:first-child a {
            border-top-right-radius: 6px;
            border-top-left-radius: 6px; }
          #top .menu .language > ul li a {
            display: block;
            color: #fff;
            padding: 12px 16px;
            text-align: left;
            transition: background .5s ease-in; }
            #top .menu .language > ul li a:hover {
              background: #252731; }
      #top .menu .language:hover > ul {
        display: inline-block;
        background: #1e1f27 url("/img/top.png") bottom center repeat-x; }
    #top .menu > ul {
      padding: 20px;
      display: inline-block; }
      #top .menu > ul li {
        display: inline-block; }
        #top .menu > ul li a {
          display: block;
          color: #a6adcd;
          padding: 14px 16px 12px 16px !important;
          transition: color .5s ease-in;
          text-align: left; }
          #top .menu > ul li a:hover {
            color: #fff; }
        #top .menu > ul li.signout a {
          color: #ff6a6a; }
        #top .menu > ul li.signin a {
          color: #96e57d; }
        #top .menu > ul li.active a {
          color: #fff; }
          #container {
            background: url("/img/top.png") top center repeat-x;
            padding: 120px 10px 10px 10px; }
            #container .frame {
              max-width: 800px; }
            #container h1 {
              text-align: center; }
              #container h1 a {
                color: #fff;
                font-size: 28px; }
              #container h1 img {
                display: block;
                margin-bottom: 6px; }
            #container table {
              width: 100%;
              word-wrap: break-word;
              table-layout: fixed;
              margin-top: 48px;
              margin-bottom: 24px;
              text-align: left;
              border-collapse: collapse;
              background: #252731;
              border-radius: 6px; }
              #container table thead th {
                color: #78869a;
                font-size: 14px;
                padding-top: 24px;
                padding: 24px 24px 0 24px; }
              #container table tbody tr td {
                color: #9cabc2;
                padding: 4px 24px 24px 24px; }
                #container table tbody tr td a {
                  color: #c5d5ee;
                  transition: color .5s ease-in; }
                  #container table tbody tr td a:hover {
                    color: #fff; }
            #container #help, #container #account, #container #user, #container #form, #container #start {
              background: #252731;
              border-radius: 6px;
              padding: 24px;
              opacity: .6;
              transition: opacity .5s ease-in; }
              #container #help:hover, #container #account:hover, #container #user:hover, #container #form:hover, #container #start:hover {
                opacity: 1; }
              #container #help h2, #container #account h2, #container #user h2, #container #form h2, #container #start h2 {
                color: #78869a;
                font-size: 24px; }
              #container #help p, #container #account p, #container #user p, #container #form p, #container #start p {
                color: #9cabc2;
                font-size: 16px;
                margin: 4px 0; }
            #container #help a {
              display: inline-block;
              padding: 12px 18px 10px 18px;
              margin-top: 18px;
              margin-right: 6px;
              color: #fff;
              border-radius: 6px;
              transition: color .5s ease-in; }
              #container #help a.installation {
                border: 1px solid #f8be4f;
                color: #f8be4f; }
              #container #help a.tech {
                border: 1px solid #ff7e5b;
                color: #ff7e5b; }
              #container #help a.openvpn {
                border: 1px solid #53ce6d;
                color: #53ce6d; }
              #container #help a:hover {
                color: #fff; }
            #container #account {
              margin-top: 24px; }
              #container #account form input {
                display: inline-block;
                border: 1px solid #45495d;
                padding: 14px 16px 12px 16px;
                color: #fff;
                background: none;
                border-radius: 9px;
                margin: 12px 6px 12px 0;
                width: 240px;
                font-family: 'Open Sans', sans-serif;
                font-size: 14px;
                outline: none;
                transition: border .3s ease-in; }
                #container #account form input:hover {
                  border: 1px solid #555a73; }
                #container #account form input:focus {
                  border: 1px solid #4b657c; }
                #container #account form input.username {
                  width: 200px; }
                #container #account form input[type="submit"] {
                  border: 1px solid #96e57d;
                  color: #96e57d;
                  width: 274px;
                  width: auto;
                  font-weight: 600;
                  cursor: pointer;
                  transition: color .5s ease-in;
                  text-align: left; }
                  #container #account form input[type="submit"]:hover {
                    color: #fff; }
            #container #user {
              display: none;
              margin-top: 24px;
              margin-bottom: 24px; }
              #container #user ul li {
                display: block;
                color: #9cabc2;
                font-size: 16px;
                margin: 4px 0; }
                #container #user ul li:nth-child(odd) {
                  color: #78869a;
                  font-size: 24px; }
            #container #form {
              width: 290px;
              margin-top: 48px;
              opacity: 1; }
              #container #form form {
                width: auto;
                padding-bottom: 12px; }
                #container #form form input {
                  display: block; }
                  #container #form form input[type="submit"] {
                    width: 274px !important;
                    text-align: center; }
              #container #form a {
                display: block;
                color: #78869a;
                text-align: center;
                margin-left: 6px;
                padding: 4px 0;
                transition: color .5s ease-in; }
                #container #form a:hover {
                  color: #fff; }
            #container #start {
              margin-bottom: 24px;
              opacity: 1; }
              #container #start h3 {
                font-size: 24px;
                color: #7179a2; }
              #container #start p {
                margin-top: 6px;
                margin-bottom: 12px;
                font-size: 18px;
                color: #a6adcd; }

          @media (max-width: 800px) {
            #container {
              padding-top: 40px; }
              #container #help, #container #account, #container #user {
                opacity: 1; }
              #container #user {
                display: block !important; }
              #container table {
                display: none !important; }

            #top {
              margin-top: 12px;
              position: relative; }
              #top .menu {
                width: auto; } }
                form {
                  margin: 0 auto;
                  margin-top: 12px;
                  width: 960px; }
                  form p {
                    text-align: center;
                  }
                  form input {
                    display: inline-block;
                    border: 1px solid #545454;
                    padding: 14px 16px 12px 16px;
                    color: #fff;
                    background: none;
                    border-radius: 9px;
                    margin: 12px 6px;
                    width: 240px;
                    font-family: 'Open Sans', sans-serif;
                    font-size: 14px;
                    outline: none;
                    transition: border .3s ease-in; }
                    form input:hover {
                      border: 1px solid #656565; }
                    form input:focus {
                      border: 1px solid #4b657c; }
                    form input.username {
                      width: 200px; }
                    form input.error {
                      border: 1px solid #ff8080 !important; }
                    form input.success {
                      border: 1px solid #96e57d !important; }
                    form input[type="submit"] {
                      border: 1px solid #96e57d;
                      color: #96e57d;
                      width: 274px;
                      width: auto;
                      font-weight: 600;
                      cursor: pointer;
                      transition: color .5s ease-in;
                      text-align: left; }
                      form input[type="submit"]:hover {
                        color: #fff; }
                        @media (max-width: 1200px) {
                          #header {
                            width: 100%;
                            height: 100%;
                            min-height: 700px;
                            background: url("/img/bg6.jpg") top center;
                            background-size: cover;
                            text-align: center; }
                            #header .frame {
                              width: auto;
                              padding: 24px;
                              padding-top: 120px; }
                            #header form {
                              width: auto; }
                              #header form input {
                                display: inline-block; }

                          ul.two {
                            padding: 0 20px; }
                            ul.two li .image {
                              width: 300px; }
                              ul.two li .image img {
                                width: 300px; }
                            ul.two li .head {
                              width: 500px; }

                          .animation_frame {
                            display: none; }

                          .footer .manager {
                            display: none !important; }
                          .footer form {
                            width: auto; }

                          #top .menu {
                            width: auto; } }
                        @media (max-width: 900px) {
                          #header {
                            height: auto; }
                            #header .frame {
                              width: auto;
                              padding: 24px;
                              padding-top: 120px; }
                              #header .frame h2 {
                                font-size: 32px; }
                                #header .frame h2 span {
                                  font-size: 32px; }
                              #header .frame h3 {
                                font-size: 24px; }
                                #header .frame h3 span {
                                  font-size: 24px; }
                              #header .frame h4 {
                                display: none; }

                          ul.two {
                            padding: 20px;
                            margin: 0 auto; }
                            ul.two li {
                              height: auto;
                              display: block; }
                              ul.two li .image {
                                width: auto;
                                float: none !important; }
                                ul.two li .image img {
                                  width: 100%; }
                              ul.two li .head {
                                float: none !important;
                                width: auto;
                                text-align: center; }

                          #items ul li {
                            width: auto; }
                            #items ul li:first-child {
                              float: none; }

                          #top {
                            background: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            z-index: 9000; }
                            #top a {
                              display: inline-block;
                              padding: 40px;
                              color: #fff; }
                              #top a img {
                                display: inline-block;
                                float: left;
                                margin-right: 12px;
                                margin-top: 2px; }
                            #top .menu {
                              width: 200px;
                              height: 100%;
                              position: fixed;
                              top: 0;
                              left: -200px;
                              background: #252731;
                              z-index: 9999;
                              text-align: left; }
                              #top .menu .language {
                                padding: 0 0 0 37px;
                                display: block; }
                                #top .menu .language h3 {
                                  font-size: 24px;
                                  color: #7179a2;
                                  margin-bottom: 6px; }
                                #top .menu .language > ul {
                                  position: relative;
                                  display: block;
                                  background: none !important;
                                  top: 0;
                                  left: 0; }
                                  #top .menu .language > ul li a {
                                    padding: 6px 0; }
                              #top .menu > ul {
                                padding: 20px; }
                                #top .menu > ul li {
                                  display: block; }
                                  #top .menu > ul li a {
                                    display: block;
                                    color: #a6adcd;
                                    padding: 14px 16px 12px 16px !important;
                                    transition: color .5s ease-in;
                                    text-align: left; }
                                    #top .menu > ul li a:hover {
                                      color: #fff; }
                                  #top .menu > ul li.signout a {
                                    color: #ff6a6a; }
                                  #top .menu > ul li.signin a {
                                    color: #96e57d; }
                                  #top .menu > ul li.active a {
                                    color: #fff; }

                          .footer .menu {
                            display: none; } }
                        @media (min-height: 800px) {
                          #header {
                            height: auto; } }