@import url(https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600;700&display=swap);


/*
 Theme Name: HotPress
 Theme URI: https://www.bighousecreative.co.uk/
 Author: Big House Creative
 Author URI: https://www.bighousecreative.co.uk/
 Description: A Timber & Tailwind template for creating WordPress sites.
 Version: 1.0
 Tags:
 Text Domain:
 */

/* Import Fonts Here */

/* Styles */

.header {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.header:before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 100%);
}

.header .slick-arrow {
  font-size: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 38px;
  height: 32px;
  z-index: 20;
  transition: 0.5s ease-in-out;
  --tw-bg-opacity: 1;
  background-color: rgba(0, 153, 153, var(--tw-bg-opacity));
}

.header .slick-arrow:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.header .slick-arrow{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.header .slick-arrow:hover{
  --tw-text-opacity: 1;
  color: rgba(3, 48, 149, var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .header .slick-arrow {
    width: 50px;
    height: 50px;
  }
}

.header .slick-arrow:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 700;
  content: "\f053";
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  font-size: 16px;
  text-align: center;
}

@media (min-width: 1024px) {
  .header .slick-arrow:after {
    font-size: 28px;
  }
}

.header .slick-arrow.slick-next {
  left: auto;
  right: 1rem;
}

.header .slick-arrow.slick-next:after {
  content: "\f054";
}

.header .slick-arrow.slick-prev {
  left: auto;
  right: 3.4rem;
}

@media (min-width: 1024px) {
  .header .slick-arrow.slick-prev {
    right: 4rem;
  }
}

.current-menu-item a:before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  --tw-bg-opacity: 1;
  background-color: rgba(3, 48, 149, var(--tw-bg-opacity));
}

.default--header {
  padding: 4rem 0 8rem;
}

.default--header--home {
  padding: 4rem 0 10rem;
}

@media (min-width: 768px) {
  .default--header--home {
    padding: 8rem 0 16rem;
  }
}

@media (min-width: 1024px) {
  .default--header--home {
    padding: 10rem 0 30rem;
  }
}

@media (min-width: 1024px) {
  .home--opening .container--home {
    position: relative;
  }

  .home--opening .container--home:before {
    position: absolute;
    content: "";
    top: auto;
    left: 10%;
    right: auto;
    bottom: -25% !important;
    height: 100%;
    width: 88.7%;
    z-index: -1;
    --tw-bg-opacity: 1;
    background-color: rgba(245, 245, 245, var(--tw-bg-opacity));
  }

  .home--opening--default .container--default {
    position: relative;
  }

  .home--opening--default .container--default:before {
    position: absolute;
    content: "";
    top: auto;
    left: 10%;
    right: auto;
    bottom: 0 !important;
    height: 100%;
    width: 100%;
    z-index: -1;
    --tw-bg-opacity: 1;
    background-color: rgba(245, 245, 245, var(--tw-bg-opacity));
  }
}

.footer--bg {
  position: relative;
  padding-bottom: 10rem;
  z-index: 0;
}

.footer--bg .before {
  position: absolute;
  content: "";
  top: 35%;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.footer--bg:after {
  position: absolute;
  content: "";
  top: 35%;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.footer-accordion {
  position: relative;
  width: 100vw;
  --tw-bg-opacity: 1;
  background-color: rgba(3, 48, 149, var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 200ms;
}

.footer-accordion::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f067"; /* Unicode character for "plus" sign (+) */
  float: right !important;
  margin-top: 0.125rem !important;
  margin-right: 1rem !important;
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

.footer-accordion:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(3, 48, 149, var(--tw-bg-opacity));
}

.footer-panel {
  transition: max-height 0.2s ease-out;
  position: relative;
  max-height: 0px;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgba(3, 48, 149, var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
}

.footer-panel::after {
  content: "";
  position: absolute;
  left: 90%;
  margin-left: -85%;
  bottom: 0;
  width: 90%;
  border-bottom: 2px solid black;
}

.news--column {
  display: flex;
  flex-direction: column;
}

.news--card {
  flex-basis: 100%;
  filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.1));
  margin-bottom: 1rem;
}

@media (min-width: 768px){
  .news--card{
    margin-bottom: 0px;
  }
}

@media (min-width: 1024px) {
  .news--card img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 300px;
    -o-object-position: top;
       object-position: top;
  }
}

