/* Lloyd West Ltd - Stylesheet */
/* Bluestone Solution Ltd      */
/* --------------------------- */

/* --------------------------- */
/*  GLOBAL STYLES */
html {
  height: 100%;
}

nav
{
  z-index: 100;
  background-color:white;
}

/* ensure background image stays center of page */
body {
  height: calc(100vh - 164px);
}

/* body {
  background: url("../media/fishguard-adobe-stock-photo-fade.d45555af63be.jpeg") no-repeat center fixed;
  background-size: cover;
  background-blend-mode: overlay;
  background-blend-mode: normal;
  background-blend-mode: screen;
  background-blend-mode: darken;
  background-blend-mode: lighten;
} */


.page-content-block-old {
  width: 90vw;
  margin: auto;
  align-items: center;
  background-color: #F2F3F4;
  opacity: 0.8;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 2%;
  padding-right: 2%;
  border-radius: 25px;
}

.page-content-block {
  width: 100vw;
  /* margin: auto; */
  margin-top: 15px;
  align-items: center;
  background-color: white;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 2%;
  padding-right: 2%;
}

footer {
  position: fixed;
  /* top: 90%; */
  bottom: 0px;
  width: 100%;
  background-color: black;
  color: white;
  margin-top: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
}

footer p {
  color: white;
}

/* --------------------------- */
/*  IMAGES and EFFECTS */

.fishguard-img {
  background-image: url("../media/fishguard-adobe-stock-photo-fade.d45555af63be.jpeg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.site-background-img {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

img {
  width: 100%;
  height: auto;
}

.logo-large {
  width: 75vw;
  height: auto;
  padding-top: 1.2em;
}

.logo-small {
  width: 25vw;
  height: auto;
  padding-top: 1.2em;
}

.parallax {
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: top;
  filter: drop-shadow(0px 8px 10px var(--shadow));
  -webkit-filter: drop-shadow(0px 8px 10px var(--shadow));
}


/* --------------------------- */
/* FONT STYLES */

h1, .navbar-brand {
  text-transform: uppercase;
  font-family: 'Eagle Lake', Times, serif;
  color: black;
}

p, nav, li, footer {
  font-family: 'Montserrat', Helvetica, sans-serif;
  color: black;
}

.site-url {
  font-family: 'Montserrat', Helvetica, sans-serif;
  color: black;
  font-weight: bold;
}

.footer-link {
  color: white;
}

.site-url:hover, 
.footer-link:hover {
  color: red;
  font-style: italic;
}

.icon {
  margin-inline: 0.25rem;
}

.site-title-font {

}

.site-content-font {

}


/* --------------------------- */
/* SITE BUTTONS */

.site-btn {
  --bs-btn-font-size: 1.2rem;
  background-color: #36454F;
  color: white;
}

.download-btn {
  width: 80vw;
}


/* --------------------------- */
/* LOCATION DETAILS */
#location-map-block {
  display: block;
  /* margin: 0 auto auto auto; */
}

#location-map iframe {
  /* mobile first design - dimensions adjusted by media queries */
  display: block;
  background-color: gray;
  opacity: 1.5 !important;
  /* margin-top: 10px; */
  border: solid 5px gray;
  height: 80vh;
  width: 100%;
}


/* --------------------------- */
/* MEDIA QUERIES */

/* X-Small devices (portrait phones, less than 576px)
   No media query for `xs` --> the Bootstrap default */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* No additional modifications for small viewports */

  .download-btn {
    width: 25vw;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* No additional modifications for medium viewports */
}

/* Additional formatting for small viewport navbar (up to Medium viewports) */
@media (max-width: 991px) {
  .logo-large {
    width: 70vw;
    height: auto;
  }

  #location-map iframe {
    /* width: 80%; */
    height: 70vh;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .logo-large {
    width: 60vw;
    height: auto;
  }

  #location-map iframe {
    /* width: 70%; */
    height: 60vh;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .logo-large {
    width: 50vw;
    height: auto;
  }

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .logo-large {
    width: 45vw;
    height: auto;
  }
}