.motivos{
display: flex;
font-family: 'Founders Grotesk';
font-size: 18px;
line-height: 130%;
color: #000;
padding-bottom: 0;
height: 100%;
min-height: 150px;
align-items: center;
}
.motivos.first{
padding-right: 20px;
}
.motivos .numero{
font-family: 'Founders Grotesk';
font-size: 100px;
color: #ED2B4E;
opacity: 0.2;
font-weight: 900;
padding: 0 20px;
line-height: 1.3em;
margin-top: 15px;
}
.motivos .motivo span{
color: #ED2B4E;
}
.motivos .motivo span.grey{
color: rgb(0,0,0, 0.6);
} .donate .periodicidad,
.donate .cantidades{	
width: 100%;
display: flex;
padding: 0;
margin: 0;
float: left;
flex-wrap: wrap;
gap: 20px;
flex-direction: row;
}
.donate .option{
display: flex;
width: 100%;
float: left;
margin: 0;
}
.donate .tiempo,
.donate .cantidad{
display: flex;
font-style: normal;
font-weight: 300;
font-size: 70px;
line-height: 1em;
text-align: center;
color: #000;
padding: 20px 20px;
opacity: 0.6;
border: 2px solid #fff;
background: #fff;
border-radius: 10px;
max-width: calc(25% - 20px);
width: 100%;
float: left;
align-items: center;
justify-content: center;
}
.donate .cantidad{
padding: 20px 0 0 !important;
}
.donate .tiempo{
font-size: 18px;
line-height: 150%;
padding: 20px 30px 10px;
max-width: calc(18% - 20px);
}
.donate .cantidad.selected .cantidad{
background: linear-gradient(0deg, rgba(237, 43, 78, 0.1), rgba(237, 43, 78, 0.1)), #FFFFFF;
border: 2px solid #ED2B4E;
color: #ED2B4E;
opacity: 1;
}
.donate .tiempo.selected,
.donate .cantidad.selected{ 
background: linear-gradient(0deg, rgba(237, 43, 78, 0.1), rgba(237, 43, 78, 0.1)), #FFFFFF;
border: 2px solid #ED2B4E;
color: #ED2B4E;
opacity: 1;
}
.donate .cantidad input,
.donate .cantidad.selected input{
max-width: 175px;
border: 0 !important;
border-bottom: 2px solid #ED2B4E !important;
border-radius: 0;
}
.donate .tipo{
width: 100%;
float: left;
font-weight: 400;
font-size: 12px;
line-height: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #000000;
margin: 0;
padding: 35px 0 25px 0;
}
.donate .btn{
margin: 0 20px;
background-color: #ED2B4E;
font-size: 16px;
line-height: 22px;
border-radius: 25px;
color: #fff;
position: relative;
padding: 12px 25px 10px 50px;
min-width: 275px;
text-align: center;
border: 1px solid #ED2B4E;
}
.donate .btn:hover{
cursor: pointer;
background-color: #fff;
color: #ED2B4E;
border: 1px solid #ED2B4E;
}
.donate .btn:before {
content: url(//www.acebarcelona.org/wp-content/uploads/2021/10/heart.svg);
position: absolute;
left: 20px;
}
.donate .btn:hover:before {
content: url(//www.acebarcelona.org/wp-content/uploads/2022/03/heart.svg);
}
.donate .cantidad:hover,
.donate .tiempo:hover{
cursor: pointer;
} .beneficios-donacion li{
margin: 20px 0;
}
.beneficios-donacion li::marker, .beneficios-donacion li span{
color: #ED2B4E;
}
.acordeon-solidario .et_pb_toggle{
margin: 0 !important;
} @media screen and (max-width: 720px) {
.motivos {
flex-direction: column;
min-height: 120px;
align-items: flex-start;
}
.motivos .numero {
padding: 0;
margin: 0;
font-size: 70px;
}
.donate .tiempo, .donate .cantidad {
max-width: calc(50% - 10px) !important;
}
.donate .option {
flex-direction: column;
}
.donate .periodicidad{
margin-bottom: 25px !important;
}
.donate .btn {
margin: 0 !important;
max-width: 150px;
}
.donate .cantidad {
font-size: 64px !important;
}
.donate .tiempo, .donate .cantidad {
padding: 10px 0;
}
.donate .cantidad input, .donate .cantidad.selected input {
max-width: 100% !important;
padding: 0 !important;
}
}