/**
 * ...
 *
 *
 */



/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : База (На основе bootstrap 4.4.1 + мои старые bs3).
 *
 * -----------------------------------------------------------------------------
 */

[role="button"] {
    cursor: pointer;
}

.btn {
    display: inline-block;

    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;

    border-style: solid;
    border-color: transparent;

    background-color: transparent;

    cursor: pointer;

    -ms-touch-action: manipulation;
        touch-action: manipulation; /* Одиночные нажатия будут выполняться без задержки */

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* -!!!

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none !important;
    }
}
*/

.btn:hover {
    text-decoration: none;
}

.btn:focus, .btn.focus {
    outline: 0;
}

/* --- Неактиваня кнопка + Кнопка в неактивном fieldset. --- */

/*

.btn:disabled, 
.btn.disabled {
    opacity: 0.65;
}

*/

a.btn.disabled,
fieldset:disabled a.btn {
    pointer-events: none;
    cursor: not-allowed; /* Не имеет смысла при отключенных pointer-events */
}

/**
 * Блок-кнопки.
 * -----------------------------------------------------------------------------
 */


.btn-block {
    display: block;
    width: 100%;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
    width: 100%;
}

/**
 * Кнопки-ссылки.
 * -----------------------------------------------------------------------------
 */

/* - Это моё.

.btn-link {
    display: inline;
    
    margin: 0;
    padding: 0;
    
    border: none;
    background: transparent;
    
    font-size: inherit;
    font-weight: inherit;
    
    text-transform: inherit;
    
    color: inherit;
}

*/


.btn-link {
    display: inline;
    
    margin: 0;
    padding: 0;
    
    border: none;
    background: transparent;
    
    font-size: inherit;
    font-weight: 700;
    
    text-transform: none;
    text-decoration: underline;
    
    color: var(--color-blue);
    
    cursor: pointer;
}

.btn-link:hover {
    text-decoration: none;
}

/* - Это бутсраповское (версия 4.).

.btn-link {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}

.btn-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.btn-link:focus, 
.btn-link.focus {
  text-decoration: underline;
  box-shadow: none;
}

.btn-link:disabled, 
.btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

*/

/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : Тема : Размеры.
 *
 * -----------------------------------------------------------------------------
 */

.btn {
    padding: 0 10px;
    
    line-height: 38px;
    font-size: 14px;  
    
    border-width: 2px;
    border-radius: 3px;
}

.btn-lg {
    padding: 0 20px;
    
    line-height: 46px;
    font-size: 16px;  
    
    border-width: 2px;
    border-radius: 3px;
}

/**
 * Блок-кнопки. Группа блок-кнопок.
 * -----------------------------------------------------------------------------
 */

.btn-block {
    padding-left: 0;
    padding-right: 0;
}
.btn-block + .btn-block {
    margin-top: 10px;
}

/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : Тема : Цвета + Эффекты.
 *
 * -----------------------------------------------------------------------------
 */

.btn {
    font-weight: 700; 
    text-transform: uppercase;
    
    transition: color .3s ease, 
                border-color .3s ease, 
                background-color .3s ease;
}


/**
 * Кнопка.
 * -----------------------------------------------------------------------------
 */

.btn-prim,
.btn-prim:focus,
.btn-prim.focus {
    color: #fff;
    background-color: var(--color-prim);
    border-color: var(--color-prim);
}

.btn-prim:hover,
.btn-prim:active,
.btn-prim.active {
    color: #fff;
    background-color: var(--color-prim);
    border-color: var(--color-prim);
}

/**
 * Кнопка.
 * -----------------------------------------------------------------------------
 */

.btn-attn,
.btn-attn:focus,
.btn-attn.focus {
    color: #fff;
    background-color: var(--color-attn);
    border-color: var(--color-attn);
}

.btn-attn:hover,
.btn-attn:active,
.btn-attn.active {
    color: #fff;
    background-color: var(--color-attn-dark);
    border-color: var(--color-attn-dark);
}

/**
 * Кнопка.
 * -----------------------------------------------------------------------------
 */

