@font-face {
  font-family: 'Reckless Neue';
  src: url('../fonts/RecklessNeue-Light.woff2') format('woff2'),
       url('../fonts/RecklessNeue-Light.woff') format('woff');
  font-weight: 300; /* Light */
  font-style: normal;
}
@font-face {
  font-family: 'Reckless Neue';
  src: url('../fonts/RecklessNeue-Regular.woff2') format('woff2'),
       url('../fonts/RecklessNeue-Regular.woff') format('woff');
  font-weight: 400; /* Regular */
  font-style: normal;
}

@font-face {
  font-family: 'Reckless Neue';
  src: url('../fonts/RecklessNeue-Bold.woff2') format('woff2'),
       url('../fonts/RecklessNeue-Bold.woff') format('woff');
  font-weight: 700; /* Bold */
  font-style: normal;
}
@font-face {
  font-family: 'AvertaCY';
  src: url('../fonts/AvertaCY-Light.woff2') format('woff2');
  font-weight: 300; /* Asigna un peso ligero */
  font-style: normal;
}

@font-face {
  font-family: 'AvertaCY';
  src: url('../fonts/AvertaCY-Regular.woff2') format('woff2');
  font-weight: 400; /* Asigna un peso normal o regular */
  font-style: normal;
}

@font-face {
  font-family: 'AvertaCY';
  src: url('../fonts/AvertaCY-Bold.woff2') format('woff2');
  font-weight: 700; /* Asigna un peso negrita */
  font-style: normal;
}
    :root {
    --color-groc: #fae703;
    }
    /* Generic */
    html {
        scroll-behavior: smooth;
    }
    * { box-sizing: border-box; }
    body{
        font-family: 'AvertaCY';
        margin: 0;
        line-height: 1.25;
        color:#000;
        font-weight: 300;
        font-size: 20px;
    }
    img{
        max-width: 100%;
    }

    ul {
        padding-left: 25px;
    }

    a
    {
        color: #dfc01e;
    }

    .grecaptcha-badge
    {
        display: none !important;
    }

    strong, b {
        font-weight: 700;
    }
    button {
        font-family: 'AvertaCY', sans-serif;
        background-color: black;
        border: 1px solid black;
        border-radius:100px;
        cursor: pointer;
        padding: 12px 25px;
        font-size: 14px;
        color: white;
        font-weight: 500;
        height: fit-content;
        transition: all 0.2s ease;
    }
    input{
        font-family: 'AvertaCY';
    }
    input::placeholder{
        font-family: 'AvertaCY';
    }
    a.estil_boto, button.estil_boto{
        color: white;
        background-color: #000;
        border: 1px solid white;
        border-radius: 100px;
        font-size: 18px;
        line-height: 23px;
        padding: 20px 45px;
        text-decoration: none;
        width: fit-content;
        transition: all 0.2s;
        align-content: center;
    } 
    a.estil_boto.groc, button.estil_boto.groc{
        color: black;
        background-color: var(--color-groc);
        border: 0;
        text-align: left;
        padding: 20px;
    }

    .contenidor_centrat,.legal_prin{
        width: 95%;
        max-width: 1780px;
        margin: 0 auto;
    }

    .legal_prin
    {
        padding: 150px 0;
    }
    .boto_secundari{
        background-color: #f6f6f6;
        color: black;
        border: 1px solid #f6f6f6;
    }
    button.invertit{
        background-color: white;
        color: black;
        border: 1px solid black;
        
    }
    a.estil_boto.invertit{
        background-color: white;
        color: black;
        border: 1px solid black;
    }

    h1,h2,h3,h4,h5,h6{
        margin: 0;
    }
    .titol_bloc{
        font-family: 'Reckless Neue';
        font-size: 80px;
        font-weight: 500;
    }
    /* HOVERS */
    button:hover {
        transform: translateY(-5px);
    }
    button.accordion:hover {
        transform: unset;
    }
    header a{
        transition: transform 0.2s ease;
    }   
    header a:hover{
        transform: translateY(-5px);
    }
    .contenidor_swiper_fletxes i{
        transition: transform 0.2s ease;
    }
    .contenidor_swiper_fletxes i:hover{
        transform: translateY(-3px);
    }
    .contenidor_xxss i{
        transition: transform 0.2s ease;
    }
    .contenidor_xxss i:hover{
        transform: translateY(-3px);
    }
    /* FI HOVERS */

    /* GENERICA */

    .badge
    {
        height: 28px;
        font-size: 14px;
        line-height: 26px;
        background: #2B2B2B;
        border-radius: 30px;
        display:inline-block;
        padding: 0 10px;
        margin-right: 10px;
        margin: 5px 0;
    }

        .badge:before
        {
            content: '';
            display: inline-block;
            width: 13px;
            height: 13px;
            margin-right: 8px;
            background-color: #FAE700;
            border-radius: 50%;
            vertical-align: middle;
        }

    #content_generica{
        margin-top: 100px;
        margin-bottom: 100px;
        min-height: 70vh;
    }
    #content_generica .textos_img_generica{
        display: flex;
        gap: 50px;        
    }
    #content_generica .textos_img_generica .textos{
        display: flex;
        flex-direction: column;
    }

     #content_generica .contenidor_imatge img{
        max-width: 400px;
     }
    /* HEADER */
    #contenidor_header {
        display: flex;
        justify-content: space-between;
        /*height: 90px;*/
        border-bottom: 1px solid black;
        align-items: center;
        padding: 35px 60px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #FFF;
        z-index: 1000;
        transition: all .3s ease;
    }

    #contenidor_header:not(.transparent){
        padding: 15px 60px;
    }
    #contenidor_header .contenidor_fantasma{
        width: 20%;
    }
     #contenidor_header .contenidor_imatge{
        width: 20%;
        /*display: flex;
        justify-content: center;*/
     }

     #close_menu
    {
        display: none;
    }
     #contenidor_header .logo{
        height:53px;
     }
    #contenidor_header .menu {
        display: flex;
        gap: 10px;
        font-size: 20px;
    }
    #contenidor_header .menu a{
        text-decoration: none;
        color: black;
        display:inline-flex;
        height:30px;
        align-items:center;
        justify-content: center;
        padding: 0 25px;
        border-radius: 1000px;
        white-space: nowrap;
        transition: all 0.2s;
    }

    #contenidor_header .menu a > i {
        margin-left: 10px;
        font-size: 15px;
    }

    #contenidor_header .menu a:hover,
    #contenidor_header .menu a.active{
        background-color: black;
        color: white;
        transition: all 0.2s;

    }

    #contenidor_header.transparent .menu a:hover,
    #contenidor_header.transparent .menu a.active{
        background-color: white;
        color: black;
        transition: all 0.2s;
    }

    #contenidor_header .icona_select{
        display: flex;
        gap: 2px;
    }
    #contenidor_header .icona_select i{
        align-self: center;
    }
    #contenidor_header .select_idioma{
        font-size: 12px;
        border: 0;
    }
    #contenidor_header .select_idioma option {
        background-color: white; /* Fondo de las opciones */
        color: #333; /* Color del texto de las opciones */
        padding: 10px 15px; /* Relleno */
    }

    
    /*#contenidor_header .idioma_button{
        width: 20%;
        display: flex;
        justify-content: end;
        gap: 30px;
    }
    #contenidor_header .idioma_button a{
        font-size: 12px;
        padding: 10px 25px;
        background-color: white;
        border: 1px solid;
        color: black;
    }  
    #contenidor_header .idioma_button a:hover{
        font-size: 12px;
        padding: 10px 25px;
        background-color: black;
        color: #FCEC04;
        transform: scale(0.95);
        border: 1px solid black;
    } */

    #contenidor_header .idioma_button
    {
        display: flex;
        width: 20%;
        justify-content: flex-end;
        font-size: 16px;
    }

    #contenidor_header .idioma_button a
    {
        color: #000;
        text-decoration: none;
        border-left: 1px solid #000;
        padding: 0px 10px;
    }

        

    #contenidor_header.transparent .idioma_button a
    {
        color: #fff;
        border-left: 1px solid #FFF;
    }

    #contenidor_header.transparent .head_menu_mobil
    {
        color: #FFF;
    }

    #contenidor_header .idioma_button a:first-child
    {
        border-left: none;
    }
    



    #contenidor_header.transparent
    {
        background: none;
        border-bottom: 1px solid transparent;
    }

    #contenidor_header:not(.transparent) #logo_white
    {
        display: none;
    }

    #contenidor_header.transparent #logo
    {
        display: none;
    }

     

    #contenidor_header.transparent .menu a
    {
        color: white;
    }


    .contenidor_input_button button {
        position: absolute; 
        top: 50%; 
        transform: translateY(-50%);
        right: 10px; 
        /*top: 8px;*/
        font-size: 12px;
    }
    .head_menu_mobil {
        display: none;
    }
    #cap_menu_capcalera {
        display: none;
    }
    /* GENERICA */
    #bloc_generic_prin
    {
        min-height: 100vh;
        background: #000;
        color:#FFF;
        padding: 150px 0px 45px; 
    }  

    .generica_presentacio
    {
        display:flex;
        align-items: center;
        margin-bottom: 25px;
    }

    .generica_presentacio:first-child {
        min-height: 60vh;
    }

    .generica_presentacio div:first-child
    {
        width: 35%;
    }

    .generica_presentacio .titol_bloc
    {
        margin-bottom: 20px;
    }

    .generica_presentacio .badges
    {
        margin-bottom: 20px;
    }

    .subtitol_bloc
    {
        font-size: 34px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .generica_presentacio .icon
    {
        flex: 1;
        
    }

    .generica_presentacio .desc_presentacio
    {
        flex: 1;
        
    }

    .generica_presentacio .desc_presentacio > div
    {
        margin-left: 50%;
        width: 50%;
    }

    .generica_presentacio .icon img
    {
        margin: auto;
        display: block;
        width: 400px;
    }

    .generica_presentacio .icon > div
    {
        padding-left: 50%;
    }

    /* FORMULARI*/
    #bloc10 p{
        margin-bottom: unset;
        max-width: unset;
    }
    #bloc10 form p:nth-of-type(1){
        text-transform: uppercase;
        font-size: 14px;
        margin: 0;
    }
    #bloc10 form p:nth-of-type(2){
        font-size: 50px;
        line-height: 60px;
        font-family: 'Reckless Neue';
    }
    #bloc10 .contenidor_contacte form{
        background-color: rgba(43, 43, 43, 0.95);
        padding: 37.5px 46px 50px 46px;
        border-radius: 30px;
        flex-wrap: wrap;
        gap: 35px;
    }
        #bloc10 form .textos{
        margin-bottom: 12px;
    }
    #bloc10 .contenidor_contacte input{
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid #707070;
        padding: 8px 0;
    }
    #bloc10 .contenidor_contacte input::placeholder{
        color:#707070;
        font-size: 14px;
        line-height: 18px;
        
    }
    #bloc10 form .doble_camp {
        display: flex;
        gap: 95px;
    }
    #bloc10 form .doble_camp .field.contact {
        width:100%;
        flex: 1;
    }
    #bloc10 {
        padding: 85px 0;
        background-color: black; 
        position: relative;
        /*height: 900px;*/
        width: 100%;
        overflow: hidden;
    }
    #bloc10:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: #000000;
        background: linear-gradient(
    180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0) 100%);
        z-index: 100;
    }
    #video{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        /*width: 75%;*/
        /*aspect-ratio: 1.64;*/
        object-fit: cover;
        opacity: 0.7;
    }
    #bloc10 .contenidor_centrat{
        z-index: 2;
        position: relative;
    }
    #bloc10 .titol_bloc{
        font-size: 80px;
        line-height: 84px;
        font-family: 'Reckless Neue';
    }
    #bloc10 .contenidor_textos {
        max-width: 700px;
        justify-content: start;
    }
    #bloc10 .contenidor_textos p{
        font-size: 20px;
        line-height: 25px;
        max-width: 90%;
    }
    #bloc10 .badge{
        text-transform: uppercase;
    }
    .checkbox_personalitzat {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        user-select: none;

        font-size: 14px;
        line-height: 18px;
        text-decoration: none;
        color: white;

    }
    .checkbox_personalitzat a{
        font-size: 14px;
        line-height: 18px;
        text-decoration: none;
        color: white;
    }
    .checkbox_personalitzat input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
        margin: 0;
    }
    .text_legal{
        font-size: 14px;
        line-height: 18px;
    }
    .marcador_visual {
        position: absolute;
        top: 0;
        left: 0;
        height: 22px;
        aspect-ratio: 1;
        background-color: transparent; 
        border-radius: 5px;
        border: 1px solid #707070;
    }

    /* Color de fondo cuando está marcado */
    .checkbox_personalitzat input:checked ~ .marcador_visual {
        background-color: #707070; /* Un color azul, por ejemplo */
    }

    /* Crear la marca de verificación con ::after */
    .marcador_visual::after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Mostrar la marca de verificación cuando el input está marcado */
    .checkbox_personalitzat input:checked ~ .marcador_visual::after {
        display: block;
    }

    .checkbox_personalitzat .marcador_visual::after {
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg); 
    }
    .legals{
        margin-top: 5px;
        display: flex;
        flex-direction: column;
        gap: 7px;
    }
    #bloc10 form .wrap_btn button{
        width:200px;
        margin-top:85px;
        position: relative;
        font-size: 18px;
    }
    .estil_boto.groc i.fa-arrow-right{
        width: 42px;
        aspect-ratio: 1;
        border-radius: 50%;
        padding: 5px;
        background-color: white;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%) rotate(-45deg);
        font-size: 22px;
        align-content: center;
        text-align: center;

    }
    /* BLOC1 */
    #bloc1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 0px 0 50px 0;
        gap: 100px;
        height: 100vh;
        background-color: black;
        position: relative;
        overflow: hidden;
    }
    .fondo-neon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* Coloca el canvas detrás del resto del contenido */
    }

    #bloc1 .contenidor_centrat{
        margin: 0 auto;
        width: 95%;
        height: 100%;
        position: relative;
        border-bottom: 1px solid black;
        z-index: 1;
        max-width: unset;
    }

    #bloc1 .titol_bloc{
        font-size: 80px;
        line-height: 1.2;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-family: 'Reckless Neue';
        color: white;
        width: max-content;
    }
    #bloc1 .subtitol_bloc{
        font-size: 20px;
        line-height: 1.2;
        color: black;
        width: 35%;
        position: absolute;
        bottom: 0;
        left: 0;
        text-align: start;
        color: white;
    }
    #bloc1 .botons_agrupats{
        position: absolute;
        bottom: 0;
        right: 0;
        display: flex;
        gap: 30px;
        margin-bottom: 20px;
    }
    #bloc1 .estil_boto.groc{
        position: relative; 
        width: 190px;
        font-weight: 500;
    }
    
    /* BLOC3 */
