:root {
    --f_medium: 18px;
    --f_medium2: 16px;
    --f_subtitles: 26px;
    --f_subtitles2: 28px;
    --f_giant: 80px;
    --f_giant2: 48px;
    --f_capital: 122px;


    --f_small: 14px;
    --f_smaller: 12px;
    --constrictor_pad: 40px;
    --deconstrictor_pad: -40px;
    --h_menu_top: 48px;
    --m_botton_h: 40px;
    --large_separation: 80px;


    --fixed_header_height: 140px;


    --base_spacing: 24px;

    --base_spacingd2: calc(var(--base_spacing) / 2);

    --base_spacingx2: calc(var(--base_spacing) * 2);
    --base_spacingx3: calc(var(--base_spacing) * 3);
    --base_spacingx4: calc(var(--base_spacing) * 4);
    --base_spacingx5: calc(var(--base_spacing) * 5);
    --base_spacingx6: calc(var(--base_spacing) * 6);

    --box_spacing: var(--base_spacingx2);
    
    --sitea_maincolor: #992135;
    --siteb_maincolor: #2d79a4;
    
    --sitea_maincolor_hover: #801f2d;
    --quote_color: #666;


    --layout_max_width: 1200px;
    --layout_margin: var(--base_spacingx2);
    --layout_contents_width: 840px;
    --layout_contents_margin: var(--base_spacingx2);


  }

html{
    scroll-padding-top: 100px;
}

body{
    background-color: #f2f2f2;
    font-family: "Noto Sans";

    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--sitea_maincolor) #f2f2f2; /* Firefox */

}


::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--sitea_maincolor);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: #f2f2f2;
}



a{
    transition: color 0.3s ease, background-color 0.3s ease;
}


.notext{
    display:none;
}





#main_body{
    overflow:hidden;
    position:relative;
}

#page_header{
    position:fixed;
    transition: all 0.3s ease;
    z-index: 10;
    width:100%;
    background-color:rgba(255,255,255,0.9);
    padding: 40px 0;
}

.admin-bar #page_header{
    top: var(--wp-admin--admin-bar--height,0);
}




#page_header.fixed {
    left: 0;
    width: 100%;
    padding: 20px 0;
}



.constrictor{
    width:100%;
    max-width: calc(var(--layout_max_width) + 2*var(--layout_margin));
    padding: 0 var(--layout_margin);
    margin: 0 auto;    
}




#page_header .container{    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#page_header h1{
    margin:0;
}


#page_header .menu_caller{
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--base_spacing);

    font-family: "Noto Sans";
    font-size: 24px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:2px;

    transition: font-size 0.3s ease;
}


#page_header .menu_caller .section_home_page:before{
    content:'';
    display:inline-block;
    width:18px;
    height:18px;
    mask-image: url("../img/ico_reportatge.svg");
    mask-size:cover;
    background-color: var(--sitea_maincolor);
    transition: all 0.3s ease;
}

#page_header.fixed .menu_caller{
    font-size: 18px;
}

#page_header.fixed .menu_caller .section_home_page:before{
    width:13px;
    height:13px;
}




#page_header .menu_caller .section_home_page:hover{
    color: #000;
}

#page_header .menu_caller .section_home_page:hover:before{
    background-color: #000;
}

.menu_button:before{
    content:'';
    display:inline-block;
    width:44px;
    height:44px;
    background-image: url("../img/ico_menu.svg");
    background-position: center center;
    background-repeat:no-repeat;

    border:2px solid var(--sitea_maincolor);
    border-radius:50%;
    transition: all 0.3s ease;
}

.menu_button:hover:before{
    background-color:rgba(0,0,0,0.1);
}


.menu_button.close:before {
    border-color: #FFF;
    filter: brightness(0) invert(1);
    background-image: url("../img/ico_menu_close.svg");
}



#page_header.fixed .menu_button:before{
    width:24px;
    height:24px;
    border-color:transparent;
    border-radius:0;
}

#page_header.fixed .menu_button:hover:before{
    background-color: transparent;
    filter: brightness(0);
}


