@import url('https://fonts.googleapis.com/css?family=Open+Sans');/* tomamos esta linea de google fonts y copiamos completo de <import>*/
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Truculenta:wght@900&display=swap');
@import url(menu.css);
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;/*para que todo se contenga dentro del mismo modelo de caja*/
}

body {
    font-family: 'Caveat:wght@700&family=Truculenta:wght@900&display=swap', Caveat; /*copiamos tambien de google fonts en la parte de estilos*/
}

header {
    width: 100%;
    height: 50px;
    background: black;
	
	border-bottom: 5px solid darkgreen;
    color: #fff;
    position: fixed; /* para que el menu quede fijo arriba*/
    top: 0;
    left: 0; /*para que comience desde la esquina superior izquierda*/
    z-index: 100; /*para que este siempre delante de los demas elementos*/
}

main{
	position: relative;
	top: 50px;
	background-image: url(../img/fondo.jpg);
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction:column;
	align-content: center;
	align-items: center;

}

footer{
	position: relative;
	top: 50px;
	padding: 50px;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}



footer label{
	color: black;
}

/*BOOSTRAP IMPORTANT*/
.table {
	font-size: 8px !important;
}

/*MERCADO PAGO*/

.mensaje_atencion{
	color: orangered;
	margin: 20px;
}

.texto_alerta{
	font-size: 35px;
	color: orangered;
}

.cuadro_tolerancia{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 20px;
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 10px;
	border-radius: 10px;
	background-color: white;
	color: orangered;
}

.cuadro_tolerancia h1{
	color: orangered;
}


.cupones_saldo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 80%;
	background-color: white;
	margin: 10px;
	padding: 20px;
	border-radius: 10px;
	border: 3px solid rgb(111, 169, 25);
}

.cupones_saldo img{
	width: 100px;
}

.pago_rechazado{
	color: red;
	font-size: 30px;
}
.pago_aprobado{
	color: green;
	font-size: 30px;
}

.checkout-btn {
	margin: 5px;
}
/*MERCADO PAGO*/

.cuadro_nosotros{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
	margin: 20px;
	border: 5px solid greenyellow;
}

.imagen_nosotros{
	width: 60%;
	border-bottom-left-radius: 10px;		
	border-bottom-right-radius: 10px;		
}

.texto_nosotros{
	background-color: white;
	font-size: 20px;
	width: 60%;
	text-align: justify;
}

.tabla_abonos{
	border: 3px solid darkgreen;
	background-color: white;
	margin: 10px;
	border-radius: 5px;
	padding: 10px;
	min-width: 250px;
	max-width: 500px;
}

.tabla_abonos th{
	border: 2px solid white;
	background-color: green;
	color: white;
	padding: 10px;
	border-radius: 5px;
}

.tabla_abonos td{
	border: 2px solid green;
	background-color: white;
	padding: 5px;
	border-radius: 5px;
}

.fotos{
	border: 10px solid white;
	width: 80%;
}

.cuadro_fotografias{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content:center;
	align-items:center;
	align-content: center;
	background-color: rgba(0,0,0,80%);
	width: 100%;
}

