#containerPastillas.grabbing {
  cursor: grabbing;
}


#containerPastillas
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
	overflow-x: auto;
	white-space: nowrap;
	padding-bottom: 20px;
	padding-top: 10px;
    display: flex;	
}

#containerPastillas::-webkit-scrollbar {
	height: 6px;
}

#containerPastillas::-webkit-scrollbar-track {background: transparent;}

#containerPastillas::-webkit-scrollbar-thumb {
  background-color: #298391;
  border-radius: 4px;
}


#containerPastillas {
  scrollbar-width: thin;
  scrollbar-color: #262626 transparent;
  transition: all 0.2s ease;
}

#containerPastillas:hover {
  scrollbar-width: thin;
  scrollbar-color: #298391 transparent;
}

#containerPastillas {
  scroll-behavior: smooth;
}
	

#containerPastillas a:focus .pastilla {
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 1);
}

#containerPastillas .pastilla {
	width:150px;
	height:150px;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    $border: 3px;
    color: #fff;
    background: #000;
    background-clip: padding-box;
    border: solid $border transparent;
    border-radius: 50%;
    text-align: center;
    transition: all 0.2s;
    justify-content: center;
    padding: 5px;
	margin: 10px;
	font-size: 14px;
	transition: all 0.2s ease;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin: -$border;
        border-radius: inherit;
    }

}
#containerPastillas .pastilla:hover .logocanal {
    height: 30px;
}
#containerPastillas .titol {
    font-family: sans-serif;
    text-align: center;
    width: 100%;
    font-weight: 900;
    padding: 0;
}

.pastilla.actualitat:hover{box-shadow: 0px 0px 15px #e91e63;}
.pastilla.actualitat {
  border: 3px solid #e91e63;
  color: #e91e63;
}

.pastilla.informatius:hover{box-shadow: 0px 0px 15px #ef7d00;}
.pastilla.informatius {
  border: 3px solid #ef7d00;
  color: #ef7d00;
}

.pastilla.igualtat:hover{box-shadow: 0px 0px 15px #ff5e3a;}
.pastilla.igualtat {
  border: 3px solid #ff5e3a;
  color: #ff5e3a;
}
.pastilla.nastic:hover{box-shadow: 0px 0px 15px #c80000;}
.pastilla.nastic {
  border: 3px solid #c80000;
  color: #c80000;
}

.pastilla.humor:hover{box-shadow: 0px 0px 15px #ff9900;}
.pastilla.humor {
  border: 3px solid #ff9900;
  color: #ff9900;
}

.pastilla.tempatics:hover{box-shadow: 0px 0px 15px #ffcc00;}
.pastilla.tempatics {
  border: 3px solid #ffcc00;
  color: #ffcc00;
}

.pastilla.historia:hover{box-shadow: 0px 0px 15px #5bc0de;}
.pastilla.historia {
  border: 3px solid #5bc0de;
  color: #5bc0de;
}

.pastilla.cultura:hover{box-shadow: 0px 0px 15px #33c3f0;}
.pastilla.cultura {
  border: 3px solid #33c3f0;
  color: #33c3f0;
}

.pastilla.recerca:hover{box-shadow: 0px 0px 15px #00bfa5;}
.pastilla.recerca {
  border: 3px solid #00bfa5;
  color: #00bfa5;
}

.pastilla.musica:hover{box-shadow: 0px 0px 15px #8a2be2;}
.pastilla.musica {
  border: 3px solid #8a2be2;
  color: #8a2be2;
}

#degradadotop.avia-section {
    position: absolute !important;
    z-index: 5 !important;
}