.capcelera #logo_entitat a {
    display: block;
    width: 300px;
    height: 60px;
    background-image: url(../img/logo_entitat.png);
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.2s ease;
}

.capcelera #logo_entitat a:hover {
    filter: grayscale(100%);
}


#page_header.fixed #logo_entitat a {
    width: 186px;
    height: 20px;
    background-image: url(../img/logo_entitat_resp.svg);
}

#main_menu{
    display:none;
    opacity:0;
    position:fixed;
    top: 0;
    left: 0;
    bottom:0;
    width: 100%;

    background-color: var(--sitea_maincolor);
    color: #FFF;
    z-index:99;

    transition: opacity .3s ease,
    display .3s ease allow-discrete; 


}


.admin-bar #main_menu{
    top: var(--wp-admin--admin-bar--height,0);
}

#main_menu.menu_open {
    opacity: 1;
    display: block;

    @starting-style {
        opacity: 0;
    }
}


#main_menu .header{
    padding: 40px 0;
    height:var(--fixed_header_height);
    background-color:rgba(0,0,0,0.2);
    margin-bottom: var(--base_spacingx2);

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#main_menu .header .container{

    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;

}

#main_menu .header .menu_button{
    position:absolute;
    right:0;
}

#main_menu .menu_title {
    display: block;
    width: 185px;
    height: 20px;
    background-image: url(../img/logo_entitat_resp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(0) invert(1);
}



#main_menu .language-switcher{
    margin-top:48px;
    border-top:1px solid rgba(0,0,0,0.1);
    padding-top:48px;

    font-size:16px;
    text-transform:uppercase;

}

#main_menu .language-switcher .langs{
    display: flex;
    gap: 12px;
    justify-content: center;
}

#main_menu .language-switcher span,
#main_menu .language-switcher a{
    display:inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    color:#FFF;

    border:1px solid rgba(255,255,255,0.5);
    border-radius: 30px;
    padding:10px 20px;
}

#main_menu .language-switcher a:hover{
    border-color: #FFF;
}

#main_menu .language-switcher a:hover,
#main_menu .language-switcher a.active{
    background-color: rgba(0, 0, 0, 0.2);
}


#reportatges-menu{

    text-align:center;
    font-size: 18px;
    text-transform:uppercase;
    font-weight:900;
}

#reportatges-menu li{
    margin-bottom: 12px;
}

#reportatges-menu a{
    display:inline-block;
    color:#FFF;
    padding: 12px 24px;
    border-radius: 50px;
}

#reportatges-menu a:hover{
    background-color: rgba(0,0,0,0.2);
}






#main {
    padding-top:var(--fixed_header_height);
}




.article_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--base_spacingx2) var(--base_spacing);

    margin-top: var(--base_spacingx2);
}

.article_list.one_item{
    grid-template-columns: 1fr;
    justify-items: center;
}


.article_list .featured-image {
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    position: relative;
}

.article_list .featured-image:before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

.article_list a:hover .featured-image:before {
    background-color: rgba(0, 0, 0, 0);
}

.article_list .entry-summary{
    position:relative;
    background-color:#FFF;
    padding: var(--base_spacing);
    margin: calc(-1*var(--base_spacing)) var(--base_spacing) 0;

    font-family: "Noto Sans";
    font-size: var(--f_medium);
    color: var(--sitea_maincolor);
    line-height:1.2;
}



.article_list .featured-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.article_list .entry-header-content{
    position:relative;

}
.article_list.one_item .entry-header-content{
    max-width: calc(50% - var(--base_spacingd2));
}

.article_list .entry-title{
    position:absolute;
    bottom:var(--base_spacing);
    padding: var(--base_spacing);
    margin:0;

    color:#FFF;
    font-family: "Noto Sans";
    font-size: var(--f_giant2);
    font-size: clamp(30px, 4vw, var(--f_giant2));
    font-weight:900;
    line-height:1;
    text-shadow: 0px 0px var(--f_giant2) rgba(0,0,0,1);
    overflow-wrap: anywhere;
}


