*{border:0; margin:0; padding:0; box-sizing: border-box; line-height: 1.5;}
html { font-size: 10px; }
body{background:#000000; }
img { width:100%; }
header { position:relative; }
p, h2, h3, h4, h5, h6, label, nav { font-family: 'Abel-Regular';}
a {text-decoration: none; color: #fff8ee;}
input { display: block; }
progress { background-color: red; width:60%; margin-right: 5%}
progress::-moz-progress-bar { color:white; background: white;  }
progress::-webkit-progress-value { color:white;  background-color: white; }

/* maqueta */
.margg-5 { margin-top: 5px; }
.margg-15 { margin-top: 15px; }
.margg-30 { margin-top: 30px; }
.margg-60 { margin-top: 60px; }
.margg-90 { margin-top: 90px; }
.margg-120 { margin-top: 120px; }
.margg-150 { margin-top: 150px; }
.margg-240 { margin-top: 240px; }
.padd { padding:0 2.25%; }

.center { margin: 0 auto; }


/* Texto */
.txt-14 { font-size: 1.4rem; line-height: 1.42; }
.txt-18 { font-size: 1.8rem; line-height: 1.42; }
.txt-21 { font-size: 2.1rem; line-height: 1.42; }
.txt-24 { font-size: 2.4rem; line-height: 1.25; }
.txt-36 { font-size: 3.6rem;  line-height: 1.66; }
 

/* Color */

.amarillo { color: #fff8ee; opacity: 0.9}
.blanco { color: #bbbabb; }


/* init */
.col-20 { width: 20%; }
.col-33 { width:33.33%; }
.col-50 { width:50%; }
.col-66 { width:66.66%; }
.col-80 { width:80%; }
.col-100 { width:100%; }


/*Header & Footer*/

.header nav { position:absolute; top:0; width:100%; }
.header ul{ display:flex; justify-content: center; flex-wrap: wrap}
.header ul li{ padding:0 2.25%; list-style: none; }
.header a  { color: #fffddd; }
.logo { width:250px; }
.logo img {width: 100%;}
.logo-responsive { display:none; }

.footer { margin-top: 240px; height:120px; background-color: #211f1b; text-align: center }
.footer-in { max-width: 1280px; opacity: 0.5; padding-top: 20px;}
.footer-in-top {  display:flex; justify-content: center; flex-wrap: wrap; }
.footer-in-bottom { display:flex; justify-content: center; flex-wrap: wrap; }
.footer-in-logo { padding-bottom: 5px;}
.footer-in-logo-img { width:120px; }
.footer-in-menu {  align-self: flex-end; line-height: 0; }
.footer ul { text-align: right; }
.footer ul li { display:inline; padding-left: 30px;}
.footer, .footer a { color: #bbbabb; }
.footer p { text-align: right;  padding:20px 0; }


/* Contenido*/

.banner img{ object-fit: cover; }

.content { position:relative; margin:0 auto; max-width: 1280px; }

.content-musica-grid { display:flex; flex-wrap: wrap; }
.content-musica-grid-item-imagen { position: relative; }
.content-musica-grid-item-txt { position:relative; min-height: 180px; }
.content-musica-grid-item h4 { opacity: 0; }
.content-musica-grid-item .mask { display: flex; justify-content: center; position: absolute; width: 100%; height: 100%; opacity: 0; }
.content-musica-grid-item .cover { position: absolute; width: 100%; height: 100%; opacity: 0; background-color: #000; }
.content-musica-grid-item span { opacity: 0; }
.mask { background-color:rgba(0,0,0,0.3); }
.mask img { width:25%; cursor: pointer; z-index: 99;}
.mask img.rewind, .mask img.ffwd{ width:15%; cursor: pointer; z-index: 99; padding:2%;}
.mask audio {  cursor: pointer; margin-top:50%; }
.icon-row { position:absolute; width:100%; bottom:0; text-align: right; padding:0 6% 4% 0; z-index:99;}
.icon-row img { width:10%; cursor: pointer;}   

.content-musica-grid-item h4.active { opacity: 0.6; transition: 0.2s; }
.content-musica-grid-item h3.active { color: #fff8ee; transition:0.2s; }
.content-musica-grid-item span.active { opacity: 0.6; transition: 0.2s; }
.content-musica-grid-item .mask.active {  opacity: 1;  transition:0.2s; }
.content-musica-grid-item .cover.active {  opacity: 0.8;  transition:0.2s; }

.content-contacto { display: flex; flex-wrap: wrap; }
.content-contacto-form { padding: 0 2.25% 0 0 } 
.content-contacto-txt { padding: 0 0 0 2.25%; }
.form input, .form textarea { width:100%; background-color: #211f1b; border: 1px solid #555; margin-top:5px; }
.form input[type='text'] { height:30px; }
.form textarea { height:240px; }


/*Media Queries*/

@media only screen and (max-width: 768px) {

    .col-50-t { width: 50%; }
    .col-100-t { width: 100%; }
    .content-contacto { display: block; }
    .content-musica-grid-item .mask { opacity: 1; }
    .content-musica-grid-item .mask.playing { border:1px solid red; }
    .content-musica-grid-item h3 { opacity: 0.8; }
    .content-musica-grid-item h4 { opacity: 0.8; }
    .content-musica-grid-item span { opacity: 0.8; }
    .footer-in-logo { display:none; }
    .footer { height:auto; }
    .footer ul { text-align: center; padding: 0 0 10px 0; }
	.footer ul li { display:block;  padding: 20px 0 0 0;}
	.footer-in-bottom p{ text-align: center; font-size:18px; }

}

@media only screen and (max-width: 480px) {

	html { font-size: 12px; }
	.margg-150 { margin-top: 60px; }
    .margg-240 { margin-top: 75px; }
	.banner { padding-top: 240px; }
    .col-100-m { width: 100%; }
    .logo {display:none;}
    .logo-responsive { display:block; text-align: center; width:100%; padding:0 11% 5% 11%; }
    .content-contacto-txt { padding: 0 0 0; }

    
}