/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Супер-кнопки в редакторе'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Дизайн супер-кнопок, которые вставляются в текстовом редакторе внутри материала, страницы продажи доступа и описания товара в корзине.'; */

/* ----------------- */
/* НАСТРОЙКИ ДИЗАЙНА */
/* ----------------- */

:root {

}

/* ------------------------- */
/* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */
/* ------------------------- */

/* Общие настройки кнопки */

a.my-button-1,
a.my-button-2 {
	display: flex;
    width: fit-content;
    justify-self: center;
    align-items: center;
	font-weight: 700;
	font-size: 20px!important;
	text-decoration: none;
	padding: .8em 1em calc(.8em - 3px);
	border-radius: 8px;
	transition: 0.2s;
}

/* Кнопки на маленьких экранах */

@media only screen and (max-width: 767px) {

a.my-button-1,
a.my-button-2 {
	font-size: 17px!important;
  }
}

/* Общие настройки Иконки */

a.my-button-1:before,
a.my-button-2:before {
    font-family: 'icomoon';
    font-size: 20px;
    vertical-align: bottom;
    margin-right: 10px;
    position: relative;
    top: 2px;
}

/* Иконки на маленьких экранах */

@media only screen and (max-width: 767px) {

a.my-button-1:before,
a.my-button-2:before {
	font-size: 15px!important;
	top: 1px;
  }
}

/* КНОПКА 1 */
/* -------- */

a.my-button-1 {
	color: #ffffff!important;
	background: #0AA0FF;
	/* box-shadow: 0 -3px #7344B4 inset; */
}

a.my-button-1:hover { 
	background: #FF992A;
	color: #ffffff!important;
}

a.my-button-1:active {
	background: #FF992A;
	/* box-shadow: 0 -3px #6C3DAD inset; */
}

/* Иконка 1 */

a.my-button-1:before {
	content: "\f019";
}

/* КНОПКА 2 */
/* -------- */

a.my-button-2 {
	color: #ffffff!important;
	background: #389DE5;
	/* box-shadow: 0 -3px #389DE5 inset; */
}

a.my-button-2:hover { 
	background: #39A2EC;
	color: #ffffff!important;
}

a.my-button-2:active {
	background: #3493D7;
	/* box-shadow: 0 -3px #3493D7 inset; */
}

/* Иконка 2 */

a.my-button-2:before {
	content: "\f07c";
}