/*
//////////////////////////////////////////////////////////////

    css/estil.css

    Fitxer amb els estils del portal

    Servei de Biblioteques, Publicacions i Arxius
    Universitat Politecnica de Catalunya. BarcelonaTech (UPC)

//////////////////////////////////////////////////////////////
*/

/*
//////////////////////////////////////////////////////////////

    Importacio de css i definicio de fonts

//////////////////////////////////////////////////////////////
*/

@font-face{
    font-family: 'upc-icones';
    src: url('../fonts/upc-icones.woff') format('woff'), url('../fonts/upc-icones.ttf') format('truetype'), url('../fonts/upc-icones.svg#upc-icones') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
//////////////////////////////////////////////////////////////

    Estils generals

//////////////////////////////////////////////////////////////
*/

html, body {
    font-family: 'Roboto', Helvetica, serif !important;
    font-size: 16px;
    margin: 0px;
    padding: 0px !important;
    color: #636363;
    -webkit-font-smoothing: antialiased;
    font-weight: 300;
    line-height: 1.25;
    overflow-x: hidden;
}

body.page-node-edit {
    position: unset !important;
}

img {
    max-width: 100%;
}

:focus {
    outline-color: transparent !important;
}

h1, h2, h3 {
    font-weight: 300;
    line-height: 1.1;
}

h1 {
    font-size: 2.25rem;
    color: #4A4A4A;
    background: transparent;
    border-bottom: 3px solid #B8C6C8;
    margin: -6px 0 36px 0;
    padding: 0 0 12px 0;
    font-weight: 500;
}

h2 {
    font-size: 1.5rem;
    color: #636363;
    position: relative;
    overflow: hidden;
    padding: 4px 0;
    margin-top: 0;
    margin-bottom: 15px;
}

h2:after {
    content: "";
    position: absolute;
    margin-left: 12px;
    background: #d1d1d1;
    height: 1px;
    box-shadow: 1000px 0 0 -1000px #d1d1d1;
    width: 100%;
    top: 50%;
}

h3 {
    font-size: 1.5rem;
    color: #4A4A4A;
    font-weight: 500;
    margin: 20px 0px 20px 0px;
}

h4 {
    font-family: 'Roboto', Helvetica, serif !important;
    font-weight: 500;
    line-height: 1.1;
    margin: 20px 0px 10px 0px;
}

a {
    color: #007BC1;
    text-decoration: none;
}

a:hover {
    color: #007BC1;
    text-decoration: underline;
}

[class^="icona-upc"] {
    font-family: 'upc-icones' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a[name]:not([role="button"]) {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

#ops-list a[name] {
    top: 0px;
    visibility: visible;
}

span.caret-upc {
    margin: 0px !important;
    font-size: 75% !important;
    top: 0px !important;
    transition:.25s all ease;
    display: inline-block;
}

*:hover > span.caret-upc, .sobre > a span.caret-upc {
    transform: rotate(180deg);
    transition:.25s all ease;
}

img.escala-grisos {
    transition:all .5s ease-out;
    filter:grayscale(100%);
}

img.escala-grisos:hover {
    transition:all .5s ease-out;
    filter:grayscale(0);
}

.well {
    border-radius: 0px;
    border: 0px;
    background-color: #F2F5F6;
    margin-bottom: 0px;
    margin-top: 30px;
    box-shadow: none;
}

.well h4 {
    margin-top: 0px;
    margin-bottom: 0px;

}

.form-required {
    color: #B32801;
}

.form-control {
    font-size: 16px;
}

input[type="text"], input[type="email"], input[type="password"], select, textarea, input[type="file"], input[type="search"] {
    border-radius: 0px !important;
    border: 1px solid #636363 !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus, input[type="file"]:focus, input[type="search"]:focus {
    border-color: #636363 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

input[type="radio"], input[type="checkbox"], select option {
    font-weight: 300 !important;
}

.has-error input, .has-error select {
   border: 1px solid #a94442 !important;
}

select {
    height: 34px !important;
}

select[multiple="multiple"] {
    height: auto !important;
}

.btn {
    border-radius: 0px;
}

.btn-primary {
    border-color: #F6A808;
    background-color: #F6A808;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus {
    border-color: #7b5404;
    background-color: #a26f05;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline-color: transparent;
}

.has-error .form-control, .has-error .form-control:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    border-color: #a94442;
}

.input-group .btn-primary, .btn-reset {
    background-color: #636363;
    border-color: #636363;
    color: #fff;
}

.input-group .btn-primary:hover, .btn-reset:hover {
    background-color: #333;
    border-color: #333;
}

.input-group .btn-default {
    background-color: #fff;
    border-color: #636363;
    color: #636363;
}

.input-group .btn-default:hover {
    background-color: #ccc;
}

.igual-alcada {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

ul.dropdown-menu li a {
    border-radius: 0px;
    font-weight: 300 !important;
}

div.radio label.control-label, div.checkbox label.control-label {
    font-weight: 300;
}

.netejable {
  background: #fff url('../imatges/netejar.png') no-repeat right -20px center;
  padding-right: 35px;
  transition: background 0.4s;
}

.netejable.x  {
    background-position: right 10px center;
    z-index: 99;
}

.netejable.onX {
    cursor: pointer;
}

.netejable::-ms-clear {
    display: none;
    width:0;
    height:0;
}

.tabledrag-hide {
    width: 90px;
}

/*
//////////////////////////////////////////////////////////////
   Carregant
/////////////////////////////////////////////////////////////
*/

.carregant {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-bottom: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*
//////////////////////////////////////////////////////////////
   CKEditor
/////////////////////////////////////////////////////////////
*/

div.text-destacat .content h3:first-child {
    margin-top: 0px;
}

img.contorn {
    border: 1px solid #D1D1D1;
    padding: 5px;
}

img.completa {
    width: 100% !important;
}

img.dreta {
    margin-left: 15px;
    margin-bottom: 15px;
}

img.esquerra {
    margin-right: 15px;
    margin-bottom: 15px;
}

div.destacat {
    background-color: #F6F7F7;
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

div.field-items > div.field-item:first-child div.destacat:first-child {
    margin-top: 0px;
}

div.field-items > div.field-item:last-child div.destacat:last-child {
    margin-bottom: 0px;
}

div.destacat h3:first-child {
    margin-top: 0px;
}

/*
//////////////////////////////////////////////////////////////
   Botons destacats
/////////////////////////////////////////////////////////////
*/

.boto-destacat {
    padding: 20px 20px 20px 20px;
    font-size: 1.125rem;
    display: inline-block;
    font-weight: 500;
    position: relative;
    transition: all .25s ease-out;
    transform: scale(1, 1) perspective(1px) translateZ(0px);
}

.boto-destacat:hover, .boto-destacat:focus, .boto-destacat:active {
    text-decoration: none;
}

.icona {
    padding: 20px 72px 20px 20px;
}

.boto-destacat:hover {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 5px 10px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.05);
    transition: all .25s ease-in;
    transform: perspective(1px) scale(1.00775, 1.00775) translateZ(0px);
    -webkit-font-smoothing: subpixel-antialiased;
}

.fons-blau-fosc {
    background-color: #007BC1;
}

.fons-blau-clar {
    background-color: #54AEE2;
}

.fons-taronja {
    background-color: #F6A808;
}

.fons-gris-fosc {
    background-color: #636363;
}

.fons-gris-clar {
    background-color: #ccc;
}

.fons-blanc {
    background-color: #fff;
    border: 1px solid #636363;
}

.text-blanc {
    color: #fff;
}

.text-gris {
    color: #636363;
}

.text-blanc:after {
    border: 1.5px solid #fff;
    color: #fff;
}

.text-gris:after {
    border: 1.5px solid #636363;
    color: #636363;
}

.text-blanc:hover, .text-blanc:focus, .text-blanc:active {
    color: #fff;
}

.text-gris:hover, .text-gris:focus, .text-gris:active {
    color: #636363;
}

.intern:after {
    content: "\e902";
    font-family: upc-icones;
    position: absolute;
    font-size: 1.125rem;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    padding-top: 5px;
    background: transparent;
    z-index: 0;
    top: calc(50% - 18px);
}

.extern:after {
    content: "\e91c";
    font-family: upc-icones;
    position: absolute;
    font-size: 1.125rem;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    padding-top: 5px;
    background:  transparent;
    z-index: 0;
    top: calc(50% - 18px);
}

.descarrega:after {
    content: "\e907";
    font-family: upc-icones;
    position: absolute;
    font-size: 1.125rem;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    padding-top: 5px;
    background:  transparent;
    z-index: 0;
    top: calc(50% - 18px);
}

.complet {
    width: 100%;
    text-align: left !important;
}

.boto-destacat span.subtitol {
    font-weight: 300;
    font-size: .875rem;
}

/*
//////////////////////////////////////////////////////////////
   Dialegs
/////////////////////////////////////////////////////////////
*/

.modal-dialog {
    opacity: .95;
    background: #FFF;
}

.modal-content {
    box-shadow: none;
    border: 0;
    background: transparent;
    opacity: 1;
    border-radius: 2px;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #d1d1d1;
}

.modal-title {
    margin: 0;
    line-height: 1.25;
    color: #023470;
    font-size: 1.5rem;
    font-weight: 300;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #d1d1d1;
}

.modal-footer .btn:hover {
    color: #fff;
    border-color: #7b5404;
    background-color: #a26f05;
}

.modal-footer .btn:active {
    color: #fff;
    border-color: #7b5404;
    background-color: #a26f05;
}

.modal-footer .btn {
    color: #fff;
    background-color: #F6A808;
    border-color: #F6A808;
    border-radius: 0px;
}

.modal-content ul {
    list-style: disc;
    margin: 10px 20px 0px 20px;
    padding: 0px;
}

.modal-content ul li {
    padding-bottom: 5px;
}

/*
//////////////////////////////////////////////////////////////

    Estils capcalera

//////////////////////////////////////////////////////////////
*/

#capcalera {
    font-family: 'Roboto', Helvetica, serif !important;
    position: relative;
    width: 100%;
    background-color: #fff;
    top: 0px;
    box-shadow: 1px 1px 8px rgba(0,0,0,0.2);
    z-index: 99;
}

#capcalera div.container {
    position: relative;
}

#capcalera #logo-titol {
    margin: 18px 0px 0px 0px;
}

#capcalera #titol {
    padding-left: 59px;
    margin-top: 0px;
    margin-bottom: 10px;
}

