/*
 *
 * 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.3em;
  border-style: solid;
  border-width: 1px;
  color: #b8e2e2;
  display: inline-block;
  font-size: 1.28em;
  font-weight: 700;
  letter-spacing: 0.05em;
  /*margin-bottom: 0.5em;*/
  padding: .48em;
  text-decoration: none;
  -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 #b8e2e2;
  -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 #b8e2e2;
  -webkit-transition: background-color 0.3s, color 0.3s, border 0.3s;
  transition: background-color 0.3s, color 0.3s, border 0.3s; }


/* 

  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%; }



/* BLUES */
.btn--blue:link, .btn--blue:visited {
  color: #17413c;
  background-color: #b8e2e2;
  border-color: #b8e2e2;}

.btn--blue:hover, .btn--blue:focus {
  color: #17413c !important;
  background-color: #b8e2e2;
  border-color: #b8e2e2; }

.btn--blue:active {
  color: #17413c;
  background-color: #b8e2e2;
  border-color: #b8e2e2; }

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