html {
    font-size: 14px
}

body {
    color: #2d2d2c;
    font-family: "Arial", sans-serif;
    background-color: #f8f8f8
}

ul {
    margin: 0;
    padding: 0;
    list-style-position: inside
}

ol {
    margin: 0;
    padding: 0;
    list-style-position: inside
}

img {
    max-width: 100%;
    height: auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    font-family: inherit
}

h1 {
    font-size: 36px;
    font-size: 2.5714285714rem
}

@media (max-width:575px) {
    h1 {
        font-size: 28px;
        font-size: 2rem
    }
}

h2 {
    font-size: 30px;
    font-size: 2.1428571429rem
}

@media (max-width:575px) {
    h2 {
        font-size: 26px;
        font-size: 1.8571428571rem
    }
}

h3 {
    font-size: 26px;
    font-size: 1.8571428571rem
}

@media (max-width:575px) {
    h3 {
        font-size: 22px;
        font-size: 1.5714285714rem
    }
}

p {
    margin: 0;
    line-height: 1.6em
}

a {
    color: #181818;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease
}

a:focus,
a:hover {
    color: #181818;
    text-decoration: none
}

.btn {
    font-weight: bold;
    padding: 0.7rem 1rem;
    font-size: 18px;
    font-size: 18px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    overflow: hidden
}

.btn:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: 0.15;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10
}

.btn:hover:after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1)
}

.btn--green {
    background: #559f3d;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
    color: #fff
}

.btn--green:hover {
    color: #fff;
    opacity: 0.7
}

.btn--blue {
    background: #2d739b;
    color: #fff
}

.btn--blue:hover {
    color: #fff;
    opacity: 0.7
}

.btn--full {
    display: block;
    width: 100%
}

.btn:focus {
    color: #fff;
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    -ms-box-shadow: 0 0 0 0;
    -o-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0
}

.btn .btn-p1 {
    display: block
}

.btn .btn-p2 {
    display: block;
    font-weight: 400;
    font-size: 13px;
    font-size: 0.9285714286rem;
    opacity: 0.8
}

.form-wrapper input[type="text"] {
    border: 0 none;
    padding: 0 10px;
    font-size: 14px;
    font-size: 1rem;
    height: 36px;
    margin-bottom: 10px;
    font-family: "Arial", sans-serif;
    width: 100%
}

.form-wrapper input[type="submit"] {
    height: 36px;
    font-size: 14px;
    font-size: 1rem;
    font-weight: bold;
    font-family: "Arial", sans-serif
}

.social-list li {
    display: inline-block;
    margin-right: 6px
}

.social-list li a {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    background: #fff;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    display: inline-block;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease
}

.social-list li a .icon-poka {
    font-size: 18px;
    color: #2d739b
}

.social-list li a:hover {
    opacity: 0.5
}

header {
    background: url(./bg-header.jpg) center top no-repeat;
    background-size: cover
}

.home .head-main {
    padding: 30px 0;
}

.home .head-main .text-intro {
    display: block
}

.head-main {
    text-align: center;
    padding: 40px 0
}

@media (max-width:575px) {
    .head-main {
        padding: 20px 0 !important
    }
    .section{
         padding: 10px 0 !important; 
    }
    .head-main .text-intro{
        margin-top: 0 !important;
    }
    .head-main .text-intro h1{
        font-size: 1.3rem !important;
        padding-bottom: 35px !important;
    }
    .head-main .text-intro p{
        margin-bottom: 0 !important;
    }
    .text-area p,
    .box-text{
        line-height: 30px !important;
    }
}

.head-main .text-intro {
    max-width: 820px;
    margin: 40px auto 0;
    margin-top: 0;
    color: #fff;
    display: none
}