#capcalera #titol a:hover {
    text-decoration: none;
}

#capcalera #titol img {
    float: left;
    margin-right: 20px;
}

#capcalera #titol h1 {
    margin: 10px 0px 0px 0px;
    padding: 0px;
    font-size: 1.5rem;
    color: #007BC1;
    border: 0px;
    font-weight: 500;
}

#capcalera #titol span.subtitol {
    font-size: 1.2rem;
    font-weight: 400;
}

#capcalera #menu-secundari {
    margin-top: 16px;
    font-size: 0.8125rem;
}

#capcalera #menu-secundari > li {
    display: inline;
}

#capcalera #menu-secundari > li > a {
    color: #636363;
    padding: 9px 12px;
    display: inline-block;
    border-radius: 2px;
    transition: all .25s ease;
    text-decoration: none;
}

#capcalera #menu-secundari > li > a:hover {
    color: #007BC1;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.33);
    border-radius: 2px;
    transition: all .25s ease;
    text-decoration: none;
}

#capcalera #menu-secundari > li > a:focus {
    box-shadow: none;
    text-decoration: none !important;
    outline-color: transparent;
}

#capcalera #menu-secundari .icona-upc {
    position: relative;
    top: 3px;
    margin-right: 6px;
    font-size: 1.125rem;
}

#capcalera #menu-secundari .dropdown-menu > li > a {
    font-size: 0.8125rem;
    font-weight: 300;
    text-transform: none;
    padding: 7px 12px;
}

#capcalera #menus {
    position: relative;
    height: 136px;
}

#capcalera #menu-principal {
    background-color: #fff;
    border: 0px;
    margin: 0px;
    min-height: auto;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 0px;
    text-align: right;
    float: none;
}

#capcalera #menu-principal > li {
    float: none;
    display: inline;
    position: relative;
}

#capcalera #menu-principal > li > a {
    padding: 9px 10px 9px 10px;
    color: #007BC1;
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
}

#capcalera #menu-principal > li:hover > a, #capcalera #menu-principal li.sobre > a {
    color: #007BC1;
    background-color: #fff;
    transition: all .25s ease;
    box-shadow: 0 0 2px rgba(0,0,0,0.33);
    border-radius: 0px;
    text-decoration: none;
}

#capcalera #menu-principal li.enllac-submenu:hover > a:before, #capcalera #menu-principal li.sobre > a:before {
    content: "";
    width: 100%;
    height: 5px;
    background: #fff;
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 100;
}

#capcalera div.submenu {
    position: absolute;
    width: 100%;
    height: auto;
    background-color: #fff;
    z-index: 99;
    padding: 6px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    text-align: left;
}

#capcalera div.submenu-parcial {
    width: 650px;
    right: 0px;
}

#capcalera div.submenu-biblioteca {
    width: 900px;
    right: 0px;
}

#capcalera div.submenu-complet, #capcalera div.submenu-biblioteca {
    padding: 20px 0px 0px 0px;
}

#capcalera div.submenu-complet h3, #capcalera div.submenu-biblioteca h3 {
    margin: 0px 0px 10px 12px;
    font-size: 1.1rem;
}

#capcalera div.submenu-complet ul {
    padding: 0px;
}

#capcalera div.submenu-biblioteca ul {
    padding: 0px;
    margin-bottom: 50px;
}

#capcalera div.submenu-complet ul li, #capcalera div.submenu-biblioteca ul li {
    list-style: none;
    margin: 0px;
}

#capcalera div.submenu-complet ul li a, #capcalera div.submenu-biblioteca ul li a {
    padding: 6px 12px 6px 12px !important;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    width: 100%;
}

#capcalera div.submenu-complet ul li a:hover, #capcalera div.submenu-biblioteca ul li a:hover {
    background-color: #f5f5f5;
    text-decoration: none;
}

#capcalera div.submenu-complet #enllac-menu-mes {
    clear: both;
    padding: 20px;
}

#capcalera div.submenu-biblioteca #enllac-menu-mes {
    position: absolute;
    bottom: 15px;
    right: 30px;
}

#capcalera div.submenu #enllac-menu-mes a:hover {
    text-decoration: none;
}

