@extends('frontpartials.main')
<!-- page title -->
@section('title')
Donation
@endsection

@section('content')
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">





<style>
input[type=checkbox] {
    zoom: 1.4;
}

* {
    margin: 0;
    padding: 0;
}

.header-img1 {
    height: 80px;
    width: 130px;
}

label {
    width: 100%;
    font-size: 1rem;
}

.card-input-element+.card {
    height: calc(20px);
    color: #29aae3;

    -webkit-box-shadow: none;
    box-shadow: none;
    border: 2px solid #29aae3;
    border-radius: 4px;
}

.card-input-element+.card:hover {
    cursor: pointer;
}

.card-input-element:checked+.card {
    border: 2px solid #0089E3;
    color: white;

    -webkit-transition: border .3s;
    -o-transition: border .3s;
    transition: border .3s;
}

.card-input-element:checked+.card::after {
    content: '\e5ca';
    color: white;
    font-family: 'Material Icons';
    font-size: 24px;

    -webkit-animation-name: fadeInCheckbox;
    animation-name: fadeInCheckbox;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-info1: {
    color: #29aae3;
}


.regular-checkbox {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

.regular-checkbox:active,
.regular-checkbox:checked:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.regular-checkbox:checked {
    background-color: #e9ecee;
    border: 1px solid #adb8c0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
    color: #99a1a7;
}

.regular-checkbox:checked:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #99a1a7;
}


@-webkit-keyframes fadeInCheckbox {
    from {
        opacity: 0;
        -webkit-transform: rotateZ(-20deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateZ(0deg);
    }
}

@keyframes fadeInCheckbox {
    from {
        opacity: 0;
        transform: rotateZ(-20deg);
    }

    to {
        opacity: 1;
        transform: rotateZ(0deg);
    }
}

.main-img-user {
    height: 150px !important;
    width: 150px !important;
}

.card-body1 {
    background: #ecf0fa;
}

input {
    font-family: monospace;
}

label {
    display: block;
}

div {
    margin: 0 0 1rem 0;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>




<div class="row">