/* RESET  -- http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0; padding: 0;border: 0; font-size: 100%;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} table {border-collapse: collapse;border-spacing: 0;} a {color: inherit; text-decoration:none;} a:active {outline: none;}

html {
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;	
}

body {
	background: #fff;
	font-size: 16px;
	
	font-family: 'Open Sans', sans-serif;
	
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	
  	width: 100%;
	height: 100vh;
	overflow: hidden;
}

ul, li {
	box-sizing: border-box;
}

#cms-login {
	width: 100%;
	height: 100%;
	
	overflow: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.cms-login-container {
	width: 100%;
	height: 100%;
	min-height: 740px;
	position: relative;
}

.cms-split-screen {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	
	width: 100%;
	height: 100%;
}

.cms-split-screen-half {
	
}

.cms-split-screen .cms-split-screen-half:first-child {
	padding: 24px;
	
	flex: 1 1 50%;
	
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.cms-split-screen .cms-split-screen-half:last-child {
	flex: 1 1 50%;
}

.cms-form-container {
	width: 100%;
	max-width: 600px;
	
	padding: 24px;
	
	background: rgba(255, 255, 255, .9);
	box-sizing: border-box;
	
	transition: all .4s cubic-bezier(.5,.2,0,1);
}

.cms-form-branding {
	text-align: center;
	
	padding: 40px;
}

.cms-form-branding img {
	max-width: 100%;
	height: auto;
}

.cms-form-branding-sub {
	text-align: center;
	display: block;
	margin: 16px;
}

.cms-form-wrapper {
	position: relative;
	
	width: 100%;
	height: auto;
}

.cms-form-login {
	/* position: absolute; */
	
	width: 100%;
	
	text-align: center;
}

.cms-form-forgot {
	/* position: absolute; */
	
	width: 100%;
	
	text-align: center;
}

.password-forgot {
	display: block;
	
	padding: 8px;
}

.cms-form-wrapper input {
	width: 100%;
	box-sizing: border-box;
	max-width: 400px;
	
	padding: 20px;
	
	border: 1px #b3b3b3 solid;
	margin: 8px;
	
	transition: all .4s cubic-bezier(.5,.2,0,1);
	outline:0;
    outline:none;
	font-size: inherit;
}

.cms-form-wrapper input[type="submit"] {
	background: #000;
	color: #fff;
	font-weight: bold;
	
	margin-top: 16px;
}

.cms-form-wrapper input[type="submit"]:hover {
	background: #fff;
	color: #000;
}

.cms-form-wrapper input:hover {
  border: 1px #000 solid;
}

.cms-form-wrapper input:focus {
  border: 1px #000 solid;
}

.cms-form-wrapper input:not(:placeholder-shown) {
  border-color: #000;
}

.cms-form-wrapper input:placeholder-shown {
  border-color: #b3b3b3;
}

.cms-form-wrapper input:placeholder-shown:hover {
	border-color: #000;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #808080;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #808080;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #808080;
}
:-moz-placeholder { /* Firefox 18- */
  color: #808080;
}

.cms-form-wrapper input:valid { 
	outline:0;
    outline:none;
	box-shadow:none;
}

.cms-form-wrapper input:required {
    box-shadow:none;
}

.cms-form-wrapper input::placeholder-shown:hover:invalid { 
	box-shadow:none;
    border-color: red;
}

.cms-form-wrapper input.error {
	border-color: red;
}

/*
.cms-form-wrapper input:invalid:hover,
.cms-form-wrapper input:invalid:focus {
	border: 1px #000 solid;
}

.cms-form-wrapper input:invalid:not(:placeholder-shown) {
  border-color: #b3b3b3;
}
*/

.cms-brand-container {
	width: 100%;
	height: 100%;
	background: url('../brands/cms-brands-login.jpg') 0 0;
	background-size: cover;
	
}

.cms-footer {
	position: absolute;
	bottom: 0;
	padding: 24px;
	width: calc(50% + 24px);
	
	box-sizing: border-box;
	
	text-align: center;
}

.cms-footer-list {
	color: #808080;
}

.cms-footer-list li {
	font-size: 0.75rem;
}

.comatool {
	font-weight: bold;
}

.comatool sup {
	position: relative;
	top: -5px;
	left: 2px;
}

.back-to-login {
	display: block;
	margin: 16px;
}

.cms-form-container a {
	transition: all .4s cubic-bezier(.5,.2,0,1);
	color: #808080;
}

.cms-form-container a:hover {
	color: #000;
}

.cms-form-message {
	text-align: center;
}

@media only screen and (max-width: 1024px) {
	.cms-split-screen .cms-split-screen-half:last-child {
		display: none;
	}
	
	.cms-split-screen .cms-split-screen-half:first-child {
		background: url('../brands/cms-brands-login.jpg') 0 0;
		background-size: cover;
	}
	
	.cms-footer {
		width: calc(100% + 24px);
	}
	
	.cms-footer-list {
		color: #fff;
	}
}

@media only screen and (max-width : 480px) {
	.cms-split-screen .cms-split-screen-half:first-child {
		padding: 16px;
	}
	
	.cms-footer {
		padding: 16px;
	}
}