.zoom {
  transition: transform .2s;
  width: 110px;
  margin: auto;
}

.zoom:hover {
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari 3-8 */
  transform: scale(1.2);
}

.boto-amb-text {
  background-color: #d43f56;
  border: none;
  color: #fff !important;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

.boto-amb-text-actiu {
  background-color: #620e0e;
  border: none;
  color: #fff !important;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

.boto-amb-text-actiu:hover {
  background: #000 !important;
}

.boto-amb-text-actiu>a {
  color: #fff;
  text-decoration: none;
}

.boto-amb-text-actiu>strong {
  color: #fff;
  text-decoration: none;
}

.boto-amb-text:hover {
  background: #000 !important;
}

.boto-amb-text>a {
  color: #fff;
  text-decoration: none;
}

.boto-amb-text>strong {
  color: #fff;
  text-decoration: none;
}

.segon-menu {
  /* overflow: hidden; */
  background-color: #4c4c4c;
  margin-top: -25px;
}

.segon-menu a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  font-size: 17px;
  width: 25%;
}

.segon-menu a:hover {
  background-color: #ddd;
  color: black;
}

.segon-menu a.active {
  background-color: #ff4e69;
  color: white;
}

div#normativa {
  background-color: #efefe9;
  padding: 25px 15px 10px 25px;
  font-size: 9px !important;
  border-radius: 4px;
  display: block;
  height: auto;
  overflow: auto;
}

li.normativae {
  line-height: 1.6;
  text-align: left;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
}

div.normativa-esquerra {
  float: left;
  padding: 0px 10px;
  margin: 0 20% 0px 0;
}

div.normativa-dreta {
  float: left;
  padding: 10px 10px;
}

/* TAULES AMB MÉS COLORS */
table.taulac {
  width: 100%;
}

table.taulac th {
  font-weight: bold;
  text-align: center;
  background-color: #a40a21;
  color: #fff;
}

table.taulac td {
  border: 4px solid #fff;
}

table.taulac tr {
  border: 4px solid #fff;
}

.taulac td:first-child {
  text-align: left;
}

table.taulac>tr:nth-child(2n) {
  background-color: #f7d0d0 !important;
}

table.taulac>tr:hover {
  background-color: #f5f5f5;
}

/* Pàgina administració */
.notes {
  display: -webkit-flex;
  /* Safari */
  display: flex;
}

.nota-interior {
  border-radius: 15px 50px;
  padding: 20px;
  width: 260px;
  margin: 20px 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
}

/* pàgines de cursos especialitzats */
.programa {
  border: 3px solid #a40a21;
  border-radius: 8px;
  float: right;
  padding: 15px 15px 0px 15px;
  margin: 25px 0 10px 20px;
}

/* SLIDES PROMOCIÓ DE L'ÚS */
p#dades-jocs img {
  display: inline-block;
  width: 250px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Pastilles info cursos */
#cartell {
  width: 100%;
  padding: 2% 9%;
  color: #fff;
  margin-bottom: 30px;
}

p#codi-nivell {
  font-size: 55px;
  font-weight: 900;
}

p#nom-nivell {
  font-size: 13px;
  margin-top: -25px;
  font-weight: 600;
}

div#cartell>hr {
  width: 95%;
}

p#text-nivell {
  font-size: 35px;
  font-style: italic;
  font-weight: 900;
  line-height: 1.2;
}

/* FINAL Pastilles info cursos */
.requadre {
  padding: 15px;
  border: 2px solid #d43f56;
  width: 100%;
}

.pampalluga {
  animation-name: pampalluga;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: pampalluga;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes pampalluga {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.0;
  }

  100% {
    opacity: 1.0;
  }
}

@-webkit-keyframes pampalluga {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.0;
  }

  100% {
    opacity: 1.0;
  }
}

@keyframes pampalluga {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.0;
  }

  100% {
    opacity: 1.0;
  }
}

/* MINMAX - https://www.cpnl.cat/alumnes */
#minmax {
  display: grid;
  grid-template-columns: minmax(80px, 280px) minmax(80px, 280px) minmax(80px, 280px);
  grid-gap: 10px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 10px;
  text-align: center;
}

