/*
 *
 * btns.css
 * Simple css utilities for building responsive buttons
 * Author: mrmrs
 * License: MIT
 *
 *                */
/*

  Base .btn class

  Code:
  <a href="#" class="btn">Default button</a>

*/
.btn, .btn:link, .btn:visited {
  border-radius: 0.25em;
  border-style: solid;
  border-width: 1px;
  color: #111;
  display: inline-block;
  font-family: avenir, helvetica, roboto, arial, sans-serif;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: color 0.4s, background-color 0.4s, border 0.4s;
  transition: color 0.4s, background-color 0.4s, border 0.4s; }

.btn:hover, .btn:focus {
  color: #7FDBFF;
  border: 1px solid #7FDBFF;
  -webkit-transition: background-color 0.3s, color 0.3s, border 0.3s;
  transition: background-color 0.3s, color 0.3s, border 0.3s; }

.btn:active {
  color: #0074D9;
  border: 1px solid #0074D9;
  -webkit-transition: background-color 0.3s, color 0.3s, border 0.3s;
  transition: background-color 0.3s, color 0.3s, border 0.3s; }

/*

  Sizes

  Small  = .btn--s
  Medium = .btn--m
  Large  = .btn--l

  Code:
  <a href="#" class="btn btn--s">
  <a href="#" class="btn btn--m">
  <a href="#" class="btn btn--l">

*/
.btn--s {
  font-size: 14px; }

.btn--m {
  font-size: 16px; }

.btn--l {
  font-size: 20px;
  border-radius: 0.25em !important; }

/*

  Layout utility for responsive buttons

  Code:
  <a href="#" class="btn btn--full">

*/
.btn--full, .btn--full:link {
  border-radius: 0.25em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 100%; }

/*

  Skins

  * Black & White
  * Grays
  * Colors

  Code:
  <a href="#" class="btn btn--black">
  <a href="#" class="btn btn--white">
  <a href="#" class="btn btn--gray">
  <a href="#" class="btn btn--gray-dark">
  <a href="#" class="btn btn--gray-border">
  <a href="#" class="btn btn--blue">

*/
/* BLACK & WHITE */
.btn--black, .btn--black:link, .btn--black:visited {
  color: #fff;
  background-color: #111; }

.btn--black:hover, .btn--black:focus {
  color: #fff;
  background-color: #444;
  border-color: #444; }

.btn--black:active {
  color: #fff;
  background-color: #999;
  border-color: #999; }

.btn--white, .btn--white:link, .btn--white:visited {
  color: #111;
  background-color: #fff; }

.btn--white:hover, .btn--white:focus {
  color: #111;
  background-color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.7); }

.btn--white:active {
  color: #111;
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9); }

/* Gray */
.btn--gray:link, .btn--gray:visited {
  background-color: #f0f0f0;
  border-color: #f0f0f0;
  color: #555; }

.btn--gray:hover, .btn--gray:focus {
  background-color: #ddd;
  border-color: #ddd;
  color: #444; }

.btn--gray:active {
  background-color: #ccc;
  border-color: #ccc;
  color: #444; }

.btn--gray-border:link, .btn--gray-border:visited {
  background-color: #fff;
  border-color: #555;
  border-width: 2px;
  color: #555; }

.btn--gray-border:hover, .btn--gray-border:focus {
  background-color: #fff;
  border-color: #ddd;
  color: #777; }

.btn--gray-border:active {
  background-color: #ccc;
  border-color: #ccc;
  color: #444; }

.btn--gray-dark:link, .btn--gray-dark:visited {
  background-color: #555;
  color: #eee; }

.btn--gray-dark:hover, .btn--gray-dark:focus {
  background-color: #333;
  border-color: #333;
  color: #eee; }

.btn--gray-dark:active {
  background-color: #777;
  border-color: #777;
  color: #eee; }

/* BLUE */
.btn--blue:link, .btn--blue:visited {
  color: #fff;
  background-color: #0074D9; }

.btn--blue:hover, .btn--blue:focus {
  color: #fff !important;
  background-color: #0063aa;
  border-color: #0063aa; }

.btn--blue:active {
  color: #fff;
  background-color: #001F3F;
  border-color: #001F3F; }
  
/*YELLOW*/
.btn--yellow:link, .btn--yellow:visited {
  color: #000;
  background-color: #FFFF00; }

.btn--yellow:hover, .btn--yellow:focus {
  color: #000 !important;
  background-color: #ffff80;
  border-color: #ffff80; }

.btn--yellow:active {
  color: #000;
  background-color: #ffff4d;
  border-color: #ffff4d; }  


/*FUCSIA */
.btn--fucsia:link, .btn--fucsia:visited {
  color: #fff;
  background-color: #ff3399; }

.btn--fucsia:hover, .btn--fucsia:focus {
  color: #fff !important;
  background-color: #ff80bf;
  border-color: #ff80bf; }

.btn--fucsia:active {
  color: #fff;
  background-color:#ff80bf;
  border-color: #ff80bf; }  
  
/*FUCSIA */
.btn--green:link, .btn--green:visited {
  color: #000;
  background-color:  #00cc00; }

.btn--green:hover, .btn--green:focus {
  color: #000 !important;
  background-color: #4dff4d;
  border-color: #4dff4d; }

.btn--green:active {
  color: #000;
  background-color:#4dff4d;
  border-color: #4dff4d; } 
  
/*PINK*/
.btn--pink:link, .btn--pink:visited {
  color: #000;
  background-color:  #ffccff ; }

.btn--pink:hover, .btn--pink:focus {
  color: #000 !important;
  background-color: #ff4dff;
  border-color: #ff4dff; }

.btn--pink:active {
  color: #000;
  background-color: #ff4dff;
  border-color: #ff4dff; }  
 
/*orange*/
.btn--orange:link, .btn--orange:visited {
  color: #000;
  background-color:  #ff9900 ; }

.btn--orange:hover, .btn--orange:focus {
  color: #000 !important;
  background-color: #ffb84d;
  border-color: #ffb84d; }

.btn--orange:active {
  color: #000;
  background-color: #ffb84d;
  border-color: #ffb84d; }

/*dark-blue*/
.btn--dark-blue:link, .btn--dark-blue:visited {
  color: #fff;
  background-color:  #0033cc ; }

.btn--dark-blue:hover, .btn--dark-blue:focus {
  color: #fff !important;
  background-color: #4d79ff;
  border-color: #4d79ff; }

.btn--dark-blue:active {
  color: #fff;
  background-color: #4d79ff;
  border-color: #4d79ff; }  
  
/*red*/
.btn--red:link, .btn--red:visited {
  color: #fff;
  background-color:  #ff0000 ; }

.btn--red:hover, .btn--red:focus {
  color: #fff !important;
  background-color: #ff4d4d;
  border-color: #ff4d4d; }

.btn--red:active {
  color: #fff;
  background-color: #ff4d4d;
  border-color: #ff4d4d; }    
 
/*magenta*/
.btn--magenta:link, .btn--magenta:visited {
  color: #fff;
  background-color: #A1009F; }

.btn--magenta:hover, .btn--magenta:focus {
  color: #fff !important;
  background-color: #FF42F9;
  border-color: #ff4d4d; }

.btn--magenta:active {
  color: #fff;
  background-color: #FF42F9;
  border-color: #ff4d4d; }      
 

/* Keep it mobile-first and responsive */
@media screen and (min-width: 32em) {
  .btn--full {
    max-width: 16em !important; } }