#bloc3{
        display: flex;
        flex-direction: column;
        color: black;
        padding: 100px 0 80px 0;
    }
    #bloc3 .titol_bloc{
        font-size: 50px;
        line-height: 60px;
        font-family: 'Reckless Neue';
        margin-bottom: 25px;
    }
     #bloc3 .subtitol_bloc{
        font-size: 90px;
        line-height: 96px;
        width: 85%;
        margin-bottom: 150px;
    }
    #bloc3 .boto_textos{
        display: flex;
        justify-content: space-between;
        gap: 40px;
        margin-bottom: 50px;
    }
    #bloc3 .boto_textos > div:nth-child(1){
        width: 61.5%;
        align-content: end;
        padding-bottom: 20px;
    }
    #bloc3 .boto_textos a.estil_boto.blanc{
        background-color: white;
        color: black;
        border-color: black;
    }
    #bloc3 .boto_textos > div:nth-child(2){
        width: 36.5%;
        display: flex;
        flex-direction: column;
    }
    #bloc3 .boto_textos p:nth-child(1){
        font-size: 34px;
        font-weight: 400;
    }
    #bloc3 .boto_textos p:nth-child(2){
        font-size: 20px;
        margin: 0;
        width: 80%;
        font-weight: 400;
    }
    #bloc3 .imatges{
        display: flex;
        justify-content: space-between;
        gap: 40px;
    }
    #bloc3 .imatges img:first-child{
        object-fit: cover;
        border-radius: 5px;
        width: 61.5%;
    }
    #bloc3 .imatges img:nth-child(2){
        width: 36.5%;
        border-radius: 15px;
        object-fit: cover;
    }


    /* BLOC4 */
    #bloc4{
        background-color: black;

    }
    #bloc4 .contenidor_centrat{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        padding: 180px 0 130px 0;
        background-color: black;
        flex-wrap: wrap;
    }
    #bloc4 .titol_bloc{
        text-align: center;
        color: white;
        font-family: 'Reckless Neue';
        font-size: 50px;
    }

    #bloc4 .llistat_blocs{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
        margin-top: 90px;
    }

    #bloc4 .fondo-neon{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }
    #bloc4 .bloc:hover .fondo-neon {
        display: block;
    }
    
    #bloc4 .llistat_blocs .bloc{
        width: 23%;
        display: flex;
        flex-direction: column;
        gap: 50px;
        background-color: #1A1A1A;
        border: 0.5px solid #707070;
        border-radius: 15px;
        padding: 40px;
        padding-top: 100px;
        max-width: 450px;
        position: relative;
        overflow: hidden;
        color: white;
        text-decoration: none;

    }

    #bloc4 .llistat_blocs .bloc .imatge_punt{
            min-height: 250px;
            height: 53.5%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index: 1;
    }
    #bloc4 .llistat_blocs .bloc img{
        width: 50%;
        margin: 0 auto;
        z-index: 1;
    }
    #bloc4 .llistat_blocs .bloc img.servei_N {
        display: none;
    }
    #bloc4 .llistat_blocs .bloc:hover img.servei_Y{
        display: none;
    }
    #bloc4 .llistat_blocs .bloc:hover img.servei_N{
        display: unset;
    }
    #bloc4 .llistat_blocs .bloc .punt_groc{
        width: 60px;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 0.5px solid #707070;
        background-color: transparent;
        transition: background-color 0.2s ease-in-out;
        z-index: 1;
        
        position: absolute;
        top: 50%;
    }
    #bloc4 .llistat_blocs .bloc .contenidor_text {
        z-index: 1;
    }
    #bloc4 .llistat_blocs .bloc .contenidor_text .titol_solucio{
        font-size: 30px;
        transition: color 0.2s ease-in-out;

    }
    #bloc4 .llistat_blocs .bloc:hover .contenidor_text .titol_solucio{
        color: var(--color-groc);

    }
    #bloc4 .llistat_blocs .bloc .contenidor_text p{
        font-size: 18px;
    }

    
    #bloc4 .llistat_blocs .bloc:hover .punt_groc{   
        background-color: var(--color-groc);
    }
    
    /* BLOC8 */
    #bloc8{
        padding: 80px 0 55px 0;
        background-color: black;
    }
    #bloc8 .contenidor_imatge{
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
    }
    #bloc8 .imatge_icona{
        height: 53px;
        aspect-ratio: 1;
        background-color: lightgray;
    }

    #bloc8 .swiper-slide {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    #bloc8 .opinio{
        font-size: 36px;
        line-height: 1.8;
        color: white;
        width: 55%;
        margin: 0;
    }
    #bloc8 .persona_opinio{
        width: 150px;
        height: 200px;
        background-color: lightgray;
        margin-bottom: 50px;
    }

    #bloc8 .swiper-button-next,
    #bloc8 .swiper-button-prev{
        width: 60px;
        height: 60px;
        border-radius: 15px;
        background-color: #222222;
        color: white;
        top: 15%;
    }
    #bloc8 .swiper-button-next::after,
    #bloc8 .swiper-button-prev::after{
        font-size: 20px ;
    }
    #bloc8 .swiper-pagination .swiper-pagination-bullet{
        background-color: lightgray !important;
    }
    #bloc8 .contenidor_opinio {
        margin-top: 55px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: white;
    }
    #bloc8 .contenidor_opinio .imatge{
        width: 52px;
        aspect-ratio: 1;
        border-radius: 50%;
        background-color: gray;
        align-self: center;
        margin-bottom: 11px;
    }   
    #bloc8 .contenidor_opinio .nom{
        font-size: 15px;
        line-height: 1.4;
        margin: 0;
    }  
    #bloc8 .contenidor_opinio .descripcio{
        font-size: 12px;
        line-height: 1.4;
        color: gray;
        margin: 0;
        margin-bottom: 14px;
    }  
    #bloc8 .contenidor_opinio .qualificacio{
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }  
    #bloc8 .contenidor_opinio .qualificacio i{
        font-size: 11px;
    }
    #bloc8 .swiper-pagination-bullet{
        width: 5px;
        height: 5px;
    }
    #bloc8 .swiper{
        max-height: 415px;
    }
    /* BLOC9 */
    /* BLOC10 */
    #bloc10{
        /*padding: 180px 7%;*/
        background-color: black;
        color: white;
    }
    #bloc10 .contenidor_contacte{
        display: flex;
        justify-content: space-between;
        gap: 50px;
    }
    #bloc10 .contenidor_contacte form{
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 50%;
        min-width: 500px;
    }
    #bloc10 .contenidor_contacte {
        display: flex;
        gap: 250px;
    }
    #bloc10 .contenidor_contacte input,
    #bloc10 .contenidor_contacte textarea{
        width: 100%;
        /*padding: 10px 15px;*/
        background-color: transparent;
        /*border: 2px solid white;*/
        color: white;
        /*border-radius: 5px;*/
        outline:none;
        transition: transform 0.3s ease;
        font-size: 16px;
    }
    #bloc10 .contenidor_contacte textarea{
        height: 100px;
    }

    /* BLOC11 */
    #bloc11{
        padding: 60px 0;
        display: flex;
        flex-direction: column;
        gap: 130px;
        background-color: var(--color-groc);
        font-weight: 400;
    }
    #bloc11 .contenidor_centrat{ 
        max-width: unset;
    }
    #bloc11 > div{
        display: flex;
        justify-content: space-between;
        row-gap: 50px;
        flex-wrap: wrap;
    }
    #bloc11 > div > p{
        margin: 0;
        max-width: 450px;
        font-size: 20px;
        line-height: 25px;
    }
    #bloc11 > div > .contenidor_enllacos{
        display: flex;
        gap: 90px;
    }
    #bloc11 > div > .contenidor_enllacos a{
        font-size: 18px;
        line-height: 23px;
        text-decoration: none;
        color: #000;
    }
    #bloc11 > div > img{
        max-width: 520px;
        width: 100%;
    }
    #bloc11 > div > div.logo_text{
        display: flex;
        flex-direction: column;
        align-items: end;
    }
    #bloc11 > div > div.logo_text a{
        text-decoration: none;
        color: #000;
    }
    #bloc11 > div > div > img{
        max-width: 300px;
        margin-bottom: 15px;
        width: 100%;
    }
    /* BLOC12 */
    /* BLOC13 */
    #bloc13{
                border-top: 1px solid black;
    }
    #bloc13 .contenidor_textos{ 
        display: flex;
        justify-content: space-between;
        margin: 0 40px;
        padding: 30px 0;
        gap: 10px;
        flex-wrap: wrap;
    }

    #bloc13 .contenidor_textos .contenidor_esquerre,
    #bloc13 .contenidor_textos .contenidor_dret { 
        width: 35%;
        display: flex;
        gap: 50px;
        justify-content: start;
    }
    #bloc13 .contenidor_textos .contenidor_dret { 
        justify-content: end;
    }
    #bloc13 .contenidor_textos .contenidor_esquerre span,
    #bloc13 .contenidor_textos .contenidor_dret span{ 
        align-content: center;
        font-weight: 500;
    }
    #bloc13 .contenidor_textos .contenidor_esquerre a,
    #bloc13 .contenidor_textos .contenidor_dret a{ 
        align-content: center;
        text-decoration: none;
        color: black;
        font-size: 20px;
        font-weight: 500;
    }
    #bloc_punts_negres {
        width: 100%;
        height: 170px;
        position: relative;
        overflow: hidden;
        background-color: var(--color-groc);
    }

    #bloc_punts_negres .fondo-neon {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #preguntes_frequents
    {
        /*border-top: 1px solid #707070;*/
        padding: 70px 0;

    }

    #preguntes_frequents .subtitol_bloc
    {
        margin-bottom: 55px;
    }

        .pregunta_frequent
        {
            display: flex;
            border-bottom: 1px solid #707070;
            margin-bottom: 50px;
            padding: 8px 0;
        }

        .pregunta_frequent b
        {
            margin-right: 30px;
            width: 30%;
        }

        .pregunta_frequent .desc
        {
            flex: 1;
        }

    .llista_fills
    {
        width: 95%;
        max-width: 1448px;
    }

    .bloc_fill
    {
        display: flex;
        border-top: 1px solid #707070;
        padding: 60px 0;
    }

        .bloc_fill .titol
        {
            font-size: 28px;
            font-weight: 600;
            width: 46.5%;
            padding-right: 30px;
        }

        .bloc_fill .foto
        {
            width: 310px;
            margin-right: 48px;
        }

        .bloc_fill .desc
        {
            flex: 1;
        }

    #beneficis
    {
        border-top: 1px solid #707070;
        padding: 70px 0;

    }

    #beneficis .subtitol_bloc
    {
        margin-bottom: 55px;
    }

    #beneficis_llista
    {
        display: flex;
        flex-wrap: wrap; 
    }



    .benefici
    {
        width: 33.3%;
        margin-bottom: 70px;
        padding-left: 78px;
        position: relative;
        padding-right: 35px;
        

    }

        .benefici::before
        {
            content: '';  
            top: 0;
            left: 0; 
            width: 60px;
            height: 60px;
            border-radius: 50%;
            position: absolute;
            background: #FFF;
            border: 1px solid #707070;
            transition: all .3s ease;
            
        }

        .benefici:hover:before
        {
            background: #FBE701;
            border: 1px solid #FBE701;
        }

        .benefici h4
        {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
        }

    #que_es
    {
        background: #000;
        color:#FFF;
        margin-bottom: 90px;
    }

        #que_es > div
        {
            border-top: 1px solid #707070;
            padding: 55px 0;
        }

        #que_es .contenidor_centrat
        {
            display: flex;
            gap: 8%;
            
        }

        #que_es .desc 
        {
            width: 39.5%;
        }

        #que_es .specs 
        {
            flex: 1;
        }

            .spec
            {
                padding: 60px 50px;
                border: 1px solid #707070;
                border-radius: 15px;
                opacity: 1;
                background-color: #1A1A1A;
                display:flex;
                margin-bottom: 50px;
                align-items:  center;
            }

                .spec .icon
                {
                    width: 125px;
                    padding-right: 45px;
                }
                
                .spec .titol
                {
                    width: 330px;
                    padding-right: 30px;
                    font-weight: 600;
                    font-size: 28px;
                    
                }

                .spec .desc
                {
                    flex: 1;
                }

    #canvas-mask {
        position: absolute;
        z-index: 1;
    }

    #canvas-light {
        position: absolute;
        z-index: 2; 
    }

    footer{
        background-color: var(--color-groc);
    }
    @media screen and (max-width:1440px){
        body {
            font-size: 18px;
        }

        #contenidor_header
        {
            padding: 25px 30px;
        }

        


        #contenidor_header .menu {
            display: flex;
            gap: 5px;
            font-size: 16px;
        }

        #contenidor_header .menu a {
            padding: 0 12px;
        }

        #contenidor_header .idioma_button {
            font-size: 14px;
        }

        #contenidor_header .logo {
            height: 35px;
        }

        .generica_presentacio div:first-child {
            width: 50%;
        }

        .generica_presentacio .desc_presentacio > div
        {
            margin-left: 0;
            width: 100%;
        }

            #que_es .contenidor_centrat {
                gap: 4%;
            }

        .spec {
            padding: 30px 30px;
            margin-bottom: 25px;
        }

            .spec .icon {
                width: 108px;
            }

            .spec .titol {
                width: 200px;
                padding-right: 15px;
                font-size: 22px;
            }

        .bloc_fill .titol {
            font-size: 28px;
            width: 30.5%;
        }

        .bloc_fill .foto {
            width: 265px;
            margin-right: 30px;
        }

        #beneficis {
            padding: 35px 0;
        }

        .benefici {
            padding-left: 50px;
            margin-bottom: 35px;
        }

        .benefici::before {
            width: 30px;
            height: 30px;
        }

        .benefici h4 {
            font-size: 22px;
        }


        .titol_bloc {
            font-family: 'Reckless Neue';
            font-size: 66px;
        }
        a.estil_boto, button.estil_boto {
            font-size: 16px;
        }
        a.estil_boto, button.estil_boto {
            padding: 16px 35px;
        }
        a.estil_boto.groc, button.estil_boto.groc {
            padding: 16px;
        }
        #bloc1 .estil_boto.groc {
            width: 165px;
        }
        #bloc1 .titol_bloc {
            font-size: 68px;
        }
        #bloc1 .subtitol_bloc {
            font-size: 18px;
            width: 40%;
        }
        /* BLOC 4 */
        #bloc4 .titol_bloc {
            font-size: 42px;
        }
        #bloc4 .llistat_blocs .bloc {
            padding: 25px;
            padding-top: 70px;
        }
        #bloc4 .llistat_blocs .bloc .imatge_punt {
            min-height: 200px;
        }
        #bloc4 .llistat_blocs .bloc .contenidor_text .titol_solucio {
            font-size: 24px;
        }
        #bloc4 .llistat_blocs .bloc .contenidor_text p {
            font-size: 16px;
        }
        #bloc4 .llistat_blocs {
            justify-content: center;
        }
        /* BLOC 3 */
        #bloc3 {
            padding: 60px 0;
        }
        #bloc3 .titol_bloc {
            font-size: 42px;
            line-height: 50px;
        }
        #bloc3 .subtitol_bloc {
            font-size: 60px;
            line-height: 68px;
            margin-bottom: 60px;
        }
        #bloc3 .boto_textos p:nth-child(1) {
            font-size: 25px;
        }

        

        #bloc3 .boto_textos p:nth-child(2) {
            font-size: 18px;
        }
        #bloc10 .titol_bloc {
            font-size: 68px;
            line-height: 76px;
        }
        #bloc10 .contenidor_textos p {
            font-size: 18px;
        }
        #bloc10 .contenidor_contacte {
            gap: 50px;
        }
        #bloc10 form p:nth-of-type(2) {
            font-size: 42px;
            margin-top: 10px;
        }
        #bloc10 form .doble_camp {
            justify-content: space-between;
            gap: 20px;
        }   
        
        #bloc10 form .wrap_btn button {
            margin-top: 50px;
            font-size: 16px;
        }
        #video {
            left: unset;
            right: 0    ;
        }
        #bloc11 > div > p {
            font-size: 18px;
            line-height: 22px;
        }
        #bloc13 .contenidor_textos .contenidor_esquerre a, #bloc13 .contenidor_textos .contenidor_dret a {
            font-size: 18px;
        }

        #bloc11 {

            gap: 50px;
        }

        #bloc11 > div > img {
            max-width: 320px;
            width: 100%;
        }

        #bloc11 > div > div > img {
            max-width: 225px;
            width: 100%;
        }

        #bloc_punts_negres
        {
            display:none;
        }

        #bloc13 .contenidor_textos {
            margin: 0 25px;
        }

        
    }
    @media screen and (max-width:1024px){
        body {
            font-size: 16px;
        }

        .head_menu_mobil
        {
            display: block;
            margin-right: 15px;
        }

        #contenidor_header {
            padding: 25px 2%;
        }

        #contenidor_header:not(.transparent) {
            padding: 15px 2%;
        }

        #contenidor_header .contenidor_imatge{
            width: 185px;
        }

        #contenidor_header .idioma_button{
            font-size: 12px;
            width: auto !important;
            flex: 1;
        }

        .menu
        {
            display:none !important;
            
        }

        .menu.active {
            display: block !important;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            right: 0;
            bottom: 0;
            
        }

        #close_menu
        {
            display: block;
        }

        #content_menu {
            display: block !important;
            position: fixed;
            top: 0;
            right: 0;
            width: 250px;
            bottom: 0;
            background: #FFF;
            padding: 30px 20px;
            z-index: 999;
            
        }

        #bg_menu
        {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
        }



        #contenidor_header .menu a
        {
            color: #000 !important;
            display:block;
            margin-bottom: 10px;
            padding: 0;
            background: none !important;
        }

        #contenidor_header .menu a.active
        {
            font-weight: 600;
        }
        #bloc_generic_prin {
            min-height: none;
            padding: 90px 0px 45px;
        }

        .titol_bloc {
            font-family: 'Reckless Neue';
            font-size: 50px;
        }

        .subtitol_bloc {
            font-size: 22px;
        }

        .badge {
            height: 28px;
            font-size: 12px;
            margin: 5px 0;
        }

        .generica_presentacio {
            gap: 40px;
        }

        .spec .icon {
            width: 80px !important;
            padding-right: 30px;
            margin: auto;
            margin-bottom: 15px;
        }

        .spec .titol {
            width: 182px;
            padding-right: 25px;
            font-size: 18px;
        }

        .bloc_fill .foto {
            width: 200px;
        }

        #que_es {
            margin-bottom: 50px;
        }

        .benefici {
            width: 50%;
            padding-left: 50px;
            padding-right: 50px;
            margin-bottom: 15px;
        }

            .benefici h4 {
                font-size: 18px;
            }

        
        .pregunta_frequent {
            margin-bottom: 20px;
        }

        #preguntes_frequents {
            padding: 35px 0;
            border-bottom: 1px solid #707070;
        }
         #bloc1 .subtitol_bloc {
            width: 50%;
        }

        #bloc4 .contenidor_centrat {
            padding: 100px 0;
        }
        #bloc4 .llistat_blocs {
            margin-top: 50px;
        }
        #bloc4 .llistat_blocs .bloc {
            width: 48%;
        }
        #bloc4 .llistat_blocs .bloc img {
            width: 40%;
        }
        #bloc3 .titol_bloc {
            font-size: 36px;
            line-height: 44px;
        }
        #bloc3 .subtitol_bloc {
            font-size: 48px;
            line-height: 56px;
            margin-bottom: 30px;
        }
        #bloc3 .boto_textos > div:nth-child(1) {
            order: 2;
            width: 36.5%;
            text-align: end;
        }
        #bloc3 .boto_textos > div:nth-child(2) {
            width: 61.5%;
        }
        #bloc3 .boto_textos p:nth-child(1) {
            font-size: 24px;
        }
        #bloc3 .boto_textos p:nth-child(2) {
            font-size: 16px;
        }
        #bloc13 .contenidor_textos .contenidor_dret {
            flex-direction: column;
            gap: 10px;
        }
        #bloc13 .contenidor_textos .contenidor_esquerre {
            flex-direction: column-reverse;
            gap: 10px;
            text-align: right;
        }
        #bloc10 .contenidor_contacte {
            flex-direction: column;
        }
        #bloc10 .contenidor_textos {
            max-width: unset;
        }
        #bloc10 .contenidor_contacte form {
            width: 100%;
        }
        #bloc11 {
            gap: 50px;
        }
        
        #bloc11 > div > .contenidor_enllacos {
            flex-direction: column;
            gap: 20px;
            text-align: end;
        }
            #bloc11 > div > img {
                max-width: 285px;
            }

        #bloc11 > div > div > img {
            max-width: 250px;
        }

    }
    @media screen and (max-width:768px){
        .contenidor_centrat {
            width: 92%;
        }

        #contenidor_header {
            padding: 25px 5%;
        }

        #contenidor_header:not(.transparent) {
            padding: 15px 5%;
        }

        #bloc_generic_prin {
            padding: 90px 0px 35px;
        }

        .generica_presentacio
        {
            flex-wrap: wrap;
        }

        .generica_presentacio > div
        {
            width: 100% !important;
        }

        .generica_presentacio .icon
        {
            padding: 0 20%;
        }

        #que_es > div {
            padding: 35px 0;
        }

        #que_es .contenidor_centrat {
            flex-wrap: wrap;
        }



        #que_es .desc{
            width: 100%;
            margin-bottom: 35px;
            flex-wrap: wrap;
        }

        #que_es .specs{
            width: 100%;
            flex-wrap: wrap;
        }

        #que_es .spec
        {
            width: 100%;
            flex-wrap: wrap;
        }

        .spec > div
        {
            width: 100% !important;
            margin-bottom: 15px;
            text-align: center;
            padding-right: 0 !important;
        }

        .bloc_fill {
            padding: 35px 0;
            flex-wrap: wrap;
        }

        .bloc_fill > *
        {
            width: 100% !important;
            margin-bottom: 15px;
            text-align: center;
            padding-right: 0 !important;
            margin-right: 0 !important;
        }

        .bloc_fill .desc
        {
            text-align: justify;
        }

            .benefici {
                width: 100%;
                padding-left: 50px;
                padding-right: 0;
                margin-bottom: 35px;
            }

        .pregunta_frequent
        {
            flex-wrap: wrap;
        }

        .pregunta_frequent > *
        {
            width: 100% !important;
            margin-bottom: 15px;
            text-align: left;
            padding-right: 0 !important;
            margin-right: 0 !important; 
        }
        #bloc1 .subtitol_bloc {
        width: 100%;
    }
    #bloc1 .titol_bloc {
        font-size: 30px;
    }

    #bloc10 .titol_bloc {
        font-size: 30px;
        line-height: 1.25;
    }

    #bloc10 .contenidor_textos p {
        font-size: 16px;
    }

    #bloc4 .llistat_blocs .bloc {
        width: 100%;
    }
        #bloc3 .subtitol_bloc {
            width: 100%;
        }

        #bloc11 > div {
            row-gap: 0;
            width: 92%;
            align-items: center;
            justify-content: center;
        }


            #bloc11 > div > p {
                margin-bottom: 35px;
            }

            #bloc11 > div > .contenidor_enllacos {
                text-align: center;
                width: 100%;
            }

            #bloc11 > div > div.logo_text {
                align-items: center;
            }

            #bloc11 > div > img {
                max-width: 285px;
                margin-bottom: 32px;
            }

            #bloc13 .contenidor_textos {
                text-align: center;
                justify-content: center;
            }


                #bloc13 .contenidor_textos .contenidor_esquerre {
                    text-align: center;
                    order: 3;
                }

        .contenidor_textos > div {
            width: 100% !important;
            text-align: center !important;
        }

        .contenidor_textos > *
        {
            margin: 10px 0;
        }

        #bloc10
        {
            padding: 50px 0;
        }

        #bloc10:before
        {
            display:none;
        }

        #bloc10 .contenidor_contacte form {
            padding: 25px 15px;
            min-width: 0;
            border-radius: 19px;
        }

        #bloc10 form .doble_camp {
            display: block;
        }

        #bloc10 form .doble_camp .field.contact {
            width: 100%;
            margin-bottom: 15px;
        } 

        #bloc1 .botons_agrupats
        {
            display: none;
        }
        #bloc4 .titol_bloc {
        font-size: 36px;
    }
    #bloc4 .contenidor_centrat {
        padding: 50px 0;
    }
    #bloc3 .titol_bloc {
        font-size: 28px;
        line-height: 34px;
    }
    #bloc3 .subtitol_bloc {
        font-size: 30px;
        line-height: 38px;
        margin-bottom: 0;
    }
    #bloc3 .boto_textos {
        flex-direction: column;
        margin-bottom: 10px;
    }

    #bloc3 .boto_textos > div:nth-child(1) {
        width: 100%;
        text-align: start;
    }
    #bloc3 .boto_textos > div:nth-child(2) {
        width: 100%;
    }
    #bloc3 .boto_textos p:nth-child(1) {
        font-size: 18px;
    }
    #bloc3 .boto_textos p:nth-child(2) {
        width: 100%;
    }
    #bloc3 .imatges img:first-child{
        display: none;
    }
    #bloc3 .imatges img:last-child{
        width: 100%;
    }
    #bloc3 .boto_textos a.estil_boto.blanc {
        display: block;
        width: 100%;
        text-align: center;
    }
    #bloc10 form .wrap_btn button {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
    #video {
        top: 0;
    }
    
    }



    /*magnific-popup.css------------------------------------------------------------------------------------------------------------------------------------------*/
