:root {
	--btn3d-click-gap: 4px;
	--btn3d-border-width:2px;
	--btn3d-shadow: 0.2;

	--btn3d-white :#fff;
	--btn3d-border-white :#ebebeb;
	--btn3d-bottom-white :#f5f5f5;

	--btn3d-blue :#1cb0f6;
	--btn3d-border-blue :rgb(74, 159, 255);
	--btn3d-bottom-blue :#0588c5;

	--btn3d-primary :#ff761b;
	--btn3d-border-primary :#fd6a09;
	--btn3d-bottom-primary :#fd6a09;

	--btn3d-secondary :#f9f9f9;
	--btn3d-border-secondary :#ebebeb;
	--btn3d-bottom-secondary :#BEBEBE;

	--btn3d-foton-secondary :#fff3e4;
	--btn3d-border-foton-secondary :#fff0de;
	--btn3d-bottom-foton-secondary :#ffc59f;

	--btn3d-cyan:#c2f2f3;
	--btn3d-border-cyan:#c2f2f3;
	--btn3d-bottom-cyan:#91cacc;

	--btn3d-foton-secondary-curriculum :#ffffff;
	--btn3d-border-foton-secondary-curriculum :#ffffff;
	--btn3d-bottom-foton-secondary-curriculum :#BEBEBE;

	--btn3d-success :#17c653;
	--btn3d-border-success :#0ad14c;
	--btn3d-bottom-success :#04b440;

	--btn3d-info : #7239ea;
	--btn3d-border-info : #814bf7;
	--btn3d-bottom-info : #5014d0;

	--btn3d-danger : #f8285a;
	--btn3d-border-danger : #fc3563;
	--btn3d-bottom-danger : #d81a48;

	--btn3d-warning : #f6c000;
	--btn3d-border-warning : #fccb1d;
	--btn3d-bottom-warning : #dead00;


	--btn3d-magick : #f479d5;
	--btn3d-border-magick : #f479d5;
	--btn3d-bottom-magick : #d950b9;
}

.thickness-sm {
	--btn3d-click-gap: 2px;
}

.thickness-lg {
	--btn3d-click-gap: 12px;
}

.card-threed{
	position: relative !important;
	top: -6px !important;
}
.btn {
	position: relative ;
	top: -6px ;
	border: 0 !important;
	transition: all 40ms linear !important;
	border-radius: 12px;
	font-weight: 700 !important;
}

.btn:hover{
	opacity: 0.9 !important;
	color: white;
}
.btn:active:focus,
.btn:focus:hover,
.btn:focus {
	-moz-outline-style: none !important;
	outline: medium none !important;
	opacity: 0.8 !important;
}

.btn:active,
.btn.active {
	top: calc((var(--btn3d-click-gap) - 6px)) !important;
}

.btn-cyan {
	color: white;
	box-shadow: 0 0 0 1px var(--btn3d-border-cyan) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-cyan), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 0px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-cyan) !important;
}

.btn.btn-cyan:active,
.btn.btn-cyan.active {
	box-shadow: 0 0 0 1px var(--btn3d-border-cyan) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 0px 0px 0px rgba(0, 0, 0, 0.3) !important;
	background-color: var(--btn3d-cyan) !important;
}

.btn-foton-secondary {
	color: white;
	box-shadow: 0 0 0 1px var(--btn3d-border-foton-secondary) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-foton-secondary), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 0px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-foton-secondary) !important;
}

.btn.btn-foton-secondary:active,
.btn.btn-foton-secondary.active {
	box-shadow: 0 0 0 1px var(--btn3d-border-foton-secondary) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 0px 0px 0px rgba(0, 0, 0, 0.3) !important;
	background-color: var(--btn3d-foton-secondary) !important;
}


.btn-foton-secondary-curriculum {
	color: white;
	box-shadow: 0 0 0 1px var(--btn3d-border-foton-secondary-curriculum) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-foton-secondary-curriculum), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 0px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-foton-secondary-curriculum) !important;
}


.btn.btn-primary {
	color: white;
	box-shadow: 0 0 0 1px var(--btn3d-border-primary) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-primary), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 0px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-primary) !important;
}
.btn.btn-primary:hover{
	background-color: var(--btn3d-primary) !important;
}

