#wrapper p #container_demo {
	text-align: left;
	margin: 0;
	padding: 0;
	margin: 0 auto;
	font-family: "Trebuchet MS", "Myriad Pro", Arial, sans-serif
}
@font-face {
	font-family: FontomasCustomRegular;
	src: url(../fonts/fontomas-webfont.eot);
	src: url(../fonts/fontomas-webfont.eot?#iefix) format('embedded-opentype'), url(../fonts/fontomas-webfont.woff) format('woff'), url(../fonts/fontomas-webfont.ttf) format('truetype'), url(../fonts/fontomas-webfont.svg#FontomasCustomRegular) format('svg');
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: FranchiseRegular;
	src: url(../fonts/franchise-bold-webfont.eot);
	src: url(../fonts/franchise-bold-webfont.eot?#iefix) format('embedded-opentype'), url(../fonts/franchise-bold-webfont.woff) format('woff'), url(../fonts/franchise-bold-webfont.ttf) format('truetype'), url(../fonts/franchise-bold-webfont.svg#FranchiseRegular) format('svg');
	font-weight: 400;
	font-style: normal
}
a.hiddenanchor {
	display: none
}
#wrapper {
	width: 60%;
	right: 0;
	min-height: 560px;
	margin: 50px auto;
	width: 500px;
	position: relative
}
#wrapper a {
	color: #5f9bc6;
}
.mtop {
	margin-top: 15px
}
#wrapper h1 {
	font-size: 48px;
	color: #1e1f4b;
	padding: 2px 0 10px 0;
	font-family: FranchiseRegular, 'Arial Narrow', Arial, sans-serif;
	font-weight: 700;
	text-align: center;
	padding-bottom: 10px;
	margin: 0;
}
#wrapper h1 {
	background: -webkit-repeating-linear-gradient(-45deg, #12535d, #12535d 20px, #406f76 20px, #406f76 40px, #12535d 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, .8) 20%, #93b8bd 53%, rgba(147, 184, 189, .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, .8)), color-stop(53%, #93b8bd), color-stop(79%, rgba(147, 184, 189, .8)), color-stop(100%, rgba(147, 184, 189, 0)));
	background: -webkit-linear-gradient(left, rgba(147, 184, 189, 0) 0, rgba(147, 184, 189, .8) 20%, #93b8bd 53%, rgba(147, 184, 189, .8) 79%, rgba(147, 184, 189, 0) 100%);
	background: -o-linear-gradient(left, rgba(147, 184, 189, 0) 0, rgba(147, 184, 189, .8) 20%, #93b8bd 53%, rgba(147, 184, 189, .8) 79%, rgba(147, 184, 189, 0) 100%);
	background: -ms-linear-gradient(left, rgba(147, 184, 189, 0) 0, rgba(147, 184, 189, .8) 20%, #93b8bd 53%, rgba(147, 184, 189, .8) 79%, rgba(147, 184, 189, 0) 100%);
	background: linear-gradient(left, rgba(147, 184, 189, 0) 0, rgba(147, 184, 189, .8) 20%, #93b8bd 53%, rgba(147, 184, 189, .8) 79%, rgba(147, 184, 189, 0) 100%)
}
p {
	margin: 0px
}
#wrapper p:first-child {
	margin: 0
}
#wrapper label {
	color: #405c60;
	position: relative
}
::-webkit-input-placeholder {
	color: #bebcbc;
	font-style: italic
}
input:-moz-placeholder, textarea:-moz-placeholder {
	color: #bebcbc;
	font-style: italic
}
input {
	outline: 0
}
#wrapper input:not([type=checkbox]) {
	width: 92%;
	margin-top: 4px;
	padding: 10px 5px 10px 32px;
	border: 1px solid #b2b2b2;
	-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: 0 1px 4px 0 rgba(168, 168, 168, .6) inset;
	-moz-box-shadow: 0 1px 4px 0 rgba(168, 168, 168, .6) inset;
	box-shadow: 0 1px 4px 0 rgba(168, 168, 168, .6) inset;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear
}
#wrapper input:not([type=checkbox]):active, #wrapper input:not([type=checkbox]):focus {
	border: 1px solid rgba(91, 90, 90, .7);
	background: rgba(238, 236, 240, .2);
	-webkit-box-shadow: 0 1px 4px 0 rgba(168, 168, 168, .9) inset;
	-moz-box-shadow: 0 1px 4px 0 rgba(168, 168, 168, .9) inset;
	box-shadow: 0 1px 4px 0 rgba(168, 168, 168, .9) inset
}
[data-icon]:after {
	content: attr(data-icon);
	font-family: FontomasCustomRegular;
	color: #1e1f4b;
	position: absolute;
	left: 10px;
	top: 42px;
	width: 30px
}
#wrapper p.button input {
	width: 100%;
	cursor: pointer;
	background: #1e1f4b;
	padding: 8px 5px;
	color: #fff;
	font-size: 24px;
	border: 1px solid #1c6c7a;
	margin-bottom: 10px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .07) inset, 0 0 0 3px #fefefe, 0 5px 3px 3px #d2d2d2;
	-moz-box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .07) inset, 0 0 0 3px #fefefe, 0 5px 3px 3px #d2d2d2;
	box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .07) inset, 0 0 0 3px #fefefe, 0 5px 3px 3px #d2d2d2;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear
}
#wrapper p.button input:hover {
	background: #4ab3c6
}
.submit-button {
	width: 100%;
	cursor: pointer;
	display: block;
	background: #1e1f4b;
	padding: 8px 5px;
	color: #fff !important;
	text-align: center;
	text-transform: uppercase;
	font-size: 24px;
	margin-bottom: 25px;
	border: 1px solid #1c6c7a; 
	text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .07) inset, 0 0 0 3px #fefefe, 0 5px 3px 3px #d2d2d2;
	-moz-box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .07) inset, 0 0 0 3px #fefefe, 0 5px 3px 3px #d2d2d2;
	box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .07) inset, 0 0 0 3px #fefefe, 0 5px 3px 3px #d2d2d2;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear
}
#wrapper p.button input:active, #wrapper p.button input:focus {
	background: #28899a;
	position: relative;
	top: 1px;
	border: 1px solid #0c4c57;
	-webkit-box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .2) inset;
	-moz-box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .2) inset;
	box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .2) inset
}
.submit-button:hover {
	background: #28899a;
	position: relative;
	top: 1px;
	border: 1px solid #1c6c7a;
	text-decoration: none;
	border: 1px solid #0c4c57;
	-webkit-box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .2) inset;
	-moz-box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .2) inset;
	box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .2) inset
}
p.login.button, p.signin.button {
	text-align: right;
	margin: 5px 0
}
.keeplogin {
	margin-top: -5px
}
.keeplogin input, .keeplogin label {
	display: inline-block;
	font-size: 12px;
	font-style: italic
}
.keeplogin input#loginkeeping {
	margin-right: 5px
}
.keeplogin label {
	width: 80%
}
p.change_link {
	position: absolute;
	color: #7f7c7c;
	left: 0;
	height: 20px;
	width: 440px;
	padding: 17px 30px 20px 30px;
	font-size: 16px;
	text-align: right;
	border-top: 1px solid #dbe5e8;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	background: #e1eaeb;
	background: -moz-repeating-linear-gradient(-45deg, #f7f7f7, #f7f7f7 15px, #e1eaeb 15px, #e1eaeb 30px, #f7f7f7 30px);
	background: -webkit-repeating-linear-gradient(-45deg, #f7f7f7, #f7f7f7 15px, #e1eaeb 15px, #e1eaeb 30px, #f7f7f7 30px);
	background: -o-repeating-linear-gradient(-45deg, #f7f7f7, #f7f7f7 15px, #e1eaeb 15px, #e1eaeb 30px, #f7f7f7 30px);
	background: repeating-linear-gradient(-45deg, #f7f7f7, #f7f7f7 15px, #e1eaeb 15px, #e1eaeb 30px, #f7f7f7 30px)
}
#wrapper p.change_link a {
	display: inline-block;
	font-weight: 700;
	background: #f7f8f1;
	padding: 2px 6px;
	color: #1e1f4b;
	margin-left: 10px;
	text-decoration: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #cbd5d6;
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-o-transition: all .4s linear;
	-ms-transition: all .4s linear;
	transition: all .4s linear
}
#wrapper p.change_link a:hover {
	color: #39bfd7;
	background: #f7f7f7;
	border: 1px solid #4ab3c6
}
#wrapper p.change_link a:active {
	position: relative;
	top: 1px
}
#login, #register {
	position: absolute;
	top: 0;
	width: 88%;
	padding: 18px 6% 60px 6%;
	margin: 0 0 35px 0;
	background: #f7f7f7;
	border: 1px solid rgba(147, 184, 189, .8);
	-webkit-box-shadow: 0 2px 5px rgba(105, 108, 109, .7), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
	-moz-box-shadow: 0 2px 5px rgba(105, 108, 109, .7), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
	box-shadow: 0 2px 5px rgba(105, 108, 109, .7), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
	-webkit-box-shadow: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px
}
#register {
	z-index: 21;
	opacity: 0
}
#login {
	z-index: 22
}
#tologin:target ~ #wrapper #login, #toregister:target ~ #wrapper #register {
	z-index: 22;
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-ms-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-o-animation-delay: .1s;
	-ms-animation-delay: .1s;
	animation-delay: .1s
}
#tologin:target ~ #wrapper #register, #toregister:target ~ #wrapper #login {
	-webkit-animation-name: fadeOutLeft;
	-moz-animation-name: fadeOutLeft;
	-ms-animation-name: fadeOutLeft;
	-o-animation-name: fadeOutLeft;
	animation-name: fadeOutLeft
}
.animate {
	-webkit-animation-duration: .5s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .5s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-o-animation-duration: .5s;
	-o-animation-timing-function: ease;
	-o-animation-fill-mode: both;
	-ms-animation-duration: .5s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .5s;
	animation-timing-function: ease;
	animation-fill-mode: both
}
.lt8 #wrapper input {
	padding: 10px 5px 10px 32px;
	width: 92%
}
.lt8 #wrapper input[type=checkbox] {
	width: 10px;
	padding: 0
}
.lt8 #wrapper h1 {
	color: #1e1f4b
}
.lt8 #register {
	display: none
}
.ie9 p.change_link, .lt8 p.change_link {
	position: absolute;
	height: 90px;
	background: 0 0
}
.block-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.block-wrap > div {
	width: 100%;
	text-align: center;
	margin: 5px 0px;
}
.btn-google, .btn-fb {
	display: inline-block;
	border-radius: 1px;
	text-decoration: none;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
	transition: background-color .218s, border-color .218s, box-shadow .218s;
}
.btn-google p, .btn-fb p {
	margin: 0xp;
	text-decoration: none
}
.btn-google:hover, .btn-fb:hover {
	margin: 0xp;
	text-decoration: none
}
.btn-google:hover .google-content p, .btn-google:hover .fb-content p, .btn-fb:hover .google-content p, .btn-fb:hover .fb-content p {
	text-decoration: none
}
.btn-google .google-content, .btn-google .fb-content, .btn-fb .google-content, .btn-fb .fb-content {
	display: flex;
	align-items: center;
	width: 300px;
	line-height: 45px;
	height: 50px;
}
.btn-google .google-content .logo, .btn-google .fb-content .logo, .btn-fb .google-content .logo, .btn-fb .fb-content .logo {
	padding: 10px;
	height: inherit;
}
.btn-google .google-content svg, .btn-google .fb-content svg, .btn-fb .google-content svg, .btn-fb .fb-content svg {
	width: 18px;
	height: 18px;
}
.btn-google .google-content p, .btn-google .fb-content p, .btn-fb .google-content p, .btn-fb .fb-content p {
	width: 100%;
	line-height: 1;
	letter-spacing: .21px;
	text-align: center;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
}
.btn-google {
	background: #FFF;
}
.btn-google:hover {
	box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
}
.btn-google:active {
	background-color: #eee;
}
.btn-google .google-content p {
	color: #757575;
}
.btn-fb {
	padding-top: 1.5px;
	background: #4267b2;
	background-color: #3b5998;
}
.btn-fb:hover {
	box-shadow: 0 0 3px 3px rgba(59, 89, 152, 0.3);
}
.btn-fb .fb-content p {
	color: rgba(255, 255, 255, 0.87);
}