@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*

FONTS:
font-family: 'Gothic A1', sans-serif;
font-family: 'Alegreya Sans', sans-serif;

COLORS:
#004c97
#41b7e6
#a4dce8

*/


/* STANDARD ------------------------------------------------------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: black;
}
html {
  width: 100%;
  scroll-behavior: smooth;
}
body {
  background-size: 100vw;
  background-repeat: no-repeat;
  background-position: center 0px;
  background-attachment: fixed;
  background-color: white;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: 'Gothic A1', sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
}
.slideshow {
  background-image: url("Pics/slide1.jpg"), url("Pics/slideLOW1.jpg");
  background-color: black;
  background-size: 100vw;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #004c97;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  margin-top: 100px;
}
a {
  transition: all .5s ease 0s;
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
}
sup {
  color: inherit;
  font-family: inherit;
}
/* FONTS ------------------------------------------------------------------------------------------------------------------------- */
h1 {
  font-family: 'Gothic A1', sans-serif;
  font-weight: 800;
  font-size: 4rem;
  color: #004c97;

}
h2 {
  font-family: 'Gothic A1', sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: #41b7e6;

}
h3 {
  font-family: 'Gothic A1', sans-serif;
  font-weight: 200;
  font-size: 1.5rem;
}

/* BUTTONS ------------------------------------------------------------------------------------------------------------------------- */
.contactButton {
  color: white;
  font-size: 1.3rem;
  background-color: #41b7e6;
  border: none;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  transition-duration: 1s;
  border-radius: 15px;
}
.contactButton:hover {
  background-color: #004c97;
}

/* GRID ------------------------------------------------------------------------------------------------------------------------- */
.underHeader {
  padding-top: 100px;
  background-color: white;
}
  .iframe {
    margin-top: 50px;
  }
.header {
  display: grid;
  position: fixed;
  background-color: white;
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
  grid-template-columns: 1fr auto auto auto auto;
  grid-template-rows: auto;
  grid-template-areas:
  "logoDiv opt1 opt2 opt3 opt4";
  z-index: 3;
}
  .logoDiv {
    grid-area: logoDiv;
    padding-right: 25px;
    width: 100%;
    place-self: center;
  }
  .logo {
    height: 100px;
  }
  .menuBar {
    width: 60px;
  }
  .opt1 {
    grid-area: opt1;
    border-right: 5px solid #a4dce8;
  }
  .opt2 {
    grid-area: opt2;
    border-right: 5px solid #41b7e6;
  }
  .opt3 {
    grid-area: opt3;
    border-right: 5px solid #004c97;
  }
  .opt4 {
    grid-area: opt4;
    padding-right: 35px !important;
  }
  .opt1:hover .underOpt1, .opt2:hover .underOpt2, .opt3:hover .underOpt3, .opt4:hover .underOpt4 {
    display: block;
  }
  div[class^="underOpt"] {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    top: 85px;
  }
  div[class^="opt"] {
    padding: 25px;
    align-self: center;
    font-size: 1.3rem;
  }
  div[class^="underOpt"] div {
    padding: 10px;
  }
  div[class^="underOpt"] div:hover {
    background-color: #e6e6e6;
  }
  .altOpt {
    display: none;
  }
  .altOptExp {
    display: none;
    position: fixed;
    background-color: white;
    right: 0px;
    top: 100px;
    padding: 0px 50px 25px 50px;
    min-width: 90vw;
  }
  .altOptExpMain {
    padding-top: 25px;
    font-weight: 500;
  }
  .altOptExpSub {
    padding: 15px 0px 0px 15px;
    font-size: 1.3rem;
  }
  .uno, .dos, .tres, .cuatro {
    display: none;
  }

.container {
  display: grid;
  width: 100%;
  background-color: white;
  height: auto;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-template-areas:
  "arrow arrow"
  "about about"
  "map contact"
  "links links"
  "social social";
}
.arrow {
  grid-area: arrow;
  width: 100%;
  text-align: center;
  border-top: 20px solid #004c97;
}
  .arrowImg {
    width: 25px;
  }