.foto_y_datos{
	border: 2px solid darkseagreen;
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
	background-color: white;
	margin: 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.foto_y_datos textarea{
	width: 250px;
	background-color: white;
	color: black;
	font-weight: bold;
}



.img_miniatura{
	width: 250px;
	height: 250px;
	margin: 10px;
	border-radius: 5px;
	border: 2px solid darkseagreen;
}

.acciones_fotos{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: center;
	justify-content:center;
	margin: 10px;
	background-color: white;
	border: 2px solid darkseagreen;
	padding: 5px;
	border-radius: 5px;
}

.cambiar_password{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background-color: darkgreen;
	text-decoration: none;
	font-size: 12px;
	color: white;
	text-align: center;
	padding: 10px;
	border-radius: 10px;
	border: 2px solid black;
	width: 80%;
	margin: 5px;
	font-style: oblique;
}

.btn_ir_principal{
	text-decoration: none;
}

.cuadro_panel{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: rgba(255,255,255,80%);
	width: 100%;
	
}

.contacto_edicion{
	background-color: white;
	margin: 5px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 90%;
	border-radius: 10px;
	border: 5px solid green;
	
}

.contacto_edicion form{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
}

.contacto_edicion input{
	padding: 10px;
	border-radius: 5px;
	border: none;
	margin: 10px;
	background-color: black;
	color: white;
	width: 80%;
	text-align: center;
}

.btn_herramienta{
	text-decoration: none;
	color: green;
	padding: 30px;
	margin: 20px;
	border-radius: 5px;
	border: 2px solid darkgreen;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	width: 150px;
	height: 150px;
	background-color: white;
}


.btn_herramienta h1{
	color: darkseagreen;
	margin: 10px;
}

.btn_volver{
	text-decoration: none;
	color: darkgreen;
	margin: 10px;
	padding: 10px;
	background-color: white;
	border: 2px solid green;
	border-radius: 5px;
}

.boton_cargar_saldo{
	padding: 10px;
	border-radius: 5px;
	margin: 5px;
	color: white;
	border: 3px solid rgb(22, 196, 196);
	background-color: darkcyan;
}

.boton_cancelar{
	color: green;
	background-color: white;
	border: none;
	font-size: 30px;
}

.botones_si_no{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.botones_si_no input{
	padding: 15px;
	width: 100px;
	margin: 10px;
	border-radius: 5px;
	border: 2px solid limegreen;
	color: green;
}

.cuadro_sesion{
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	width: 100%;
	background-color: rgb(0, 102, 0);
	color: white;
	margin-bottom: 5px;
}

.sesion{
	padding: 10px;
	border-radius: 0px;
	margin: 0px;
	
}

.saldo{
	background-color: black;
	padding: 10px;
	border-radius: 0px;
	margin: 0px;
	
}

.horarios{
	margin-top: 10px;
	color: white;
	width: 100%;
	background-color: rgba(0,0,0,80%);
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.horarios div{

	margin: 10px;
	width: 250px;
	padding: 5px;
}

.horarios form{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	background-color: black;
	border-radius: 5px;
	border: 2px solid greenyellow;
}

.horarios input{
	width: 100%;
	color: greenyellow;
	margin: 5px;
	background-color: white;
}

#boton_abono{
	background-color: black;
	color: white;
	border: none;
}

#boton_reservar{
	background-color: greenyellow;
	color: green;
	font-weight: bold;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#boton_canchas{
	background-color: green;
	padding: 15px;
	color: white;
	border-radius: 5px;
	border: 2px solid limegreen;
	margin: 10px;
}



#btn_buscar{
	padding: 10px;
	border-radius: 5px;
	background-color: green;
	border: none;
	color: white;
	text-decoration: none;
}

#btn_mostrar_todos{
	padding: 10px;
	border-radius: 5px;
	background-color: green;
	border: 3px solid black;
	color: white;
	text-decoration: none;
}

.formulario_canchas input{
	margin: 5px;
	padding: 10px;
	border-radius: 5px;
	border: 2px solid darkgray;
	text-align: center;
	color: darkgreen;

	
}


