@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html, body {
	height : 100%;
	padding: 0;
	margin: 0;
}

body{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}

.outer {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}
.middle {
	display: table-cell;
	vertical-align: middle;
}
.inner {
	text-align: center;
	width: auto;
	padding: 0 15px;
}

#range1 {
	background: url("img/vertical_cloth.png") repeat left top;
	height: 100%;
	min-height: 400px;
}

#range2 {
	background : #29475f;
	height: 100%;
	min-height: 400px;
}

#range3 {
	background: url("img/maxresdefault.jpg") no-repeat left top;
	height: 100%;
	min-height: 400px;
}

#range4 {
	background: rgba(212,228,239,1);
	background: -moz-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(212,228,239,1)), color-stop(100%, rgba(134,174,204,1)));
	background: -webkit-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
	background: -o-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
	background: -ms-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
	background: linear-gradient(to right, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=1 );
	height: 100%;
	min-height: 400px;
}

#range5 {
	background: rgba(77, 56, 75, 1);
	background: -moz-linear-gradient(left, rgba(77, 56, 75, 1) 0%, rgba(36, 54, 90, 1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(77, 56, 75, 1)), color-stop(100%, rgba(36, 54, 90, 1)));
	background: -webkit-linear-gradient(left, rgba(77, 56, 75, 1) 0%, rgba(36, 54, 90, 1) 100%);
	background: -o-linear-gradient(left, rgba(77, 56, 75, 1) 0%, rgba(36, 54, 90, 1) 100%);
	background: -ms-linear-gradient(left, rgba(77, 56, 75, 1) 0%, rgba(36, 54, 90, 1) 100%);
	background: linear-gradient(to right, rgba(77, 56, 75, 1) 0%, rgba(36, 54, 90, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d384b', endColorstr='#24365a', GradientType=1 );
	height: 100%;
	min-height: 400px;
}

#range1 .login-wr {
	position: relative;
	margin: 0 auto;
	background: #ecf0f1;
	max-width: 350px;
	border-radius: 5px;
	border-top: 4px solid #e74c3c;
	box-shadow: 3px 3px 10px #333;
	padding: 15px;
}

#range1 h2 {
	text-align: center;
	font-weight: 200;
	font-size: 2em;
	margin-top: 10px;
	color: #34495e;
}

#range1 .form {
	padding-top: 20px;
	text-align: center;
}

#range1 input[type="text"],
#range1 input[type="password"],
#range1 button {
	width: 80%;
	margin-bottom: 25px;
	height: 40px;
	border-radius: 5px;
	outline: 0;
	-moz-outline-style: none;
}

#range1 input[type="text"],
#range1 input[type="password"] {
	border: 1px solid #bbb;
	padding: 0 0 0 10px;
	font-size: 14px;
}

#range1 a {
	text-align: center;
	font-size: 12px;
	color: #3498db;
}

#range1 button {
	background: #e74c3c;
	border:none;
	color: white;
	font-size: 18px;
	font-weight: 200;
	cursor: pointer;
	transition: box-shadow .4s ease;
}