@charset utf-8;
/*
Theme Name: Unió
Author: Ricardo Juárez
Author URI: http://rjvv.com/
Version: 1.0
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Copyright: (c) 2020 Ricardo Juárez
*/

:root {
    --small: 16px;
    --body: 18px;
	--h2: 26px;
    --h1: 34px;
    --line: 1;
    --sans: 'Gerstner', sans-serif;
   --primary: #FFF;
   --gris: rgb(220, 220, 220);
   --contrast: #000;
   --accent: rgb(255, 252, 82);
   --accent2: #803fff;
   --accent3: #ff7000;
}


*{
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
            -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;

}
html, body
{
margin:0;
font-size:100%;
width:100%;
background-color: var(--primary);

     }
     
     	html { margin-top: 0px !important; }
	* html body { margin-top: 0px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 0px !important; }
		* html body { margin-top: 0px !important; }
	}

body {
         display: flex;
  min-height: 100vh;
  flex-direction: column;     
margin:0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; 
font-size: var(--body);
font-family: var(--sans);
color: var(--contrast);
}

/*
.post p:first-of-type, .post p:first-of-type strong, .post p:first-of-type b{
	font-size: var(--h2);
		line-height: 1.3;
	font-weight: normal !important;
}
*/

.small.contacte a{
	color: var(--contrast);
}

.title{
		max-height: 100vh;
	overflow: auto;
padding-bottom: 85px;
	position: sticky;
	top: 20px;
	height: fit-content;
}

.title h1{
	font-size: var(--h1);
}


h1, h2{
	font-size: var(--h2);
}
h3, h4{
	font-size: var(--body);
	
}
h1, h2, h3, h4{
	font-weight: normal;
}

h1, h2, h3, h4{
	margin-bottom: 1.2em;
		line-height: 1.2;
}


header{
}

.page-template-portada #main, .home #main{
	padding-bottom: 225px;
}
#main{
	flex: 1;
	padding-bottom: 55px;
}
.wpcf7-acceptance{
	display: block;
}


.wp-caption{
	max-width: 100%;
	width: 100% !important;
}
.wp-caption-text{
	font-size: var(--small) !important;
margin-top: 8px;
}

a .wp-caption-text{
	color: var(--contrast);
}

.post.columna img{
	max-height: 550px;
	width: auto;
	max-width: 100%;
}

.size-thumbnail{
	width: auto;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}

#tabs{
	display: flex;
	flex-wrap: wrap;
}
.tabs{
	margin-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
}

.tabs li{
	margin-bottom: 10px;
}

.div-formacio{
	display: none !important;
}
.filter-block p{
	margin-bottom: 10px !important;
}

#tabs > span{
		margin-bottom: 10px;
	display: inline-block;
	margin-right: 30px;
}
.post-content .tabs a{
	color: var(--contrast);
}
.tabs a:before{
	content: '';
	display: inline-block;
	     height: 12px;
     border-radius: 12px;
     width: 12px;
     border: 1px solid var(--contrast);
     margin: 0 5px 0px 0;
}

.tabs .ui-tabs-active a:before, .tabs a:hover:before{
	background-color: var(--contrast);
}


#loader{
    width: 100%;
    left: 0;
    height: 100%;
top: 0;
		z-index: 9;
		position: absolute;
		background-color: var(--primary);
	display: none;
}


.associ{
	margin-right: 30px;
}
.carnet{
    width: calc((100% - 40px) / 2);
    position: absolute;
    right: 0;}



[id^="menu-main"], [id^="menu-lang"], [id^="menu-footer"]{

}
 [id^="menu-footer"]{
	 justify-content: space-between;
 }


[id^="menu-lang"]{
	justify-content: flex-end;
}

[id^="menu-main"]{
	position: fixed;
	bottom: 0%;
	transform: translateY(75%);
	transition: all 0.2s ease-in-out;
	left: 0;
	width: 100%;
	z-index: 9999999;
	padding: 20px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
[id^="menu-main"]:hover, .page-template-portada [id^="menu-main"],  .home [id^="menu-main"]{
	transform: translateY(0%);
}

[id^="menu-main"] li{
	transition: all 0.2s ease-in-out;
	padding-bottom: calc((100% - 120px) / 7);
	flex-basis: calc((100% - 120px) / 7);
	height: 0;
	position: relative;
border-radius: 100%;
}
[id^="menu-main"] li:hover{
	padding-bottom: calc((100% - 120px) / 6);
	flex-basis: calc((100% - 120px) / 6);
	transform: rotate(-45deg);
	font-size: 110%;
}

[id^="menu-main"] li a:hover, [id^="menu-main"] li.current-menu-item a{
	background-color: var(--accent);
}

[id^="menu-main"] li.current-menu-item a:hover{
	transform: none;
}
[id^="menu-main"] li.current-menu-item a{
	transform: rotate(-45deg);
}


[id^="menu-main"] li.smallcase a{
	text-transform: none;
	transform: rotate(-0deg) !important;
}

[id^="menu-main"] li a{
	padding: 10px;
border-radius: 100%;
background-color: var(--gris);	
	display: flex;
	align-items: center;
height: 100%;
position: absolute;
top: 0;
width: 100%;
text-align: center;
text-transform: uppercase;
	justify-content: center;
}

[id^="menu-mobile"] {
text-transform: uppercase;
font-size: var(--h2);
margin-top: 70px;	
}
[id^="menu-mobile"] li{
	margin-bottom: 10px;
}



.filters{
	width: 100%;
	display: flex;
}
.filter-box{
	flex: 1;
}

.filter-block{
	position: relative;
	flex-wrap: wrap;
	display: flex;
	margin-bottom: 20px;
}
.filter-block div{
	margin-bottom: 10px;
}




.filter-block > p, .filter-block label{
	margin-right: 30px;
}
.meta{
	font-size: var(--small);
	margin-bottom: 7px;
}

.actualitat{
	display: flex;
	justify-content: space-between;	
flex-wrap: wrap;
}

.regular{
			flex-basis: calc((100% - 40px) / 2);
}
.formacio{
			flex-basis: calc((100% - 80px) / 3);	
}

.page-template-mitjans .filter-block{
	margin-bottom: 0;
}
.associats{
	width: calc((100% - 40px) / 2);	
display: inline-block;
    float: right;
color: var(--accent3);
    }
.filter-block p{
margin-bottom: 0;
line-height: inherit !important;
}

.filter-flex{
	display: flex;
	flex-wrap: wrap;
flex: 1;}


.filter-flex div{
	margin-bottom: 10px;
/* 	flex-basis: calc(100% / 6); */
}

.small{
	font-size: var(--small);
}
.columnas{
	display: flex;
	justify-content: space-between;
}
.columna{
	flex-basis: calc((100% - 40px) / 2);
}

.mensaje {
  overflow: hidden;
  white-space: nowrap;
  padding: 20px 0 0;
}

.marquee {
  animation: marquee 50s linear infinite;
  display: inline-block;
  padding: 0 20px;
}

.buscador{
	display: flex;
	align-items: center;
	border-bottom: 1px solid;
	padding-bottom: 10px;
}
#site-search{
	border-bottom: none;
	width: auto;
	margin-left: 20px;
	margin-bottom: 0;
	flex: 1;
	padding: 0;
}

