﻿.btn-3d-blue {
	top: 0;
	left: 0;
	-moz-transition-property: left, top, box-shadow;
	-o-transition-property: left, top, box-shadow;
	-webkit-transition-property: left, top, box-shadow;
	transition-property: left, top, box-shadow;
	-moz-transition-duration: 0.05s;
	-o-transition-duration: 0.05s;
	-webkit-transition-duration: 0.05s;
	transition-duration: 0.05s;
	-moz-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-o-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	position: relative;
	background: #002664;
	box-shadow: 0.4px 0.8px 0 #001a45, 0.8px 1.6px 0 #001840, 1.2px 2.4px 0 #00163b, 1.6px 3.2px 0 #001536, 2px 4px 0 #001331;
	border: 1px solid #002664;
	outline: none !important;
	border-radius: 3px;
	color: white;
}

	.btn-3d-blue:hover, .btn-3d-blue:focus, .btn-3d-blue:active {
		border-color: #002664;
		background: #002664;
	}

	.btn-3d-blue:hover, .btn-3d-blue:focus {
		text-decoration: underline;
	}

	.btn-3d-blue:active, .btn-3d-blue.pressed {
		left: 2px;
		top: 4px;
		box-shadow: none;
	}

	.btn-3d-blue:hover, .btn-3d-blue:focus {
		color: white;
	}

.btn-3d-green {
	top: 0;
	left: 0;
	-moz-transition-property: left, top, box-shadow;
	-o-transition-property: left, top, box-shadow;
	-webkit-transition-property: left, top, box-shadow;
	transition-property: left, top, box-shadow;
	-moz-transition-duration: 0.05s;
	-o-transition-duration: 0.05s;
	-webkit-transition-duration: 0.05s;
	transition-duration: 0.05s;
	-moz-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-o-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	position: relative;
	background: #70A489;
	box-shadow: 0.4px 0.8px 0 #5f967a, 0.8px 1.6px 0 #5d9377, 1.2px 2.4px 0 #5b9075, 1.6px 3.2px 0 #598d72, 2px 4px 0 #588a70;
	border: 1px solid #70A489;
	outline: none !important;
	border-radius: 3px;
}

	.btn-3d-green:hover, .btn-3d-green:focus, .btn-3d-green:active {
		border-color: #70A489;
		background: #70A489;
	}

	.btn-3d-green:hover, .btn-3d-green:focus {
		text-decoration: underline;
	}

	.btn-3d-green:active, .btn-3d-green.pressed {
		left: 2px;
		top: 4px;
		box-shadow: none;
	}

.btn-3d-red {
	top: 0;
	left: 0;
	-moz-transition-property: left, top, box-shadow;
	-o-transition-property: left, top, box-shadow;
	-webkit-transition-property: left, top, box-shadow;
	transition-property: left, top, box-shadow;
	-moz-transition-duration: 0.05s;
	-o-transition-duration: 0.05s;
	-webkit-transition-duration: 0.05s;
	transition-duration: 0.05s;
	-moz-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-o-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	position: relative;
	background: #A71930;
	box-shadow: 0.4px 0.8px 0 #8c1528, 0.8px 1.6px 0 #881427, 1.2px 2.4px 0 #841426, 1.6px 3.2px 0 #7f1325, 2px 4px 0 #7b1223;
	border: 1px solid #A71930;
	outline: none !important;
	border-radius: 3px;
	color: white;
}

	.btn-3d-red:hover, .btn-3d-red:focus, .btn-3d-red:active {
		border-color: #A71930;
		background: #A71930;
	}

	.btn-3d-red:hover, .btn-3d-red:focus {
		text-decoration: underline;
	}

	.btn-3d-red:active, .btn-3d-red.pressed {
		left: 2px;
		top: 4px;
		box-shadow: none;
	}

	.btn-3d-red:hover, .btn-3d-red:focus {
		color: white;
	}

.btn-3d-orange {
	top: 0;
	left: 0;
	-moz-transition-property: left, top, box-shadow;
	-o-transition-property: left, top, box-shadow;
	-webkit-transition-property: left, top, box-shadow;
	transition-property: left, top, box-shadow;
	-moz-transition-duration: 0.05s;
	-o-transition-duration: 0.05s;
	-webkit-transition-duration: 0.05s;
	transition-duration: 0.05s;
	-moz-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-o-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	position: relative;
	background: #ECC182;
	box-shadow: 0.4px 0.8px 0 #e8b467, 0.8px 1.6px 0 #e7b263, 1.2px 2.4px 0 #e7af5f, 1.6px 3.2px 0 #e6ad5a, 2px 4px 0 #e5ab56;
	border: 1px solid #ECC182;
	outline: none !important;
	border-radius: 3px;
}

	.btn-3d-orange:hover, .btn-3d-orange:focus, .btn-3d-orange:active {
		border-color: #ECC182;
		background: #ECC182;
	}

	.btn-3d-orange:hover, .btn-3d-orange:focus {
		text-decoration: underline;
	}

	.btn-3d-orange:active, .btn-3d-orange.pressed {
		left: 2px;
		top: 4px;
		box-shadow: none;
	}

.btn-3d-skyblue {
	top: 0;
	left: 0;
	-moz-transition-property: left, top, box-shadow;
	-o-transition-property: left, top, box-shadow;
	-webkit-transition-property: left, top, box-shadow;
	transition-property: left, top, box-shadow;
	-moz-transition-duration: 0.05s;
	-o-transition-duration: 0.05s;
	-webkit-transition-duration: 0.05s;
	transition-duration: 0.05s;
	-moz-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-o-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	position: relative;
	background: #9BB2CE;
	box-shadow: 0.4px 0.8px 0 #86a2c4, 0.8px 1.6px 0 #83a0c2, 1.2px 2.4px 0 #809dc1, 1.6px 3.2px 0 #7c9abf, 2px 4px 0 #7998bd;
	border: 1px solid #9BB2CE;
	outline: none !important;
	border-radius: 3px;
}

	.btn-3d-skyblue:hover, .btn-3d-skyblue:focus, .btn-3d-skyblue:active {
		border-color: #9BB2CE;
		background: #9BB2CE;
	}

	.btn-3d-skyblue:hover, .btn-3d-skyblue:focus {
		text-decoration: underline;
	}

	.btn-3d-skyblue:active, .btn-3d-skyblue.pressed {
		left: 2px;
		top: 4px;
		box-shadow: none;
	}

.btn-3d-gray {
	top: 0;
	left: 0;
	-moz-transition-property: left, top, box-shadow;
	-o-transition-property: left, top, box-shadow;
	-webkit-transition-property: left, top, box-shadow;
	transition-property: left, top, box-shadow;
	-moz-transition-duration: 0.05s;
	-o-transition-duration: 0.05s;
	-webkit-transition-duration: 0.05s;
	transition-duration: 0.05s;
	-moz-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-o-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	-webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	position: relative;
	background: gray;
	box-shadow: 0.4px 0.8px 0 #717171, 0.8px 1.6px 0 #6e6e6e, 1.2px 2.4px 0 #6c6c6c, 1.6px 3.2px 0 dimgray, 2px 4px 0 #676767;
	border: 1px solid gray;
	outline: none !important;
	border-radius: 3px;
	color: white;
}

	.btn-3d-gray:hover, .btn-3d-gray:focus, .btn-3d-gray:active {
		border-color: gray;
		background: gray;
	}

	.btn-3d-gray:hover, .btn-3d-gray:focus {
		text-decoration: underline;
	}

	.btn-3d-gray:active, .btn-3d-gray.pressed {
		left: 2px;
		top: 4px;
		box-shadow: none;
	}
