/*!
 * Hover.css (http://ianlunn.co.uk/)
 * Version: 1.0.8
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014.
 */
/* Default styles for the demo buttons */
.button {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight:300;
width: 220px;
margin: 230px 14px;
padding: .5em;
cursor: pointer;
background: #333333;
text-decoration: none;
color: #fff;
-webkit-tap-highlight-color: rgba(167, 0, 0, 0.8);
opacity: .6;
font-size: 20px;
text-align: center;
letter-spacing: .05em;
}
.button:hover {color:#EEEEEE;}


/* Outline Outward */

 .outline-outward {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.outline-outward:before {
  content: '';
position: absolute;
border: #FFF solid 5px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}

.outline-outward:hover:before, .outline-outward:focus:before, .outline-outward:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

/* Outline Inward */
.outline-inward {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.outline-inward:before {
  pointer-events: none;
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-inward:hover:before, .outline-inward:focus:before, .outline-inward:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}

/* Medium Devices, Desktops */
@media only screen and (min-width :1200px) {
.button {margin: 230px 40px;}
}