@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600&display=swap');

/* FONTS */
@font-face {
  font-family: 'Just Lovely Slanted';
  src: url('../JustLovelySlanted.eot');
  src: url('../fonts/JustLovelySlanted.eot?#iefix') format('embedded-opentype'),
    url('../fonts/JustLovelySlanted.woff2') format('woff2'),
    url('../fonts/JustLovelySlanted.woff') format('woff'),
    url('../fonts/JustLovelySlanted.ttf') format('truetype'),
    url('../fonts/JustLovelySlanted.svg#JustLovelySlanted') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Acherus Grotesque";
  src: url("../fonts/acherus_grotesque_regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Acherus Grotesque";
  src: url("../fonts/acherus_grotesque_bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

html {
  height: 100%;
}
html, body {
  color: #000;
  height: 100%;
  font-size: 16.5px;
  line-height: 28px;
  text-rendering: optimizeLegibility;
}

/* LAYOUT */
.container {   
  max-width: 1200px;
}
.hidden {
  display: none;
}

* {
  outline: none;
  font-family: 'Acherus Grotesque', sans-serif;
}

.hero-overlay {
  position: absolute;
  background-color: rgba(0,0,0,0.45);
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* H1, etc */
h1 {
  font-family: 'Just Lovely Slanted';
  font-size: 300px;
  line-height: 120px;
  padding: 0;
  margin: 0;
  color: #FFF;
}
h1 span {
  font-size: 250px;
  margin-left: 380px;
}
h2 {
  color: #FFF;
  font-size: 27px;
  line-height: 40px;
}
#home-hero h2 {
  max-width: 790px;
  margin: 15px auto 30px auto;
}

.bknd-blue {
  background-color: #414E57;
}

.grow, .page a {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
}
.grow:hover, .page a:hover,
.grow:focus, .page a:focus,
.grow:active, .page a:active {
  transform: scale(1.057) !important;
}


/* PAGES */
.page #page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; 
  height: 100vh;
  min-height: 500px;
  background-size: cover;
  background-position: center;
}

.heart {
  height: 90px;
  width: auto;
}

.page #page-hero.hero-contact {
  background-image: url('../images/top-contact.jpg');
}

.page h1 {
  font-size: 140px;
  line-height: 140px;
  margin-top: 50px;
}
.page h2 {
  font-size: 28px;
  line-height: 38px;
  max-width: 75%;
  margin: 10px auto;
}