* {
	box-sizing: border-box;
}

html, body {
	background-color: white;
	text-align: left;
	margin: 0;
	padding: 0;
	font-size: 1em;
/*	font-family: Arial, Helvetica, sans-serif;*/
	font-family: "Lato", sans-serif;
}

body, button {
	font-family: Tahoma, Geneva, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 1em
}

.visible {display:inline-block}
.hidden {display:none}
.left {float:left}
.right {float:right}

/* after below */
.tooltip-ab:hover::after { 
	content: attr(data-tooltip);
	position: absolute;
	display: block;
	top: 1.8em;
	left: 50%;
	opacity: 0.85;
	background-color: #404040;
	color: white; 
	padding: 5px 10px;
	width:150px;
	border-radius: 10px;
	transform: translateX(-50%);
	z-index:1;
}
/* before above */
.tooltip-ba:hover::before {
	content: attr(data-tooltip);
	position: absolute;
	display: block;
	top: -1em;
	left: 50%;
	opacity: 0.85;
	background-color: #404040;
	color: white; 
	padding: 5px 10px;
	width:150px;
	border-radius: 10px;
	transform: translateX(-50%) translateY(-100%);
	z-index:1;
}

.tooltip-query {
	display:inline-block;
	cursor: pointer;
	color:blue;
}
.tooltip-scope {
	height:auto;
}
/* scope=container, exp=expandable when hovering over scope */
.tooltip-scope .tooltip-exp, .tooltip-query .tooltip-exp {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	position:absolute;
	padding:0;
	margin:0;
	max-width: 75%;
    left: 50%;
    transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
	background-color: #404040;
	color: white; 
	overflow:hidden;
	max-height: 0px;
	visibility:hidden;
	transition: max-height 1s ease-in-out,visibility 0s 0.8s;
	border-radius: 10px;
	padding: 5px 10px;
	z-index:1;
}
.tooltip-scope:hover .tooltip-exp, .tooltip-query .tooltip-expvis {
	visibility:visible;
	max-height:100%;
	transition: max-height 1s ease-in-out,visibility 0s 0s;
}
.tooltip-exp .txtclose {
	position:relative;
	display: block;
	border:none;
	background:none;
	text-align:center;
}
.tooltip-exp .txtclose::before {
	content: "close";
	color: yellow;
}
.recommended::after {
	content: " (recommended)";
	color: red;
	font-weight: bold;
}
#menu {
	position: relative;
	background: rgb(2, 0, 36);
	background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%,
		rgba(0, 0, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
	color: white;
	/*box-shadow: 0 1px 8px 1px #888888;*/
	font-family: Arial, Helvetica, sans-serif;
	padding: 4px 1px;
	z-Index: 10;
}

#menu button {
	margin: 0;
	border: none;
	cursor: pointer;
	background: transparent
}

#menu button:focus {
	color: white
}

#menu button {
	font-size: 1em
}

#menu .partition {
	display:flex;
	width:100%;
}

#menu .partition .mnuleft {
	flex-grow:1;
	text-align: left;
}

#menu .partition .mnuright {
	flex-shrink:1;
	text-align: right;
}

#menu .container {
	display: inline;
	padding-right: 5px;
	margin: 5px;
	text-align: left;
}
#menu .item {
	position:relative;
	display: inline;
	padding: 0;
}
#menu .item button {
	background: transparent;
	padding: 0;
	color: white;
	/*background-color: black;*/
	vertical-align: middle;
	width: auto;
}
#menu .name {
	display: inline;
	padding: 0;
}
#menu .name i {
	margin-right: 2px;
	color: white;
}
#menu .name span {
	color: #d0d0d0;
}
#menu .drop {
	position:absolute;
	display: inline-block;
	padding: 2px;
	top: calc(1em + 8px);
	left: 0;
	background-color: white;
	color: black;
	box-shadow: 0 1px 8px 1px #888888;
	white-space: nowrap;
	max-height: calc(100vh - (100px + 2em));
	width: 200px;
	overflow-y: auto;
	overflow-x: visible;
}
#menu .drop.hidden {
	display: none;
}
#menu .drop p {
	font-size: 1em;
	margin:0;
	padding:0;
	border-bottom: 1px dotted #404040;
}
#menu .drop ul, #menu .drop li {
	font-size: 1em;
	margin:0;
	padding:0;
	list-style-type: none;
}
#menu .drop a {
	text-decoration: none;
}

