/*
 *
 *  IN LOCO
 *  www.inlocomedia.com
 *
 *  Copyright 2016 - All Rights Reserved.
 *
 *  -------- SUPERNOVA ---------
 *      general sass file
 *  ----------- *** ------------
 *
 */


@import "general_variables";


// HTML & BODY

body, html {
  margin: 0;
  padding: 0;
  font-family: $default-font-family;
  font-weight: $default-font-weight;
  font-size: $default-font-size;
  line-height: $default-line-height;
  color: $default-body-text-color;
  background-color: $default-body-background-color;
}

body {
  width: 100%;
  min-height: 100%;
  &::after,
  &::before {
    box-sizing: border-box;
  }
}


// Links

a {
  color: $default-text-link-color;
  text-decoration: none;
}


// Dividers

hr {
  color: $default-dividers-color;
  background-color: $default-dividers-color;
  border: 0;
  height: ($vm / 4);
}


// Hidden

.is-hidden {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: $mobile-small) {
  .is-hidden--mobile-sm {
    display: none !important;
  }
}
@media (max-width: $mobile-large) {
  .is-hidden--mobile-lg {
    display: none !important;
  }
}
@media (max-width: $tablet-xxsmall) {
  .is-hidden--tablet-xxsm {
    display: none !important;
  }
}
@media (max-width: $tablet-xsmall) {
  .is-hidden--tablet-xsm {
    display: none !important;
  }
}
@media (max-width: $tablet-small) {
  .is-hidden--tablet-sm {
    display: none !important;
  }
}
@media (max-width: $tablet-xmedium) {
  .is-hidden--tablet-xmd {
    display: none !important;
  }
}
@media (max-width: $tablet-medium) {
  .is-hidden--tablet-md {
    display: none !important;
  }
}
@media (max-width: $tablet-large) {
  .is-hidden--tablet-lg {
    display: none !important;
  }
}
@media (max-width: $screen-xsmall) {
  .is-hidden--screen-xsm {
    display: none !important;
  }
}
@media (max-width: $screen-small) {
  .is-hidden--screen-sm {
    display: none !important;
  }
}
@media (max-width: $screen-xmedium) {
  .is-hidden--screen-xmd {
    display: none !important;
  }
}
@media (max-width: $screen-medium) {
  .is-hidden--screen-md {
    display: none !important;
  }
}
@media (max-width: $screen-large) {
  .is-hidden--screen-lg {
    display: none !important;
  }
}
@media (max-width: $mobile-threshold) {
  .is-hidden--mobile-threshold {
    display: none !important;
  }
}
@media (max-width: $tablet-threshold) {
  .is-hidden--tablet-threshold {
    display: none !important;
  }
}
@media (max-width: $screen-threshold) {
  .is-hidden--screen-threshold {
    display: none !important;
  }
}



// Fit page

.fit {
  min-height: 100% !important;
  height: auto;
  width: 100% !important;
  position: fixed !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow:hidden;
  z-index: 9999;
  padding: 48px 16px;
  background-color: rgba(255,255,255, 0.95) !important;
  img {
    max-height: 100% !important;
  }
  &:before {
    content: attr(data-fit)" ";
    position: absolute;
    width: 48px;
    height: 48px;
    cursor: pointer;
    top: 24px;
    left: 16px;
    font-size: 16px;
  }
  &:after {
    display: inline-block;
    font-family: 'Inlocomedia Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    outline: none;
    font-size: 24px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e627";
    position: absolute;
    width: 48px;
    height: 48px;
    cursor: pointer;
    top: 24px;
    right: 12px;
  }
}