/* dues columnes adaptables a una https://www.cpnl.cat/cursos-de-catala/inscripcio-3/ */
.colresponsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 380px));
  margin: 0 40px;
  border: solid 2px #bb2727;
  padding: 15px;
  border-radius: 15px;
}

img.crelement {
  float: left;
}

.crelement {
  text-decoration: none !important;
}

/* pàgina inscripcions */
.column-ins {
  float: left;
  width: 50%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column-ins {
    width: 100%;
    display: block;
  }
}

.card-id {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container-id {
  padding: 0 16px;
}

.container-id::after {
  content: "";
  clear: both;
  display: table;
}

/* pàgina inscripcio cpnl.cat/inscripcions */
.caixa-inscripcio {
  width: 282px;
  height: 265px;
  background-color: #d43f56;
  border-radius: 10px;
  margin-bottom: 20px;
  display: block;
}

.titol-inscripcio {
  font-size: 2.6rem;
  font-weight: bold;
  color: #fff !important;
  text-decoration: none;
  position: relative;
  top: 15%;
  margin: 0 auto;
  text-align: center;
}

.subtitol-inscripcio {
  font-size: 2rem;
  color: #fff !important;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  top: 15%;
  text-align: center;
}

.titol-inscripcio a {
  color: #fff !important;
  text-decoration: none;
}

.subtitol-inscripcio a {
  color: #fff !important;
  text-decoration: none;
}

.passos {
  background-color: #000;
  border-radius: 10px;
  color: #fff !important;
  height: 40px;
  width: 45%;
  font-size: 1.7rem;
  font-weight: bold;
  color: #fff !important;
  text-decoration: none;
  position: relative;
  top: 15%;
  margin: 10px auto 5px auto;
  text-align: center;
}

.passos a {
  color: #fff !important;
  text-decoration: none;
}

/* modalitats 2 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
  flex-flow: row wrap;
}

.flex-item-left {
  padding: 10px;
  flex: 380px;
}

.flex-item-right {
  padding: 10px;
  flex: 380px;
}

/* Imatge amb un width fix, però que no supera el 100%. La imatge a dins l'HTML ha de tenir les seves mides definides */
.img-max {
  max-width: 100%;
  height: auto;
}

/* Menú drop al fer clic */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.dropdown > label,
.dropdown > a[role="button"] {
  display: inline-block;
  padding: 6px 15px;
  color: #333;
  line-height: 1.5em;
  text-decoration: none;
  border: 1px solid #8c8c8c;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.dropdown > label:hover,
.dropdown > a[role="button"]:hover,
.dropdown > a[role="button"]:focus {
  border-color: #333;
}

.dropdown > label:after,
.dropdown > a[role="button"]:after {
  content: "\f0d7";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: 6px;
}

.dropdown > ul {
  position: absolute;
  z-index: 999;
  display: block;
  left: -100vw;
  top: calc(1.5em + 14px);
  border: 1px solid #8c8c8c;
  background: #fff;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  width: 100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);
  -moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}

.dropdown > ul a {
  display: block;
  padding: 6px 15px;
  text-decoration: none;
  color: #333;
}

.dropdown > ul a:hover,
.dropdown > ul a:focus {
  background: #ececec;
}

.dropdown > input[type="checkbox"]:checked ~ ul,
.dropdown > ul:target {
  left: 0;
}

.dropdown > [type="checkbox"]:checked + label:after,
.dropdown > ul:target ~ a:after {
  content: "\f0d8";
}

.dropdown a.close {
  display: none;
}

.dropdown > ul:target ~ a.close {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  text-indent: -100vw;
  z-index: 1000;
}

/* Comerços aprenents */

.fila1 {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.columna1 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 75%;
  padding: 0 4px;
}

.columna1 img {
  margin: 8px 8px 8px 0;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1600px) {
  .columna1 {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columna1 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 1200px) {
  .columna1 img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}


/* Comerços aprenents: Quadre girat a sota el vídeo */

div.transforma {
  width: 100%;
  height: auto;
  background-color: #f7cf51;
  -ms-transform: rotate(358deg); /* IE 9 */
  transform: rotate(358deg);
  margin: 35px 0;
}

div.transforma-negatiu {
  margin: 12px;
  -ms-transform: rotate(2deg); /* IE 9 */
  transform: rotate(2deg);
  margin: 35px 0;
}


/* Comerços aprenents: quadrats blaus a  ul > li */

.blau {
    list-style-image: url("/media/upload/arxius/activitats/blau.png");
/*    list-style-type: "\1F44D"; */
    color: #22284A;
    list-style-position: outside;
}

.blau > li::before {
    content: none;
}

/* quandrats bñlaus dreta->esquerra */

.blau-rtl {
    list-style-image: url("/media/upload/arxius/activitats/blau.png");
    color: #22284A;
    direction: rtl;
    list-style-position: inside;
}

.blau-rtl > li::before {
    content: none;
}

.sense-punt-rtl {
    list-style-type: none;
    color: #22284A;
    direction: rtl;
    list-style-position: inside;
}

.no-visible {
    display: none;
}

.sang-10 {
    margin-left: 10px;
}

.sang-50 {
    margin-left: 50px;
}

.sang-100 {
    margin-left: 100px;
}

/* Dues caixes ehanxades i amb la mateixa alçada - /jocs/empreses-col-laboradores */

.flex-container-jocs {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left-jocs {
  padding: 10px;
  flex: 50%;
}

.flex-item-right-jocs {
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container-jocs {
    flex-direction: column;
  }
}

.caixes-jocs {
    height: 150px;
}

#cerca-jocs {
    background-image: url("/media/upload/imatges/activitats/Jocs/cercador-inici.png");
    background-color: #F2F2F2;
    background-size: cover;
    background-position: right;
    height: 170px;
}

#inici-form-jocs {
    margin: 50px 0 10px auto;
}

#sJocs {
    width: 860px;
   /* float: right; */
}

@media screen and (max-width: 1200px) {
#sJocs {
    width: auto;
   /* float: right; */
}
}

