.w3-theme-light                     {color:#000    !important; background-color:#e9f5ff !important}

:root {
  --palette-white:#FFFFFF;
  --palette-field-lighter:#E2E6FB;
  --palette-field:#c9d1fb;
  --palette-glyph-lighter:#424575;
  --palette-glyph:#393B65;
  --palette-glyph-darker:#2E3052;
}

@font-face {
  font-family: "Sheila";
  src: local("Sheila"), url("Sheila.otf") format("opentype");
}
@font-face {
  font-family: "Sheila Bold";
  src: local("Sheila Bold"), url("Sheila Bold.otf") format("opentype");
}

html { background-color:var(--palette-field); }
html, body, h1, h2, h3, h4, h5, h6 {
  height:100%;
  font-family:"Sheila", "Cardo", sans-serif;
  color:var(--palette-glyph);
}

.resp-4by3-container {
  position:relative;
  overflow:hidden;
  padding-top:75%;
}
.resp-16by9-container {
  position:relative;
  overflow:hidden;
  padding-top:56.25%;
}
.resp-iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

h1 {
  font-family:"Sheila Bold", sans-serif;
  font-size:3.5em;
  margin:0.25em auto;
  text-align:center;
}
h2 {
  font-family:"Sheila Bold", sans-serif;
  font-size:2.75em;
  text-align:center;
}
/* Instagram icon */
h2 i { margin:0;padding:4px; }
h2 i:hover { background-color:var(--palette-glyph);color:#fff; }
h3 {
  font-size:2.5em;
  margin:0.125em auto;
  text-align:center;
}
h4 {
  font-family:"Cardo", sans-serif;
  font-size:1.75em;
}
h5 {
  font-family:"Cardo", sans-serif;
  font-size:1.5em;
  text-align:center;
}
p {
  color:var(--palette-glyph);
  font-size:1.25em;
  text-align:left;
  /*margin-bottom:1em;*/
}

button {
  border:none;
  color:inherit;background-color:inherit;
  font-family:"Cardo", sans-serif;
  font-size:1.25em;
  padding:8px;
}
button div {
  padding:8px 16px;
  background-color:var(--palette-glyph); color:var(--palette-field);
  border-radius:16px;
}
button a:link { text-decoration:none;}
button div i {
  background-color:var(--palette-glyph); color:var(--palette-field);
}
button div:hover {
  background-color:var(--palette-glyph-darker); color:var(--palette-field-lighter);
}
button div:hover i {
  background-color:var(--palette-glyph-darker); color:var(--palette-field-lighter);
}

#navbar {
  background-color:var(--palette-field);color:var(--palette-glyph);
  position:fixed;
  top:0;
  width:100%;
  display:block;
  z-index:1;
  font-family:"Cardo", sans-serif;
  transition:top 0.3s;
}
#navbar a {
  float:left;
  display:block;
  text-align:center;
  /*vertical-align:middle;*/
  padding:6px 12px;
  text-decoration:none;
  font-size:1.5em;
  /*margin:0;*/
}
#navbar a:hover { background-color:var(--palette-glyph);color:#fff; }
#navbar i { margin:0;padding:0; }
#navbar i:hover { background-color:var(--palette-glyph);color:#fff; }

#LavenderSpotsNavBar {
  width:90%;
  overflow:hidden;
  margin:0.25em auto;
}
#LavenderSpotsNavBar img {
  display:inline;
  float:left;
  margin:0;padding:0;
  width:440px;height:auto;
  max-width:90%;
}
body { padding-top:136px; }
@media (max-width:460px) {
  body { padding-top:168px; }
}

header img {
  width:90%;
}

section {
  margin:0 auto;padding-top:1em;
  width:90%;
}
/* Section Headers */
section h4 {
  margin:0.5em auto;
  text-align:center;
}
section h4 span {
  display:inline;
  margin:0 auto;padding:0.25em 0.5em;
  text-align:center;
  letter-spacing:0.25em;
}

#About {
  font-family:"Cardo", sans-serif;
}
#About div {
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  align-items:center;
}
#About img {
  flex:0 1 30%;
  margin:0.5em;
  max-width:15em;
  height:100%;
}
#About p {
  flex:0 1 40%;
}
#About p:nth-of-type(1) {
  text-align:center;
  min-width:280px;
}

.FollowCard {
  flex:0 1 25%;
  margin:0;padding:0;
}
.FollowCard img {
  display:block;  
  margin:0 auto;
  max-height:240px;
  max-width:240px;
  padding:4px;
}

footer {
  padding:4px 8px;
}
footer p {
  text-align:center;
  font-family:"Cardo", sans-serif;
  font-size:12px;
}
/* Font Awesome icon */
footer i {
  width:30px;
  font-size:18px;
}