/* Modals
----------------------------------------------------------*/

.modal.fade .modal-dialog {
	@include translate(0,-30px);
}
.modal.fade.in .modal-dialog {
	@include translate(0,0);
}

.modal-content {
	@include border-radius(0);
	@include box-shadow(0px 0px 25px 0px rgba(0,0,0,.3));
	border: none;
}

.modal-header {
	padding: 20px;
	> .close {
		margin-top: 7px;
	}
}

.modal-dialog, .modal-content {
	> .close {
		position: absolute;
		top: 20px;
		right: 20px;
	}
}

.modal-body {
	padding: 20px;
}

.modal-footer {
	padding: 20px;
}

.modal-md {
	width: 762px;

	@media #{$screen-sm} {
		width: 600px;
	}

	@media #{$screen-xs} {
		width: 90%;
	}
}

.modal-backdrop.in {
	@include opacity(0.3);
}

.modal-content.dark {
	.modal-header, .modal-footer {
		border-color: $color-line-light;
	}
}

/* Modal Bottom */

.modal-bottom {
	top: auto;

	.modal-content {
		@include box-shadow(0px 0px 15px 0px rgba(0,0,0,.3));
	}

	.modal-dialog {
		margin: 20px 10px 10px;
		width: auto;

		.close {
			top: 50%;
			@include translate3d(0,-50%,0);
		}
	}
	.modal-body {
		padding-right: 40px;
	}

	&.fade .modal-dialog {
		@include translate(0,30px);
	}

	&.fade.in .modal-dialog {
		@include translate(0,0);
	}
}

.modal-at-bottom.modal-open {
	overflow: auto;
}

/* Modal Video */

.modal-video {
    text-align: center;

    @media #{$screen-sm} {
    	text-align: left;
    }

	iframe {
		width: 100%;
		display: block;
	}
	&:before {
	    display: inline-block;
	    vertical-align: middle;
	    content: " ";
	    height: 100%;

	    @media #{$screen-sm} {
	    	display: none;
	    	height: auto;
	    }
	}
	.modal-dialog {
		display: inline-block;
		text-align: left;
		vertical-align: middle;
	}
}