.btn-red,
.btn-blue,
.btn-cyan,
.btn-green,
.btn-yellow,
.btn-black,
.btn-white,
.btn-silver,
.btn-darkblue,
.btn-darkgreen,
.btn-darkred,
.btn-darkyellow {
    width: 100px;
    height: 20px;
    color: #00000;
    display: inline-block;
    padding: 3px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
        touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background-image: none;
    border: 1px solid gray;
    border-radius: 5px;
    text-decoration:none !important;
}

/*-- COLOURS --*/
.btn-red {
    background-color: rgb(255, 102, 120);
    color: #ffffff;
}
.btn-blue {
    background-color: rgb(77, 184, 255) ;
    color: #ffffff;
}
.btn-cyan {
    background-color: #5bc0de;
    color: #ffffff;
}
.btn-green {
    background-color: #8ef28e;
    color: #000000;
    border: 1px solid gray; 
}
.btn-yellow {
    background-color: #f9e24d;
    color: gray;
}
.btn-black {
    background-color: black;
    color: #ffffff;
}
.btn-white  {
    background-color: whitesmoke;
    border: 1px solid silver; 
}
.btn-silver {
    background-color: silver;
}
.btn-darkred {
    background-color: darkred;
    color: #ffffff;
}
.btn-darkblue {
    background-color: darkblue;
    color: #ffffff;
}
.btn-darkgreen {
    background-color: darkgreen;
    color: #ffffff;
}
.btn-darkyellow {
    background-color: darkgoldenrod;
    color: #ffffff;
}

/*-- HOVERS --*/
/*.btn-red:hover,
.btn-blue:hover,
.btn-cyan:hover,
.btn-green:hover,
.btn-yellow:hover,
.btn-black:hover,
.btn-white:hover,
.btn-silver:hover,
.btn-darkblue:hover,
.btn-darkgreen:hover,
.btn-darkred:hover,
.btn-darkyellow:hover {
    opacity: 0.8;
}*/
.btn-red:hover {
    background: white !important;
    color: #ea3131 !important;
    border: 1px solid #ea3131 !important;
    border-radius: 10px !important;
}
.btn-blue:hover {
    background: white !important;
    color: #337ab7 !important;
    border: 1px solid #337ab7 !important;
    border-radius: 10px !important;
}
.btn-cyan:hover {
    background: white !important;
    color: #5bc0de !important;
    border: 1px solid #5bc0de !important;
    border-radius: 10px !important;
}
.btn-green:hover {
    background: white !important;
    color: #09a009 !important;
    border: 1px solid #09a009 !important;
    border-radius: 10px !important;
}
.btn-yellow:hover {
    background: white !important;
    color: #cc7a00 !important;
    border: 1px solid #cc7a00 !important;
    border-radius: 10px !important;
}
.btn-black:hover {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
    border-radius: 10px !important;
}
.btn-white:hover {
    background: gray !important;
    color: whitesmoke !important;
    border: 1px solid whitesmoke !important;
    border-radius: 10px !important;
}
.btn-silver:hover {
    background-color: white !important;
    color: silver !important;
    border: 1px solid silver !important;
    border-radius: 10px !important;
}
.btn-darkred:hover {
    background-color: white !important;
    color: darkred !important;
    border: 1px solid darkred !important;
    border-radius: 10px !important;
}
.btn-darkblue:hover {
    background-color: white !important;
    color: darkblue !important;
    border: 1px solid darkblue !important;
    border-radius: 10px !important;
}
.btn-darkgreen:hover {
    background-color: white !important;
    color: darkgreen !important;
    border: 1px solid darkgreen !important;
    border-radius: 10px !important;
}
.btn-darkyellow:hover {
    background-color: white !important;
    color: darkgoldenrod !important;
    border: 1px solid darkgoldenro !importantd;
    border-radius: 10px !important;
}

/*-- SIZES --*/
.btn-width-auto {
    width: auto !important;
}
.btn-wide {
    width: 180px;
}
.btn-thin {
    width: 40px;
    margin-bottom: 0px;
}
.btn-line {
    width: 60px;
    margin-bottom: 0px;
}
.btn-tall {
    height: 80px;
    padding: 30px 5px;
}
.btn-short {
    height: 20px;
    font-size: 12px;
    padding: 0px 12px;
}
.btn-large {
    width: 200px;
    height: 100px;
    padding: 40px 5px;
}
.btn-xlarge {
    width: 220px;
    height: 120px;
    padding: 50px 5px;
}
.btn-big {
    width: 180px;
    height: 35px;
    font-size: 16px;
    padding: 6px 12px;
}
.btn-row {
    width: 100%;
}

.btn-hide, .btn-hide-all {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
}
.btn-fadeout {
    opacity: 0;
}

/*-- MENU --*/
.menubox > .btn-red,
.menubox > .btn-blue,
.menubox > .btn-cyan,
.menubox > .btn-green,
.menubox > .btn-yellow,
.menubox > .btn-black,
.menubox > .btn-white,
.menubox > .btn-silver,
.menubox > .btn-darkblue,
.menubox > .btn-darkgreen,
.menubox > .btn-darkred,
.menubox > .btn-darkyellow {
    width: 250px;
    text-align: left;
    border-radius: 5px;
    box-shadow: 2px 3px 3px 3px silver;
}
.menubox > .btn-red:hover,
.menubox > .btn-blue:hover,
.menubox > .btn-cyan:hover,
.menubox > .btn-green:hover,
.menubox > .btn-yellow:hover,
.menubox > .btn-black:hover,
.menubox > .btn-white:hover,
.menubox > .btn-silver:hover,
.menubox > .btn-darkblue:hover,
.menubox > .btn-darkgreen:hover,
.menubox > .btn-darkred:hover,
.menubox > .btn-darkyellow:hover {
    box-shadow: 0px 0px 0px 0px silver;
}
/*-- -------------------- --*/