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

body {
    font-family: 'Lato', sans-serif;
    font-size: 1.6rem;
    background-color: #252526;
}


/** Globales **/

@font-face {
    font-family: font1;
    src: url(../fonts/NewRocker-Regular.otf);
}

@font-face {
    font-family: font2;
    src: url(../fonts/SourceSansPro-ExtraLight.otf);
}

@font-face {
    font-family: font3;
    src: url(../fonts/1942.ttf);
}

@font-face {
    font-family: fontx;
    src: url(../fonts/heavy_data.ttf);
}

.log {
    font-family: "fontx";
    font-size: 2rem;
    color: #ec760c;
}

img {
    max-width: 100%;
}

.contenedor {
    width: 95%;
    max-width: 120rem;
    /** = 1200px; **/
    margin: 0 auto;
}


/* Header */

.site-header {
    background-color: #26292C;
}

.site-header.inicio {
    background-image: url(../img/concierto.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh;
}

.contenido-header {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.contenido-header h1 {
    color: #ffffff;
    padding-bottom: 2rem;
    max-width: 60rem;
    line-height: 2;
}

.guitarra {
    width: 60px;
    margin-left: 3rem;
}

.guitarra:hover {
    border: 1px solid red;
    border-radius: 50%;
    padding: .1rem;
    transform: rotate(45deg);
    transition-delay: .2s;
}

.barra {
    padding-top: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/** Navegacion **/

.navegacion a {
    color: #ffffff;
    text-decoration: none;
    font-size: 2.2rem;
    display: inline;
    font-size: 1.8rem;
    margin-right: 2rem;
}

.navegacion a:hover {
    border-bottom: 3px solid red;
    transition-delay: .1s;
}

.titulo-header {
    text-align: right;
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
    .titulo-header {
        padding-right: 2rem;
    }
}

.guit {
    font-family: "font2";
    letter-spacing: 2px;
}

.rock {
    font-size: 3rem;
    color: black;
    font-family: "font1";
    text-shadow: 0 0 20px #fefcc9, 2px -2px 3px #feec85, -4px -4px 5px #ffae34, 5px -10px 6px #ec760c, -5px -12px 8px #cd4606, 0 -15px 20px #973716, 2px -15px 20px #451b0e;
}

.subtitulos p {
    color: #CCCCCC;
}


/* entradilla */

.entradilla {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.subtitulos {
    text-align: center;
    color: white;
}

.titulo2,
.titulo3,
.titulo4 {
    padding: 1rem 2rem 1rem 2rem;
    font-size: 3rem;
    font-family: "font3";
    text-shadow: 0 0 20px black, 2px -2px 3px #feec85, -4px -4px 5px #ffae34, 5px -10px 6px #ec760c, -5px -12px 8px #cd4606, 0 -15px 20px #973716, 2px -15px 20px #451b0e;
}

.p1 {
    text-align: center;
    padding-bottom: 2rem;
}

.parrafos {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 20px;
    margin: 0 1rem 0 1rem;
    color: #cccccc;
    background-color: #383838;
    border-radius: 20px;
    padding: 1.9rem 1.9rem;
}

.parrafos video {
    display: grid;
    padding-top: 3rem;
}

.parrafos p {
    display: grid;
    font-family: "font2";
    letter-spacing: 2px;
}

.p2 {
    padding: 0 1rem 0 1rem;
}

@media only screen and (max-width: 768px) {
    .parrafos {
        grid-template-columns: auto;
        max-width: 95%;
        min-width: 200px;
    }
    .parrafos video {
        grid-column: auto;
        width: 95%;
    }
    .parrafos .p1 {
        grid-column: auto;
        width: 95%;
    }
}


/** Videos **/

figcaption {
    font-family: "font2";
}

.contenedorGrid {
    margin-top: 2.4rem;
    display: grid;
    grid-template-columns: 50%50%;
    background-color: #26292C;
}

.a video,
.b video,
.c video,
.d video {
    width: 95%;
    height: 95%;
}

@media only screen and (max-width: 768px) {
    .a video,
    .b video,
    .c video,
    .d video {
        grid-column: auto;
    }
    .contenedorGrid {
        grid-template-columns: auto;
        grid-gap: 20px;
    }
}

.contenedorGrid div {
    background-color: #383838;
    border-radius: 12px;
    text-align: center;
    font-size: 30px;
    color: #CCCCCC;
    padding: .4rem 0 0 0;
    margin: 2rem;
}


/* parrafo final*/

.final {
    margin: 3rem 0 4rem 0;
}


/* footer */

footer {
    background: #151516;
    color: #cccccc;
    padding-top: 4rem;
}

.div1 {
    text-align: center;
    padding-bottom: 4rem;
}

.div2 {
    text-align: center;
    padding-bottom: 3rem;
}


/*STEVE VAI*/

.steel {
    background-image: url(../img/tengyart-TZGjAt8uRUI-unsplash.jpg);
    filter: grayscale(30%);
}

.vai-1 {
    display: grid;
    grid-template-columns: 50% 50%;
}

@media only screen and (max-width: 768px) {
    .vai-1 {
        grid-template-columns: auto;
    }
    .vai-1 p {
        padding-left: 2rem;
        text-align: center;
    }
}

.vai-1 p {
    font-family: "font2";
}

.vai-1 img {
    padding: 3rem 2rem 0 2rem;
}

.pvai {
    color: #cccccc;
    padding-top: 3.8rem;
    padding-right: 1.4rem;
}

.vaidisc {
    margin-top: 2rem;
    color: white;
    margin-top: 2.4rem;
    text-align: center;
    padding: 1rem 2rem 1rem 2rem;
    font-size: 3rem;
    font-family: "font3";
    text-shadow: 0 0 20px black, 2px -2px 3px #feec85, -4px -4px 5px #ffae34, 5px -10px 6px #ec760c, -5px -12px 8px #cd4606, 0 -15px 20px #973716, 2px -15px 20px #451b0e;
}

.vai-2 li {
    padding-top: 2rem;
    padding-left: 4rem;
    color: #494141;
    text-align: center;
    list-style: none;
}

.vai-2 {
    background: url(../img/pexels-sebastian-ervi-1763075.jpg);
    width: 95%;
    margin: 0 auto;
    border-radius: 12px;
    padding-bottom: 2rem;
    padding-top: 1rem;
    margin-top: 2.9rem;
}

@media only screen and (max-width: 768px) {
    .vai-2 h1 {
        font-size: 2rem;
    }
    .vai-2 ul li {
        margin-left: -5rem;
    }
}

.vai-3 {
    background: url(../img/pexels-dariusz-grosa-736355.jpg);
    width: 95%;
    margin: 0 auto;
    border-radius: 12px;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.vai-3 h1 {
    padding-top: 5rem;
    color: aliceblue;
    font-family: "font2";
    text-align: center;
}

.audios {
    margin: 0 auto;
    text-align: center;
    padding: 3rem 0 2rem 0
}


/* Conciertos */

.claseh1 {
    font-family: "font2";
    color: rgb(221, 163, 39);
    text-align: center;
}

thead {
    color: red;
}

table {
    margin: auto;
    color: white;
    padding: 2rem 3rem;
}

td {
    padding: 1rem 1.2rem;
    text-align: center;
}

@media screen and (max-width: 600px) {
    table {
        width: 100%;
    }
    thead {
        display: none;
    }
    tr:nth-of-type(2n) {
        background-color: inherit;
    }
    tr td:first-child {
        background: rgb(226, 51, 51);
        font-weight: bold;
        font-size: 1.1em;
        border-radius: 28px;
    }
    tbody td {
        display: block;
        text-align: center;
    }
    tbody td:before {
        content: attr(data-th);
        display: block;
        text-align: center;
    }
    td:last-child {
        padding-bottom: 3rem;
    }
}


/* Botón  */

.boton {
    margin: 0 1.4rem;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 1.4rem;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 2.6rem;
    padding: .5rem 3rem;
}

.boton1 {
    background-color: transparent;
    color: #db4242;
    border: 2px solid #db4242;
}

.boton1:hover {
    background: linear-gradient(to right, rgb(223, 46, 46), rgb(219, 25, 219));
    color: white;
}

.visita {
    color: aliceblue;
    font-family: "font2";
    font-size: 1.5rem;
    text-align: center;
    padding: 2rem 3rem;
}