.navigation_articles{
    margin-top:100px;
}

.navigation_articles.article_list .entry-title{
    bottom:0;
}


.navigation_articles .arrow{
    text-transform: uppercase;
    font-size:var(--f_small);
    color:#000;
    margin-bottom: var(--base_spacingd2);
}

.navigation_articles .nav-next .arrow{
    text-align:right
}

.navigation_articles .arrow:before,
.navigation_articles .arrow:after {
    content: '';
    display: inline-block;
    width: 0px;
    height: 20px;
    vertical-align: middle;
    background: url("../img/ico_arrow.svg") no-repeat right center;
    opacity:0;
    margin-left: 20px;
    margin-right: -20px;
    transition: all 0.3s ease;

}

.navigation_articles .nav-next .arrow:after {
    background-position: right center;
    margin-left: -20px;
    margin-right: 20px;
}

.navigation_articles .nav-next a:hover .arrow:after,
.navigation_articles .nav-previous a:hover .arrow:before {
    width: 30px;
    margin:0;
    opacity:1;
}

.navigation_articles .nav-previous .arrow:before {
    transform: rotate(180deg);
}




.hero{
    position:absolute;
    top:0;
    width: 100vw;
    /*margin-left: calc(-50vw + 50%);*/
    max-width: 100%;
    min-height:975px;
    z-index:-1;
    background-position:center top;
    background-size:cover;

    /*filter: saturate(0.7);*/
}

.hero.full-height{
    height:100vh;
}

.hero img{
    width: 100%;
    height: auto;
    display: block;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*filter luminosity*/
    /*background: rgba(0, 0, 0, 0.3); */
}

.n_hero .hero{display:none;}






















.single-reportatge article{

}


.single-reportatge article h1{
    font-family: "Noto Sans";
    font-size: var(--f_giant);
    font-weight:900;
    color: #000;
    line-height: calc(var(--f_giant)/8*7);
    letter-spacing: -2px;
    margin:0;
    overflow-wrap: anywhere;
}

.single-reportatge .w_hero article h1{
    color: #ffffff;
    text-shadow: 0px 0px 50px rgba(0,0,0,1);
    max-width: max(50%, 580px);
}

.single-reportatge .w_hero article .vhheight h1{
    text-shadow: 0px 0px 30px rgba(0,0,0,0.5);

}


.single-reportatge .article-header{
    /*padding: 140px, 0, var(--base_spacing), 0;*/
    align-content:center;
    position: relative;
    z-index: 1;
    color: #fff; 
}

.single-reportatge .article-header.centered{
    text-align:center;
}

.single-reportatge .article-header.vhheight{
    height:70vh;
}




.single-reportatge .article-header.centered h1{
    max-width:none;
}


.single-reportatge .w_hero .article-header{
    margin-top:0;
    min-height:650px;
}

.single-reportatge .n_hero .article-header{
    margin-top: 200px;
    text-align:center;
    margin-bottom: var(--base_spacingx4);

}

.single-reportatge .article-header .section{
    font-family: "Noto Sans";
    display:inline-flex;
    gap: 10px;    
    align-items: center;
    margin-bottom:30px;

    font-size: 20px;
    text-transform: uppercase;
    letter-spacing:2px;
}

.single-reportatge .article-header .section:before{
    content:'';
    display:block;
    width:18px;
    height:18px;
    mask-image: url("../img/ico_reportatge.svg");
    background-color: #FFF;
}

.single-reportatge .n_hero .article-header .section{
    color: var(--sitea_maincolor);    
}

.single-reportatge .n_hero .article-header .section:before{
    background-color: var(--sitea_maincolor);
}


.single-reportatge .h_list{
    display:flex;  
}

.single-reportatge article .article-info{
    position:relative;
    font-family: "Noto Sans";
    font-size:var(--f_small);

    max-width: var(--layout_contents_width);
    padding: var(--base_spacingd2);
    margin:0 auto;
    color:#FFF;

}

.single-reportatge article .article-info .rt_amount{
    font-weight:bold;
}

