/* FONTS */

.titulos {
  font-family: 'Playfair Display SC', serif;
}
p {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.01em;
  text-align: justify;
}
a.contacto {
  text-transform: uppercase;
}

#logo-header-movil {
    display: none;
  }

/* BANNER HOME */
#banner-home {
  clear: both;
  float: left;
  margin: 0 0 75px 0;
  width: 100%;
  padding: 18% 0;
  font-family: Montserrat;
  background-image: url('/images/home/miguel-caballero-plays-chopin-at-king-sancho-palace-in-valldemossa-bn.jpg');
  background-size: cover;
}
#banner-home .logo-home { margin: -16.5% 0% 0% 60%; width: 181px; height: 181px; animation: slide-top-logo 2s ease;}
#banner-home .logo-home img { width: 100%; }
#banner-home .nombre-home { color: #fff; margin: 0.5% 0% 0% 53%; width: 450px; font-size: 34px; font-weight: 300; line-height: 35px; text-transform: uppercase; letter-spacing: 0.09em; text-align: center; animation: fade-in-texto 2.5s ease;}
#banner-home .subtitulo-home { color: #b5b5b5; margin: 0.3% 0% 0% 53%;  width: 450px; font-size: 23px; font-weight: 400;  line-height: 35px; text-transform: uppercase; letter-spacing: 0.09em; text-align: center; animation: slide-bottom-texto 2s ease;}

@keyframes slide-top-logo {
    from {
        transform:translatey(-20vw);
    }
    to {
        transform:translatey(0vw);
    }
}

@keyframes fade-in-texto {
    0% {
        opacity:0;
    }
    75% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@keyframes slide-bottom-texto {
    from {
        transform:translatey(20vw);
    }
    to {
        transform:translatey(0vw);
    }
}

@media (max-width: 580px) {
  #banner-home {
    padding: 42% 0 0 0;
    background-position: 42% 0%;
  }
  #banner-home .logo-home {
    margin: -15.5% 0% 0% 64.7%;
    width: 91px;
    height: 91px;
     animation: slide-top-logo 3s ease;
  }
  #banner-home .nombre-home {
    margin: 1% 0% 0% 56%;
    width: 155px;
    font-size: 17px;
    font-weight: 400;
    line-height: 17px;
    animation: fade-in-texto 3.5s ease;
  }
  #banner-home .subtitulo-home {
    margin: 37.3% 0% 0% 43%;
    width: 203px;
    font-size: 16px;
    font-weight: 400;
    line-height: 35px;
    text-align: center;
     animation: slide-bottom-texto 3s ease;
  }
  @keyframes slide-top-logo {
    from {
        transform:translatey(-60vw);
    }
    to {
        transform:translatey(0vw);
    }
  }
  @keyframes slide-bottom-texto {
    from {
        transform:translatex(-60vw);
    }
    to {
        transform:translatex(0vw);
    }
  }
}

@media (min-width: 581px) and (max-width: 767px) {
  #banner-home {
    padding: 42% 0 0 0;
    background-position: 42% 0%;
  }
  #banner-home .logo-home {
  margin: -20.5% 0% 0% 67.7%;
  width: 93px;
  height: 93px;
  }
  #banner-home .nombre-home {
  margin: 1% 0% 0% 56%;
  width: 214px;
  font-size: 17px;
  font-weight: 400;
  line-height: 17px;
  animation: fade-in-texto 3.5s ease;
  }
  #banner-home .subtitulo-home {
  margin: 37.3% 0% 0% 56%;
  width: 203px;
  font-size: 16px;
  font-weight: 400;
  line-height: 35px;
  }
  @keyframes slide-top-logo {
    from {
        transform:translatey(-60vw);
    }
    to {
        transform:translatey(0vw);
    }
  }
  @keyframes slide-bottom-texto {
    from {
        transform:translatex(-60vw);
    }
    to {
        transform:translatex(0vw);
    }
  }
}

@media (min-width: 768px) and (max-width: 1580px) {
  #banner-home .logo-home { width: 141px; height: 141px; }
  #banner-home .nombre-home { margin: 0.5% 0% 0.5% 48%; font-size: 31px; line-height: 32px;}
  #banner-home .subtitulo-home { margin: 0.3% 0% 0% 48%; font-size: 21px; line-height: 23px;}
}

