/* Mobile Hide and Show */
.mobileShow {display:none;}
@media screen and (max-width: 900px) {
.mobileShow {display:block;}
}

.mobileHide {display: flex; justify-content: center;}
@media screen and (max-width: 900px) {
.mobileHide {display: none;}
}

/* ADA */
.screenreader-text {position:absolute; left:-999px; width:1px; height:1px; top:auto;}
.screenreader-text:focus {color:black; display:inline-block; height:auto; width:auto; position:static; margin:auto;}

* {
box-sizing: border-box; 
border-radius: 4px;
}

*::before, *::after {
box-sizing: border-box;
}

html, body {
height: 100%; 
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

/* Hides scrollbar for WebKit browsers like Chrome, Safari, and newer versions of Edge */
body {
overflow-y: none;/* Enables vertical scrolling if needed */
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none;/* For Internet Explorer 10+ */
}

/* For WebKit browsers */
body::-webkit-scrollbar {
display: none; /* Hides the scrollbar */
}

html {
font-family: Open Sans, sans-serif; 
background-color: #2d2d2d; 
color: white;
}

body {
 display: flex;
 justify-content: center;
 align-items: center; 
}

@media screen and (min-width: 901px) {
body {
min-height: 100vh;
width: 100%;

}
}

.slideshow-container {
width: calc(100% - 2rem); 
height: calc(100% - 2rem); 
position: relative;
margin: auto;
display: flex; 
justify-content: center;
align-items: center;
text-align: center;
}

.mySlides, .mySlidesAltV2, .mySlidesAltV3, .mySlidesAltV4 {
display: none;
position: relative;
}

.mySlides active, .mySlidesAltV2 active, .mySlidesAltV3 active, .mySlidesAltV4 active{
display: block;
}

.mySlides img, .mySlidesAltV2 img, .mySlidesAltV3 img, .mySlidesAltV4 img{
max-width: 100%;
}

img {
 border-radius: 10px;
 border: 1px solid transparent;
 vertical-align: middle;

}

.page-container {
max-width: 90%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
padding: 1rem 0; 
min-height: calc(100vh - 2rem); 
}
 
/* Assuming flex-container wraps each row of two flex-items */
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0 auto; 
width: 100%;
gap: 1rem; 
padding: 0;
}

.flex-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 0 1rem; 
overflow: hidden; 
}

/* Alternatively, using nth-of-type for more rows */
.flex-container:nth-of-type(1) {
margin-bottom: 1rem; 
}

.flex-item-50 {
width: calc(50% - 2rem);
height: 100%;
max-height: 100%;
}

.flex-item h1 {
padding: 0;
margin: 0;
}

.text-container {
display: flex;
justify-content: center;
}

.text, .textAltV3{
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
top: 4px;
/* If you want the caption on the bottom of the slide
bottom: 4px; 
*/
width: fit-content;
text-align: center;
background-color: black;
box-shadow: white 0 0 3px 1px;
}

.numbertext, .numbertextAltV3 {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 4px;
left: 1%;
/* If you want the slide progressions count on the bottom-right of the slide
bottom: 1%;
right: 1%;
*/
background-color: #336699;
border: 1px solid transparent;
}

.textAltV2, .textAltV4{
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 4px; 
/* If you want the caption on the top of the slide
top: 4px;
*/
width: fit-content;
text-align: center;
background-color: black;
box-shadow: white 0 0 3px 1px;
}

.numbertextAltV2, .numbertextAltV4 {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
bottom: 4px;
left: 1%;
/* If you want the slide progressions count on the top left of the slide
top: 1%;
right: 1%;
*/
background-color: #336699;
border: 1px solid transparent;
}

.active {
background-color: #717171;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

@media only screen and (max-width: 300px) {
.text, .textAltV2, .textAltV3,.textAltV4{font-size: 11px}
}

.active {
opacity: 1;
box-shadow: #B9DCD2 0 0 4px 4px; 
}

@media screen and (max-width: 900px) {

.page-container {
max-width:100%;
width: 100%;
margin-top: 1.5rem;
}

.flex-container {
flex-direction: column;
width: 100%!important;
gap: 1.5rem 0;
}
.flex-item-50 {
width: 95%!important;
margin: 0 auto
}

}