body{
	&.recuperar{
		padding: 0;
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;

		section{
			position: relative;
			display: block;
			margin: 0;
			padding: 0;

			&.franja-vertical{
				position: relative;
				display: block;
				margin: 0;
				padding: 50px 40px;
				background: rgba(0, 0, 0, 0.75);
				min-height: 100vh;

			}

			&.logo{
				margin-bottom: 40px;

				h1{
					position: relative;
					display: block;
					margin: 0;
					padding: 0;
					text-align: center;

					img{
						position: relative;
						display: block;
						margin: 0 auto;
						padding: 0;
					}
				}
			}

			&.bienvenido{
				margin-bottom: 25px;

				h2{
					position: relative;
					display: block;
					margin: 0 0 5px 0;
					padding: 0;
					font: 30px/34px @montserrat;
					font-weight: 600;
					color: @blanco;
					text-align: center;
				}

				h3{
					position: relative;
					display: block;
					margin: 0 0 20px 0;
					padding: 0;
					font: 16px/20px @montserrat;
					font-weight: 600;
					color: @dorado;
					text-align: center;
				}

				p{
					position: relative;
					display: block;
					margin: 0;
					padding: 0;
					font: 15px/19px @montserrat;
					font-weight: 500;
					color: @blanco;
					text-align: center;
				}
			}

			&.formulario{

				input{
					position: relative;
					display: block;
					margin: 0 0 1px 0;
					padding: 40px 20px;
					padding: 0 2px;
					height: 80px;
					border: none;
					color: @negro;
					background: @blanco;
					border-radius: 0;
					width: 100%;
					font: 16px/20px @montserrat;
					font-weight: 400;
					text-align: center;

					&.error{
						border-bottom: 3px solid #d94242;
						background: #f5d0d0;
					}

				}

				button{
					position: relative;
					display: block;
					margin: 0;
					padding: 30px 20px;
					border: none;
					background: @dorado;
					color: @blanco;
					text-transform: uppercase;
					width: 100%;
					font: 16px/20px @montserrat;
					font-weight: 600;
					border-radius: 0;

				}

				.error-tooltip{
					position: absolute;
					display: none;
					margin: 0;
					padding: 10px;
					border-radius: 5px;
					background: rgba(217, 66, 66, 0.8);
					top: 30px;
					right: -260px;
					width: 250px;

					&.on{
						display: block;
					}

					&:before{
						content: '';
						position: absolute;
						display: block;
						margin: -6px 0 0 0;
						padding: 0;
						background: url('../images/triangulo-tooltip-error.png') no-repeat 0 0;
						top: 50%;
						left: -6px;
						width: 6px;
						height: 12px;
					}

					p{
						position: relative;
						display: block;
						margin: 0;
						padding: 0;
						font: 14px/18px @montserrat;
						font-weight: 400;
						color: @blanco;
					}
				}
			}
		}
	}
}

@media (max-width: @screen-sm-max) {
	body{
		&.recuperar{
			section{
				&.formulario{
					.error-tooltip{
					    top: -95px;
					    right: 0;
					    left: 0;
					    width: 100%;

					    &:before{
					    	display: none;
					    }
					}

					button{
						font-size: 14px;
						width: 100%;
					}
				}
			}
		}
	}
}