.single-reportatge article .article-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sitea_maincolor);
    mix-blend-mode: multiply;
    z-index: -1;

  }
  




  .single-reportatge article .article-info .h_list>div:not(:first-child){
    margin-left:var(--base_spacingd2);
    border-left:1px solid #FFF;
    padding-left:var(--base_spacingd2);

}


.single-reportatge article .entry-content{
    max-width: var(--layout_contents_width);
    padding: var(--layout_contents_margin);
    margin:0 auto;
    background-color:#FFF;
    font-family: "Noto Serif";
    line-height: calc(var(--f_medium)*1.9);
    font-size: var(--f_medium);

}


.single-reportatge article .entry-content .pf-content > p:first-of-type::first-letter {
    font-family: "Noto Sans";
    font-weight:900;
    font-size: var(--f_capital);
    color: var(--sitea_maincolor );
    margin-right: 5px;


    float: left; 
    line-height:0.7;
}

.single-reportatge article .entry-content .pf-content > p:last-of-type::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    mask-image: url(../img/ico_reportatge.svg);
    mask-size: cover;
    background-color :var(--sitea_maincolor);
    margin-left:0.5em;
}


.single-reportatge article .article-subtitle{
    color: var(--sitea_maincolor);
    font-family: "Noto Sans";
    font-size: var(--f_subtitles);
    font-weight: 300;
    margin-bottom:var(--base_spacingx2);
}

.single-reportatge article .entry-content h2:not(.article-subtitle){
    font-family: "Noto Sans";
    font-size: var(--f_subtitles);
    font-weight: 900;
    color: var(--sitea_maincolor);
    margin-top: var(--base_spacingx2);
    margin-bottom: var(--base_spacing);
}



.single-reportatge article blockquote{
    padding: 0px var(--base_spacingx2);
    border:0;
    margin:0;
    margin-bottom: var(--box_spacing);
    margin-top: var(--box_spacing);
}

.single-reportatge article blockquote p{
    font-size: var(--f_subtitles2);
    font-weight:bold;
    color: var(--quote_color);
    line-height: 34px;
}


.image-width-use_article_max_width{
    width: calc(var(--layout_contents_margin)*2 + 100%);
    margin-left:calc(-1*var(--layout_contents_margin));
    margin-right:calc(-1*var(--layout_contents_margin));
    
}


.image-width-use_layout_max_width{

    width: var(--layout_max_width);
    max-width: none;
    margin-left: calc(-1*(var(--layout_max_width) - var(--layout_contents_width))/2 - var(--layout_contents_margin));
}

.image-width-use_layout_max_width img{
    width: 100%;
    margin: 0;
}


article .pf-content *:last-child{
    margin-bottom:0;
}


.single-reportatge figure.wp-block-image{
    position:relative;
    margin-top: var(--box_spacing);
    margin-bottom: var(--box_spacing);
}

.single-reportatge figure.wp-block-image img{
    vertical-align: bottom;
}

.single-reportatge figure.wp-block-image figcaption{
    font-family: "Noto Sans";
    font-weight:600;
    font-size:var(--f_smaller);
    line-height:1.5;
    margin:0 var(--base_spacing);
    padding: 0.7em var(--base_spacingd2);
    position:absolute;
    bottom:0;
    background-color:rgba(255, 255, 255, 0.7);

}



.wp-block-embed.wp-has-aspect-ratio iframe {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.wp-block-embed.is-type-video.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
    content: "";
    display: block;
    padding-top: 56.25%;
}


.single-reportatge .aside_text_block{
    width:50%;
    float:right;
    margin-right: calc( -1*var(--base_spacingx4));
    margin-left: var(--base_spacingx2);
    margin-bottom: var(--box_spacing);

    background-color: var(--sitea_maincolor);
    padding: var(--base_spacingx2);
    color: #FFF;
    line-height: calc(var(--f_medium)*1.55);

}

.single-reportatge .aside_text_block h3{
    color:#FFF;
    font-size:var(--f_subtitles);
    font-family: "Noto Sans";
    font-weight:900;
    margin-top: 0;
    margin-bottom: var(--base_spacing);
}