/* BANNER GRABACIONES HOME */
#banner-grabaciones-home { clear: both; margin: 3% auto; max-width: 1000px; min-height: 450px; *padding: 0 25px; }
#banner-grabaciones-home .boton-play { clear: both; float: left; margin: 0 auto 10px auto; width: 450px; text-align: center;}
#banner-grabaciones-home .texto-grabaciones-home { padding: 0 25px;}
@media (max-width: 460px) {
  #banner-grabaciones-home .boton-play {
    float: inherit;
    width: 350px; 
  }
  #banner-grabaciones-home .texto-grabaciones-home {
    clear: both; margin: 0 auto; width: 85%; padding: 0 1%;
  }
}

/* ARTÍCULOS */
#contenido-articulo {
  clear: both;
  margin: 0 auto 50px auto;
  max-width: 1000px;
  padding: 0 20px;
}

/* CONCIERTOS */

.impar {
  background: #f4f5f6;
}
#contenedor-concert-year {
  clear: both;
  float: left;
  margin-top: 10px;
  width: 100%;
  padding-top: 20px;
}
#contenedor-concert-year .concert-year {
  clear: both;
  margin: 0 auto 20px auto;
  max-width: 700px;
  padding: 0 0 15px 0;
  font-family: Montserrat;
  font-size: 23px;
  font-weight: 300;
  text-align: right;
  border-bottom: 1px solid #d5d4d4;
}
#contenedor-conciertos-global {
  clear: both;
  float: left;
  margin: 0;
  width: 100%;
  padding: 0 0 40px 0;
}
#contenedor-conciertos {
  clear: both;
  margin: 0 auto;
  max-width: 700px;
  padding: 15px 0;
  font-family: Montserrat;
}
#contenedor-conciertos .fecha-concierto {
  float: left;
  width: 130px;
  padding: 19px 10px 0 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0px;
  text-align: right;
  text-transform: uppercase;
}
#contenedor-conciertos .imagen-concierto {
  float: left;
  width: 135px;
}
#contenedor-conciertos .imagen-concierto img {
  width: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
#contenedor-conciertos .imagen-concierto img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  transition:all .3s ease-in-out;
}
#contenedor-conciertos .contenedor-texto-concierto {
  float: left;
  width: 56%;
  padding: 20px 0 0 20px;
}
#contenedor-conciertos .titulo-concierto {
  font-size: 21px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0px;
  text-transform: uppercase;
}
#contenedor-conciertos .titulo-concierto a:hover {
  color: #999999;
  text-decoration: none;
}
#contenedor-conciertos .programa-concierto {
  padding-top: 5px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 550px) {
  #contenedor-concert-year .concert-year {
    margin: 0 auto 0px auto;
    padding: 0 4.7% 15px 0;
  }
  #contenedor-conciertos {
    padding: 0;
  }
  #contenedor-conciertos .fecha-concierto {
    clear: both;
    float: right;
    margin: 0 2.7% 7px 0;
    font-size: 12px;
  }
  #contenedor-conciertos .imagen-concierto {
    clear: both;
    float: inherit;
    margin: 0 auto;
    width: 89%;
  }
  #contenedor-conciertos .contenedor-texto-concierto {
    float: left;
    width: 89%;
    padding: 20px 20px 0 20px;
    text-align: center;
  }
}

/* GRABACIONES */

#contenedor-grabaciones {
  clear: both;
  float: left;
  width: 100%;
  padding: 30px 0 10px 0;
  font-family: Montserrat;
}
#contenedor-grabaciones .contenedor-compositor {
  clear: both;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 0 25px 0;
}
#contenedor-grabaciones .impar {
  background: #f4f5f6;
}
#contenedor-grabaciones .grabacion {
  display: inline-block;
  margin: 0 2%;
  width: 230px;
  font-family: Montserrat;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  text-align: center;
}
#contenedor-grabaciones img {
  width: 100%;
  cursor: pointer;
  }

#contenedor-grabaciones .titulo-compositor {
  clear: both;
  padding: 0px 0 25px 2%;
  font-size: 21px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0px;
  text-transform: uppercase;
}
#contenedor-grabaciones .obra {
  clear: both;
  float: left;
  margin: 12px 0 0 0;
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
#contenedor-grabaciones span.tonalidad {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #333;
  text-transform: none;
}

@media (max-width: 640px) {
  #contenedor-grabaciones .grabacion {
    display: inherit;
    margin: 2% auto;
    width: 100%;
  }
  #contenedor-grabaciones img {
    width: 90%;
  }
  #contenedor-grabaciones .titulo-compositor {
    padding: 0 5% 10px 5%;
    text-align: right;
  }
  #contenedor-grabaciones .obra {
  margin: 12px 0 30px 0;
  }
}

