@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
:root{
    /*koloreak*/
    --berdea: #69AE2D;
    --urdina: #2239A9;
    --morea: #5F4285;
    --urdin-iluna: #212353;
    --gris-iluna: #4B5D68;
    --gris-argia: #E7E9ED;

    /*letra tipoak*/
    --ff-montserrat: 'Montserrat', sans-serif;
    --ff-avenir: sans-serif;

    /*letra tamañak*/
    --fs-h1:  clamp(2rem, -0.875rem + 6vw, 6.67rem);
    --fs-h2: clamp(1.5rem, -0.875rem + 4vw, 3.33rem);
    --fs-h3: clamp(1.4rem, -0.875rem + 3vw, 2.67rem);
    --fs-h4: clamp(1.25rem, -0.875rem + 2.5vw, 2rem);
    --fs-lead: clamp(1.25rem, -0.875rem + 2.25vw, 1.67rem);
    --fs-body-1: clamp(1.15rem, -0.875rem + 2.15vw, 1.5rem);
    --fs-body-2: clamp(1.0rem, -0.875rem + 2.05vw, 1.33rem);
    --fs-body-3: clamp(1.0rem, -0.875rem + 2.05vw, 1.33rem);
    --fs-small: clamp(.9rem, -0.875rem + 1.85vw, 1.17rem);
   

    /*line heights*/
    --lh-h1: 110%;
    --lh-h2: 130%;
    --lh-h3: 130%;
    --lh-h4: 130%;
    --lh-lead: 140%;
    --lh-body1: 160%;
    --lh-body2: 160%;
    --lh-body3: 160%;
    --lh-small: 160%;

    /*letra lodierak*/
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semiBold:600;
    --fw-bold: 700;
    --fw-black: 800;  

    /*egitura zabalerak*/
    --zabalera-max-edukia: 1120px;    
}
/*egitura*/
#content,
.container,
.ikapp9-bootstrap5-body.path-node .ikapp9-bootstrap5-content article.node--type-page, 
.ikapp9-bootstrap5-body.path-node.node--type-page .ikapp9-bootstrap5-content #block-local-barrio-page-title h1,
.ikapp9-bootstrap5-body.path-node.node--type-page .ikapp9-bootstrap5-content #block-ikapp-barrio-page-title h1{
    max-width: var(--zabalera-max-edukia) !important;
}
/*txantiloien tituluei kolorea kendu*/
#content .ikapp9-txantiloia h2,
#content .ikapp9-txantiloia h3,
#content .ikapp9-txantiloia h4,
#content .ikapp9-txantiloia h5 {
    color: unset;
}
/*plantillak grid-era egokitu*/
#content .ikapp9-bootstrap5-content article.node--type-page .irudiTestua, 
#content .ikapp9-bootstrap5-content article.node--type-page .testuaIrudiLuzea, 
#content .ikapp9-bootstrap5-content article.node--type-page .irudiLuzeaTestua {
    width: 100% !important;
    position: relative !important;
    left: unset !important;
    right: unset !important;
    margin-left: auto !important;
    margin-right: auto !important; 
}
/*oinarrizko orriak plantillak*/
.ikapp9-bootstrap5-content article.node--type-page .irudiTestua, 
.ikapp9-bootstrap5-content article.node--type-page .testuaIrudiLuzea, 
.ikapp9-bootstrap5-content article.node--type-page .irudiLuzeaTestua {
    width: 98.0vw;
    position: relative;
    left: 49%;
    right: 49%;
    margin-left: -49.2vw !important;
    margin-right: -49.2vw !important;
    margin-top: 3em !important;
    margin-bottom: 3em !important;
}
.testuaIrudiLuzea .testua,
.irudiLuzeaTestua .testua,
.irudiTestuLuzea .testua,
.testuLuzeIrudia .testua{
    background-color: var(--gris-iluna);
    padding: 1.5em;
}
.irudiLuzeaTestua .irudia {
    flex-grow: 1;
    flex-basis: 48%;
}
.irudiLuzeaTestua .testua {
    padding: 1.5%; 
}
.ikapp9-bootstrap5-content article.node--type-page .field--name-field-irudi-bilduma,
.ikapp9-bootstrap5-content article.node--type-page .testuakHiruZutabe {
    width: 100% !important;
    position: relative !important;
    left: unset !important;
    right: unset !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1em; 
}
.testuakHiruZutabe {
    gap: 2.5em; 
    padding: 3%;
}
.testuakHiruZutabe > div {
    flex-basis: 280px; 
}
/*txartelak*/
.txartelak {    
    display: flex;
    flex-wrap: wrap;
}
.txartelak > div{
    padding: 2em;
    border-radius: .5em;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
    flex-basis: 310px;  
    display: flex;
    flex-direction: column; 
}
.txartelak.lau-zutabe{
    gap: 1em;
}
.txartelak.lau-zutabe > div{
    flex-basis: 230px;
    padding: 1em;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
}
.txartelak div.btn.btn-tertiary,
.txartelak a.btn.btn-tertiary{
 text-align: left;
 margin-top: auto;
}
.irudiLuzeaTestua .testua,
.testuaIrudiLuzea .testua {
    flex-basis: 360px; 
}
/*tipografia estiloak*/
.h1{
    font-family: var(--ff-montserrat);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    color: var(--urdin-iluna);
    line-height: var(--lh-h1);
}
.h2{
    font-family: var(--ff-montserrat);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    color: var(--berdea);
    line-height: var(--lh-h2);
}
.h3{
    font-family: var(--ff-montserrat);
    font-size: var(--fs-h3);
    font-weight: var(--fw-regular);
    color: var(--urdin-iluna);
    line-height: var(--lh-h3);
}
.h4{
    font-family: var(--ff-montserrat);
    font-size: var(--fs-h4);
    font-weight: var(--fw-regular);
    color: var(--urdin-iluna);
    line-height: var(--lh-h4);
}
.lead{
    font-family: var(--ff-avenir);
    font-size: var(--fs-lead);
    font-weight: var(--fw-black);
    color: var(--urdin-iluna);
    line-height: var(--lh-lead);
}
.body1{
    font-family: var(--ff-avenir);
    font-size: var(--fs-body-1);
    font-weight: var(--fw-medium);
    color: var(--urdin-iluna);
    line-height: var(--lh-body1);
}
.body2{
    font-family: var(--ff-avenir);
    font-size: var(--fs-body-2);
    font-weight: var(--fw-medium);
    color: var(--gris-iluna);  
    line-height: var(--lh-body2);   
}
.body3{
    font-family: var(--ff-avenir);
    font-size: var(--fs-body-3);
    font-weight: var(--fw-black);
    color: var(--gris-iluna);  
    line-height: var(--lh-body3);   
}
.small,
figure figcaption,
.views-field-created span{
    font-family: var(--ff-avenir);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--urdin-iluna); 
    line-height: var(--lh-small);    
}
/*kolore klaseak*/
.berdea{
    color: var(--berdea) !important;
}
.urdina{
    color: var(--urdina) !important;
}
.urdin-iluna{
    color: var(--urdin-iluna) !important;
}
.morea{
    color: var(--morea) !important;
}
.gris-iluna{
    color: var(--gris-iluna) !important;
}
.gris-argia{
    color: var(--gris-argia) !important;
}
/*azpimarrak*/
.azpimarra-berdea{
    background-color: var(--berdea) !important;
    color: var(--urdin-iluna) !important;
}
.azpimarra-urdina{
    background-color: var(--urdina) !important;
    color: var(--gris-argia) !important;
}
.azpimarra-morea{
    background-color: var(--morea) !important;
    color: var(--gris-argia) !important;
}
.azpimarra-gris-argia{
    background-color: var(--gris-argia) !important;
    color: var(--urdin-iluna) !important;
}
.azpimarra-urdin-iluna{
    background-color: var(--urdin-iluna) !important;
    color: var(--gris-argia) !important;
}
/*botoiak*/
div.btn.btn-primary,
div.btn.btn-secondary,
a.btn.btn-primary,
a.btn.btn-secondary {
    width: fit-content !important;
    border-radius: 50px !important;
    padding: .75rem 1.75rem !important;
    display: block;
    margin: 1em 0;
}
div.btn-primary,
a.btn-primary{
    background-color: var(--urdina) !important;
}
div.btn-primary:hover,
a.btn-primary:hover{
    background-color: var(--morea) !important;
}
div.btn-secondary,
a.btn-secondary{
    background-color: white !important;
    border: 1px solid var(--urdina);
}
div.btn-secondary:hover,
a.btn-secondary:hover{
    background-color: white !important;
    border: 1px solid var(--urdina);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
div.btn > a,
a.btn{
    text-decoration: none !important;
}
div.btn.btn-primary > a,
div.btn.btn-primary > a:hover,
a.btn.btn-primary,
a.btn.btn-primary:hover{
    color: white !important;
}
div.btn.btn-secondary > a,
div.btn.btn-secondary > a:hover,
a.btn.btn-secondary,
a.btn.btn-secondary:hover{
    color: var(--urdina) !important;
}
div.btn.btn-tertiary > a,
a.btn.btn-tertiary{
    color: var(--urdina) !important;
}
div.btn.btn-tertiary > a:hover,
a.btn.btn-tertiary:hover{
    color: var(--berdea) !important;
}
div.btn.btn-tertiary,
a.btn.btn-tertiary{
    background-color: transparent !important;
    padding-left: 0;
}
div.btn.btn-tertiary > a:after,
a.btn.btn-tertiary:after {
    display: inline-block !important;
    content: "" !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2369AE2D" class="bi bi-arrow-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-size: 22px !important;
    background-position: 0px 0px !important;
    width: 24px !important;
    height: 17px !important;
    margin-left: .75em !important;
}