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

UTILITY CLASSES
========================================================================== */

/*

Visibility
========================================================================== */

/* www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */

.hidden {

display: none;
visibility: hidden;

}

/* for preloading images */

.load {

display: none;

}

.transparent {

opacity: 0;

}

/* developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */

.visually-hidden, .screen-reader-text, .screen-reader-text span, .screen-reader-shortcut {

position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
height: 1px !important;
width: 1px !important;
border: 0 !important;
overflow: hidden;

}

body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button {

display: none !important;

}

/* screen readers */

.screen-reader-text:focus, .screen-reader-shortcut:focus {

clip: auto !important;
height: auto !important;
width: auto !important;
display: block;
font-size: 1em;
font-weight: bold;
padding: 15px 23px 14px;
background: #fff;
z-index: 100000;
text-decoration: none;
box-shadow: 0 0 2px 2px rgba(0,0,0,.6);

}

/*

Skip links
========================================================================== */

.skip-link {

position: fixed;
z-index: 20;
margin: 0;
font-family: $sans-serif;
white-space: nowrap;

}

.skip-link li {

height: 0;
width: 0;
list-style: none;

}

/*

Type
========================================================================== */

.text-left {

text-align: left;

}

.text-center {

text-align: center;

}

.text-right {

text-align: right;

}

.text-justify {

text-align: justify;

}

.text-nowrap {

white-space: nowrap;

}

/*

Alignment
========================================================================== */

/* clearfix */

.cf { clear: both; }

.wrapper {

@include container();

}

/*

Images
========================================================================== */

/* image align left */

.align-left {

display: block;
margin-left: auto;
margin-right: auto;

@include breakpoint($small) {
  float: left;
  margin-right: 1em;
}

}

/* image align right */

.align-right {

display: block;
margin-left: auto;
margin-right: auto;

@include breakpoint($small) {
  float: right;
  margin-left: 1em;
}

}

/* image align center */

.align-center {

display: block;
margin-left: auto;
margin-right: auto;

}

/* file page content container */

.full {

@include breakpoint($large){
  margin-right: -1 * span(2.5 of 12) !important;
}

}

/*

Icons
========================================================================== */

.icon {

display: inline-block;
fill: currentColor;
width: 1em;
height: 1.1em;
line-height: 1;
position: relative;
top: -0.1em;
vertical-align: middle;

}

/* social icons*/

.social-icons {

.fa {
  color: #000;
}

.fa-behance,
.fa-behance-square {
  color: $behance-color;
}

.fa-dribbble {
  color: $dribbble-color;
}

.fa-facebook,
.fa-facebook-square {
  color: $facebook-color;
}

.fa-flickr {
  color: $flickr-color;
}

.fa-foursquare {
  color: $foursquare-color;
}

.fa-github,
.fa-github-alt,
.fa-github-square {
  color: $github-color;
}

.fa-google-plus,
.fa-google-plus-square {
  color: $google-plus-color;
}

.fa-instagram {
  color: $instagram-color;
}

.fa-lastfm,
.fa-lastfm-square {
  color: $lastfm-color;
}

.fa-linkedin,
.fa-linkedin-square {
  color: $linkedin-color;
}

.fa-pinterest,
.fa-pinterest-p,
.fa-pinterest-square {
  color: $pinterest-color;
}

.fa-rss,
.fa-rss-square {
  color: $rss-color;
}

.fa-soundcloud {
  color: $soundcloud-color;
}

.fa-stack-exchange,
.fa-stack-overflow {
  color: $stackoverflow-color;
}

.fa-tumblr,
.fa-tumblr-square {
  color: $tumblr-color;
}

.fa-twitter,
.fa-twitter-square {
  color: $twitter-color;
}

.fa-vimeo,
.fa-vimeo-square {
  color: $vimeo-color;
}

.fa-vine {
  color: $vine-color;
}

.fa-youtube,
.fa-youtube-square,
.fa-youtube-play {
  color: $youtube-color;
}

.fa-xing,
.fa-xing-square {
  color: $xing-color;
}

}

/*

Navicons
========================================================================== */

.navicon {

position: relative;
width: $navicon-width;
height: $navicon-height;
background: #fff;
margin: auto;
-webkit-transition: 0.3s;
transition: 0.3s;

&:before,
&:after {
  content: "";
  position: absolute;
  left: 0;
  width: $navicon-width;
  height: $navicon-height;
  background: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

&:before {
  top: (-2 * $navicon-height);
}

&:after {
  bottom: (-2 * $navicon-height);
}

}

.close .navicon {

/* hide the middle line*/
background: transparent;

/* overlay the lines by setting both their top values to 0*/
&:before, &:after{
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  top: 0;
  width: $navicon-width;
}

/* rotate the lines to form the x shape*/
&:before{
  -webkit-transform: rotate3d(0,0,1,45deg);
          transform: rotate3d(0,0,1,45deg);
}
&:after{
  -webkit-transform: rotate3d(0,0,1,-45deg);
          transform: rotate3d(0,0,1,-45deg);
}

}

/*

Sticky, fixed to top content
========================================================================== */

.sticky {

@include breakpoint($large) {
  @include clearfix();
  position: -webkit-sticky;
  position: sticky;
  top: 2em;

  > * {
    display: block;
  }
}

}

/*

Wells
========================================================================== */

.well {

min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: $border-radius;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);

}

/*

Modals
========================================================================== */

.show-modal {

overflow: hidden;
position: relative;

&:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.85);
}

.modal {
  display: block;
}

}

.modal {

display: none;
position: fixed;
width: 300px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
min-height: 0;
z-index: 9999;
background: #fff;
border: 1px solid $border-color;
border-radius: $border-radius;
box-shadow: $box-shadow;

&__title {
  margin: 0;
  padding: 0.5em 1em;
}

&__supporting-text {
  padding: 0 1em 0.5em 1em;
}

&__actions {
  padding: 0.5em 1em;
  border-top: 1px solid $border-color;
}

}

/*

Footnotes
========================================================================== */

.footnote {

color: mix(#fff, $gray, 25%);
text-decoration: none;

}

.footnotes {

color: mix(#fff, $gray, 25%);

ol, li, p {
  margin-bottom: 0;
  font-size: $type-size-6;
}

}

a.reversefootnote {

color: $gray;
text-decoration: none;

&:hover {
  text-decoration: underline;
}

}

/*

Required
========================================================================== */

.required {

color: $danger-color;
font-weight: bold;

}