* {
          margin: 0;
          padding: 0;
          -moz-box-sizing: border-box;
          -o-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
      }
      
      body {
          width: 100%;
          height: 100%;
          font-family: "helvetica", helvetica, arial, sans-serif;
          font-size: 13px;
          text-align: center;
      }
      
      #iesocial {
          visibility: hidden;
          position: absolute;
          z-index: 1;
      }
      
      ul {
          margin: 30px auto;
          text-align: center;
          position: relative;
          z-index: 2;
      }
      
      li {
          list-style: none;
          position: relative;
          display: inline-block;
          width: 100px;
          height: 100px;
      }
      
      @-moz-keyframes rotate {
          0% {
              transform: rotate(0deg);
          }
          100% {
              transform: rotate(-360deg);
          }
      }
      
      @-webkit-keyframes rotate {
          0% {
              transform: rotate(0deg);
          }
          100% {
              transform: rotate(-360deg);
          }
      }
      
      @-o-keyframes rotate {
          0% {
              transform: rotate(0deg);
          }
          100% {
              transform: rotate(-360deg);
          }
      }
      
      @keyframes rotate {
          0% {
              transform: rotate(0deg);
          }
          100% {
              transform: rotate(-360deg);
          }
      }
      
      .round {
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          padding-top: 22px;
          text-decoration: none;
          text-align: center;
          font-size: 18px;
          text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
          letter-spacing: -.065em;
          font-family: "Helvetica", sans-serif;
          -webkit-transition: all .25s ease-in-out;
          -o-transition: all .25s ease-in-out;
          -moz-transition: all .25s ease-in-out;
          transition: all .25s ease-in-out;
          box-shadow: 2px 2px 7px rgba(0, 0, 0, .2);
          border-radius: 300px;
          z-index: 1;
          border-width: 4px;
          border-style: solid;
      }
      
      .round:hover {
          width: 130%;
          height: 130%;
          left: -15%;
          top: -15%;
          font-size: 33px;
          padding-top: 38px;
          -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
          -o-box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
          -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
          box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
          z-index: 2;
          border-size: 10px;
          -webkit-transform: rotate(-360deg);
          -moz-transform: rotate(-360deg);
          -o-transform: rotate(-360deg);
          transform: rotate(-360deg);
      }
      
      a.orange {
          background-color: rgba(255, 181, 21, 1);
          color: rgba(59, 89, 152, 1);
          border-color: rgba(34, 52, 88, .2);
          background-image: url(../images/sobre.gif);
          background-position: center;
          background-repeat: no-repeat;
          background-size: 65% 65%;
      }
      
      a.orange:hover {
          color: rgba(255, 181, 21, 1);
          background-image: url(../images/sobre2.gif);
          background-position: center;
          background-size: 87% 87%;
          background-repeat: no-repeat;
      }
      
      a.red {
          background-color: rgba(49, 74, 126, 1);
          color: rgba(59, 89, 152, 1);
          border-color: rgba(34, 52, 88, .2);
      }
      
      a.red:hover {
          color: rgba(59, 89, 152, 1);
          background-image: url(../images/facebook.gif);
          background-size: 94% 94%;
          background-repeat: no-repeat;
      }
      
      a.green {
          background-color: rgba(41, 129, 228, 1);
          color: rgba(0, 63, 71, 1);
          border-color: rgba(0, 63, 71, .2);
      }
      
      a.green:hover {
          color: rgba(1, 151, 171, 1);
          background-image: url(../images/blogspot.gif);
          background-size: 87% 87%;
          background-position: center;
          background-repeat: no-repeat;
      }
      
      a.yellow {
          background-color: rgba(145, 189, 9, 1);
          background-image: url(../images/nivel.gif);
          background-position: center;
          background-repeat: no-repeat;
          background-size: 94% 94%;
          color: rgba(255, 255, 255, 1);
          border-color: rgba(106, 138, 7, .2);
      }
      
      a.yellow:hover {
          color: rgba(106, 138, 7, .2);
          background-image: none;
      }
      
      .round span.round {
          display: block;
          opacity: 0;
          -webkit-transition: all .5s ease-in-out;
          -moz-transition: all .5s ease-in-out;
          -o-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;
          font-size: 1px;
          border: none;
          padding: 40% 20% 0 20%;
          color: #fff;
      }
      
      .round span:hover {
          opacity: .85;
          font-size: 16px;
          -webkit-text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
          -moz-text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
          -o-text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
          text-shadow: 1px 2px #444;
      }
      
      .orange span {
          background: rgba(255, 181, 21, .7);
      }
      
      .green span {
          background: rgba(0, 63, 71, .7);
      }
      
      .red span {
          background: rgba(59, 89, 152, .7);
      }
      
      .yellow span {
          background: rgba(161, 145, 0, .7);
      }