@charset "UTF-8";

.arwp-block {
  width: 100%;
  margin-top: 15px;

  .arwp-left,
  .arwp-right,
  .arwp-center {
    padding: 15px 30px;
    background-color: #fff;
  }
  .arwp-center {
    margin-top: 25px;
    padding: 10px 30px;
    width: calc(100% - 60px);
    border-left: 4px solid #ffba00;

    p {
      margin: 0;
      font-style: italic;

      &.left {
        float: left;
      }
      &.right {
        float: right;
      }
    }
  }
  .arwp-left {
    float: left;
    position: relative;
    margin-right: 25px;
    border-left: 4px solid #00a0d2;
    width: calc(70% - 60px - 25px - 4px);

    .overflow {
      width: 100%;
      height: 100%;
      display: none;
      background-color: rgba(0, 160, 210, 0.2);
      position: absolute;
      left: 0;
      top: 0;
    }
    .spinner {
      float: none;
      margin: 0;
      position: absolute;
      visibility: visible;
      left: calc(50% - 20px);
      top: calc(50% - 20px);
    }
  }
  .arwp-right {
    float: right;
    width: calc(30% - 60px - 4px);
    border-left: 4px solid #46b450;
  }
  .arwp-form-view {
    width: 55%;
    float: left;
  }
  .arwp-form-info {
    float: right;
    width: calc(45% - 10px);

    h3 {
      text-align: center;
    }
    p {
      display: none;
      padding: 10px;
      font-weight: bold;
      text-align: justify;
      border: 1px solid #f00;
    }
  }

  #donate {
    text-align: center;
    margin-bottom: 30px;

    .dbox-donation-button {
      color: #fff;
      display: inline-block;
      background:#2d81c5 url('https://d1iczxrky3cnb2.cloudfront.net/red_logo.png') no-repeat 18px center;
      text-decoration: none;
      border-radius: 2px;
      padding: 13px 17px 13px 56px;
      box-shadow: 0 1px 0 0 #1f5a89;
      text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    }
  }
}

/* loader */
#loader {
  margin: 10px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
  display: none;

  >div {
    background-color: #333;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }
  .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }
  .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }

  @-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
  }
  @keyframes sk-stretchdelay {
    0%, 40%, 100% {
      transform: scaleY(0.4);
      -webkit-transform: scaleY(0.4);
    }  20% {
         transform: scaleY(1.0);
         -webkit-transform: scaleY(1.0);
       }
  }
}

@media (max-width: 767px) {
  .arwp-block {
    .arwp-left,
    .arwp-right {
      float: none;
      width: calc(100% - 60px);
    }
    .arwp-left {
      margin-bottom: 25px;
    }
  }
}