#capcalera div.submenu #enllac-menu-mes:before {
    content: "\e901";
    font-family: "upc-icones";
    font-size: 1.3rem;
    margin-right: 6px;
    color: #007BC0;
    line-height: 0;
    position: relative;
    top: 3px;
}

#capcalera div.submenu a.enllac-biblioteca div.biblioteca {
    font-size: 0.9rem;
    padding: 6px 12px 6px 12px;
    clear: both;
}

#capcalera div.submenu a.enllac-biblioteca:hover {
    text-decoration: none;
}

#capcalera div.submenu a.enllac-biblioteca:hover div.biblioteca {
    background-color: #f5f5f5;
}

#capcalera div.submenu #Cercador_superior {
    padding: 0px 20px 20px 20px;
}

#capcalera #boto-menu-mobil {
    line-height: 90px;
    font-weight: 500;
    font-size: 1.0rem;
    text-transform: uppercase;
}

#capcalera #boto-menu-mobil a:hover, #boto-menu-mobil a:focus {
    text-decoration: none;
}

/*
//////////////////////////////////////////////////////////////

    Estils menu mobils

//////////////////////////////////////////////////////////////
*/

#menu-mobil {
    position: absolute;
    right: -70%;
    background-color: #fff;
    transition: all 0.25s ease;
    width: 70%;
    box-shadow: 0 0 2px rgba(0,0,0,0.33);
    text-align: left;
    height: calc(100vh - 90px);
}

#menu-mobil.obert {
    right: 0px;
    transform: translateX(0px);
    transition: all 0.25s ease;
    display: block;
    overflow-y: scroll;
    height: calc(100vh - 90px);
}

#menu-mobil .panel-group {
    margin: 10px 0px 10px 0px;
}

#menu-mobil .panel {
    border: 0px;
    box-shadow: none;
}

#menu-mobil .panel-heading {
    background-color: #fff;
    border: 0px;
    padding: 15px 20px;
}

#menu-mobil .panel-heading a {
    color: #007BC1;
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
}

#menu-mobil .panel-heading a:hover,  #menu-mobil .panel-heading a:focus {
    text-decoration: none;
}

#menu-mobil .panel-body {
    border: 0px;
    padding: 0px 30px;
}

#menu-mobil .panel-body h3 {
    margin: 10px 0px 10px 12px;
    font-size: 1.1rem;
}

#menu-mobil .panel-group .panel + .panel {
    margin-top: 0px;
}

#menu-mobil .panel-body ul li a {
    padding: 6px 12px 6px 12px !important;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    width: 100%;
}

#menu-mobil .panel-body ul {
    padding: 0px;
}

#menu-mobil .panel-body ul li {
    list-style: none;
    margin: 0px;
}

#menu-mobil .panel-body ul li a:hover {
    background-color: #f5f5f5;
    text-decoration: none;
}

#menu-mobil .panel-body #enllac-menu-mes {
    clear: both;
    padding: 20px;
}

#menu-mobil .panel-body #enllac-menu-mes a:hover {
    text-decoration: none;
}

#menu-mobil .panel-body #enllac-menu-mes:before {
    content: "\e901";
    font-family: "upc-icones";
    font-size: 1.3rem;
    margin-right: 6px;
    color: #007BC0;
    line-height: 0;
    position: relative;
    top: 3px;
}

#menu-mobil .panel-body a.enllac-biblioteca div.biblioteca {
    font-size: 0.9rem;
    padding: 6px 12px 6px 12px;
    clear: both;
}

#menu-mobil .panel-body a.enllac-biblioteca:hover {
    text-decoration: none;
}

#menu-mobil .panel-body a.enllac-biblioteca:hover div.biblioteca {
    background-color: #f5f5f5;
}

#menu-mobil .panel-body a.enllac-biblioteca div.biblioteca .pull-right {
    float: none !important;
}

#menu-mobil .panel-title a:hover > span.caret-upc {
    transform: none !important;
}

#menu-mobil .menu-secundari-mobil {
    border-top: 1px solid #d1d1d1;
    list-style: none;
    padding: 10px 0px 0px 0px;
}

#menu-mobil .menu-secundari-mobil li {
    padding: 6px 12px 6px 12px;
    margin: 0px;
}

#menu-mobil .menu-secundari-mobil li a {
    padding: 6px 12px 6px 12px !important;
    display: inline-block;
    text-decoration: none;
    width: 100%;
}

#menu-mobil .menu-secundari-mobil li a:hover {
     background-color: #f5f5f5;
}

/*
//////////////////////////////////////////////////////////////

    Estils capcalera quan es fa scroll

//////////////////////////////////////////////////////////////
*/

#capcalera.scroll {
    position: fixed !important;
}

#capcalera.scroll #logo-titol #logo {
    display: none !important;
}

#capcalera.scroll #logo-titol {
    margin-top: 10px !important;
}

#capcalera.scroll #logo-titol #titol {
    margin: 10px 0px 10px 0px !important;
    padding: 0px !important;
}

#capcalera.scroll #logo-titol #titol h1 {
    padding-top: 12px !important;
}

#capcalera.scroll #logo-titol #titol .subtitol {
    display: none !important;
}

#capcalera.scroll #menus #menu-secundari {
    margin-top: 0px !important;
}

#capcalera.scroll #menus {
    height: 90px !important;
}

#capcalera.scroll .submenu {
    top: 90px !important;
}

#capcalera.scroll #logo-titol img {
    display: inline !important;
}

#contenidor-contingut.scroll {
    margin-top: 137px !important;
}

/*
//////////////////////////////////////////////////////////////

    Estils imatges de les capcaleres

//////////////////////////////////////////////////////////////
*/

#contenidor-contingut #imatge-principal {
    width: 100%;
    height: 200px;
    background-size: cover;
    display: flex;
    align-items: center;
    position: relative;
}

#contenidor-contingut #imatge-secundaria {
    height: 120px;
    background-image: url('../imatges/capcaleres/fons.jpg');
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    position: relative;
}

#contenidor-contingut #imatge-principal:before, #contenidor-contingut #imatge-secundaria:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

#contenidor-contingut #imatge-secundaria h1 {
    font-weight: 500;
    color: #fff;
    margin: 0;
    padding: 0px;

    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    border: 0px;
    text-transform: uppercase;
}

#contenidor-contingut #imatge-principal h1 {
    font-weight: 500;
    color: #fff;
    margin: 0px 0px 10px 0px;
    padding: 0px;
    line-height: 50px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
    border: 0px;
    text-transform: uppercase;
}

#contenidor-contingut #imatge-principal .dades-contacte-biblioteca {
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
    font-weight: 500;
}

#contenidor-contingut #imatge-principal .dades-contacte-biblioteca a {
    color: #fff;
}

#contenidor-contingut #imatge-principal .dades-contacte-biblioteca a:hover {
    text-decoration: none;
}

/*
//////////////////////////////////////////////////////////////

    Estils cercador capcalera

//////////////////////////////////////////////////////////////
*/

#contenidor-contingut #cercador {
    width: 100%;
    background-color: #d4d5cf;
}

#contenidor-contingut #cercador form {
    padding: 20px 0px 20px 0px;
}

#contenidor-contingut #cercador .form-group, #Cercador_superior .form-group {
    width: 100%;
}

#contenidor-contingut #cercador .input-group, #Cercador_superior .input-group {
    width: calc(100% - 330px);
    margin-right: 20px;
}

#contenidor-contingut #cercador .input-group-btn, #Cercador_superior .input-group-btn {
    width: 68px;
}

