:root {
    --max-width: 1100px;
    --red: #c72727;
    --blue: dodgerblue;
    --dark: #171715;
    --page1: #6e7f80;
    --page2: #536872;
    --page3: #708090;
    --page4: #536878;
    --page5: #36454f;
    --animate-speed: 4s;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:'Cormorant Garamond', serif;
  background: #fff;
  line-height: 2rem;
  overflow-y: scroll;
  }

a {
  text-decoration: none;
  color: #333;
  }

h1, h2, h3 {
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: left;
  }

img {
  width: 100%;
  }

p {
  font-family:'Cormorant Garamond', serif;
  font-size: 18px;
  padding: 20px 40px;
  line-height: 2.4rems;
  font-size: 20px;
  color:#fff;
  }

ul {
  list-style: none;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

/* Global  Classes */

.base {
  }

.btn {
  display: inline-block;
  font-size: 18px;
  color: #fff;
  background: #333;
  padding: 6px 20px;
  border: none;
  cursor: pointer;
  }

.blockquote {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding: 20px 50px 0 50px;
  font-size: 18px;
  line-height: 3rem;
  color: #333;
  margin: 1rem 1rem;
  }

.card {
  background: #fff;
  padding: 1em;
  }

.head {
  height: 100px;
  }

.left {
  padding-left: 50px;
  }

.right {
  text-align: right;
  }

.spacer50 {
  padding-top: 50px;
}

.spacer100 {
  padding-top: 100px;
}

/* Global Colors */

.morange {
  color: #ff6600;
  }

.grey {
  color: #6e7f80;
  }

.light {
  color: #ccb9ac;
  }

.dark {
  color: #333;
  }

.blue {
  color: dodgerblue;
  }

.red {
  color: #c72727;
  }

/* Global Page Settings */

#nav {
  position: relative;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  width: 100%;
  height: 100px;
  position: fixed;
  padding: 0 50px;
  }

.nav .top {
  background: transparent;
  }

.nav a {
  color: #333;
  padding: 5px 20px;
  margin: 0 5px;
  }

.nav a:hover {
  background: red;
  color: #fff;
  }

.nav ul {
  display: flex;
  margin-top: 20px;
  }

.nav a.current {
  color: dodgerblue;
  }

.navbar {
  display: flex;
  align-items: right;
  justify-content: space-between;
  background: #333;
  width: 100%;
  height: 100px;
  opacity: .8;
  position: fixed;
  padding: 10px 20px;
  }

.navbar .top {
  background: transparent;
  }

.navbar a {
  color: #fff;
  padding: 0 20px;
  margin: 0 20px 0 0;
  }

.navbar ul {
  display: flex;
  margin-top: 20px;
    }

.logo {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 28px;
  color: #333;
  padding: 20px 0;
  align-items: left;
  margin-left: 50px;
  }

.logo-white {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 28px;
  color: #fff;
  padding: 20px 0;
  align-items: left;
  margin-left: 50px;
  }

#main-grid21 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  }

#main-grid11 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  }

/* Home Header */

#home {
  background: url('../img/hearts on a string.jpg') no-repeat center center/cover;
  height: 60vh;
  }

.home {
  width: 100%;
  }

.main {
  color: #333;
  padding: 20px 50px 20px 100px;
  }

.main p {
  font-family:'Times New Roman', Times, serif;
  padding: 20px 50px;
  color: #333;
  font-size: 20px;
  line-height: 3rem;
  }

.main h2 {
  font-size: 28px;
  padding: 50px 0 0 50px;
  color: dodgerblue;
  }

.main h3 {
  font-size: 21px;
  padding: 20px 0 0 50px;
  color: #708090;
  }

.main a {
  text decoration: none;
  color: dodgerblue;
  }

/* Sidebar */

.sidebar {
  background: #f2f3f4;
  width: 100%;
  }

.sidebar p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 20px 40px;
  font-size: 16px;
  color: #333;
  line-height: 2rem;
  }

