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



@font-face {
 font-family: 'Raleway', sans-serif;
}
/* CSS reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}
html, body {
	margin:0;
	padding:0;
	height: 100%;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, th, var {
	font-style:normal;
	font-weight:normal;
}
ol, ul {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
/* General Demo Style */
body {
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	background: #fff url(~/Content/login/img/bg.jpg) repeat top left;
	font-weight: 400;
	font-size: 15px;
	color: #1d3c41;
	overflow-y: scroll;
}
a {
	color: #333;
	text-decoration: none;
}
.container {
	width: 100%;
	/*height: 100%;*/
	position: relative;
}
.clr {
	clear: both;
}
.container > header {
	padding: 20px 30px 10px 30px;
	margin: 0px 20px 10px 20px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	text-align: center;
}
.container > header h1 {
	font-family: 'Raleway', sans-serif;
	font-size: 35px;
	line-height: 35px;
	position: relative;
	color:#FFF;
	padding: 0px 0px 5px 0px;
	font-weight:600;
}
.container > header h1 span {
	color: #7cbcd6;
	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8);
}
.container > header h2 {
	font-size: 16px;
	font-style: italic;
	color: #2d6277;
	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8);
}
/* Header Style */


/* remove codrops styles and reset the whole thing */
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
body {
	background:url(img/bg.jpg);
	background-attachment:fixed;
	background-size:cover;
}
#container_demo {
	text-align: left;
	margin: 0;
	padding: 0;
	margin: 0 auto;
	font-family: 'Raleway', sans-serif;
}
a.hiddenanchor {
	display: none;
}
/** The wrapper that will contain our two forms **/
#wrapper {
	width: 60%;
	right: 0px;
	top:0px;
	min-height: 560px;
	margin: 0px 40%;
	width: 500px;
	position: relative;
}
/**** Styling the form elements **/

/**** general text styling ****/
#wrapper a {
	color: rgb(95, 155, 198);
	text-decoration: none;
}
#wrapper h1 {
	font-size: 28px;
	color: rgb(6, 106, 117);
	padding: 2px 0 10px 0;
	font-family: 'FranchiseRegular', 'Arial Narrow', Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	padding-bottom: 30px;
}
/** For the moment only webkit supports the background-clip:text; */
#wrapper h1 {
	background: -webkit-repeating-linear-gradient(-45deg,  rgb(18, 83, 93),  rgb(18, 83, 93) 20px,  rgb(64, 111, 118) 20px,  rgb(64, 111, 118) 40px,  rgb(18, 83, 93) 40px);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}
#wrapper h1:after {
	content: ' ';
	display: block;
	width: 100%;
	height: 2px;
	margin-top: 10px;
	background: -moz-linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(147, 184, 189, 0)), color-stop(20%, rgba(147, 184, 189, 0.8)), color-stop(53%, rgba(147, 184, 189, 1)), color-stop(79%, rgba(147, 184, 189, 0.8)), color-stop(100%, rgba(147, 184, 189, 0)));
	background: -webkit-linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
	background: -o-linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
	background: -ms-linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
	background: linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
}
#wrapper p {
	margin-bottom:15px;
}
#wrapper p:first-child {
	margin: 0px;
}
#wrapper label {
	color: rgb(64, 92, 96);
	position: relative;
}

/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder {
 color: rgb(190, 188, 188);
 font-style: italic;
}
input:-moz-placeholder, textarea:-moz-placeholder {
 color: rgb(190, 188, 188);
 font-style: italic;
}
input {
	outline: none;
}

/* all the input except submit and checkbox */
#wrapper input:not([type="checkbox"]) {
 width: 92%;
 margin-top: 4px;
 padding: 10px 5px 10px 32px;
 border: 1px solid rgb(178, 178, 178);
 -webkit-appearance: textfield;
 -webkit-box-sizing: content-box;
 -moz-box-sizing : content-box;
 box-sizing : content-box;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
 -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
 box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active, #wrapper input:not([type="checkbox"]):focus {
 border: 1px solid rgba(91, 90, 90, 0.7);
 background: rgba(238, 236, 240, 0.2);
 -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
 -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
 box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
