@font-face 
{
    font-family: "Western";
    src: url("./Fuentes/go\ 2\ old\ western.ttf"), url("./Fuentes/go\ 2\ old\ western.otf"), url("./Fuentes/go\ 2\ old\ western.woff");
}
@font-face 
{
    font-family: "TravelingTypewriter";
    src: url("./Fuentes/TravelingTypewriter.ttf"), url("./Fuentes/TravelingTypewriter.otf");
}
*{
    text-decoration: none;
}

body
{
    background-color: black;
    margin: 0 auto;
    padding: 0;
}

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

    header
    {
        display: grid;
        grid-template-columns: 1fr 5fr;
        font-family: "Western";
        height: 200px;
        background-color:#171717;
        color:whitesmoke; 
        font-size: 2em;
        margin-top: 0;
        /*border-bottom: peru;
        border-width: 1px;
        border-style: solid;*/
    }   
    header img
    {
        grid-column: 1;
        width: 70%;
        height: auto;
        margin: 0;
        padding:0;
        align-self: center;
        margin-left: 20%;
    }
    header ul
    {
        grid-column: 2;
        display: flex;
        list-style: none;
        margin: 0;
    }
    header ul li 
    {
        margin-right: 8%;
        margin-left: 2%;
        align-self: center;
        /*border-color: brown;
        border-width: 2px;
        border-style: solid;*/
    }
    header a
    {
        text-decoration: none;
        color: whitesmoke;
    }

    header a:hover
    {
        text-decoration: none;
        color: whitesmoke;
        opacity: 0.5;
    }
    header ul li:nth-last-child()
    {
        margin-right: 0%;
    }
    .logo_link
    {
        align-self: center;
    }
    h2
    {
        font-family: "Western";
        font-size: 3em;
        margin:0;
        color:whitesmoke;
        text-align: center;
        align-self: center;
    }

    .Seccion1
    {
        background-image: url("Img/ImagenInicio.jpg");
        height:800px;
        background-size:auto;
        background-repeat:repeat-x;
        /*border-bottom: peru;
        border-width: 1px;
        border-style:outset;*/
        margin-bottom: 0%;
     }
    .Seccion4
    {   
        background-image: url("Img/FolkBand2.jpg");
        background-size: 100%;
        background-repeat:space;
        height: 600px;
        display: flex;
        text-align: center;
        padding-top:0%;
        align-items: center;

        border-bottom: peru;
        /*border-top: peru;*/
        border-width: 1px;
        border-style:solid;
    }
    .FolkBand2
    {
        display: none;
    }

    .Seccion4_explicacion
    {
        padding-top: 20px;
        margin: 0 auto;
        margin-top: 22%;
        height: 250px;
        width: 600px;
        color:whitesmoke;
        background-color:black;
        opacity: 80%;
        font-size: 2em;
    }
    .Seccion4_explicacion p
    {
        margin: 0;
        margin-bottom: 3%;
    }
    .input_text 
    {
        width: 40%;
        height: 15%;
        font-size: 0.5em;

    }
    .input_button
    {
        display:block;
        margin-top: 3%;
        width:84%;
        height:17%;
        margin-left: 8%;
        font-size: 0.5em;
        background-color: #87613b ;
        opacity: 100%;
        color:whitesmoke;
    }

    /* Sinopsi */

    .Seccion2_main
    {
        padding-top: 3%;
        background-image: url("Img/Railes4.jpg");
        background-repeat:repeat-x;
        padding-left: 3%;
        padding-bottom: 3%;
    }
    .Seccion2
    {
        padding-top: 0%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin:0 auto;
        color:whitesmoke;
        height: 720px;
        text-align: center;
        font-size: 1.5em;
        font-family: Arial;
    }

    .Seccion2_izquierda
    {   
        font-family: "TravelingTypewriter";
        font-size:1em;
        padding-left: 4%;
        grid-column: 1;
    }

    .Aldo_cuerpo
    {
        margin-right: 12%;
        display: none;
    }

    /*** Repertori***/
    .Repertori_seccion1
    {
        background-image: url("./Img/Repertori_Seccion1.jpg");
        height: 850px;
        font-family: "TravelingTypewriter";
        font-size: 1.25em;
        color:whitesmoke;
    }

    .Repertori_seccion1_derecha
    {
        padding-top: 2%;
        text-align:justify;
        padding-left: 47%;
        padding-right: 7%;
    }

    .Repertori_seccion1_derecha h2
    {
        font-size: 1.7em;
        margin-bottom: 2%;
    }

    .Repertori_seccion1_derecha p
    {
        margin-top: 0%;
        padding-bottom: 4%;

    }

    .Repertori_seccion1_derecha img
    {
        width: 30%;
        border-radius: 50%;
        float:left;
        margin-right: 2%;
    }
    .Repertori_seccion2
    {
        background-image: url("./Img/Repertorio_Seccion1.jpg");
        height: 794px;
        font-family: "TravelingTypewriter";
        font-size:1.3em;
        color:whitesmoke;
        /*border-bottom: peru;
        /*border-top: peru;
        border-width: 1px;
        border-style: solid;*/
    }
    .Repertori_seccion2 h2
    {
        font-size: 2em;
        margin-bottom: 2%;
        text-align: left;
        padding-left: 5% ;
    }

    .Repertori_seccion2 span
    {
        color:peru;
    }
    .Repertori_seccion2 ol
    {
        margin-top: 0%;
        margin-left: 4%;
    }

    .Repertori_seccion2 li
    {
        margin-bottom: 1.5%;
    }
    .Aldo_Arthur
    {
        display:none;
    }
    .Arthur_Figura
    {
        display: none;
    }

    /** Escenografia **/
    .Escenografia_Seccion1
    {
        display: grid;
        grid-template-columns: 2fr 1fr;
        height: 737px;
        background-repeat:space;
        margin:0 auto;
        color:whitesmoke;
        height: 650px;
        text-align: center;
        font-size: 1.5em;
        font-family: Arial;
    }
    .Escenografia_principal
    {
        padding-top: 2%;
        background-image: url("Img/Fondo_Repertori2.jpg");
        border-bottom: peru;
        border-width: 1px;
        border-style:solid;
    }
    .Escenografia_Seccion1_derecha
    {
        grid-column: 2;
        grid-row:1;
        padding-right: 4%;
    }
    .Escenografia_Seccion1_izquierda
    {
        font-family: "TravelingTypewriter";
        font-size:1em;
        padding-left:  8%;
        padding-top: 2%;
        padding-right:  8%;
        grid-column: 1;
        grid-row: 1;
    }
    .Escenografia_Seccion1_derecha img
    {
        width: 100%;
        height: auto;
    }

    /**** Geleria ***/
    .Galeria_Seccion1
    {
       
        margin: 0 auto;
        text-align: center;
        margin-bottom: 4%;
    }

    .Galeria_Seccion1 img
    {
        width: 70%;
        height: auto;
        border-color: white;
        border-width: 1px;
        border-style: solid;
        margin-top: 2%;

    }

    .Galeria_Seccion2 
    {
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 2%;
        
    }
    .Galeria_Seccion2 img
    {
        width: 70%;
        height: auto;
        justify-self: center;
        border-color: white;
        border-width: 1px;
        border-style: solid;
        margin-top: 2%;
    }

    /* Fitxa Artística */
    .Fixta_artistica_contenedor
    {
        padding-top: 4%;
        background-image: url("./Img/Background_elenco3.jpg");
        height: 1300px;
    }

    .Fixta_artistica_contenedor a
    {
        color:white;
    }

    .Fitxa_artistica_seccion1
    { 
        width: 70%;
        margin: 0 auto;
        padding-top: 3%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        height: 800px;
        row-gap: 10%;
        color:white;
    }
    .Fitxa_artistica_seccion1 figcaption
    {
        text-align: center;
    }

    .Fitxa_artistica_seccion1 img
    {
        width:100%;
        height:auto;
        justify-self: center;
        border-color:white;
        border-style: solid;
        border-width: 1px;
    }
    .ventana_jordi
    {
        width: 1000px;
        height: 520px;
        position: fixed;
        left:5%;
        top: 8%;
        /*border-style: solid;
        border-color: white;
        border-width: 1px;*/
        background-size: auto;
        display: none;
        text-align: right;
    }

    .ventana_jordi_mobil
    {
        /*width: 1000px;
        height: 520px;*/

        width: 392px;
        height: 520px;
        position: fixed;
        /*left:05%;*/
        top: 15%;
        left:3%;
        /*border-style: solid;
        border-color:peru;
        border-width: 1px;*/
        /*background-size: auto;*/
        background-size:cover;
        text-align: right;
        display: none;
    }

    .ventana_jordi img
    {
        width: 80%;
        height: auto;
    }
    #cerrar
    {
         /*display: none;*/

    }
    #cerrar img
    {
        width: 4%;
        height: auto;

    }
    .modal
    {
        background-color: black;
        opacity: 0.7;
        color:white;
        width: 100%;
        /*height:100vw;*/
        height: 1500px;
        position: absolute;
        display: none;
        /*border-color: peru;
        border-width: 2px;
        border-style: solid;*/
        
    }
    footer
    {
        border-top: peru;
        border-width: 1px;
        border-style:solid;
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        height: 150px;
    }
    .footer_centro
    {
        text-align: center;
        display:grid;
        grid-template-columns: 2fr 1fr;
        color:whitesmoke;
        size: 1em;
        grid-column:2;
        align-self: center;
    }
    .footer_centro p
    {
        grid-template-columns: 1;
        display: inline;
        margin:0;
        padding:0;
        align-self: center;
        text-align: right;
    }

    .footer_centro img
    {
        grid-template-columns: 1;
        width: 20%;
        height: auto;
        margin-left: 3%;
    
    }
    .footer_derecha
    {
        grid-column: 3;
        text-align: center;
        align-self: center;
    }
    .footer_derecha img
    {
        width:10%;
        height: auto;
        margin-left: 3%;

    }

    footer a:hover
    {
        text-decoration: none;
        opacity: 0.5;
    }

    .trilope
    {
        text-align: left;
    }
}