.single-reportatge .aside_text_block figure.wp-block-image{
   margin: calc(-1* var(--base_spacingx2));
   margin-bottom: var(--base_spacingx2);

}

.single-reportatge .aside_text_block *:last-child{
    margin-bottom:0;
}






















#peu_pagina{
	overflow:hidden;
	padding-top:40px;
	padding-bottom:35px;
	border-top:1px solid #ccc;
	margin-top:100px;
	}
	


#peu_pagina  .menu{
	display:block;
	list-style:none;
	overflow:hidden;
	font-size: var(--f_small);
}

#peu_pagina .menu li{
	float:left;
	margin-left:20px;
}

#peu_pagina a{
	color:#000;
}

#peu_pagina .menu_info  .menu li a{
	color:#000;
	border-bottom: 1px dotted #666;
}








#peu_pagina hr{
	width:100%;
	border-top: 1px dotted #DDD;
	margin-bottom:24px;
}

#peu_pagina .flex2{
	margin-left:auto;
	margin-right:0;
	}

.flexed hr.flex3{margin-top:0;}



#logo_peu{
	float:left;
	display:block;

	width:min(100%,384px);
	max-width:100%;
	height:86px;
	background:url(../img/logo_urv.png) no-repeat left top;

	background-size: contain;
	margin-bottom:37px;
}

#logo_peu:hover{
	-moz-opacity:0.65;
	-webkit-opacity:0.65;
	opacity:0.65;
}

#peu_pagina .footer_row{
	position:relative;
	margin-bottom:40px;
	}


#peu_pagina .column-1{
	position:absolute;
	bottom:0;
	right:0;
}

#peu_pagina .on_som{
	font-size: var(--f_medium2);
    line-height: 1.5;

}

#peu_pagina h5 {
	color:var(--sitea_maincolor); 
	font-size: var(--f_medium);
	margin-bottom:15px;

}


#peu_pagina  .menu_legal a{border-bottom:1px dotted #000;}
#peu_pagina  .menu_legal a:hover{border-bottom:1px solid #000;}

#suggeriments {
	float: right;
	margin: 50px 0 0 0;
	font-size: 12px;
}


#peu_pagina #suggeriments a {
	display:inline-block;
	margin-right:0;

	padding: 12px 24px;
	border: 1px solid var(--sitea_maincolor);
	border-radius: 4px;
	font-size: 14px;
	color: var(--sitea_maincolor);
	text-decoration: none;
}


#suggeriments a:before{
	content:'\f0eb';
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
	font-size: 20px;
	display:inline-block;
	vertical-align:middle;
	line-height:14px;
	margin-right:0.5em
}

#suggeriments a:hover{  
    background-color:rgba(0,0,0,0.2);
}



#peu_pagina .tel_link,
#peu_pagina .mail_link,
#peu_pagina .gmaps_link{
	color:#666;
	border-bottom:1px dashed #666;
	font-size: var(--f_small);
	margin-left:15px;
	line-height:15px;
}

#peu_pagina .mail_link{
	margin-left:26px;
}

#peu_pagina p a{
	margin-right:1.5em;
}


#peu_pagina .gmaps_link::before{
	background:url(../img/ico_gmap.png) no-repeat left center;
}

#peu_pagina .tel_link::before{
	background:url(../img/ico_tel.png) no-repeat left center;
}

#peu_pagina .mail_link::before{
	background:url(../img/ico_mail.png) no-repeat left center;
}


#peu_pagina .tel_link::before,
#peu_pagina .mail_link::before,
#peu_pagina .gmaps_link::before{
	margin-left:-15px;
	content:'';
	display:inline-block;
	width:15px;
	height:15px;

	vertical-align:middle;

	-moz-opacity:0.5;
	-webkit-opacity:0.5;
	opacity:0.5;

}

#peu_pagina .mail_link::before{
	width:26px;
	height:16px;
	margin-left:-26px;
}

