* {
    margin: 0em;
    padding: 0em;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
	text-align: center;
}

body{
    background-color: rgb 237;
}
#imgback1{
background-image: url("../imagenes/imgback-inicio.jpg");
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #FCEBCD;

}

.encabezado-puente {
 text-align: center;
 width: 100%;
 justify-content: center;

}
.encabezado-puente img {
width: 100%;
justify-content: center;

}

/*pag index*/
#topindex {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	color: #53215B;
}
#topindex img {
    width: 57%;
    margin: 7em 1em 1em 1em;
}
#topindex h1 {
    font-size: 191%;
    font-weight: 1500;
}
#topindex h2 {
    font-size: 120%;
    font-weight:lighter;
    margin: 0.7em 0 0 0.1em;
	padding: 0;
}
.destacado {
    color: #53215B;
    font-weight: bold;
    margin: 0.2em 0 2em 0;
	padding: 0;
}

main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	color: #53215B;
}

main a {
    color: #D68E09;
	font-size: 0.7em;
}
main img {
    width: 44%;
    margin: 0.2em 0 ;
  }
footer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	margin-top: 2.5em;
}
footer img {
    width: 23%;
    margin: 0.1em 0 0.5em 0;
  }

footer p {
    color: #D68E09;
	font-size: 55%;
	text-align: center;
	padding-bottom: 0.7em;
	font-style: italic;
}

/* mainmenu pag interiores*/



/*Estilos para el encabezado*/
.header{
 padding: 1em 2em 0.3em 1em;
    display: flex;
    background-color: #e8e8e8;
    justify-content: space-between;
	margin-bottom: 2em;
  }

.container .btn-menu label{
	color: #53215B;
	font-size: 25px;
	cursor: auto;
  }

/*Fin de Estilos para el encabezado*/



/*Menù emergente lateral*/
#btn-menu{
	display: none;
    }
.container-menu{
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;left: 0;
	transition: all 500ms ease;
	opacity: 0;
	visibility: hidden;
   
}
#btn-menu:checked ~ .container-menu{
	opacity: 1;
	visibility: visible;
}
.cont-menu{
	width: 100%;
	max-width: 300px;
	background: #793284;
	height: 100vh;
	position: relative;
	transition: all 500ms ease;
	transform: translateX(-100%);
    }
#btn-menu:checked ~ .container-menu .cont-menu{
	transform: translateX(0%);
}
.cont-menu nav{
	transform: translateY(15%);
}
.cont-menu nav a{
    text-align:left;
	display: block;
	text-decoration: none;
    padding: 1em 2em 1em 2em;
	
	color: #ffffff;
	border-left: 5px solid transparent;
	transition: all 400ms ease;
   border-bottom: 1px solid #c7c7c7;
}
.cont-menu nav a:hover{
	border-left: 5px solid #c7c7c7;
	background: #53215B;
}
.cont-menu label{
	position: absolute;
	right: 5px;
	top: 10px;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
    }

/*Inicio parte de css de Djas*/
header a img {
    width: 6em;
	display: block;
	margin: 0 auto;
}

.allo{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}

.allo h1{
	padding-top: 10%;
    padding-bottom: 10%;
}

.allo h2{
	padding-left: 20%;
    padding-right: 20%;
}

.allo ul{
	margin: 1em auto;
	list-style: none;
}

.allo ul li a{
	display: block;
	border-radius: 20px;
    color: #53215B;
    background-color: #ef9a01;
    margin: 1em 0;
    font-size: 1em;
    text-decoration: none;
    font-weight: bold;
    width: 9em;
	justify-content: center;
    align-items: center;
	padding: .7em auto;
	}

.allo ul li a:hover{
    background-color: #53215B;
    color: #ccc;
}
.nombre{
	font-size: 1.5em;
	font-weight: 600;
	color: #53215B;
}   
 /* tickets INFO */

