File: //home/globfdxw/www/wp-content/plugins/bearsthemes-addons/assets/css/_give-total.scss
.elementor-give-totals {
&--default {
}
&--skin-pumori {
display: flex;
background: #FFFFFF;
-webkit-box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
.elementor-gt-header {
width: 38%;
background: #002866;
padding: 60px 55px;
&__title {
font-size: 36px;
line-height: 1.25;
color: #FFFFFF;
margin-bottom: 12px;
}
&__desc {
font-size: 16px;
line-height: 1.75;
color: #FFFFFF;
margin-bottom: 24px;
}
.give-goal-progress {
font-size: 16px;
line-height: 1.25;
color: #FFFFFF;
margin-bottom: 0;
.raised {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
.raised-income, .raised-goal {
display: flex;
flex-direction: column-reverse;
text-align: left;
}
.raised-goal {
text-align: right;
}
.income, .goal-text {
font-size: 26px;
font-weight: 700;
line-height: 1.25;
color: #FFEE00;
margin-top: 4px;
}
}
}
}
.elementor-gt-form {
width: 62%;
text-align: left;
padding: 60px 50px;
&__text {
padding-right: 180px;
}
&__sub-title {
font-size: 16px;
line-height: 1.25;
font-weight: 500;
color: #002866;
margin-bottom: 4px;
}
&__title {
font-size: 30px;
line-height: 1.25;
color: #002866;
margin-bottom: 8px;
}
&__desc {
font-size: 16px;
line-height: 1.75;
color: #4D6995;
margin-bottom: 32px
}
form[id*=give-form] {
position: relative;
margin-bottom: 0;
.give-total-wrap {
position: absolute;
top: -120px;
right: 0;
width: 162px;
.give-currency-symbol {
font-size: 24px;
font-weight: 600;
background: #002866;
}
#give-amount {
font-size: 24px;
font-weight: 600;
color: #002866;
}
}
#give-donation-level-button-wrap {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
.give-btn {
font-size: 16px;
font-weight: 600;
color: #002866;
background: #FFEE00;
border-color: #FFEE00;
&.give-default-level {
color: #FFFFFF;
background: #002866;
border-color: #002866;
}
}
}
.give-btn-modal {
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
color: #FFFFFF;
background: #002866;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
color: #002866;
background: #FFEE00;
}
}
}
}
@media( max-width: $break-md - 0.02 ) {
flex-direction: column;
.elementor-gt-header,
.elementor-gt-form {
width: 100%;
}
}
@media( max-width: $break-sm - 0.02 ) {
.elementor-gt-form {
&__text {
padding-right: 0;
}
form[id*=give-form] .give-total-wrap {
position: static;
width: 100%;
}
}
}
@media( max-width: $break-xs - 0.02 ) {
.elementor-gt-header {
padding: 30px 16px;
&__title {
font-size: 32px;
}
&__desc {
font-size: 16px;
line-height: 1.5;
}
.give-goal-progress {
font-size: 16px;
.raised {
margin-bottom: 12px;
.income, .goal-text {
font-size: 22px;
}
}
}
}
.elementor-gt-form {
padding: 30px 16px;
&__sub-title {
font-size: 16px;
}
&__title {
font-size: 24px;
}
&__desc {
font-size: 14px;
line-height: 1.5;
}
form[id*=give-form] .give-btn-modal {
font-size: 16px;
}
}
}
}
&--skin-baruntse {
max-width: 460px;
background: #FFFFFF;
-webkit-box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
.elementor-gt-header {
position: relative;
background: #004A99;
padding: 60px 50px;
&__title {
font-size: 36px;
line-height: 1.25;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 32px;
}
.give-goal-progress {
font-size: 18px;
font-weight: 500;
line-height: 1.25;
color: #FFFFFF;
margin-bottom: 0;
.raised {
display: flex;
justify-content: space-between;
margin-bottom: 37px;
.raised-income, .raised-goal {
display: flex;
flex-direction: column-reverse;
width: 50%;
text-align: left;
}
.raised-goal {
text-align: right;
border-left: 1px solid #FFFFFF;
}
.income, .goal-text {
font-size: 30px;
font-weight: 700;
line-height: 1.25;
color: #FFEE00;
margin-top: 4px;
}
}
.give-progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 37px;
border-radius: 0;
}
svg {
position: absolute;
bottom: 0;
left: 0;
}
}
}
.elementor-gt-form {
padding: 60px 50px;
&__sub-title {
font-size: 18px;
line-height: 1.25;
font-weight: 500;
color: #002866;
margin-bottom: 4px;
}
&__title {
font-size: 30px;
line-height: 1.25;
color: #002866;
margin-bottom: 8px;
}
&__desc {
font-size: 18px;
line-height: 1.75;
color: #002866;
margin-bottom: 32px
}
form[id*=give-form] {
position: relative;
margin-bottom: 0;
.give-total-wrap {
.give-currency-symbol {
font-size: 24px;
font-weight: 700;
background: #002866;
}
#give-amount {
font-size: 24px;
font-weight: 700;
color: #002866;
}
}
#give-donation-level-button-wrap {
grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
.give-btn {
font-size: 16px;
font-weight: 700;
color: #002866;
background: #FFEE00;
border-color: #FFEE00;
&.give-default-level {
color: #FFFFFF;
background: #002866;
border-color: #002866;
}
}
}
.give-btn-modal {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
color: #FFFFFF;
background: #002866;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
color: #002866;
background: #FFEE00;
}
}
}
}
@media( max-width: $break-xs - 0.02 ) {
.elementor-gt-header {
padding: 30px 16px;
&__title {
font-size: 32px;
}
&__desc {
font-size: 16px;
line-height: 1.5;
}
.give-goal-progress {
font-size: 16px;
.raised {
margin-bottom: 37px;
.income, .goal-text {
font-size: 22px;
}
}
}
}
.elementor-gt-form {
padding: 30px 16px;
&__sub-title {
font-size: 16px;
}
&__title {
font-size: 24px;
}
&__desc {
font-size: 14px;
line-height: 1.5;
}
form[id*=give-form] .give-btn-modal {
font-size: 16px;
}
}
}
}
&--skin-coropuna {
max-width: 470px;
background: #4E3629;
padding: 50px 60px 35px;
overflow: hidden;
.elementor-gt-header {
margin-bottom: 40px;
&__sub-title {
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
margin-bottom: 4px;
}
&__title {
font-size: 48px;
line-height: 1.25;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 8px;
}
&__desc {
font-size: 18px;
line-height: 1.75;
color: #FFFFFF;
margin-bottom: 35px;
}
.give-goal-progress {
font-size: 14px;
font-weight: 400;
line-height: 1.25;
text-transform: uppercase;
color: #BFCC80;
margin: 0;
.raised {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
.raised-income, .raised-goal {
display: flex;
flex-direction: column-reverse;
text-align: left;
}
.raised-goal {
text-align: right;
}
.income, .goal-text {
font-size: 24px;
font-weight: 500;
line-height: 1.25;
color: #BFCC80;
margin-top: 4px;
}
}
}
}
.elementor-gt-form {
margin-bottom: 35px;
form[id*=give-form] {
position: relative;
margin-bottom: 0;
.give-total-wrap {
.give-currency-symbol {
font-size: 24px;
font-weight: 500;
background: #BFCC80;
}
#give-amount {
font-size: 24px;
font-weight: 500;
color: #BFCC80;
}
}
#give-donation-level-button-wrap {
grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
.give-btn {
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
background: #BFCC80;
border-color: #BFCC80;
&.give-default-level {
color: #FFFFFF;
background: #215732;
border-color: #215732;
}
}
}
.give-btn-modal {
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
color: #FFFFFF;
background: #215732;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
background: #BFCC80;
}
}
}
}
.elementor-gt-socials {
display: flex;
align-items: center;
justify-content: space-between;
&__title {
font-size: 18px;
font-weight: 500;
line-height: 1.25;
color: #FFFFFF;
margin: 0;
}
&__list {
a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
color: #FFFFFF;
background: #215732;
&:not(:last-child) {
margin-right: 4px;
}
svg {
fill: #FFFFFF;
}
&:hover {
background: #BFCC80;
svg {
fill: #4E3629;
}
}
}
}
}
@media( max-width: $break-md - 0.02 ) {
max-width: 420px;
padding: 40px 30px 35px;
}
@media( max-width: $break-xs - 0.02 ) {
padding: 40px 16px 35px;
}
}
&--skin-saltoro {
max-width: 370px;
background: #4b3381;;
padding: 40px;
overflow: hidden;
border-radius: 5px;
.elementor-gt-header {
margin-bottom: 30px;
&__sub-title {
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
margin-bottom: 4px;
}
&__title {
font-size: 36px;
line-height: 1.25;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 8px;
}
&__desc {
font-size: 18px;
line-height: 1.75;
color: #FFFFFF;
margin-bottom: 30px;
}
.give-goal-progress {
display: flex;
flex-direction: column-reverse;
font-size: 14px;
font-weight: 400;
line-height: 1.25;
text-transform: uppercase;
color: #FFFFFF;
margin: 0;
.raised {
display: flex;
justify-content: space-between;
margin-top: 20px;
margin-bottom: 0;
.raised-income, .raised-goal {
display: flex;
flex-direction: column-reverse;
text-align: left;
}
.raised-goal {
text-align: right;
}
.income, .goal-text {
font-size: 24px;
font-weight: 700;
line-height: 1.25;
color: #FFFFFF;
margin-top: 4px;
}
}
}
}
.elementor-gt-form {
form[id*=give-form] {
position: relative;
margin-bottom: 0;
.give-total-wrap {
.give-currency-symbol {
font-size: 24px;
font-weight: 700;
background: #f97a60;
}
#give-amount {
font-size: 24px;
font-weight: 700;
color: #f97a60;
}
}
#give-donation-level-button-wrap {
grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
.give-btn {
font-size: 14px;
font-weight: 700;
color: #f97a60;
background: #FFFFFF;
border-color: #FFFFFF;
&.give-default-level {
color: #FFFFFF;
background: #f97a60;
border-color: #f97a60;
}
}
}
.give-btn-modal {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: #FFFFFF;
background: #f97a60;
border-radius: 30px;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
color: #FFFFFF;
background: #f7544f;
}
}
}
}
}
&--skin-changla {
.elementor-gt-header {
margin-bottom: 40px;
&__title {
font-size: 40px;
font-weight: 700;
line-height: 1.25;
color: #333333;
margin-bottom: 8px;
}
&__desc {
font-size: 17px;
font-weight: 400;
line-height: 1.75;
color: #666666;
margin-bottom: 40px;
}
.give-goal-progress {
display: flex;
flex-direction: column-reverse;
font-size: 18px;
font-weight: 400;
line-height: 1.25;
color: #333333;
margin: 0;
.raised {
display: flex;
justify-content: space-between;
margin-top: 20px;
margin-bottom: 0;
.raised-income, .raised-goal {
display: flex;
align-items: center;
flex-direction: row-reverse;
text-align: left;
}
.raised-goal {
text-align: right;
}
.income, .goal-text {
font-size: 24px;
font-weight: 700;
line-height: 1.25;
color: #1f3ddc;
margin-left: 4px;
}
}
}
}
.elementor-gt-form {
.givewp-donation-form-modal__open,
.give-btn-modal {
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 20px;
text-transform: uppercase;
color: #1f3ddc;
background: #FFFFFF;
width: auto;
margin: 0;
padding: 18px 35px;
border: 2px solid #1f3ddc;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
color: #FFFFFF;
background: #1f3ddc;
}
}
.givewp-donation-form-modal__open {
color: #1f3ddc !important;
padding: 18px 35px !important;
&:hover {
color: #FFFFFF !important;
}
}
}
}
&--skin-galloway {
position: relative;
overflow: hidden;
max-width: 420px;
background-color: #424242;
padding: 50px 30px;
border-radius: 4px;
.elementor-gt-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(#000000, 0.63);
z-index: 1;
}
.elementor-gt-header {
position: relative;
z-index: 3;
margin-bottom: 40px;
&__title {
font-size: 36px;
font-weight: 700;
line-height: 1.25;
color: #ffba00;
margin-bottom: 8px;
}
&__desc {
font-size: 16px;
font-weight: 400;
line-height: 1.75;
color: #FFFFFF;
margin-bottom: 40px;
}
.give-goal-progress {
display: flex;
flex-direction: column-reverse;
font-size: 16px;
font-weight: 400;
line-height: 1.25;
color: #FFFFFF;
margin: 0;
.raised {
margin-top: 20px;
margin-bottom: 0;
.raised-goal {
text-align: right;
}
.income, .goal-text {
font-size: 22px;
font-weight: 700;
line-height: 1.25;
color: #ffba00;
margin-left: 4px;
}
}
}
}
.elementor-gt-form {
position: relative;
z-index: 3;
.givewp-donation-form-modal__open,
.give-btn-modal {
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 20px;
text-transform: uppercase;
color: #FFFFFF;
background: #ffba00;
width: auto;
margin: 0;
padding: 20px 35px;
border-radius: 5px;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
color: #FFFFFF;
background: #eba53a;
}
}
.givewp-donation-form-modal__open {
color: #fff !important;
padding: 20px 35px !important;
&:hover {
color: #fff !important;
}
}
}
@media( max-width: $break-xs - 0.02 ) {
padding: 24px 16px;
}
}
&--skin-taboche {
display: flex;
align-items: center;
justify-content: space-between;
.elementor-gt-header {
&__title {
font-size: 50px;
line-height: 1.25;
color: #f7db07;
margin-bottom: 8px;
}
&__desc {
font-size: 30px;
line-height: 1.3;
color: #222;
}
&__sub-title{
font-size: 24px;
color: #222222;
line-height: 24px;
margin-bottom: 10px;
}
}
.goal-progress{
display: flex;
align-items: center;
justify-content: space-between;
max-width: 530px;
.give-card__progress{
display: flex;
align-items: center;
.give-goal-progress {
font-size: 18px;
font-weight: 400;
width: 150px;
line-height: 1.25;
color: #333333;
margin-right: 40px;
margin-bottom: 0;
}
.raised {
margin-bottom: 0;
margin-right: 50px;
.raised-income{
margin-bottom: 20px;
}
.raised-income, .raised-goal {
text-align: left;
display: block;
font-size: 16px;
line-height: 20px;
}
.income, .goal-text {
font-size: 24px;
color: #8e8e8e;
line-height: 30px;
text-align: left;
display: block;
}
}
}
}
.gt-remain{
.item-remain{
margin-bottom: 20px;
text-align: left;
h4.gt-remain__remain-title {
margin-bottom: 0;
font-size: 16px;
line-height: 20px;
color: #555;
font-weight: 400;
}
span.gt-remain__remain-value{
font-size: 24px;
color: #8e8e8e;
line-height: 30px;
}
}
.item-donate{
text-align: left;
h4.gt-remain__donate-title {
margin-bottom: 0;
font-size: 16px;
line-height: 20px;
color: #555;
font-weight: 400;
}
span.gt-remain__donate-value{
font-size: 24px;
color: #8e8e8e;
line-height: 30px;
}
}
}
.elementor-gt-form {
.givewp-donation-form-modal__open,
.give-btn-modal {
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 20px;
text-transform: uppercase;
color: #fff;
background: #000;
width: auto;
margin: 0;
padding: 15px 35px;
border-radius: 5px;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
color: #fff;
background: #f7db07;
}
}
.givewp-donation-form-modal__open {
color: #fff !important;
padding: 15px 35px !important;
&:hover {
color: #fff !important;
}
}
}
@media( max-width: $break-md - 0.02 ) {
display: block;
text-align: center;
.goal-progress{
margin: 20px auto;
}
}
@media( max-width: $break-sm - 0.02 ) {
.goal-progress{
margin: 30px auto;
justify-content: center;
.give-card__progress{
.give-goal-progress {
font-size: 16px;
width: 70px;
margin-right: 15px;
}
.raised {
margin-bottom: 0;
margin-right: 30px;
.raised-income{
margin-bottom: 10px;
}
.raised-income, .raised-goal {
text-align: left;
display: block;
font-size: 13px;
line-height: 20px;
}
.income, .goal-text {
font-size: 16px;
line-height: 22px;
}
}
}
.gt-remain{
.item-remain{
margin-bottom: 10px;
h4.gt-remain__remain-title {
font-size: 13px;
}
span.gt-remain__remain-value{
font-size: 16px;
line-height: 22px;
}
}
.item-donate{
h4.gt-remain__donate-title {
font-size: 13px;
}
span.gt-remain__donate-value{
font-size: 16px;
line-height: 22px;
}
}
}
}
}
}
&--skin-wilson {
.elementor-gt-header{
&__title {
font-size: 24px;
line-height: 34px;
position: relative;
color: #fff;
padding: 0;
margin-bottom: 30px;
font-weight: 400;
}
.give-goal-progress{
.bt-price{
.bt-goal{
font-size: 40px;
font-weight: 800;
line-height: 55px;
color: #fff;
}
.bt-collected{
font-size: 15px;
line-height: 26px;
color: #f1f1f1;
margin-bottom: 15px;
}
}
.bt-progress{
position: relative;
width: 100%;
height: 23px;
background: #a08958;
border: 2px solid #ffffff;
span{
float: left;
display: inline-block;
width: 10%;
height: 19px;
border-right: 2px solid #a08958;
position: relative;
z-index: 3;
}
.bt-percent{
position: absolute;
top: 0;
left: 0;
height: 19px;
color: #ffffff;
background: rgba(#ffffff, 0.5);
z-index: 1;
}
}
}
}
.elementor-gt-form {
.givewp-donation-form-modal__open,
.give-btn-modal {
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 20px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background: #000;
padding: 18px 35px;
-webkit-border-radius: 0;
border-radius: 0;
width: 180px;
&:hover {
color: #a08958;
background: #fff;
}
}
.givewp-donation-form-modal__open {
padding: 18px 35px !important;
&:hover {
color: #a08958 !important;
}
}
}
}
&--skin-jorasses {
background: #ea0028;
padding: 60px 40px;
@media( max-width: $break-xs - 0.02 ) {
padding: 24px 16px;
}
.elementor-gt-header {
margin-bottom: 40px;
&__icon {
color: #FFFFFF;
opacity: 0.5;
margin-bottom: 15px;
svg {
fill: currentColor;
}
}
&__title {
font-size: 36px;
font-weight: 700;
line-height: 1.25;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 12px;
}
&__desc {
font-size: 16px;
font-weight: 400;
line-height: 1.75;
color: #FFFFFF;
margin-bottom: 40px;
}
.give-goal-progress {
display: flex;
flex-direction: column-reverse;
font-size: 18px;
font-weight: 400;
line-height: 1.25;
color: #FFFFFF;
margin: 0;
.raised {
display: flex;
justify-content: space-between;
margin-top: 20px;
margin-bottom: 0;
.raised-income, .raised-goal {
display: flex;
align-items: center;
flex-direction: row-reverse;
text-align: left;
}
.raised-goal {
text-align: right;
}
.income, .goal-text {
font-size: 24px;
font-weight: 700;
line-height: 1.25;
color: #FFFFFF;
margin-left: 4px;
}
}
}
}
.elementor-gt-form {
.givewp-donation-form-modal__open,
.give-btn-modal {
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
background: transparent;
width: 100%;
margin: 0;
padding: 15px 30px;
border: 2px solid #FFFFFF;
border-radius: 2px;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
color: #ea0028;
background: #FFFFFF;
}
}
.givewp-donation-form-modal__open {
padding: 15px 30px !important;
&:hover {
color: #ea0028 !important;
}
}
}
}
&--skin-swiss {
max-width: 576px;
background: #FAF8ED;
padding: 50px 40px;
overflow: hidden;
border-radius: 40px;
.elementor-gt-header {
margin-bottom: 50px;
.give-goal-progress {
font-size: 16px;
line-height: 1.25;
color: #111111;
margin-bottom: 0;
.raised {
margin-bottom: 16px;
.income {
font-size: 20px;
font-weight: 700;
line-height: 1.25;
color: #4D5EF6;
margin-top: 4px;
}
.goal-text {
font-size: 16px;
font-weight: 400;
line-height: 1.25;
color: #111111;
}
}
}
.give-totals-message {
font-size: 16px;
font-weight: 400;
line-height: 1.5em;
color: #111111;
margin-top: 10px;
}
}
.elementor-gt-form {
margin-bottom: 30px;
form[id*=give-form] {
position: relative;
margin-bottom: 0;
.give-total-wrap {
.give-currency-symbol {
font-size: 20px;
font-weight: 700;
color: #FFFFFF;
background: #111111;
border-radius: 100px 0 0 100px;
}
#give-amount {
font-size: 20px;
font-weight: 700;
color: #111111;
border-radius: 0 100px 100px 0;
}
}
#give-donation-level-button-wrap {
grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
.give-btn {
font-size: 14px;
font-weight: 700;
color: #111111;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 100px;
&.give-default-level {
color: #FFFFFF;
background: #111111;
border-color: #111111;
}
}
}
.give-btn-modal {
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
background: #111111;
border-radius: 100px;
-webkit-transition: all .3s;
transition: all .3s;
}
}
}
.elementor-gt-bottom {
&__text {
font-size: 16px;
line-height: 1.5;
color: #111111;
a {
display: inline-block;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
color: #4D5EF6;
}
}
}
@media( max-width: $break-md - 0.02 ) {
padding: 40px 30px;
}
@media( max-width: $break-xs - 0.02 ) {
padding: 30px 16px;
}
}
&--skin-toluca {
background: #DD3B32;
padding: 30px;
border-radius: 20px;
.elementor-gt-header {
color: #FFFFFF;
text-align: center;
&__title {
font-size: 28px;
font-weight: 600;
line-height: 1.4;
color: #FFFFFF;
margin-bottom: 20px;
span {
font-family: "Edu NSW ACT Foundation", Sans-serif;
font-weight: 400;
}
}
}
.elementor-gt-form {
background: rgba(0, 0, 0, 0.25);
padding: 30px;
border-radius: 20px;
.give-totals-shortcode-wrap {
margin-bottom: 30px;
}
.give-goal-progress {
color: #FFFFFF;
.income,
.goal-text {
color: #FFFFFF;
}
}
form.give-form {
margin: 0;
}
}
@media(max-width: $break-xs - 0.02) {
padding: 30px 20px;
.elementor-gt-form {
padding: 30px 20px;
}
}
}
}
.elementor-give-form {
&--default {
}
&--skin-andrus {
display: flex;
background: #FFFFFF;
padding: 40px;
border: 10px solid #e1e1e1;
border-radius: 15px;
.elementor-gf-header {
width: 28%;
&__title {
font-size: 34px;
font-weight: 800;
line-height: 1.25;
text-transform: uppercase;
color: #333333;
margin-bottom: 8px;
}
&__desc {
font-size: 18px;
font-weight: 400;
line-height: 1.75;
color: #555555;
}
}
.elementor-gf-form {
width: 72%;
padding-left: 30px;
form.give-form,
form[id*=give-form] {
position: relative;
margin: 0;
.give-total-wrap {
position: absolute;
bottom: 0;
left: 0;
width: calc(50% - 7.5px);
margin-bottom: 0;
.give-donation-amount {
margin-bottom: 0;
}
.give-currency-symbol {
font-weight: 800;
background: #fed700;
}
#give-amount {
font-weight: 800;
color: #333333;
background: #efefef;
border-color: #efefef;
}
}
#give-donation-level-button-wrap {
grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
.give-btn {
position: relative;
width: calc(100% - 10px);
font-size: 14px;
font-weight: 800;
color: #333333;
background: #efefef;
overflow: unset;
border-color: #efefef;
&:hover {
color: #fed700;
border-color: #efefef;
}
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 100%;
background: #fed700;
}
&:after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 15px;
height: 15px;
background: #efefef;
margin: -7px -7px 0 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .3s;
transition: all .3s;
}
&.give-default-level {
background: #fed700;
border-color: #fed700;
&:after {
background: #fed700;
}
&:hover {
color: #333333;
}
}
}
}
.give-btn-modal {
width: calc(50% - 7.5px);
font-size: 14px;
font-weight: 800;
line-height: 20px;
letter-spacing: 0;
text-transform: uppercase;
color: #333333;
background: #fed700;
margin: 0 0 0 calc(50% + 7.5px);
padding: 15px 30px;
outline: none;
border-radius: 2px;
&:hover {
color: #333333;
background: #F1CD08;
}
}
}
}
@media( max-width: $break-lg - 0.02 ) {
padding: 32px 16px;
.elementor-gf-header {
width: 30%;
&__title {
font-size: 30px;
}
&__desc {
font-size: 16px;
}
}
.elementor-gf-form {
width: 70%;
}
}
@media( max-width: $break-md - 0.02 ) {
flex-direction: column;
.elementor-gf-header {
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.elementor-gf-form {
width: 100%;
padding: 0;
form[id*=give-form] {
.give-total-wrap {
position: static;
width: auto;
margin-bottom: 30px;
}
.give-btn {
width: 100%;
margin: 0;
}
}
}
}
}
&--skin-changtse {
background: #FFFFFF;
padding: 40px;
border: 10px solid #e1e1e1;
border-radius: 15px;
max-width: 400px;
.elementor-gf-header {
width: 100%;
margin-bottom: 30px;
&__title {
font-size: 33px;
line-height: 1.25;
text-transform: uppercase;
margin-bottom: 8px;
}
&__desc {
font-size: 15px;
line-height: 1.75;
}
}
.elementor-gf-form {
width: 100%;
form.give-form,
form[id*=give-form] {
position: relative;
margin: 0;
.give-total-wrap {
position: static;
width: auto;
margin-bottom: 15px;
bottom: 0;
left: 0;
.give-donation-amount {
margin-bottom: 0;
}
.give-currency-symbol {
font-weight: 800;
background: #e05d41;
height: 48px;
line-height: 48px;
}
#give-amount {
font-weight: 800;
color: #333333;
background: #efefef;
border-color: #efefef;
height: 48px;
line-height: 48px;
font-size: 17px;
}
}
#give-donation-level-button-wrap {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
.give-btn {
position: relative;
width: 100%;
font-size: 14px;
font-weight: 800;
color: #333333;
background: #efefef;
overflow: unset;
border-color: #efefef;
padding: 10px;
height: 48px;
&:hover {
color: #e05d41;
border-color: #efefef;
}
&.give-default-level {
background: #e05d41;
border-color: #e05d41;
color: #fff;
&:after {
background: #e05d41;
}
}
}
}
.give-btn {
width: 100%;
font-size: 14px;
font-weight: 800;
line-height: 18px;
letter-spacing: 0;
text-transform: uppercase;
color: #FFFFFF;
background: #e05d41;
margin: 0;
padding: 20px 30px;
outline: none;
border-radius: 2px;
&:hover {
background: #667A62;
}
}
}
}
@media( max-width: $break-lg - 0.02 ) {
padding: 32px 16px;
.elementor-gf-header {
width: 100%;
&__title {
font-size: 30px;
}
&__desc {
font-size: 16px;
}
}
.elementor-gf-form {
width: 100%;
}
}
@media( max-width: $break-md - 0.02 ) {
flex-direction: column;
.elementor-gf-header {
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.elementor-gf-form {
width: 100%;
padding: 0;
form[id*=give-form] {
.give-total-wrap {
position: static;
width: auto;
margin-bottom: 30px;
}
.give-btn {
width: 100%;
margin: 0;
}
}
}
}
}
&--skin-tronador {
background: #4B915A;
padding: 40px;
border-radius: 5px;
.elementor-gf-header {
width: 100%;
margin-bottom: 30px;
&__title {
font-size: 30px;
line-height: 40px;
letter-spacing: -0.025em;
text-transform: uppercase;
margin-bottom: 8px;
color: #fff;
}
&__desc {
font-size: 18px;
line-height: 25px;
color: #fff;
}
}
.elementor-gf-form {
width: 100%;
form.give-form,
form[id*=give-form] {
position: relative;
margin: 0;
.give-total-wrap {
position: static;
width: auto;
margin-bottom: 15px;
bottom: 0;
left: 0;
.give-donation-amount {
margin-bottom: 0;
}
.give-currency-symbol {
font-weight: 700;
background: #000;
height: 54px;
line-height: 54px;
font-size: 20px;
width: 60px;
text-align: center;
border-radius: 30px 0 0 30px;
}
#give-amount {
font-weight: 700;
color: #222222;
background: #fff;
border-color: #fff;
height: 54px;
line-height: 54px;
font-size: 20px;
border-radius: 0px 30px 30px 0px;
}
}
#give-donation-level-button-wrap {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
.give-btn {
position: relative;
width: 100%;
font-size: 16px;
font-weight: 700;
color: #222222;
background: #fff;
overflow: unset;
border-color: #fff;
padding: 10px;
height: 54px;
border-radius: 30px;
&:hover {
color: #fff;
background: #000;
border-color: #000;
}
&.give-default-level {
background: #000;
border-color: #000;
color: #fff;
&:after {
background: #000;
}
}
&.give-btn-level-custom {
font-size: 14px;
}
}
}
.give-btn-modal {
width: 100%;
font-size: 14px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0;
text-transform: uppercase;
background: #000000;
border-radius: 30px;
margin: 0;
padding: 15px 30px;
outline: none;
}
}
}
@media( max-width: $break-lg - 0.02 ) {
padding: 32px 16px;
.elementor-gf-header {
width: 100%;
&__title {
font-size: 30px;
}
&__desc {
font-size: 16px;
}
}
.elementor-gf-form {
width: 100%;
}
}
@media( max-width: $break-md - 0.02 ) {
flex-direction: column;
.elementor-gf-header {
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.elementor-gf-form {
width: 100%;
padding: 0;
form[id*=give-form] {
.give-total-wrap {
position: static;
width: auto;
margin-bottom: 30px;
}
.give-btn {
width: 100%;
margin: 0;
}
}
}
}
}
&--skin-yutmaru {
display: flex;
background-color: #F4B03E;
padding: 40px;
border-radius: 30px;
-webkit-box-shadow: 0px 20px 50px rgba(#F4B03E, 0.15);
box-shadow: 0px 20px 50px rgba(#F4B03E, 0.15);
.elementor-gf-header {
width: 28%;
&__title {
font-size: 34px;
font-weight: 700;
line-height: 1.29;
text-transform: uppercase;
color: #151515;
margin-bottom: 8px;
}
&__desc {
font-size: 18px;
font-weight: 400;
line-height: 1.67;
color: #151515;
}
}
.elementor-gf-form {
width: 72%;
padding-left: 30px;
form.give-form,
form[id*=give-form] {
position: relative;
margin: 0;
.give-total-wrap {
position: absolute;
bottom: 0;
left: 0;
width: calc(50% - 10px);
margin-bottom: 0;
.give-donation-amount {
margin-bottom: 0;
}
.give-currency-symbol {
font-size: 18px;
font-weight: 700;
background: #151515;
height: 54px;
line-height: 54px;
border-radius: 25px 0 0 25px
}
#give-amount {
font-size: 18px;
font-weight: 700;
color: #151515;
background: transparent;
height: 54px;
line-height: 54px;
padding: 0 12px 0 16px;
border: 2px solid;
border-radius: 0 25px 25px 0;
}
}
#give-donation-level-button-wrap {
grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
grid-gap: 20px;
margin-bottom: 20px;
.give-btn {
position: relative;
width: 100%;
font-size: 18px;
font-weight: 700;
line-height: 1.67;
color: #151515;
background: transparent;
overflow: unset;
padding: 10px;
border: 2px solid #FFFFFF;
border-radius: 25px;
&.give-btn-level-custom {
font-size: 14px;
line-height: 1;
height: 54px;
}
&:hover,
&.give-default-level {
color: #F4B03E;
background: #FFFFFF;
}
}
}
.give-btn-modal {
width: calc(50% - 10px);
font-size: 16px;
font-weight: 700;
line-height: 20px;
letter-spacing: 0;
text-transform: uppercase;
color: #FFFFFF;
background: #151515;
margin: 0 0 0 calc(50% + 7.5px);
padding: 17px 30px;
outline: none;
border-radius: 25px;
&:hover {
color: #FFFFFF;
background: #151515;
}
}
}
}
@media( max-width: 1440px ) {
.elementor-gf-header {
&__title {
font-size: 30px;
}
&__desc {
font-size: 16px;
}
}
}
@media( max-width: $break-lg - 0.02 ) {
padding: 32px 16px;
.elementor-gf-header {
width: 30%;
&__title {
font-size: 24px;
}
}
.elementor-gf-form {
width: 70%;
}
}
@media( max-width: $break-md - 0.02 ) {
flex-direction: column;
.elementor-gf-header {
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.elementor-gf-form {
width: 100%;
padding: 0;
form[id*=give-form] {
.give-total-wrap {
position: static;
width: auto;
margin-bottom: 30px;
}
.give-btn {
width: 100%;
margin: 0;
}
}
}
}
}
&--skin-vaccine {
.elementor-gf-header {
margin-bottom: 40px;
&__sub-title {
display: inline-block;
font-size: 1.2vw;
font-weight: 400;
line-height: 1.58em;
color: #FFFFFF;
background: rgba(255, 255, 255, 0.12);
padding: 1px 12px;
border-radius: 8px;
}
&__title {
font-size: 3.6vw;
font-weight: 700;
line-height: 1.29em;
color: #FFFFFF;
margin: 15px 0 0;
}
}
.elementor-gf-form {
form.give-form,
form[id*=give-form] {
position: relative;
margin: 0;
.give-total-wrap {
position: absolute;
bottom: 0;
right: 0;
width: calc(50% - 7.5px);
margin: 0;
.give-donation-amount {
margin: 0;
}
.give-currency-symbol {
height: 54px;
line-height: 54px;
color: #151515;
background: #FFFFFF;
border-radius: 10px 0 0 10px;
}
#give-amount {
font-weight: 700;
color: #FFFFFF;
background: transparent;
height: 54px;
border: 2px solid #FFFFFF;
border-left: none;
border-radius: 0 10px 10px 0;
}
}
#give-donation-level-button-wrap .give-btn {
font-size: 18px;
font-weight: 400;
line-height: 1.67em;
color: #FFFFFF;
background: transparent;
padding: 10px 12px;
border: 2px solid #FFFFFF;
border-radius: 10px;
&.give-default-level {
font-weight: 700;
color: #151515;
background: #FFFFFF;
}
}
.give-btn-modal {
width: calc(50% - 7.5px);
font-size: 16px;
font-weight: 700;
line-height: 54px;
color: #151515;
background: #FFFFFF;
border-radius: 10px;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
color: #FFFFFF;
background: #151515;
}
}
}
}
@media( max-width: $break-tl - 0.02 ) {
.elementor-gf-header {
&__sub-title {
font-size: 18px;
}
&__title {
font-size: 42px;
}
}
}
@media( max-width: $break-sm - 0.02 ) {
.elementor-gf-header {
text-align: center;
&__sub-title {
font-size: 16px;
}
&__title {
font-size: 36px;
}
}
.elementor-gf-form {
form.give-form,
form[id*=give-form] {
.give-total-wrap {
position: static;
width: 100%;
margin-bottom: 20px;
}
.give-btn-modal {
width: 100%;
}
}
}
}
}
&--skin-jimara {
background-color: #F8F5E9;
padding: 50px;
border-radius: 20px;
.elementor-gf-header {
margin-bottom: 40px;
&__sub-title {
font-size: 1.6vw;
font-weight: 400;
font-style: italic;
line-height: 1.4em;
color: #306F5E;
}
&__title {
font-size: 3.6vw;
font-weight: 700;
line-height: 1.29em;
color: #151515;
margin: 12px 0 0;
}
&__desc {
font-size: 18px;
font-weight: 400;
line-height: 1.67em;
color: #151515;
margin-top: 30px;
ul {
list-style: none;
margin: 12px 0;
padding: 0;
column-count: 2;
li {
position: relative;
margin-bottom: 12px;
padding-left: 24px;
&:before {
content: "";
position: absolute;
top: 13px;
left: 0;
width: 12px;
height: 3px;
background: #53BB9F;
}
}
}
}
}
.elementor-gf-form {
form.give-form,
form[id*=give-form] {
position: relative;
margin: 0;
.give-total-wrap {
.give-currency-symbol {
color: #FFFFFF;
background: #53BB9F;
border-radius: 30px 0 0 30px;
}
#give-amount {
color: #53BB9F;
border-radius: 0 30px 30px 0;
}
}
#give-donation-level-button-wrap .give-btn {
font-size: 16px;
font-weight: 700;
border-radius: 30px;
&:not(.give-default-level):hover {
color: #53BB9F;
border-color: #53BB9F;
}
&.give-default-level {
color: #FFFFFF;
background: #53BB9F;
border-color: #53BB9F;
}
}
.give-btn-modal {
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
background: #53BB9F;
border-radius: 30px;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
background: #306F5E;
}
}
}
}
@media( max-width: $break-tl - 0.02 ) {
.elementor-gf-header {
&__sub-title {
font-size: 20px;
}
&__title {
font-size: 36px;
}
&__desc {
font-size: 16px;
}
}
}
@media( max-width: $break-sm - 0.02 ) {
padding: 30px;
}
@media( max-width: $break-xs - 0.02 ) {
padding: 30px 15px;
.elementor-gf-header__desc ul {
column-count: 1;
}
}
}
&--skin-nuptse {
position: relative;
background-color: #FFFFFF;
padding: 50px 30px;
border-radius: 14px;
@media( max-width: $break-xs - 0.02 ) {
padding: 24px 15px;
}
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFFFFF;
border-radius: 14px;
z-index: 3;
}
&:after {
content: "";
position: absolute;
top: 25px;
left: 25px;
width: 100%;
height: 100%;
background: #7CF2AD;
border-radius: 14px;
z-index: 1;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
.elementor-gt-header {
position: relative;
z-index: 5;
margin-bottom: 40px;
&__sub-title {
font-size: 20px;
font-weight: 400;
font-style: italic;
line-height: 1.5;
color: #3F86ED;
margin-bottom: 12px;
}
&__title {
font-size: 36px;
font-weight: 700;
line-height: 1.2;
color: #151515;
margin: 0;
}
&__desc {
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: #151515;
margin-top: 20px;
}
}
.elementor-gf-form {
position: relative;
z-index: 5;
form.give-form,
form[id*=give-form] {
position: relative;
margin: 0;
.give-total-wrap {
.give-currency-symbol {
color: #FFFFFF;
background: #7CF2AD;
border-radius: 30px 0 0 30px;
}
#give-amount {
color: #7CF2AD;
border-radius: 0 30px 30px 0;
}
}
#give-donation-level-button-wrap {
@media( min-width: $break-sm ) {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.give-btn {
font-size: 16px;
font-weight: 700;
color: #011F51;
border-radius: 30px;
&:not(.give-default-level):hover {
color: #7CF2AD;
border-color: #7CF2AD;
}
&.give-default-level {
color: #FFFFFF;
background: #7CF2AD;
border-color: #7CF2AD;
}
}
}
.give-btn-modal {
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
background: #7CF2AD;
border-radius: 30px;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
color: #FFFFFF;
background: #011F51;
}
}
}
}
}
&--skin-somoni {
.elementor-gf-header {
margin-bottom: 50px;
&__sub-title {
font-size: 20px;
font-weight: 700;
line-height: 1.5;
color: #BD3C2B;
}
&__title {
font-size: 42px;
font-weight: 700;
line-height: 1.2;
color: #0A0A0A;
margin: 4px 0 0 0;
@media( max-width: $break-xs - 0.02 ) {
font-size: 36px;
}
}
}
.elementor-gf-form {
form.give-form,
form[id*=give-form] {
position: relative;
margin: 0;
.give-total-wrap {
.give-currency-symbol {
color: #FFFFFF;
background: #3E8959;
border-radius: 10px 0 0 10px;
}
#give-amount {
color: #3E8959;
border-radius: 0 10px 10px 0;
}
}
#give-donation-level-button-wrap .give-btn {
font-size: 16px;
font-weight: 700;
border-radius: 10px;
&:not(.give-default-level):hover {
color: #3E8959;
border-color: #3E8959;
}
&.give-default-level {
color: #FFFFFF;
background: #3E8959;
border-color: #3E8959;
}
}
.give-btn-modal {
font-size: 16px;
font-weight: 700;
text-transform: capitalize;
color: #FFFFFF;
background: #3E8959;
border-radius: 10px;
-webkit-transition: all .3s;
transition: all .3s;
&:hover {
background: #BD3C2B;
}
}
}
&__desc {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #0A0A0A;
margin-top: 20px;
a {
color: #3F86ED;
}
}
}
@media(max-width: $break-md - 0.02) {
.elementor-gf-header {
margin-bottom: 30px;
&__sub-title {
font-size: 16px;
}
&__title {
font-size: 36px;
}
}
}
}
}