/* _modals.css --------------- */

/* Show modal animation -----------------*/
@-webkit-keyframes showModal {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.5) translate3d(0, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1) translate3d(0, 0, 0);
	}
}

@-moz-keyframes showModal {
	0% {
		opacity: 0;
		-moz-transform: scale(0.5) translate3d(0, 0, 0);
	}
	100% {
		opacity: 1;
		-moz-transform: scale(1) translate3d(0, 0, 0);
	}
}

@-ms-keyframes showModal {
	0% {
		opacity: 0;
		-ms-transform: scale(0.5) translate3d(0, 0, 0);
	}
	100% {
		opacity: 1;
		-ms-transform: scale(1) translate3d(0, 0, 0);
	}
}

@keyframes showModal {
	0% {
		opacity: 0;
		transform: scale(0.5) translate3d(0, 0, 0);
	}
	100% {
		opacity: 1;
		transform: scale(1) translate3d(0, 0, 0);
	}
}

/* Show mask animation -----------------*/
@-webkit-keyframes showMask {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes showMask {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-ms-keyframes showMask {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes showMask {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/* Hide scrollbars on doc ---------------- */
body.show { overflow:hidden; }

/* Overlay ---------------- */
#mask { position:fixed; top:0; left:0; right:0; bottom:0; z-index:800; display:none; overflow-y:scroll;
	background: #000;
	background: rgba(0,0,0,0.95);
	background: -webkit-radial-gradient(50% 50%, ellipse closest-corner, rgba(40,40,40,0.85) 1%, rgba(0,0,0,0.95) 100%);
	background: -moz-radial-gradient(50% 50%, ellipse closest-corner, rgba(40,40,40,0.85) 1%, rgba(0,0,0,0.95) 100%);
	background: -ms-radial-gradient(50% 50%, ellipse closest-corner, rgba(40,40,40,0.85) 1%, rgba(0,0,0,0.95) 100%);
	background: radial-gradient(50% 50%, ellipse closest-corner, rgba(40,40,40,0.85) 1%, rgba(0,0,0,0.95) 100%);
	filter: alpha(opacity = 95);
}

/* modal ---------------- */
.modal { position:absolute; left:50%; top:50%; padding:50px 0; margin-left:-185px; margin-top:-265px; z-index:1000; width:370px; display:none; }
.modal .modal-inner { background:#fff;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-ms-border-radius:8px;
	border-radius:8px;

	-webkit-box-shadow:0 5px 20px rgba(0,0,0,.4);
    -moz-box-shadow:0 5px 20px rgba(0,0,0,.4);
    -ms-box-shadow:0 5px 20px rgba(0,0,0,.4);
    box-shadow:0 5px 20px rgba(0,0,0,.4);
}
.modal h2 { background-color:#8aba56; color:#fff; text-align:center; padding:15px; font-size:22px; position:relative; font-weight:500;
	-webkit-border-top-left-radius:7px;
	-webkit-border-top-right-radius:7px;

	-moz-border-radius-topleft:7px;
	-moz-border-radius-topright:7px;

	-ms-border-top-left-radius:7px;
	-ms-border-top-right-radius:7px;

	border-top-left-radius:7px;
	border-top-right-radius:7px;
}
.modal h2 a.cancel { position:absolute; right:12px; top:16px; width:24px; color:rgba(255,255,255,.5); text-decoration:none; font-weight:normal; }
.modal .content { padding:15px 30px 25px 25px; text-align:center; }
.modal .content p { color:#777; padding:.5em; text-align:center; line-height:120%; font-size:15px; }
.modal .content a { color:#f46944; }
.modal .content strong { color:#555; }
.modal .content .alert { padding:15px; z-index:20; top:0; left:0; right:0; position:relative; margin-bottom:.5em !important; }
.modal .actions { padding:15px; background-color:#eee; text-align:center; overflow:hidden;
	-webkit-border-bottom-left-radius:7px;
	-webkit-border-bottom-right-radius:7px;

	-moz-border-radius-bottomleft:7px;
	-moz-border-radius-bottomright:7px;

	-ms-border-bottom-left-radius:7px;
	-ms-border-bottom-right-radius:7px;

	border-bottom-left-radius:7px;
	border-bottom-right-radius:7px;
}
.modal .actions .button { font-size:16px; display:inline-block; float:left; 
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	box-shadow:none;
}
.modal .actions .button.secondary { background-color:#fff; color:#888; border:1px solid #eee; float:right; }

.modal a.button { font-size:17px; display:inline-block !important; margin-top:14px; color:#fff; padding:7px 25px; }

/* Fieldsets ---------------- */
.modal .content fieldset { border:none; padding:15px 0; position:relative; border-bottom:1px solid #eee; margin-bottom:10px; }
.modal .content > fieldset:last-child { border-bottom:0; padding-bottom:0; margin-bottom:0; }
.modal .content .alert { margin-bottom:1em; }
.modal .content fieldset .field .instructions { font-size:12px; color:#999; line-height:130%; }

/* Validation ----------------- */
.modal form .field label.error { left:109%; width:180px; top:2px; }
.modal form .field label.error.show { left:95%; }
.modal form .field label.error:after { content:''; position:absolute; left:-9px; top:6px; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #db3232; z-index:100; }

.modal form .saving { background-color:#ccc; }
.modal form .saved { background-color:#54b660; position:relative; }
.modal form .saved:after { content:'Saved'; top:10px; left:110%; font-size:15px; color:#aaa; position:absolute; }

/* Show modals ---------------- */
.modal.show { display:block; 
	-webkit-animation-name: showModal;
	-webkit-animation-duration:400ms;
	-webkit-animation-timing-function:ease;

	-moz-animation-name: showModal;
	-moz-animation-duration:400ms;
	-moz-animation-timing-function:ease;

	-ms-animation-name: showModal;
	-ms-animation-duration:400ms;
	-ms-animation-timing-function:ease;

	animation-name: showModal;
	animation-duration:400ms;
	animation-timing-function:ease;
}
#mask.show { display:block;
	-webkit-animation-name: showMask;
	-webkit-animation-duration:400ms;
	-webkit-animation-timing-function:ease;

	-moz-animation-name: showMask;
	-moz-animation-duration:400ms;
	-moz-animation-timing-function:ease;

	-ms-animation-name: showMask;
	-ms-animation-duration:400ms;
	-ms-animation-timing-function:ease;

	animation-name: showMask;
	animation-duration:400ms;
	animation-timing-function:ease;
}