#menu .alertable i {
	color: black;
	padding:4px;
	background-color:#ffffc0;
	border-radius:50%;
	width:100%;
}

#menu .drop .optionbtn {
	/*display: block;*/
	border: none;
	color: #c0c0c0;
	width: 20px;
	opacity: 90%;
}
#menu .drop .optionbtn:hover {
	color: black;
}
#menu .drop ul {
	position:relative;
	/*border: 1px solid purple;*/
}
#menu .drop ul li {
	position:relative;
	/*border: 1px solid brown;*/
}
/*#menu .drop ul li ul {
	position:absolute;
	display: block;
	box-shadow: 0 1px 8px 1px #888888;
	color: black;	
	top: 0;
	left: 100%;
	width: 150px;
}
*/
.notification {
	position:relative; 
	display:inline
}
.notification .badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background-color: red;
	border-radius: 4px;
	font-size: 10px;
	color: white;
	padding: 2px 4px 2px 4px;
	z-index: 20;
}
.drop .badge {
	position:relative;
	background-color: red;
	border-radius: 4px;
	color: white;
	font-size: 1rem;
	padding: 0 2px;
	margin-left:4px;
}

@supports (position: sticky ) or (position: -webkit-sticky ) or (position: -moz-sticky) or (position: -ms-sticky ) or (position: -o-sticky ) { 
	#menu {
		position: sticky;
		top:0;
	}
}


.pop {
	color: #d0d0d0;
	cursor: pointer;
}
.pop:hover {
	color: #8080f0;
}


header {
	background-color: #404040;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
}

header .log {
	padding: 10px;
	float: right
}

header img {
	position: relative
}

.expanded {
	color: #d0d0d0;
	font-family: Arial, Helvetica, sans-serif;
}

/*page-heading {
	display: block;
	position: relative;
	background: white;
	border-bottom: 1px solid black;
	padding: 5px;
	box-shadow: 0 1px 8px 1px #888888;
	background-color: white;
}
*/
page-heading {
	position: relative;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;
	top: calc(1em + 10px);
	max-height: 80px;
	overflow-y:hidden;
	box-shadow: 0 1px 8px 1px #888888;
	z-index:2;
}
page-heading.active,page-heading:hover  {
	background-color: white;
	max-height: none;
	overflow-y: visible;
	padding-bottom:10px;
}
.notification {
	position: relative;
	display: inline-block;
	color: white;
	text-decoration: none;
}

.notification .badge {
	position: absolute;
	top: -8px;
	right: -4px;
	background-color: red;
	border-radius: 4px;
	font-size: 10px;
	color: white;
	padding: 2px 4px 2px 4px;
	z-index: 20;
}

header h1, header p {
	letter-spacing: 5px;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff
}

h2 {
	width: 100%;
	top: 50%;
	left: 0;
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
	color: black;
	/*transform:translate(0,-50%)*/
}

h2::before, h2::after {
	width: 50px;
	height: 50px;
	left: 50%;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	animation: buble 1s linear infinite alternate
}

h2::before {
	bottom: -100px
}

h2::after {
	bottom: -110px
}

.main-footer {
	display: flex;
	background-color: white;
	padding: 0 5px;
	max-height: 1em;
	font-size: 0.8rem;
	color: black;
	overflow:hidden;
}
.main-footer .copyright {
	flex-grow: 1;
}
.main-footer .links {
	flex-shrink: 1;
}
.main-footer .links div {
	position:relative;
	display:inline;
	padding: 0 5px;
}
.main-content {
	display: flex;
	flex-direction: row;
	background-color: white;
	padding: 0 1em;
/*	height: calc(100vh - (100px + 2em));*/
}
.main-content.fxd {
	height: calc(100vh - (100px + 2em));
}