.head-main .text-intro h1 {
    font-size: 35px;
    font-size: 2.5rem;
    text-transform: uppercase;
    position: relative;
    font-weight: bold;
    padding-bottom: 50px;
    margin-bottom: 0
}
.table-wrapper img {
    width: 150px;
}
.table-wrapper th{
    padding: 10px;
    background-color: #dbdbdb;
    border: 1px solid #d6d5d3;
}
.table-wrapper td{
    padding: 10px;
    border: 1px solid #d6d5d3;
}
.table-wrapper caption {
    font-size: 12px;
}
.footer .footer-title{
    font-size: 1.7142857143rem;
    margin-bottom: 10px;
}
#page-wrapper>.section--5{
    padding-bottom: 0;
}
.terms-wrapper{
    position: relative;
}
.terms-wrapper:hover .tooltip-text {
display: block;
position: absolute;
background-color: rgba(0,0,0,0.9);
color: #ffffff;
padding: 20px 10px;
width: 200px;
bottom: 25px;
z-index: 1;

}
.terms-wrapper:hover .tooltip-text a{
    color: #ffffff;
    border-bottom: 1px dashed #fff;
}
.tooltip-text:before {
    content: '';
    z-index: 0;
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 20px;
    height: 20px;
    background-color: rgba(0,0,0,0.9);
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.15);
  }


.table-of-contents {
    width: 40%;
    background: #dbdbdb;
    font-size: 0.8em;
    padding: 1em 2em;
    margin: 0 0 0.5em 0.5em;
  }
  .table-of-contents ul {
    padding: 0;
  }
  .table-of-contents li {
    margin: 0 0 0.25em 0;
  }
  .table-of-contents a {
    text-decoration: none;
  }
  .table-of-contents a:hover,
  .table-of-contents a:active {
    text-decoration: underline;
  }
  
  h3:target {
    animation: highlight 1s ease;
  }
  
  @keyframes highlight {
    from { background: yellow; }
    to { background: white; }
  }
@media (max-width:575px) {
    .table-of-contents {
        width: 100%;
       
      }
    .head-main .text-intro h1 {
        font-size: 24px;
        font-size: 1.7142857143rem
    }
    .head-menu{
        display: none;
    }
    .table-wrapper{
        overflow: scroll;
    }
    .table-wrapper table{
        min-width: 320px;
    }
    .table-wrapper img {
        width: 50px;
    }
    .table-wrapper th{
        font-size: 12px;
        padding: 5px;
    }
    .table-wrapper td{
        padding: 5px;
    }

}

.head-main .text-intro h1:after {
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    max-width: 230px;
    width: 100%;
    position: absolute;
    bottom: 24px;
    left: 50%;
    margin-left: -115px;
    content: ""
}

.head-main .text-intro p {
    font-size: 16px;
    font-size: 16px;
    margin-bottom: 20px
}

@media (max-width:575px) {
    .head-main .text-intro p {
        font-size: 14px;
        font-size: 1rem
    }
}

.footer {
    background: #181818;
    padding-top: 70px;
    overflow-x: hidden
}

.footer .footer-copyright {
    background: rgba(0, 0, 0, 0.3);
    padding: 22px 0;
    min-height: 50px
}

.footer .footer-copyright p {
    font-size: 12px;
    font-size: 0.8571428571rem;
    color: #fff
}

.footer .btn-backToTop {
    position: absolute;
    margin-top: -18px;
    top: 50%;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    width: 40px;
    height: 36px;
    line-height: 30px;
    display: block;
    text-align: center;
    padding: 0
}

.footer .btn-backToTop i {
    font-size: 12px;
    color: white
}

.footer .form-wrapper input[type="text"] {
    max-width: 300px
}

.footer .widget-columns {
    color: #fff;
    margin: 0 -20px 30px
}

.footer .widget-columns h3 {
    font-size: 24px;
    font-size: 1.7142857143rem;
    margin-bottom: 10px
}

.footer .widget-columns p {
    font-size: 12px;
    font-size: 0.8571428571rem;
    margin-bottom: 10px
}

.footer .widget-columns a {
    color: #fff
}

.footer .widget-columns .social-list li a {
    color: #2d739b
}

.footer .widget-columns .menu li a {
    color: #fff
}

.footer .widget-columns .menu li a:hover {
    opacity: 0.5
}

.footer .widget-columns.widget-count-2>div {
    float: left;
    padding: 0 20px;
    width: 50%
}

@media (max-width:767px) {
    .footer .widget-columns.widget-count-2>div {
        width: 100%
    }
}

.footer .widget-columns.widget-count-4>div {
    float: left;
    padding: 0 20px;
    width: 25%
}

@media (max-width:767px) {
    .footer .widget-columns.widget-count-4>div {
        width: 100%
    }
}

.footer .widget-columns.widget-columns>div {
    margin-bottom: 30px
}

.news-list-sidebar .news-sidebar-group {
    margin-top: 22px
}

.news-list-sidebar .news-sidebar-group .item {
    margin-bottom: 15px
}