.about {
  grid-area: about;
  width: 100%;
  padding: 100px 0px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "lAbout rAbout";
  border-bottom: 20px solid #41b7e6;
  margin-bottom: 50px;
}
  .lAbout {
    grid-area: lAbout;
    place-self: center;
  }
    .aboutPic {
      border-radius:50%;
      width: 500px;
      margin: auto;
    }
    .titleAbout {
      margin-bottom: 50px;
    }
  .rAbout {
    grid-area: rAbout;
    align-self: center;
    padding-right: 150px;
  }
  .rAbout h3 {
    margin-bottom: 25px;
  }
.map {
  grid-area: map;
  width: 100%;
  height: 100%;
  text-align: center;
}
  .reviews {
    width: 50%;
    padding-top: 50px;
  }
.contact {
  grid-area: contact;
  place-self: center;
  background-color: white;
  place-self: center;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
  "contactSection1"
  "contactSection2"
  "contactSection3";
}
  div[class^="contactSection"] {
    text-align: center;
    padding: 50px 0px 25px 0px;
  }
  .contactSection1 {
    grid-area: contactSection1;
  }
  .contactSection2 {
    grid-area: contactSection2;
  }
  .contactSection3 {
    grid-area: contactSection3;
  }
  .dotPics {
    width: 60px;
    padding-bottom: 25px;
  }
  .hours {
  }
  .days {
  }
  .times {
    padding-bottom: 25px;
  }
.links {
  grid-area: links;
  width: 100%;
  background-color: #41b7e6;
  color: white;
  padding: 25px;
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "one two three four";
}
  .links div {
    text-align: center;
  }
  .links div div {
    color: white !important;
  }
  .links div .boulder {
    padding-bottom: 10px;
  }
  .one {
    grid-area: one;
  }
  .two {
    grid-area: two;
  }
  .three {
    grid-area: three;
  }
  .four {
    grid-area: four;
  }
.social {
  grid-area: social;
  width: 100%;
  background-color: #41b7e6;
  color: white;
  padding: 25px;
  position: relative;
  left: 0;
  bottom: 1px;
}
  .socialMed {
    width: 40px;
  }
  .social h3 {
    padding: 10px 0px;
    color: white;
    font-family: 'Gothic A1', sans-serif;
    font-size: 1.2rem;
  }
  .boulder {
    font-weight: bold;
  }

/* MEDIA QUERIES ------------------------------------------------------------------------------------------------------------------------- */
@media (max-device-width: 1200px) {
  .header {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    grid-template-areas:
    "logoDiv altOpt";
  }
    .altOpt {
      display: block;
      grid-area: altOpt;
      padding: 0px 50px;
      align-self: center;
    }
    div[class^="opt"] {
      display: none;
    }
    .about {
      grid-template-columns: auto;
      grid-template-rows: auto auto;
      grid-template-areas:
      "lAbout"
      "rAbout";
    }
        .aboutPic {
          width: 225px;
          margin-bottom: 50px;
        }
      .rAbout {
        text-align: center;
        padding: 0px 25px;
      }
    h1 {
      font-size: 2.4rem;
    }
    h2 {
      font-size: 1.2rem;
    }
    h3 {
      font-size: 1rem;
    }
    .cent div div a {
      font-size: 1rem;
    }
}
@media (max-device-width: 1100px) {
  .slideshow {
    background-position: top center;
  }
}
@media (max-device-width: 800px) {
  .one div, .two div, .three div, .four div {
    font-size: 1rem;
  }
  .links {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "one"
    "two"
    "three"
    "four";
  }
  .one, .two, .three {
    margin-bottom: 50px;
  }
}
@media (max-device-width: 800px) {
  .container {
    grid-template-columns: auto;
    grid-template-rows: auto 75vh repeat(3, auto);
    grid-template-areas:
    "about"
    "map"
    "contact"
    "links"
    "social";
    border-top: 20px solid #004c97;
  }
    .contact {
      grid-template-columns: auto;
      grid-template-rows: auto auto auto;
      grid-template-areas:
      "contactSection1"
      "contactSection2"
      "contactSection3";
    }
    .arrow {
      display: none;
    }
}
@media (max-device-width: 600px) {
  .logo {
    height: 70px;
  }
}
@media (max-device-width: 500px) {
  .menuBar {
    width: 30px;
  }
  .logo {
    height: 60px;
  }
  .links {
    display: none;
  }
}
@media (max-device-width: 400px) {
  .logo {
    height: 42px;
  }
}