/*************
COLOR REFERENCE
x-light pink: #FAF2F1;
////light pink: #EBCDC7;
pink: #DDA39F;
dark pink: #BF6863;

blue: #78A0C3;
dark blue: #5881AC;

x-light plum: #ECE8ED;
plum: #837889;
dark plum: #64566B;

////xx-light gray: #F1F1F2; (background)
x-light gray: #E4E3E6; (lines)
/////light gray: #CAC8CE; (base, but not used)
gray: #A09CA6; (caption text)
dark gray: #7E7A86; (body text)
x-dark gray: #4F4A57; (headlines) #64566B

***************/

/* BASICS */
body, html {
  margin:0px 0px 0px;
  color: #7E7A86;
  font-family: "jubilat", Palatino, Garamond, serif;
}
ul,li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
h1,h2,h3,h4 {
  margin: 0px;
  line-height: 1.2;
}
h1 {
  font-size: 50px;
  font-weight: 500;
  color: #4F4A57;
}
h2 {
  font-size: 36px;
  font-weight: 500;
  color: #4F4A57;
  margin: 60px 0px 10px;
}
h3 {
  font-size: 24px;
  font-weight: 400;
  color: #4F4A57;
  margin: 30px 0px 0px;
}
h4 {
  font-family: "europa", Helvetica;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 30px 0px 10px;
  color: #4F4A57;
}
h5 {
  font-family: "europa", Helvetica;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 15px 0px 0px;
}

p, li {
  font-size: 18px;
  line-height: 1.6;
  color: #7E7A86; 
  font-weight: 300;
  letter-spacing: .2px;
  margin: 15px 0px;
}
li {
/*  font-size: 14px; */
}
blockquote {
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  color: #A09CA6;
}
dt {
  font-size: 18px;
}
dd {
  font-size: 18px;
  margin-bottom: .5rem;
  font-weight: 300;
}

a {
  color: #78A0C3;
  text-decoration: none;
}
a:hover {
  color: #5881AC;
  text-decoration: underline;
}

/* button */
a.button {
  display: inline-block;
  padding: 7px 15px;
  background-color: white;
  border: 2px solid #EBCDC7;
  border-radius: 3px;
  box-shadow: 0px 2px 10px rgba(126, 122, 134, .15);
  -webkit-transition: box-shadow .3s, border-color .3s, -webkit-transform .3s; /* Safari */
  transition: box-shadow .3s, border-color .3s, transform .3s;
  margin-bottom: 15px;

}
.button-text {
  font-family: "europa", Helvetica;
  font-size: 14px;
  font-weight: 600;
  color: #DDA39F;
  text-transform: uppercase;
  line-height: 1;
}
a.button:hover {
  border-color: #DDA39F;
  box-shadow: 0px 10px 30px rgba(126, 122, 134, .2);
  -webkit-transform: translate(0px -2px);
  transform: translate(0px, -2px);
}
a.button:hover, a.button:active {
  text-decoration: none;
}
a.button:active {
  background-color: #FAF2F1;
  box-shadow: none;
 -webkit-transform: translate(0px 2px);
  transform: translate(0px, 2px);
}


/*****
Navbar
****/
#navBar {
  background-color: white;  
}
#navBar.scrolled, #navBar.open {
  background-color: white;
  -webkit-transition: background-color .3s;  /*Safari */
  transition: background-color .3s;
  box-shadow: 0px 2px 15px rgba(126, 122, 134, .2);
}

.navbar-brand, .navbar-brand:hover {
  color:#DDA39F;
  font-weight: 500;
  font-size: 24px;
}
.nav-item a {
  font-family: "europa", Helvetica;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
  color: #7E7A86;
}
.nav-item.active a {
  color: #4F4A57;
}
.nav-item:not(.active) a:hover {
  color: #5881AC;
}
.navbar-toggler:focus {
  outline: none;
}
.navbar-toggler-icon {
  background-image: url('../imgs/hamburger.png');
  -webkit-transition: background-image .3s;  /*Safari */
  transition: background-image .3s;
  width: 30px;
  height: 30px;
}
#navBar.open .navbar-toggler-icon {
  background-image: url('../imgs/close-x.png');
  -webkit-transition: background-image .3s;  /*Safari */
  transition: background-image .3s;
}


/****
More text styles
****/
h1.page-title {
  font-size: 70px;
  font-weight: 500;
  color: #837889;
}
.page-title-right:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  background-color: #DDA39F;
  height: 4px;
  margin-top:60px;
  width: 33%;
  right: 66%;
  z-index:-1;
}
.page-title-right:after {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  background-color: #F3F1F4;
  z-index:-2;
  width: 30%;
  height: 60%;
  left: 50%;
  margin-top: 30px;
  margin-bottom: 0px;
}
.page-title-left:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  background-color: #DDA39F;
  height: 4px;
  margin-top:60px;
  width: 33%;
  left: 66%;
  z-index:-1;
}
.page-title-left:after {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  background-color: #F3F1F4;
  z-index:-2;
  width: 60%;
  height: 60%;
  right: 25%;
  margin-top: 30px;
  margin-bottom: 0px;
}
#titleContainer .caption {
  margin-top: 70px;
}

.summary-text {
  text-align: center;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: .65px;
}

.sideby {
  margin-top: 0px
}

.img-shadow {
  box-shadow: 0px 10px 30px rgba(79, 74, 87, .3);
  border-radius: 3px; 
}

.footer-content {
  text-align: center;
  color: #ECE8ED;
  font-family: "europa", Helvetica;
  font-size: 14px;
  letter-spacing: .5px;

}
.footer-content a {
  color: #ECE8ED;
  text-decoration: underline;
}
.footer-content a:hover {
  color: white;
}

/****
Layout
****/
.section {
  padding-top: 150px;
}
#titleContainer {
  margin-top: 90px;
  margin-bottom: 45px;
}
#pageContent {
  margin-top: 86px; /* make room for fixed header */
}
#footer {
  margin-top: 150px;
  padding: 30px 0px 150px;
  height: 100px;
  background-color: #7E7A86;
}

.card {
  border: none;
  box-shadow: 0px 10px 30px rgba(79, 74, 87, .2);
  padding: 15px;
}

/****
change text sizes when smaller
****/
@media (max-width: 768px) {
  h1 {
    font-size: 42px;
  }
  h1.page-title {
    font-size: 55px;
  }
  h2 {
    font-size: 30px;
  }
  .summary-text {
    font-size: 20px;
  }
}