.main-content button {/*color:black*/}
.main-content .left {text-align:left}
.main-content .right {text-align:right}
.main-content .expanded {display: inline; color:black}
.main-content .floaty-left {float:left}
.main-content .floaty-right {float:right}

.main-content .fbcol {
	border: 1px solid black;
	background-color: white;
	width: 200px;
}

.fbcol.index {
	flex-shrink: 0;
}

.fbcol.main {
	height:100%;
	display: flex;
	flex-direction: column;
	flex-grow:1;
}
.fbcol.side {
	flex-grow: 0;
}

.fbcol.main footer {
	position: relative;
	display: block;
	/*height: 100px;*/
	border: 4px solid #f0f0f0;
	background: #f0f0f0;
	flex-grow:2;
}

.fbcol.main section {
	flex-grow: 1;
/*	overflow-y: auto;
	overflow-x: hidden;
	height: calc(100% - 100px);*/
}
section.fxd {
	overflow-y: auto;
	overflow-x: hidden;
	height: calc(100% - 100px);
}

.emergentmenucontainer {
	display:none;
}
.emergentmenu {
    position: absolute;
    display: block;
    box-shadow: 0 1px 8px 1px #888888; 
    border: 1px solid black; 
    background-color: white;
    opacity: 100%;
    text-align: left;
    padding:5px;
	right:0;
    z-index:99;
    white-space: nowrap;
}
.emergentmenu ul {
	list-style-type: none;
	margin:0;
	padding:0;
}
.emergentmenu li {
	list-style-type: none;
	background-color: white;
	padding: 4px 0 !important;
}
.emergentmenu li span {
	color: grey;
	width: 2em;
}
.emergentmenu li:hover {
	background-color: #e0e0e0;
	color: white;
}
.emergentmenu li a {
	display:block;
	text-decoration: none;
	color: black;
}

.textarea {
	display: inline-block;
	background-color: white;
	color: black;
    width: 100%;
    overflow: hidden;
    resize: both;
    min-height: 40px;
    line-height: 20px;
    border: 1px solid #ccc;
    padding: 1px 6px;
    max-height: calc(100px - 2px);
    max-width: 100%;
    overflow-y: auto;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}
.textarea[contenteditable]:empty::before {
    content: "Type here...";
    color: gray;
}

.card-container {
	position:relative;
	padding-bottom: 8px;
}

profile-card {
	background-color: white;
	position: relative;
	display: flex;
	flex-direction: row;
}
image-container {
	border:1px solid #808080;
	border-radius: 5px;
	overflow:hidden;
}
details-container {
	flex-grow: 1;
	font-size: 0.9em;
	line-height: 0.9em;
}
details-container small {
	padding:0;
	margin:0;
	line-height: .8em;
}
options-container {
	flex-shrink: 1;
	white-space: nowrap;
	line-height:1.5em;
}
[gender="Male"] {
	color: blue;
}
[gender="Female"] {
	color: pink;
}
[gender="Trans"] {
	color: purple;
}
[gender="Couple"] {
	color: brown;
}

.options {
	display:none;
}
.options ul {
	
}
.options li {
	
}

[role="presentation"] {
	
}

@keyframes bg-highlight {
  0% {background-color:yellow; margin: 10px;}
  100% { background-color:transparent; margin: 0;}
}
.selectme {
	border-bottom: 1px dotted #c0c0c0;
}
.selectme:hover {
	cursor: pointer;
	background-color: #e0e0e0;
}
.selectme .hovervis {
	display:none;
}
.selectme:hover .hovervis {
	display:inline-block;
}

.subfooter {
	border-top: 1px dotted black;
}