#contenidor-contingut #cercador label, #capcalera .cercador label {
    margin-bottom: 0px;
    font-weight: 300;
}

/*
//////////////////////////////////////////////////////////////

    Estils breadcrumbs / fil d'ariadna

//////////////////////////////////////////////////////////////
*/

#contenidor-contingut #breadcrumbs {
    background-color: #F2F5F6;
}

#contenidor-contingut #breadcrumbs ol {
    font-size: 0.8125rem;
    margin: 15px 0 19px;
    padding: 5px 0px 0px 0px;
}

#contenidor-contingut #breadcrumbs ol li:first-child a {
    color: #0599dd;
    text-decoration: none !important;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9rem;
}

#contenidor-contingut #breadcrumbs ol li:nth-child(2) {
    text-transform: uppercase;
}

#contenidor-contingut #breadcrumbs ol li:before {
    font-family: "upc-icones";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e901";
    font-size: 0.5625rem;
    color: #7f7f7f
}

#contenidor-contingut #breadcrumbs ol li:first-child:before {
    content: '';
}

/*
//////////////////////////////////////////////////////////////

    Estils contingut

//////////////////////////////////////////////////////////////
*/

#contingut {
    padding-top: 30px;
    min-height: 300px;
}

#contingut section {
    margin-bottom: 30px;
}

#contingut div.field-items > div.field-item:first-child h2:first-child, #contingut div.field-items > div.field-item:first-child h3:first-child, #contingut div.field-items > div.field-item:first-child h4:first-child {
    margin-top: 0px;
}

#contingut div.field-item {
    overflow: hidden;
}

#contingut .block-views .more-link {
    font-size: 1rem;
    top: .4rem;
    position: absolute;
    right: 0;
    background: white;
    z-index: 1;
    padding: 6px 0 6px 6px;
    margin-top: -5px;
}

#contingut .block-views {
    position: relative;
}

.page-node #contingut a:not([class])[target="_blank"]::after, #menu-peu a:not([class])[target="_blank"]::after {
    content: " \e91c";
    font-family: "upc-icones";
    font-size: 75%;
    position: relative;
    margin-left: -3px;
}

.page-node #contingut a:not([class])[href$=".pdf"]::after {
    content: " \e91d";
    font-family: "upc-icones";
    font-size: 100%;
    color: #ED4033;
    position: relative;
    margin-left: -3px;
}

.page-node #contingut a.sense-icona-despres:after {
    content: '' !important;
}

#contingut section.block-biblioteques-horaris {
    margin-bottom: 20px;
}

#contingut div.data-actualitzacio {
    font-size: 0.9rem;
}

#contingut div.senar {
    background-color: #fafafa;
}

/*
//////////////////////////////////////////////////////////////
   Graella d'elements
/////////////////////////////////////////////////////////////
*/

#contingut .element-graella-espai-compartit img:first-child {
    object-fit: cover;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    transition: all .5s ease;
    border-radius: 0;
}

#contingut .element-graella-espai-separat img:first-child {
    object-fit: fill;
    width: 100%;
    height: 100%;
    position: relative;
    transition: all .5s ease;
    border-radius: 0;
}

#contingut .element-graella-espai-compartit div.text {
    background: #F2F5F6;
    display: block;
    height: auto;
    bottom: 0;
    position: absolute;
    left: 0;
    padding: 0 18px 6px;
    width: 100%;
}

#contingut .element-graella-espai-separat div.text {
    background: #F2F5F6;
    padding: 15px 18px;
    position: relative;
}

#contingut .element-graella div.icona {
    padding: 2px 72px 2px 20px;
}

#contingut .element-graella a:hover {
    text-decoration: none;
}

#contingut .element-graella a.extern div.icona:after {
    content: "\e91c";
    top: 50%;
    font-family: upc-icones;
    border: 1.5px solid #007BC1;
    position: absolute;
    font-size: 1.125rem;
    right: 18px;
    margin-top: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    padding-top: 5px;
    color: #007BC1;
    z-index: 0;
}

#contingut .element-graella a.intern div.icona:after {
    content: "\e902";
    top: 50%;
    font-family: upc-icones;
    border: 1.5px solid #007BC1;
    position: absolute;
    font-size: 1.125rem;
    right: 18px;
    margin-top: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    padding-top: 5px;
    color: #007BC1;
    z-index: 0;
}

#contingut .element-graella a.descarrega div.icona:after {
    content: "\e907";
    top: 50%;
    font-family: upc-icones;
    border: 1.5px solid #007BC1;
    position: absolute;
    font-size: 1.125rem;
    right: 18px;
    margin-top: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    padding-top: 5px;
    color: #007BC1;
    z-index: 0;
}

#contingut .element-graella h3 {
    font-size: 1.125rem;
    color: #4a4a4a;
    font-weight: 300;
    margin-top: 15px;
    margin-bottom: 10px;
}

#contingut .element-graella h3 a {
    color: #4a4a4a;
}

#contingut .element-graella h3.ressaltat {
    font-weight: 500;
}

#contingut .element-graella div.text p {
    font-weight: 300;
    color: #636363;
    font-size: .8125rem;
    margin: 0 0 10px;
}

#contingut .element-graella div.alinear {
    display: flex !important;
    align-items: center;
}

#contingut .element-graella a.zoom:hover, #contingut div.zoom:hover {
    text-decoration: none;
    transform: perspective(1px) scale(1.00775, 1.00775) translateZ(0px);
}

#contingut .element-graella div.text .mes {
    position: absolute;
    bottom: 15px;
    right: 18px;
}

#contingut .element-graella > a.zoom, #contingut div.zoom {
    display: block;
    margin: 0px;
    background: #F2F5F6;
    position: relative;
    transition: all .25s ease-out;
    transform: scale(1, 1) perspective(1px) translateZ(0px);
}

/*
//////////////////////////////////////////////////////////////
   Actualitat (graella i node)
/////////////////////////////////////////////////////////////
*/

#contingut .actualitat .cuadricula .element-graella a {
    height: 300px;
}

#contingut .actualitat .destacada .element-graella a {
    height: 624px;
}

#contingut .actualitat div.col-md-6 div.row:first-child {
    margin-bottom: 24px;
}

#contingut div.actualitat-imatge {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}

#contingut div.actualitat-imatge img {
    padding: 5px;
    border: 1px solid #d1d1d1;
    max-width: 300px;
}

/*
//////////////////////////////////////////////////////////////
  Destacats
/////////////////////////////////////////////////////////////
*/

#contingut .destacats .element-graella img {
    height: 190px;
}

/*
#contingut .destacats .element-graella a {
    height: 280px;
}

#contingut .destacats .element-graella div.text {
    min-height: 90px;
}
*/

/*
//////////////////////////////////////////////////////////////
   Unitats
/////////////////////////////////////////////////////////////
*/

#contingut .llistat-unitats .element-graella p {
    margin: 0px !important;
}

#contingut .llistat-unitats .element-graella h3 {
    margin-top: 0px;
}

#contingut .llistat-unitats .element-graella div.text {
    height: 180px;
}

#contingut .llistat-unitats .row {
    margin-bottom: 20px;
}

/*
//////////////////////////////////////////////////////////////
   Carrusels
/////////////////////////////////////////////////////////////
*/

#contingut .carrusel .element-carrusel {
    margin-right: 15px;
    margin-left: 15px;
}

