/* Transitions */
.slide
{
	&.left
	{
		.transition(.6s ease-in-out left);
		&.dlg /* Stands for the dialog that is opening or closing */
		{
			&.open
			{
				left:100%;
				&.end {left:0px;}
			}
			&.close
			{
				left:0px;
				&.end {left:100%;}
			}
		}
		&.rpl /* Stands for the element that the dialog is replacing */
		{
			&.open
			{
				left:0px;
				&.end{left:-100%;}
			}
			&.close
			{
				left:-100%;
				&.end {left:0px}
			}
		}
	}
	&.up
	{
		.transition(.6s ease-in-out top);
		&.dlg /* Stands for the dialog that is opening or closing */
		{
			&.open
			{
				top:100%;
				&.end {top:0px;}
			}
			&.close
			{
				top:0px;
				&.end {top:100%;}
			}
		}
		&.rpl /* Stands for the element that the dialog is replacing */
		{
			&.open
			{
				top:0px;
				&.end{top:-100%;}
			}
			&.close
			{
				top:-100%;
				&.end {top:0px}
			}
		}
	}
}

.modal-header
{
	position:relative;
	button.close
	{
		position:absolute;
		top:0px;
		right:7px;
	}
}