.modal-open {
	position: relative;
}
.modal.modalcentered {
	text-align: center;
	padding: 0 !important;
	font-size: 0;
	&:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	.modal-dialog {
		display: inline-block;
		text-align: left;
		vertical-align: middle;
		font-size: $font-size-base;
		transform: translate(0,0);
		max-width: calc(100% - 20px);
		@media (min-width: 768px) {
			margin: 0;
		}
	}
}
.modal.fullscreenmobile {
	@media (max-width: $grid-float-breakpoint-max) {
		height: 100%;
		.modal-dialog {
			width: 100%;
			height: 100%;
			margin: 0;
			max-width: 100%;
		}
		.modal-content {
			height: 100%;
			border-radius: 0;
			display: flex;
			flex-direction: column;
			.modal-header {
				flex: 0 0 auto;
			}
			.modal-body {
				flex: 0 1 auto;
				max-height: 100% !important;
				overflow: auto;
			}
		}
	}
}
.modal.modalfullscreen {
	height: 100%;
	.modal-dialog {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 30px;
		max-width: 100%;
		@media (max-width: $screen-md-max) {
			padding: 0;
		}
		@media (min-width: $grid-float-breakpoint) and (orientation: portrait) {
			height: 100%;
		}
	}
	.modal-content {
		height: 100%;
		border-radius: 0;
		display: flex;
		flex-direction: column;
	}
	.modal-header {
		flex: 0 0 auto;
	}
	.modal-body {
		flex: 0 1 auto;
		height: 100% !important;
		max-height: 100% !important;
		overflow: auto;
		padding: 0;
	}
}
.modal-content {
	border: 0;
	@include box-shadow(0 2px 7px rgba(0, 0, 0, 0.12));
	@media (max-width: $screen-xs-max) {
		.close {
			float: left;
		}
	}
}
.modal-header {
	padding: $modal-title-padding;
	//border-bottom: 1px solid $modal-header-border-color;
	border-bottom: 0;
	min-height: ($modal-title-padding + $modal-title-line-height);
	@include clearfix;
}
.modal-header .close {
	margin-top: 0;
	.icon {
		width: 14px;
		height: 14px;
	}
	&.inactive {
		.icon {
			&, & * {
				fill: $colorBordes;
			}
		}
	}
}
.modal-title {
	font-size: 16px;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
	position: relative;
	padding: 30px 15px 30px 15px;
	text-align: center;
	@media (min-width: $grid-float-breakpoint) {
		padding: 30px 60px 30px 60px;
	}
	.modal-header + & {
		padding: 10px 15px 30px 15px;
		@media (min-width: $grid-float-breakpoint) {
			padding: 10px 60px 30px 60px;
		}
	}
	.modal-title {
		color: $brand-grey-dark;
		font-weight: $roboto-light;
		font-size: 20px;
		text-align: center;
		margin-bottom: 20px;
	}
	p {
		font-size: $font-size-large;
		color: $brand-copy-light;
	}
}
@media (min-width: $screen-sm-min) {
	.modal-content {
		@include box-shadow(0 2px 7px rgba(0, 0, 0, 0.12));
	}
}


.modal-form {
	margin: 0 auto;
	@media (min-width: 360px) {
		width: 330px;
	}
}
.modal-button-container {
	margin-top: 30px;
	text-align: center;
	.btn {
		@media (max-width: $grid-float-breakpoint-max) {
			display: block;
			width: 100%;
		}
	}
}


//Modales con textos largos
.longtextmodal {
	.modal-header {
		background: #fff;
		z-index: 31;
	}
	.modal-body {
		text-align: left;
		font-size: $font-size-base;
		p {
			font-size: $font-size-base;
			color: $brand-grey-dark;
			@media (min-width: $grid-float-breakpoint) {
				color: $brand-copy-light;
			}
		}
	}
	.modal-title {
		font-size: 18px;
	}
	@media (max-width: $grid-float-breakpoint-max) {
		.modal-title {
			margin-left: 25px;
		}
	}
	.modal-header+.modal-body {
		margin-top: 0;
		z-index: 29;
		background: #fff;
		@media (max-width: $grid-float-breakpoint-max) {
			padding: 0 15px 30px;
		}
		@media (min-width: $grid-float-breakpoint) {
			padding: 0 30px 30px;
		}
		&::before,
		&::after {
			content: '';
			display: block;
		}

		&::before {
			background: linear-gradient(rgba(0, 0, 0, 0.12) 0, rgba(255,255,255,0));
			height: 10px;
			position: sticky;
			width: auto;
			top: 0;
			z-index: 30;
			margin-left: 0;
			margin-right: 0;
			@media (min-width: $grid-float-breakpoint) {
				margin-left: -30px;
				margin-right: -30px;
			}
		}
		&::after {
			background: #fff;
			position: absolute;
			height: 10px;
			top: 0;
			left: 0;
			right: 0;
			z-index: 30;
		}
	}
}