/* -- Анимация основной кнопки с заливкой:  
    - при наведении: тень и смещение вверх;
    - при нажатии: уменьшение тени, смещение вниз и смена цвета на более тёмный 
*/
.button-primary .tn-atom:hover {
	box-shadow: 0px 8px 4px 0px rgba(60, 109, 159, 0.35);
}

.button-primary:hover {
	margin-top:-4px;
}

.button-primary:active {
	margin-top:0px;
}

.button-primary .tn-atom:active {
	box-shadow: 0px 4px 4px 0px rgba(60, 109, 159, 0.7);
	background: #0071E6!important;
}



/* -- Анимация основной прозрачной кнопки:
    - при наведении: тень и смещение вверх;
    - при нажатии: уменьшение тени, смещение вниз 
*/
.button-transparent .tn-atom:hover {
	box-shadow: 0px 8px 4px rgba(18, 10, 143, 0.17), inset 0px 8px 4px rgba(18, 10, 143, 0.17);
	text-shadow: 0px 8px 4px rgba(18, 10, 143, 0.25);
}

.button-transparent:hover {
	transform: translateY(-4px);
}

.button-transparent:active {
	transform: translateY(0px);
}

.button-transparent .tn-atom:active {
    box-shadow: 0px 2px 2px rgba(18, 10, 143, 0.50), inset 0px 2px 2px rgba(18, 10, 143, 0.50);
    text-shadow: 0px 2px 2px rgba(18, 10, 143, 0.50);
}