#contingut .carrusel .element-carrusel a:hover {
    text-decoration: none;
    transform: perspective(1px) scale(1.00775, 1.00775) translateZ(0px);
    transition: all .25s ease-out;
}

#contingut .carrusel .element-carrusel a {
    transition: all .25s ease-out;
    transform: scale(1, 1) perspective(1px) translateZ(0px);
    display: block;
    position: relative;
}

#contingut .carrusel .element-carrusel a:after {
    content: '' !important;
}

#contingut .carrusel .element-carrusel div {
    padding: 0 18px 6px;
    background: #F2F5F6;
}

#contingut .carrusel .element-carrusel h3 {
    font-size: 1.125rem;
    color: #4a4a4a;
    padding-top: 15px;
    margin-bottom: 10px;
    margin-top: 0px;
}

#contingut .carrusel .element-carrusel p {
    color: #636363;
    font-size: .8125rem;
}

.slick-slider {
    margin-bottom: 0px;
}

/*
//////////////////////////////////////////////////////////////
   Llistats triangle
/////////////////////////////////////////////////////////////
*/

#contingut .llistat-triangle ul, #contingut ul.site-map-menu {
    margin: 0px;
    padding-left: 24px;
}

#contingut .llistat-triangle ul li, #contingut ul.site-map-menu li {
    list-style: none;
    padding: 6px 0;
}

#contingut .llistat-triangle ul li:before, #contingut ul.site-map-menu li:before {
    content: "\e922";
    font-family: "upc-icones";
    margin-left: -18px;
    font-size: .75rem;
    margin-right: 6px;
    color: #1FBDEE;
    line-height: 0;
}

/*
//////////////////////////////////////////////////////////////
   Seccions desplegables
/////////////////////////////////////////////////////////////
*/

#contingut .seccions-desplegables {
    counter-reset: comptador-seccions;
}

#contingut .seccions-desplegables .panel-default {
    margin-top: 0px;
    border: 0px;
    box-shadow: none;
    border-bottom: 1px solid #D1D1D1;
    background-color: #fff;
}


#contingut .seccions-desplegables .panel-default .panel-heading {
    background: transparent;
    padding: 0;
    color: #636363;
    border-bottom: 0px;
}

#contingut .seccions-desplegables .panel-default .panel-heading h4 a.numerat::before {
    counter-increment: comptador-seccions;
    content: counter(comptador-seccions);
    width: 42px;
    height: 42px;
    background: #1FBDEE;
    position: absolute;
    border-radius: 50%;
    padding: 7px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    top: 18px;
    left: 20px;
}

#contingut .seccions-desplegables .panel-default .panel-heading h4 a.numerat {
    padding-left: 78px !important;
}

#contingut .seccions-desplegables .panel-default .panel-heading img {
    object-fit: cover;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 12px;
}

#contingut .seccions-desplegables .panel-default .panel-body {
    border: 0px;
    padding: 0 18px 18px;
}

#contingut .seccions-desplegables .panel-default .panel-heading h4 a[role="button"] {
    display: block;
    padding: 30px 36px 30px 18px;
    color: #007BC1;
    position: relative;
    border-top: 1px solid #D1D1D1;
}

#contingut .seccions-desplegables .collapse {
    border-bottom: 1px solid #D1D1D1;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

#contingut .seccions-desplegables .panel-default > .panel-heading a[aria-expanded="true"] {
    border-top-color: #007BC1 !important;
}

#contingut .seccions-desplegables .collapse.in {
    border-bottom-color: #007BC1 !important;
}

#contingut .seccions-desplegables .panel-default > .panel-heading a:after {
    content: "\e919";
    position: absolute;
    right: 18px;
    font-family: "upc-icones";
    transition: all .25s ease;
    top: 50%;
    transform: translateY(-50%);
}

#contingut .seccions-desplegables .panel-default > .panel-heading a[aria-expanded="true"]:after {
    transform: rotate(180deg) translateY(50%);
    transition: all .25s ease;
}


/*
//////////////////////////////////////////////////////////////
   Paginacio
/////////////////////////////////////////////////////////////
*/

#contingut nav ul.pagination {
    border-radius: 0px;
    margin-top: 25px;
    margin-bottom: 15px;
}

#contingut .pagination > li:first-child > a, #contingut .pagination > li:first-child > span, #contingut .pagination > li:last-child > a, #contingut .pagination > li:last-child > span {
    border-radius: 0px;
}

#contingut .pagination > li > a, #contingut .pagination > li > span {
    border-color: #636363;
    color: #636363;
    margin-bottom: 5px;
}

#contingut .pagination > li.active > a, #contingut .pagination > li.active > span {
    background-color: #636363 !important;
    color: #fff !important;
}

/*
//////////////////////////////////////////////////////////////
  Blocs laterals: Menus (esquerra)
/////////////////////////////////////////////////////////////
*/

#contingut .region-contingut-esquerra section {
    padding: 20px;
    background-color: #E0EFF7;
}

#contingut .region-contingut-esquerra .block h2 {
    font-weight: 500;
    font-size: 1.1rem;
}

#contingut .region-contingut-esquerra .block h2:after {
    height: 0px;
}

#contingut .region-contingut-esquerra ul {
    margin: 0px;
    padding-left: 24px;
}

#contingut .region-contingut-esquerra ul li {
    list-style: none;
    padding: 6px 0;
}

#contingut .region-contingut-esquerra ul li:before {
    content: "\e922";
    font-family: "upc-icones";
    margin-left: -18px;
    font-size: .75rem;
    margin-right: 6px;
    color: #1FBDEE;
    line-height: 0;
}

/*
//////////////////////////////////////////////////////////////
  Blocs laterals: Info, ajudes, etc (dreta)
/////////////////////////////////////////////////////////////
*/

#contingut .region-contingut-dreta section {
    padding: 20px;
    background-color: #F2F5F6;
    margin-bottom: 15px;
}

#contingut .region-contingut-dreta .block h2 {
    font-weight: 500;
    font-size: 1.1rem;
}

#contingut .region-contingut-dreta .block h2:after {
    height: 0px;
}

#contingut .region-contingut-dreta section.fons-blau {
    padding: 20px;
    background-color: #9dd5f2;
}

#contingut .region-contingut-dreta section.fons-taronja {
    padding: 20px;
    background-color: #FCF3E0;
}

#contingut .region-contingut-dreta section.fons-blanc {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #666;
}

#contingut .region-contingut-dreta section.fons-transparent {
    padding: 0px;
    background-color: transparent;
}

#contingut .region-contingut-dreta section a.boto-destacat {
    width: 100%;
}


#contingut .region-contingut-dreta .llistat-triangle ul li a {
    display: inline !important;
}

#contingut .region-contingut-dreta .graella-items .fila {
    margin-bottom: 0px;
    margin-top: 15px;
}

#contingut .region-contingut-dreta .graella-items .fila:first-child {
    margin-top: 0px;
}

/*
//////////////////////////////////////////////////////////////
  Pestanyes
/////////////////////////////////////////////////////////////
*/

#contingut .tab-content {
    padding: 30px;

}

#contingut ul.tabs--primary {
    margin-bottom: 30px;
}

#contingut .nav-tabs > li.active > a, #contingut .nav-tabs > li.active > a:hover, #contingut .nav-tabs > li.active > a:focus {
    color: #4A4A4A !important;
    font-weight: 500 !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid #007BC1 !important;
    cursor: default !important;
}