#peu_pagina .tel_link:hover,
#peu_pagina .mail_link:hover,
#peu_pagina .gmaps_link:hover{
	color:#000;

}


#peu_pagina .tel_link:hover::before,
#peu_pagina .mail_link:hover::before,
#peu_pagina .gmaps_link:hover::before{
	-moz-opacity:1;
	-webkit-opacity:1;
	opacity:1;
}





#peu_pagina .res_footer{
	background-color:var(--sitea_maincolor);
	padding:15px 0 10px;
	color:#FFF;
}

#peu_pagina .res_footer a{color:#FFF;}

#peu_pagina .extrasec .ambits{background-image:url(../img/logo_ambits2_min.png);}





#peu_pagina a.btn_subs_butlleti{
	display:inline-block;
	background:url(img/btn_decor_butlleti.png) no-repeat 30px center var(--sitea_maincolor);
	border-radius: 3px;
	padding:20px 30px 20px 70px;
	color:#FFF;
	font-weight:bold;
	font-size:90%;
}

#peu_pagina a.btn_subs_butlleti:hover{
	background-color:#801f2b;
}


#peu_pagina  .menu
{
	float:right;
	margin: 0;
}

#peu_pagina .menu_social .menu{
	margin-top:60px;
}

#peu_pagina .menu_social .menu li{
	margin-left:2px;
}

.menu_social .menu li a{
    position:relative;
	padding-left:22px;
	line-height:22px;

	background-position:left top;
	background-repeat:no-repeat;
	border:0;

    text-indent: -9999px;
    overflow: hidden;
    display: block;

    margin-left: var(--base_spacing);





}

.menu_social .menu li a:hover{
	color:var(--sitea_maincolor);
}

#peu_pagina .menu_social a:hover{color:var(--sitea_maincolor);}



footer .menu_social .menu li a:before{
	display:block;
    position:absolute;
    top:0;
    right:0;
    vertical-align: middle;
	width:22px;
	height:22px;
    background-color:#000;
    transition: all 0.3s ease;
}

footer .menu_social .menu li a:hover:before{
    background-color: var(--sitea_maincolor);
}

.menu_social .menu li.twitter a:before{	
	content:'';
	mask: url(../img/ico_x.svg) no-repeat center center;
	/*content:"\f081";*/
}

.menu_social .menu li.facebook a:before{
	content:'';
	mask: url(../img/ico_facebook.svg) no-repeat center center;
	/*content:"\f082";*/
}

.menu_social .menu li.linkedin a:before{	
	content:'';
	mask: url(../img/ico_linkedin.svg) no-repeat center center;
	/*content:"\f08c";*/
}

.menu_social .menu li.youtube a:before{	
	content:'';
	mask: url(../img/ico_youtube.svg) no-repeat center center;
	/*content:"\f431";*/
}

.menu_social .menu li.instagram a:before{
	content:'';
	mask: url(../img/ico_instagram.svg) no-repeat center center;
	/*content:"\e055";*/
}




/* decoracio header menu */


.grafmenu-container ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;

}


.grafmenu-container h4{
    font-family: "Noto Sans";
    color: var(--sitea_maincolor);
    font-size: var(--f_small);
    margin:0;
    font-weight:normal;
}


@media (max-width: 899px) {

    .single-reportatge .article-header.centered {
        text-align:left;
    }

    .grafmenu-container{
        margin-top:30px;
    }

    .grafmenu-container ul{
        flex-wrap: wrap;
        gap: 12px;
    }

    .grafmenu-container img{display:none;}


    .grafmenu-container a{
        display:block;
        border-radius: 5px;
        padding: 5px 10px;
        background-color: rgba(255,255,255,0.9);
    }

    .grafmenu-container a:hover{
        background-color: #FFF;
    }


    .grafmenu-container li p{
        display:none;
    }
}




