@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-MediumItalic.eot');
    src: local('../fonts/Circular Std Medium Italic'), local('CircularStd-MediumItalic'),
        url('../fonts/CircularStd-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularStd-MediumItalic.woff2') format('woff2'),
        url('../fonts/CircularStd-MediumItalic.woff') format('woff'),
        url('../fonts/CircularStd-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Black.eot');
    src: local('../fonts/Circular Std Black'), local('CircularStd-Black'),
        url('../fonts/ircularStd-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularStd-Black.woff2') format('woff2'),
        url('../fonts/CircularStd-Black.woff') format('woff'),
        url('../fonts/CircularStd-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Medium.eot');
    src: local('../fonts/Circular Std Medium'), local('CircularStd-Medium'),
        url('../fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularStd-Medium.woff2') format('woff2'),
        url('../fonts/CircularStd-Medium.woff') format('woff'),
        url('../fonts/CircularStd-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Bold.eot');
    src: local('../fonts/Circular Std Bold'), local('CircularStd-Bold'),
        url('../fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularStd-Bold.woff2') format('woff2'),
        url('../fonts/CircularStd-Bold.woff') format('woff'),
        url('../fonts/CircularStd-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-BlackItalic.eot');
    src: local('../fonts/Circular Std Black Italic'), local('CircularStd-BlackItalic'),
        url('../fonts/CircularStd-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularStd-BlackItalic.woff2') format('woff2'),
        url('../fonts/CircularStd-BlackItalic.woff') format('woff'),
        url('../fonts/CircularStd-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Circular Std Book';
    src: url('../fonts/CircularStd-BookItalic.eot');
    src: local('../fonts/Circular Std Book Italic'), local('CircularStd-BookItalic'),
        url('../fonts/CircularStd-BookItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularStd-BookItalic.woff2') format('woff2'),
        url('../fonts/CircularStd-BookItalic.woff') format('woff'),
        url('../fonts/CircularStd-BookItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-BoldItalic.eot');
    src: local('../fonts/Circular Std Bold Italic'), local('CircularStd-BoldItalic'),
        url('../fonts/CircularStd-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularStd-BoldItalic.woff2') format('woff2'),
        url('../fonts/CircularStd-BoldItalic.woff') format('woff'),
        url('../fonts/CircularStd-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Circular Std Book';
    src: url('../fonts/CircularStd-Book.eot');
    src: local('../fonts/Circular Std Book'), local('CircularStd-Book'),
        url('../fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularStd-Book.woff2') format('woff2'),
        url('../fonts/CircularStd-Book.woff') format('woff'),
        url('../fonts/CircularStd-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --color-fons-blau: #0092B2;
    --color-fons-groc: #FFD566;
    --color-fons-taronja: #EF7A00;
    --avanza-primary-red-100: #E83844;
    --avanza-primary-red-50: #F27981;
    --avanza-primary-red-30: #F2AAAF;
    --avanza-primary-red-15: #FAD4D7;
    --avanza-primary-red-5: #FAF5F5;
    --avanza-neutral-black: #1F1F1F;
    --avanza-neutral-900: #333333;
    --avanza-neutral-500: #616161;
    --avanza-neutral-400: #8A8A8A;
    --avanza-neutral-200: #E0E0E0;
    --avanza-neutral-100: #F0F0F0;
    --avanza-neutral-50: #F5F5F5;
    --avanza-neutral-white: #FFFFFF;

    --bs-btn-active-color: var(--avanza-neutral-white);
    --bs-btn-active-bg: var(--avanza-primary-red-100);
    --bs-btn-active-border-color: var(--avanza-primary-red-100);
}

body {
    /* background: #e5e5e5; */
    font-family: 'Circular Std';
}

header {
    background: var(--avanza-neutral-white);
}

a {
    color: var(--avanza-neutral-white);
    text-decoration: none;
}

footer a, footer a:hover, footer a:active {
  color: var(--avanza-neutral-white);
}

footer a:hover {
  text-decoration: underline;
}

a:focus-visible:not(:active),
a:active {
	outline: none;
}

a:focus-visible:not(:active) {
    box-shadow: 0 0 0 4px var(--avanza-primary-red-15);
    border-color: transparent;
}

.bg-blau {
    background-color: var(--color-fons-blau)!important;
}

.bg-groc {
    background-color: var(--color-fons-groc)!important;
}

.bg-taronja {
    background-color: var(--color-fons-taronja)!important;
}

.bg-vermell {
    background-color: var(--avanza-primary-red-100)!important;
}

.bg-avanza-neutral-white {
    background-color: var(--avanza-neutral-white) !important;
}

.bg-avanza-primary-red {
    background-color: var(--avanza-bg-color-primary-red) !important;
}

.link-avanza-primary {
    color: var(--avanza-primary-red-100);    
    cursor: pointer;
}

.link-avanza-primary:hover {
    color: var(--avanza-primary-red-50);    
}

.saber-mas {
    display: none;
    padding-top: 3rem;
}

.saber-mas ul {
    list-style-type: none;  
    padding: 0;              
}

.saber-mas ul li {
    border-bottom: 1px solid #e0e0e0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.saber-mas ul li mark {
    background-color: unset;
    font-style: bold;
    color: #e0e0e0;
}

.bg-groc label {
    color: var(--avanza-primary-red-100)!important;
}

.bg-groc ul li mark {
    color: var(--avanza-primary-red-100);
}

.bg-groc ul li {
    border-bottom: 0;

}

.saber-mas ul > li > ul {
    list-style-type: circle;
    padding-left: 3rem;
}

.saber-mas ul > ul {
    margin-top: 2rem;
}

.seccio-text {
    color: black;
    font-size: 1.25rem;
    font-weight: 450;
}

.seccio-text label {
    cursor: pointer;
    color:white;
    text-decoration: none;
    font-weight: 700;
}

.seccio-text h1 {
    font-size: max(2.3vw, 3.125rem);
    font-weight: 500;
}

.text-blanc {
    color: var(--avanza-neutral-white);
}

.color-link {
    color: var(--avanza-primary-red-100);
}

a.color-link:hover {
    --bs-link-hover-color: var(--avanza-neutral-white);
}

#textSiteAntic {
    margin-top: 83px;
    width: 284px;
}

button.avanza-primary {
    background-color: var(--avanza-primary-red-100);
    border: 1px solid var(--avanza-primary-red-100);
    color: var(--avanza-neutral-white);
    font-style: normal;
    font-weight: 500;
    font-size: max(0.875rem,14px);
    line-height: max(1rem,16px);
    text-align: center;
}

button.avanza-primary:focus:not(:active),
button.avanza-primary:focus-visible:not(:active) {
    background-color: #BE1621 !important;
    color: var(--avanza-neutral-white) !important;
    box-shadow: 0 0 0 4px var(--avanza-primary-red-15);
    border-color: var(--avanza-primary-red-15) !important;
}

button.avanza-primary:hover {
    background-color: #BE1621 !important;
    color: var(--avanza-neutral-white) !important;
}

button.avanza-primary:active {
    background-color: #790E15 !important;
    color: var(--avanza-neutral-white) !important;
    border-color: #790E15 !important;
}

button.avanza-secondary {
    background-color: var(--avanza-neutral-white);
    color: var(--avanza-neutral-400);
    border: 1px solid #CFCFCF;
    font-style: normal;
    font-weight: 500;
    font-size: max(0.875rem,14px);
    line-height: max(1rem,16px);
    text-align: center;
}

button.avanza-secondary:focus:not(:active),
button.avanza-secondary:focus-visible:not(:active) {
    background-color: var(--avanza-primary-red-5) !important;
    color: #BE1621 !important;
    box-shadow: 0 0 0 4px var(--avanza-primary-red-15);
    border-color: var(--avanza-primary-red-15);
}

button.avanza-secondary:hover {
    background-color: var(--avanza-primary-red-5) !important;
    color: #BE1621 !important;
    border-color: #BE1621 !important;
}

button.avanza-secondary:active {
    background-color: var(--avanza-primary-red-15) !important;
    color: #790E15 !important;
    border-color: #790E15 !important;
}

button.p-button {
    padding: 11px 17px;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--avanza-neutral-50) !important;
    --bs-dropdown-link-active-color: var(--avanza-neutral-black) !important;
}

