@import url("https://fonts.googleapis.com/css?family=Sofia+Sans:700,500,600,400");

@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
    font-family: Arial;
    font-weight: 400;
    size-adjust: 96.55%;
    ascent-override: 100%;
    line-gap-override: 3%;
    src: local(Arial);
}


body{color:#262626;font-family: 'Sofia Sans', Arial, Verdana, Sans-serif;font-size:18px}


/************************** CAPÇALERA *******************************/

.header {margin:auto;width:100%;}
.taca-grisa{position:absolute;height:420px;width:100%;	background-color:#E8ECED;}

.header-fons-cap{background-image:url(img/Fons2.png); background-position:top right;background-repeat: no-repeat; background-size:550px; width:100%; height:510px; position:absolute;} 

.header-fons-cap-contingut{position:absolute; top:7px;	right:50px;	padding:5px; z-index:11} 
a#btn-contacto {text-transform: uppercase;color: white;background-color: #DC070F;font-family:'Sofia Sans', Arial, Verdana, Sans-serif;border-radius:25px;padding:15px;letter-spacing: 2px;font-weight:600}
a#btn-contacto:hover {color: #DC070F;background-color: white;border:1px solid #DC070F;}

.subheader{ color:red; font-weight:700; font-size:40px;	background-color:transparent;height:500px}

.subheader .navbar-default{background-color:transparent;color:#DC070F;height:100px;border-radius:0px;margin:0;z-index: 10;border-color:transparent}
.subheader .navbar-left  {padding-left:50px;margin-left:20%}
.subheader .navbar-default .navbar-nav > li {background-color:#E8ECED;text-transform:uppercase;font-size:15px;padding-left:25px}
.subheader .navbar-default .navbar-nav > li.nav-ultim {border-radius:0px 25px 25px 0px}
.subheader .navbar-default .navbar-nav > li > a {color:#D4070E/*DC070F*/;font-family:'Sofia Sans', Arial, Verdana, Sans-serif;font-weight:600}
.subheader .navbar-default .navbar-nav > li.nav-contacto {display:none}

.subheader .navbar-brand {margin-left:15px}
.subheader .navbar-brand svg {max-width:250px;}
.subheader .navbar-brand img {max-width:235px;margin-left:10%}

.bloc-lema{z-index:10;position:relative;max-width:95%}
.cap-lema, .desc-lema{text-align:left;color:#262626;font-size:45px; font-weight:700;font-family:'Sofia Sans', Arial, Verdana, Sans-serif;max-width: 60%;margin:50px auto 0px 10%;padding: 10px 20px 10px 0px;line-height:1.1;background-color: #E8ECED;border-bottom-right-radius: 20px;display:inline-block;}
.desc-lema{font-size:30px; font-weight:400;margin:10px auto 15px 10%;}
.subheader  .navbar-default .navbar-toggle .icon-bar { background-color: #DC070F;}
.subheader .navbar-default .navbar-toggle{border-color:#DC070F;}


/************************ CONTINGUTS ********************************/

.titol-seccio{color: #DC070F;  font-weight: 600;  margin-bottom: 30px;  font-size: 30px;  border-bottom: 1px solid #DC070F;}

.block-event {display: inline-block; width: 33%;padding-left:10px;vertical-align:top;margin-bottom:10px;}
.proxim-event {padding:10px}
.proxim-event .cartell-event img {max-width:100%}
.proxim-event .titol-event {text-transform:uppercase;font-weight:700;font-size:20px;margin-top:10px}
.proxim-event .localitzacio-event {font-weight:600;font-size:18px;margin-top:10px}

.events-preparacio {text-align:center;margin-bottom:20px}
.events-preparacio a {color: white !important; background-color: #333; font-size: 18px; font-weight: 700; text-transform: uppercase; padding: 15px 50px; border-radius: 25px;  margin-top: 10px;}
.events-preparacio a:hover{color:white}

.events-preparacio2 {text-align:center;margin-bottom:20px}
.events-preparacio2 a.events-preparacio-interns {color: white !important; background-color: #333; font-size: 18px; font-weight: 700; text-transform: uppercase; padding: 15px 40px; border-radius: 25px;  margin-top: 10px;margin-left:10px}
.events-preparacio2 a.events-preparacio-interns:hover{color:white}
.events-preparacio2 a.events-externs {color: #333; background-color: white; font-size: 18px; font-weight: 700; text-transform: uppercase; padding: 15px 40px; border-radius: 25px;  margin-top: 10px;margin-left:10px;border:1px solid #333}



.block-event2 {text-align:center}


/*Per centrar columnes imparells*/
.row.text-center > div { display: inline-block; float: none;margin-top:15px}


.titol-area {color:#D4070E;font-size:22px;font-weight:700;text-transform:uppercase;text-align:center;/*border-bottom: 3px #D4070E dotted;*/
  padding-bottom: 10px;}
 .titol-area button {color:#D4070E;border: none;  background: white;  text-transform: uppercase;}

.llistat-jornades {margin-top:20px}
.llistat-jornades ul {padding:0px}
.titol-jornada {display: inline-block; width: 33%;padding-left:10px;vertical-align:middle;margin-bottom:10px}
.titol-jornada a {border: 1px solid #262626;border-radius: 30px;display: block;font-size: 18px;font-weight: 500; color: #000000;padding: 12px 25px 12px 30px; position: relative;transition: all 0.3s ease 0s;line-height: 1.4;text-decoration: none;}
.titol-jornada a:hover{color:#FFFFFF;background-color:#D4070E;border-color:#D4070E;}

/**filtres**/
.is-hidden { display: none;}
.is-visible {display: block;}

.rao {margin-top:20px;height:300px}
.img-rao img {width:90px;border:1px solid #D4070E}
.titol-rao {font-weight:700;font-size:25px}
.desc-rao {font-weight:400}

.text-extra {color:#D4070E;font-size:25px}
ul.modalitats {list-style-type:square}
ul.modalitats li::marker {color: #D4070E;}

.assistir {text-align:center}
.boto-vermell, .boto-blanc {height:60px;display:inline-block}
.boto-vermell a {font-weight:700; padding: 15px 50px; border-radius: 25px; background-color: #DC070F; color: white; vertical-align: middle; text-align: center; position: relative;  text-transform: uppercase; margin-left: 10px;}

.boto-blanc a {font-weight:700; padding: 15px 50px; border-radius: 25px; background-color: white; color: #DC070F; vertical-align: middle; text-align: center; position: relative;  text-transform: uppercase; margin-left: 10px;border:2px solid #DC070F;}

.boto-ver-mas {text-align: center;display:none}
.boto-ver-mas a {font-weight:700; padding: 15px 20px; border-radius: 25px; background-color: #DC070F; color: white; vertical-align: middle;  position: relative;  text-transform: uppercase; margin-left: 10px;cursor:pointer;}

.peu {color:#FFFFFF;margin-top:30px}
.titol-peu {font-size:22px;font-weight:700}

#contacto a {color:#FFFFFF;font-weight:700}
#contacto .form-control{background-color:#494848;border:none;border-radius:0px;font-size:20px;padding:25px 20px;color:white}
#contacto .form-control::placeholder{color:white}
#contacto button {background-color:#D4070E;border-radius:25px;color:white;border-color:#D4070E;text-transform:uppercase;font-size:18px;font-weight:700;padding:5px 50px}

.text-peu {color:white;margin-top:20px;margin-bottom:50px;text-align:center;text-transform:uppercase; }
.text-peu a {color:white;font-weight:700}
.separacio-50{margin-top:50px}
.separacio-30{margin-top:30px}

/***Esdeveniments en preparació***/
 
.titol-event-preparacio {text-decoration:none; color: #000000; font-weight:700; font-size:22px}
.event-preparacio div {padding:0}
.event-preparacio p {margin-bottom:5px}


/************************ MEDIA QUERIES *****************************/


@media screen and (max-width: 1840px) {
.cap-lema{font-size:40px;max-width: 55%;margin-left:5%;}
.desc-lema{font-size:25px;max-width: 55%;margin-left:5%;}
.subheader .navbar-left  {padding-left:0px;margin-left:10%}

}

@media screen and (max-width: 1148px) {
	.subheader .navbar-left {  padding-left: 50px; margin-left: 0;}
}

@media screen and (max-width: 1380px) {
.bloc-lema{max-width: 80%;}
 .subheader .navbar-default .navbar-nav > li.nav-ultim a:hover {border-radius:0px 25px 25px 0px}
.subheader .navbar-left  {margin-left:10px}
}

@media screen and (max-width: 1200px) {
	.boto-vermell a, .boto-blanc a{padding: 15px 20px;}
	.rao {height:320px}
}

@media screen and (max-width: 1148px) {
	.subheader .navbar-left {  padding-left: 50px; margin-left: 0;}
}

@media screen and (max-width: 1080px){

	/*Activem el collapse de la barra de navegació transversal*/
	.subheader .navbar-header { float: none;}
	.subheader .navbar-left,.navbar-right {float: none !important;}
	.subheader .navbar-toggle { display: block;}
	.subheader .navbar-collapse {border-top: 1px solid transparent;box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);}
	.subheader .navbar-fixed-top {top: 0;border-width: 0 0 1px;}
	.subheader .navbar-collapse.collapse {display: none!important;}
	.subheader .navbar-nav {float: none!important;margin-top: 7.5px;}
	.subheader .navbar-nav>li {float: none;}
	.subheader .navbar-nav>li>a {padding-top: 10px;padding-bottom: 10px;  }
	.subheader .collapse.in{display:block !important;}
	.subheader .navbar-form .input-group {width:100%}
	
	.header-fons-cap{background-size:100%;height: 450px;}
	
	a#btn-contacto{display:none}
	.subheader .navbar-default .navbar-nav > li.nav-contacto {display:block}

	.bloc-lema{background-color:#E8ECED;max-width:100%;z-index:1}
	.cap-lema{background-color:transparent; font-weight:700;padding-top:0px;max-width:80%}
	.desc-lema{max-width: 90%;}

	.subheader .navbar-default {background-color:#E8ECED}
	#navbar-transversal ul {background-color:white;border-radius: 15px;}
	#navbar-transversal ul li {background-color:white}
	.subheader .navbar-left {padding-left:10px;/*margin-top:20px*/}
	.subheader .navbar-brand img {max-width:200px;}
	.subheader .navbar-brand svg {max-width:195px;}
	.subheader .navbar-default .navbar-header button {margin-top:20px}
	

}

@media screen and (max-width: 991px){
.titol-jornada {width: 49%;}
.block-event {width: 49%;}
}

@media screen and (max-width: 767px){
	.rao {height:260px}
	.titol-jornada {width: 95%; margin:0px 15px 10px 15px}
	
	/*.ver-mas{display:none}*/
	.boto-ver-mas {display:block}
	
}

@media screen and (max-width: 414px){
.block-event {width: 95%; }	
.events-preparacio {margin-bottom:20px}
.events-preparacio a{padding:15px 40px}
}