@media (min-width: 900px) {

    .grafmenu-container {
        max-width: var(--layout_contents_width);
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        margin: 120px auto 0;

    }

    .grafmenu-container ul {
        justify-content: center;
        gap: 20px;
        width: 100%;
    }

    .grafmenu-container li {
        position: relative;
        flex:1;

        opacity: 0;
        transform: translateY(-100%);
        transition: all 500ms ease;
    }

    .grafmenu-container li.visible{
        opacity: 1;
        transform: translateY(0);
    }


    .grafmenu-container li::before {
        content: '';
        display: block;
        padding-top: 100%;
    }


    .grafmenu-container li::after {
        content: '';
        display: block;
        position: absolute;
        inset: -2px;
        border: 6px solid transparent;
        border-radius: 50%;
        transition: all 200ms ease;
        pointer-events: none; /* Make it transparent to mouse events */
    }

    .grafmenu-container li:hover::after {
        content: '';
        display: block;
        position: absolute;
        inset: -2px;
        border: 6px solid #FFF;
        border-radius: 50%;
        pointer-events: none; /* Make it transparent to mouse events */
    }

    .grafmenu-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 3px solid white; /* Borde inicial de 3px */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        object-fit: cover;
        box-sizing: border-box;
        filter: grayscale(100%); /* Imagen en blanco y negro */
        transition: all 200ms ease; /* Transición suave para todos los cambios */
    }

    .grafmenu-container li:hover img {
        filter: grayscale(0%);
    }

    .grafmenu-container .gm-info {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: calc(100% + var(--base_spacing));
        background-color: rgba(255, 255, 255, 0.9);
        color: var(--sitea_maincolor);
        font-size: var(--f_small);

        max-width:200px;

        backdrop-filter: blur(4px);
        padding: 10px;
        border-radius: 8px;
        width: max-content;
        min-width: 150px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        opacity: 0;
        visibility: hidden;
        transition: opacity 200ms ease, visibility 200ms ease; /* Ajustada a 200ms */
        z-index: 1;


    }

    .grafmenu-container li:hover .gm-info {
        opacity: 1;
        visibility: visible;
    }


    .grafmenu-container .gm-info h4{
        text-transform: uppercase;
        font-weight:bold;
    }

    .grafmenu-container .gm-info *:last-child{
        margin-bottom:0;
    }


}




/*plugin specific*/

/*peu de lightbox*/
.slb_details {display:none;}

/*pdf print friendly*/
.printfriendly.pf-button {
    display: none;
}

.progress-wrap.active-progress {
    opacity: 0.5 !important;
}




@media (max-width: 1224px) {
    .image-width-use_layout_max_width {
        width: calc(var(--layout_contents_margin)*2 + var(--layout_margin)*2 + 100%);
        margin-left:calc(-1*var(--layout_contents_margin) - var(--layout_margin));
        margin-right:calc(-1*var(--layout_contents_margin) - var(--layout_margin));
    }
}


@media (max-width: 911px){

    /*peu*/

    #subs_butlleti{
        width:100%;

        }

    #peu_pagina .column-1{
        position:static;
        width:100%;
        text-align:center;

        margin-top:50px;
        border-top:1px dashed #999;
        padding-top:50px;
    }

    #peu_pagina .menu_recursos {
        display:inline-block;
        float:none;
    }

    #logo_peu{
        float:none;
        margin:0 auto;
    }


    .inner_footer .flex{
        width:100%;
        margin-right:auto;
        margin-left:auto;
    }

    #peu_pagina .reordeable{
        display:grid;
    }

    .inner_footer .flex1{order:1;}
    .inner_footer .flex4{order:2;}
    .inner_footer .flex3{order:3;}
    .inner_footer .flex2{order:4;display:block;}
    .inner_footer .flex5{order:5;}

    #peu_pagina {text-align:center;}

    #peu_pagina .menu{
        display:inline-block;
        display:inline-flex;
        float:none;
        margin:0 auto;
        }

    #peu_pagina .menu_social .menu{
        margin-bottom:20px;
        margin-top:20px;
    }

    #peu_pagina #suggeriments{float:none;}

    #peu_pagina h5 {
        margin-top:25px;

    }

}




