/* reset*/
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	border:0;
}
.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}
video {
	width: 90%;
	height: auto;
}
* {
  box-sizing: border-box;
}
body {
	font-family: "Cardo", serif;
  font-weight: 400;
  font-style: normal;
    font-size: 100%;
    background-color: #BABAB9
}
html, body {
  height: 100%;
  margin: 0;
}
h1, h2, h3 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
 padding: 1% 2%;
}
h1 {
    font-size: 235%;
}
h2 {
    font-size: 200%;
}
h3 {
    font-size: 140%;
}
p {
    padding: 2%;
    line-height: 1.5;
}
.home-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* This makes the container the full height of the viewport */
  width: 100%;
  /* Optional: Add a background color to see the container boundaries */
  background-color: #BABAB9; 
  margin: 1% 0;
}
.home-container img {
  /* Optional: Ensures the image scales down if the screen is smaller than its native size */
  max-width: 100%;
  max-height: 100%;
  /* To maintain aspect ratio and prevent distortion */
  object-fit: contain; 
}
.container {
    width: 90%;
    margin: 0 auto;
}
.logo {
    text-align: center;
    margin: 1% auto;
}
section {
    background-color: #fff;
    margin: 2%;
    border: solid 4px #000;
}
footer {
    font-size: 87.50%;
    padding: 1% 0;
    text-align: center;
    border: solid 4px #000;
    margin: 2%;
}
.copyright {
   font-size: 87.50%;
    padding: 0.25% 0;
    text-align: center; 
}
.video-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.video-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
.video-double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
.double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
}
/** Keep the image from stretching in flex column**/
.nostretch {
	align-self: center;
}
.video-1280 {
	max-width: 1280px;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
}
.videocenter {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 25px;
}
.image-container-wtitle {
  position: relative; /* Establishes a positioning context */
  display: flex; /* Enables flexbox for alignment */
  align-items: center; /* Centers items vertically */
  justify-content: center; /* Centers items horizontally */
  overflow: hidden;
}
.background-image-wtitle {
  width: 100%;
  height: 100%;
  object-fit: cover;
 opacity: 0.75;
}
.center-text-wtitle {
  position: absolute; /* Overlays text on top of the image */
  color: #000; /* Make sure text is visible */
  /* Further styling as needed (font-size, background, padding, etc.) */
  text-align: center;
}
.wtitle {
    font-size: 235%;
}