/******************************************
*  Author : ${AUTHOR}
*  Created On : ${DATE} >Sat Apr 01 2023<
*  File : ${FILE}
*******************************************/

/**
 * "Default" - Styles
 */

/* Media Query breakpoints
small    = 30.063em (480px)
medium   = 40.063em (640px)
normal   = 60.063em (960px)
large    = 64.063em (1024px)
x-large  = 90.063em (1440px)
xx-large = 120.063em (1920px)
*/

/**
 * Colors
 */

/* CSS colors For: "Default"
Colors:
#ff0000; - Red
#00ff00; - Green
#0000ff; - Blue

#ff00ff; - Fuchia

#000000; - Black
#ffffff; - White
*/

/* Fonts */
/*
@import "font-face/fonts.css";
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* + Body Setup */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img,
media {
  max-width: 100%;
}
/* - Body Setup */

:root {
  --color-black: 0, 0, 0;
  --color-white: 255, 255, 255;

  --color-tan: 242, 202, 101;
  --color-red: 172, 30, 48;
  --color-grey: 128, 128, 128;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
  padding: 0;
  background-color: rgb(var(--color-white));
  color: rgb(var(--color-black));
  font-size: 1.25em;
}

.content a {
  color: rgb(var(--color-red));
  text-decoration: none;
  font-weight: bold;
}

.content a:hover {
  text-decoration: underline;
}

p {
  display: block;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  margin-top: 1em;
}

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.footer h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h4 {
  display: block;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h5 {
  display: block;
  font-size: 0.83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: 0.67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.content h1,
h2,
h3,
h4,
h5,
h6 {
  color: rgb(var(--color-red));
}

.footer h3 {
  color: rgb(var(--color-white));
}

.header .site-name,
.header .logo,
.header .social-media-links {
  vertical-align: middle;
  margin: 0;
  width: fit-content;
  height: auto;
}

.header {
  color: rgb(var(--color-black));
  background-color: rgb(var(--color-white));
}

.home-logo {
  background-image: url('../img/SP-1-728x1024.jpg');
  background-size: 110px 145px;
  background-repeat: no-repeat;
  width: 110px;
  height: 145px;
  display: inline-block;
  vertical-align: middle;
}

.social-media {
  background-repeat: no-repeat;
  width: 100%;
  height: 75px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(var(--color-tan));
}

li {
  float: left;
}

li a {
  display: block;
  color: rgb(var(--color-black));
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

li a:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-red));
}

.active {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-red));
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.flex-container .left {
  flex-grow: 1;
  text-align: center;
  width: 110px;
}

.flex-container .middle {
  flex-grow: 1;
  text-align: left;
  width: 100%;
}

.flex-container .right {
  flex-grow: 1;
  text-align: center;
  width: 145px;
  white-space: nowrap;
}

.top-image-1 {
  position: relative;
  overflow: hidden;
  color: rgb(var(--color-white));
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  background-image: url('../img/church.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 25vw;
  display: flex;
}

.top-image-2 {
  position: relative;
  overflow: hidden;
  color: rgb(var(--color-white));
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  background-image: url('../img/church/new_church.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 25vw;
  display: flex;
}

.top-image-3 {
  position: relative;
  overflow: hidden;
  color: rgb(var(--color-white));
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  background-image: url('../img/church/new_church-1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 30vw;
  display: flex;
}

.slogan-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 2.75vw;
  font-weight: bold;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  color: rgb(var(--color-white));
}

.slogan-2 {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -0%);
  text-align: center;
  font-size: 2.75vw;
  font-weight: bold;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  color: rgb(var(--color-white));
}

span {
  color: rgb(var(--color-tan));
}

.menu {
  background-color: var(--color-tan);
}

.menu ul {
  display: flex;
  justify-content: left;
}
/*
      .menu li {
        margin-right: 10px;
      }
      */

.menu li:last-child {
  margin-right: 0;
}

.content {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.sticky-top {
  height: auto;
  padding: 0px;
  z-index: 666;
  position: sticky;
  top: 0;
}

.sticky-content {
  margin-top: 72px;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: top;
  gap: 25px;
  padding: 0px;
}

.flex > div {
  flex-grow: 1;
  text-align: left;
  width: 50%;
  border: solid 2px rgb(var(--color-tan));
  padding: 15px;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: top;
  gap: 25px;
  padding: 20px;
  background-color: rgb(var(--color-tan));
}

.footer div {
  flex-grow: 1;
  text-align: left;
  color: rgb(var(--color-white));
  width: 20%;
}

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

.copyright {
  text-align: center;
  padding: 10px;
  background-color: rgb(var(--color-white));
  color: rgb(var(--color-black));
}

@media (max-width: 1122px) {
  .sticky-top {
    position: relative;
  }

  .flex-container {
    flex-direction: column;
    align-items: center;
  }

  .flex-container .left,
  .flex-container .middle,
  .flex-container .right {
    width: 100% !important;
    text-align: center;
  }

  h1 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .flex {
    flex-direction: column;
    align-items: center;
  }

  .flex > div {
    width: 100%;
  }

  .footer {
    flex-direction: column;
    align-items: center;
  }

  .footer > div {
    width: 100%;
  }
}
.verse {
  font-style: italic;
  margin-top: 1em;
  margin-bottom: 1em;
}

.verse.date {
  font-weight: bold;
  margin-top: 0.5em;
}

.liturgical-colors {
  width: 100%;
  height: auto;
  text-align: center;
  padding: 25px;
}

.liturgical-colors svg {
  width: auto;
  height: 150px;
}

.liturgical-colors {
  fill: var(--liturgical);
  color: var(--liturgical);
  background-color: var(--liturgical-light);
}

.liturgical-symbol svg {
  width: 145px;
  height: 145px;
  display: block;
  margin: auto;
}

.liturgical-symbol {
  width: 100%;
  height: auto;
  text-align: center;
  /*
  color: var(--liturgical);
  background-color: var(--liturgical-light);
  */
}

.liturgical-symbol svg g {
  fill: var(--liturgical);
}