* {	
margin:0px;
padding: 0px;

}
body{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
background: #ADE3FF; /* Old browsers */
background: #fff; 
}

header{
	width: 100%;
	background:#ADE3FF; 
}

h1{	

text-align: center;
color:#fff;
font-weight:normal;
font-size: 20PT;
margin: 10px 0px;

}

#btn-menu{
	display: none;
}

header label{
	display: none;
	width: 30px;
	height: 30px;
	padding: 10px;
	border-right: 1px solid #fff;

}

header label:hover {

	cursor:pointer;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */


}

.menu ul{	
 margin: 0;
 list-style: none;
 padding: 0;
 display: flex;
 justify-content: center;

}

.menu li{
	border-right:  1px solid #fff; 
}

.menu li:hover{
	background: rgba(0,0,0,0.3); 
}



.menu ul a {	

display: block;
padding: 15px 20px;
color: #000000;
text-decoration: none;

}

@media(max-width: 768px){	

	header label{
		display: block;
	}

	.menu {
		position: absolute;
		background: #ADE3FF;
		width: 70%;
		margin-left: -70%;
		transition: all 0.5s;

	}

	.menu ul{

		flex-direction: column;
	}

	.menu li{

		border-top: 1px solid #fff;
	}
	#btn-menu:checked ~ .menu{

		margin: 0;

	}


}


form{	

background: #ADE3FF;
width: 50%;
border:1px solid:#ADE3FF;
border-radius:1px; 
-moz-border-radius:1px;
-webkit-border-radius:1px;
box-shadow: inset 0 0 10px #000;
margin:10px auto;
}

form h1{	

text-align: center;
color:#000000;
font-weight:normal;
font-size: 20PT;
margin: 0px 0px;
font-family: 'Pinyon Script', cursive;

}

form input{
	width: 90%;
	height: 100%;
	padding: 10px 10px;
	margin: 5px 5px;
	color: #000000;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-size: 14PT;

}

form button{
	width: 200px;
	margin:10px 0px 10px 10px;
	height: 50px;

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */


border:1px solid#232323;
color: #fff;
box-shadow: 0px 2px 0px #000;
-moz-box-shadow: 0px 2px 0px #000;
-webkit-box-shadow: 0px 2px 0px #000; 
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

}


 

#main-container{
	margin:10px auto;
	width: 40px;
}
table{
	background-color: white;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	border-collapse: separate;
	font-size: 13PT;
	width: 85%;
	
}
th, td{

	
	padding: 0;

}
thead{	

	background-color:#ADE3FF;
	text-align: center;
	font-size: 20PT;
margin: 30px 0px;
	font-family: 'Pinyon Script', cursive;
	border-bottom: solid 5px #0F362D;
	color: black;
}

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

tr:hover td{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#499bea+0,207ce5+100;Blue+3d+%237 */
background: #499bea; /* Old browsers */
background: -moz-linear-gradient(top,  #499bea 0%, #207ce5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #499bea 0%,#207ce5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */

color:white;
}

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

	
  table {
    border:0;
  }

  table tr {
    margin-bottom: 10px;
    display: block;
   

  }

  table td {
    display: block;
    text-align: center;
  
  }

  table td:last-child {
    border-bottom: 0;
  }

  table td:before {
    content: attr(data-label);
    float: center;
    text-transform: uppercase;
    font-weight: 600;
  }

  table thead {
    display: center;
    text-align: center;
	color:#fff;
	font-weight:center;
	font-size: 15PT;
	margin: center;
	

  }

  form{	

background: #ADE3FF;
width: 400px;
border:1px solid:#FF0000;
border-radius:3px; 
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-shadow: inset 0 0 10px #000;
margin:100px auto;
}

form h1{	

text-align: center;
color:#fff;
font-weight:normal;
font-size: 10PT;
margin: 10px 0px;
font-family: 'Pinyon Script', cursive;

}

form input{
	width: 300px;
	height: 30px;
	padding: 0px 10px;
	margin: 10px 10px;
	color: #6d6d6d;
	text-align: center;
}

form button{
	width: 135px;
	margin:20px 0px 30px 30px;
	height: 50px;
	background: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#499bea+0,207ce5+100;Blue+3d+%237 */
background: #499bea; /* Old browsers */
background: -moz-linear-gradient(top,  #499bea 0%, #207ce5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #499bea 0%,#207ce5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */

border:1px solid#232323;
color: #fff;
box-shadow: 0px 2px 0px #000;
-moz-box-shadow: 0px 2px 0px #000;
-webkit-box-shadow: 0px 2px 0px #000; 
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

}
}