.dons_top{
 
  min-height:470px;

  background: url('/don.jpg') black center center no-repeat;
  background-size:100%;
  background-size:cover;
  position:relative;
  padding:20px;
  h1{
    position:absolute;
    z-index:10;
    right:20px;
    bottom:20px;
    left:20px;
    font-size:2.3em;
    color:white;
  }
  .gradient{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.5) 100%);
    height: 250px;
    position: absolute;
    bottom: 0;
    left: 0px;
    right: 0px;
    
    
  }
  
  &.with_img{
    
    padding-top:300px;
    color:white;
  
  }
  

  
}

#donate_panel{
  background:rgba(255,255,255,0.80);
  position:relative;
  
  h2{
    font-size:24px;
    text-align:center;
    margin:-10px;
    margin-bottom:10px;
    line-height:1.2em;
    background:rgba(254,141,32,0.9);
    padding:14px 5px;
    padding-bottom:20px;
    color:white;
  }
  .radio{
    display:inline-block;
    margin-right:50px;
  }
  .actions{
    position:absolute;
    bottom:10px;
    right:10px;
  }
  td{
    vertical-align:top;
  }
  .steps{
    width:100%;
    text-align:center;
    border-top:1px solid $orange;
    border-bottom:1px solid $orange;
    padding:5px 0;
    
    margin-bottom:5px;
    td{
      
      width:33%;
    }
    
    .step{
    width:1.5em;
    height:1.5em;
    border-radius:50%;
    margin:auto;
    color:rgba(107,130,126,1);
    border:3px solid rgba(107,130,126,1);
    font-weight:bold;
    }
    
    a{
      
      .step{
        border-color:$orange;
        background:$orange;
        color:white;
        
        
      }
      color:$orange;
    }
  }
  min-height:470px;
  width:500px;
  box-sizing:border-box;
  padding:10px;
  padding-bottom:60px;
  
  z-index:2;
  
  
  .input{
    
    &.has-error{
      
     
      .form-control{
        border: 1px solid red;
      }
    }
    .control-label{
      display:block;
      font-size:0.9em;
      
    }
    .form-control{
      display:block;
      box-sizing:border-box;
      width:100%;
      padding:5px;
      font-size:1em;
      
    }
    .help-block{
      display:block;
      color:red;
      font-size:0.9em;
      
      
    }
    
  }
  
  fieldset{
    border:0;
    padding:0;
  }

  .btn{
    box-sizing:border-box;
    width:100%;
    font-size:1em;
    padding:10px 20px;
 
    border:1px solid gray;
    
    display:inline-block;
    color:white;
    width:auto;
    font-size:1em;
    background:orange;
    border-color:transparent;
    margin:0 !important;
    margin-top:10px !important;
    cursor:pointer;
    &:hover{
      background:rgba(80,80,80,1);
      
    }
    &:btn-primary{
      
    }
  }
}

.donate_grid{
  padding-top:10px;
  .amount, .personalized_amount_container{
    
    margin-right:5px;
    
    
   display:inline-block;
    
    cursor:pointer;
    
    
    margin-bottom:10px;
    padding-right:15px;
    
    .price{
      display:inline-block;
      padding:10px 20px;
       font-weight:bold;
       
      background:$orange;
      color:white;
      
      border:2px solid transparent;
    }
    
    .fiscal{
      display:block;
      font-size:0.8em;
      font-weight:normal;
      
      
    }
    &.active{
      .price, .personalized_amount{
        border:2px solid black;
      }
      
    }
  }
  .personalized_amount{
    display:inline-block;
    width:110px;
    
    padding:10px 15px;
    font-size:1em;
    &.active{
      border:2px solid black;
      
    }
  }
}
.donate_content{
  
  h2{
    font-weight:500;
    line-height:1.2em;
  }
  .voice_img{
    position:relative;
    text-align:justify;
    
    h2{
      
      margin-top:0;
      position:absolute;
      top:5px;
      left:10px;
      right:10px;
      text-align:center;
      font-size:1.25em !important;
    }
    
    img{
      display:block;
    }
    .gradient{
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.5) 100%);
      height: 100px;
      position: absolute;
      bottom: 0;
      left: 0px;
      right: 0px;
    
    
    }
    
    p{
      position:absolute;
      text-align:center;
      color:white;
      bottom:10px;
      left:10px;
      right:10px;
      font-size:1.2em;
      margin:0;
    }
    
  }
  .inner-left{
    h2{
      font-size:1.3em;
      margin-top:0;
    }
    width:45%;
    box-sizing:border-box;
    padding:20px;
    float:left;
    
    
    .inner{
      padding:20px;
      background:$orange;
      color:white;
      
      a{
        display:inline-block;
        margin-top:20px;
        margin-bottom:10px;
        color:white;
        padding:10px 20px;
        border:1px solid white;
      
     
        width:auto;
        font-size:1em;
        background:transparent;
        border-radius:0;
        cursor:pointer;
        &:hover{
          background:rgba(80,80,80,1);
        
        }
      }
    }
    
  }
  .inner-right{
    width:55%;
    box-sizing:border-box;
    padding:20px 30px;
    padding-left:10px;
    float:left;
    
  }
  
  .inner{
    padding:20px;
  }
  .bar{
    max-width:400px;
    text-align:right;
    color:white;
    
  }
  .dark{
    background:rgba(243,243,243,1);
    padding:10px 20px;
    margin-top:10px;
    p{ margin-bottom:5px;}
    h2{
      margin-top:10px;
    }
  }
}


.donate_months{
  padding:20px 0;
  background:rgba(240,240,240,1);
  h2{
    margin:0;
    padding:0;
    padding-left:10px;
    margin-bottom:20px;
  }
  .donate_month{
    float:left;
    width:25%;
    h4{
      font-weight:bold;
      margin-top:0;
      margin-bottom:10px;
      margin:0;
      padding:0;
    }
    img{
      float:left;
      width:120px;
      margin-left:10px;
    }
    p{
      margin:2px 0;
      font-size:0.9em;
    }
    .desc{
      margin-left:140px;
    }
  }
  }

.sponsorship_animal{
  
  img{
    width:290px;
    float:left;
    border-radius:50%;
    margin:30px;
  }
  margin-bottom:20px;
  h3{
    font-weight:bold;
    color:$orange;
  }
  .inner{
    padding:10px;
    margin-left:350px;
  }
  a{
    display:inline-block;
    color:$orange;
    padding:10px 20px;
    border:1px solid $orange;
  }
}

#sponsorship_donate{
  float:right;
  #donate_panel{
    
    .steps{
      border-top:0;
    }
    position:relative;
    background:white;
    border-top:2px solid $orange;
    width:500px;
    padding-left:20px;
    padding-right:20px;
    box-shadow:0 0 0 white;
    &:after{
      content: '';
      position: absolute;
      border: 15px solid transparent;
      top: 40%;
      left: 0;
      
      border-color: transparent;
      border-left-color: $orange;
      
    
    }
  }
  
}
.sponsor_container{
 
}
.sponsorship_animal_show{
  margin-right:500px;
   background:$orange;
  color:white;
  .inner{
    max-width:500px;
    margin:auto;
    padding:20px 10px;
  }
  img{
    border-radius:50%;
    display:block;
    margin:auto;
  }
  text-align:center;
  
}