/* ¿¡∞!? */
/* gspinner.css */

      body {
        padding-top: 100px;
        text-align: center;
      }
      p {
        font-family: Arial, sans-serif;
        font-size: 14px;
        text-align: center;
      }
      .spinner-host {
        display: inline-block;
        height: 100px;
        position: relative;
        width: 100px;
      }
      .spinner-host .spinner-container {
        -webkit-animation: container-rotate 1568ms linear infinite;
        animation: container-rotate 1568ms linear infinite;
        height: 100%;
        width: 100%;
      }
      @-webkit-keyframes container-rotate {
        to {
          -webkit-transform: rotate(360deg);
        }
      }
      @keyframes container-rotate {
        to {
          transform: rotate(360deg);
        }
      }
      .spinner-host .spinner-layer {
        height: 100%;
        opacity: 0;
        position: absolute;
        width: 100%;
      }
      .spinner-host .blue {
        border-color: #019b39;
      }
      .spinner-host .red {
        border-color: #f08000;
      }
      .spinner-host .yellow {
        border-color: #808080;
      }
      .spinner-host .green {
        border-color: #04318c;
      }
      .spinner-host .spinner-layer.blue {
        -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
      }
      .spinner-host .spinner-layer.red {
        -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
      }
      .spinner-host .spinner-layer.yellow {
        -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
      }
      .spinner-host .spinner-layer.green {
        -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
      }
      @-webkit-keyframes fill-unfill-rotate {
        12.5% { -webkit-transform: rotate(135deg);  }
        25%   { -webkit-transform: rotate(270deg);  }
        37.5% { -webkit-transform: rotate(405deg);  }
        50%   { -webkit-transform: rotate(540deg);  }
        62.5% { -webkit-transform: rotate(675deg);  }
        75%   { -webkit-transform: rotate(810deg);  }
        87.5% { -webkit-transform: rotate(945deg);  }
        to    { -webkit-transform: rotate(1080deg); }
      }
      @keyframes fill-unfill-rotate {
        12.5% { transform: rotate(135deg);  }
        25%   { transform: rotate(270deg);  }
        37.5% { transform: rotate(405deg);  }
        50%   { transform: rotate(540deg);  }
        62.5% { transform: rotate(675deg);  }
        75%   { transform: rotate(810deg);  }
        87.5% { transform: rotate(945deg);  }
        to    { transform: rotate(1080deg); }
      }
      @-webkit-keyframes blue-fade-in-out {
        from { opacity: 1; }
        25% { opacity: 1; }
        26% { opacity: 0; }
        89% { opacity: 0; }
        90% { opacity: 1; }
        100% { opacity: 1; }
      }
      @keyframes blue-fade-in-out {
        from { opacity: 1; }
        25% { opacity: 1; }
        26% { opacity: 0; }
        89% { opacity: 0; }
        90% { opacity: 1; }
        100% { opacity: 1; }
      }
      @-webkit-keyframes red-fade-in-out {
        from { opacity: 0; }
        15% { opacity: 0; }
        25% { opacity: 1; }
        50% { opacity: 1; }
        51% { opacity: 0; }
      }
      @keyframes red-fade-in-out {
        from { opacity: 0; }
        15% { opacity: 0; }
        25% { opacity: 1; }
        50% { opacity: 1; }
        51% { opacity: 0; }
      }
      @-webkit-keyframes yellow-fade-in-out {
        from { opacity: 0; }
        40% { opacity: 0; }
        50% { opacity: 1; }
        75% { opacity: 1; }
        76% { opacity: 0; }
      }
      @keyframes yellow-fade-in-out {
        from { opacity: 0; }
        40% { opacity: 0; }
        50% { opacity: 1; }
        75% { opacity: 1; }
        76% { opacity: 0; }
      }
      @-webkit-keyframes green-fade-in-out {
        from { opacity: 0; }
        65% { opacity: 0; }
        75% { opacity: 1; }
        90% { opacity: 1; }
        100% { opacity: 0; }
      }
      @keyframes green-fade-in-out {
        from { opacity: 0; }
        65% { opacity: 0; }
        75% { opacity: 1; }
        90% { opacity: 1; }
        100% { opacity: 0; }
      }
      .spinner-host .gap-patch {
        border-color: inherit;
        box-sizing: border-box;
        height: 100%;
        left: 45%;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 10%;
      }
      .spinner-host .gap-patch .circle {
        left: -450%;
        width: 1000%;
      }
      .spinner-host .circle-clipper {
        border-color: inherit;
        display: inline-block;
        float:left;
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 50%;
      }
      .spinner-host .circle-clipper .circle {
        width: 200%;
      }
      .spinner-host .circle {
        -webkit-animation: none;
        animation: none;
        border-bottom-color: transparent !important;
        border-color: inherit;
        border-radius: 50%;
        border-style: solid;
        border-width: 30px;
        bottom:0;
        box-sizing: border-box;
        height: 100%;
        left:0;
        position: absolute;
        right:0;
        top:0;
      }
      .spinner-host .circle-clipper.left .circle {
        border-right-color: transparent !important;
        -webkit-transform: rotate(129deg);
        transform: rotate(129deg);
      }
      .spinner-host .circle-clipper.right .circle {
        border-left-color: transparent !important;
        left: -100%;
        -webkit-transform: rotate(-129deg);
        transform: rotate(-129deg);
      }
      .spinner-host .circle-clipper.left .circle {
        -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
      }
      .spinner-host .circle-clipper.right .circle {
        -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
        animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
      }
      @-webkit-keyframes left-spin {
        from { -webkit-transform: rotate(130deg); }
        50%  { -webkit-transform: rotate(-5deg);  }
        to   { -webkit-transform: rotate(130deg); }
      }
      @keyframes left-spin {
        from { transform: rotate(130deg); }
        50%  { transform: rotate(-5deg);  }
        to   { transform: rotate(130deg); }
      }
      @-webkit-keyframes right-spin {
        from { -webkit-transform: rotate(-130deg); }
        50%  { -webkit-transform: rotate(5deg);    }
        to   { -webkit-transform: rotate(-130deg); }
      }
      @keyframes right-spin {
        from { transform: rotate(-130deg); }
        50%  { transform: rotate(5deg);    }
        to   { transform: rotate(-130deg); }
      }
      @-webkit-keyframes fade-out {
        from { opacity: 1; }
        to   { opacity: 0; }
      }
      @keyframes fade-out {
        from { opacity: 1; }
        to   { opacity: 0; }
      }