@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
*{position: relative;}
body{width: 100%;height: 100%;padding: 0;margin: 0;background-color: #fcf1df;font-family: 'Open Sans',sans-serif;font-size: 16px;}
body.img{background-image: url(../images/fondo-principal.jpg);background-repeat: no-repeat;background-position: 50% 0;background-size: cover;}
h1{font-size: 40px;}
h2{font-size: 32px;}
h3{font-size: 28px;}
h4{font-size: 24px;}
h5{font-size: 20px;}
h6{font-size: 16px;}
ul{padding-left: 0;margin-bottom: 0;margin-top: 0;}
ul li{margin-left: 20px;list-style: none;}
p{font-size: 16px;}
a{padding: 4px 16px;font-size: 16px;text-decoration: none;}
a:hover,a:focus{text-decoration: none;}
.btn {width: 160px;padding: 4px 16px;margin-top: 20px;display: block;background-color: #754d24;color: #fcf1df;text-decoration: none;text-align: center;border: 1px solid #754d24;border-radius: 0;-webkit-transition: 1s all;transition: 1s all;}
.btn:hover {background-color: #fff;color: #754d24;}
/******************************
main menu
******************************/
header {width: 100%;padding: 100px 0 0 0;margin: 0;overflow: hidden;z-index: 999;background: url('../images/cabecera.jpg'), #fcf1df;background-position: 50% 0%, 100%;background-repeat: no-repeat, repeat;background-size: 100% 100px, auto;-webkit-transition: 1s all;transition: 1s all;}
header.none{width: 100%;padding: 100px 0 0 0;margin: 0;background: initial;overflow: hidden;z-index: 999;-webkit-transition: 1s all;transition: 1s all;}
header.wht {background: url('../images/cabecera.jpg'), #fff;background-position: 50% 0%, 100%;background-repeat: no-repeat, repeat;background-size: 100% 100px, auto;}
header .cuadro {width: 310px;height: 72.5px;border-top: 5px solid #754d24;border-left: 5px solid #754d24;border-right: 5px solid #754d24;position: absolute;left: calc(50% - 160px);bottom: 94px;z-index: 0;}
header #juanfrias {width: 500px;margin-top: 20px;margin-left: calc(50% - 240px);display: block;}
button#menu {display: none;}
nav#superior ul {width: 110px;margin: 0 auto;padding: 0;background-color: #fcf1df;border: 5px solid #754d24;z-index: 2;-webkit-transition: 1s all;transition: 1s all;}
nav#superior ul.wht {background-color: #fff;}
nav#superior ul li {margin-left: 0;}
nav#superior ul li a {width: 100%;height: auto;padding: 4px 0;display: block;font-size: 14px;font-weight: 700;text-decoration: none;text-align: center;color: #5d5c5f;-webkit-transition: 1s all;transition: 1s all;}
nav#superior ul li.active a {color: #754d24;}
nav#superior ul li a:hover {color: #754d24;}
@media (max-width: 767px) {
  header {background: url('../images/cabecera.jpg') 50% 0% no-repeat;background-size: auto 100px;}
  header.sol{background: url('../images/cabecera.jpg'), #fcf1df;background-position: 50% 0%, 100%;background-repeat: no-repeat, repeat;background-size: auto 100px, auto;}
  header .cuadro {width: 300px;left: calc(50% - 150px);bottom: 40px;}
  header #juanfrias {width: 300px;margin-left: calc(50% - 150px);}
}
/******************************
footer
******************************/
footer {width: 100%;height: auto;padding: 20px 0;margin: 0;background-color: #fff;}
footer.wht {background-color: transparent;}
footer .footer {width: 200px;height: auto;margin-left: calc(50% - 100px);vertical-align: middle;display: block;}
/******************************
player
******************************/
#player {width: 350px;height: 45px;margin: 30px auto;border: 5px solid #754d24;}
#player .info {width: 160px;position: absolute;top: -15px;left: 4px;}
#player .info .cont {padding: 0;text-align: center;display: table;}
#player .trackinfo {width: 185px;position: absolute;top: 0;right: 0;display: table;}
#player .trackinfo #title{height: 38px;padding: 0 8px;margin: -2px 0 0 0;color: #5d5c5f;font-weight: 400;font-size: 16px;text-align: center;line-height: 1.2;display: table-cell;vertical-align: middle;}
#player .nav {width: 32px;padding: 0 5px;margin: 0;display: table-cell;background: transparent;border: 0;vertical-align: middle;cursor: pointer;}
#player #play {width: 64px;}
#player #play img {width: 64px;}
#player #prev img {width: 32px;}
#player #next img {width: 32px;}
@media (max-width: 767px){
  #player {width: 100%;height: auto;margin-bottom: 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
  #player .info {width: 90%;margin: 0 auto;position: relative;top: auto;left: auto;}
  #player .info .cont {padding-top: 16px;display: block;text-align: center;}
  #player .nav {display: inline-block;}
  #player .trackinfo {width: 90%;margin: 0 auto;position: relative;top: auto;left: auto;}
  #player .trackinfo #title {text-align: center;}
}
/******************************
home
******************************/
body.bck {background: url('../images/home/fondo-principal.jpg') 50% 0% no-repeat;background-size: cover;}
#home {width: 100%;height: auto;padding: 0;margin-bottom: 80px;}
#home #middle {width: 307px;height: 640px;background: url('../images/home/madera.jpg') center bottom no-repeat;background-size: cover;border-bottom: 5px solid #754d24;border-left: 5px solid #754d24;border-right: 5px solid #754d24;position: absolute;top: 0;left: calc(50% - 160px);z-index: 5;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#home #middle img {width: 100%;height: auto;position: absolute;bottom: -100px;}
#home #left {width: 50%;padding-top: 32px;margin: 0;display: table-cell;vertical-align: top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#home #left .info {width: 100%;margin-bottom: 30px;background-color: #eee3ce;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#home #left .info h1 {padding: 0;margin: 0;color: #754d24;font-size: 80px;font-weight: 700;font-family: 'Libre Baskerville', serif;}
#home #left .info:nth-child(2){width: 100%;margin-top: 85px;margin-bottom: 0;background-color: #eee3ce;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#home #left .info:nth-child(2) h1 {width: 100%;padding: 0;margin: 0;color: #754d24;font-size: 48px;font-weight: 700;line-height: 1.2;}
#home #left .info h2 {padding: 4px 0;margin: 0;color: #5d5c5f;font-size: 16px;font-weight: 700;line-height: 1.2;}
#home #left .info h3 {padding: 0 0 6px 0;margin: 0;color: #754d24;font-size: 16px;font-weight: 700;font-family: 'Libre Baskerville', serif;line-height: 1.2;}
#home #right {width: 50%;padding-top: 32px;margin: 0;display: table-cell;vertical-align: top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#home #right .info {width: 100%;margin-bottom: 30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#home #right .info h1 {padding: 0;margin: 0;color: #754d24;font-size: 40px;font-weight: 700;font-family: 'Libre Baskerville', serif;line-height: .9;}
#home #right .info h1.album {margin-top: 24px;}
#home #right .info h2 {padding: 0;margin:10px 0 0 0;color: #5d5c5f;font-size: 16px;font-weight: 700;}
#home #right .info figure {width: 80%;padding: 0;margin: 0;text-align: center;}
#home #right .info figure img {width: 100%;vertical-align: middle;}
#home #right .info figure figcaption .btn {width: 100%;padding: 4px 0;margin-top: 0;}
@media (min-width: 1200px){
  #home #left .info {padding: 0 170px 0 calc(50vw - 420px);}
  #home #right .info {padding: 0 calc(50vw - 420px) 0 170px;}
}
@media (min-width: 768px) and (max-width: 1199px){
  #home #middle {height: 560px;}
  #home #left .info {padding: 0 170px 0 10px;}
  #home #right .info {padding: 0 10px 0 170px;}
  #home #right .info figure {width: 47%;}
  #home #right .info figure figcaption .btn {font-size: 14px;}
}
@media (max-width: 767px){
  #home {min-height: auto;height: auto;}
  #home #middle {width: 300px;height: 500px;margin: 0 auto 60px auto;display: block;position: relative;top: auto;left: auto;}
  #home #left, #home #right {width: 100%;height: auto;display: block;}
  #home #left .info {padding: 16px 16px 0 16px;}
  #home #left .info:nth-child(2){margin-top: 0;}
  #home #right .info {padding: 16px 16px 0 16px;}
  #home #right .info figure {width: 100%;}
  #home #right .info figure figcaption .btn {font-size: 14px;}
}
/******************************
bio
******************************/
#bio {width: 100%;min-height: 493px;height: auto;padding: 0;background-color: #fff;}
#bio article {width: 100%;height: auto;padding: 0;background: #fff;display: table;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#bio article.second {height: 215px;}
#bio article.second .left .info img {width: 300px;height: auto;position: absolute;top: -100px;right: 200px;z-index: 3;}
#bio article.banner {width: 100%;height: auto;padding: 0;margin: 0;display: block;overflow: hidden;}
#bio article.banner #banner-home {width: 100vw;height: 500px;padding: 0;margin: 0;}
#bio article.banner #banner-home .owl-dots {position: absolute;left: calc(50% - 60px);bottom: 20px;}
#bio article.banner #banner-home .owl-dots .owl-dot span {background: #fff;}
#bio article.banner #banner-home .owl-dots .owl-dot.active span {background: #754d24;}
#bio article.banner #banner-home .item {width: 100vw;height: 500px;padding: 0;margin: 0;background: url('../images/bio/banner-01.jpg') 50% no-repeat;background-size: cover;}
#bio #discografia {padding-top: 30px;}
#bio #discografia h1{padding-left: 15px;}
#bio #discografia .albumes {width: 100%;height: auto;padding: 0;margin: 0;}
#bio #discografia .albumes .cd {margin-top: 15px;margin-bottom: 15px;}
#bio #discografia .albumes .cd h4 {width: 100%;padding: 0;margin: 0;color: #5d5c5f;font-size: 16px;font-weight: 400;}
#bio #discografia .albumes .cd a,#bio #discografia .albumes .cd a:hover {width: 100%;padding: 0;margin: 0;color: #5d5c5f;font-size: 16px;font-weight: 400;text-decoration: none;}
#bio #discografia .albumes .cd img {width: 100%;height: auto;vertical-align: middle;display: block;}
#bio article > div {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#bio article .claro {background-color: #fcf1df;}
#bio article .oscuro {background-color: #eee3ce;}
#bio article .left {width: 50%;height: auto;padding: 0;display: table-cell;vertical-align: top;}
#bio article .right {width: 50%;height: auto;padding: 0;display: table-cell;vertical-align: top;}
#bio article .left .info h1 {padding:10px 0 0 0;margin: 0;color: #754d24;font-size: 100px;font-weight: 700;font-family: 'Libre Baskerville', serif;line-height: .8;}
#bio article .left .info h2 {padding: 0;margin: 0 0 20px 0;color: #5d5c5f;font-size: 24px;font-weight: 700;}
#bio article .left .info p {width: 100%;padding: 0;margin: 0 0 16px 0;color: #5d5c5f;font-size: 16px;font-weight: 400;}
#bio article .right .info h3 {width: 450px;padding: 0;margin: 0;color: #754d24;font-size: 32px;font-weight: 700;font-family: 'Libre Baskerville', serif;position: absolute;left: -50px;}
#bio article .right .info p {width: 100%;padding: 0;margin: 0 0 16px 0;color: #5d5c5f;font-size: 16px;font-weight: 400;}
#bio article .container h1 {padding: 0;margin: 0;color: #754d24;font-size: 40px;font-weight: 700;font-family: 'Libre Baskerville', serif;}
@media (min-width: 1200px){
  #bio article .left .info {padding: 30px 10px 30px calc(50vw - 600px);}
  #bio article .right .info {padding: 30px calc(50vw - 600px) 30px 10px;}
  #bio article:first-child .left .info {position: absolute;top: calc(50% - 95px);}
}
@media (min-width: 768px) and (max-width: 1199px){
  #bio article .left .info {padding: 30px 10px;}
  #bio article .right .info {padding: 30px 10px;}
}
@media (max-width: 767px){
  #bio article.second {height: auto;}
  #bio article, #bio article .left, #bio article .right {width: 100%;height: auto;display: block;}
  #bio article .left .info {padding: 16px;}
  #bio article .right .info {padding: 16px;}
  #bio article.second .left .info img {width: 300px;height: auto;position: relative;top: auto;right: auto;z-index: 3;}
  #bio article .right .info h3 {width: 100%;position: relative;left: auto;}
  #bio article.banner #banner-home {height: 400px;}
  #bio article.banner #banner-home .item {height: 400px;background: url('../images/bio/banner-01.jpg') 60% 50% no-repeat;background-size: cover;}
  #bio #discografia .albumes .cd {width: calc(50% - 24px);padding: 0;}
}
/******************************
discografia
******************************/
#discography{padding-top: 80px;padding-bottom: 60px;}
#discography .col-sm-4{margin-bottom: 30px;}
#discography .playerlist{position: absolute;top: 400px;}
#discography #portadaDisc img{width: 100%;padding: 0;margin: auto;display: block;vertical-align: middle;}
#discography #resumenDisc h1{padding: 0;margin: 0 0 30px 0;font-size: 24px;font-weight: 700;font-family: 'Libre Baskerville',sans-serif;color: #754d24;}
#discography #resumenDisc p{font-family: 'Open Sans',sans-serif;color: #754d24;}
#discography #cancionesDisc ol{counter-reset: li;list-style-type:decimal-leading-zero;}
/*#discography #cancionesDisc ol li::before{width: 24px;display: inline-block;counter-increment: li;content: counter(li) '.';font-size: 1em;color: #5d5c5f;}*/
#discography #cancionesDisc ol li{margin-bottom: 10px;line-height: 1;font-family: 'Libre Baskerville',sans-serif;color: #754d24;}
#discography #cancionesDisc ol li span{padding-left: 24px;font-size: 12px;font-weight: 700;font-family: 'Open Sans',sans-serif;color: #5d5c5f;}
#discography .contenidoplus{margin-top: 60px;}
#discography #banner{padding: 30px;/*border-top: 5px solid #754d24;border-bottom: 5px solid #754d24;*/}
#discography #banner,#discography #banner .item{width: 100%;}
#discography #banner .item img{width: 100%;padding: 0;margin: auto;display: block;vertical-align: middle;}
#discography #banner .item a{padding: 0;margin: auto;display: block;}
#discography #banner .owl-nav{width: 100%;position: absolute;top: calc(50% - 75px);left: 0;}
#discography #banner .owl-nav .owl-prev{position: absolute;left: -10px;background: #eee3ce;}
#discography #banner .owl-nav .owl-next{position: absolute;right: -10px;background: #eee3ce;}
#discography #banner .owl-dots .owl-dot span{background: white;}
#discography #banner .owl-dots .owl-dot.active span,#discography #banner .owl-dots .owl-dot:hover span{background: #754d24;}
@media (max-width: 767px){
  #discography #banner{overflow: hidden;}
  #discography .playerlist{position: relative;top: auto;}
}
/******************************
contacto
******************************/
#contacto{width: 100%;height: auto;padding: 32px 0;margin: 0;}
#contacto #form .col-xs-12{margin-bottom: 16px;}
#contacto #form label{width: 100%;padding: 5px 10px;color: #754d24;font-family: 'Libre Baskerville',sans-serif;font-size: 16px;}
#contacto #form input[type=text]{width: 100%;padding: 5px 10px;color: #5d5c5f;border: 1px solid #754d24;border-radius: 0px;font-family: 'Open Sans',sans-serif;font-size: 16px;}
#contacto #form textarea{width: 100%;padding: 5px 10px;color: #5d5c5f;border: 1px solid #754d24;border-radius: 0px;font-family: 'Open Sans',sans-serif;font-size: 16px;}
#contacto #form #submit{width: 125px;padding: 5px 10px;margin-left: calc(100% - 125px);display: block;color: #fff;text-align: center;background-color: #754d24;border: 1px solid #754d24;font-family: 'Libre Baskerville',sans-serif;font-size: 16px;-webkit-transition: all 0.6s;transition: all 0.6s;}
#contacto #form #submit:hover{color: #754d24;background-color: #fff;}

#modal{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99999;background-color: rgba(0,0,0,.6);}
#modal iframe{width: 50%;height: 450px;margin: calc(50vh - 225px) 25% 0 25%;display: block;background-color: transparent;}
#modal #close{position: absolute;top: calc(50vh - 260px);right: 25%;cursor: pointer;}
#modal #close span{color: white;font-size: 24px;}
@media (max-width: 767px){
  #modal iframe{width: 90%;height: 300px;margin-top: calc(50vh - 150px);margin-left: 5%;margin-right: 5%;}
  #modal #close{top: calc(50vh - 200px);right: 5%;}
}