/**colors**/
/**font-stuff**/
/*******HEADER******/
header {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
  color: #ffd700; }

.over-box {
  position: absolute;
  display: grid;
  grid-template-columns: 125px 95px;
  top: 5em;
  left: 10%;
  align-items: center; }

.over-img {
  display: grid;
  max-width: 100%;
  padding: 15px; }

.over-text {
  max-width: 100%;
  text-align: right;
  text-shadow: 1.5px 1px 2px #800000; }

.over-text a {
  text-decoration: none;
  color: #ffd700; }

#img-banner {
  width: 100%; }

h1, h2 {
  font-size: .7rem; }

/*******NAVBAR******/
nav {
  background-color: white;
  box-shadow: 2px 5px 20px #ffd700; }

#sliding-nav {
  display: flex;
  flex-direction: row-reverse;
  position: fixed;
  left: -5px;
  top: 0;
  transition: top 0.4s;
  opacity: .9;
  z-index: 1; }

nav a:hover {
  background-color: rgba(255, 251, 43, 0.671); }

.nav-logo {
  width: 25%;
  margin-left: 7rem;
  padding: 10px; }

.navigation li:first-child {
  display: block; }

.navigation li {
  display: none; }

.navigation {
  list-style-type: none;
  padding-left: 2rem; }

.navigation a {
  color: #800000;
  font-weight: 600;
  text-align: left;
  padding: .5rem; }

.active {
  background-color: rgba(251, 255, 7, 0.952); }

.responsive li {
  display: flex; }

/*******MAIN********/
body {
  background: #f8f9e5;
  font-family: "Crimson Text", serif;
  color: #301934; }

body a {
  text-decoration: none;
  color: #800000; }

body li {
  list-style: none; }

.body-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: .1fr .2fr .1fr .3fr; }

.summary-text {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: start; }

.summary-text h2, .review h2, .call-to-action h2, .figure-grid h4 {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  font-style: italic;
  border-bottom: 3px solid #800000;
  color: #800000;
  box-shadow: 0px 3px 0px 0px #d1a162;
  text-shadow: 7px 2px 2px #d1a162; }

.summary-text p {
  font-size: .8rem; }

.summary-img {
  grid-column: 2;
  grid-row: 2;
  width: 50vw; }

.call-to-action {
  grid-row: 3;
  grid-column: 1/ -1;
  justify-self: center;
  align-self: center; }

.figure-grid {
  grid-row: 4;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 5px; }

.figure-grid figure img:hover {
  box-shadow: -5px 7px 30px 7px #ffd700;
  transition: 500ms; }

.figure-grid figure img {
  max-width: 100%;
  border: 5px outset #800000;
  margin: 2px; }

.figure-grid figcaption {
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  text-align: center;
  color: #800000;
  text-shadow: 1px 1px #d1a162; }

.figure-grid a {
  text-decoration: none; }

.figure-grid h4 {
  font-size: 1rem;
  position: absolute;
  margin: 0; }

.review {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center; }

.review h2, .call-to-action h2 {
  border-bottom: none;
  box-shadow: none;
  margin: 0; }

.review h3 {
  text-align: end;
  margin: 0;
  padding: 0;
  font-size: .7rem; }

.call-to-action h3 {
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  background-color: #800000;
  border-radius: 10px;
  color: #d1a162;
  text-shadow: 1px 1px 1px black; }

/*******Temples - Grid********/
.temple-grid {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "img1 fcast1"  "item1 info1"  "img2 fcast2"  "item2 info2"  "img3 fcast3"  "item3 info3" "img4 fcast4"  "item4 info4"; }

.temple-grid h2 {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  font-style: italic;
  border-bottom: 3px solid #800000;
  color: #800000;
  box-shadow: 0px 3px 0px 0px #d1a162;
  text-shadow: 7px 2px 2px #d1a162; }

.img1, .img2, .img3, .img4 {
  grid-column: 1;
  width: 200px; }

img.fcast1 {
  width: 100%; }

.special-imgs {
  width: 100%; }

.special-imgs img {
  border: 5px outset #800000; }

.special-imgs img:hover {
  box-shadow: -5px 7px 30px 7px #ffd700; }

.special-imgs2 {
  width: 45vw; }

.special-imgs3 {
  grid-column: 2;
  margin: 4em 0; }

.img1 {
  grid-area: img1; }

.img2 {
  grid-area: img2; }

.img3 {
  grid-area: img3; }

.img4 {
  grid-area: img4; }

.item1 {
  grid-area: item1; }

.item2 {
  grid-area: item2; }

.item3 {
  grid-area: item3; }

.item4 {
  grid-area: item4; }

.temple-grid div:nth-of-type(1) {
  grid-area: info1;
  overflow: auto;
  height: 600px; }

.temple-grid div:nth-of-type(2) {
  grid-area: info2;
  overflow: auto;
  height: 600px; }

.temple-grid div:nth-of-type(3) {
  grid-area: info3;
  overflow: auto;
  height: 600px; }

.temple-grid div:nth-of-type(4) {
  grid-area: info4;
  overflow: auto;
  height: 600px; }

.fcast1 ul, .fcast2 ul, .fcast3 ul, .fcast4 ul {
  padding: 10px;
  margin-top: -10px;
  font-style: oblique; }

/*******FORM******/
main form {
  width: 100%; }

form figure {
  display: none; }

form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 6em;
  overflow: auto;
  background: #f8f9e5;
  border: 1px outset #800000; }

.first-section, .second-section, .third-section {
  padding: 1.7em;
  padding-left: 10%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center; }

.first-section, .third-section {
  background-color: #d1a162;
  color: #800000;
  margin: 0 2em 0; }

.first-section {
  margin-top: 1em; }

.third-section {
  margin-bottom: 2em; }

.second-section {
  background-color: #301934;
  color: #D5A86D;
  margin: 0 2em 0; }

.third-section figcaption, figure label {
  text-align: center; }

.third-section figure label {
  margin: 3em; }

.left1, .left2 {
  width: 44%;
  flex: 1 0 10em; }

.right1, .right2, .mid3 {
  width: 48%;
  flex: 1 0 12em; }

.left1 legend, .right2 legend, .right3 legend, .mid3 legend {
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-size: 1.5em;
  text-shadow: 1px 2px 1px black; }

.left1 legend, .mid3 legend {
  text-shadow: 1px 1px 1px black; }

.mid3 {
  flex: 1 0 7em;
  display: flex;
  flex-direction: row;
  align-items: center; }

input.button {
  border: 3px inset #800000;
  background: #FDE08D;
  background: linear-gradient(to top, #8f6B29, #FDE08D, #DF9F28);
  background: linear-gradient(to top, #8f6B29, #FDE08D, #DF9F28);
  color: #800000;
  font-weight: bold;
  font-size: 1em;
  border-radius: 5px;
  letter-spacing: .05rem;
  font-style: italic;
  text-shadow: 1px 1px 1px black; }

.button:hover {
  cursor: pointer;
  background: linear-gradient(to top, #DF9F28, #FDE08D, #8f6B29);
  background: linear-gradient(to top, #DF9F28, #FDE08D, #8f6B29); }

/*******SERVICES******/
.lloading img {
  filter: blur(0em);
  transition: filter 0.5s;
  width: 100%; }

.lloading img[data-src] {
  filter: blur(0.2em); }

/*******FOOTER******/
footer {
  background-color: #301934;
  color: #D5A86D;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0; }

footer a {
  color: #ffd700;
  font-style: italic; }

footer div {
  justify-content: center; }

input.subButton {
  border: 3px inset #d1a162;
  background-color: #d1a162;
  color: #800000;
  font-weight: bold;
  border-radius: 5px;
  letter-spacing: .05rem;
  font-style: italic; }

.mini-form {
  margin: 0px 3px 5px; }

.mini-form fieldset {
  display: grid;
  grid-template-columns: 1fr;
  padding: 10px;
  text-align: right;
  border: 3px solid #d1a162; }

.mini-input {
  padding: 3px; }

footer h3 {
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.5rem;
  font-style: italic;
  color: #ffd700;
  text-shadow: 1px 2px 1px black;
  font-size: 2rem;
  margin: 0 -10px 0;
  padding: 10px; }

footer p {
  padding: 5px;
  margin: 0; }

@media only screen and (min-width: 32.5em) {
  /*******HEADER******/
  .over-box {
    grid-template-columns: 300px 150px;
    right: 4.5rem; }

  h1, h2 {
    font-size: 1.5rem; }

  /*******NAVBAR******/
  nav {
    justify-content: space-between; }

  #sliding-nav {
    flex-direction: row;
    width: 100vw; }

  .navigation {
    display: flex;
    flex-direction: row;
    font-size: .8rem;
    align-items: center;
    padding: 5px;
    margin-right: 1rem; }

  nav a {
    padding: 10px; }

  .navigation li {
    display: block; }

  .navigation li:first-child {
    display: none; }

  .nav-logo {
    width: 15%;
    margin-left: 1rem;
    padding: 10px; }

  .navigation a {
    text-align: center; }

  /*******MAIN********/
  .body-grid {
    grid-template-columns: .75fr 3fr 3fr 2fr;
    grid-template-rows: .2fr 1fr .2fr .1fr; }

  .summary-text {
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
    align-self: center; }

  .summary-text h2, .review h2, .call-to-action h2 {
    font-size: 2rem; }

  .summary-text p {
    font-size: 1.1rem; }

  .summary-img {
    height: 100vh; }

  .review h3 {
    font-size: .9rem; }

  .call-to-action h3 {
    font-size: 1.3rem; }

  .special-imgs3 {
    grid-column: 2;
    margin: 4em; }

  /*******Temples - Grid********/
  img.fcast1 {
    width: 75%; }

  /*******FORM******/
  form figure {
    display: block; }

  /*******FOOTER******/
  footer h3 {
    font-weight: 300; } }
@media only screen and (min-width: 60em) {
  /*******HEADER******/
  .over-box {
    grid-template-columns: 300px 150px;
    top: 50vh;
    left: 50vw;
    right: 1em; }

  h1, h2 {
    font-size: 1.5rem; }

  /*******MAIN********/
  .summary-text p {
    font-size: 1.5rem; }

  /*******TEMPLE*GRID********/
  .temple-grid {
    grid-row: 2;
    grid-column: 1 / -1;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: .75fr 340px 3fr 2fr;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    grid-template-areas: ". img1 item1 fcast1" ". img1 item1 info1"  ". img2 item2 fcast2"  ". img2 item2 info2"  ". img3 item3 fcast3"  ". img3 item3 info3"  ". img4 item4 fcast4"  ". img4 item4 info4"; }

  .temple-grid h2 {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    font-style: italic;
    border-bottom: 3px solid #800000;
    color: #800000;
    box-shadow: 0px 3px 0px 0px #d1a162;
    text-shadow: 7px 2px 2px #d1a162; }

  .img1, .img2, .img3, .img4 {
    grid-column: 1;
    width: 45vh; }

  .fcast1 picture {
    width: 45vh; }

  .special-imgs {
    width: 100%; }

  .special-imgs2 {
    width: 100%; }

  .img1 {
    grid-area: img1; }

  .img2 {
    grid-area: img2; }

  .img3 {
    grid-area: img3; }

  .img4 {
    grid-area: img4; }

  .item1 {
    grid-area: item1; }

  .item2 {
    grid-area: item2; }

  .item3 {
    grid-area: item3; }

  .item4 {
    grid-area: item4; }

  .fcast1 {
    grid-area: fcast1; }

  .fcast2 {
    grid-area: fcast2; }

  .fcast3 {
    grid-area: fcast3; }

  .fcast4 {
    grid-area: fcast4; }

  .temple-grid div:nth-of-type(1) {
    grid-area: info1;
    overflow-y: scroll;
    height: 500px; }

  .temple-grid div:nth-of-type(2) {
    grid-area: info2;
    overflow-y: scroll;
    height: 500px; }

  .temple-grid div:nth-of-type(3) {
    grid-area: info3;
    overflow-y: scroll;
    height: 500px; }

  .temple-grid div:nth-of-type(4) {
    grid-area: info4;
    overflow-y: scroll;
    height: 500px; }

  /*******FORM******/
  .left1 legend, .right2 legend, .mid3 legend {
    font-weight: 300;
    font-size: 2em; } }