/*
 Theme Name:   Music Club Child
 Theme URI:    http://music-club.bold-themes.com
 Description:  Music Club Child Theme
 Author:       BoldThemes
 Author URI:   http://bold-themes.com
 Template:     music-club
 Version:      1.0.2
 Tags:         one-column, right-sidebar, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  music-club-child
*/


/* Theme customization starts here
-------------------------------------------------------------- */


/* Ajuste para que el menú no desborde y baje */

.btMenuHorizontal .menuPort nav {
    float: left;
    padding-left: 10px !important;
}



/* ------------ */
/* CONTACT FORM */
/* ------------ */

/* AJUSTE PARA TENER CAMPOS A 2 COLUMNAS EN CONTACT FORM*/

.wpcf7-not-valid-tip {
    color: #ef0f52 !important;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border: none;
    background: #ef0f52;
    border-radius: 20px;
    color: #fff;
}

/*
input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email::placeholder {
    color: #ffffff66;
}*/

::placeholder {
  color: #fff;
  opacity: 0.50; /* Firefox */
}


/* Grid para presentar los dos campos uno al lado del otro. 1/6+4/6+1/6 */

.c-grid {
   display: grid;
   grid-template-columns: auto auto;
   gap: 20px;
}

@media (max-width: 640px) {
  .c-grid {
    display: block;
  }

  .wpcf7-form-control{
    text-align: center;
  }
}

/* AJUSTE PARA EL MENSAJE DE CONTACT FORM */
.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 0px;
    color: #000;
    background: #49e6a5;
    border-radius: 20px;
}


.btContactFormInputName {

  margin-top: 20px;

}

.btContactFormInputEmail {

  margin-top: 20px;

}

/* Ocultación del badge de Recaptcha v3 de Google */
.grecaptcha-badge { visibility: hidden; }



/* AJUSTE PARA QUE RECORTES DE PRENSA APARECA CON LA TIPOGRAFÍA CORRECTA */
.bt_bb_headline_tag .bt_bb_headline_content {

    font-family: 'ubuntu';
}



/* AJUSTE TAMAÑO TIPOGRAFÍA MAS PEQUEÑA */
@media (max-width: 1199px) {

body {
    /* antes tenía 14px */
    font-size: 16px !important;
    }

/* para que el texto dentro de la caja de creditos no sea muy grande */
/* Ejemplo en Repoker de ases versión español, donde he aplicado la clase creditos desde el editor de BOLD THEMES */
/* Lo comento porque no estoy seguro de que esto me guste */
/*
body .creditos {
    font-size: 14px !important;
    }
*/
}

/* AJUSTE TAMAÑO TIPOGRAFÍA MAS PEQUEÑA */ 
@media (max-width: 767px) {

  body {
    /* antes tenía 14px */
    font-size: 18px !important;
  }

}





/* AJUSTE TAMAÑO TIPOGRAFÍA CAJAS HISTORIA */
.bt_bb_history_year .bt_bb_history_date .bt_bb_history_date_content .bt_bb_history_date_title {
    font-size: 2.3em !important;
    line-height: 1.1 !important;
}

/* AJUSTE TEXTO BOTONES */
.bt_bb_button .bt_bb_button_text {
    text-align: center !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
}


/* AJUSTE TITULOS EN SECCIÓN NOTAS DE PRENSA */
@media (max-width: 920px) {
.btPostListColumns .btArticleContentHolder .btArticleHeadline, .btPostListColumns .btArticleContentHolder .btArticleContent {
    
    max-height: initial !important;
  }
}





/* Ajuste para aplicar rollover a las imágenes en el listado de post */

/* EFECTO DUOTONO */

/*
SCSS

.img-container {
  &:hover {
    --multiply-mode: #ef0f52;
    --lighten-mode: #3f185e;
  }
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    -webkit-filter: contrast(1.0) brightness(1.3);
    filter: contrast(1.0) brightness(1.3);
    transition: background 0.5s;
  }
  &::before {
    background: var(--multiply-mode);
    mix-blend-mode: multiply;
  }
  &::after {
    background: var(--lighten-mode);
    mix-blend-mode: lighten;
  }
}
*/


/* condicion para dispositivos con puntero (no tactiles) */
@media (pointer: fine) {

  .img-container {
    position: relative;
  }
  .img-container:hover {
    --multiply-mode: #ef0f52;
    --lighten-mode: #3f185e;
  }
  .img-container::before, .img-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    -webkit-filter: contrast(1) brightness(1.3);
    filter: contrast(1) brightness(1.3);
    transition: background 0.5s;
  }
  .img-container::before {
    background: var(--multiply-mode);
    mix-blend-mode: multiply;
  }
  .img-container::after {
    background: var(--lighten-mode);
    mix-blend-mode: lighten;
  }

/* EFECTO LINEAS VERDES BORDE */

/* 
	rojo: #ef0f52
	verde: #07e6a5
*/

/*

.btMediaBox {
  position: relative;
  display: inline-block;
}

.img-container {
  position: relative;
  display: inline-block;
}

.img-container img {
  display: block;
  transition: transform 0.3s ease;
}

.border-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0 solid #ef0f52;
  box-sizing: border-box;
  transition: border-width 0.3s ease;
  pointer-events: none;
}

.img-container:hover .border-effect {
  border-width: 10px;
}
*/


/* Ajuste para mostrar rollover a verde en los títulos de los post del blog */

  .btContent .bt_bb_headline_content a:hover {
    color: #07e6a5 !important;
    /*transition:.3s;*/
  }

/* Se termina condiciónpara dispositivos con puntero (no tactiles) */
}


/* Ajuste para que se vean mejor los textos, parrafos, márgenes, etc... */

html {
	font-size: 16px !important;
}

body {
	/* antes 1.8 */
	line-height: 1.6 !important;
}

p, dl, address, cite {
    margin: 0 0 2em !important;
}

h1, h2, h3 {
    margin-top: 40px !important;
}


/* Para arreglar que bajo las cajas de los post no se vea un trozo de texto cuando hay elypsis */
/* Debo hacer esto más específico, para que no afecte a otras cosas de la web...*/
.bt_bb_latest_posts_item_content h5 {
    padding: 0 !important;
}


/* estilo para las entradillas */
.entradilla {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 600;
}

.btMenuVertical .mainHeader{
    display: none !important;
}


/* VIDEOS YOUTUBE RESPONSIVE */
.responsive-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.responsive-container iframe,
.responsive-container object,
.responsive-container embed,
.responsive-container video
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Ajuste para que la imagen de la página de error se vea bien en diferentes resoluciones resposive */

.btErrorPage{
	    background-position: right -100px top 200px !important;
	}

@media (max-width: 990px){

	.btErrorPage{
	    background-position: right 80% top 480px !important;
	}

}