/***
CSS3 Loading Animation
Design: 
  Jordi Verdu
  http://dribbble.com/shots/963799-Animation-Loading-gif
***/

body,html {
    height: 100%;
    background: #9bbcbe;
    margin: auto;
    background-repeat: no-repeat;
    background-size: 100vw;
    background-image: url(../images/logo/logo.svg); opacity: 0.98;
  }
  .wrapper{
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  @media screen and (max-width:768px){
    .wrapper{
      background: #000;
      flex-direction: column;
      padding: 10px;
      opacity: 0.8;
    }
  }

  .container {
    left: 50%;
    margin: auto -50px;
    position: absolute;
    top: 50%;
  }
  .swing div {
    border-radius: 50%;
    float: left;
    height: 1em;
    width: 1em;
  }
  .swing div:nth-of-type(1) {
    background: -webkit-linear-gradient(left, #2fc2c2 0%, #33d1af 100%);
    background: linear-gradient(to right, #2fc2c2 0%, #33d1af 100%);
  }
  .swing div:nth-of-type(2) {
    background: -webkit-linear-gradient(left, #33d170 0%, #33d133 100%);
    background: linear-gradient(to right, #33d170 0%, #33d133 100%);
  }
  .swing div:nth-of-type(3) {
    background: -webkit-linear-gradient(left, #87d133 0%, #b4d133 100%);
    background: linear-gradient(to right, #87d133 0%, #b4d133 100%);
  }
  .swing div:nth-of-type(4) {
    background: -webkit-linear-gradient(left, #d1c133 0%, #d1a951 100%);
    background: linear-gradient(to right, #d1c133 0%, #d1a951 100%);
  }
  .swing div:nth-of-type(5) {
    background: -webkit-linear-gradient(left, #d17a51 0%, #cc977e 100%);
    background: linear-gradient(to right, #d17a51 0%, #cc977e 100%);
  }
  .swing div:nth-of-type(6) {
    background: -webkit-linear-gradient(left, #cc867e 0%, #eed4d1 100%);
    background: linear-gradient(to right, #cc867e 0%, #eed4d1 100%);
  }
  .swing div:nth-of-type(7) {
    background: -webkit-linear-gradient(left, #dbc4c1 0%, #f3efef 100%);
    background: linear-gradient(to right, #dbc4c1 0%, #f3efef 100%);
  }
  .shadow {
    clear: left;
    padding-top: 1.5em;
  }
  .shadow div {
    -webkit-filter: blur(1px);
    filter: blur(1px);
    float: left;
    width: 1em;
    height: .25em;
    border-radius: 50%;
    background: #e3dbd2;
  }
  .shadow .shadow-l {
    background: #d5d8d6;
  }
  .shadow .shadow-r {
    background: #eed3ca;
  }
  @-webkit-keyframes ball-l {
    0%, 50% {
      -webkit-transform: rotate(0) translateX(0);
      transform: rotate(0) translateX(0);
    }
    100% {
      -webkit-transform: rotate(50deg) translateX(-2.5em);
      transform: rotate(50deg) translateX(-2.5em);
    }
  }
  @keyframes ball-l {
    0%, 50% {
      -webkit-transform: rotate(0) translate(0);
      transform: rotate(0) translateX(0);
    }
    100% {
      -webkit-transform: rotate(50deg) translateX(-2.5em);
      transform: rotate(50deg) translateX(-2.5em);
    }
  }
  @-webkit-keyframes ball-r {
    0% {
      -webkit-transform: rotate(-50deg) translateX(2.5em);
      transform: rotate(-50deg) translateX(2.5em);
    }
    50%,
    100% {
      -webkit-transform: rotate(0) translateX(0);
      transform: rotate(0) translateX(0);
    }
  }
  @keyframes ball-r {
    0% {
      -webkit-transform: rotate(-50deg) translateX(2.5em);
      transform: rotate(-50deg) translateX(2.5em);
    }
    50%,
    100% {
      -webkit-transform: rotate(0) translateX(0);
      transform: rotate(0) translateX(0)
    }
  }
  @-webkit-keyframes shadow-l-n {
    0%, 50% {
      opacity: .5;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      opacity: .125;
      -webkit-transform: translateX(-1.57em);
      transform: translateX(-1.75em);
    }
  }
  @keyframes shadow-l-n {
    0%, 50% {
      opacity: .5;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      opacity: .125;
      -webkit-transform: translateX(-1.75);
      transform: translateX(-1.75em);
    }
  }
  @-webkit-keyframes shadow-r-n {
    0% {
      opacity: .125;
      -webkit-transform: translateX(1.75em);
      transform: translateX(1.75em);
    }
    50%,
    100% {
      opacity: .5;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  @keyframes shadow-r-n {
    0% {
      opacity: .125;
      -webkit-transform: translateX(1.75em);
      transform: translateX(1.75em);
    }
    50%,
    100% {
      opacity: .5;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  .swing-l {
    -webkit-animation: ball-l .425s ease-in-out infinite alternate;
    animation: ball-l .425s ease-in-out infinite alternate;
  }
  .swing-r {
    -webkit-animation: ball-r .425s ease-in-out infinite alternate;
    animation: ball-r .425s ease-in-out infinite alternate;
  }
  .shadow-l {
    -webkit-animation: shadow-l-n .425s ease-in-out infinite alternate;
    animation: shadow-l-n .425s ease-in-out infinite alternate;
  }
  .shadow-r {
    -webkit-animation: shadow-r-n .425s ease-in-out infinite alternate;
    animation: shadow-r-n .425s ease-in-out infinite alternate;
  }
  .box { background-color: #66A182; 
width: 250px;
height: 52px; 
border-radius: 5px;
}
.btn {
    line-height: 50px;
    height: 50px;
    text-align: center;
    width: 250px;
    cursor: pointer;
}
@media screen and (max-width:768px){
  .box{
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 10px;
  }
}
.box:hover{
  background-color: rgba(233, 92, 92, 0.788);
}
.btn-three {
    color: #FFF;
    transition: all 0.3s;
    position: relative;
}
.btn-three button {
  line-height: 52px;
  font-size: 3.0rem;
  background-color: rgba(160, 57, 57, 0);
  border: none;
  color: #ebf7f4;
  z-index: 2; 
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;   
    transition: all 1s;
}
.btn-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 1s;
  border: 1px solid rgba(30, 194, 44, 1);
  background-color: rgba(255,255,255,0.1);
}
.btn-three::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 1s;
  border: 1px solid rgba(30, 194, 44, 1);
  background-color: rgba(49, 236, 96, 0.1);
}
.btn-three:hover::before {
  transform: rotate(-180deg);
  border: double rgba(255,255,255,0.01);
  border-radius: 10rem;
  background-color: rgba(255,255,255,0.01);
}
.btn-three:hover::after {
  transform: rotate(360deg);
  border: double rgba(255,255,255,0.01);
  border-radius: 10rem;
  background-color: rgba(255,255,255,0.01);
}