.news-list-sidebar .news-sidebar-group .item .text {
    width: calc(100% - 55px);
    float: left;
    padding-left: 20px
}

@media (max-width:991px) {
    .news-list-sidebar .news-sidebar-group .item .text {
        width: calc(100% - 35px)
    }
}

.news-list-sidebar .news-sidebar-group .item .text h4 {
    font-size: 14px;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 7px;
    line-height: 1.3em
}

.news-list-sidebar .news-sidebar-group .item .text .read-more {
    margin-bottom: 0;
    display: table;
    font-weight: 700;
    font-size: 12px;
    font-size: 0.8571428571rem;
    text-decoration: underline
}

.news-list-sidebar .news-sidebar-group .item .text .read-more:hover {
    text-decoration: none
}

.trigger-mmenu {
    overflow: hidden;
    display: block;
    color: #fff;
    padding: 0 12px;
    line-height: 48px;
    margin: 0 auto;
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease
}

.trigger-mmenu .icon {
    width: 22px;
    margin-right: 7px;
    display: inline-block;
    vertical-align: middle
}

.trigger-mmenu .icon span {
    display: block;
    height: 4px;
    background: #fff;
    margin-bottom: 3px;
    position: relative;
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease
}

.trigger-mmenu span {
    font-size: 17px;
    font-size: 1.2142857143rem;
    font-weight: bold
}

.trigger-mmenu:hover,
.trigger-mmenu:focus {
    text-decoration: none;
    color: #fff
}

.trigger-mmenu:hover .icon span:first-child {
    top: -1px
}

.trigger-mmenu:hover .icon span:last-child {
    top: 1px
}

.head-menu {
    background: #312f2f;
    text-align: center
}

.head-menu .menu {
    z-index: 1000;
    position: relative
}

.head-menu .menu>li {
    margin: 0 1rem;
    display: inline-block;
    position: relative
}

@media (max-width:1199px) {
    .head-menu .menu>li {
        margin: 0 0.8rem
    }
}

.head-menu .menu>li:after {
    display: block;
    content: "";
    height: 3px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    background: #fff;
    right: 50%;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
    opacity: 0
}

.head-menu .menu>li:hover:after {
    bottom: 0;
    opacity: 1;
    left: 0;
    right: 0
}

.head-menu .menu>li:hover>a {
    text-decoration: none
}

.head-menu .menu>li a {
    color: #fff;
    font-size: 16px;
    font-size: 1.1428571429rem;
    font-weight: 500;
    display: block;
    line-height: 52px;
    letter-spacing: 0.5px
}

@media (max-width:1199px) {
    .head-menu .menu>li a {
        font-size: 14px;
        font-size: 1rem
    }
}

.head-menu.head-menu--s1 {
    background: rgba(0, 0, 0, 0.55)
}

.mm-close::after,
.mm-close::before {
    width: 7px;
    height: 7px
}

.section {
    padding: 60px 0 40px
}

@media (max-width:991px) {
    .section {
        padding: 40px 0 30px
    }
}

.body-header-style1.home .banner-wrapper.banner-wrapper--top {
    display: none
}

.text-area p {
    margin-bottom: 20px
}

.text-area p:empty {
    margin-bottom: 0
}

.text-area p a:not(.btn) {
    color: inherit;
    text-decoration: underline
}

.text-area p a:not(.btn):hover {
    text-decoration: none
}

.text-area>h1 {
    margin-bottom: 20px;
    font-weight: 700
}

.text-area>h2 {
    margin-bottom: 20px
}

.text-area>h3 {
    margin-bottom: 15px
}

.text-area>h4,
.text-area>h5,
.text-area>h6 {
    margin-bottom: 15px
}

.text-area>ul,
.text-area>ol {
    margin-bottom: 20px
}

.text-area>ul li,
.text-area>ol li {
    margin: 8px 0
}

.text-area .text-list {
    margin-bottom: 20px
}

.text-area .text-list li {
    list-style: none;
    display: block;
    margin: 8px 0;
    line-height: 1.15em
}

.text-area .text-list li:before {
    color: #2d739b;
    font-family: 'poka';
    display: inline-block;
    margin-right: 8px
}

.text-area .text-list--one li:before {
    content: "\004e"
}

.text-area .text-list--two li:before {
    content: "\0053"
}

.text-area .text-list--three li:before {
    content: "\0059"
}