#cercajocs {
    width: 100%;
    border: none!important;
}

ul.bullet-blanc {
  list-style-type: none;
}

ul.bullet-blanc li::before {
  content: "\2022";
  color: black;
  background-color: white;
  margin-right: 0.5em;
}

/* https://www.cpnl.cat/xarxa/cnlmontserrat/17raons/ */

.expo {
    float:left;
    max-width: 600px;
    height: auto;
    background: #fff;
    padding: 6px;
    margin:0 20px 20px 20px;
    box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
}

.paginacio {
  display: inline-block;
}

.paginacio a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.paginacio a.active {
  background-color: #228386;
  color: white;
  border: 1px solid #228386;
}

.paginacio a:hover:not(.active) {background-color: #ddd;}

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

.pag-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.pag-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}

.pag-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .pag-container {
    flex-direction: column;
  }
}

/* menú normativa */

.two-columns {
  columns: 2;
}

.two-columns li:before {
  display: inline-block;
  width: 100%;
  text-align: left;
  margin-right: 0.5em;
  list-style-type: none;
}

/* inscripció 230321 */

.botoRoig {
	box-shadow: 10px 14px 7px -12px rgba(42, 46, 50, .6);
	background-color:#d43f56;
	border-radius:6px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff!important;
	font-family: Lato,"Helvetica Neue",Helvetica,Arial,Roboto,sans-serif;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
    transition: background-color .5s ease;
}
.botoRoig:hover {
	background-color:#000000;
}
.botoRoig:active {
	position:relative;
	top:1px;
}

.botoBlanc {
	box-shadow: 10px 14px 7px -12px rgba(42, 46, 50, .4);
    background-color:#ffffff;
	border-radius:6px;
	border:1px solid #e8e8e8;
	display:inline-block;
	cursor:pointer;
	color:#d43f56;
	font-family: Lato,"Helvetica Neue",Helvetica,Arial,Roboto,sans-serif;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
}
.botoBlanc:hover {
	/* background-color:#f0b8c2; */
    box-shadow: 10px 14px 7px -12px rgba(42, 46, 50, .6);
    border:.5px solid #BBBDBF;
    transition: color 0.5s ease, background-color 0.5s ease;
    color: #fff;
    background-color:#000;
}
.botoBlanc:active {
	position:relative;
	top:1px;
}

