/* Utilities 
----------------------------------------- */
.flow > * {
    margin-top: 0;
    margin-bottom: 0;
}
.flow > * + * {
    margin-top: 1.5rem;
}
.flow--large > * + * {
    margin-top: 2.5rem;
}
.flow--small > * + * {
    margin-top: .5rem;
}
html {
  scroll-behavior: smooth;
}

/* Various
----------------------------------------- */
#main.trending-topics .bordered {
    font-size: 1.0625rem;
    color: #000;
    letter-spacing: 4.53px;
    font-weight: normal;
    display: inline-block;
    text-transform: uppercase;
}
#main.trending-topics .bordered::after {
    content: '';
    display: inline-block;
    height: 1px;
    width: 95%;
    margin-top: 1em;
    background-color: #979797;
}
.box {
    background-color: #fff;
    padding: 1.5rem 2rem;
}


/* Buttons
----------------------------------------- */
#main .section .btn {
    border: 1px solid #000;
    display: block;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: bold;
    text-align: center;
}
#main .section .btn:hover {
    text-decoration: underline;
}
#main .section .btn--lg {
    display: inline-block;
    padding: 1.25rem 2rem;
    font-size: 1rem;
    color: #000;
    border-radius: 8px;
}

/* Header
----------------------------------------- */
.header {
    padding: 3rem 0;
}
#main .header .bordered {
    margin-bottom: .5rem;
}
#main .header h1 {
    font-weight: 300;
    color: #000;
    font-size: 1.875rem;
    letter-spacing: 8px;
    margin: 0;
}

/* Sections
----------------------------------------- */
.section {
    padding: 2rem 0;
}
@media screen and (min-width: 40em) {
    .section {padding: 4rem 0;}
}
.section--img > .row, .section--overlay > .row {
    position: relative;
    z-index: 1;
} 
.section--img {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.section--img::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
.section--img-1 {
    background-image: url('/images/trending-topics/imatge-what-are-qm.jpg');
}
.section--img-2 {
    background-image: url('/images/trending-topics/imatge-what-is-incn-2.jpg');
}
.section--overlay {
    position: relative;
}
.section--overlay::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.8);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
@media screen and (min-width: 768px) {
    .section--overlay::after {
        width: 50%;
        left: auto;
    }
}
.section--gray {
    background-color: #f2f2f2;
}
.section--bg-1 {
    background-color: #cdf2f3;
}
.section--bg-2 {
    background-color: #6dcacd;
}

/* Typography
----------------------------------------- */
#main .section h2,
#main .section h3 {
    text-transform: none;
    font-weight: bold;
    letter-spacing: 0;
    color: #000;
}
#main .section h2 {
    font-size: 1.5rem;
}
#main .section h3 {
    font-size: 1.125rem;
}
#main .section p,
#main .section ul{
    font-weight: 300;
    font-size: 1rem;
    color: #000;
}
#main .section li {
    font-size: inherit;
}
#main hr {
    border-color: #000;
}

/* "What are Quantum Materials?"
----------------------------------------- */
#main .section--img-1 ul {
    list-style: none;
    font-size: .875rem;
    font-weight: bold;
    margin-left: 0 !important;
}
#main .section--img-1 li {
    border-bottom: 1px solid #979797;
    padding: .5rem 0;
}
@media screen and (min-width: 768px) {
    #main .section--img-1 h2,
    #main .section--img-1 p {
        color: #fff;
    }
    #main .section--img-1 > .row > div:first-child {
        padding-right: 5rem;
    }
    #main .section--img-1 > .row > div:last-child {
        text-align: right;
        padding-left: 5rem;
    }
    #main .section--img-1 .btn {
        width: 50%;
        display: inline-block;
    }
}

/* "What is ICN2 contributing to this field?"
----------------------------------------- */
#main .section--img-2 h2,
#main .section--img-2 p {
    color: #fff;
}