.text-area .text-list--four li:before {
    content: "\0058"
}

.text-area .text-list--five li:before {
    content: "\0057"
}

.text-area .text-list--six li:before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #2d739b
}

.text-area>table {
    width: 100%
}

.text-area>table thead {
    background: rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.text-area>table thead th {
    padding: 5px 10px
}

.text-area>table tbody td {
    padding: 5px 10px
}

.text-area hr {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.box-text {
    padding: 30px;
    background: rgba(24, 24, 24, 0.05);
    border: 1px solid rgba(24, 24, 24, 0.1);
    line-height: 1.6em;
    position: relative;
    margin-bottom: 25px
}

.box-text.box-text--icon {
    padding-left: 80px
}

.box-text.box-text--icon:after {
    content: attr(data-icon);
    position: absolute;
    top: 35px;
    left: 25px;
    font-size: 30px;
    font-size: 2.1428571429rem;
    font-family: "poka";
    opacity: 0.8
}

.table-s2 {
    margin-bottom: 20px
}

.table-s2.table-s2--hide-counter .item .item-row .col-logo .rank-num {
    display: none
}

.table-s2.table-s2--hide-counter .item .item-row .col-logo .logo-box {
    margin-left: 0
}

.table-s2.table-s2--hide-rating .item .item-row .col-logo {
    width: 28%
}

@media (max-width:991px) {
    .table-s2.table-s2--hide-rating .item .item-row .col-logo {
        width: 25%
    }
}

@media (max-width:767px) {
    .table-s2.table-s2--hide-rating .item .item-row .col-logo {
        width: 100%
    }
}

.table-s2.table-s2--hide-rating .item .item-row .col-bonus {
    width: 22%
}

@media (max-width:991px) {
    .table-s2.table-s2--hide-rating .item .item-row .col-bonus {
        width: 22%
    }
}

@media (max-width:767px) {
    .table-s2.table-s2--hide-rating .item .item-row .col-bonus {
        width: 100%
    }
}

.table-s2.table-s2--hide-rating .item .item-row .col-features {
    width: 30%
}

@media (max-width:991px) {
    .table-s2.table-s2--hide-rating .item .item-row .col-features {
        width: 30%;
        display: block
    }
}

@media (max-width:767px) {
    .table-s2.table-s2--hide-rating .item .item-row .col-features {
        width: 100%
    }
}

.table-s2.table-s2--hide-rating .item .item-row .col-btn {
    width: 20%
}

@media (max-width:991px) {
    .table-s2.table-s2--hide-rating .item .item-row .col-btn {
        width: 23%
    }
}

@media (max-width:767px) {
    .table-s2.table-s2--hide-rating .item .item-row .col-btn {
        width: 100%
    }
}

.table-s2 .item {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 10px 15px;
    transition: background-color 400ms ease;
    margin-top: -1px
}

.table-s2 .item:nth-child(even) {
    background-color: #faf9f9
}

.table-s2 .item:hover {
    background: #e8f2f8;
    box-shadow: inset 0 0 0 5px #fff
}

.table-s2 .item .item-row {
    margin-left: -5px;
    margin-right: -5px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: flex;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center
}

.table-s2 .item .item-row>div {
    padding: 0 5px
}

.table-s2 .item .item-row .col-logo {
    width: 23%;
    position: relative
}

@media (max-width:991px) {
    .table-s2 .item .item-row .col-logo {
        width: 25%
    }
}

@media (max-width:767px) {
    .table-s2 .item .item-row .col-logo {
        width: 100%;
        position: relative;
        margin-bottom: 15px
    }
}

.table-s2 .item .item-row .col-logo .rank-num {
    position: absolute;
    top: 50%;
    left: 12px;
    font-size: 16px;
    font-size: 16px;
    margin-top: -8px;
    line-height: 1;
    font-weight: 700
}

@media (max-width:991px) {
    .table-s2 .item .item-row .col-logo .rank-num {
        left: 7px;
        font-size: 16px;
        font-size: 1.1428571429rem
    }
}

@media (max-width:767px) {
    .table-s2 .item .item-row .col-logo .rank-num {
        margin-top: 0;
        left: 5px;
        top: 0;
        background: #fff;
        z-index: 2;
        width: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 14px;
        font-size: 1rem
    }
}

.table-s2 .item .item-row .col-logo .logo-box {
    background: #f8f8f8;
    height: 0;
    padding: 0 0 55%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
    margin-left: 35px;
    position: relative;
    border-radius: 5px
}

@media (max-width:991px) {
    .table-s2 .item .item-row .col-logo .logo-box {
        margin-left: 25px
    }
}

@media (max-width:767px) {
    .table-s2 .item .item-row .col-logo .logo-box {
        margin-left: 0;
        padding-bottom: 30%
    }
}

.table-s2 .item .item-row .col-logo .logo-box a {
    display: inline-block;
    width: 100%;
    height: inherit;
    padding-bottom: inherit
}

.table-s2 .item .item-row .col-logo .logo-box a img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 80%;
    max-height: 90%
}

.table-s2 .item .item-row .col-bonus {
    width: 16%
}

@media (max-width:991px) {
    .table-s2 .item .item-row .col-bonus {
        width: 26%
    }
}

@media (max-width:767px) {
    .table-s2 .item .item-row .col-bonus {
        width: 50%
    }
}

.table-s2 .item .item-row .col-bonus h5 {
    font-size: 14px;
    font-size: 1rem;
    padding: 0;
    margin-bottom: 5px
}

.table-s2 .item .item-row .col-bonus h5 strong {
    font-size: 32px;
    font-size: 2.2857142857rem;
    display: block
}

.table-s2 .item .item-row .col-bonus .terms-wrapper {
    margin-top: 0
}

.table-s2 .item .item-row .col-bonus .terms-wrapper .tooltip-el {
    border-bottom: 1px dashed #2d2d2c;
    opacity: 0.7
}

.table-s2 .item .item-row .col-bonus .terms-wrapper .tooltip-el:hover {
    border-bottom-style: solid
}

.table-s2 .item .item-row .col-features {
    width: 25%;
    text-align: left
}

@media (max-width:991px) {
    .table-s2 .item .item-row .col-features {
        display: none
    }
}

@media (max-width:767px) {
    .table-s2 .item .item-row .col-features {
        width: 100%;
        display: block
    }
}

@media (max-width:767px) {
    .table-s2 .item .item-row .col-features ul {
        padding: 20px 0
    }
}

.table-s2 .item .item-row .col-features ul li {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-size: 0.9285714286rem;
    line-height: 1.2
}

@media (max-width:767px) {
    .table-s2 .item .item-row .col-features ul li {
        text-align: center;
        line-height: 1.1;
        font-size: 12px;
        font-size: 0.8571428571rem;
        margin-bottom: 3px
    }
}

.table-s2 .item .item-row .col-features ul li:before {
    content: "\02714";
    color: #2d739b;
    padding-right: 8px;
    font-size: 16px;
    font-size: 1.1428571429rem
}

.table-s2 .item .item-row .col-features ul li:last-child {
    margin-bottom: 0
}

.table-s2 .item .item-row .col-btn {
    width: 22%
}

@media (max-width:991px) {
    .table-s2 .item .item-row .col-btn {
        width: 30%
    }
}

@media (max-width:767px) {
    .table-s2 .item .item-row .col-btn {
        width: 100%
    }
}

.banner-wrapper.banner-wrapper--top {
    margin-top: 60px;
    margin-bottom: 60px
}

@media (max-width:991px) {
    .banner-wrapper.banner-wrapper--top {
        margin-top: 40px;
        margin-bottom: 40px
    }
}

.terms-wrapper {
    margin-top: 8px;
    text-align: center;
    padding: 0 10px;
    clear: both;
    color: #2d2d2c
}

.terms-wrapper .tooltip-text {
    display: none
}

.terms-wrapper .tooltip-el {
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-size: 0.8571428571rem
}

@media (-ms-high-contrast:none) {

    input::-ms-clear {
        display: none;
        width: 0;
        height: 0
    }

    input::-ms-reveal {
        display: none;
        width: 0;
        height: 0
    }
}
.table-of-contents {
    position: relative;
    border-radius: 9px;
}
.ovh {
    height: 133px;
    overflow: hidden;
    padding-bottom: 35px;
    position: relative;
}
.table-of-contents span{
    position: absolute;
    top: 15px;
   right: 15px;
   display: block;
   background: #559f3d;
   box-shadow: 0px 3px 2px rgb(0 0 0 / 10%);
   color: #fff;
   padding: 5px 10px;
   border-radius: 9px;
 cursor: pointer;
}