.btn {
    border-radius: 5px;
    color: #fff;
    padding: 12px 20px;
    position: relative;
    font-size: 16px;  
    font-weight: 100;
    background-color: var(--color);
    border: unsetl
    cursor: pointer;   
  -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, Opera and Firefox */
    letter-spacing: 0.5px;
         display: inline-block;
                 position: relative;
        overflow: hidden;
  -webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;       
    border: unset;
    margin: 0 2px;
    letter-spacing: 0.5px;
}  

.btn:hover{
           background-color: var(--colorDark);
}

.btn.full{
        width: 100%;
}
.btn.xl{
        font-size: 24px; 
}
.btn.l{
        font-size: 20px; 
}
.btn.s{
        font-size: 14px; 
}
.btn.xs{
        font-size: 13px; 
        padding: 4px 11px;
}
.btn.red {
    background-color: #805656;
    color: white;
}

.btn.green {
    background-color: #608f5b;
    color: white;
}



.btn.iconize{
        
        text-align: left;
}
.btn.iconize > .ico{
        
        float: left;
        min-width: 43px;
        text-align: left;
        font-size: 32px;
}
.btn.iconize > .text{
        
        white-space: nowrap;
        display: inline-block;
        font-size: 14px;
} 
.btn.iconize > .text > span{
        
        display: block;
        font-size: 18px;
        font-weight: 600;
}

/* [L] Large */
@media (max-width: 1200px) {
        .btn{

        }
        .btn.xl{

        }
        .btn.l{

        }
        .btn.s{

        }
        .btn.xs{

        }
}

/* [M] Medium */
@media (max-width: 992px) {
        .btn{

        }
        .btn.xl{

        }
        .btn.l{

        }
        .btn.s{

        }
        .btn.xs{

        }
}

/* [S] Small */
@media (max-width: 768px) {
        .btn{

        }
        .btn.xl{

        }
        .btn.l{

        }
        .btn.s{

        }
        .btn.xs{

        }
}

/* [XS] Extra small */
@media (max-width: 576px) {
        .btn{

        }
        .btn.xl{

        }
        .btn.l{

        }
        .btn.s{

        }
        .btn.xs{

        }
}