.btn-1 { 
    box-shadow:1px 1px 8px rgba(245,245,245,1);
    transition: box-shadow .2s ease, transform .2s ease;
}

.btn-1:hover {
    -webkit-box-shadow: 0px 18px 35px -21px rgba(161, 163, 170, 1);
    -moz-box-shadow: 0px 18px 35px -21px rgba(161, 163, 170, 1);
    box-shadow: 0px 18px 35px -21px rgba(161, 163, 170, 1);
}

.btn-2 {   
    cursor: pointer;
    background:transparent; 
    border-radius:10px; 
    border:0px solid transparent;   
}
 
.btn-2:hover {  
    cursor: pointer;
    border-radius:10px; 
    border:px solid transparent;
    background:#eee; 
    color:#000; 
}

/* Glowne przyciski Skillmint: gradient listka z logo (#EEF36A -> #5DBB3F).
   !important, bo wiekszosc tych przyciskow ma kolor w stylu inline lub
   w regulach stron (np. #footer .fr-btn z !important). Hover jest wspolny,
   zastepuje dawne rozne efekty (bialy, czarny, rozowy). Prefiks "html body"
   podnosi priorytet ponad reguly stron typu #footer .fr-btn {... !important}. */
html body .pv5-btn-primary,
html body .fr-btn,
html body #footer .fr-btn,
html body .nl6-button,
html body .site-header-search-field button,
html body .e2-btn,
html body .e2-cnav-btn,
html body .e2-mbar .b,
html body .blog-empty-action,
html body .courses-empty-action,
html body .experts-empty-action,
html body .experts-collaboration-action,
html body .expert-profile-all-courses,
html body .expert-profile-collaboration-action {
    background: linear-gradient(160deg, #F6F8C2 0%, #D6ECB2 100%) !important;
    background-size: 160% 160% !important;
    background-position: 0% 0% !important;
    background-origin: border-box !important;
    border-color: transparent !important;
    color: #111114 !important;
    transition: background-position .4s ease, box-shadow .2s ease, transform .2s ease !important;
}
html body .pv5-btn-primary:hover,
html body .pv5-btn-primary:focus-visible,
html body .fr-btn:hover,
html body #footer .fr-btn:hover,
html body .fr-btn:focus-visible,
html body #footer .fr-btn:focus-visible,
html body .nl6-button:hover,
html body .site-header-search-field button:hover,
html body .site-header-search-field button:focus-visible,
html body .e2-btn:hover,
html body .e2-cnav-btn:hover,
html body .e2-mbar .b:hover,
html body .blog-empty-action:hover,
html body .courses-empty-action:hover,
html body .experts-empty-action:hover,
html body .experts-collaboration-action:hover,
html body .expert-profile-all-courses:hover,
html body .expert-profile-collaboration-action:hover {
    background: linear-gradient(160deg, #F6F8C2 0%, #D6ECB2 100%) !important;
    background-size: 160% 160% !important;
    background-position: 100% 100% !important;
    border-color: transparent !important;
    color: #111114 !important;
    box-shadow: 0 10px 24px -10px rgba(93, 187, 63, .7) !important;
    transform: translateY(-1px);
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
html body .pv5-btn-primary,
html body .fr-btn,
html body #footer .fr-btn,
html body .nl6-button,
html body .site-header-search-field button,
html body .e2-btn,
html body .e2-cnav-btn,
html body .e2-mbar .b,
html body .blog-empty-action,
html body .courses-empty-action,
html body .experts-empty-action,
html body .experts-collaboration-action,
html body .expert-profile-all-courses,
html body .expert-profile-collaboration-action { transition: none !important; }
html body .pv5-btn-primary:hover,
html body .fr-btn:hover,
html body #footer .fr-btn:hover,
html body .nl6-button:hover,
html body .e2-btn:hover,
html body .e2-cnav-btn:hover,
html body .e2-mbar .b:hover,
html body .blog-empty-action:hover,
html body .courses-empty-action:hover,
html body .experts-empty-action:hover,
html body .experts-collaboration-action:hover,
html body .expert-profile-all-courses:hover,
html body .expert-profile-collaboration-action:hover { transform: none; }
}