/* SCSS HEX 
$celeste: #cdcfc7;
$blue-ribbon: #046be7;
$salem: #0d8b4a;
$mountain-meadow: #23cc8b;
$matrix: #ae5c57;
$dodger-blue: #07a3f8;
$chathams-blue: #0f5487;
$steel-blue: #5884be;
$catalina-blue: #042c74;


/* SCSS RGB *
--celeste: rgba(205,207,199,1);
--blue-ribbon: rgba(4,107,231,1);
--salem: rgba(13,139,74,1);
--mountain-meadow: rgba(35,204,139,1);
--matrix: rgba(174,92,87,1);
--dodger-blue: rgba(7,163,248,1);
--chathams-blue: rgba(15,84,135,1);
--steel-blue: rgba(88,132,190,1);
--catalina-blue: rgba(4,44,116,1);*/


/*formularios*/
@font-face {
	font-family: 'Trueno';
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/trueno/Fonts/truenobd.otf") format("opentype");
}


*, *:after, *:before {
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
	margin:0;
	padding:0;
	border: 0 none;
}

html{
	align-content: center;
	height:100%;
	background-color: #ddf0f8;
}

@font-face {
	font-family: 'Trueno';
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/trueno/Fonts/truenobd.otf") format("opentype");
}

body {
	font-family: 'Trueno', serif;
}

.error{
	display:block;
	background:#ffff;
	margin:0 auto;
	padding: 10px; 
	width:80%;
	display:block; 
	font-size:16px; 
	color:#180d8b;
	border-radius:10px;
	margin-bottom:10px;
}
.acierto{
	background:#17a90c;
	margin:0 auto;
	padding:10px; 
	width:80%;
	display:block; 
	font-size:16px; 
	color:#ffff;
	border-radius:10px;
	margin-bottom:10px;
}

.acierto i {
	width:20%;
	border:solid 1px #ffffff;
	padding:5px;
	-moz-border-radius:20px 20px 20px 20px;
	-webkit-border-radius:20px 20px 20px 20px;
	border-radius:20px 20px 20px 20px;
	color:#ffffff;
}

.header{
	margin:0 auto;
	width:100%;
	padding:20px;	
	display:block;
	box-sizing:border-box;
	
}
.header a img{
	display:block;
	margin:0 auto;
	padding:0;
	width: 200px; 
	max-height: 100%;
}

#menu{
	display:block;
	margin:0 auto;
	margin-top:5%;
	padding:0;	
	max-width:500px;	
	background:#888;
	text-align:center;
	border:0 none;
	-moz-border-radius:5px 5px 0px 0px;
	-webkit-border-radius:5px 5px 0px 0px;
	border-radius:5px 5px 0px 0px;
	box-shadow:0 0 15px 1px rgba(0,0,0, 0.4);
	box-sizing:border-box;
}

#menu ul{
	list-style:none;
	margin:0;
	padding:0;
	box-sizing:border-box;
}

#menu ul li{
	display:inline-block;
	width:49%;
	margin:0;
	padding:0;
	border-spacing: 0;
	box-sizing:border-box;
}

#menu ul li a{
	margin:0 auto;	
	display:block;
	padding:20px 0px 20px 0px;
	text-decoration:none;
	font-size:20px;
	box-sizing:border-box;
}

.active{
	background:#046be4 !important;
	-moz-border-radius:5px 5px 0px 0px;
	-webkit-border-radius:5px 5px 0px 0px;
	border-radius:5px 5px 0px 0px;
}

.active a {
	color: white;
}

.inactive{
	background-color:white;
	-moz-border-radius:5px 5px 0px 0px;
	-webkit-border-radius:5px 5px 0px 0px;
	border-radius:5px 5px 0px 0px;
}

.inactive a {
	color: #046be4;
}

.form-container{
	margin: auto;
	padding:  auto;
	background-color: #046be4;
	max-width: 500px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	box-shadow:0 0px 15px 1px rgba(0,0,0, 0.4);
}

#registro{
	display:none;
}

.formulario{
	margin:auto;
	padding: auto;
	padding-bottom: 40px;
	background-color: #046be4;
	color: white;
	-moz-border-radius:0px 0px 5px 5px;
	-webkit-border-radius:0px 0px 5px 5px;
	border-radius:0px 0px 5px 5px;
	max-width:500px;
	text-align:center;
	border:0 none;
	box-shadow:0 0px 15px 1px rgba(0,0,0, 0.4);
	box-sizing:border-box;
}

.field{
	width:80%;
	margin:10px 0;
	padding: 10px;
	font-size:14px;
	font-family: 'Trueno';
	box-sizing:border-box;
	-moz-border-radius:4px 4px 4px 4px;
	-webkit-border-radius:4px 4px 4px 4px;
	border-radius:4px 4px 4px 4px;
}

.field:focus{
	border:solid 2px #042c74;
}

.field-container input{
	width: 80%;
}

.submit{	
	margin:5px auto;
	width:80%;
	border: none;
	background: #17a90c;
	color: #ffff;
	padding: 20px;
	font-size: 18px;
	font-family: 'Trueno';
	border-radius: 5px;
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease;
}

.submit:hover{
	background:#aeaeae;
	cursor:pointer;
}

.sugerencias{
	margin: 20px auto;
	width:80%;
	color: white;
	font-size:14px;
	font-family: 'Trueno';
	text-align: center;
}

.sugerencias a{
	color: #ddf0f8;
}

input[type=checkbox]{
	background:#ffff;
	margin:0;
	padding:0;
	float:left;
	width:30px;

  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}


footer {
    text-align: center;
	font-size: 12px;
	color: #a5c0e2;
    padding: 20px;
    background-color: #f0f0f0;
}

@media (max-width:768px){
	form{
		width:75%;
	}
	#menu{
		width:75%;
	}
}
@media (max-width:480px){
	form{
		width:95%;
	}
	#menu{
		width:95%;
	}
}
	
@media (max-width:320px){
	form{
		width:100%;
	}
	#menu{
		width:100%;
	}
}