/*BUTTONS*/
.btn {font-family: 'Roboto', sans-serif; padding: 12px 30px; font-size:14px; font-weight:500; border-radius:0px; border:3px solid transparent; border-radius:0px;cursor: pointer; box-sizing: border-box;text-decoration: none;display:inline-block; line-height: inherit; outline:none;}
.btn:hover {_cursor:pointer; cursor:pointer; background-color: transparent;}
.btn-sm {padding: 10px 10px!important;font-size:12px;}
.btn-outline {padding: 12px 30px; font-size:14px; font-weight:500; border-radius:0px; border:3px solid #000; border-radius:0px; margin:5px 0; background:transparent}
.btn-outline.btn-sm {padding:7px 10px!important;}
.btn-outline:hover { color:#fff !important; background-color: var(--black);}

.btn-red {background-color: var(--red); border-color: var(--red); color: #fff;} .btn-red:hover {color: #FF0000;}
.btn-darkred {background-color: var(--darkred); border-color: var(--darkred); color: #fff;} .btn-darkred:hover {color: #8B0000;}
.btn-crimson {background-color:var(--crimson); border-color: var(--crimson); color: #fff;} .btn-crimson:hover {color: #DC143C;}
.btn-firebrick {background-color: var(--firebrick); border-color: var(--firebrick); color: #fff;} .btn-firebrick:hover {color: #B22222;}
.btn-coral {background-color: var(--coral); border-color: var(--coral); color: #fff;} .btn-coral:hover {color: #FF7F50;}
.btn-tomato {background-color: var(--tomato); border-color: var(--tomato); color: #fff;} .btn-tomato:hover {color: #FF6347;}
.btn-orangered {background-color: var(--orangered); border-color: var(--orangered); color: #fff;} .btn-orangered:hover {color: #FF4500;}
.btn-orange {background-color: var(--orange); border-color: var(--orange); color: #fff;} .btn-orange:hover {color: #FFA500;}

.btn-darkorange {background-color: var(--darkorange); border-color: var(--darkorange); color: #fff;} .btn-darkorange:hover {color: #FF8C00;}

.btn-gold {background-color:var(--gold); border-color: var(--gold); color: #fff;} .btn-gold:hover {color: #FFD700;}

.btn-yellow {background-color: var(--yellow); border-color: var(--yellow); color: #fff;} .btn-yellow:hover {color: #FFFF00;}

.btn-khaki {background-color: var(--khaki); border-color:var(--khaki); color: #fff;} .btn-khaki:hover {color: #F0E68C;}

.btn-darkkhaki {background-color: var(--darkkhaki); border-color: var(--darkkhaki); color: #fff;} .btn-darkkhaki:hover {color: #BDB76B;}

.btn-green {background-color: var(--green); border-color: var(--green); color: #fff;} .btn-green:hover {color: #008000;}

.btn-limegreen {background-color: var(--limegreen); border-color: var(--limegreen); color: #fff;} .btn-limegreen:hover {color: #32CD32;}

.btn-forestgreen {background-color: var(--forestgreen); border-color: var(--forestgreen); color: #fff;} .btn-forestgreen:hover {color: #228B22;}

.btn-yellowgreen {background-color: var(--yellowgreen); border-color: var(--yellowgreen); color: #fff;} .btn-yellowgreen:hover {color: #9ACD32;}

.btn-greenyellow {background-color:var(--greenyellow); border-color: var(--greenyellow); color: #fff;} .btn-greenyellow:hover {color: #ADFF2F;}

.btn-lime {background-color: var(--lime); border-color: var(--lime); color: #fff;} .btn-lime:hover {color: #00FF00;}

.btn-olivedrab {background-color: var(--olivedrab); border-color:var(--olivedrab); color: #fff;} .btn-olivedrab:hover {color: #6B8E23;}

.btn-olive {background-color: var(--olive); border-color: var(--olive); color: #fff;} .btn-olive:hover {color: #808000;}

.btn-cyan {background-color: var(--cyan); border-color: var(--cyan); color: #fff;} .btn-cyan:hover {color: #00FFFF;}

.btn-darkturquoise {background-color: var(--darkturquoise); border-color: var(--darkturquoise); color: #fff;} .btn-darkturquoise:hover {color: #00CED1;}

.btn-teal {background-color:var(--teal); border-color: var(--teal); color: #fff;} .btn-teal:hover {color: #008080;}

.btn-blue {background-color: var(--blue); border-color: var(--blue); color: #fff;} .btn-blue:hover {color: #0000FF;}

.btn-deepskyblue {background-color: var(--deepskyblue); border-color: var(--deepskyblue); color: #fff;} .btn-deepskyblue:hover {color: #00BFFF;}

.btn-dodgerblue {background-color: var(--dodgerblue); border-color: var(--dodgerblue); color: #fff;} .btn-dodgerblue:hover {color: #1E90FF;}

.btn-royalblue {background-color:var(--royalblue); border-color: var(--royalblue); color: #fff;} .btn-royalblue:hover {color: #4169E1;}

.btn-purple {background-color: var(--purple); border-color: var(--purple); color: #fff;} .btn-purple:hover {color: #800080;}

.btn-indigo {background-color: var(--indigo); border-color:var(--indigo); color: #fff;} .btn-indigo:hover {color: #4B0082;}

.btn-darkviolet {background-color: var(--darkviolet); border-color: var(--darkviolet); color: #fff;} .btn-darkviolet:hover {color: #9400D3;}

.btn-magenta {background-color: var(--magenta); border-color: var(--magenta); color: #fff;} .btn-magenta:hover {color: #FF00FF;}

.btn-pink {background-color: var(--pink); border-color: var(--pink); color: #fff;} .btn-pink:hover {color: #FF1493;}

.btn-lightgray {background-color: var(--lightgray); border-color: var(--lightgray); color: #fff;} .btn-lightgray:hover {color: #D3D3D3;}

.btn-silver {background-color: var(--silver); border-color: var(--silver); color: #fff;} .btn-silver:hover {color: #C0C0C0;}

.btn-darkgray {background-color: var(--darkgray); border-color:var(--darkgray); color: #fff;} .btn-darkgray:hover {color: #A9A9A9;}

.btn-gray {background-color: var(--gray); border-color: var(--gray); color: #fff;} .btn-gray:hover {color: #808080;}

.btn-black {background-color: var(--black); border-color: var(--black); color: #fff;} .btn-black:hover {color: #000;}

.btn-chocolate {background-color: var(--chocolate); border-color: var(--chocolate); color: #fff;} .btn-chocolate:hover {color: #D2691E;}

.btn-maroon {background-color: var(--maroon); border-color: var(--maroon); color: #fff;} .btn-maroon:hover {color: #800000;}

.btn-brown {background-color: var(--brown); border-color: var(--brown); color: #fff;} .btn-brown:hover {color: #8B4513;}



.btn-outline-red {color: var(--red); border-color: var(--red);} .btn-outline-red:hover {color: #fff; background-color: var(--red);}

.btn-outline-darkred {color: var(--darkred); border-color: var(--darkred);} .btn-outline-darkred:hover {color: #fff; background-color: var(--darkred);}

.btn-outline-crimson {color: var(--crimson); border-color: var(--crimson);} .btn-outline-crimson:hover {color: #fff; background-color:var(--crimson);}

.btn-outline-firebrick {color: var(--firebrick); border-color: var(--firebrick);} .btn-outline-firebrick:hover {color: #fff; background-color: var(--firebrick);}

.btn-outline-coral {color: var(--coral); border-color: var(--coral);} .btn-outline-coral:hover {color: #fff; background-color: var(--coral);}

.btn-outline-tomato {color: var(--tomato); border-color: var(--tomato);} .btn-outline-tomato:hover {color: #fff; background-color:var(--tomato);}

.btn-outline-orangered {color: var(--orangered); border-color: var(--orangered);} .btn-outline-orangered:hover {color: #fff; background-color: var(--orangered);}

.btn-outline-orange {color: var(--orange); border-color: var(--orange);} .btn-outline-orange:hover {color: #fff; background-color: var(--orange);}

.btn-outline-darkorange {color: var(--darkorange); border-color: var(--darkorange)} .btn-outline-darkorange:hover {color: #fff; background-color: var(--darkorange);}

.btn-outline-gold {color: var(--gold); border-color: var(--gold);} .btn-outline-gold:hover {color: #fff; background-color: var(--gold);}

.btn-outline-yellow {color: var(--yellow); border-color: var(--yellow);} .btn-outline-yellow:hover {color: #fff; background-color: var(--yellow);}

.btn-outline-khaki {color: var(--khaki); border-color: var(--khaki);} .btn-outline-khaki:hover {color: #fff; background-color: var(--khaki);}

.btn-outline-darkkhaki {color: var(--darkkhaki); border-color: var(--darkkhaki);} .btn-outline-darkkhaki:hover {color: #fff; background-color: var(--darkkhaki);}

.btn-outline-green {color: var(--green); border-color: var(--green); background-color: #fff;} .btn-outline-green:hover {color: #fff; background-color: var(--green);}

.btn-outline-limegreen {color: var(--limegreen); border-color: var(--limegreen);} .btn-outline-limegreen:hover {color: #fff; background-color: var(--limegreen);}

.btn-outline-forestgreen {color: var(--forestgreen); border-color: var(--forestgreen);} .btn-outline-forestgreen:hover {color: #fff; background-color: var(--forestgreen);}

.btn-outline-yellowgreen {color: var(--yellowgreen); border-color: var(--yellowgreen);} .btn-outline-yellowgreen:hover {color: #fff; background-color: var(--yellowgreen);}

.btn-outline-greenyellow {color: var(--greenyellow); border-color: var(--greenyellow);} .btn-outline-greenyellow:hover {color: #fff; background-color: var(--greenyellow);}

.btn-outline-lime {color: var(--lime); border-color: var(--lime);} .btn-outline-lime:hover {color: #fff; background-color: var(--lime);}

.btn-outline-olivedrab {color: var(--olivedrab); border-color: var(--olivedrab);} .btn-outline-olivedrab:hover {color: #fff; background-color: var(--olivedrab);}

.btn-outline-olive {color: var(--olive); border-color: var(--olive);} .btn-outline-olive:hover {color: #fff; background-color: var(--olive);}

.btn-outline-cyan {color: var(--cyan); border-color: var(--cyan);} .btn-outline-cyan:hover {color: #fff; background-color: var(--cyan);}

.btn-outline-darkturquoise {color: var(--darkturquoise); border-color: var(--darkturquoise);} .btn-outline-darkturquoise:hover {color: #fff; background-color: var(--darkturquoise);}

.btn-outline-teal {color: var(--teal); border-color: var(--teal);} .btn-outline-teal:hover {color: #fff; background-color: var(--teal);}

.btn-outline-blue {color: var(--blue); border-color: var(--blue);} .btn-outline-blue:hover {color: #fff; background-color: var(--blue);}

.btn-outline-deepskyblue {color: var(--deepskyblue); border-color: var(--deepskyblue);} .btn-outline-deepskyblue:hover {color: #fff; background-color: var(--deepskyblue);}

.btn-outline-dodgerblue {color: var(--dodgerblue); border-color: var(--dodgerblue);} .btn-outline-dodgerblue:hover {color: #fff; background-color: var(--dodgerblue);}

.btn-outline-royalblue {color: var(--royalblue); border-color: var(--royalblue);} .btn-outline-royalblue:hover {color: #fff; background-color: var(--royalblue);}

.btn-outline-purple {color: var(--purple); border-color:var(--purple);} .btn-outline-purple:hover {color: #fff; background-color:var(--purple);}

.btn-outline-indigo {color: var(--indigo); border-color:var(--indigo);} .btn-outline-indigo:hover {color: #fff; background-color: var(--indigo);}

.btn-outline-darkviolet {color: var(--darkviolet); border-color: var(--darkviolet);} .btn-outline-darkviolet:hover {color: #fff; background-color: var(--darkviolet);}

.btn-outline-magenta {color: var(--magenta); border-color: var(--magenta);} .btn-outline-magenta:hover {color: #fff; background-color: var(--magenta);}

.btn-outline-pink {color: var(--pink); border-color: var(--pink);} .btn-outline-pink:hover {color: #fff; background-color:var(--pink);}

.btn-outline-lightgray {color: var(--lightgray); border-color: var(--lightgray);} .btn-outline-lightgray:hover {color: #fff; background-color: var(--lightgray);}

.btn-outline-silver {color: var(--silver); border-color: var(--silver);} .btn-outline-silver:hover {color: #fff; background-color: var(--silver);}

.btn-outline-darkgray {color: var(--darkgray); border-color: var(--darkgray);} .btn-outline-darkgray:hover {color: #fff; background-color: var(--darkgray);}

.btn-outline-gray {color: var(--gray); border-color:var(--gray);} .btn-outline-gray:hover {color: #fff; background-color: var(--gray);}

.btn-outline-black {color: var(--black); border-color:var(--black);} .btn-outline-black:hover {color: #fff; background-color: var(--black);}

.btn-outline-chocolate {color: var(--chocolate); border-color: var(--chocolate);} .btn-outline-chocolate:hover {color: #fff; background-color: var(--chocolate);}

.btn-outline-maroon {color: var(--maroon); border-color: var(--maroon);} .btn-outline-maroon:hover {color: #fff; background-color: var(--maroon);}

.btn-outline-brown {color: var(--brown); border-color: var(--brown);} .btn-outline-brown:hover {color: #fff; background-color: var(--brown);}