.dropdown-menu li:first-child,
.dropdown-menu li:first-child a.dropdown-item {
    border-top-right-radius: var(--bs-dropdown-border-radius);
    border-top-left-radius: var(--bs-dropdown-border-radius);
}

.dropdown-menu li:last-child,
.dropdown-menu li:last-child a.dropdown-item {
    border-bottom-right-radius: var(--bs-dropdown-border-radius);
    border-bottom-left-radius: var(--bs-dropdown-border-radius);
}

.dropdown-toggle::after {
    border: none !important;
    background-image: url('../img/arrow.svg');
    width: 15px;
    height: 8px;
    vertical-align: middle;
    margin-left: 10px;
    rotate: 180deg;
    transition: rotate, .5s;
}

.dropdown-toggle.show::after {
    rotate: 0deg;
}

@keyframes fadeIn {
    0% { opacity: 0; height: 0% }
    100% { opacity: 1; height: 100% }
}

#checkSaberMarDestrezas {
    display:none;
}

#checkSaberMarDestrezas:checked~#saberMarDestrezas {
    animation: fadeIn 1.5s; 
    display:block;
}

#checkSaberMasDisfrutar {
    display: none;
}

#checkSaberMasDisfrutar:checked~#saberMasDisfrutar {
    animation: fadeIn 1.5s; 
    display:block;
}

