@charset "UTF-8";
/* WriterKey Splash Page */

html {
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:center;
}

html, body{
  height:100%;
}

image {
	width:100%;
	/* height:auto; */
}

a.info {
	color:rgba(78,78,78,1);
	font-size:1.125em;
}

h1 {
    font-family: 'Roboto Slab', serif;
    font-size: 1.5em;
    color: rgb(78,78,78);
    text-align: left;
    margin: -3% 15% 2% 30%;
    font-weight: 300;
}

#section1, #section2 {
	position: relative; 
}

#section1 {
	width:70%;
	background:white;
	height:100%;
	display:inline-block;
	float:left;
}

#section2 {
	width:30%;
	background:url(../img/WK_pattern_square.png) repeat center;
	height:100%;
	display:inline-block;
	box-shadow:inset 100px -20px 100px rgba(0,90,90,0.5); 
}

.inner2 {
   margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.inner {
    margin: auto;
  position: absolute;
  top: 20%; left: 0; right: 0;
  max-width:700px;
  padding:5%;
}


.login-section {
	padding:20px;
}

.row {
	margin-left:-15px;
	margin-right:-15px;
}

.row::after {
   display: table;
  content: " ";
}

[class*="col-"] {
    float: left;
	position: relative;
  min-height: 1px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.col-6:first-child {
	border-right:solid 1px rgb(240,240,240);
	 margin-left:-1px;
}


@media only screen and (max-width: 920px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
	
	.col-6:first-child {
	border-right:none;
	 margin-left:0;
	 	 border-bottom:solid 1px rgb(240,240,240);

}
	
h1 {
    margin: 20px 0px 20px;
    text-align: center;
    font-size: 1.3em;
}

#section1 {
	width:100%;
}

#section2 {
	width:100%;
}

.inner {
    padding: 5%;
    margin-right: auto;
    margin-left: auto;
	top: 0; 
	position:relative;
}
}


a.btn {
	padding:20px;
	border:solid 5px rgb(0,128,119);
	color:rgb(0,128,119);
	display:block;
	font-weight:700;
	text-decoration:none;
	border-radius:40px;
	font-size:1.125em;
	margin: auto;
	min-width: 160px;
	max-width:200px;
}


a.btn:hover, a.btn:focus {
	background:rgb(0,128,119);
	border:solid 5px rgb(0,128,119);
	color:rgb(255,255,255);
}