$primary: #303F9F
$light-primary: #BBDEFB
$white: #f2f2f2
$divider: #B6B6B6
$error: #D32F2F
$boton: #1976D2
$titulo: #1976D2
$footer: #26C6DA
$links: #BEA3FA
$break-small: 320px
$break-medium: 768px
$break-large: 1200px

$borde: 2px
$font-family: "Roboto", Arial

*
	margin: 0
	padding: 0
	-webkit-box-sizing: border-box
	-moz-box-sizing: border-box
	box-sizing: border-box

body
	height: 100%
	background: $white
	font-family: $font-family
	border-top: 30px solid $primary

img
	width: 100%
	max-width: 200px

.wrap
	width: 90%
	max-width: 500px
	padding: 40px
	margin: auto
	background: #fff
	box-shadow: 0px 0px 3px grey
	.cabecera
		width: 200px
		margin: 0 auto
p.titulo
	text-align: center
	font-family: $font-family Arial
	font-weight: bold
	font-size: 18px
	padding-bottom: 30px
	color: $primary

p.titulo2
	text-align: center
	font-family: $font-family Arial
	font-weight: bold
	font-size: 18px
	color: $primary

p.invalid
	background: #FBD6D5
	max-width: 45%
	text-align: center
	font-family: $font-family Arial
	font-weight: bold
	font-size: 12px
	padding: 8px
	margin: auto
	margin-bottom: 20px
	color: $error

.contenedor-formulario
	width: 100%
	color: $white
	padding: 50px
	.formulario
		width: 100%
		margin: auto
		.input-group
			position: relative
			margin-bottom: 32px
			input[type="text"],
			input[type="password"],
				font-family: $font-family
				font-size: 16px
				color: $primary
				width: 100%
				outline: none
				padding: 15px
				background: none
				border: none
				border-bottom: $borde solid $light-primary
				&:focus,
				&:active
					outline: none
					border-bottom: $borde solid $primary
				&.error
					border-bottom: $borde solid $error
					+ label
						color: $error
			label
				color: $primary
				&.label
					position: absolute
					top: 16px
					left: 0px
					font-size: 16px
					line-height: 16px
					margin-left: 16px
					-webkit-transition: all .3s ease
					-o-transition: all .3s ease
					transition: all .3s ease
					&.active
						top: -12px
						font-size: 12px
						line-height: 12px
						color: $divider
		input[type="submit"]
			background: $primary
			border-radius: 1px
			border: $borde solid $white
			color: #fff
			cursor: pointer
			display: inline-block
			padding: 15px
			width: 100%
			font-family: $font-family
			font-size: 16px
			-webkit-transition: all .3s ease
			-o-transition: all .3s ease
			transition: all .3s ease
			&:hover
				background: $boton
footer
	clear: both
	padding: 10px
	width: 100%
	background: $primary
	margin: auto
	.links
		background: $titulo
	p
		color: $white
		font-family: $font-family
		font-size: 16px
		margin: 0 auto
		text-align: center
		.footer
			font-family: $font-family Arial
			color: $footer
			text-decoration: none
	a:hover
		color: $links

.cabecera
	@media screen and (max-width: $break-medium)
		max-width: 120px
p.titulo
	@media screen and (max-width: $break-medium)
		font-size: 12px
		padding-bottom: 15px

p.titulo2
	@media screen and (max-width: $break-medium)
		font-size: 12px
p.invalid
	@media screen and (max-width: $break-medium)
		font-size: 10px
		padding-top: 5px
		padding-bottom: 15px
.wrap
	@media screen and (max-width: $break-medium)
		width: 100%
.contenedor-formulario
	@media screen and (max-width: $break-medium)
		padding: 30px
	.formulario
		.input-group
			label
				&.label
					@media screen and (max-width: $break-medium)
						font-size: 12px
		input[type="submit"]
			@media screen and (max-width: $break-medium)
				font-size: 12px
footer
	p
		@media screen and (max-width: $break-medium)
			font-size: 12px