.csrpoint {
	cursor: pointer;
}
.w0px {
	width:0;
}
.w100pc {
	width:100%;
}
.h100pc {
	height:100%;
}
.w90pc {
	width:90%;
}
.h90pc {
	height:90%;
}
.w50pc {
	width:50%;
}
.h50pc {
	height:50%;
}
.wauto {
	width:auto;
}
.posf {
	position: fixed;
}
.posr {
	position: relative;
}
.posa {
	position: absolute;
}
.poss {
	position: static;
}
.dispn {
	display:none;
}
.dispb {
	display:block;
}
.dispi {
	display:inline;
}
.dispg {
	display:grid;
}
.dispf {
	display:flex;
}
.table {
	display:table;
}
.tr {
	display:table-row;
}
.td {
	display:table-cell;
}
.dispib {
	display:inline-block;
}
.dispig {
	display:inline-grid;
}
.dispif {
	display:inline-flex;
}
.dispitb {
	display:inline-table;
}
.clr-teal {
	color:#008080;
}	
.clr-red {
	color:red;
}	
.clr-ltred {
	color:#ffa0a0;
}	
.clr-dkred {
	color:ff4040;
}	
.clr-green {
	color:green;
}	
.clr-ltgreen {
	color:#a0ffa0;
}	
.clr-dkgreen {
	color:#40ff40;
}	
.clr-blue {
	color:blue;
}	
.clr-black {
	color:black;
}
.clr-white {
	color:white;
}	
.clr-yellow {
	color:yellow;
}	
.clr-grey {
	color:grey;
}	
.clr-ltgrey {
	color:#e0e0e0;
}	
.clr-dkgrey {
	color:#808080;
}	
.clr-pink {
	color:#ff80ff;
}	
.clr-brown {
	color:brown;
}	
.clr-purple {
	color:purple;
}	

/* border colours */
.bclr-teal {
	border-color:#008080;
}	
.bclr-red {
	border-color:red;
}	
.bclr-ltred {
	border-color:#ffa0a0;
}	
.bclr-dkred {
	border-color:ff4040;
}	
.bclr-green {
	border-color:green;
}	
.bclr-ltgreen {
	border-color:#a0ffa0;
}	
.bclr-dkgreen {
	border-color:#40ff40;
}	
.bclr-blue {
	border-color:blue;
}	
.bclr-black {
	border-color:black;
}
.bclr-white {
	border-color:white;
}	
.bclr-yellow {
	border-color:yellow;
}	
.bclr-grey {
	border-color:grey;
}	
.bclr-ltgrey {
	border-color:#e0e0e0;
}	
.bclr-dkgrey {
	border-color:#808080;
}	
.bclr-pink {
	border-color:#ff80ff;
}	
.bclr-brown {
	border-color:brown;
}	
.bclr-purple {
	border-color:purple;
}	

/* background colours */
.bgclr-none {
	background:none;
}	
.bgclr-teal {
	background-color:#008080;
}	
.bgclr-red {
	background-color:red;
}	
.bgclr-ltred {
	background-color:#ffa0a0;
}	
.bgclr-dkred {
	background-color:#ff4040;
}	
.bgclr-green {
	background-color:green;
}	
.bgclr-ltgreen {
	background-color:#a0ffa0;
}	
.bgclr-dkgreen {
	background-color:#40ff40;
}	
.bgclr-blue {
	background-color:#a0a0ff;
}	
.bgclr-black {
	background-color:black;
}
.bgclr-yellow {
	background-color:#ffffa0;
}	
.bgclr-white {
	background-color:white;
}	
.bgclr-grey {
	background-color:#c0c0c0;
}
.bgclr-ltgrey {
	background-color:#e0e0e0;
}
.bg-blur {
	background-color: white;
	opacity: 0.8;
}
.bg-trans {
	opacity: 0.8;
}
.of-s {
	overflow:scroll;
}
.ofx-s {
	overflow-x:scroll;
}
.ofy-s {
	overflow-y:scroll;
}
.of-a {
	overflow:auto;
}
.ofx-a {
	overflow-x:auto;
}
.ofy-a {
	overflow-y:auto;
}
.of-h {
	overflow:hidden;
}
.ofx-h {
	overflow-x:hidden;
}
.ofy-h {
	overflow-y:hidden;
}
.of-v {
	overflow:visible;
}
.ofx-v {
	overflow-x:visible;
}
.ofy-v {
	overflow-y:visible;
}

