@import url("https://fonts.googleapis.com/css?family=Lobster");
html {
  padding: 0;
  margin: 0; }
  html body {
    padding: 0;
    margin: 0;
    background-color: #00a8ec;
    color: #ffffff;
    font-family: 'Hack', Arial, sans-serif;
    font-size: 18px; }
    html body .clear {
      clear: both; }
    html body main {
      bottom: 0;
      height: 285px;
      left: 0;
      margin: auto;
      position: absolute;
      top: 0;
      right: 0;
      width: 655px; }
      @media only screen and (max-width: 675px) {
        html body main {
          width: 100%;
          position: relative;
          padding-top: 80px; } }
      html body main .square {
        width: 160px;
        height: 160px;
        margin: 0 80px 75px 0;
        float: left;
        font-family: 'Hack', Arial;
        font-size: 16px;
        color: #ffffff; }
        @media only screen and (max-width: 675px) {
          html body main .square {
            width: 100%;
            height: 160px;
            text-align: center;
            float: none;
            margin-bottom: 80px; } }
        html body main .square pre {
          margin: 0;
          padding: 0;
          font-family: 'Hack', Arial;
          font-size: 17px;
          color: #ffffff;
          white-space: pre-wrap;
          /* Since CSS 2.1 */
          white-space: -moz-pre-wrap;
          /* Mozilla, since 1999 */
          white-space: -pre-wrap;
          /* Opera 4-6 */
          white-space: -o-pre-wrap;
          /* Opera 7 */
          word-wrap: break-word;
          -webkit-user-select: none;
          /* Chrome all / Safari all */
          -moz-user-select: none;
          /* Firefox all */
          -ms-user-select: none;
          /* IE 10+ */
          user-select: none; }
          @media only screen and (max-width: 675px) {
            html body main .square pre {
              width: 160px;
              height: 160px;
              margin: auto; } }
        html body main .square .inner {
          width: 80px;
          height: 80px;
          border: 40px solid #ffffff;
          background-color: transparent;
          transition: all 3s;
          transition-timing: ease-in-out; }
          @media only screen and (max-width: 675px) {
            html body main .square .inner {
              margin: auto; } }
          html body main .square .inner:hover {
            transform: rotate(720deg);
            cursor: crosshair; }
      html body main .rinfo {
        float: left;
        width: 415px;
        height: 160px; }
        @media only screen and (max-width: 675px) {
          html body main .rinfo {
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
            height: auto;
            float: none; } }
        html body main .rinfo nav {
          font-size: 40px;
          color: #ffffff;
          line-height: 50px;
          padding-bottom: 20px; }
          @media only screen and (max-width: 675px) {
            html body main .rinfo nav {
              margin: auto; } }
          html body main .rinfo nav .per {
            font-family: 'Hack', Arial;
            font-size: 30px;
            color: #01728d;
            text-decoration: none;
            padding: 0 6px 0 18px; }
          html body main .rinfo nav .indesigner {
            font-family: 'Lobster', Arial; }
          html body main .rinfo nav .incoder {
            font-family: 'Hack', Arial; }
          html body main .rinfo nav #todesigner {
            font-family: 'Lobster', Arial;
            font-size: 30px;
            color: #01728d;
            text-decoration: none;
            cursor: pointer; }
          html body main .rinfo nav #tocoder {
            font-family: 'Hack', Arial;
            font-size: 30px;
            color: #01728d;
            text-decoration: none;
            cursor: pointer; }
        html body main .rinfo .somewords {
          margin: 17px 0 0 0; }
      html body main #designer .contacts .left {
        float: left;
        width: 160px;
        margin-right: 80px;
        line-height: 80px;
        font-family: 'Hack', Arial;
        color: #01728d;
        font-size: 22px;
        text-decoration: none;
        text-align: center; }
        @media only screen and (max-width: 675px) {
          html body main #designer .contacts .left {
            float: none;
            width: 100%;
            padding: 20px 20px;
            box-sizing: border-box; } }
      html body main #designer .contacts .right {
        padding: 0;
        margin: 0;
        float: left; }
        @media only screen and (max-width: 675px) {
          html body main #designer .contacts .right {
            float: none;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box; } }
        html body main #designer .contacts .right li {
          list-style: none;
          float: left;
          width: 80px;
          height: 80px;
          background-color: #01728d;
          padding: 20px;
          text-align: center;
          margin-right: 80px;
          box-sizing: border-box; }
          @media only screen and (max-width: 675px) {
            html body main #designer .contacts .right li {
              margin-right: 40px; } }
          html body main #designer .contacts .right li img {
            height: 40px; }
        html body main #designer .contacts .right li:last-child {
          margin-right: 0; }
        html body main #designer .contacts .right .l1 {
          transform-style: preserve-3d; }
        html body main #designer .contacts .right .l1:after {
          top: -100%;
          left: 0px;
          width: 100%;
          position: absolute;
          background: #01728d;
          color: #00a8ec;
          border-radius: 5px;
          content: 'E-mail';
          transform-origin: left bottom;
          transform: rotateX(90deg); }
      html body main #coder {
        display: none; }
        html body main #coder .contacts {
          font-family: 'Hack', Arial;
          font-size: 18px;
          color: #01657d;
          text-decoration: none; }
          @media only screen and (max-width: 675px) {
            html body main #coder .contacts {
              padding: 50px 30px 20px 20px;
              width: 100%;
              box-sizing: border-box;
              word-wrap: break-word; } }
          html body main #coder .contacts span {
            color: #ffffff; }
          html body main #coder .contacts a {
            color: #ffffff;
            text-decoration: none; }

/*# sourceMappingURL=zolloom.css.map */