/* ====================================================

 @company: Siteimprove
 @contributors: Rickard Andersson, ria@siteimprove.com
 @content: Buttons

======================================================= */

/****************************************
  ==== LAYOUT
****************************************/

.btn { 
  line-height: 22px; display: block; float: left; position: relative; overflow: hidden; padding: 12px 25px; font-size: 1.8em; font-weight: 700; text-align: center; cursor: pointer; text-decoration: none; margin: 0; border: 0; outline: 0; border-image-width: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; transition: all .1s ease-in-out; -webkit-box-shadow: 0 2px 0 rgba(60,72,94,0.1); -moz-box-shadow: 0 2px 0 rgba(60,72,94,0.1); box-shadow: 0 2px 0 rgba(60,72,94,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
.btn, .btn:hover, .btn:focus, .btn:active {
  color: #fff; text-decoration: none; outline: 0;
}
.btn:active {
  -webkit-transform: scale(0.98); -moz-transform: scale(0.98); transform: scale(0.98); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}

/****************************************
  ==== SIZES
****************************************/

.btn.l {
  padding: 19px 40px; font-size: 2.4em;
}
.btn.s {
  padding: 5px 15px; font-size: 1.6em;
}
.btn.s:active {
  -webkit-transform: scale(0.97); -moz-transform: scale(0.97); transform: scale(0.97);
}

/****************************************
  ==== COLORS
****************************************/

.btn {
  background-color: #0e38b1; /* Blue */
}
.btn:hover, .btn:focus, .btn:active {
  background-color: #13317b;
}
.btn.outlined {
  background: transparent; border: #3b475e 1px solid; color: #3b475e; padding: 14px 30px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}

.btn.outlined:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0 2px #99e5ff;
    box-shadow: 0 0 0 2px #99e5ff;
}

/****************************************
  ==== TRANSPARENT
****************************************/

.btn.trans {
  background: transparent; color: #3c485e; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}

.btn.trans:focus, .btn.trans:active {
  background: #f4f4f4;
}

/****************************************
  ==== POSITIONS
****************************************/

.btn.center {
  float: none; display: inline-block; vertical-align: top;
}

/****************************************
  ==== DISABLED
****************************************/

.btn.disabled {
  background: #e1e2e5; color: #8e8f92; font-style: italic; cursor: not-allowed;-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
.btn.disabled:active {
  -webkit-transform: none; -moz-transform: none; transform: none;
}

/****************************************
  ==== BREAKPOINT: 1024px
****************************************/

@media only screen and (max-width: 1024px){

.btn { 
  padding: 9px 15px; font-size: 1.6em;
}
.btn.l {
  padding: 13px 25px; font-size: 2.0em;
}
.btn.s {
  padding: 5px 10px; font-size: 1.5em;
}

}