.iconosinfo {
	display: flex;
	justify-content: space-between;
	  max-width: 30rem;
	align-items: center;
	flex-direction: column;

}
.iconosinfo img {
	margin: 0;
}
.data h4 {
	margin-top: 0;
}  
.data p {
	margin-bottom: 2em;
}  
.data h1 {
	margin: 2em auto 0 auto;
} 
    /* tickets CUADRO DE RESERVA */

.datosreserva {
    margin: 1em auto 3em auto;
    padding: .7em 2em 2em 2em;
    background-color: #FCEBCD;
    color: #53215B;
}

.datosreserva h2 {
    font-weight: 600;
    margin-bottom: .7em;
}
.datosreserva p {
    font-weight: 400;
    line-height: 1.8em;
}

form input {
    margin: 0.5em;
    border-radius: 0.7em;
    padding: 0.1em;
}

form select {
    margin: 0.5em;
    border-radius: 0.5em;
    padding: 0.5em;
}

.email {
    width: 63%;
    padding: 0.5em;
    border-radius: 0.9em;
}

.turno{
    padding: 0.5em;
}

.reservar{
    padding: 0.5em;
    margin: 0.3em;
    cursor: pointer;
    width: 6em;
    border-radius: 5em;
    background-color: #53215B;
	color: #FCEBCD;
	font-weight: 600;
}

.borrar{
    padding: 0.5em;
    margin: 0.3em;
    cursor: pointer;
    width: 6em;
	border-radius: 5em;
    background-color:#D68E09;
	color: #FCEBCD;
	font-weight: 600;
}
/* FIN CUADRO DE RESERVA */



@media (min-width: 35em) {
    
#topindex img {
    width: 23%;
    margin: 3em 1em 1em 1em;
}
main img {
    width: 14%;
    margin: 0.2em 0 1em 0;
  }
footer img {
    width: 9%;
    margin: 0.2em 0 1em 0;
	}

    /* Ayuda, Preguntas Frecuentes */
}
details{
  display: flex;
  border: 0px;
  padding: 2%;
  font-family: Arial;
  margin-bottom: 2%;
  width: 70%;
  background-color: white;
  justify-content: center;
  align-items: center;
}
summary{
  font-weight: bold;
  color: #D68E09;
  font-size: 12px;
  cursor: pointer;
}
p, a, span{
  font-size: 12px;
  color: #666;
}

details summary::-webkit-details-marker {
  color: #53215B;
}
/* FIN PREGUNTAS FRECUENTES */

    /* Formulario de Contacto */

.formulariocontacto {
    min-height: 100%;
    margin: 1em auto 3em auto;
    padding: .7em 2em 2em 2em;
    background-color: #FCEBCD;
    color: #53215B;
}
.formulariocontacto h2 {
    color: brown;
    font-weight: 600;
    margin-bottom: .7em;
}
.formulariocontacto p {
    font-weight: 400;
    line-height: 1.8em;
}
/* FIN FORMULARIO DE CONTACTO */

.perfil img {
    width: 100%;
    margin: 3em 1em 1em 1em;
    align-items: center;
	flex-direction: column;
}

.vigentes p {
  color: #D68E09; 
}

.eliminarcuenta {
    background-color: #FCEBCD;
    color: #53215B;
    padding-bottom: 5em

}

/*Inicio parte de css de coti*/

/* Intro SLIDER GALERIA IMAGEN */

#slider {
     margin: 1em 1.4em 1em 1.4em;
     width: 350px;
    max-width: 100%;
    text-align: center;
}



#slider input  {
    
    display: none;
}

#slider label {
    cursor: pointer;
    text-decoration: none;
}

#slides {
    padding: 5px;
    background: #fff;
    position: relative;
    z-index: 1;
}

#overflow {
    width: 100%;
    overflow: hidden;
}

#slide1:checked ~ #slides .inner {
    margin-left: 0;
}

#slide2:checked ~ #slides .inner {
    margin-left: -100%;
}

#slide3:checked ~ #slides .inner {
    margin-left: -200%;
}