#contingut .nav-justified {
    margin-bottom: 0px !important;
}

#contingut .nav-justified li.active a {
    border-radius: 0px !important;
}

#contingut .nav-tabs > li > a {
    border: 0 !important;
    border-bottom: 3px solid #EDF1F2 !important;
    margin-right: 3px !important;
    transition: .25s all ease !important;
    text-align: left !important;
}

#contingut .nav-tabs > li > a:hover {
    border-bottom-color: #B8C6C8 !important;
    transition: .25s all ease !important;
    background-color: #fff !important;
}

/*
//////////////////////////////////////////////////////////////
   Graella d'items
/////////////////////////////////////////////////////////////
*/

#contingut div.graella-items div.fila {
    margin-bottom: 15px;
    /*
    margin-left:-5px;
    margin-right: -5px;
    align-items: top;
    display: flex;
    */
}

/*
#contingut div.graella-items div.fila div.item {
    display: inline-block;
    padding: 0px 5px 0px 5px;
    position: relative;
}
*/

#contingut div.graella-items div.fila div.item > * {
    width: 100%;
}

#contingut div.item div.panel-group, #contingut .region-contingut-dreta div.panel-group {
    margin-bottom: 0px;
}

#contingut div.item div.panel, #contingut .region-contingut-dreta div.panel {
    border-radius: 0px;
}

#contingut div.item div.panel-group .fons-blau-fosc, #contingut .region-contingut-dreta div.panel-group .fons-blau-fosc {
    border-color: #007BC1;
}

#contingut div.item div.panel-group .fons-blau-clar, #contingut .region-contingut-dreta div.panel-group .fons-blau-clar {
    border-color: #54AEE2;
}

/*
#contingut div.item div.panel-group .fons-gris-clar, #contingut .region-contingut-dreta div.panel-group .fons-gris-clar {
    border-color: #666;
}

#contingut div.item div.panel-group .fons-gris-fosc, #contingut .region-contingut-dreta div.panel-group .fons-gris-fosc {
    border-color: #000;
}

#contingut div.item div.panel-group .fons-blanc, #contingut .region-contingut-dreta div.panel-group .fons-blanc {
    border-color: #636363;
}

#contingut div.item div.panel-group .fons-taronja, #contingut .region-contingut-dreta div.panel-group {
    border-color: #7a5408;
}
*/

#contingut div.item div.panel-group .fons-blanc .panel-body, #contingut .region-contingut-dreta div.panel-group .fons-blanc .panel-body {
    border-top: 1px solid #636363;
}

#contingut div.item div.panel-heading, #contingut .region-contingut-dreta div.panel-heading {
    font-weight: 500;
    border-radius: 0px;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

#contingut div.item div.panel-heading h4, #contingut .region-contingut-dreta div.panel-heading h4  {
    padding-right: 30px;
}

#contingut div.item div.panel-heading h4:after, #contingut .region-contingut-dreta div.panel-heading h4:after {
    content: "\e919";
    position: absolute;
    right: 15px;
    font-family: "upc-icones";
    transition: all .25s ease;
    top: 50%;
    transform: translateY(-50%);
    border: 0px;
}

#contingut div.item div.panel-body, #contingut .region-contingut-dreta div.panel-body {
    background-color: #fff;
}

#contingut div.graella-items div.fila div.item div.imatge, #contingut div.graella-items div.fila div.item div.imatge img {
    width: 100%;
}

#contingut div.graella-items div.item div.paragraphs-item-paragraf-targeta {
    background-color: #f4f5f6;
    height: 100%;
}

/*
//////////////////////////////////////////////////////////////
   Agregat d'items
/////////////////////////////////////////////////////////////
*/

#contingut div.agregat-items div.item {
    display: inline-block;
    margin: 0px 5px 10px 5px;
    vertical-align: top;
}

/*
//////////////////////////////////////////////////////////////
   Items paragrafs
/////////////////////////////////////////////////////////////
*/

#contingut div.item div.imatge, #contingut div.content div.imatge {
    position: relative;
    display: inline-block;
}

#contingut div.item div.imatge div.text, #contingut div.content div.imatge div.text {
    position: absolute;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    bottom: 20px;
    right: 6px;
}

#contingut div.paragraf-carrusel {
    margin-bottom: 60px;
}

#contingut div.paragraf-carrusel div.content div.imatge a:after, #contingut div.paragraf-diapositives div.content div.imatge a:after, #contingut .element-graella a:after {
    display: none;
}

#contingut .element-graella div.text a[target="_blank"]::after {
    content: " \e91c" !important;
    font-family: "upc-icones";
    font-size: 75%;
    position: relative;
    margin-left: -3px;
    display: inline !important;
}

#contingut div.paragraf-carrusel .slick-arrow, #contingut div.paragraf-diapositives .slick-arrow {
    z-index: 999;
}

#contingut .paragraf-carrusel div.item {
    margin-right: 5px;
    margin-left: 5px;
    text-align: center;
}

#contingut div.paragraf-diapositives div.imatge {
    width: calc(100% - 100px);
    margin-left: 50px;
    margin-right: 50px;
}

#contingut div.paragraf-diapositives div.imatge img {
    width: 100% !important;
}

#contingut .element-graella div.icona-paragraf {
    padding: 15px 72px 15px 18px !important;
}

/*
//////////////////////////////////////////////////////////////
   Grafics paragrafs
/////////////////////////////////////////////////////////////
*/

#contingut .highcharts-data-table table {
    margin: 0px auto;
}

#contingut .highcharts-data-table table caption {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
}

#contingut .highcharts-data-table table tr td, #contingut .highcharts-data-table table tr th {
    border: 1px solid #000;
    padding: 5px 10px;
    text-align: center;
}


#contingut .highcharts-menu .highcharts-menu-item:last-child {
    display: none;
}

/*
//////////////////////////////////////////////////////////////
    Formularis d'alta de continguts
//////////////////////////////////////////////////////////////
*/

#contingut dl.node-type-list dd {
    margin-bottom: 10px;
}

#contingut form.node-form div.form-group {
    margin-bottom: 30px;
}

#contingut form.node-form div.form-group div.form-group {
    margin-bottom: 10px;
}

#contingut form.node-form div.vertical-tabs {
    margin-top: 50px;
}

#contingut form.node-form div.field-type-paragraphs div.form-wrapper {
    margin-top: 15px;
}

#contingut form.node-form button.field-add-more-submit {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
    margin-top: 0px;
}

#contingut form.node-form button.field-add-more-submit:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}

#contingut form.node-form table {
    border: 1px solid #ccc;
}

#contingut form.node-form table th.field-label {
    padding: 8px;
}

#contingut form.node-form table div[id*="bundle-title"].form-wrapper.form-group {
    font-weight: 500;
    background-color: #666;
    color: #fff;
    padding: 8px;
}

/*
//////////////////////////////////////////////////////////////
    Formulari de cerca i resultats
//////////////////////////////////////////////////////////////
*/

#contingut form.search-form {
    margin-bottom: 30px;
}

#contingut ol.search-results {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border-top: 1px solid #ccc;
}

#contingut ol.search-results li {
    padding: 5px 20px 20px 20px;
    border-bottom: 1px solid #ccc;
}

#contingut ol.search-results li:nth-child(even) {
    background-color: #f5f4f4;
}

