*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;;
    color: #000;
	text-align: center;
    
}

#main-container{
	margin: 150px auto;
	width: 600px;
}

table{
	background-color: white;
	text-align: left;
	border-collapse: collapse;
	width: 100%;
}

th, td{
	padding: 15px;
}

thead{
	background-color: #cc7123;
	border-bottom: solid 5px #84bdaf;
	color: white;
}

tr:nth-child(even){
	background-color: white;
}

tr:hover td{
	background-color: #cec3c3bd;
	color: white;
}

body{
	
    background-size: 100vw 100vh;
    background-repeat: no-repeat;;
}
/*---*/
body, .modal{
	width: 100%;
	height: 100%;
	
	justify-content: center;
	align-items: center;
}
.modal{
	position: fixed;
	top: 0;
	left: 0;
	background: #00000073;
	transition: all 500ms ease;
	opacity: 0;
	visibility: hidden;
}
#btn-modal:checked ~ .modal{
	opacity: 1;
	visibility: visible;
        display: flex;
} 
.contenedor{
	width: 400px;
	height: 320px;
	margin: auto;
	background: #fff;
	box-shadow: 1px 7px 25px rgba(0,0,0,0.6);
	transition: all 500ms ease;
	position: relative;
	transform: translateY(-30%);
}
#btn-modal:checked ~ .modal .contenedor{
	transform: translateY(0%);

} 
.contenedor header{
	padding: 20px;
	background: #C90A18;
	color: #fff;
    font-weight: bolder;
    font-size: 20px;
}
.contenedor label{
	position: absolute;
	top: 10px;
	right: 10px;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
}
.contenido{
	width: 100%;
}
.contenido h3{
	margin-bottom: 10px;
}
.contenido p{
	margin-bottom: 7px;
}
#btn-modal{
	display: none;
}
.btn-flotante {
	font-size: 16px; /*  tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; 
	color: #ffffff; 
	border-radius: 35px; /* Borde del boton */
	letter-spacing: 2px; /* Espacio entre letras */
	background-color: #C90A18; /* Color de fondo */
	padding: 18px 30px; /* Relleno del boton */
	position: fixed;
	bottom: 40px;
	left: 40px;
	transition: all 300ms ease 0ms;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	z-index: 99;
}
.btn-flotante:hover {
	background-color: #000; /* Color de fondo al pasar el cursor */
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-7px);
}
@media only screen and (max-width: 600px) {
 	.btn-flotante {
		font-size: 14px;
		padding: 12px 20px;
		bottom: 20px;
		left: 20px;
	}
} 
.botons {
    text-decoration:none;
    font-weight: 600;
    font-size: 20px;
    color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:40px;
    padding-right:40px;
    background-color:#cc7123;
    border-color: #d8d8d8;
    border-radius:35px;
	position: absolute;
    }
.lbl-modal{
	background: #cc7123;
	padding: 15px 35px;
	border-radius: 120px;
	cursor: pointer;
}
@media only screen and (min-width:320px) and (max-width:768px){
	.contenedor{
		width: 95%;
	}
}