@font-face {
	font-family: DoulosSIL;
	src: url(/static/fonts/DoulosSIL-R.eot);
	src: url(/static/fonts/DoulosSIL-R.woff2) format('woff2'),
	     url(/static/fonts/DoulosSIL-R.woff) format('woff'),
	     url(/static/fonts/DoulosSIL-R.ttf) format('truetype');
}
@font-face {
  font-family: 'Microgramma';
  src: url('/static/fonts/MICROGB0.eot?');
  src: url('/static/fonts/MICROGB0.eot?') format('eot'),
       url('/static/fonts/MICROGB0.woff2') format('woff2'),
       url('/static/fonts/MICROGB0.woff') format('woff'),
       url('/static/fonts/MICROGB0.ttf')  format('truetype'),
       url('/static/fonts/MICROGB0.svg#MicrogrammaD-BoldExte') format('svg');
}
html {
	height: 100vh;
	margin: 0;
	scroll-behavior: smooth;
}
body {
	min-height: 100vh;
	font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif, "Segoe UI Emoji","Segoe UI Symbol";
}
a, a:hover {
	color: #760000;
}
h1, h2, h3, h4 {
	font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif, "Segoe UI Emoji","Segoe UI Symbol";
}
h2 {
	font-size: 1.25em;
}
.header {
	color: #fff;
	text-align: center;
	position: fixed;
	width: 100%;
	display: grid;
	grid-template-columns: 15% 70% 15%;
	background: #760000;
	background: -moz-linear-gradient(top, #760000 0%, #8f0222 56%, #a90329 100%);
	background: -webkit-linear-gradient(top, #760000 0%,#8f0222 56%,#a90329 100%);
	background: linear-gradient(to bottom, #760000 0%,#8f0222 56%,#a90329 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#760000', endColorstr='#a90329',GradientType=0 );
	z-index: 100;
}
.header h1 {
	font-family: 'Microgramma';
	font-size: 1.6em;
	line-height: 2em;
	letter-spacing: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.75);
}
.header .icon {
	font-size: 2em;
	cursor: pointer;
}
.header .main-menu-inner {
	font-size: 1.3em;
	overflow: hidden;
}
.header .main-menu-inner .menu-entry {
	display: block;
	background-color: #f0f0f0;
	border: 1px solid #212529;
	border-radius: 3px;
	margin: 0.3em auto;
	text-align: center;
	font-size: 1.1em;
}
.header .menu-header {
	grid-column: 1 / -1;
	text-align: center;
	font-size: 1.1em;
	background-color: #f0f0f0;
	margin: 0;
}
.header .city-menu {
	color: #212529;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	border: 1px solid #212529;
	border-radius: 3px;
	margin: 0.3em auto;
	position: relative;
	max-height: 1.8em;
	transition: all 0.3s;
}
.header .city-menu.open {
	max-height: 55em;
}
.header .city-menu:before {
	content: ' ';
	width: 1.1em;
	height: 1.1em;
	background: url(../img/more.svg) no-repeat top left;
	background-size: contain;
	position: absolute;
	left: 0.3em;
	top: 0.3em;
	display: inline-block;
}
.header .city-menu.open:before {
	background: url(../img/less.svg) no-repeat top left;
	background-size: contain;
}

.header .city-menu .menu-header {
	cursor: pointer;
}
.header .city-menu .plz {
	list-style-type: none;
	padding-left: 0.3em;
	margin: 1rem 0;
	overflow: hidden;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.2s;

}
.header .city-menu.open .plz {
	transform: scaleY(1);
}
.header .city-menu .plz span {
	background-color: #f0f0f0;
	display: block;
	padding: 0.3em;
	border-radius: 3px 3px 0 0;
}
.header .user-menu {
	color: #212529;
	border: 1px solid #212529;
	border-radius: 3px;
	margin: 0.3em auto;
	max-height: 1.8em;
	transition: all 0.3s;
	position: relative;
}
.header .user-menu:before {
	content: ' ';
	width: 1.1em;
	height: 1.1em;
	background: url(../img/more.svg) no-repeat top left;
	background-size: contain;
	position: absolute;
	left: 0.3em;
	top: 0.3em;
	display: inline-block;
}
.header .user-menu.open {
	max-height: 55em;
}
.header .user-menu.open:before {
	background: url(../img/less.svg) no-repeat top left;
	background-size: contain;
}
.header .user-menu .menu-header {
	cursor: pointer;
}
.header .user-menu .menu-header:before {
	content: ' ';
	margin-right: 0.3em;
	background: url(../img/user.svg) no-repeat top left;
	background-size: contain;
	height: 1em;
	width: 1em;
	display: inline-block;
	vertical-align: middle;
}
.header .user-menu .user-links {
	overflow: hidden;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.2s;
}
.header .user-menu.open .user-links {
	transform: scaleY(1);
}
.header .user-menu .profile {
	position: relative;
}
.header .user-menu a {
	display: block;
	text-align: center;
	border-radius: 3px;
	margin: 0.3em;
}
.header .user-menu .profile span {
	font-size: 0.8em;
	font-style: italic;
}
.header .user-menu .agency, .header .user-menu .password {
	color: #000088;
	border: 1px solid #000088;
}
.header .user-menu .logout {
	color: #ffffff;
	background-color: #000088;
	padding: 0.3em;
}
.main-menu-inner-wrapper {
	max-height: 0;
	position: fixed;
	top: 59px;
	width: 100%;
	text-align: left;
	background-color: #fff;
	transition: all 0.3s;
	overflow-y: auto;
	z-index: 1000;
}
.main-menu-inner-wrapper.open {
	max-height: calc(100vh - 59px);
}
.main-menu-inner-wrapper a {
	color: #212529;
}
.main-menu-inner-wrapper a:hover {
	color: #212529;
	text-decoration: none;
}
.main-menu-inner {
	padding: 1em;
}
.page-menu-inner-wrapper {
	display: none;
	position: fixed;
	top: 58px;
	right: 0.5em;
	background-color: #f0f0f0;
	border: 1px solid #212529;
	border-radius: 3px;
	padding: 0.3em;
}
.page-menu-inner-wrapper.open {
	display: block;
}
.page-menu-inner {
	font-size: 1.3em;
	text-align: left;
}
.page-menu-inner a { 
	display: block;
	color: #212529;
	margin: 0.3em;
}
.main-wrapper {
	min-height: 100vh;
}
.content {
	padding-top: 59px; 
	padding-bottom: 6em;
	max-width: 960px;
	margin: 0 auto;
	min-height: 100vh;
}
.info-warn {
	width: 100%;
	color: #888800;
	background-color: #ffff0044;
	border: 1px solid #888800;
	padding: 1em;
	margin: 1em 0;
	box-sizing: border-box;
}
.content .usermenu {
	background-color: #fdfdfd;
	padding: 0.5em;
	border-radius: 0 0 3px 3px;
	border: 1px solid #760000;
	border-top: none;
	margin-bottom: 1em;
}
.content .usermenu a {
	padding: 0 1em;
}
.content .search {
	text-align: center;
	margin: 2em auto;
}
.content .button {
	padding: 0.3em 0.5em;
	color: #fff;
	background-color:#760000;
	border-radius: 3px;
	line-height: 1em;
}
.content .button:hover {
	text-decoration: none;
	color: #fff;
}
.content .button.edit {
	background-color: #000066;
}
.content .button.edit:hover {
	text-decoration: none;
}
.content .button.edit::before {
	content: ' ';
	background: url(../img/pencil.svg) no-repeat top left;
	background-size: contain;
	display: inline-block;
	height: 1.2em;
	width: 1.2em;
	margin-right: 0.5em;
	vertical-align: bottom;
}
.content .text p {
	font-size: 1.15em;
	line-height: 1.4em;
}
.girl-box {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	margin: 0 auto;
}
.girl-box .girl .pic {
	transition: all 3s ease-in;
}
.girl-box .girl .pic {
	position: relative;
	height: 100%;
}
.girl-box .girl .pic img {
	width: 100%;
	height: auto;
}
.girl-box .girl .pic span {
	color: #ffffff99;
	background-color: #00000099;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	font-size: 1rem;
}
.girl-box .girl .edit {
	position: absolute;
	top: 1px;
	left: 1px;
	opacity: 0.8;
	width: auto;
	bottom: auto;
	margin: auto;
}
dt::after {
	content: ":"
}
.page.notfound {
	padding: 3em 1em;
}
.card {
	background-color: #f0f0f0;
}
.footer {
	margin-top: -4em;
	background-color: #760000;
	padding: 0.5em 1em;
}
.footer a {
	color: #ff9999;
	display: block;
}
a.footer-home {
	color: #fff;
	text-decoration: none;
	font-size: 2em;
	text-align: center;
	font-weight: bold;
}
.messages {
	list-style-type: none;
	padding: 0.2em;
	font-size: 1.2em;
}
.messages .error {
	color: #ff0000;
	background-color: #ff000044;
	border: 1px solid #ff0000;
	border-radius: 3px;
	padding: 0.3em;
	margin: 0.3em 0.1em;
}
.messages .warning {
	color: #888800;
	background-color: #ffff0044;
	border: 1px solid #888800;
	border-radius: 3px;
	padding: 0.3em;
	margin: 0.3em 0.1em;
}
.messages .success {
	color: #008800;
	background-color: #00ff0044;
	border: 1px solid #00ff00;
	border-radius: 3px;
	padding: 0.3em;
	margin: 0.3em 0.1em;
}
.tt {
	color: #000088;
	border: 1px solid #000088;
	padding: 0.1em;
	margin: 0.2em;
	border-radius: 3px;
}
@media screen and (min-width: 1000px) {
	.header {
		grid-template-columns: auto 30px 900px 30px auto;
	}
	.header .main-menu {
		grid-column: 2;
	}
	.header h2 {
		grid-column: 3;
	}
	.header .main-menu-inner-wrapper {
		max-width: 960px;
	}
	.header .main-menu-inner-wrapper.open {
		border: 1px solid #000;
		border-top: none;
		box-shadow: 3px 3px 2px #00000088;
	}
	.header .city-menu {
		grid-template-columns: 20% 20% 20% 20% 20%;
	}
	.girl-box {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
	.girl-box .girl {
		padding: 0.3em;
		margin: 0.5em;
		background: #760000;
		background: -moz-linear-gradient(top, #760000 0%, #8f0222 56%, #a90329 100%);
		background: -webkit-linear-gradient(top, #760000 0%,#8f0222 56%,#a90329 100%);
		background: linear-gradient(to bottom, #760000 0%,#8f0222 56%,#a90329 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#760000', endColorstr='#a90329',GradientType=0 );
		border-radius: 3px;
	}
}