.page-search #contingut h2:after {
    height: 0px;
}

.page-search #contingut .panel {
    border-color: #666;
    border-radius: 0px;
    box-shadow: none;
}

.page-search #contingut .panel.collapsed {
    border-bottom: 1px solid #666;
}

.page-search #contingut .panel-heading {
    background-color: #fff;
    border: 0px;
}

.page-search #contingut .panel button {
    margin-top: 15px;
}

.page-search #contingut .panel-heading a:after {
    content: "\e919";
    position: absolute;
    right: 18px;
    font-family: "upc-icones";
    transition: all .25s ease;
    top: 20px;
    transform: translateY(-50%);
}

.page-search #contingut .panel-heading a[aria-expanded="true"]:after {
    transform: rotate(180deg) translateY(50%);
    transition: all .25s ease;
    top: 20px;
}

/*
//////////////////////////////////////////////////////////////
    Actualitat: Llistat
//////////////////////////////////////////////////////////////
*/

#contingut .llistat-actualitat .media-body {
    width: auto !important;
}

#contingut .llistat-actualitat .media-left img {
    width: 220px !important;
    max-width: 220px !important;
}

#contingut .llistat-actualitat .media-left {
    padding-right: 20px;
}

#contingut .llistat-actualitat .media-list .media:nth-child(1) {
    border-top: 1px solid #ccc;
}

#contingut .llistat-actualitat .media-list .media {
    border-bottom: 1px solid #ccc;
    padding: 15px;
    margin-top: 0px;
}

#contingut .llistat-actualitat .media-list .media:nth-child(even) {
    background-color: #fafafa;
}

#contingut .llistat-actualitat div.text-center {
    text-align: left !important;
}

/*
//////////////////////////////////////////////////////////////

    Estils pagines d'usuari

//////////////////////////////////////////////////////////////
*/

.page-user div.user-picture img {
    float: left;
    border: 1px solid #D1D1D1;
    padding: 5px;
    margin-right: 15px;
    margin-bottom: 15px;
    width: auto !important;
}

#contingut #edit-picture-body img {
    float: none;
}

.page-user .profile .field-label {
    margin-top: 10px;
}

/*
//////////////////////////////////////////////////////////////
   Activitats de formacio
/////////////////////////////////////////////////////////////
*/

#contingut div.activitat div.activitat-imatge {
    float: right;
    margin-left: 15px;
    margin-bottom: 15px;
}

#contingut div.activitat div.activitat-imatge img {
    padding: 5px;
    border: 1px solid #d1d1d1;
    max-width: 300px;
}

#contingut div.activitat table {
    margin-top: 10px;
}


/*
//////////////////////////////////////////////////////////////

    Estils peu

//////////////////////////////////////////////////////////////
*/

footer {
    margin-top: 30px;
}

footer #peu-informacio {
    background-color: #F6F7F7;
    font-size: 0.8125rem;
    padding-top: 24px;
    padding-bottom: 6px;
}

footer #peu-informacio img {
    transition:all .5s ease-out;
    filter:grayscale(100%);
}

footer #peu-informacio img:hover {
    transition:all .5s ease-out;
    filter:grayscale(0);
}

footer #peu-informacio .informacio {
    margin-left: 65px;
}

footer #peu-informacio h2 {
    font-size: 0.8125rem;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 0px 5px 0px;
    padding: 0px;
}

footer #peu-informacio h2:after {
    background: none !important;
}

footer #peu-informacio ul {
    padding-left: 10px;
    padding-bottom: 18px;
}

footer #peu-informacio ul li {
    padding: 6px 0 0;
    list-style: none;
}

footer #peu-informacio ul li:before {
    content: "\e906";
    font-family: "upc-icones";
    position: absolute;
    margin-left: -12px;
    font-size: 7px;
    margin-top: 5px;
    color: #B8B8B8;
}

footer #peu-informacio ul li a:hover {
    text-decoration: underline;
}

footer #menu-peu {
    background-color: #F2F5F6;
    font-size: 0.8rem;
    font-weight: 300;
    padding: 18px 0px;
    color: #7F7F7F;
}

footer #menu-peu ul {
    display: inline;
    margin: 0px 0px 0px 18px;
    padding: 0px;
}

footer #menu-peu ul li {
    display: inline;
    margin-left: 24px;
}

footer #menu-peu ul li a {
    color: #01559B;
}

footer #peu-logos {
    background-color: #fff;
    padding: 20px;
}

footer #peu-logos ul {
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    margin: 0;
}

footer #peu-logos ul li {
    flex: 0 1 auto;
    display: inline-block;
    font-size: .8125rem;
    margin: 3px 0;
}

/*
//////////////////////////////////////////////////////////////

    Estils per a mobils

//////////////////////////////////////////////////////////////
*/

@media (max-width: 1200px) {
    #capcalera #logo-titol #titol .subtitol {
        display: none;
    }

    #contingut div.biblioteca-horari {
        margin-bottom: 10px;
    }

    #capcalera {
        position: fixed !important;
    }

    #capcalera #logo-titol #logo {
        display: none !important;
    }

    #capcalera #logo-titol {
        margin-top: 10px !important;
    }

    #capcalera #logo-titol #titol {
        margin: 10px 0px 10px 0px !important;
        padding: 0px !important;
    }

    #capcalera #logo-titol #titol h1 {
        padding-top: 12px !important;
    }

    #capcalera #logo-titol #titol .subtitol {
        display: none !important;
    }

    #capcalera #menus #menu-secundari {
        margin-top: 0px !important;
    }

    #capcalera #menus {
        height: 90px !important;
    }

    #capcalera .submenu {
        top: 90px !important;
    }

    #capcalera #logo-titol img {
        display: inline !important;
    }
}

@media (max-width: 992px) {

    #contenidor-contingut {
        margin-top: 90px !important;
    }

    #contingut div.biblioteca-horari {
        margin-bottom: 10px;
    }

    #contingut .graella div.row > div {
        margin-top: 20px;
    }

    #contingut div.view-destacats div.row:nth-child(1) div:nth-child(1) {
        margin-top: 0px;
    }

    #contingut .graella div.col-md-6 div.row:first-child {
        margin-bottom: 0px;
    }

    .igual-alcada {
        display: block;
    }

    #contingut .graella-items div.fila div.item, #contingut .llistat-unitats div.biblioteca {
        margin-bottom: 15px;
    }

    #contingut .graella-items div.fila {
        margin-bottom: 0px !important;
    }
}

