:root {
  --input-padding-x: .75rem;
  --input-padding-y: .75rem;
}

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background: url(../images/fondo.png) right center #47a27b;
}
img {
	max-width: 100%;
}
.clear {
	clear: both;
}
.logo {
	width: 300px;
}
.form-signin {
  width: 90%;
  max-width: 420px;
  padding: 15px;
  margin: 0 auto;
}

.form-label-group,
.form-label-group-content {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group-content {
	float: left;
    width: calc(100% - 50px);
    position: relative;
}

.form-label-group > input,
.form-label-group > label,
.form-label-group-content > input,
.form-label-group-content > label  {
  padding: var(--input-padding-y) var(--input-padding-x);
  cursor: text;
}

.form-label-group > label,
.form-label-group-content > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0;
  transition: all .1s ease-in-out;
}

.form-label-group > input,
.form-label-group-content > input {
  border-radius: 0;
}
.form-label-group input::-webkit-input-placeholder,
.form-label-group-content input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder,
.form-label-group-content input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder,
.form-label-group-content input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder,
.form-label-group-content input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder,
.form-label-group-content input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown),
.form-label-group-content input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label,
.form-label-group-content input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}
.form-label-group .square {
	float: left;
	width: 50px;
	height: 50px;
	background: #b42772;
	color: #fff;
	text-align: center;
	padding: 15px;
	cursor: pointer;
	transition: 0.2s ease-in-out background;
}
.form-label-group .fa {
	font-size: 20px;
}
.btn-primary, .btn-secondary {
	border-radius: 0;
	transition: 0.2s ease-in-out background;
	font-size: 1rem;
}
.btn-primary {
	background: #2271b3;
}
.btn-primary:hover {
	background: #2f8ede;
}

#iniciarSesion {
    width: calc(100% - 143px);
	float: left;
    margin-left: 30px;
}

form-label-group .square:hover {
	background: #982261;
}
.checkbox label {
	width: 110px;
    float: left;
    margin: 9px 0 9px 3px;
	cursor: pointer;
	font-size: 0.9rem;
}
.checkbox input {
	cursor: pointer;
	transform: scale(1.25);
}
.footer-signin p {
	float: right;
}
.footer-signin p:first-child {
	float: left;
}

.footer-signin p a {
	color: #333333;
	text-decoration: none;
	transition: 0.2s ease-in-out color;
}
.footer-signin p a:hover {
	color: #696969;
}
@media screen and (max-width: 600px) {
	body {
		background: url(../images/fondo-movil.jpg) center center #47a27b;
	}
}