.news--share li {
  display: inline-block;
}

.news--share li:not(:last-child) {
  margin-right: 5px;
}

.news--share li a {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 153, 153, var(--tw-bg-opacity));
}

.news--share li a:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(3, 48, 149, var(--tw-bg-opacity));
}

.news--share li a{
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
}

.news--share li a svg {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.news--share li a:hover svg {
  --tw-text-opacity: 1;
  color: rgba(0, 153, 153, var(--tw-text-opacity));
}

.news--share--secondary li a {
  --tw-bg-opacity: 1;
  background-color: rgba(3, 48, 149, var(--tw-bg-opacity));
}

.news--share--secondary li a:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(245, 245, 245, var(--tw-bg-opacity));
}

.news--share--secondary li a{
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.news--share--secondary li a svg {
  --tw-text-opacity: 1;
  color: rgba(0, 153, 153, var(--tw-text-opacity));
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.contact--section input, .contact--section select, .contact--section textarea {
  width: 100%;
  padding: 12px;
  border: 0.5px solid #000000;
  box-sizing: border-box;
  resize: vertical;
  margin-bottom: 10px;
  background-color: transparent;
}

.contact--section label {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgba(0, 153, 153, var(--tw-text-opacity));
}

.contact--section ::-moz-placeholder {
  text-transform: capitalize;
}

.contact--section ::placeholder {
  text-transform: capitalize;
}

.contact--section .btn-aw:not(.btn-aw__black) {
  color: white;
  --tw-bg-opacity: 1;
  background-color: rgba(0, 153, 153, var(--tw-bg-opacity));
}

.contact--section .btn-aw:not(.btn-aw__black):hover{
  --tw-bg-opacity: 1;
  background-color: rgba(3, 48, 149, var(--tw-bg-opacity));
}

.contact--section .btn-aw:not(.btn-aw__black){
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border: 0;
  width: 45%;
}

.donate--button {
  position: relative;
}

.donate--button:after {
  position: absolute;
  content: "";
  top: 0;
  right: 2rem;
  width: 16px;
  height: 100%;
  --tw-bg-opacity: 1;
  background-color: rgba(3, 48, 149, var(--tw-bg-opacity));
}

.team--column {
  display: flex;
  flex-direction: column;
}

.team--card {
  flex-basis: 100%;
  filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.1));
}

.default--content h1, .default--content h2, .default--content h3, .default--content h4, .default--content h5, .default--content h6 {
  margin-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgba(0, 153, 153, var(--tw-text-opacity));
}

.default--content ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.default--content li {
  list-style-type: disc;
}

.default--content p {
  margin-bottom: 1rem;
}

.default--content a {
  --tw-text-opacity: 1;
  color: rgba(0, 153, 153, var(--tw-text-opacity));
}

.default--content a:hover{
  --tw-text-opacity: 1;
  color: rgba(3, 48, 149, var(--tw-text-opacity));
}

.default--content a{
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.bulletins--title {
  background-color: #F7F7F7;
  background-blend-mode: multiply;
}

.bulletins--container {
  background-color: #E8E8E8;
}

.modal--video {
  display: flex;
  justify-content: center;
}

.modal--video iframe {
  width: 100%;
  height: 250px;
}

@media (min-width: 768px) {
  .modal--video iframe {
    width: 700px;
    height: 350px;
  }
}

@media (min-width: 1024px) {
  .modal--video iframe {
    width: 1000px;
    height: 500px;
  }
}

.webcam--tabs .tab {
  position: relative;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .webcam--tabs .tab.active:after {
    position: absolute;
    content: "\f063";
    font-family: "Font Awesome 5 Pro";
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    top: auto;
    right: 0;
    bottom: -38px;
    width: 100%;
    height: 38px;
    --tw-bg-opacity: 1;
    background-color: rgba(0, 153, 153, var(--tw-bg-opacity));
  }
}

.webcam--tabs .tab-content {
  display: none;
}

.webcam--tabs .tab-content.active {
  display: block;
}

@media (min-width: 1024px) {
  .mission--images {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 320px;
  }
}