.notfound{
	color: var(--accent2);
	display: block;
	margin: 20px 0;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to { 
    transform: translateX(-100%);
  }
}
.manual-row.manual-head{
	text-transform: uppercase;
	padding: 20px 0 15px;
	font-size: var(--small);

	background-color: white;
}

.manual-row.manual-head{
position: sticky;
top:0;}


.manual-row div p:last-of-type{
	margin-bottom: 0;
}

.manual-row{
	font-size: var(--small);	display: flex;
	padding: 15px 0;
	border-bottom: 1px solid var(--contrast);
	justify-content: space-between;
}
.col-1{
	flex-basis: calc((100% - 160px) / 6);
}
.col-2{
	flex-basis: calc(((100% - 160px) / 6) * 2);
}


.columnas ul, .columnas ol{
	padding-left: 14px;
	margin-bottom: 25px;
	margin-top: -25px;
}

.columnas li{
		line-height: 1.4;
}
.columnas li:before{
content: '\25CF';
display: block;
position: absolute;
border-radius: 100%;
margin-left: -14px;

}

.post-content{
	padding: 20px;
}
.post-content p{
	margin-bottom: 25px;
	line-height: 1.4;
}
.post-content a, .contacte a{
	color: var(--accent2);
}

.post-content h2 a{
	color: var(--contrast);
}

.cate{
	display: inline-block;
	margin-left: 10px;
	text-transform: uppercase;
}

.reverse{
	flex-direction: row-reverse;
}

input[type="submit"]:hover{
     background-color: var(--contrast);
     color: var(--primary);
}
input[type="submit"]{
	padding: 5px 20px;
	margin-bottom: 20px;
	 -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     background-color: var(--primary);
     font-family: var(--sans);
     color: var(--contrast);
     border: 1px solid var(--contrast);
     cursor: pointer;
     border-radius: 25px;
     cursor: pointer;
     outline: none;
     font-size: var(--small);
}

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

.wpcf7 form .wpcf7-response-output {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}


input[type="text"],
input[type="tel"], 
input[type="email"], 
input[type="password"]{
	padding: 10px 0px;
	margin-bottom: 20px;
	 -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: var(--primary);
     font-family: var(--sans);
     color: var(--contrast);
     border:none;
     border-bottom: 1px solid var(--contrast);
     width: 100%;
     border-radius: 0px;
     outline: none;
     font-size: var(--small);
}
input[type="text"]:hover, input[type="text"]:focus, 
input[type="tel"]:hover, input[type="tel"]:focus, 
input[type="email"]:hover, input[type="email"]:focus,
input[type="password"]:hover, input[type="password"]:focus{
} 

input[type="checkbox"]
{
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: var(--primary);
     color: var(--contrast);
     height: 12px;
     border-radius: 0;
     width: 12px;
     cursor: pointer;     
     outline: none;
     border: 1px solid var(--contrast);
     margin: 0 5px 0px 0;
}
.wpcf7-list-item{
	margin: 0 !important;
}

input[type="checkbox"]:hover
{
     background-color: var(--contrast);
}
input[type="checkbox"]:checked
{
background-color: var(--contrast);
}


.menu-hover{
	position: fixed;
	top:0px;
	width: 100%;
	height: auto;
	min-height: 100%;
	max-height: -webkit-fill-available;
	padding: 20px 20px;
	z-index: 999999;
	display: none;
}

.menu-int{
		overflow: auto;
}

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

#cookies{
	
	font-size: var(--small);
	display: none;
	padding: 20px 40px;
	background-color: var(--gris);
	color: var(--contrast);
	text-align: center;
}
#cookiesaccept{
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: var(--body);
	cursor: pointer;
padding: 10px;
text-transform: uppercase;
display: inline-block;
margin-left: 20px;
}

		  
@media all and (-ms-high-contrast:none){}