.imatge-container {
  position: relative;
  /* max-width: 800px; /* Maximum width */
  margin: 0 auto; /* Center it */
  font-size: 100% !important;
    display: flex;
  align-items: center;
  justify-content: center;
    width: 100%;/* Full width */
  margin: auto;
}

.imatge-container .imatge-content {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
 /* background: rgb(0, 0, 0); /* Fallback color */
 /* background: rgba(0, 0, 0, 0.2); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%;/* Full width */
 /* padding: 20px; /* Some padding */

}

.imatge-content {
  margin-left: 5%;
  margin-right: 10%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.arab {
  margin-right: 5%!important;
  left: 50%!important;
 }

.adaptable {
  font-size: 2.2em !important;
  margin-top: -10px;
  margin-bottom: 50px;
  margin-right: 15%;
}

.adaptable-p {
  font-size: 1.5em !important;
  margin-top: -15px;
  margin-right: 15%;
}

.adaptable span {
  background-color:#ffffff;
  color:#b63934;
  padding: 6px 8px 8px 8px;
  font-size: 1em !important;
}

@media screen and (max-width: 1400px) {
  .adaptable {
    font-size: 1.8em !important;
  }
  .adaptable-p {
    font-size: 1.3em !important;
  }
}

@media screen and (max-width: 650px) {
  .imatge-container .imatge-content {
  top: 45px;
  }
  .adaptable {
    font-size: 1.0em !important;
  }
  .adaptable-p {
  font-size: .7em !important;
  }
  .imatge-content {
    top: 40%;
  }
}

/* fi inscripció 230321 */

/* /inscripcions/guia-per-determinar-el-nivell/ */

img.nivell {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 0.5px solid #BBBDBF;
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
}

/* Transparència 06-2023 */

.caixa-transp {
  width: 350px;
  height: auto;
  border-radius: 10px;
  padding-bottom: 1px;
  display: block;
}

.titol-transp {
  font-size: 1.6rem;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  top: 15%;
  margin: 0 auto;
  padding: 12px 10px;
  text-align: left;
}

.subtitol-transp {
  font-size: 1rem;
  color: #000 !important;
/*  font-weight: bold; */
  text-decoration: none;
  position: relative;
  top: 15%;
  text-align: left;
  background-color: #fff;
  padding: 12px;
  margin: 15px 10px;
  border-radius: 1px;
  margin-bottom: 10px;
}

.caixa-transp2 {
  width: 350px;
  height: auto;
  background-color: #d43f56;
  border-radius: 10px;
  padding-bottom: 1px;
  display: block;
}

.titol-transp2 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff !important;
  text-decoration: none;
  position: relative;
  top: 15%;
  margin: 0 auto;
  padding: 12px 10px;
  text-align: center;
}

.subtitol-transp2 {
  font-size: 1rem;
  color: #000 !important;
/*  font-weight: bold; */
  text-decoration: none;
  position: relative;
  top: 15%;
  text-align: left;
  background-color: #fff;
  padding: 12px;
  margin: 15px 10px;
  border-radius: 1px;
  margin-bottom: 10px;
}

.titol-transp2 a {
  color: #fff !important;
  text-decoration: none;
}

.subtitol-transp2 a {
  color: #022 !important;
}


/* https://www.cpnl.cat/xarxa/cnlsabadell/20-contes-comptats/ */

.vcentral {
  vertical-align: middle;
}

tr td.vcentral {
  vertical-align: middle;
}

#vintcontes tbody tr td {
  vertical-align: middle;
}

#cartell {
  width: 100%;
  padding: 2% 9%;
  color: #fff;
  margin-bottom: 30px;
}

@media screen and (max-width: 800px) {
  .miniatura {
    display: none;
  }
}

/* Música en català */

.cartells {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 936px;
}

.cartells a {
  flex-basis: calc(50% - 10px);
  margin-bottom: 20px;
  max-width: 225px;
  min-width: 120px;
}

@media screen and (max-width: 767px) {
  .cartells a {
    flex-basis: calc(50% - 5px);
  }
}