.btn-frame,
.btn-frame:focus,
.btn-frame.focus {
    color: #fff;
    background-color: transparent;
    border-color: var(--color-attn);
}

.btn-frame:hover,
.btn-frame:active,
.btn-frame.active {
    color: #fff;
    background-color: transparent;
    border-color: var(--color-attn-dark);
}

/**
 * Кнопка.
 * -----------------------------------------------------------------------------
 */

.btn-white,
.btn-white:focus,
.btn-white.focus {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

.btn-white:hover,
.btn-white:active,
.btn-white.active {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

/*

.btn.empty,
.btn.empty:focus,
.btn.empty.focus {
    color: #333;
    background-color: transparent;
    border-color: #333;
    
    cursor: default;
}
.btn.empty:hover,
.btn.empty:active,
.btn.empty.active {
    color: #333;
    background-color: transparent;
    border-color: #333;
}


*/




.btn-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    
    
    width: 60px; height: 24px;
    
    text-align: center;
    
    color: #fff;
    
    background-color: transparent;
    border: 2px solid #f19813;
    border-radius: 12px;
    
    -webkit-touch-callout: none; /* iOS Safari */   
      -webkit-user-select: none; /* Safari */     
       -khtml-user-select: none; /* Konqueror HTML */     
         -moz-user-select: none; /* Old versions of Firefox */      
          -ms-user-select: none; /* Internet Explorer/Edge */           
              user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/*

.btn-group .btn-plus,
.btn-group .btn-minus,
.btn-group .count {
    
}


.btn-group .btn-plus,
.btn-group .btn-minus {
    width: 20px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}

.btn-group .btn-plus:hover,
.btn-group .btn-minus:hover {
    color: #ebaa71;
}

.btn-group .btn-plus {
    line-height: 20px;
}

.btn-group .btn-minus {
    line-height: 18px;
}

.btn-group .num {
    -ms-flex-positive: 1;
    flex-grow: 1;
    
    font-size: 14px;
    
    line-height: 20px;
}


*/


/*
 *
 *
 *
 *
 */

/*

.btn:disabled, 
.btn.disabled {
    color: #303030 !important;
    background-color: transparent !important;
    border-color: #303030 !important;
    
    pointer-events: none;
}


*/

/**
 * Иконочное.
 * -----------------------------------------------------------------------------
 */

.btn-icon {
    width: 42px;
    height: 42px;

    padding: 0;
    
    background-position: center center;
    background-repeat: no-repeat;
}

.btn-call {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    
    -ms-flex-align: center;
    align-items: center;
    
    justify-content: center;
    
    padding-left: 5px;
    font-size: 16px;
}

.btn-call .icon {
    width: 38px;
    height: 38px;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: 36px auto;    
}

.btn-call .icon,
.btn-icon-phone {
    background-image: url(/_images/icons/white/icon-phone.svg);
    background-size: 26px auto;
}

/**
 * Социальное.
 * -----------------------------------------------------------------------------
 */

.btn-social {
    width: 42px;
    height: 42px;

    padding: 0;
    
    border-radius: 3px;
    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 30px auto;
    
    background-color: rgba(255,255,255,.05);
}

.btn-social + .btn-social {
    margin-left: 6px;
}

.btn-social:hover {
    background-color: rgba(255,255,255,.15);
}

.btn-social-vk {
    background-image: url(/_images/icons/white/social-vk.svg);
}

.btn-social-ig {
    background-image: url(/_images/icons/white/social-ig.svg);
    background-size: 32px auto;
}

.btn-social-tg {
    background-image: url(/_images/icons/white/social-tg.svg);
}

.btn-social-wa {
    background-image: url(/_images/icons/white/social-wa.svg);
    background-size: 26px auto;
}

.btn-social-ok {
    background-image: url(/_images/icons/white/social-ok.svg);
}

/**
 * Стрелка в кнопке.
 * -----------------------------------------------------------------------------
 */

/*

.btn .arrow {
    outline: 0px dotted #f00;
    
    position: relative;
    padding-right: 6px;
}

.btn .arrow::after {
    content: "";
    
    display: inline-block;

    position: relative;
    top: -2px; left: 4px;

    width: 6px;
    height: 6px;

    border-color: #202020;
    border-style: solid;
    border-width: 2px;
    
    border-bottom: none;
    border-left: none;

    transform: rotate(45deg);
    
    transition: transform .3s ease, border .3s ease;
}
.btn:hover .arrow::after {
    transform: translateX(6px) rotate(45deg);
}

*/

/*

.btn-prim .arrow::after {
    border-color: #fff;
}
.btn-prim:hover .arrow::after {
    border-color: #6600cc;
}


.btn-prim-frame .arrow::after {
    border-color: #6600cc;
}
.btn-prim-frame:hover .arrow::after {
    border-color: #fff;
}

*/

/**
 * Кнопка со стрелкой.
 * -----------------------------------------------------------------------------
 */


/*

.btn-more {
    padding-right: 25px;
}
.btn-more::after {
    content: "";
    
    display: inline-block;

    position: relative;
    top: -2px; left: 4px;

    width: 6px;
    height: 6px;

    border-color: #202020;
    border-style: solid;
    border-width: 2px;
    
    border-bottom: none;
    border-left: none;

    transform: rotate(45deg);
    
    transition: transform .3s ease;
}

.btn-more:hover::after {
    transform: translateX(6px) rotate(45deg); /* scale(1.5) /
}

*/


/*

.btn-lg.btn-more {
    padding-right: 30px;
}
.btn-lg.btn-more::after {
    left: 6px;
    
    width: 9px;
    height: 9px;
    
    border-width: 3px;
}

*/

/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : Теелефон.
 *
 * -----------------------------------------------------------------------------
 */

/*

.btn-icon {
    width: 38px;
    height: 38px;
    
    background-image: url(/_images/phone-black.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 28px auto;
    
    border-color: #d0d0d0;
}

.btn-icon:hover {
    background-image: url(/_images/phone.svg);
    border-color: #101010;
}


*/

/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : Меню.
 *
 * -----------------------------------------------------------------------------
 */


/**
 * Кнопка-меню : База.
 * -----------------------------------------------------------------------------
 */

.btn-menu {
    position: relative;
    padding: 0;
}
.btn-menu::before,
.btn-menu::after {
    content: "";
}
.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    position: absolute;
    top: 50%;
}

/**
 * Кнопка-меню : Размеры.
 * -----------------------------------------------------------------------------
 */

.btn-menu {
    width: 42px;
    height: 42px;
    
    border: none;
}

.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    left: 9px; right: 9px;
    
    height: 3px;
    margin-top: -2px;
}
.btn-menu::before {
    transform: translateY(-8px);
}
.btn-menu::after {
    transform: translateY(8px);
}

/**
 * Кнопка меню : Цвета.
 * -----------------------------------------------------------------------------
 */

.btn-menu {
    
}


.btn-menu,
.btn-menu:focus,
.btn-menu.focus {

}
.btn-menu:hover,
.btn-menu:active,
.btn-menu.active {

}


.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    background-color: #fff;
}

.btn-menu:hover .icon-bar,
.btn-menu:hover::before,
.btn-menu:hover::after {
    background-color: #fff;
}

/**
 * Кнопка меню : Эффекты.
 * -----------------------------------------------------------------------------
 */

.btn-menu .icon-bar {
    opacity: 1;
}
.btn-menu.close .icon-bar {
    opacity: 0;
}
.btn-menu.close::before {
    transform: rotate(45deg);
}
.btn-menu.close::after {
    transform: rotate(-45deg);
}


.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    transition: transform .3s ease;
}
.btn-menu .icon-bar {
    transition: opacity .15s ease .15s;
}
.btn-menu.close .icon-bar {
    transition: opacity .15s ease;
}

/*
 * -----------------------------------------------------------------------------
 *
 * ...
 *
 * -----------------------------------------------------------------------------
 */