.sidebar h2 {
  font-size: 20px;
  padding: 50px 0 0 40px;
  color: dodgerblue;
  }

/* About Header */

#about {
  background: url('../img/bw two kids.jpg') no-repeat center center/cover;
  height: 60vh;
  }

.about {
  padding: 20px 20px;
  }

.about h2 {
  padding: 20px 0 0 40px;
  color: dodgerblue;
  }

.about h3 {
  padding: 10px 0 0 40px;
  color: #536872;
  }

.about img {
  padding: 50px;
  }

.about p {
  font-family:'Cormorant Garamond', serif;
  font-size: 20px;
  color: #333;
  line-height: 3rem;
  text-align: left;
  }

/* Services Header */

#services {
  background: url('../img/beach people walking.jpg') no-repeat center center/cover;
  height: 50vh;
  }

.services{
  padding: 20px 20px;
  }

.services h2 {
  padding: 50px 0 0 40px;
  color: #6e7f80;
  }

.services h3 {
  font-size: 15px;
  padding: 30px 50px 0 50px;
  color: red;
}

.services img {
  padding: 50px;
}

.services p {
  font-family:'Cormorant Garamond', serif;
  font-size: 20px;
  color: #333;
  line-height: 2rem;
  text-align: left;
  }

.services ul {
  font-size: 16px;
  padding-left: 140px;
  color: #333;
  line-height: 3rem;
  text-align: left;
  list-style: disc;
  }

/* Resources Header */

#resources {
  background: url('../img/sunflower patch.jpg') no-repeat center top/cover;
  height: 60vh;
  }

.resources {
  padding: 20px 20px;
  }

.resources h2 {
  padding: 50px 0 0 40px;
  color: orange;
  }

.resources img {
  padding: 50px;
  }

.resources p {
  font-family:'Cormorant Garamond', serif;
  font-size: 20px;
  color: #333;
  line-height: 3rem;
  text-align: left;
  }

.resources ul {
  font-size: 16px;
  padding-left: 100px;
  color: #333;
  line-height: 3rem;
  text-align: left;
  list-style: disc;
  }

  /* Contact Header */

  #contact {
    background: url('../img/people street evening.jpg') no-repeat center center/cover;
    height: 60vh;
    }

  .contact {
    padding: 20px 20px;
    }

  .contact img {
    padding: 40px;
    margin: auto;
    }

  .contact h2 {
    padding: 20px 20px 10px 50px;
    color: orange;
    }

  .contact p {
    font-family:'Cormorant Garamond', serif;
    font-size: 20px;
    padding: 0px 50px;
    color: #333;
    line-height: 3rem;
    text-align: left;
    }

  .digits {
    color: #fff;
    line-height: 1.2em;
    }

  /* Contact Main */

  #contact-main {
      display: grid;
      grid-template-columns: 2fr 1fr;
      background: #333;
  }

  .contact-main {
      padding: 20px 150px;
      text-align: left;
      line-height: 2rem;
      height: auto;
  }

  .contact-main h2 {
      padding: 10px 0;
      color: #fff;
  }

  .contact-main p {
      font-size: 21px;
      padding: 20px 0;
      line-height: 2rem;
  }

/* Gallery Page */

#gallery {
}

.gallery {
  padding: 20px 20px;
  }

.gallery h2 {
  padding: 50px 0 0 40px;
  color: dodgerblue;
  }

.gallery p {
  font-family:'Cormorant Garamond', serif;
  font-size: 20px;
  color: #333;
  line-height: 3rem;
  text-align: left;
  }

.gallery img {
  padding: 50px;
  }

/* Footer */
#footer {
    text-align: center;
    align-items: center;
    background: #444;
    color: white;
}

#footer p {
    padding: 10px 0;
}

.footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
}

.social {
    padding-bottom: 20px;
}

.social a {
    color: #fff;
}