body {
    font-family: 'Raleway', 'Helvetica', 'Arial', 'sans-serif';
}

@media screen and (max-width: 993px) {
    .letras {
        color: white;
        font-size: 60px !important;
        border: 5px solid white;
    }
}

@media screen and (max-width: 520px) {
    #player .letras {
        color: white;
        font-size: 50px !important;
        border: 5px solid white;
    }
    #player img {
        height: 350px !important;
    }
    .content img {
        height: 200px !important;
        width: 100%;
    }
}

@media screen and (max-width: 410px) {
    #player .letras {
        color: white;
        font-size: 30px !important;
        border: 5px solid white;
    }
    .content .titulo {
        font-size: 30px !important;
        color: black;
    }
}

@media screen and (max-width: 1140px) {
    .rep h1 {
        font-size: 30px !important;
    }
}

#player {
    font-family: 'Raleway', sans-serif;
}

#player img {
    height: 450px;
}

#player .mask {
    background-color: rgba(0, 0, 0, 0.0)
}

.letras {
    color: white;
    font-size: 100px;
    border: 5px solid white;
}

.reproductor {
    padding-top: 130px;
}

.rep {
    border: 5px solid #2F1793;
}

#titulo {
    text-transform: uppercase;
}

.content h1 {
    font-family: 'Raleway', 'Helvetica', 'Arial', 'sans-serif';
    color: #d40511;
    font-weight: bolder;
    font-size: 80px;
}

.content .titulo {
    font-family: 'Raleway', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 40px;
    color: black;
}

.content h2 {
    color: #4169e1;
    font: bold;
    font-size: 40px;
}

.content h3 {
    color: #191919;
    line-height: 2.1rem;
    font-size: 27px;
}

.content audio {
    width: 100%;
    outline: none;
    border: none;
}

.content img {
    height: 200px !important;
    width: 100%;
}