@charset "utf-8";
/* CSS Document */

body { margin: 0; padding: 0;}

/* fonts for box's h2, p, a, label */
.box-modal h2, p , a, label { font-family: arial, sans-serif;}

a:link, a:active, a:visited{ text-decoration:none;}


/* main box styles */
.box-modal {

	max-width: 600px;
	height: auto;
	left: 50%;
	top: 15%;
	padding: 2%;
	position:fixed;
	display: inline-block;
	background: white;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0, .4); 
	text-align: center;
	border: 1px solid #b4b1b1;
	visibility: hidden;
	z-index: 10;
	
	 -webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
	
	-webkit-transition: opacity .5s, top .5s;
	-moz-transition: opacity .5s, top .5s;
	-ms-transition: opacity .5s, top .5s;
	-o-transition: opacity .5s, top .5s;
	transition: opacity .5s, top .5s;
}

.box-heading {
	font-size:34px; 
	color:#226cc5;
	font-family: arial, sans-serif;
	font-weight:bold;
	line-height:130%;
	padding:1% 0 2% 0;
	margin: 0 auto;
}

.overlay:target+.box-modal {
	top: 50%;
	opacity: 1;
	visibility: visible;
}



.overlay {
	background-color: rgba(0, 0, 0, 0.6);
	bottom: 0;
	cursor: default;
	left: 0;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	visibility: hidden;
	z-index: 1;
	
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}


.overlay:target {
	visibility: visible;
	opacity: 1;
}

/* close button you can change background */

.close {
	/*background-image:url(../images/close.png);*/
	height: 48px;
	width:48px;
	position: absolute;
	right: -18px;;
	text-align: center;
	text-decoration: none;
	top: -20px;  
}

.close:hover {
	-webkit-filter: brightness(10%);
}

/* login signup buttons */

input[type=button] {
	padding: 2% 5%;
	font-size: 26px;
	font-family:arial;
	font-weight:bold;
	color: #fff;
	cursor: pointer;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

input[type=submit] {
	padding: 2% 5%;
	font-size: 26px;
	font-family:arial;
	font-weight:bold;
	color: #fff;
	cursor: pointer;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}



input[type=button].yellow {
	width:80%;
	background:#79a140;
	border:none;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

input[type=button].yellow:hover {
	background: #6f923d; /* Old browsers */
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	
}
input[type=button].yellow:active {
	background: #79a140;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

input[type=submit].amber {
	width:80%;
	background:#6fbe44;
	border:none;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

input[type=submit].amber:hover {
	background: #cb8705; /* Old browsers */
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	
}
input[type=submit].amber:active {
	background: #cb8705;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

/* submit button */
.submit {
	max-width: 90%;
	margin: 0 auto 10px auto;
	cursor:pointer;
	border:none;
	text-align:center;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}
/* text fields */
.text-field  {
	display: block;
	margin: 0 auto;
	width: 76%;
	border: 1px solid #a0a0a0;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 1.5%;
	font-size: 20px;
	margin: 2% auto 2% auto;
	
	-moz-box-shadow: inset 0 1px 3px -1px #b4b1b1;
	-webkit-box-shadow: inset 0 1px 3px -1px #b4b1b1;
	box-shadow: inset 0 1px 3px -1px #b4b1b1;
}
	.text-field:focus { 
	outline: none;
	box-shadow: 
	inset 0 2px 0 rgba(0,0,0,.2), 
	0 0 4px rgba(0,0,0,0.1),
	0 0 5px 1px #51CBEE;
}
 
/* Error notification it is not visible because: visibility:hidden */

.error
{
	position:absolute;
	width: 362px;
	height:50px;
	margin-left:-16px;
	margin-top:13px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;	
	background-color:#b20a0a;
	box-shadow: 0 0 10px rgba(0,0,0, .4);
	visibility:hidden;
}

.error .errortext
{
	vertical-align:middle;
	margin-top:17px;
	font-family: arial, sans-serif;	
}

.pick {
	width:80%;
	height:auto;
	margin:2% auto;
}

.box-modal p
{
	display: inline;
	color: #7e7e7e;
	font-size: 16px;
}

#forg
{
	color: #7e7e7e;
	margin-left:95px;
}


#buttons, .connectwith
{
	display:block;
	padding-bottom:15px;
}

@media only screen and (max-width: 1100px) {
	.box-modal{
	width:70%;
	margin:5% auto 0 auto;
	padding:2%;
	}
	
input[type=button] {
	font-size: 22px;
	}
	input[type=submit] {
	font-size: 22px;
	}
h1 {
	font-size:25px;
	}
	.headline {
	padding-left:1%;
	padding-right:1%;
	}
}

@media only screen and (max-width: 800px) {
	.box-modal{
	width:85%;
	margin:5% auto 0 auto;
	padding:2%;
	}
	.text-field {
	width:76%;
	}
	.box-heading {
	font-size:28px;
	}
	.progress-text {
	font-size:11px;
	}

}

@media only screen and (max-width: 650px) {
input[type=button] {
	font-size: 23px;
	}
	input[type=submit] {
	font-size: 23px;
	}
}

@media only screen and (max-width: 450px) {
input[type=button] {
	font-size: 20px;
	}
	input[type=submit] {
	font-size: 20px;
	}
}