/*  
-- nom element: button = bt --
-- versió: 2401 --  
*/
.bt__box {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 2px solid var(--cl-clr-md);
}
.bt__cnt {
    flex: 0 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bt__cnt-100 {
    flex: 0 1 100%;
}
.bt__cnt-50 {
    flex: 0 1 50%;
}
.bt__cnt-33 {
    flex: 0 1 33%;
}
.bt__cnt-25 {
    flex: 0 1 25%;
}
.bt {
    width: 4rem;
    text-decoration: none;
    padding: .4rem 0;
    border: solid .1rem var(--cl-clr-hg);
    border-radius: 0.25em;
    color: var(--cl-drk-lw);
    background-color: transparent;
    cursor: pointer;
    overflow: hidden;
    font-size: inherit;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
}
.bt--clr {
    color: var(--cl-clr-hg);
}
.bt i {
    color:  var(--cl-drk-lw);
}
.bt-3 {
    width: 3rem;
}
.bt-4 {
    width: 4rem;
}
.bt-6 {
    width: 6rem;
}

.bt--6x2 {
    width: 6rem;
    height: 2.4rem;
    font-size: 1rem;
    padding: 0;
}

.bt-10 {
    width: 10rem;
}
.bt i, .bt-4 i {
    font-size: 1.4rem;
}
.bt-3 i {
    font-size: 1.2rem;
}
.bt:hover, .bt:active {
    border: solid .1rem var(--cl-drk-lw);
    background-color: var(--cl-drk-lw);
}
.bt:hover i, .bt:active i {
    color: var(--cl-clr-lw);
}

.bt--abs-right {
    position: absolute;
    top: 0;
    right: 0;
}

.bt--abs-left {
    position: absolute;
    left: 0;
    bottom: 0;
}