#presentacio {
    text-align: center;
}

#presentacio h1 {
    font-size: 3.125rem;
    line-height: 3.6rem;
    font-weight: 500;
}

#videoPresentacio {
    background-color: black;
    height: 398px;
    width: 100%;
    aspect-ratio: 1/0.5;
    position: relative;
    top: 0;
    left: 0;
    transition-property: height, aspect-ratio;
    transition-duration: 0.2s;
    transition-delay: 0s;
    animation-timing-function: cubic-bezier(1,0,0,1);
}

#videoPresentacio.with_video {
    aspect-ratio: 16/9;
    height: 100%;
    transition-duration: 1s, 0s;
}

#videoPresentacio iframe#videoPlayer {
    opacity: 0;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    z-index: 999;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 1s, 0s;
    transition-delay: 1s, 0s;
    animation-timing-function: cubic-bezier(1,0,0,1);
}

#videoPresentacio.with_video iframe#videoPlayer {
    opacity: 1;
    aspect-ratio: 16/9;
    visibility: visible;
}

#slide {
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 398px;
    top: 0;
    left: 0;
    background-color: black;
    background-image: url("../img/fondo_video-avanza-bambu-lector.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 1000;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0s;
    animation-timing-function: cubic-bezier(1,0,0,1);
    cursor: pointer;
}

#slide.ocultar {
    opacity: 0;
    background-color: transparent;
    z-index: 998;
}

#play {
    position: absolute;
    bottom: calc(50% - 21px);
    right: calc(50% - 25px);
    width: 50px;
    height: 43px;
    background-image: url("../img/boton_play.svg");
    cursor: pointer;
}


@media (min-width: 992px){
    #blanc {
        padding-top: 12rem !important;
        padding-bottom: 8rem !important;
    }
}

@media only screen and (orientation: portrait) and (max-width: 480px) {

    #videoPresentacio {
        height: 660px;
        transition-property: height;
        transition-duration: 1s;
        transition-delay: 0s;
        animation-timing-function: cubic-bezier(1,0,0,1);
    }
    #videoPresentacio.with_video {
        height: 177.77vw;
    }

    #slide {
        height: 660px;
    }

    #slide.ocultar {
        transition-delay: 0s;
    }

    #videoPresentacio iframe#videoPlayer {
        transform: rotate(-90deg);    
        transform-origin: top right;
        width: 177.77vw;
        height: 100vw;
        margin-bottom: 100vw;
        margin-left: -177.77vw;
    }
}

#peu {
    background: url('../img/istock-503082527-tractada.jpg') center center;
    background-size: cover;
    font-size: 3.125rem;
    line-height: 3.6rem;
    font-weight: 500;
    padding-top: 12rem;
    padding-bottom: 12rem;
}

footer {
    font-size: 13px;
}

footer h5 {
    color: var(--avanza-primary-red-15);
    font-style: normal;
    font-weight: 450;
    font-size: 13px;
    line-height: 20px;
}

/* Cookies footer */

.cookies-container{
    position: sticky;
    z-index: 1000;
    bottom: 0;
    height: fit-content;
    
}
#navbar-mobil {
    background-color: #ffffff;
    height: 56px;
    max-height: 56px;
}

#navbar-mobil a{
    text-decoration: none;
    color: #1F1F1F;
    cursor: pointer;
    font-family: 'Circular Std Book';
}

header nav .nav-link-mobile {
    height: 100%;
    min-height: 44px;
    border-bottom: 1px solid rgba(240, 240, 240, 1);
    font-weight: 200;
}

header nav .nav-link-mobile.active, header nav .nav-link-mobile:hover {
    padding-left: 13px;
    background-color: var(--avanza-primary-red-5);
    color: var(--avanza-primary-red-100) !important;
    text-decoration: none;
}

header nav .nav-link-mobile {
    height: 100%;
    min-height: 44px;
    border-bottom: 1px solid rgba(240, 240, 240, 1);
}

.border-left {
    border-left: 3px solid transparent !important;
}

.border-right {
    border-right: 3px solid transparent !important;
}

.border-left.active, .border-left:hover {
    border-left: 3px solid var(--avanza-primary-red-100) !important;
}

.border-left.active, .border-right:hover {
    border-right: 3px solid var(--avanza-primary-red-100) !important;
}

header nav .nav-link-close {
    height: 100%;
    border-bottom: 1px solid rgba(240, 240, 240, 1);
}

.close-nav-mobile {
    min-height: 56px !important;
}