/* CLASES */
/* BANNER SUPERIOR CLASES */
#banner-clases {
  clear: both;
  float: left;
  margin: 0 0 0 0;
  width: 100%;
  padding: 18% 0;
  font-family: Montserrat;
  background-image: url('/images/clases/clases-de-piano-para-todos-los-niveles-y-edades-impartidas-por-el-concertista-miguel-caballero.jpg');
  background-size: cover;
}
#banner-clases .logo-clases { margin: -16.5% 0% 0% 60%; width: 181px; height: 181px; animation: slide-top-logo 2s ease;}
#banner-clases .logo-clases img { width: 100%; }
#banner-clases .nombre-clases { color: #fff; margin: 0.5% 0% 0% 53%; width: 450px; font-size: 34px; font-weight: 300; line-height: 35px; text-transform: uppercase; letter-spacing: 0.09em; text-align: center; animation: fade-in-texto 2.5s ease;}
#banner-clases .subtitulo-clases { color: #b5b5b5; margin: 0.3% 0% 0% 53%;  width: 450px; font-size: 23px; font-weight: 400;  line-height: 35px; text-transform: uppercase; letter-spacing: 0.09em; text-align: center; animation: slide-bottom-texto 2s ease;}

@keyframes slide-top-logo {
    from {
        transform:translatey(-20vw);
    }
    to {
        transform:translatey(0vw);
    }
}

@keyframes fade-in-texto {
    0% {
        opacity:0;
    }
    75% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@keyframes slide-bottom-texto {
    from {
        transform:translatey(20vw);
    }
    to {
        transform:translatey(0vw);
    }
}

@media (max-width: 580px) {
  #banner-clases {
    margin: 0 0 35px 0;
    padding: 42% 0 0 0;
    background-position: 42% 0%;
  }
  #banner-clases .logo-clases {
    margin: -15.5% 0% 0% 64.7%;
    width: 91px;
    height: 91px;
     animation: slide-top-logo 3s ease;
  }
  #banner-clases .nombre-clases {
    margin: 1% 0% 0% 56%;
    width: 155px;
    font-size: 17px;
    font-weight: 400;
    line-height: 17px;
    animation: fade-in-texto 3.5s ease;
  }
  #banner-clases .subtitulo-clases {
    margin: 37.3% 0% 0% 43%;
    width: 203px;
    font-size: 16px;
    font-weight: 400;
    line-height: 35px;
    text-align: center;
     animation: slide-bottom-texto 3s ease;
  }
  @keyframes slide-top-logo {
    from {
        transform:translatey(-60vw);
    }
    to {
        transform:translatey(0vw);
    }
  }
  @keyframes slide-bottom-texto {
    from {
        transform:translatex(-60vw);
    }
    to {
        transform:translatex(0vw);
    }
  }
}

@media (min-width: 581px) and (max-width: 767px) {
  #banner-clases {
    margin: 0 0 35px 0;
    padding: 42% 0 0 0;
    background-position: 42% 0%;
  }
  #banner-clases .logo-clases {
  margin: -20.5% 0% 0% 67.7%;
  width: 93px;
  height: 93px;
  }
  #banner-clases .nombre-clases {
  margin: 1% 0% 0% 56%;
  width: 214px;
  font-size: 17px;
  font-weight: 400;
  line-height: 17px;
  animation: fade-in-texto 3.5s ease;
  }
  #banner-clases .subtitulo-clases {
  margin: 37.3% 0% 0% 56%;
  width: 203px;
  font-size: 16px;
  font-weight: 400;
  line-height: 35px;
  }
  @keyframes slide-top-logo {
    from {
        transform:translatey(-60vw);
    }
    to {
        transform:translatey(0vw);
    }
  }
  @keyframes slide-bottom-texto {
    from {
        transform:translatex(-60vw);
    }
    to {
        transform:translatex(0vw);
    }
  }
}

@media (min-width: 768px) and (max-width: 1580px) {
  #banner-clases .logo-clases { width: 141px; height: 141px; }
  #banner-clases .nombre-clases { margin: 0.5% 0% 0.5% 48%; font-size: 31px; line-height: 32px;}
  #banner-clases .subtitulo-clases { margin: 0.3% 0% 0% 48%; font-size: 21px; line-height: 23px;}
}