#slide4:checked ~ #slides .inner {
    margin-left: -300%;
}

#slides .inner {
    transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 400%;
    line-height: 0;
    height: 222px;
}

#slides .slide {
    width: 25%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}

#slides .slide_1 {
    height: 15em;
}

#slides .slide_2 {
    height: 15em;
}

#slides .slide_3 {
    height: 15em;
}

#slides .slide_4 {
    height: 15em;
}


#control {
    margin: -137px 0 0 -20px;
    width: 112%;
    height: 50px;
    z-index: 3;
    position: relative;
}

#control label {
    transition: opacity 0.2s ease-out;
    display: none;
    width: 50px;
    height: 50px;
    opacity: .4;
    
}

#control label:hover{
    opacity: 1;
}

#slide1:checked ~ #control label:nth-child(2),
#slide2:checked ~ #control label:nth-child(3),
#slide3:checked ~ #control label:nth-child(4),
#slide4:checked ~ #control label:nth-child(1) {
    background: url(https://image.flaticon.com/icons/svg/709/709586.svg) no-repeat;
    float: right;
    margin: 0 -50px 0 0;
    display: block;
}

#slide1:checked ~ #control label:nth-last-child(2),
#slide2:checked ~ #control label:nth-last-child(3),
#slide3:checked ~ #control label:nth-last-child(4),
#slide4:checked ~ #control label:nth-last-child(1) {
    background: url(https://image.flaticon.com/icons/svg/860/860790.svg) no-repeat;
    float: left;
    margin: 0 0 0 -50px;
    display: block;
}

#bullets {
    margin: 100px 0 0;
    text-align: center;
}

#bullets label {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #ccc;
    margin: 0 10px;
}

#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4) {
    background: #444;
}

@media screen and (max-width:900px) {
    #slide1:checked ~ #control label:nth-child(2),
    #slide2:checked ~ #control label:nth-child(3),
    #slide3:checked ~ #control label:nth-child(4),
    #slide4:checked ~ #control label:nth-child(1),
    #slide1:checked ~ #control label:nth-last-child(2),
    #slide2:checked ~ #control label:nth-last-child(3),
    #slide3:checked ~ #control label:nth-last-child(4),
    #slide4:checked ~ #control label:nth-last-child(1) {
        margin: 0;
        }
    }


.foto-puente1{
    width: 21em;
    border-top: 1em solid #53215B;; 
}

.foto-puente2{
    width: 21em;
    border-top: 1em solid #53215B;;
}

.foto-puente3{
    width: 21em;
    border-top: 1em solid #53215B;;
}

.foto-puente4{
    width: 21em;
    border-top: 1em solid #53215B;;
}

/* FIN GALERIA IMAGEN */
/* Intro PAGINA HISTORIA */


.intropuenteh{
    max-width: 40em;
    margin: auto;
    background-color:  #FCEBCD;
    padding: 5em;
    margin-bottom: 1em;
    
}

.titulopuenteh{
    margin-bottom: 1em;
    padding: 2em;
    font-size:1em;
  }


.historia{  
    max-width: 40em;
    margin: auto;
    background-color:  #FCEBCD;
    padding: 2em;
    margin-bottom: 1em;
    
    
    }
.titulopuente_2{;
    margin-bottom: 1em;
    padding: 1em;
    text-align:left;
    font-size: 17pt;
    
}

.bajada_2{ 
    font-size: 12pt;
    margin-left: 15%;
    margin-right: 15%;
    }

.galeria{  
    max-width: 50em;
    margin: auto;
    background-color:  ;
    padding: 10
        em;
      margin-bottom: 1em;
    
    }
    
.titulo_3{
     margin-bottom: 1em;
    padding: 1em;
    font-size: 17pt;
}
/* Intro banner */
.banner{
background: #fff url ("/img/imagenintroh.jpg");
    max-width: 100%;
    height: auto;
    padding-bottom: 1em;
    box-sizing: content-box;
}