/*==========================================================================
  Base
  ========================================================================== */

/**
  * Base settings
  *
  */
html, body
  padding: 0
  margin: 0
  background:
    color: $lightestBlue

  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility

/**
  * Set up the base font size for using rem
  *
  */
html
  font-size: $baseFontSize

body
  font-family: 'Lato', sans-serif
  font-weight: regular()
  line-height: 1.6

*
  box-sizing: border-box
  ::selection
    background: $yellow
    color: white

img
  border: none
  display: block

/**
  * 1. Give all images in a figure tag 100% width
  *
  */

a
  color: $blue
  transition: color 0.4s ease
  &:hover
    color: $darkBlueGreen

figure
  margin: 0

  img
    width: 100% /* 1 */

.relative
  position: relative

h1, h2, h3, h4, h5
  margin: 0
  width: 100%

p
  width: 100%

.button-default
  text-decoration: none
  font-weight: black()
  text-transform: uppercase
  padding: 15px

  border: 4px solid transparent
  +border-bottom-radius(2px)
  +border-top-radius(2px)

  cursor: pointer
  transition: color, background-color 0.4s ease

  +respond-to-width($smGridBreakpoint)
    font-size: 0.85rem

input, textarea
  +placeholder
    opacity: 1
    +translate3d(0, 0, 0)
    transition: all 0.3s

input:focus, textarea:focus
  +placeholder
    opacity: 0
    +translate3d(20px, 0, 0)

input::-moz-placeholder, textarea::-moz-placeholder
  opacity: 0.5

/**
  * Put this class on each item you want to disappear on mobile
  *
  */
.hide-on-mobile
  +respond-to-width($smGridBreakpoint)
    display: none

.mobile-wrapper
  +respond-to-width($smGridBreakpoint)
    overflow-x: hidden