/* BANNER MEDIO CLASES */
#banner-clases-medio {
  clear: both;
  float: left;
  margin: 0 0 0 0;
  width: 100%;
  padding: 43% 0 19% 0;
  font-family: Montserrat;
  background-image: url('/images/clases/preparacion-pruebas-acceso-conservatorio-superior-concursos-piano-clases-presenciales-u-online-impoartidas-por-el-concertista-miguel-caballero.jpg');
  background-size: cover;
  background-position: right;
}
#banner-clases-medio .logo-clases-medio { margin: -16.5% 0% 0% 60%; width: 181px; height: 181px; animation: slide-top-logo-medio 2s ease;}
#banner-clases-medio .logo-clases-medio img { width: 100%; }
#banner-clases-medio .nombre-clases-medio { color: #fff; margin: 0.5% 0% 0% 53%; width: 450px; font-size: 34px; font-weight: 300; line-height: 35px; text-transform: uppercase; letter-spacing: 0.09em; text-align: center; animation: fade-in-texto-medio 2.5s ease;}
#banner-clases-medio .subtitulo-clases-medio { color: #ffffff; margin: 0.3% 0% 0% 63%;  width: 450px; font-size: 23px; font-weight: 400;  line-height: 35px; text-transform: uppercase; letter-spacing: 0.09em; text-align: center; animation: slide-bottom-texto-medio 2s ease;}

@keyframes slide-top-logo-medio {
    from {
        transform:translatey(-20vw);
    }
    to {
        transform:translatey(0vw);
    }
}

@keyframes fade-in-texto-medio {
    0% {
        opacity:0;
    }
    75% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@keyframes slide-bottom-texto-medio {
    from {
        transform:translatey(20vw);
    }
    to {
        transform:translatey(0vw);
    }
}

@media (max-width: 580px) {
  #banner-clases-medio {
    margin: 0 0 35px 0;
    padding: 69% 0 0 0;
    background-position: 42% 0%;
  }
  #banner-clases-medio .logo-clases-medio {
    margin: -15.5% 0% 0% 64.7%;
    width: 91px;
    height: 91px;
     animation: slide-top-logo-medio 3s ease;
  }
  #banner-clases-medio .nombre-clases-medio {
    margin: 1% 0% 0% 56%;
    width: 155px;
    font-size: 17px;
    font-weight: 400;
    line-height: 17px;
    animation: fade-in-texto-medio 3.5s ease;
  }
  #banner-clases-medio .subtitulo-clases-medio {
    *display: none !important;
    *margin: 37.3% 0% 0% 43%;
    margin: 10% 0% 68% 43%;
    width: 203px;
    font-size: 16px;
    font-weight: 400;
    line-height: 35px;
    text-align: center;
     animation: slide-bottom-texto-medio 3s ease;
  }
  @keyframes slide-top-logo-medio {
    from {
        transform:translatey(-60vw);
    }
    to {
        transform:translatey(0vw);
    }
  }
  @keyframes slide-bottom-texto-medio {
    from {
        transform:translatex(-60vw);
    }
    to {
        transform:translatex(0vw);
    }
  }
}

@media (min-width: 581px) and (max-width: 767px) {
  #banner-clases-medio {
    margin: 0 0 35px 0;
    padding: 42% 0 0 0;
    background-position: 42% 0%;
  }
  #banner-clases-medio .logo-clases-medio {
  margin: -20.5% 0% 0% 67.7%;
  width: 93px;
  height: 93px;
  }
  #banner-clases-medio .nombre-clases-medio {
  margin: 1% 0% 0% 56%;
  width: 214px;
  font-size: 17px;
  font-weight: 400;
  line-height: 17px;
  animation: fade-in-texto-medio 3.5s ease;
  }
  #banner-clases-medio .subtitulo-clases-medio {
  margin: 37.3% 0% 0% 56%;
  width: 203px;
  font-size: 16px;
  font-weight: 400;
  line-height: 35px;
  }
  @keyframes slide-top-logo-medio {
    from {
        transform:translatey(-60vw);
    }
    to {
        transform:translatey(0vw);
    }
  }
  @keyframes slide-bottom-texto-medio {
    from {
        transform:translatex(-60vw);
    }
    to {
        transform:translatex(0vw);
    }
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  #banner-clases-medio .subtitulo-clases-medio { margin: 0.3% 0% 0% 46%; font-size: 21px; line-height: 27px; width: 390px; }
}
@media (min-width: 981px) and (max-width: 1580px) {
  #banner-clases-medio .subtitulo-clases-medio { margin: 0.3% 0% 0% 59%; font-size: 21px; line-height: 27px; width: 390px; }
}