@media only screen and (max-width: 414px) 
{
    .construccion_div
    {

    }
    .construccion
    {
        width:100%;
        height: auto;
    }
    header
    {
        font-family: "Western";
        height: 400px;
        background-color:#171717;
        color:whitesmoke; 
        font-size: 2em;
        margin-top: 0;
        text-align: center;
    }   

    header img
    {
        width: 70%;
        height: auto;
        margin: 0;
        padding:0;
        /*align-self: center;*/
    }
    header ul
    {
        list-style: none;
        margin: 0;
    }
    header ul li 
    {
        margin-right: 8%;
        margin-left: 2%;
        align-self: center;
    }
    header a
    {
        text-decoration: none;
        color: whitesmoke;
    }

    header a:hover
    {
        text-decoration: none;
        color: whitesmoke;
        opacity: 0.5;
    }
    header ul li:nth-last-child()
    {
        margin-right: 0%;
    }
    .logo_link
    {
        align-self: center;
    }

    h2
    {
        font-family: "Western";
        font-size: 2em;
        margin:0;
        color:black;
        text-align: center;
        align-self: center;
    }
    .Repertori_seccion2 h2
    {
        color:whitesmoke;
    }
    .Seccion1
    {
        background-image: url("Img/ImagenInicio.jpg");
        height:200px;
        background-size: contain;
        background-repeat:repeat-x;
        /*border-bottom: peru;
        border-width: 1px;
        border-style:outset;*/
        margin-bottom: 0%;
     }

    .Seccion_video
    {
        margin-top: 60%;
        margin: 0 auto;
        height: 630px;
        text-align: center;
        margin-bottom: 10%;
        display: none;
    }

    .Seccion_video iframe
    {
        display: none;

    }

    .Seccion4
    {   
        /*background-image: url("Img/Repertori_seccion1_background.jpg");
        background-size:cover;
        background-repeat:space;*/
        background-color: whitesmoke;
        height: 200px;
        display: flex;
        text-align: center;
        padding-top:0%;
        align-items: center;

        border-bottom: peru;
        /*border-top: peru;*/
        border-width: 1px;
        border-style:solid;
        
    }
    .FolkBand2
    {
        width: 100%;
        margin:0;
        padding:0;
    }

    .Seccion4_explicacion
    {
        /*background-image: url("Img/Repertori_seccion1_background.jpg");
        background-size:cover;*/
        padding-top: 20px;
        margin: 0 auto;
        /*margin-top: 22%;*/
        height: 200px;
        width: 100%;
        color:black;
        /*background-color:black;*/
        opacity: 100%;
        font-size: 1.5em;
        padding-right: 6%;
        padding-left: 6%;
        /*background-color: peru;*/
       
    }
    .Seccion4_explicacion p
    {
        margin: 0;
        margin-bottom: 3%;
        
    }
    .input_text 
    {
        width: 40%;
        height: 15%;
        font-size: 0.5em;

    }
    .input_button
    {
        display:block;
        margin-top: 3%;
        width:84%;
        height:17%;
        margin-left: 8%;
        font-size: 0.5em;
        background-color: black;
        opacity: 100%;
        color:whitesmoke;
    }

     /* Sinopsi */

     .Seccion2_main
     {
         padding-top: 3%;
         width: 100%;
        background-image: url("Img/Repertori_seccion1_background.jpg");
        /*background-color: peru;*/
         background-repeat:repeat;
         background-size:contain;
         padding-left: 2%;
         padding-right: 2%;
         padding-bottom: 3%;
         /** Max media 414*/
         /*height:924px;*/

     }
     .Seccion2
     {
         padding-top: 0%;
         /*display: grid;
         grid-template-columns: 1fr;*/
         margin:0 auto;
         /*color:whitesmoke;*/
         color:black;
         /*height: 835px;*/
         height:auto;
         text-align: center;
         font-family: Arial;
     }
 
     .Seccion2_izquierda
     {   
         font-family: "TravelingTypewriter";
         font-size:1em;
         padding-left: 0;
        /* grid-column: 1;*/
     }
     .Aldo_cuerpo
     {
         margin-right: 12%;
     }

     /*** Repertori ****/

     .Repertori_seccion1
    {
        background-image: url("./Img/Repertori_seccion1_background.jpg");
        height: 1690px;
        /*background-color: peru;*/
        font-family: "TravelingTypewriter";
        font-size: 1.25em;
        /*opacity: 0.8;*/
        /*color:whitesmoke;*/
        color:black;
    }

    .Repertori_seccion1_derecha
    {
        padding-top: 2%;
        text-align: center;
        padding-left: 3%;
        padding-right: 3%;
    }

    .Repertori_seccion1_derecha h2
    {
        font-size: 2em;
        margin-bottom: 2%;
    }

    .Repertori_seccion1_derecha p
    {
        margin-top: 0%;
        padding-bottom: 4%;

    }

    .Repertori_seccion1_derecha img
    {
        width: 30%;
        border-radius: 50%;
        float:left;
        margin-right: 2%;
    }
    .Repertori_seccion2
    {
       /*background-image: url("./Img/Repertori_seccion1_background.jpg");*/
        padding-top: 5%;
        /*height: 1395px;*/
        font-family: "TravelingTypewriter";
        font-size:1em;
        color:whitesmoke;
        /*border-bottom: peru;*/
        border-top: peru;
        border-width: 1px;
        border-style: solid;
    }
    .Repertori_seccion2 h2
    {
        font-size: 2em;
        margin-bottom: 2%;
        text-align: left;
        padding-left: 5% ;
    }

    .Repertori_seccion2 span
    {
        color:peru;
    }
    .Repertori_seccion2 ol
    {
        margin-top: 0%;
        margin-left: 4%;
    }

    .Repertori_seccion2 li
    {
        margin-bottom: 1.5%;
    }

    .Aldo_Arthur
    {
        width:100%;
        height: auto;
    }
    .Arthur_Figura
    {
        width: 100%;
    }

    /*** Escenografia ***/

    .Escenografia_Seccion1
    {
        /*display: grid;
        grid-template-columns: 2fr 1fr;*/
        height: 737px;
        background-repeat:space;
        margin:0 auto;
        color:BLACK;
        height: 650px;
        text-align: center;
        font-size: 1.03em;
        font-family: Arial;
    }
    .Escenografia_principal
    {
        padding-top: 2%;
        /*background-image: url("Img/Fondo_Repertori.jpg");*/
        background-image: url("Img/Repertori_seccion1_background.jpg");
        border-bottom: peru;
        border-width: 1px;
        border-style:solid;
    }
    .Escenografia_Seccion1_derecha
    {
        grid-column: 2;
        grid-row:1;
        padding-right: 4%;
        display:none;
    }
    .Escenografia_Seccion1_izquierda
    {
        font-family: "TravelingTypewriter";
        font-size:1em;
        padding-left:  8%;
        padding-top: 2%;
        padding-right:  8%;
        grid-column: 1;
        grid-row: 1;
    }
    .Escenografia_Seccion1_derecha img
    {
        width: 100%;
        height: auto;
        display: none;
    }

    /**** Galeria ****/

    .Galeria_Seccion1
    {
        margin: 0 auto;
        text-align: center;
        margin-bottom: 4%;
    }

    .Galeria_Seccion1 img
    {
        width: 70%;
        height: auto;
        border-color: white;
        border-width: 1px;
        border-style: solid;
        margin-top: 2%;

    }

    .Galeria_Seccion2 
    {
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 2%;
        
    }
    .Galeria_Seccion2 img
    {
        width: 70%;
        height: auto;
        justify-self: center;
        border-color: white;
        border-width: 1px;
        border-style: solid;
        margin-top: 2%;
    }

    /* Fitxa artística */
    .Fixta_artistica_contenedor
    {
        padding-top: 4%;
        /*background-image: url("./Img/Background_elenco.jpg");*/
        background-image: url("./Img/Repertori_seccion1_background.jpg");
        /*height: 1080px;*/
        height: 2400px;
    }

    .Fixta_artistica_contenedor a
    {
        color: black;
    }

    .Fitxa_artistica_seccion1
    { 
        width: 70%;
        margin: 0 auto;
        padding-top: 3%;
        /*display: grid;
        grid-template-columns: 1fr 1fr 1fr;*/
        height: 800px;
        row-gap: 10%;
        color:white;
    }
    .Fitxa_artistica_seccion1 figcaption
    {
        text-align: center;
    }

    .Fitxa_artistica_seccion1 img
    {
        width:100%;
        height:auto;
        justify-self: center;
        border-color:white;
        border-style: solid;
        border-width: 1px;
    }
    .ventana_jordi
    {
        width: 1000px;
        height: 520px;
        position: fixed;
        left:5%;
        top: 8%;
        /*border-style: solid;
        border-color: white;
        border-width: 1px;*/
        background-size: auto;
        display: none;
        text-align: right;
    }

    .ventana_jordi_mobil
    {
        /*width: 1000px;
        height: 520px;*/

        width: 392px;
        height: 520px;
        position: fixed;
        /*left:05%;*/
        top: 15%;
        left:3%;
        /*border-style: solid;
        border-color:peru;
        border-width: 1px;*/
        /*background-size: auto;*/
        background-size:cover;
        text-align: right;
        display: none;
    }


    .ventana_jordi img
    {
        width: 80%;
        height: auto;
    }

    .ventana_jordi_mobil img
    {
        width: 80%;
        height: auto;
    }
    #cerrar
    {

    }
    #cerrar img
    {
        width: 4%;
        height: auto;

    }
    .modal
    {
        background-color: black;
        opacity: 0.7;
        color:white;
        width: 100%;
        /*height:100vw;*/
        height:3050px;
        position: absolute;
        display: none;
        /*border-color: peru;
        border-width: 2px;
        border-style: solid;*/
    }
     /* Footer */
     footer
     {
         border-top: peru;
         border-width: 1px;
         border-style:solid;
         display:grid;
         grid-template-columns: 1fr 1fr 1fr;
         height: 150px;
     }
     .footer_centro
     {
         text-align: center;
         display:grid;
         grid-template-columns: 2fr 1fr;
         color:whitesmoke;
         size: 0.5em;
         grid-column:2;
         align-self: center;
     }
     .footer_centro p
     {
         grid-template-columns: 1;
         display: inline;
         margin:0;
         padding:0;
         align-self: center;
         text-align: center;
     }
 
     .footer_centro img
     {
         grid-template-columns: 1;
         width: 20%;
         height: auto;
         margin-left: 3%;
     
     }
     .footer_derecha
     {
         grid-column: 3;
         text-align: center;
         align-self: center;
     }
     .footer_derecha img
     {
         width:30%;
         height: auto;
         margin-left: 3%;
 
     }
 
     footer a:hover
     {
         text-decoration: none;
         opacity: 0.5;
     }
 
     .trilope
     {
         text-align: left;
     }
 }


.Separador1
{
    height: 100px;
    background-color:#87613b;
}

.Seccion2 img
{
    grid-column: 2;
    width: 70%;
    height: auto;
    margin-left: 0%;
    float: right;
}

.Seccion3
{
    display: grid;
    column-gap: 0.5%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-bottom: 30%;
}
.Seccion3 img
{
    margin-top: 50%;
    width: 100%;
    height: auto;
}

.Seccion_video
{
    margin-top: 60%;
    margin: 0 auto;
    height: 630px;
    text-align: center;
    margin-bottom: 10%;
}


/*+****** Slide show *********/

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
    padding-top: 5%;
  max-width: 1000px;
  position: relative;
  margin: 0 auto;
  padding-bottom: 5%;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: whitesmoke;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  display:none;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}