.content::before, .content::after {
    content: " ";
    display: table;
}

.flex-row{
	flex-direction:row;
	padding: 0 14%;
}

.flex-top{margin-top: auto;}
.flex-bottom{	margin-top: auto;}

.section1of3{
    width: 33.33333333%;
		flex-direction:column;
}
.section2of3 {
    width: 66.66666667%;
		background: #000;
		height: 100%;
		position: fixed;
		right: 0;
		min-height: auto;
		text-align:center;
	flex-direction:column;
	justify-content: center;
}

.flex .logo{margin: 40px 0 60px 0;}

.flex form{width:100%}

.title_tagline{
		font-size:28px;
		line-height: 36px;
  color: #ffffff;
  margin:16px 20px 26px 20px;
	text-align:center;
}

.client {
	display:inline-block;
	padding: 4% 2%;
	width:6%;
	vertical-align:middle;
	position: relative;
}
.client img{
	display: table-row;
  vertical-align: middle;
	width: 100%;
	opacity: 0.67;
}

/**/
@media only screen and (max-height:768px) {
	.section1of3 .ojoo-login-box h1{font-size:34px}
}
@media only screen and (max-width:1500px) {
	.section1of3{width: 37%;}
	.section2of3{width: 63%;	}
	.flex .logo {margin-bottom: 10px;}
	.section1of3 .ojoo-login-box h1,
	.section1of3 form{margin-bottom: 0px}
}

@media only screen and (max-width:1024px) {
	.section1of3,
	.section2of3{width:50%}
	.flex .logo{margin: 30px 0 0px 0;}
}

@media only screen and (max-width:768px) {
	body{background:#000000}
	#container{background:#ffffff;}
	.section1of3,
	.section2of3{width:100%}
	.section2of3{position:relative; padding:40px 0 20px 0;}
	.flex, .flex-row{
		display:block;
		flex-direction:row;
	}
	.flex-row{padding:0 28px 28px;}
	.flex .logo{margin: 0px auto; padding:30px 0;}
	.flex h2{text-align:center;}

	.title_tagline{font-size:24px; line-height:34px;}
	.client {
	padding: 4% 5%;
	width:12%;
}
}