/* Magnific Popup CSS */

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  max-width: 500px;
  width: auto;
  max-height: 700px;
  overflow: auto;
  margin: 20px auto;
  font-size: 14px;
}

.white-popup-newsletter {
  position: relative;
  background: #f5f5f6;
  max-width: 950px;
  width: auto;
  overflow: auto;
  margin: 20px auto;
}

	
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #000;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #cccccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }

.mfp-preloader a {
  color: #cccccc; }

.mfp-preloader a:hover {
  color: white; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: white;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: white;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #cccccc;
  font-size: 12px;
  line-height: 18px; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.mfp-arrow:active {
  margin-top: -54px; }

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1; }

.mfp-arrow:before, .mfp-arrow:after,
.mfp-arrow .mfp-b,
.mfp-arrow .mfp-a {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent; }
.mfp-arrow:after,
.mfp-arrow .mfp-a {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px; }
.mfp-arrow:before,
.mfp-arrow .mfp-b {
  border-top-width: 21px;
  border-bottom-width: 21px; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after,
  .mfp-arrow-left .mfp-a {
    border-right: 17px solid white;
    margin-left: 31px; }
  .mfp-arrow-left:before,
  .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after,
  .mfp-arrow-right .mfp-a {
    border-left: 17px solid white;
    margin-left: 39px; }
  .mfp-arrow-right:before,
  .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3f3f3f; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: black; }

.mfp-iframe-holder .mfp-close {
  top: -40px; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444444; }

.mfp-figure {
  line-height: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #f3f3f3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-figure small {
  color: #bdbdbd;
  display: block;
  font-size: 12px;
  line-height: 14px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }
  
 .mfp-gallery .mfp-image-holder .mfp-figure figure
 {
	 margin: 0;
	}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
   * Remove all paddings around the image on small screen
   */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }

  .mfp-img-mobile img.mfp-img {
    padding: 0; }

  /* The shadow behind the image */
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }

  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0; }

  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }

  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; }

  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; } 
}
@media all and (max-width: 900px) {
	
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }

  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }

  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }

  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } 
}