/* Slider
----------------------------------------- */
.main .trending-topics-slider {
    margin: 2.5rem 0 2rem;
    padding: 0;
}
.main .slick-track {
    display: flex;
}
.main .slick-slide {
    text-align: left;
    border-left: 1px solid #000;
    padding: 0 1.125rem;
    height: auto;
}
#main .trending-topics-slider h2 {
    font-size: 1.25rem;
    letter-spacing: 1.5px;
}
#main .trending-topics-slider h2 a {
    color: #000;
}
#main .trending-topics-slider h2 a:hover {
    text-decoration: underline;
}
#main .trending-topics-slider p {
    font-size: 1rem;
}
.main .slick-prev,
.main .slick-next {
    background-color: transparent;
    width: 34px;
    height: 34px;
}
.main .slick-prev {
    left: 10px;
}
.main .slick-next {
    right: 10px;
}
.main .slick-prev-icon::before,
.main .slick-next-icon::before {
    color: transparent;
    width: 34px;
    height: 34px;
    display: block;
}
.main .slick-prev-icon::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxjaXJjbGUgZmlsbD0iIzMyMzIzMiIgY3g9IjE3IiBjeT0iMTciIHI9IjE3Ii8+CiAgICAgICAgPHBhdGggZmlsbD0iI0ZFRkVGRSIgZD0ibTE5LjA0NCA5LjI3MyAxLjgyIDEuODItNS42MzMgNS42MzMgNS42MzMgNS42MzMtMS44MiAxLjgyLTcuNDUzLTcuNDUzeiIvPgogICAgPC9nPgo8L3N2Zz4K");
}
.main .slick-next-icon::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxjaXJjbGUgZmlsbD0iIzMyMzIzMiIgY3g9IjE3IiBjeT0iMTciIHI9IjE3Ii8+CiAgICAgICAgPHBhdGggZmlsbD0iI0ZFRkVGRSIgZD0ibTE0Ljk1NiA5LjI3My0xLjgyIDEuODIgNS42MzMgNS42MzMtNS42MzMgNS42MzMgMS44MiAxLjgyIDcuNDUzLTcuNDUzeiIvPgogICAgPC9nPgo8L3N2Zz4K");
}
hr.separador {
    margin-bottom: 4rem;
}
@media screen and (min-width: 1100px) {
    .main .trending-topics-slider {
        padding: 0;
    }
    .main .slick-prev {
        left: -50px;
    }
    .main .slick-next {
        right: -50px;
    }
}

/* Collapsible
----------------------------------------- */
.collapsible__title {
    margin: 0;
}
.collapsible__title button {
	 all: inherit;
	 border: 0;
	 width: 100%;
	 margin: 0;
	 border-bottom: 1px solid #000;
     background: transprent;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 1.125rem;
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
}
.collapsible__title button:focus {
    outline: 1px dotted #000;
}
.collapsible__title button:not(:focus-visible) {
    outline: 0;
}
.collapsible__title button:hover,.collapsible .collapsible__title button:active {
	 background-color: inherit;
}
.collapsible__title button[aria-expanded="true"] {
	 border-bottom: 0;
}
.collapsible__title + div:not(hidden) {
	 border-bottom: 1px solid #000;
}
.collapsible button svg {
	 margin-left: 1rem;
	 display: initial;
}
.collapsible [aria-expanded="true"] svg {
	 transform: rotate(0.5turn);
}
.collapsible__images {
    display: flex;
    flex-wrap: wrap;
    margin-left: -.75rem;
    margin-right: -.75rem;
}
.collapsible__images > * {
    flex: 1 1 30%;
    margin: .75rem;
}
.collapsible__images figure img{
    display: block;
    margin: 0 auto;
}
.collapsible__images figure figcaption{text-align: center;}
.collapsible p{text-align: justify;}
.collapsible li{
    list-style-type: none;
    background: transparent url(https://icn2.cat/templates/icn2/images/pointer-grey.png) no-repeat 0 5px;
    padding-left: 30px;
    margin-bottom: 1em;
}
.collapsible a{font-weight: bold;}
@media screen and (min-width: 768px) {
    .collapsible__title button {
        padding-left: 5rem;
        padding-right: 5rem;
    }
    .collapsible__title + div {
        padding-left: 8rem;
        padding-right: 8rem;
    }
}

/* "Groups involved"
----------------------------------------- */
#main .section .cols-list {
    list-style: none;
    font-size: 1.125rem;
    font-weight: 600;
    margin-left: 0 !important;
}
#main .section .cols-list li {
    font-size: inherit;
    border-bottom: 1px solid #000;
    padding: 1rem 0 2.5rem;
}
@media screen and (min-width: 768px) {
    #main .section .cols-list {
        column-count: 2;
        column-gap: 2rem;
    }
}

/* "Selected related projects"
----------------------------------------- */
#main .section--bg-2 h2 {
    color: #fff;
}
#main .section .link-dest {
    background-color: #64babc;
    font-weight: bold;
    font-size: .9375rem;
    padding: .5em 1em;
}
#main .section .link-dest a {
    color: #fff;
}
#main .section .link-dest a:hover {
    color: #000;
    text-decoration: underline;
}

/* "Selected related articles"
----------------------------------------- */
#main .section .articles-list {
    list-style: none;
    margin-left: 0;
}
#main .section .articles-list li {
    border-bottom: 1px solid #d8d8d8;
    padding: 1.5rem 0;
}
#main .section .articles-list a strong,
#main .section .articles-list span {
    display: block;
}


/* portada research */
.research-home .trending-topics-wrapper{
    padding: 2em;
    margin: 2em 0;
    background-color: #f2f2f2;
}
.research-home .trending-topics-wrapper h2{
    position: relative;
}
.research-home .trending-topics-wrapper h2 svg{
    position: absolute;

    }
.research-home .trending-topics-wrapper h2 svg#bubble{
    top: -24px;
}   
.research-home .trending-topics-wrapper h2 svg#trend-up{
    top: -20px;
    right: -29px;
}   

@media only screen and (min-width: 768px){
    .research-home .trending-topics-wrapper{
        margin-right: 3.125em;
    }
    /*.main .trending-topics-slider {    
        padding: 0 3.5rem;
    }*/
}