/*@font-face {
    font-family: 'Clash display';
    src: url(/assets/fonts/ClashDisplay-Extralight.otf);
    font-weight: 100;
    font-family: 'Clash display';
    src: url(/assets/fonts/ClashDisplay-Light.otf);
    font-weight: 200;
    font-family: 'Clash display';
    src: url(/assets/fonts/ClashDisplay-Medium.otf);
    font-weight: 300;
    font-family: 'Clash display';
    src: url(/assets/fonts/ClashDisplay-Regular.otf);
    font-weight: 400;
    font-family: 'Clash display';
    src: url(/assets/fonts/ClashDisplay-Semibold.otf);
    font-weight: 500;
    font-family: 'Clash display';
    src: url(/assets/fonts/ClashDisplay-Bold.otf);
    font-weight: 600;
}*/
@font-face {
    font-family: 'Clash';
    src: url(./../fonts/ClashDisplay.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url(./../imgs/textura.png);
    background-repeat: repeat;
    background-size: 80%;
}

header {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sastre {
    font-family: 'Clash';
    font-weight: 900;
    font-size: 50px;
    color: black;
}

main {
    font-family: 'Clash';
    font-weight: 400;
    padding-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.link {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 5x;
    min-height: 60px;
    width: 80%;
    max-width: 500px;
    background-color: black;
    color: white;
    transition: .5s;
    margin-bottom: 20px;
    text-decoration: none;
    text-align: center;
    padding: 10px 20px;
}


.link p {
    font-size: 25px;
    max-width: calc(100% - 100px);
    text-overflow: clip;
}

.blocked {
    background-color: #13131388;
    cursor: auto;
}

.icon {
    width: 30px;
    height: 30px;
}

.trespuntos {
    width: 30px;
    height: 30px;
    padding: 0 10px;
    /*background-image: url(/assets/imgs/3puntos.png);*/
}

/*redes*/
.instagram {
    background-image: url(./../imgs/instagram.png);
}

.youtube {
    background-image: url(./../imgs/youtube.png);
}

.souncloud {
    background-image: url(./../imgs/souncloud.png);
}

.descargar {
    background-image: url(./../imgs/descargar.png);
}

.candado {
    background-image: url(./../imgs/candado.png);
}

.blocked_i {
    background-image: url(./../imgs/blocked.png);
}

@media screen and (min-width: 500px) {
    .free:hover {
        transform: scale3d(1.1, 1.1, 1.1)
    }
}

@media screen and (max-width: 500px) {
    .descargar_txt {
        font-size: 15px !important;
    }

    .link p {
        font-size: 20px !important;
    }

    .link {
        width: 90% !important;
    }
}

@media screen and (max-width: 300px) {
    .link {
        width: 95% !important;
    }
}

.titulo {
    font-size: 35px;
    margin-bottom: 20px;
    text-align: center;
}

.portada {
    width: 80%;
    max-width: 500px;
    margin-bottom: 20px;
}

.audio {
    margin-bottom: 20px;
    margin-top: -20px;
    width: 80%;
    max-width: 500px;
    border-radius: 0;
}

.descargar_txt {
    font-size: 25px;
}