/*
Base 
*/

html{
  background: transparent;
}
body {
  color: $text-color;
  font-size: $font-size;
  background-color: $body-bg;
}

*:focus {
  outline: 0 !important;
}

a {
  color: $link-color;
  text-decoration: none;
  cursor: pointer;
  outline: 0;
}
a:hover,
a:focus {
  color: $hover-color;
  text-decoration: none;
}

button{
  color: inherit;
}

pre {
  color: inherit;
  background-color: $light;
  border-color: $border-color;
}

code{
  background-color: $border-color;
}

blockquote{
  border-color: $border-color;
}

small{
  font-size: 90%;
}

sup{
  position: relative; 
  top: -1em; 
  font-size: 75%
}

.pull-center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
}

.close{
  font-size: 1.3rem;
}

.img-responsive{
  width: 100%;
  height: auto;
}

.text-center{
  text-align: center;
}

.text-left{
  text-align: left;
}

.text-right{
  text-align: right;
}

.pull-left{
  float: left;
}

.pull-right{
  float: right;
}

.center-block{
  margin: 0 auto;
}

@include media-breakpoint-down(lg){
  .pull-none-lg{
    float: none !important;
  }
  .pull-right-lg{
    float: right !important;
  }
  .pull-left-lg{
    float: left !important;
  }
}

@include media-breakpoint-down(md){
  .pull-none-md{
    float: none !important;
  }
  .pull-right-md{
    float: right !important;
  }
  .pull-left-md{
    float: left !important;
  }
}

@include media-breakpoint-down(sm){
  .pull-none-sm{
    float: none !important;
  }
  .pull-right-sm{
    float: right !important;
  }
  .pull-left-sm{
    float: left !important;
  }
}

@include media-breakpoint-down(xs){
  .pull-none-xs{
    float: none !important;
  }
  .pull-right-xs{
    float: right !important;
  }
  .pull-left-xs{
    float: left !important;
  }
}