.btn-check:active+.btn.btn-primary, .btn-check:checked+.btn.btn-primary, .btn.btn-primary.active, .btn.btn-primary.show, 
.btn.btn-primary:active:not(.btn-active), .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .show>.btn.btn-primary {
	background-color: var(--btn3d-primary) !important;
}

.btn.btn-primary:active,
.btn.btn-primary.active {
	box-shadow: 0 0 0 1px var(--btn3d-border-primary) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 0px 0px 0px rgba(0, 0, 0, 0.3) !important;
	background-color: var(--btn3d-primary) !important;
}

.btn-blue {
	color: white;
	box-shadow: 0 0 0 1px var(--btn3d-border-blue) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-blue), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 0px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-blue) !important;
}

.btn.btn-blue:active,
.btn.btn-blue.active {
	color: white;
	box-shadow: 0 0 0 1px var(--btn3d-border-blue) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 0px 0px 0px rgba(0, 0, 0, 0.3) !important;
	background-color: var(--btn3d-blue) !important;
}


.btn-white {
	color: #666666;
	box-shadow: 0 0 0 1px var(--btn3d-border-white) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.10) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-white), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 1px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-white) !important;
}

.btn.btn-white:active,
.btn.btn-white.active {
	color: #666666 !important;
	box-shadow: 0 0 0 1px var(--btn3d-border-white) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1) !important;
	background-color: var(--btn3d-white) !important;
}
.btn-white:hover{
	color: #666666 !important;
}

.btn-secondary {
	color: #666666 !important;
	box-shadow: 0 0 0 1px var(--btn3d-border-secondary) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.10) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-secondary), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 1px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-secondary) !important;
}

.btn.btn-secondary:active,
.btn.btn-secondary.active {
	color: #666666 !important;
	box-shadow: 0 0 0 1px var(--btn3d-border-secondary) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1) !important;
	background-color: var(--btn3d-secondary) !important;
}

.btn-success {
	box-shadow: 0 0 0 1px var(--btn3d-border-success) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-success), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 0px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-success) !important;
}

.btn.btn-success:active,
.btn.btn-success.active {
	box-shadow: 0 0 0 1px var(--btn3d-border-success) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3) !important;
	background-color: var(--btn3d-success) !important;
	color: rgb(0, 0, 0) !important;
}

.btn-info {
	box-shadow: 0 0 0 1px var(--btn3d-border-info) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-info), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 1px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-info) !important;
}

.btn.btn-info:active,
.btn.btn-info.active {
	box-shadow: 0 0 0 1px var(--btn3d-border-info) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3) !important;
	background-color: var(--btn3d-info) !important;
}

.btn-warning {
	box-shadow: 0 0 0 1px var(--btn3d-warning) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-warning), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 1px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-warning) !important;
}

.btn.btn-warning:active,
.btn.btn-warning.active {
	box-shadow: 0 0 0 1px var(--btn3d-warning) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3) !important;
	background-color: var(--btn3d-warning) !important;
}

.btn-danger {
	box-shadow: 0 0 0 1px var(--btn3d-border-danger) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-danger), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 1px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-danger) !important;
}

.btn.btn-danger:active,
.btn.btn-danger.active {
	box-shadow: 0 0 0 1px var(--btn3d-border-danger) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3) !important;
	background-color: var(--btn3d-danger) !important;
}

.btn-magick {
	color: #fff !important;
	box-shadow: 0 0 0 1px var(--btn3d-border-magick) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 var(--btn3d-click-gap) 0 0 var(--btn3d-bottom-magick), 0 var(--btn3d-click-gap) var(--btn3d-click-gap) 1px rgba(0, 0, 0, var(--btn3d-shadow)) !important;
	background-color: var(--btn3d-magick) !important;
}

.btn.btn-magick:active,
.btn.btn-magick.active {
	box-shadow: 0 0 0 1px var(--btn3d-border-magick) inset, 0 0 0 var(--btn3d-border-width) rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3) !important;
	background-color: var(--btn3d-magick) !important;
}