@mixin hyphens(){

word-wrap: break-word;
overflow-wrap: break-word;

-webkit-hyphens: auto;

-moz-hyphens: auto;
     hyphens: auto;

}

@mixin body-font(){

font-size: 1.4rem;
@media (min-width: 400px) {
  font-size: 1.5rem;
}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
  font-size: 1.6rem;
}
/* Larger than tablet */
@media (min-width: 750px) {
  font-size: 1.7rem;
}

}

body {

font-family: $font_text;
font-size: 1.5em;
@include body-font();
color: $color_font;
font-weight:400;
color: $color_font;

} h1, h2, h3 {

font-family: $font_decoration;
@include hyphens();

}

.header {

color: $color_font_inverse_light;
background-color: $color_background_inverse;

}

content {

margin-bottom: 5em;

}

.container {

max-width: 960px;

&.start {
  margin-top: 2em;
}

img, picture {
  max-width: 100%;
}

}

a {

color: $color_primary;
text-decoration: none;

&:hover {
  color: $color_primary_hover;
  text-decoration: underline;
}

}

hr {

clear: both;

}

img {

height: auto;

}

h1 {

font-size: 2.5em;
font-weight: 800;
line-height: 1.1em;
letter-spacing: -0.05em;
color: $color_font_dark;
/* Larger than mobile */
@media (min-width: 400px) {
  font-size: 3em;
}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
  font-size: 4em;
}
/* Larger than tablet */
@media (min-width: 750px) {
  font-size: 5em;
}

}

table, pre {

display: block;
overflow-x: auto;

}

h2 {

font-size: 2.25em;
font-weight: 600;
padding:1.2em 0 0.3em;

} h3 {

font-size: 1.5em;
font-weight: 600;

}

p {

font-size: 1.1em;
line-height: 1.8em;

}

blockquote {

background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";

} blockquote:before {

color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
vertical-align: -0.4em;

} blockquote p {

display: inline;

}

button, .button {

text-transform: uppercase;
border:2px solid $color_primary;
color:$color_primary;
font-family: $font_decoration;
font-weight:normal;
@include body-font();
padding: 8px 22px;
letter-spacing: 0.02rem;
height:auto;
border-radius: 50px;
white-space: normal;

} button:hover, .button:hover {

text-decoration: none;
color:#fff;
background-color: $color_primary;
border-color: $color_primary;

}

.footer {

text-align: center;
border-top: 5px solid $color_primary;
padding: 1em 0 3em;

}

.footer-logo {

display: inline-block;
font-size: 1.8em;
color: $color_font;

}

.footer-nav, .footer-logo, .footer-copyright {

margin-bottom: 1em;

}

.footer-nav {

a {
  padding-right: 5px;
  text-decoration: none;
}

}