/** the magic icon trick ! **/
[data-icon]:after {
	content: attr(data-icon);
	font-family: 'FontomasCustomRegular';
	color: rgb(106, 159, 171);
	position: absolute;
	left: 10px;
	top: 35px;
	width: 30px;
}
/*styling both submit buttons */
#wrapper p.button input {
	width: 100%;
	cursor: pointer;
	background: rgb(78, 129, 177);
	padding: 2px 2px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	color: #fff;
	font-size: 27px;
	border: 1px solid rgb(28, 108, 122);
	margin-bottom: 10px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,  0px 0px 0px 3px rgb(254, 254, 254),  0px 5px 3px 3px rgb(210, 210, 210);
	-moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,  0px 0px 0px 3px rgb(254, 254, 254),  0px 5px 3px 3px rgb(210, 210, 210);
	box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,  0px 0px 0px 3px rgb(254, 254, 254),  0px 5px 3px 3px rgb(210, 210, 210);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
#wrapper p.button input:hover {
	background: rgb(74, 179, 198);
}
#wrapper p.button input:active, #wrapper p.button input:focus {
	background: rgb(40, 137, 154);
	position: relative;
	top: 1px;
	border: 1px solid rgb(12, 76, 87);
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	-moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button, p.signin.button {
	text-align: right;
	margin: 5px 0;
}
/* styling the checkbox "keep me logged in"*/
.keeplogin {
	margin-top: -5px;
}
.keeplogin input, .keeplogin label {
	display: inline-block;
	font-size: 14px;
	font-style: italic;
}
.keeplogin input#loginkeeping {
	margin-right: 5px;
}
.keeplogin label {
	width: 80%;
}
/*styling the links to change from one form to another */

p.change_link {
	position: absolute;
	color: rgb(127, 124, 124);
	left: 0px;
	height: 20px;
	width: 438px;
	padding: 17px 30px 40px 30px;
	font-size: 16px;
	text-align: right;
	border-top: 1px solid rgb(78, 127, 176);
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	background: rgb(225, 234, 235);
	background: -moz-repeating-linear-gradient(-45deg,  rgb(247, 247, 247),  rgb(247, 247, 247) 15px,  rgb(225, 234, 235) 15px,  rgb(225, 234, 235) 30px,  rgb(247, 247, 247) 30px  );
	background: -webkit-repeating-linear-gradient(-45deg,  rgb(247, 247, 247),  rgb(247, 247, 247) 15px,  rgb(225, 234, 235) 15px,  rgb(225, 234, 235) 30px,  rgb(247, 247, 247) 30px  );
	background: -o-repeating-linear-gradient(-45deg,  rgb(247, 247, 247),  rgb(247, 247, 247) 15px,  rgb(225, 234, 235) 15px,  rgb(225, 234, 235) 30px,  rgb(247, 247, 247) 30px  );
	background: repeating-linear-gradient(-45deg,  rgb(247, 247, 247),  rgb(247, 247, 247) 15px,  rgb(225, 234, 235) 15px,  rgb(225, 234, 235) 30px,  rgb(247, 247, 247) 30px  );
}
#wrapper p.change_link a {
	display: inline-block;
	font-weight: bold;
	background: rgb(247, 248, 241);
	padding: 2px 6px;
	color: rgb(29, 162, 193);
	margin-left: 10px;
	text-decoration: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid rgb(203, 213, 214);
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
}
#wrapper p.change_link a:hover {
	color: rgb(57, 191, 215);
	background: rgb(247, 247, 247);
	border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active {
	position: relative;
	top: 1px;
}
/** Styling both forms **/
#register, #login {
	position: absolute;
	top: 71px;
	width: 88%;
	padding: 18px 6% 60px 6%;
	margin:0 35px;
	background: rgb(255, 255, 255);
	border: 1px solid rgba(147, 184, 189, 0.8);
	-webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	-moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	-webkit-box-shadow: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
