@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

.cont_volunt{ width: 90%; max-width: 1440px; margin: 0 auto}
.row_at{ display: flex; align-items: center; position: relative}
.img_fluid{ max-width: 100%}
.cont_slider{position: relative}

#banner_volunt{ height: 580px; background-size: cover!important; background-position: center left!important}
#banner_volunt .cont_volunt{ display: flex;align-items: flex-end;height: 100%;justify-content: flex-start;}
#banner_volunt .cont_volunt .summary_banner{ margin-bottom: 70px; text-align: center; width: 580px}
#banner_volunt .cont_volunt .summary_banner h2{ font-size: 35px; font-weight: 800; font-size: 30px; color: #fff}
#banner_volunt .cont_volunt .summary_banner p{ font-size: 20px; color: #fff}
.soy_top{position: absolute; top: 0; left: 5%; z-index: 10; width: 230px}

#archive_volunt,#archive_volunt.sigle_volunt{ cursor: default!important; padding-bottom: 70px;}
#header_volunt{padding: 35px 0}
#header_volunt .summary{ width: 60%; display: flex; align-items: flex-end}
#header_volunt .summary i{ width: 120px}
#header_volunt .summary h3{ width: calc(100% - 150px); font-size: 22px; font-weight: 600; line-height: 30px; color: #038B71}
#mod_top{ background: #F4F4F4; padding: 40px 0}
.cont_left{ width: calc(100% - 400px)}
.cont_form{ width:  400px; position: fixed; top: 190px; right: 5%; z-index: 9991;transition: all .900s ease;}
.cont_form.activo_form{right: -100%;transition: all .900s ease;}
.cont_form.form_top{top: 110px; transition: all .900s ease;}
#list_volunt h2{ font-weight: 800; font-size: 30px; line-height: 30px; margin-bottom: 35px; color: #038B71}
.item_vulunt{ width: calc(100% - 270px); margin-bottom: 30px; position: relative; }
.item_vulunt .row_at{border-radius: 15px; overflow: hidden;box-shadow: 0px 0px 10px rgba(0,0,0,25%); min-height: 230px; background-size: cover!important}
.item_vulunt figure{ width: 45%; margin: 0 0 -10px 0!important}
.item_vulunt .text_sumary{width: calc(100% - 45%); background: rgba(256, 256, 256, 85%);border-radius: 15px;padding: 15px 20px; min-height: 230px;display: flex;flex-wrap: wrap;align-items: center;align-content: center;}
#list_volunt  .item_vulunt .text_sumary h2{ font-size: 20px; line-height: 22px; color: #000; margin-bottom: 10px; font-weight: 700}
.item_vulunt .text_sumary p{ font-size: 16px; line-height: 22px; color: #000}
.item_vulunt .tolltips{ width: 180px; display: flex; height: 60px; flex-direction: column; color: #fff; background: #8FC43E; border-radius: 15px; position: absolute; top: 0;  bottom: 0; margin: auto;right: -220px;; font-size: 24px; line-height: 22px; align-items: center; justify-content: center;}
.link_volunt{ display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0}
.tolltips i{ width: 25px; height: 25px;background:#8FC43E; border-radius: 5px; position: absolute; top: 0; bottom: 0; left: -10px; margin: auto; transform: rotate(45deg)}


.form_donacion{ border-radius: 15px; background: #fff; overflow: hidden; box-shadow:4px 3px 13px rgba(0,0,0,30%)}
.form_donacion h3{ border-radius: 15px;  background: #8FC43E; color: #fff; font-weight: bold;padding: 10px; font-size: 35px; font-weight: bold; line-height: 35px; display: flex; align-items: center; justify-content: center}
.form_donacion h3 i{ width: 65px}
.ceparar{margin: 10px 0 0 0}
.summary_form{padding: 0px 20px}
.summary_form h4{ color: #000; font-size: 18px; line-height: 22px}
.summary_form ul li{ margin-bottom: 5px }
.summary_form ul #donacion{ margin-bottom: 0!important }
.summary_form ul #donacion label span{ margin-bottom: 30px!important }



/* ocultar el radio nativo */
.selec_dona label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* organizar el label */
.selec_dona ul li label {
   
    cursor: pointer;
    position: relative;
}

/* el "punto" lo hacemos en el span (antes era en el label) */
.selec_dona ul li label span,.selec_dona ul li label a {
    position: relative;
    padding-left: 28px; /* espacio para el círculo */
    display: inline-block;
    font-size: 16px; line-height: 22px; color: #000
}

/* círculo por defecto */
.selec_dona ul li label span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    border: 2px solid #888;
    background: transparent;
    transition: all 0.18s ease;
    box-sizing: border-box;
}

/* estado checked: cuando el input (dentro del label) está checked,
   afectamos al ::before del span que viene justo después */
.selec_dona ul li label input[type="radio"]:checked + span::before {
    border-color: #1dbf73;
    background: #1dbf73;
    box-shadow: 0 0 5px rgba(29,191,115,0.35);
}

/* opción: un pequeño punto interior cuando está activo */
.selec_dona ul li label input[type="radio"]:checked + span::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    transition: all 0.18s ease;
}

.box_montos{}
.list_montos{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px}
.list_montos button,.btn_otro{ cursor: pointer;background: #038B71;box-shadow:  1px 3px 0px  rgba(63,0,60,42%); border: none; border-radius: 90px; margin: 0 auto; display: table;font-size: 19px; line-height: 19px; color: #fff; padding: 5px 15px; font-weight: 900}

#otro_monto{ margin-top: 5px}

.btn_monto.active{ background: #8FC43E}
.otro_monto_box{ margin-bottom: 20px}
.btn_donar{ cursor: pointer;border-radius: 15px; border: none;  background: #038B71; color: #fff; font-weight: bold;padding: 10px; font-size: 25px; font-weight: bold; line-height: 25px; display: flex; align-items: center; justify-content: center;width: calc(100% + 40px); transform: translateX(-20px);}
.btn_donar:hover{background: #8FC43E}
.btn_donar i{ width: 55px; margin-right: 10px}

.confiable{display: flex; align-items: center; justify-content: center; margin-top: 20px}
.confiable i{ width: 35px}

#mod_bt{}
#logo_soy_volunt{ display: table; width: 415px; margin-left: 90px; margin-bottom: 35px}
.lista{ width: 630px}
.lista li{ display: flex; flex-wrap: wrap;align-items: center}

.lista_1{}
.lista_1 li{ margin-bottom: 20px}
.lista_1 li i{ width: 70px}
.lista_1 li .summary{ width: calc(100% - 100px); padding-left: 20px}
.lista_1 li .summary p,.lista_2 li .summary p{ font-size: 17px; line-height: 23px; color: #606060;}

.lista_2{  padding-left: 85px}
ul.lista_2{  padding-left: 0; margin-left: -45px}
.lista_2 li { margin-bottom: 20px}
.lista_2 li i{ width: 50px}
.lista_2 li .summary{ width: calc(90% - 70px); padding-left: 10px}
.lista_2 li .summary p{}

#img_promo{ margin-left: 100px}
#img_promo img{ width: 415px}

.check_politicas,.check_politicas a{ font-size: 8px!important; line-height: 8px!important; color: #000!important; display: flex; margin-top: 10px}
.check_politicas input{ transform: translateY(5px)}
#archive_volunt.sigle_volunt{}

#video { padding-right: 15%}
#video video{ width: 100%; height: 550px}
#video h2{ color: #038B71; font-weight: 900; font-size: 30px; line-height: 35px; margin: 0 auto; text-align: center; width: 420px}

#archive_volunt.sigle_volunt #logo_soy_volunt{ width: 310px; margin-left: 22%; margin-top: 30px}
.rs-parallax-wrap h3,a.rev-btn{font-family: "Lato", Arial, sans-serif!important;}
@media (max-width: 767px){
    .cont_volunt{ width: calc(100% - 15px)}
    #banner_volunt{ background-position: center center!important}
    #banner_volunt .cont_volunt .summary_banner{ width: 100%}
    .cont_left,#video h2,#archive_volunt.sigle_volunt #logo_soy_volunt,#header_volunt .summary,#header_volunt .summary h3,.lista{ width: 100%}
    #header_volunt .summary{ flex-direction: column; justify-content: center; align-items: center}
    #header_volunt .summary h3{ text-align: center}
    .cont_form_mb{ padding: 0 10px; margin-bottom: 30px}
    .list_montos button, .btn_otro{  padding:5px 15px; font-size: 16px; line-height: 16px }
    .btn_otro{ margin-top: 10px}
    #video{ padding: 0!important}
    #archive_volunt.sigle_volunt #logo_soy_volunt,#archive_volunt #logo_soy_volunt{ width: 270px; padding: 0!important; margin: 15px auto!important}
    .lista_2,ul.lista_2{ padding: 0!important;}
    ul.lista_2 {    margin-left: 0;}
    #img_promo{ margin: 0!important}
    #img_promo img { width: 100%}
    .lista_2 li .summary {width: calc(100% - 70px);padding-left: 10px;}
    .soy_top{position: absolute;top: 0;left: 0;right: 0;z-index: 10;width: 141px;margin: 0 auto;}
    .item_vulunt{ width: calc(100%)!important}
    .item_vulunt .tolltips{position: relative; right: inherit; margin-top: 35px}
    .item_vulunt b,.item_vulunt span{ position: relative; z-index: 10}
    .tolltips i{bottom: inherit; margin: 0 auto; left: 0; right: 0; top: -11px; z-index: 0}
    .check_politicas,.check_politicas a{ font-size: 8px!important; line-height: 8px!important; color: #000!important; display: flex; margin-top: 10px}
.check_politicas input{ transform: translateY(5px)}
#archive_volunt.sigle_volunt{}
}