@import url('fonts.css');

/* [ROOT] */
:root {
    --primary-color: #E1D9C2;
    --secondary-color: #EE4036;
    --text-color: #939393;
    
    --font-primary: "Campton",sans-serif;
    --font-secondary: "Roboto Condensed", sans-serif;;
    --font-size-base: 16px;

    /* COLORS*/
    --white-color : #FFFFFF;
    --black-color : #000;
    --red-color : #BD132D;
}
html {
    font-size: 62.5%; /* 62.5% de 16px = 10px */
    scroll-behavior: smooth;
}
*{box-sizing: border-box;}
body{font-size:1.6rem;font-family:var(--font-primary);background-color:#f2f2f2;padding:0;margin:0;}

/* [GLOBAL] */
.container{width:100%;max-width:1098px;margin:0 auto;overflow-x: scroll;}
@media only screen and (max-width:1150px){
    .container{padding:0 20px;}
}

.container-full{width:100%;overflow-x: scroll;}
.btn-donation{background-color:var(--primary-color);text-decoration:none;padding:10px 20px;color:var(--black-color);border-radius:5em;display: flex;justify-content: center;align-items: center;text-align: center;}
.btn-donation:hover{background-color:var(--white-color);}
.btn-read-more{background-color:var(--red-color);border-radius:2em;padding:10px 20px;color:var(--white-color);font-weight:200;border:1px solid var(--red-color);text-decoration:none;}
.btn-read-more:hover{background-color:var(--white-color);color:var(--red-color);font-weight:400;}
.btn-secondary{background-color:#D9D9D9;border:1px solid #000;color:#000;padding:5px 40px;border-radius:1em;text-decoration:none;}
.btn-secondary:hover{background-color:var(--white-color);}
.btn-read-more-alternative{background-color:#BD132D;border-radius:2em;padding:10px 20px;color:var(--white-color);font-weight:200;border:1px solid #EE4036;text-decoration:none;}
.btn-read-more-alternative:hover{background-color:var(--white-color);color:#EE4036;font-weight:400;}
/* [HEADER] */
.header{/*background-image:url('../files/background-home.png');*/background-color:#000;height:auto;background-position:top center;padding-top: 61px;position:relative;}
.header:before{position:absolute;content:'';width:100%;height:150px;background-image:url('../files/mask-group.png');background-position:top left;background-repeat:no-repeat;background-size: cover;bottom:0;left:0;z-index:1;}
@media only screen and (max-width:780px){
    .header:before{height:100px;}
}
.header .container{display: flex;flex-direction: row;justify-content: space-between;align-items: center;gap:50px;}
@media only screen and (max-width:780px){
    .header .container{flex-direction:column;}
}

.header .container ul{display:flex;flex-direction:row;gap:70px;padding:0;margin:0;}
.header .container ul a{color:var(--primary-color);text-decoration:none;position:relative;}
.header .container ul a:hover:after{position:absolute;bottom:-4px;left:0;width:100%;height:2px;content:'';background-color:var(--primary-color);}
.header .longtitle {font-size:3.2rem;transform:rotate(-5deg);margin:0;font-family: "Homemade Apple";color:var(--primary-color);text-align:center;}

.header .home-rectangle{max-width:770px;width:100%;min-height:422px;background-color:var(--black-color);clip-path: polygon(0 0, 97% 1%, 100% 98%, 3% 100%);color:#E5E3D6;font-size:2.4rem;padding:50px;text-align:center;font-family:var(--font-primary);line-height:4.4rem;}

@media only screen and (max-width:780px){
    .header .home-rectangle{font-size:2.0rem;line-height:3rem;}
}

.header .background2{position: relative;height: 650px;background-image:url('../files/header-background2-min.png');background-repeat:no-repeat;background-position:top center;background-size:contain;margin-top:70px;}
@media only screen and (max-width:1150px){
    .header .background2{padding:0;height:500px;}
}

@media only screen and (max-width:780px){
    .header .background2{height:400px;margin-top: 186px;}
}
@media only screen and (max-width:680px){
    .header .background2{height:280px}
    .header .longtitle{line-height: 4rem;}
}
@media only screen and (max-width:400px){
    .header .background2{height:250px;}
}

#hamburguer{display:none;}
.donation-btn-mobile{display:none;}
.logo-mobile{display:none;max-width:155px}
.logo-desktop{max-width:155px}
nav .nav-col-1{width: 80%;display: flex;flex-direction: row;justify-content: start;gap:60px;}
@media only screen and (max-width:780px){
    .logo-mobile{display:block;}
    .donation-btn-desktop,
    .logo-desktop{display:none;}
    .header .container .nav-col-1{display: flex;width: 100%;padding:0;flex-direction:column;gap:0;align-items: end;}
    .header .container .nav-col-1 img{display:none;}
    .header{height:450px;display:flex;flex-direction:column;justify-content: start;padding:0;}
    .header nav.container{padding:0;overflow:initial;position:absolute;z-index:5;padding-bottom:30px;}
    .header .container .nav-col-1 ul{flex-direction:column;gap:0px;width:100%;display:none;}
    .header .container .nav-col-1 ul li{padding:10px 20px;text-align:right;}
    #hamburguer{display:block;width:40px;height:40px;margin:20px 10px 10px 0;cursor:pointer;display:flex;flex-direction:column;justify-content:center}
    #hamburguer div{width:100%;height:3px;background-color:#E1D9C2;position:relative;transition: background-color 0.3s ease-in-out;}
    #hamburguer div:after,
    #hamburguer div:before{position:absolute;content:'';width:100%;height:3px;background-color:#E1D9C2;transition: top 0.3s ease-in-out, 
                    bottom 0.3s ease-in-out, 
                    transform 0.3s ease-in-out;}
    #hamburguer div:before{top:-10px;}
    #hamburguer div:after{bottom:20px;}
    
    #hamburguer.active div:before,
    #hamburguer.active div:after{top:0;bottom:0;}
    #hamburguer.active div:before{transform:rotate(45deg);}
    #hamburguer.active div:after{transform:rotate(-45deg);}
    #hamburguer.active div{background-color:transparent;}
}


/* [DONACION] */
#template_3{display:flex;flex-direction:column;align-items: center;justify-content: center;gap:20px;padding:30px 0;}
@media only screen and (max-width:780px){
    #template_3 {padding:30px 20px;}
}
#template_3 .longtitle,
#template_3 .pagetitle{margin:0;text-align:center;}

#template_3 .longtitle{font-family: "Homemade Apple";font-size:3.6rem;color:var(--red-color);}

#template_3 .pagetitle{font-size:4rem;color:var(--red-color);text-transform:uppercase;font-weight:600;}
#template_3 .type_donations{display: flex;flex-direction: row;gap: 40px;flex-wrap: wrap;width: 80%;justify-content: space-around;margin: 0 auto;}
#template_3 .type_donations .type{display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 10px;width:250px;height:250px;border-radius:0.5em;cursor:pointer;position:relative;text-align: center;}
#template_3 .type_donations .type .type_title{color:var(--red-color);font-size:2rem;font-weight:600;}
#template_3 .type_donations .type .type_price{color:var(--red-color);font-size:2rem;}
#template_3 .type_donations .type .description{position:absolute;content:'';top:0;left:0;bottom:0;right:0;width:250px;height:250px;background-color:var(--red-color);border-radius:0.5em;color:var(--white-color);display:none;font-size:2rem;padding:20px;text-align:center;}
#template_3 .type_donations .type:hover .description{display:flex;flex-direction:column;justify-content: center;align-items: center;}
#template_3 .video{width:80%;height:500px;background-position:center center;border-radius:1em;background-size:cover;display:flex;flex-direction:row;justify-content:center;align-items: center;}
#template_3 .video button{background-color:transparent;border:0; width:130px;overflow:hidden;}
#template_3 .video button img{width:100%;}

@media only screen and (max-width:780px){
    #template_3 .type_donations{gap: 1%;}
    #template_3 .type_donations .type{width: 100%;}
    #template_3 .type_donations .type:hover .description{width:100%;min-height:100%;}
    #template_3 .video{margin-top:100px;}
}
#template_3 .content{color:var(--red-color);}
/* [LIGHTBOX] */
.lightbox {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);justify-content: center;align-items: center;}
.lightbox-content {position: relative;width: 80%;max-width: 800px;background-color:#000;border-radius:1em;}
.lightbox iframe {width: 100%;height: 450px;border: none;}
.close-btn {position: absolute;top: -35px;right: -20px;background: transparent;color: white;border: none;padding: 10px 10px;font-size: 50px;cursor: pointer;}

/* [CONTEXTO] */
#template_4 {padding:100px 0;background-color:#E5E3D6;}
#template_4 .container{max-width:516px;width:100%;margin:0 auto;}
#template_4 .container .pagetitle{text-align:center;font-size:4rem;position:relative;font-family: "Homemade Apple";color:#C42127;margin:0;position:relative;}
#template_4 .container .pagetitle:before{position:absolute;content:'';background-image:url('../files/background-context-2.png');
background-position:center center;background-repeat:no-repeat;background-size:cover;top:0;left:0;width: 100%;height: 100%;}
#template_4 .container .description{font-size:2.4rem;line-height:3.4rem;text-align:center;padding:30px 0;}

#template_4 .container .image{position:relative;}
#template_4 .container .image span{position:absolute;bottom:10px;right:10px;}
#template_4 .container .image img{width:100%;}
#template_4 .container .content{text-align:justify;}
@media only screen and (max-width:780px){
   #template_4 {padding:100px 20px;}
   #template_4 .container .pagetitle{font-size:3rem;line-height:4rem;}
}
/* [EQUIPO] */
#template_5{background-position:top left;background-repeat:repeat;color:var(--white-color);padding:50px 0px;}
#template_5 .container{width:80%;margin:0 auto;}
#template_5 .team_header{display:flex;justify-content:space-between;align-items: center;}
#template_5 .pagetitle{font-family: "Homemade Apple";width:320px;font-size:4rem;line-height:5rem;font-weight:200;align-items: center;}
#template_5 .description{width:543px;}

#template_5 .team_members{display: flex;flex-direction: row;justify-content: center;align-items: start;gap: 25px;flex-wrap: wrap;}
#template_5 .team_members .member{width:180px;display:flex;flex-direction:column;justify-content:start;align-items:center;text-align:center;gap:5px}
#template_5 .team_members .member .image{height:160px;width: 100%;display: flex;justify-content: center;align-items: center;}
#template_5 .team_members .member .image .member_image{height:150px;}
#template_5 .team_members .member .member_fullname{font-size:1.6rem;font-family: "Homemade Apple";font-weight:200;text-align:center;}
#template_5 .team_members .member .member_position{font-size:1.6rem;font-weight:200;text-align:center;display:block;}
@media only screen and (max-width:780px){
    #template_5 {padding:100px 20px;}
    #template_5 .container{width:100%;margin:0 auto;}
    #template_5 .pagetitle{line-height:5rem;text-align:center;}
    #template_5 .team_members{gap:10%}
    #template_5 .team_members .member{width:38%;}
     #template_5 .team_header{flex-direction: column;justify-content:center;padding:30px 0;align-items: center;}
    #template_5 .description{width:100%;text-align:center;}
}



/* [SONIDOS] */
#template_6 {background-position:top left;color:var(--black-color);padding:100px 0px;}
#template_6 .container {width:80%;margin:0 auto;}
#template_6 .song_header {display:flex;justify-content:space-between;align-items: center;flex-wrap: wrap;}
#template_6 .song_header .pagetitle{width:400px;font-size:4rem;font-weight:600;margin:0;line-height: 3rem;}
#template_6 .song_header .pagetitle span{font-family: "Homemade Apple";display: block;}
#template_6 .song_header .description{width:530px;font-size:2rem;line-height:3rem;}
#template_6 .video{width:100%;height:500px;background-position:center center;border-radius:1em;background-size:cover;display:flex;flex-direction:row;justify-content:center;align-items: center;overflow:hidden;}
#template_6 .video button{background-color:transparent;border:0; width:130px;overflow:hidden;}
#template_6 .video button img{width:100%;}
@media only screen and (max-width:780px){
    #template_6 .song_header .pagetitle{font-size:3.5rem;}
    #template_6 .song_header .description{line-height:2.5rem;}
    #template_6 .song_header {gap: 20px;}
}


/* [NEWSLETTER] */
#template_7 {padding:100px 0;background-image:url('../files/background-white.png');background-position:top left;background-repeat:no-repeat;background-size: cover;}
#template_7 .container{max-width:730px;margin:0 auto;text-align:center;background-color:rgba(217,217,217,0.5);padding:30px;border-radius:2em;}
#template_7 .container .longtitle{font-family: "Homemade Apple";font-weight: 200;font-size:3.2rem;line-height:5rem;text-align:center;}
#template_7 form {display: flex;flex-direction: column;justify-content: start;align-items: start;gap:15px;}
#template_7 form input[type="text"]{width:100%;background-color:rgba(189,189,189,0.5);border: 0;border-radius: 1.5em;font-size:1.6rem;color:#A09E9E;height:54px;padding:20px;}
#template_7 form  .submitgroup{width: 100%;position: relative;}
#template_7 form  .submitgroup .submit{width: 300px;display: flex;justify-content: end;position: absolute;top: 0;right:0;height: 100%;}
#template_7 form  .submitgroup .submit button{width:158px;position:relative;}
#template_7 form  .submitgroup .submit button:after{position:absolute;width:100%;height:100%;content:'';background-image:url('../files/arrow-right.png');background-position:right center;background-repeat:no-repeat;background-size: inherit;top:1px;right:25px;}
#template_7 .longtitle{font-size: 3.2rem;line-height: 4rem;text-transform: uppercase;margin: 50px 0;font-weight:400;max-width: 660px;}
@media only screen and (max-width:1200px){
    #template_7 {padding:100px 20px;}
}


#newsletter-result .error,
#newsletter-result .success {width: 100%;padding: 15px 20px;border-radius: 1em;font-size: 1.8rem;margin-bottom: 20px;}
#newsletter-result .error {background-color: rgba(190, 0, 0, 0.15);color: var(--red-color);}
#newsletter-result .success {background-color: rgba(0, 130, 0, 0.15);color: #1f8a1f;}
.error[data-error] {display: block;font-size: 1.4rem;color: var(--red-color);padding-left: 10px;font-weight: 500;text-align: left;}
.form input.input-error {border: 2px solid var(--red-color) !important;background-color: rgba(255, 0, 0, 0.05);}
.math-captcha{width: 100%;display: flex;align-items: center;gap: 10px;padding:0 20px;}
.math-captcha .operationmath label{font-size:2rem;}
.math-captcha .inputmath{max-width: 173px;}
/* [HISTORIA DE RESISTENCIA] */
#template_9 {padding:250px 0 100px 0;background-image:url('../files/background-resistencia.png');background-position:top left;background-repeat:no-repeat;background-size: cover;margin-top: -190px;position:relative;z-index:2;}
#template_9 .container {width:80%;margin:0 auto;}
#template_9 .pagetitle {text-align:center;font-family: "Homemade Apple";font-weight: 200;font-size:3.3rem;color:#C42127;max-width:430px;margin:0 auto;line-height:4rem;}
#template_9 .content{width:100%;max-width:550px;margin:0 auto;text-align: justify;}
@media only screen and (max-width:780px){
    #template_9{margin-top: -120px;padding:100px 20px;margin-bottom: -70px;}
    #template_9 .container{width:100%;}
}
/* [ESCUCHA NUESTRO PODCAST] */
#template_10 {min-height:400px;background-color:#EE4036;display: flex;color:#FFFFFF;position:relative;}
#template_10:before{position:absolute;content:'';min-height:400px;width:400px;top:0;left:0;background-image:url('../files/podcast-oid.png');background-repeat:no-repeat;background-size: cover;background-position: left center;}
#template_10 .container{display: flex;flex-direction: column;justify-content: center;align-items: center;}
#template_10 .container .pagetitle{font-family: "Homemade Apple";font-weight: 200;font-size:3.2rem;line-height:5rem;text-align: center;}
@media only screen and (max-width:780px){
   #template_10:before{background-size:200px;}
   #template_10 .container .pagetitle
}

/* [FRAGMENTO DE LAS GRABACIONES] */
#template_11{padding:70px 0 0 50px;position:relative;}
#template_11:before{position:absolute;content:'';top:0;left:0;width:300px;height:100%;background-image:url('../files/podcast-oid2.png');background-repeat:no-repeat;background-position: left center;}
#template_11 .container .pagetitle{margin:0 auto;text-align:center;max-width:500px;}
#template_11 .container .video{margin:50px auto;width:80%;height:500px;background-position:center center;border-radius:1em;background-size:cover;display:flex;flex-direction:row;justify-content:center;align-items: center;}
#template_11 .container .video button{background-color:transparent;border:0; width:130px;overflow:hidden;}
#template_11 .container .video button img{width:100%;}

@media only screen and (max-width:780px){
   #template_11{padding:50px 20px;}
   #template_11:before{background-image:none;}
   #template_11 .container .video{width:100%;}
}
/* [SOBREVIVIENTES] */
#template_12{padding:70px 0 100px 0px;background-position:top left;background-repeat:repeat;color:var(--white-color);background-image: url('../files/equipo-back.png');min-height:500px;}
#template_12 .container .pagetitle{margin:10px auto;display:block;font-family: "Homemade Apple";width:400px;font-size:4rem;line-height:7rem;transform:rotate(-3deg);font-weight:100;text-align: center;}
#template_12 #slidervoces{width:100%;max-width:928px;margin:30px auto;}
#template_12 #slidervoces .slide{display: none;background-color:#EE4036;flex-direction:row;justify-content:center;border-radius:35px;min-height:328px;padding:30px;gap:40px;align-items: center;}
#template_12 #slidervoces .slide.active { display: flex; }
#template_12 #slidervoces .slide .img{width:30%;position:relative;}
#template_12 #slidervoces .slide .img img{width:100%;position:absolute;top:-190px;}
#template_12 #slidervoces .slide .text{width:70%;font-size:3.6rem;font-weight:bold;position:relative;}
#template_12 #slidervoces .slide .text span.fullname{font-family: "Homemade Apple";font-size:2.4rem;position:absolute;bottom:-50px; right:0;transform:rotate(-5deg);}

@media only screen and (max-width:780px){
    #template_12{padding:70px 20px;}
    #template_12 .container .pagetitle{transform:rotate(0deg);font-size:3rem;line-height:4rem;text-align:center;}
    #template_12 #slidervoces .slide{flex-direction:column;gap:20px;padding:20px;justify-content:center;align-items: center;}
    #template_12 #slidervoces .slide .img{width:100%;text-align:center;}
    #template_12 #slidervoces .slide .img img{position:relative;top:0;width:70%;}
    #template_12 #slidervoces .slide .text{width:100%;font-size:2rem;text-align:center;}
    #template_12 #slidervoces .slide .text span.fullname{transform:rotate(0deg);position:relative;bottom:0;font-family: var(--font-primary);font-weight:200;display:block;}
}

/* [ECOS DEL AYER, ARTISTAS DE HOY] */
#template_13 {padding:100px 0;background-color:#E5E3D6;}
#template_13 .container{width:100%;margin:0 auto;display: flex;flex-direction: column;justify-content: start;align-items: center;}
#template_13 .container .titleandcontent{display:flex;flex-direction:row;gap:10%}
#template_13 .container .titleandcontent .pagetitle{font-family: "Homemade Apple";font-size:3.2rem;color:#BD132D;width:35%;margin:0;padding:0;line-height:5rem;}
#template_13 .container .titleandcontent .content {width:55%;}
#template_13 .container .video{margin:50px auto;width:80%;height:500px;background-position:center center;border-radius:1em;background-size:cover;display:flex;flex-direction:row;justify-content:center;align-items: center;}
#template_13 .container .video button{background-color:transparent;border:0; width:130px;overflow:hidden;}
#template_13 .container .video button img{width:100%;}
#template_13 .container .external-link{width:278px;color:#000;text-decoration:none;background-color:#D9D9D9;padding:5px;border:1px solid #000;border-radius:1.5em;text-align:center;display:block;}

@media only screen and (max-width:780px){
    #template_13{padding:70px 20px;}
    #template_13 .container .titleandcontent{display:flex;flex-direction:column;gap:0;}
    #template_13 .container .titleandcontent .pagetitle,
    #template_13 .container .titleandcontent .content,
    #template_13 .container .video{width:100%;}
    #template_13 .container .titleandcontent .pagetitle{font-size:3rem;line-height:4rem;text-align:center;font-weight:200;}
    #template_13 .container .video{margin:10px 0;}
}
/* [ESCUCHA NUESTRO PODCAST] */
#template_14 {min-height:400px;background-color:#EE4036;display: flex;color:#FFFFFF;position:relative;padding:70px 0;}
#template_14:before{position:absolute;content:'';bottom:0;left:0;width:100%;height:100%;background-image:url('../files/ayudanos-bk.png');background-repeat:no-repeat;background-position: bottom left}
#template_14 .container{max-width:420px;margin:0 auto;text-align:center;}
#template_14 .container .pagetitle{font-family: "Homemade Apple";font-weight: 200;font-size:3.2rem;line-height:5rem;text-align:center;}
#template_14 .container .alias-title{border: 1px solid #FFF;padding: 10px;text-align: center;border-radius: 0.3em;display:block;max-width:220px;margin:0 auto;}

@media only screen and (max-width:780px){
    #template_14{padding:70px 20px 100px 20px;}
    #template_14 .container a{text-decoration:none;color:#FFFFFF;}
    #template_14:before{background-position: bottom center;background-size:250px;}
}

/* [FOOTER] */
#footer{height:auto;padding:50px 0;background-color:var(--red-color);color:var(--white-color);}
#footer .section-1 {display: flex;flex-direction: row;justify-content: space-between;align-items: center;border-bottom: 1px solid var(--white-color);padding-bottom: 30px;}
#footer .section-1 .social-media {display: flex;gap: 10px;justify-content: start;align-items: center;color:#E1D9C2;}
#footer .section-1 .social-media .icons{display: flex;flex-direction: row;gap: 5px;}
@media only screen and (max-width:600px){
   #footer .section-1{flex-direction: column;}
}
#footer .section-2,
#footer .section-3,
#footer .section-4{padding:10px 0;}
#footer .section-4 .images{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}

#footer .section-2{display: flex;flex-direction: row;justify-content: space-between;align-items: start;gap:2%;flex-wrap: wrap;margin-top:20px;} 
@media only screen and (max-width:1000px){
   #footer .section-2{flex-direction: column;}
}
#footer .section-2 .sub-section{display: flex;flex-direction: column;justify-content: center;align-items: start;gap:10px;width:46%;}
#footer .section-title{text-transform:uppercase;font-size:1.1rem;font-weight:500;}
#footer .section-2 .sub-section  .images{display: flex;flex-direction: row;justify-content: start;align-items: center;gap:20px;}

#footer .section-3{display: flex;flex-direction: row;justify-content: center;align-items: center;gap: 30px;}


@media only screen and (max-width:780px){
    #footer img{max-width:150px;width:100%;}
    #footer .section-2{flex-direction: row;}
    #footer .section-2 .sub-section .images{flex-direction: column;}
    #footer .section-3{align-items: start;gap:30px;flex-direction: row;flex-wrap: wrap;justify-content: start;}
    
    #footer .section-4 .images{flex-direction: row;align-items: start;gap: 30px;flex-wrap: wrap;justify-content: start;}
   
}