@font-face {
	font-family: 'montserrat';
	src: url("font/montserrat/montserrat-regular-webfont.woff2") format("woff2"), url("font/montserrat/montserrat-regular-webfont.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

html, body {
	margin: 0;
	padding: 0;
}
*
{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	box-sizing: border-box
}

body {
	width: 100%;
	height: 100%;
	text-align: center;
}

header
{
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
header .site-logo {
	margin: 0 auto -5px;
	max-width: 300px;
}

h1 {
	font-size: 24px;
}

.wrapper_content
{
	height: calc(100vh - 50px);
	margin-top: 30px;
}

article
{
	margin: 0 auto;
	height: 100%;
	max-width: 790px;
	padding: 0;
}

form
{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.form form > p
{
	padding-bottom: 10px;
	width: 100%;
}

input.login-input
{
	margin: 0 0 30px;
	max-width: 320px;
}

form p
{clear:both;line-height: 1.5em; font-size: 16px;}


h2 {clear: both; }

footer
{
	text-align: center;
	height: 80px;
	color: #868686;
	font-size: 22px;
	font-family: 'Lato', sans-serif;
	clear:both;
	padding-top: 20px;
	background-color: #f0f0f0;
}

.wrapper_content select {
	background-image: url(/magic-trick/img/arrow_icon.png);
	background-repeat: no-repeat;
	background-position: right 9px top 50%;
	background-size: 20px;
	appearance: none;
}
.wrapper_content input,
.wrapper_content select
{
	font-size: 18px;
	color: #868686;
	border-radius: 8px;
}

.wrapper_content .form-group.sex
{
	margin-bottom: 12px;
}

.wrapper_content .form-group.fs
{
	align-items: flex-end;
}

.wrapper_content .form-group,
.wrapper_content label
{
	 margin-bottom: 0;
}
.wrapper_content .form-control
{
	margin-bottom: 20px;
}

.wrapper_content input::placeholder {
	color: #868686;
	opacity: .75;
}

.login-input {
	background-image: url(img/user.png);
	background-repeat: no-repeat;
	background-size: 12px 14px;
	background-position: 20px center;
	padding-left: 50px;
}

.login-password {
	background-image: url(img/key.png);
	background-size: 16px 15px;
}

.wr_wrap
{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 0;
}
.dashboard .wr_wrap
{
	align-items: flex-start;
	padding-left: 20px;
}

.wrapper_content article.login form:not(.error) .wr_wrap {
	margin-bottom: 55px;
}

.wrapper_content article.login .button {
	width: auto;
	min-width: 320px;
}
.wrapper_content article .button.manual-button  {
	background-image: linear-gradient(106deg, #4eb8f5 0%, #226db3 100%);
}
.wrapper_content article .button {
	text-transform: uppercase;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #ffffff;
	text-shadow: 1px 1px 4px black;
	width: 100%;
	height: 60px;
	background-color: #b23674;
	border: 0;
	line-height: 55px;
	padding: 0 30px;
	cursor: pointer;
	border-radius: 14px;
	background-image: linear-gradient(106deg, #f54e9d 0%, #b32282 100%);
}

.error {
	margin-bottom: 25px;
	color: #b23674;
	font-size: 20px;
	text-align: center;
}

.content {
	height: 100%;
	display: inline-block;
	text-align: left;
	color: #000000;
	font-size: 17px;
}

.content span {
	color: #868686;
	font-size: 17px;
}

.dashboard .button {
	text-transform: none;
}

.dashboard {
	text-align: center;
}

.dashboard p {
	margin: 0 0 25px;
}

.form {
	text-align: center;
}

article.form .sex label,
article.form .sex span.indent_radio
{
	margin: 0 35px 0 0;
}
article.form .sex .col {
	display: flex;
	align-items: center;
}
article.form .sex input[type="radio"] {
	 margin: 0 5px 0 0;
}

.form form {
	text-align: left;
	font-size: 18px;
	color: #868686;
}

.form form select {
	height: 60px;
	margin: 0;
}

.form .button {
	text-transform: none;
	margin-top: 10px;
}

.form div input {
	height: 18px;
	padding: 20px 20px;
}

a {
	text-decoration: none !important;
}

.select-style {
	border: 1px solid #ccc;
	width: 120px;
	border-radius: 3px;
	overflow: hidden;
	background: #fafafa url("img/arrow.png") no-repeat 100% 50%;

	margin: 0 15px 15px 0;
}

.select-style select {
	padding: 5px 8px;
	width: 130%;
	border: none;
	box-shadow: none;
	background: transparent;
	background-image: none;
	-webkit-appearance: none;
}

.select-style select:focus {
	outline: none;
}

article.manual .manual-content > p {
	width: 100%;
	max-width: 390px;
}
article.manual .manual-content .wr_im input {
	position: absolute;
	bottom: 10%;
	right: 15%;
}
article.manual .manual-content .wr_im img {
	width: 100%;
}
article.manual .manual-content .wr_im {
	width: 20%;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	position: relative;
	padding: 4px;
}
article.manual .manual-content {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

article.manual {
	max-width: 1200px;
	padding: 30px 10px 0;
}
article.confirm > .content h2 {
	font-size: 24px;
	margin-top: 30px;
	font-weight: 600;
}

article.confirm > .content {
	padding: 0 20px;
}

article.results > .container .wr_img img {
	border: none;
}
article.results > .container .wr_img {
	margin: 80px 0;
	display: flex;
	justify-content: space-around;
}
article.results > .container {
	padding-top: 30px;
}

dt {
	color: #868686;
	font-size: 17px;
	margin: 0 10px 0 0;
}

dt:after {
	content: ":";
}

dd {
	color: #000000;
	font-size: 17px;
	margin: 0;
}

.confirm {
	text-align: center;
}

.confirm .button {
	text-transform: none;
	margin: 20px 0;
}

dl {
	margin: 0 0 10px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.results .button {
	text-transform: none;
	margin: 10px 0;
}

.confirm-button {
	text-transform: uppercase !important;
	margin: 20px 0 0;
	width: 193px;
}

.manual-button {
	background-color: #60cde8;
	border-bottom: 6px solid #318ba1;
}

.manual-button:hover, .manual-button:active {
	background-color: #34BFE2;
	border-bottom: 6px solid #256979;
	border-left: 0;
	border-right: 0;
}

.header {
	font-size: 21px;
}

.manual-content {
	text-align: center;
}

@media (max-width: 790px) {
	article.manual .manual-content .wr_im {
		width: 25%;
	}
}
@media (max-width: 360px) {
	article.manual .manual-content .wr_im {
		width: 33.3%;
	}
}
@media (min-width: 576px) {
	article.form form {
		margin-top: 30px;
	}
}