@media (max-width: 768px) {
    #contenidor-contingut #cercador form .form-group {
        width: 100%;
    }

    #contenidor-contingut #cercador form .input-group {
        width: 100%;
        margin-bottom: 5px;
    }

    #contenidor-contingut #cercador input[type="text"]  {
        width: 100%;
    }

    #contenidor-contingut #cercador label.radio-inline {
        padding-left: 20px;
    }

    #contenidor-contingut #imatge-principal {
        height: auto;
        padding: 15px 0px;
        min-height: 100px;
    }

    #contenidor-contingut #imatge-principal h1 {
        font-size: 1.8rem;
        line-height: inherit;
    }

    #contenidor-contingut #imatge-secundaria h1 {
        line-height: normal;
        text-align: center;
    }

    #contingut div.biblioteca-horari {
        margin-bottom: 10px;
    }

    #contingut .graella div.row {
        margin-top: 0px;
    }

    #contingut .graella div.col-md-6 div.row:first-child {
        margin-bottom: 0px;
    }

    #contingut .actualitat div.col-md-6, #contingut .actualitat div.col-sm-6 {
        margin-bottom: 24px;
    }

    #contingut .actualitat div.row, #contingut .actualitat.row, #contingut .actualitat div.row:last-child div.col-sm-6:last-child, #contingut .actualitat div.col-md-6:last-child, #contingut .destacats div.col-xs-12:last-child .element-graella {
        margin-bottom: 0px !important;
    }

    #contingut .destacats .element-graella {
        margin-bottom: 24px;
    }

    #contingut button.boto-offcanvas {
        display: inline-block !important;
    }

    .imatge-modal-content {
        width: 100%;
    }

    .table-wrap table,
    .table-wrap thead,
    .table-wrap tbody,
    .table-wrap th,
    .table-wrap td,
    .table-wrap tr {
        display: block;
    }

    .table-wrap thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-wrap td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%!important;
        white-space: normal;
        text-align: left;
    }

    .table-wrap td:before {
        position: absolute;
        top: 8px;
        left: 15px;
        width: 45%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }

    .table-wrap td:first-child {
        padding-top: 17px;
    }

    .table-wrap td:last-child {
        padding-bottom: 16px;
    }

    .table-wrap td:first-child:before {
        top: 17px;
    }

    .table-wrap td:before {
        content: attr(data-title);
    }

    footer div.col-sm-7, footer div-col-sm-3 {
        margin-bottom: 24px;
    }

    footer #peu-logos ul {
        display: block;
    }

    footer #menu-peu div.col-sm-4, footer #menu-peu div.col-sm-8 {
        text-align: center !important;
    }

    footer #menu-peu div.col-sm-8 {
        margin-top: 10px;
    }

    footer #menu-peu div.col-sm-8 nav ul {
        margin: 0px;
    }

    /* Offcanvas */
    .row-offcanvas {
        position: relative;
        -webkit-transition: all .25s ease-out;
             -o-transition: all .25s ease-out;
                transition: all .25s ease-out;
    }

    .row-offcanvas-right {
        right: 0;
    }

    .row-offcanvas-left {
        left: 0;
    }

    .row-offcanvas-right .sidebar-offcanvas {
        right: -50%;
    }

    .row-offcanvas-left .sidebar-offcanvas {
        left: -50%;
    }

    .row-offcanvas-right.active {
        right: 50%;
    }

    .row-offcanvas-left.active {
        left: 50%;
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 50%;
    }
    /* Fi Offcanvas */

    #peu-logos {
        display: none;
    }

    #contingut .llistat-actualitat .media-left {
        display: block;
        text-align: center;
        margin-bottom: 15px;
        padding-right: 0px;
    }

    #contingut .llistat-actualitat .media-left img {
        width: 100% !important;
        max-width: 100% !important;
    }

    #contingut .seccions-desplegables .panel-default .panel-heading img {
        display: none;
    }

    #contingut div.data-actualitzacio {
        display: none;
    }

    #region-contingut-dreta {

    }

    #contingut div.actualitat-imatge {
        float: none !important;
    }
}

@media print {
    *, @page {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    #menus, #imatge-secundaria, #breadcrumbs, #cercador, #imatge-principal, footer, #capcalera, .region-contingut-dreta, .region-contingut-esquerra {
        display: none !important;
    }

    #contenidor-contingut {
        margin-top: 20px !important;
    }

    a[href]:after {
        content: none !important;
    }

    h2:after {
        background: #d1d1d1 !important;
    }

    .well {
        background-color: #F2F5F6 !important;
    }

    .btn-primary {
        border-color: #F6A808;
        background-color: #F6A808 !important;
    }

    .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus {
        border-color: #7b5404;
        background-color: #a26f05 !important;
    }

    .has-error .form-control, .has-error .form-control:focus {
        border-color: #a94442;
    }

    .input-group .btn-primary, .btn-reset {
        background-color: #636363 !important;
        border-color: #636363;
        color: #fff;
    }

    .input-group .btn-primary:hover, .btn-reset:hover {
        background-color: #333 !important;
        border-color: #333;
    }

    .input-group .btn-default {
        background-color: #fff !important;
        border-color: #636363;
        color: #636363;
    }

    .input-group .btn-default:hover {
        background-color: #ccc !important;
    }

    div.destacat {
        background-color: #F6F7F7 !important;
    }

    .fons-blau-fosc {
        background-color: #007BC1 !important;
    }

    .fons-blau-clar {
        background-color: #54AEE2 !important;
    }

    .fons-taronja {
        background-color: #F6A808 !important;
    }

    .fons-gris-fosc {
        background-color: #636363 !important;
    }

    .fons-gris-clar {
        background-color: #ccc !important;
    }

    .modal-footer .btn:hover {
        color: #fff;
        border-color: #7b5404;
        background-color: #a26f05 !important;
    }

    .modal-footer .btn:active {
        color: #fff;
        border-color: #7b5404;
        background-color: #a26f05 !important;
    }

    .modal-footer .btn {
        color: #fff;
        background-color: #F6A808 !important;
        border-color: #F6A808;
    }

    #contingut div.senar {
        background-color: #fafafa !important;
    }

    #contingut .element-graella-espai-compartit div.text {
        background: #F2F5F6 !important;
    }

    #contingut .element-graella-espai-separat div.text {
        background: #F2F5F6 !important;
    }

    #contingut .element-graella > a.zoom, #contingut div.zoom {
        background: #F2F5F6 !important;
    }

    #contingut .carrusel .element-carrusel div {
        background: #F2F5F6 !important;
    }

    #contingut .seccions-desplegables .panel-default .panel-heading h4 a.numerat::before {
        background: #1FBDEE !important;
        color: #fff;
    }

    #contingut .pagination > li.active > a, #contingut .pagination > li.active > span {
        background-color: #636363 !important;
        color: #fff !important;
    }

    #contingut .region-contingut-esquerra section {
        padding: 20px;
        background-color: #E0EFF7 !important;
    }

    #contingut .region-contingut-dreta section {
        padding: 20px;
        background-color: #F2F5F6 !important;
    }

    #contingut .region-contingut-dreta section.fons-blau {
        padding: 20px;
        background-color: #9dd5f2 !important;
    }

    #contingut .region-contingut-dreta section.fons-taronja {
        padding: 20px;
        background-color: #FCF3E0 !important;
    }

    #contingut div.graella-items div.item div.paragraphs-item-paragraf-targeta {
        background-color: #f4f5f6 !important;
    }

    #contingut div.item div.imatge div.text, #contingut div.content div.imatge div.text {
        background-color: rgba(0, 0, 0, 0.6) !important;
        color: #fff;
    }

    #contingut form.node-form button.field-add-more-submit {
        color: #fff;
        background-color: #5bc0de !important;
        border-color: #46b8da;
    }

    #contingut form.node-form button.field-add-more-submit:hover {
        color: #fff;
        background-color: #31b0d5 !important;
        border-color: #269abc;
    }

    #contingut form.node-form table div[id*="bundle-title"].form-wrapper.form-group {
        background-color: #666 !important;
        color: #fff;
    }

    #contingut ol.search-results li:nth-child(even) {
        background-color: #f5f4f4 !important;
    }

    #contingut .llistat-actualitat .media-list .media:nth-child(even) {
        background-color: #fafafa !important;
    }
}