File: /home/confeduphaar/public_html/wp-content/plugins/ova-framework/assets/css/ova_give_donations.scss
.element_give_donations {
.archive_give_donation {
padding-bottom: 0;
.summary {
width: 100%;
padding-right: 0;
.wrap_summary {
margin: 0 -15px;
@media (max-width: 767px) {
margin: 0;
}
.give_detail {
width: 33.3333%;
margin-bottom: 30px;
&:nth-last-child(-n+3) {
margin-bottom: 0px;
@media (max-width: 767px) {
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
width: 100%;
margin-bottom: 60px;
}
.detail_body {
background-color: #fff;
}
}
}
.wrap_summary.column_2 {
.give_detail {
width: 50%;
@media (max-width: 767px) {
width: 100%;
margin-bottom: 60px;
}
}
}
}
}
}
/***** Archive Give ********/
.archive_give_donation {
display: flex;
flex-wrap: wrap;
padding-bottom: 120px;
@media (max-width: 991.98px) {
padding-bottom: 60px;
}
.summary {
width: 66.6667%;
padding-right: 15px;
@media (max-width: 991.98px) {
width: 100%;
padding-right: 0;
}
.wrap_summary {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
@media (max-width: 991.98px) {
margin: 0;
}
.give_detail {
width: 50%;
padding: 0 15px;
margin-bottom: 30px;
&:hover {
transition: .3s all ease;
.detail_body {
box-shadow: 0 2px 40px rgba(0, 0, 0, 0.15);
}
.image_future {
.thumbnail {
&:after {
opacity: 1;
transition: .3s all ease;
}
img {
transition: .3s all ease;
transform: scale(1.05);
@media (max-width: 767px) {
transform: scale(1);
}
}
}
.media {
.gallery {
transform: translateX(0px);
opacity: 1!important;
transition: .3s all ease;
}
.video {
transform: translateX(0px);
opacity: 1!important;
transition: .3s all ease .1s;
}
}
}
.progress {
.wrap_percentage_1:after, .wrap_percentage_1 .percentage, .wrap_percentage_2:after, .wrap_percentage_2 .percentage {
transition: .3s all ease;
@media (max-width: 767px) {
opacity: 1;
}
}
}
}
@media (max-width: 991.98px) {
width: 50%;
padding: 0 15px;
margin-bottom: 50px;
}
@media (max-width: 767.98px) {
width: 100%;
}
.image_future {
position: relative;
.thumbnail {
overflow: hidden;
&:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
opacity: 0;
transition: .3s all ease;
@media (max-width: 767px) {
opacity: 1;
background-color: transparent;
background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));
}
}
img {
width: 100%;
transition: .3s all ease;
}
}
.media {
position: absolute;
bottom: 20px;
right: 20px;
@media (max-width: 767px) {
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
.gallery, .video {
display: inline-block;
color: #fff;
font-size: 20px;
opacity: 0!important;
transform: translateX(50px);
@media (max-width: 767px) {
opacity: 1!important;
transform: translateX(0);
font-size: 16px;
i {
background-color: #f0c84c;
padding: 10px;
border-radius: 100%;
}
}
}
.gallery {
transition: .3s all ease .1s;
&:hover {
color: #f0c84c;
transition: .3s all ease;
@media (max-width: 767px) {
color: #222222;
transition: .3s all ease;
}
}
@media (max-width: 767px) {
opacity: 1;
transform: translateX(0);
}
}
.video {
margin-left: 15px;
transition: .3s all ease;
&:hover {
color: #f0c84c;
transition: .3s all ease;
@media (max-width: 767px) {
color: #222222;
transition: .3s all ease;
}
}
}
}
.progress {
margin-top: -5px;
height: 10px;
border-radius: 0;
background-color: #e1e1e1;
position: relative;
z-index: 10;
overflow: visible;
.wrap_percentage_1 {
background-color: #fa7f4b;
background-image: linear-gradient(to left, #fac54b, #faa24b, transparent);
position: relative;
border-radius: 0;
&:after {
position: absolute;
content: '';
width: 0;
height: 0;
top: -10px;
right: -10px;
background-color: transparent;
border-top: 10px solid #fa7f4b;
border-right: 10px solid transparent;
transition: .3s all ease;
}
.percentage {
position: absolute;
top: -10px;
right: -10px;
transform: translate(50%, -100%);
z-index: 777;
padding: 0 5px;
background-color: #fa7f4b;
color: #fff;
transition: .3s all ease;
}
}
.wrap_percentage_2 {
background-color: #fa7f4b;
background-image: linear-gradient(to left, #fac54b, #faa24b, transparent);
position: relative;
border-radius: 0;
&:after {
position: absolute;
content: '';
width: 0;
height: 0;
top: -10px;
right: 0;
background-color: transparent;
border-top: 10px solid #fa7f4b;
border-left: 10px solid transparent;
transition: .3s all ease;
}
.percentage {
position: absolute;
top: -10px;
right: 15px;
transform: translate(50%, -100%);
z-index: 777;
padding: 0 5px;
background-color: #fa7f4b;
color: #fff;
transition: .3s all ease;
}
}
}
}
.detail_body {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
transition: .3s all ease;
padding: 15px 25px;
.title {
margin: 10px 0 18px 0;
a {
color: #202b5d;
font-size: 24px;
line-height: 30px;
font-weight: 600;
transition: .3s all ease;
&:hover {
color: #f0c84c;
transition: .3s all ease;
}
}
}
.desc {
margin-bottom: 30px;
color: #62718d;
font-size: 17px;
line-height: 24px;
margin-top: 0;
}
.donate_remaining {
display: flex;
justify-content: baseline;
align-items: center;
padding-bottom: 15px;
.donate {
color: #fff;
font-weight: 600;
font-size: 16px;
line-height: 24px;
transition: .3s all ease;
padding: 10px 20px;
background-color: #222222;
&:hover {
transition: .3s all ease;
background-color: #f0c84c;
}
}
}
.progress{
height: 5px;
overflow: visible;
.wrap_percentage_2{
background-color: #f0c84c;
position: relative;
}
.wrap_percentage_1{
background-color: #f0c84c;
position: relative;
}
.percentage{
background-color: #f0c84c;
color: #fff;
position: absolute;
top: -10px;
right: 0px;
z-index: 777;
padding: 0 10px;
color: #fff;
transition: .3s all ease;
}
}
.raised {
display: flex;
margin-bottom: 20px;
margin-top:30px;
font-size: 17px;
line-height: 24px;
@media(max-width: 1200px){
display: block;
}
>div {
span {
display: block;
}
}
.income {
display: flex;
font-size: 17px;
line-height: 24px;
color: #202b5d;
span:last-child {
color: #62718d;
letter-spacing: 0.2px;
padding: 0px 5px 0 5px;
}
@media(max-width: 1200px){
padding-bottom: 5px;
}
}
.ingo{
font-size: 17px;
line-height: 24px;
color: #202b5d;
padding-right: 5px;
@media(max-width: 1200px){
display: none;
}
}
.goal {
display: flex;
font-size: 17px;
line-height: 24px;
color: #202b5d;
span:last-child {
color: #62718d;
letter-spacing: 0.2px;
padding: 0px 5px 0px 5px;
}
}
}
}
}
}
.pagination_archive_give {
margin: 0px 0px 90px 0px;
padding-top: 40px;
.blog_pagination {
ul.pagination {
@media (max-width: 767px) {
justify-content: center;
}
li {
a {
font-size: 16px;
line-height: 24px;
color: #333333;
background-color: rgba(0,0,0,0.1);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
width: 50px;
height: 50px;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0px;
transition: 0.5s;
&:hover {
color: #fff;
background-color: #fa7f4b;
}
}
.pagi_dots {
color: #333333;
background-color: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0px;
transition: 0.5s;
margin-right: 10px;
}
&.active {
a {
color: #fff;
background-color: #fa7f4b;
}
}
}
}
}
}
}
.sidebar {
width: 33.3333%;
padding-left: 15px;
position: sticky;
position: -webkit-sticky;
top: 130px;
bottom: 550px;
height: 580px;
@media (max-width: 991.98px) {
width: 100%;
padding-left: 0;
position: relative;
height: auto;
top: 0;
bottom: 0;
}
.give-sidebar {
width: 100%!important;
padding-left: 50px;
@media (max-width: 991.98px) {
padding-left: 20px;
padding-right: 20px;
}
.widget-title {
margin-top: 0;
padding-bottom: 25px;
border-bottom: 1px solid #e5e5e5;
}
}
}
&.type_2 {
padding-bottom: 0;
.summary {
width: 100%;
.wrap_summary .give_detail {
width: 33.3333%;
@media (max-width: 991.98px) {
width: 50%;
}
@media (max-width: 767.98px) {
width: 100%;
}
}
}
.sidebar {
display: none;
}
}
&.type_5 {
padding-bottom: 0;
.summary {
width: 100%;
.wrap_summary .give_detail {
width: 33.3333%;
@media (max-width: 991.98px) {
width: 50%;
}
@media (max-width: 767.98px) {
width: 100%;
}
}
}
.sidebar {
display: none;
}
}
&.type_3 {
padding-bottom: 0;
.summary {
width: 100%;
.wrap_summary .give_detail {
width: 25%;
@media (max-width: 1200px) {
width: 33.3333%;
}
@media (max-width: 991.98px) {
width: 50%;
}
@media (max-width: 767.98px) {
width: 100%;
}
.raised{
display: block;
.income{
padding-bottom: 5px;
}
.ingo{
display: none;
}
}
}
}
.sidebar {
display: none;
}
}
&.type_4 {
padding-bottom: 0;
.summary {
width: 100%;
.wrap_summary .give_detail {
width: 100%;
}
}
}
}
/***** End Archive Give ********/
/***** Fix Form Donation Give ********/
.give-form {
.give-submit {
height: auto;
padding: 5px 20px;
transition: .3s all ease;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
&:hover {
transition: .3s all ease;
color: #fff;
background-color: #343434!important;
border-color: #343434!important;
}
}
#give-gateway-radio-list {
display: flex;
li {
display: flex!important;
align-items: center;
&:first-child {
margin-right: 20px;
}
}
}
}
/***** End Fix Form Donation Give ********/
/***** Fix PrettyPhoto Give ********/
.pp_pic_holder {
.ppt {
display: none!important;
}
}
/***** End Fix PrettyPhoto Give ********/
/*FIX DONATE HOME 9*/
.donate_home9{
.give_error{
display: none;
}
[id*=give-form] .give-form-title{
display: none;
}
.give-goal-progress{
display: none;
}
[id*=give-form] div.give-form-content-wrap{
display: none;
}
.give-donation-amount{
display: none;
}
.give-btn-level-custom{
display: none;
}
.give-btn-level-0{
display: none;
}
#give-donation-level-button-wrap>li{
margin: 0 10px 10px 0;
}
.give-donation-level-btn{
background-color: #ffff;
color: #222222;
padding: 15px 29px;
transition: 0.3s;
font-weight: 700;
&:hover,&:focus,&:active{
background-color:#222222;
border-color: #222222;
color: #ffff;
};
}
.give-btn-modal{
width: 100%;
text-align: center;
font-size: 20px;
height: 50px;
font-weight: 700;
color: #ffffff;
background-color: #f0c84c;
border: none;
outline: none;
&:hover{
background-color:#222222;
transition: 0.3s ease;
};
}
.give-default-level{
background-color: #222222;
transition: 0.3s;
border-color: #222222;
color: #ffff;
}
#give-donation-level-button-wrap{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
}