.resultado_usuarios{
	background-color: black;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

.resultado_usuarios form{
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	color: green;
	margin: 5px;
}

.resultado_usuarios h4{
	width: 100%;
	background-color: green;
	text-align: center;
	margin: 5px;
}

.resultado_usuarios button{
	background-color: black;
	color: white;
	border: none;
}

.reservas{
	color: green;
	border: 2px solid green;
	background-color: white;
	border-radius: 5px;
	text-align: center;
	margin: 10px;
	padding: 5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.reservas form{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	margin: 5px;
	font-size: 18px;
}


.reservas div{
	text-align: justify;
}

.redes{
	margin: 20px;
}

.redes a{
	margin: 10px;
	font-size: 40px;
	color: green;
	text-decoration: none;
}

.titulo_footer{
	width: 100%;
	text-align: center;
	color: green;
}


.eltano_texto{
	font-size: 20px;
}

.cuadro{
	background-color: none;
	background-color: rgba(0,0,0,70%);
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
	border: 5px solid black;
	color: white;
	text-decoration: none;
}

.cuadro_blanco{
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
	border: 5px solid black;
	color: white;
	text-decoration: none;
	width: 80%;
}

.cuadro_filas{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

.logo{
	width: 80%;
	border-radius: 10px;
}

.logo-mediano{
	background-color: green;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.logo-mediano img{
	margin: 10px;
	width: 150px;
	height: 150px;
	border-radius: 100%;
}

.formulario_sesion{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 100%;
	align-content: center;
	align-items: center;
}

.formulario_sesion input{
	border: none;
	font-style: oblique;
	color: darkgreen;
	text-align: center;
}

.formulario_registro{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-content: center;
}

.aviso{
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	padding: 20px;
	margin-top: 10px;
	margin-right: 5px;
	margin-left: 5px;
	border-radius: 5px;
	background-color: white;
	color: red;
}

#mensaje{
	background-color: green;
	font-size: 16px;
	padding: 10px;
	width: 100%;
	text-align: center;

}


/*MODAL*/

.container label{
	color: green;
	width: 100%;
	text-align: center;
	display: none;
}
.container input{
	margin-top: 15px;
	margin-bottom: 15px;
}

.modal-header h4{
	width: 100%;
	text-align: center;
	color: green;
}

#combo_modal{
	background-color: white;
	border: 1px solid gray;
	color: black;
	width: 100%;
}

.formulario_registro input, textarea, select{
	font-style: oblique;
	border-radius: 5px;
	text-align: center;
	color: greenyellow;
	border: none;
	background-color: black;
	padding: 10px;
	margin: 10px;
	width: 80%;
}

.formulario_registro select{
	margin-left: 10px;
	margin-top: 10px;
}

.recordar{
	color: greenyellow;
	text-decoration: none;
	background-color: black;
	padding: 10px;
	border-radius: 5px;
	margin: 10px;
	width: 80%;
	text-align: center;
}

.userypass{
	background-color: black;
	margin: 10px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	border: 2px solid green;
	width: 80%;
	
}

.userypass input{
	padding: 12px;
	background-color: black;
}

.userypass label{
	color: darkgreen;
	width: 10%;
	text-align: center;
}



.titulo{
	color: greenyellow;
	font-size: 20px;
	margin: 20px;
	font-style: oblique;
	text-align: center;
}

.titulo_oscuro{
	color: darkgreen;
	font-size: 20px;
	margin: 20px;
	font-style: oblique;
	text-align: center;
}

#boton{
	background-color: green;
	color: black;
	font-weight: bold;
	border: 2px solid black;
	padding: 12px;
	border-radius: 10px;
	width: 80%;
}

.contenedor {
    width: 98%;
    margin: auto;
}

h1 {
    float: left;
    color: #fff;
}

label {/*color del boton menu */
    color: #fff;
}


header .contenedor {
    display: table; /*esto sirve para acomodar el contenedor*/
}



/*PRECIOS//////////////////////////////////////////////////////////////////////////////////////////*/
.estado_fondo_negro{
	background-color: black;
	color: yellowgreen;
	padding: 10px;
	border-radius: 5px;
	margin: 10px;
}

.texto_negro{
	text-align: center;
	margin: 30px;
	color: black;
}

.cuadro_precios_principal{
	background-color: rgba(0,0,0,90%);
	padding: 10px;
	color: white;
	border: 3px solid greenyellow;
	border-radius: 10px;
	width: 80%;
}

.cuadro_precios_principal div{
	text-align: center;
}

.cuadro_precios{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	border-radius: 10px;
	margin: 10px;
	background-color: white;
	padding: 10px;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.cuadro_precios div{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.cuadro_precios input{
	margin: 3px;
	text-align: center;
	padding: 5px;
}

.container_complejos{
	width: 100%;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	background-color: rgba(0,0,0,50%);
	font-family: null;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.titulo_complejo{
	background-color: green;
	color: white;
	border-radius: 3px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding-left: 2px;
	padding-right: 2px;
}

/* FIN PRECIOS//////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 768px){
    .sociales {
        width: auto;
    }
    footer .contenedor {
        justify-content: space-between; /*para que cada elemento se coloque a un extremo de la pantalla*/
    }
	.cuadro_panel{
		width: auto;
	}
}

@media (min-width: 1024px){
	/*BOOSTRAP IMPORTANT*/
	.table {
		font-size: 15px !important;
	}
    .contenedor{
        width: 1000px; /*para que TODOS LOS CONTENEDORES no quede pegado a la parte izquierda al agrandar el navegador*/
    }
	.logo{
		width: 30%;
		border-radius: 10px;
	}

	/* NOSOTROS */
	.cuadro_nosotros{
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.imagen_nosotros{
		width: 30%;
		border-bottom-left-radius: 0px;		
	border-bottom-right-radius: 0px;
	}
	
	.texto_nosotros{
		background-color: white;
		padding: 20px;
		font-size: 20px;
		width: 60%;
		text-align: justify;
	}

	/* FIN NOSOTROS */
	
	.formulario_registro{
		width: 30%;
	}
	.formulario_registro #boton{
		width: 80%;
	}
	.aviso{
		width: 24%;
	}
	
	.userypass{
		width: 30%;
	}
	.recordar{
		width: 30%;
	}
	#boton{
		width: 30%;
	}
	
	.cambiar_password{
		width: 24%;	
	}
	
	.cuadro{
		width: 80%;
	}
	
	.cuadro_panel{
		width: 600px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.cuadro_tolerancia{
		width: 80%;
	}
	/*PRECIOS //////////////////////////////////////////////////////////////////////////////////*/
	.cuadro_precios div{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		align-content: center;
		align-items:center; 
	}

	
	/*PRECIOS //////////////////////////////////////////////////////////////////////////////////*/
}