.flxwrap {
	flex-wrap: wrap;
}

@supports (backdrop-filter: blur(5px)) {
	.bg-blur {
		background: none;
		opacity: 1;
		backdrop-filter: blur(5px);
	}
}
.algn-right {
	text-align:right;
}
.algn-left {
	text-align:left;
}
.algn-center {
	/* don't use in combo with algn-center, because the translations will be overridden */
	position: absolute;
	left: 50%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.algn-vert-center {
	/* don't use in combo with algn-center, because the translations will be overridden */
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.algn-center-xy {
	/* centre both x and y */
	position: absolute;
	left: 50%;
	top: 50%;
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.fb {font-weight:bold}

.small {
	font-size: 0.8em;
}
.big {
	font-size: 1.3em;
}
.txt {
	font-size: inherit;
}
.trim {
	display:inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.alias {
	display:inline-block;
	max-width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.unread {
	color: white;
	background-color:red;
	font-size: 0.9em;
	font-weight:bold;
	border-radius: 5px;
	padding:0 3px;
}
.unread::after {
	content:'new';
}
img.gallery {
	display:inline-block;
	object-fit: cover;
	border:none;
}
img.gallery.teensy {
	width: 20px;
	height: 20px; 
	max-width: 20px;
	max-height: 20px; 
}
img.gallery.tiny {
	width: 30px;
	height: 30px; 
	max-width: 30px;
	max-height: 30px; 
}
img.gallery.small {
	width: 60px;
	height: 60px; 
	max-width: 60px;
	max-height: 60px; 
}
img.gallery.large {
	width: 180px;
	height: 180px; 
	max-width: 180px;
	max-height: 180px; 
}
img.gallery.super {
	width: 400px;
	height: 400px; 
	max-width: 400px;
	max-height: 400px; 
}
img.gallery.mega {
	width: 800px;
	height: 800px; 
	max-width: 800px;
	max-height: 800px; 
}
ul.nolist,ul.nolist li {
	list-style: none;
	list-style-type:none;
}
a.nounder {
	text-decoration:none;
}
.marg5pc {
	margin:5%;
}
.marg10pc {
	margin:10%;
}
.marg0 {
	margin:0;
}
.marg5 {
	margin:5px;
}
.marg10 {
	margin:10px;
}
.marg20 {
	margin:20px;
}
.pad0 {
	padding:0;
}
.pad5pc {
	padding:5%;
}
.pad10pc {
	padding:10%;
}
.pad5 {
	padding:5px;
}
.pad10 {
	padding:10px;
}
.pad20 {
	padding:20px;
}
.rpad10 {
	padding-right:10px;
}
.lpad10 {
	padding-left:10px;
}
.rpad20 {
	padding-right:20px;
}
.lpad20 {
	padding-left:20px;
}
.rmarg20 {
	margin-right:20px;
}
.lmarg20 {
	margin-left:20px;
}
.bspc0 {
	padding-top:0;
}
.bspc5 {
	padding-top:5px;
}
.bspc10 {
	padding-top:10px;
}
.aspc0 {
	padding-bottom:0;
}
.aspc5 {
	padding-bottom:5px;
}
.aspc10 {
	padding-bottom:10px;
}
.tgap5 {
	margin-top:5px;
}
.bgap5 {
	margin-bottom:5px;
}
.lgap5 {
	margin-left:5px;
}
.rgap5 {
	margin-right:5px;
}

.box0 {
	border-width: 0;
}
.box1 {
	border-width: 1px;
}
.box2 {
	border-width: 2px;
}
.box3 {
	border-width: 3px;
}
.box4 {
	border-width: 4px;
}
.box5 {
	border-width: 5px;
}
.box {
	border-style: solid;
}
.dotul {
	border-bottom-style: dotted;
}

.rnd3 {
	border-radius: 3px;
}
.rnd4 {
	border-radius: 4px;
}
.rnd5 {
	border-radius: 5px;
}
.rnd10 {
	border-radius: 10px;
}
.rnd50pc {
	border-radius: 50%;
}
.nowrap {
	white-space: nowrap;
}
.result {
	padding: 4px 2px;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
	background-color: #ffffc0;
	font-size:0.8rem
}

.mask-element {
	display:none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #ffffff;
	opacity: 0.6;
	overflow: hidden;
	z-index:9999999;
}
/*
.collapsible {
  overflow:hidden;
  transition:transform 1s ease-out;
  height:auto;
  transform:scaleY(1); 
  transform-origin:top; 
}
.collapsible.collapsed {
  transform:scaleY(0); 
}
*/

.fader {
	-webkit-animation-duration: 2s;animation-duration: 2s;
	-webkit-animation-fill-mode: both;animation-fill-mode: both;
}

/* full screen image */
.fsimg {
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}
.tshad {
	text-shadow: 2px 2px #000000; 
}
@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0; display:none}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0; display:none}
}

.fade-out {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

@-webkit-keyframes tada {
  from {border: 1px solid red;}
  to {border: 1px solid white;}
}
@keyframes tada {
  from {border: 2px solid red;}
  to {border: 2px solid white;}
}
.wizzBang { animation-name: tada;  animation-duration: 4s; }

.login {
	position:absolute;
	display:inline-block;
	max-width: 100%;
}
.login .col {
	position:relative;
	display:inline-table;
	width:calc(50% - 20px);
	padding:10px;
	margin:0;
}
.login .max {
	position:relative;
	display:inline-table;
	width:calc(100% - 20px);
	padding:10px;
	margin:0;
}
.login .btn {
	text-align: left;
	width: calc(100% - 10px)
}
.login .required-fields .blank {
	display: none;
}
.login.full .required-fields {
	display: block;
}

@media ( max-width :849px) {
	body {
		font-size: 1.25em
	}

	#menu .item {
		position:static;
	}
	#menu .smallhide {
		display:none;
	}
	#menu .drop {
		position:absolute;
		/*display: none;*/
		top: calc(1.5em + 2px);
		left:0;
		display: inline;
		width:100%;
	}

	.main-content .expanded {display: none;}
	header .title_img {
		display: none
	}
	header .title_txt {
		padding-top: 10px;
		display: block
	}
	.expanded {
		display: none
	}
	.main-content .index {
		display: none;
	}
	.main-content .side {
		display: none;
	}
	.main-content .fbcol {
		width: 100%
	}
	.emergentmenu {
		right:0;
	}
	image-container {
		display:none;
	}
	.login {
		top:4%;
		left:4%;
	}
	.login.full {
		width:calc(95vw - 8%);
	}
	.login.half {
		width: calc(95vw - 8%);
	}
	.login .col {
		width:100%;
	}
}

@media ( max-width :600px) {
	.login {
		top:3px;
		left:3px;
	}
	.login.full {
		width:calc(100vw - 6px);
	}
	.login.half {
		width:calc(100vw - 6px);
	}	
	.login .col {
		width:100%;
	}
}

@media ( min-width :850px) {
	header .title_img {
		display: block
	}
	header .title_txt {
		display: none
	}
	#menu .container .drop:hover {
		display: inline;
	}
	#menu .largehide {
		display:none;
	}

	.login {
		position: absolute;
		left: 50%;
		top: 50%;
		-ms-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
	}
	.login.full {
		width:800px
	}
	.login.half {
		width: 400px;
	}
	.login.half .col {
		width:100%;
	}
}