@media (min-width: 768px) and (max-width: 1580px) {
  #banner-clases-medio .logo-clases-medio { width: 141px; height: 141px; }
  #banner-clases-medio .nombre-clases-medio { margin: 0.5% 0% 0.5% 48%; font-size: 31px; line-height: 32px;}
}

/* CONCIERTOS */
#programa {
  clear: both;
  margin: 35px auto;
  max-width: 350px;
  padding: 30px 35px 35px 35px;
  font-family: Montserrat;
  text-align: center;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}
#programa .titulo-programa {
  font-size: 17px;
  font-weight: 400;
  line-height: 39px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
#programa .compositor-programa {
  clear: both;
  float: left;
  margin: 15px 0 10px 0;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
}




/* FOOTER */
.mc-footer {
  padding: 3% 0 2% 0;
  background: #f0f0f0;
}

/* MENÚ FOOTER */
#menu-footer {
  clear: both;
  float: left;
  margin: 35px 0;
  width: 100%;
  font-family: Montserrat;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #333;
  text-transform: uppercase;
  text-align: center;
}
#menu-footer .item-footer {
  display: inline-block;
  margin: 0 12px;
}
@media (max-width: 540px) {
  #menu-footer .item-footer {
  display: inherit;
  width: 100%;
    padding: 5px 0;
  }
}

/* MAXIMENU CK */
@media (max-width: 640px) {
  #logo-header-movil {
    display: inherit;
  }
div#maximenuck109 .maximenumobiletogglericonck {
  background: #ffffff !important;
  *opacity: 0.7 !important;
  }
div#maximenuck109 .maximenumobiletogglericonck::after {
  display: none !important;
  }
#maximenuck109 .maximenumobiletogglericonck {
  text-align: center !important;
  }
#maximenuck109 .maximenuck-toggler-anchor {
  margin-top: -10px !important;
  }
  div#maximenuck109 > ul.maximenuck > .maximenucklogo {
    display: none !important;
  }
}

/* MINIFRONT PAGE */
.mfp_default_skin_default {
  width: 99.6% !important;
}
.mfp_default_skin_default .mfp_default_item div {
  text-align: center !important;
}
.mfp_default_skin_default .mfp_default_item .mfp_default_title {
  padding: 0 20px !important;
  text-align: center !important;
}
.mfp_default_skin_default .mfp_default_item .mfp_default_title a {
  font-weight: 400 !important;
  font-size: 21px !important;
  line-height: 23px !important;
  text-transform: uppercase !important;
}
.mfp_default_skin_default .mfp_default_item .mfp_date, .mfp_default_skin_default .mfp_default_item .mfp_author {
  font-family: Montserrat !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
}

/* SLIDER HOME */
.slider-home {
  clear: both; margin: 3% auto; max-width: 1000px; overflow: hidden;
}
.slider-home ul {display: flex; width: 200%; padding: 0; animation: transicion 11s infinite alternate ease-in;}
.slider-home li {width: 100%; list-style: none; }

@keyframes transicion {
  0% { margin-left: 0; }
  45% { margin-left: 0; }
  
  65% { margin-left: -100%; }
  100% { margin-left: -100%; }
}

/* TZ PORTFOLIO+ */
/* Para ocultar el oscurecimiento de las imagenes en el grid */
.tz-flex-grid .tz-flex-grid-content {
  background-color: transparent !important;
}
}

/* COOKIES CK */
#cookiesck_interface {
  margin: 20px 20px !important;
}
#cookiesck_text {
  padding: 25px 9% !important;
  font-size: 13px !important;
  line-height: 17px !important;
  letter-spacing: 0.02em !important;
}
.cookiesck_button, #cookiesck_accept, #cookiesck_decline, #cookiesck_settings, #cookiesck_readmore {
  margin: 5px 5px 20px 5px !important;
  font-size: 12px !important;
  border-radius: 0px !important;
}
#cookiesck_accept {
  background: #b7b7b7 !important;
  border: 2px solid #b7b7b7 !important;
  color: #f5f5f5 !important;
}
#cookiesck_decline {
  background: #6e6969 !important;
  border: 2px solid #6e6969 !important;
  color: #f5f5f5 !important;
}
.cookiesck-main-title {
  font-size: 27px !important;
  line-height: 25px !important;
}
.cookiesck-main-desc {
  text-align: center !important;
}
.cookiesck-platform {
  padding: 25px !important;
}
.cookiesck-platform-name {
  font-size: 15px !important;
}