/*
Theme Name: Fonografies
Author: Gmno/Arwald
Author URI: https://wordpress.org/
Description: Tema para la web de fonografries
Version: 9.34
*/
/**---------------------------CLASES COMUNES--------------**/
html {-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always; text-rendering: optimizeLegibility;}

body {
    font-family: 'Inter', sans-serif;
    background-color: white;
    padding-left: 1%;
    padding-right: 1%;
}
.gmnoprint{
    display:none !important;
}
.gm-style-cc{
    display: none !important;
}
.titol-exp a{
    text-decoration: none !important;
    color: #000000;
}
.titol-exp ul{
    list-style-type: none !important;
    display: inline-flex;
    margin-top: 0%;
    column-gap: 5px; 
    padding: 0;
}
li:last-child::before {
    content: "|";
    padding-right: 5px;
  }
ul.lenguaje li a{
    color: #000000;
    text-decoration: none !important;
    display: inline-flex;
}
.wpgmza_infowindow_image{
    float: none !important;
}
.wpgmza_infowindow_title {
    max-width: 150px !important;
}
.info{
    border-top: 1px solid black;
    padding-top: 50px;
    column-count: 3;
}
.info p{
    margin: 0 0 1em 0;
}
/**---------------------------AUDIO PLAYER--------------**/

  div.audio-player {
    width: 100%;
    margin-top: 25px;
    display: table;
    /* border-spacing: 10px; */
  }
  div.audio-player span,
  div.audio-player div {
    display: table-cell;
    vertical-align: middle;
  }
  div.audio-player span.audio-time {
    font-family: 'Inter', sans-serif;
  }
  div.audio-player div.indicator-container {
    position: relative;
    width: 60%;
    height: 20px;
  }
  div.audio-player div.indicator-bar-empty {
    position: absolute;
    top: 10px;
    width: 100%;
    height: 5px;
    background: #777777;
    z-index: 0;
  }
  div.audio-player div.indicator-bar-full {
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    width: 0%;
    height: 5px;
    background: #000000;
    z-index: 25;
  }
  div.audio-player div.playhead {
    position: absolute;
    margin-left: 0%;
    top: 1px;
    width: 1px;
    height: 22px;
    background: #000000;
    border: rgb(0, 0, 0) solid 1px;
    z-index: 50;
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  .audio-time{
      text-align: right;
  }
 span.fa {
        cursor: pointer;
           }
    .fa{
        font-size: 23px !important;
    }
 /**---------------------------HEADER--------------**/
.contenedor-header{
    padding-top: 2%;
    padding-bottom: 1%;
    padding-right: 1%; 
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: 
    "titol titol-exp";
    align-items: flex-start;
    
}
.titol{
    grid-area: titol;
    font-weight: 500;
}
.titol a{
    text-decoration: none;
    color: black;
}
.titol-exp{
    grid-area: titol-exp;
    text-align: end;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:"p1 p2" ;
}
.titol-exp p{
    margin: 0;
}
.p1{
    grid-area: p1;
    text-align: end;
}
.p2{
    grid-area: p2;
    text-align: end;
}
.lang{
    grid-area: lang;
    text-align: end;
}
/**---------------------------SINGLE--------------**/
.cont{
    display: grid;
    grid-template-rows: auto;
    grid-template-areas: 
    "mapa";
}
.page-id-105 .wpgmza_map {
    border: 0;
    max-width: 100% !important;
    height: 85vh !important;
}

.page-id-123 .wpgmza_map {
    border: 0;
    max-width: 100% !important;
    height: 85vh !important;
}

.entrada{
    margin-bottom: 2%;
    border-top: 1px solid black;
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "bl1 img-ent txt-ent"
    "bl1 img-ent txt-ent"
    " . img-ent txt-ent";
    column-gap: 1%;
}
.bot{
    margin-top: 1%;
    margin-bottom: 1%;
    cursor: pointer;
    text-align: right;
}
.bl1{
    margin-top: 50px;
    grid-area: bl1;
    display: grid;
    grid-template-columns: 1.5fr 0.75fr;
    column-gap: 5%;
    grid-template-rows: auto;
    grid-template-areas: 
    "tit-ent data-ent"
    "so-ent so-ent";
    align-self: flex-start;
}
.tit-ent{
    grid-area: tit-ent;
    align-self: flex-end;
}
.img-ent{
    grid-area: img-ent;
    margin-top: 50px;
    margin-bottom: 4%;
}
.img-ent img{
    width: 100%;
    height:initial;
}
.txt-ent{
    margin: 50px 0% 0% 0%;
    grid-area: txt-ent;
    column-count: 2;
}
.txt-ent p{
    font-size: 15px;
    margin: 0;
    padding: 0;
}
.so-ent{
    grid-area: so-ent;
}
.data-ent{
    align-self: flex-end;
    grid-area: data-ent;
    text-align: right;
}

/**---------------------------SINGLE--------------**/

.footer { display: grid; grid-template-columns: 1fr auto; column-gap: 50px;  margin-top: 50px; align-items: flex-start; }
.footer .ban img {max-width: 1010px; width: 100%;}
.footer .gene img {max-height: 100px; }
.footer .st img {max-height: 90px; margin-top: 10px; }



.footer > div:first-of-type > div {display: grid; grid-template-columns: repeat(2, max-content); column-gap: 25px; margin-top:30px; }
/**---------------------------RESPONSIVE----------------------**/
@media screen and (max-width: 1440px){
    div.audio-player {
        margin-left: 0px;
        margin-top: 25px;
        display: table;
        border-spacing: 0px;
      }
    div.audio-player div.indicator-container {
        position: relative;
        width: 400px;
        height: 20px;
      }
      .footer {

        grid-template-columns: 0.5fr auto;

    }
    .footer .gene img {max-height: 85px; }
    .footer .st img {max-height: 75px; }


}
@media screen and (max-width: 1375px){
    div.audio-player {
        margin-left: 0px;
        margin-top: 25px;
        display: table;
        border-spacing: 0px;
      }
    div.audio-player div.indicator-container {
        position: relative;
        width: 60%;
        height: 20px;
      }

}
@media screen and (max-width: 1024px){
    .contenedor-header {
        grid-template-columns: 1fr 1.5fr;
    }
    .entrada{
        display: grid;
        grid-template-columns: 45% 10% 45%;
        grid-template-rows: auto;
        grid-template-areas: 
        "bl1 bl1 img-ent"
        "bl1 bl1 img-ent"
        "txt-ent txt-ent txt-ent";
    }
    div.audio-player div.indicator-container {
        width: 60%;
    }
    .img-ent img{
        width: 95%;
    }
    .txt-ent {
        margin-bottom: 2%;
        column-count: 2;
        margin-right: 1px;
    }
    .data-ent{
       top: 0;
    }
  
        .footer {
            grid-template-columns: 1fr;
            column-gap: 50px;
            margin-top: 50px;
            align-items: center;

            row-gap: 50px;
        
    }
}
@media screen and (max-width: 850px){
    .contenedor-header{
        grid-template-columns: 1fr 1.5fr;
    }
    .titol-exp ul{
       
    }
    .info{
        column-count: 2;
    }
    .entrada{
        grid-template-columns: 25% 25% 50%;
        grid-template-areas:
        "bl1 bl1 img-ent"
        "bl1 bl1 img-ent"
        "txt-ent txt-ent txt-ent";
}
    .tit-ent{
        padding-left: 0;
    }
    .data-ent{
        margin-left: 0;
        align-self: flex-start;
    }
    div.audio-player {
    margin-left: 0px
}
    div.audio-player div.indicator-container {
    width: 60%;
}
}


@media screen and (max-width: 650px){
    .contenedor-header{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "titol" 
        "titol-exp";
    }
    .titol-exp{
        text-align: left;
        margin-top: 2%;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "p1" 
        "p2";
    }
    .info{
        column-count: 1;
    }
    .p1{
        text-align: left;
    }
    .p2 {
        margin-top: 2%;
        text-align: left;
    }
    .p2 p{
        margin: 0;
        padding: 0;
    }
    .titol-exp ul {
        list-style-type: none !important;
        display: inline-flex;
        margin-top: 1%;
        column-gap: 5px;
        padding-left: 0;
    }
    .entrada {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "bl1 bl1"
            "img-ent img-ent"
            "txt-ent txt-ent";
    }
    .img-ent img{
        width: 100%;
    }
    .so-ent{
        margin-bottom: 10%;
    }
    .data-ent{
        margin-right: 0;
    }
    .txt-ent {
        column-count: 1;
    }
    div.audio-player div.indicator-container {
        width: 250px;
    }
}

@media screen and (max-width: 375px){
    div.audio-player div.indicator-container {
        width: 150px;
    }
}