@media (max-width: 850px) {

    .single-reportatge .aside_text_block{
        width: calc(100% + var(--layout_contents_margin) * 2 );
        float:none;
        /*margin-left: calc(-1* var(--layout_contents_margin));*/
        margin-left:0;
        margin-right: calc(-1* var(--layout_contents_margin) - var(--layout_margin));
        margin-top:var(--box_spacing);
    }



    .single-reportatge .w_hero .article-header{
        min-height: 420px;
    }

    .single-reportatge .n_hero .article-header {
        margin-top:120px;
    }




}



@media (max-width: 768px) {

    :root {   
        --base_spacing: 12px;

        --box_spacing: var(--base_spacingx3);

        --layout_margin: var(--base_spacing);
        --layout_contents_margin: var(--base_spacing);

        --f_medium: 16px;
        --f_medium2: 14px;
        --f_subtitles: 22px;
        --f_subtitles2: 20px;
        --f_giant: 50px;
        --f_giant2: 36px;
        --f_capital: 88px;




        --f_small: 14px;
        --f_smaller: 12px;
        --fixed_header_height: 0px
    }


    #page_header{
        top:auto;
        padding: 15px 0;
        position:relative;
    }

    .admin-bar #page_header{
        top:auto;
    }

    #logo_entitat{
        display:none;
    }

    #page_header .menu_caller{
        width:100%;
        font-size:20px;
    }

    #page_header.fixed .menu_caller .section_home_page:before,
    #page_header .menu_caller .section_home_page:before {
        width: 28px;
        height: 28px;
        float:left;
        margin-top:3px;
        margin-right: 7px;
    }

    #page_header .menu_caller .section_home_page:after{
        content:'';
        display:flow-root;
        margin-top:2px;
        margin-left: 37px;
        height: 10px;
        background: url(../img/logo_urv_min.svg) no-repeat left center;
        
    }
    

    #page_header .menu_button:before {
        border:0;
        /*width: 24px;
        height: 24px;
        border-color: transparent;
        border-radius: 0;*/
    }

    #main_menu .header .container{
        justify-content: flex-start;
   
    }

    .article_list{
        margin-top: var(--base_spacing);
    }


    .single-reportatge article h1{
        line-height:1;
    }

    .single-reportatge article .entry-content {
        line-height: calc(var(--f_medium)* 1.6);
    }

    .single-reportatge .article-header .section{
        display:none;
    }

    .single-reportatge article .article-subtitle{
       margin-bottom: var(--base_spacingx4);
    }

    .single-reportatge article .article-info{
        padding: var(--base_spacing);
    }

    /*
    .single-reportatge figure.wp-block-image figcaption{
        position:static;
        padding:0;
        margin-top: var(--base_spacingd2);
    }*/

    .single-reportatge article .entry-content h2:not(.article-subtitle) {
        margin-top: var(--base_spacingx3);
        margin-bottom: var(--base_spacingx2);

    }

    .single-reportatge article blockquote p{
        line-height: 26px;
    }

    .article-info .read-time .rt_text{display:none;}
    .article-info .read-time .rt_amount:before{
        content:'';
        display:inline-block;
        width:16px;
        height:16px;
        background-image: url("../img/ico_time.svg");
        background-size: cover;
        vertical-align: middle;

    }


    .article_list:not(.navigation_articles) {
        grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr));
        gap: var(--base_spacingx4) var(--base_spacing);
    }


    .article_list.navigation_articles .featured-image {
        aspect-ratio: 1 / 1;
    }

    .navigation_articles .entry-title {
        font-size: var(--f_subtitles2);
    }

    #peu_pagina #menu-menu-peu{
        display:grid;
        gap:20px;
    }

    #peu_pagina .menu li {
        float:none;
        margin-left:0;
    }


    #peu_pagina .on_som a{
        display:block;
        padding:0;
        border:0;
        margin:0 0 1em;
        text-decoration:underline;
    }

    .progress-wrap.btn-right-side {
        right: 25px !important;
        bottom: 25px !important;
    }

}










@media (max-width: 425px) {

    .article_list .featured-image {
        aspect-ratio: 1 / 1;
    }

}