#register {
	z-index: 21;
	opacity: 0;
}
#login {
	z-index: 22;
}


/* extended by Codrops */

@-webkit-keyframes scaleOut {
 0% {
 opacity: 1;
 -webkit-transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(.5);
}
}
 @-moz-keyframes scaleOut {
 0% {
 opacity: 1;
 -moz-transform: scale(1);
}
 100% {
 opacity: 0;
 -moz-transform: scale(.5);
}
}
 @-ms-keyframes scaleOut {
 0% {
 opacity: 1;
 -ms-transform: scale(1);
}
100% {
 opacity: 0;
 -ms-transform: scale(.5);
}
}
 @-o-keyframes scaleOut {
 0% {
 opacity: 1;
 -o-transform: scale(1);
}
 100% {
 opacity: 0;
 -o-transform: scale(.5);
}
}
 @keyframes scaleOut {
 0% {
 opacity: 1;
 transform: scale(1);
}
 100% {
 opacity: 0;
 transform: scale(.5);
}
}
.scaleOut {
	-webkit-animation-name: scaleOut;
	-moz-animation-name: scaleOut;
	-ms-animation-name: scaleOut;
	-o-animation-name: scaleOut;
	animation-name: scaleOut;
}
 @-webkit-keyframes scaleIn {
 0% {
 opacity: 0;
 -webkit-transform: scale(.5);
}
 100% {
 opacity: 1;
 -webkit-transform: scale(1);
}
}
 @-moz-keyframes scaleIn {
 0% {
 opacity: 0;
 -moz-transform: scale(.5);
}
 100% {
 opacity: 1;
 -moz-transform: scale(1);
}
}
 @-ms-keyframes scaleIn {
 0% {
 opacity: 0;
 -ms-transform: scale(.5);
}
 100% {
 opacity: 1;
 -ms-transform: scale(1);
}
}
 @-o-keyframes scaleIn {
 0% {
 opacity: 0;
 -o-transform: scale(.5);
}
 100% {
 opacity: 1;
 -o-transform: scale(1);
}
}
 @keyframes scaleIn {
 0% {
 opacity: 0;
 transform: scale(.5);
}
 100% {
 opacity: 1;
 transform: scale(1);
}
}
.scaleIn {
	-webkit-animation-name: scaleIn;
	-moz-animation-name: scaleIn;
	-ms-animation-name: scaleIn;
	-o-animation-name: scaleIn;
	animation-name: scaleIn;
}
.p-l-40 {
	margin-left:0%;
}
.fon_size-30 {
	font-size:18px !important;
}
/* Full-width input fields */
input[type=text], input[type=password] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
/* Set a style for all buttons */
button {
	background-color: #4CAF50;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: 100%;
}
button:hover {
	opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
	width: auto;
	padding: 14px 20px;
	background-color: #f44336;
	margin-left:5px;
}
/* Center the image and position the close button */
.imgcontainer {
	text-align: center;
	margin: 24px 0 12px 0;
	position: relative;
}
img.avatar {
	width: 40%;
	border-radius: 50%;
}
.container {
	padding: 16px;
}
span.psw {
	float: right;
	padding-top: 16px;
}
/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 9999; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.74); /* Black w/ opacity */
	padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
	border: 1px solid #888;
	width: 40%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
	position: absolute;
	right: 25px;
	top: 0;
	color: #000;
	font-size: 35px;
	font-weight: bold;
}
.close:hover, .close:focus {
	color: red;
	cursor: pointer;
}
/* Add Zoom Animation */
.animate {
	-webkit-animation: animatezoom 0.6s;
	animation: animatezoom 0.6s
}
 @-webkit-keyframes animatezoom {
 from {
-webkit-transform: scale(0)
}
to {
	-webkit-transform: scale(1)
}
}
 @keyframes animatezoom {
 from {
transform: scale(0)
}
to {
	transform: scale(1)
}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
 span.psw {
 display: block;
 float: none;
}
 .cancelbtn {
 width: 100%;
}
}