/* fix mobile view problem */
html {
  height: -webkit-fill-available;
}

body {
  height: -webkit-fill-available;
}


/* New Project Flex Polaroid Cards */

div.gallery-polaroid {
  border: 1px solid #ccc;
  position: relative;
  horizontal-align: center;
  text-align: center;    
  background-color: #2C3531;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: white;
  margin: 6px 2px 6px 2px;
}
 
div.gallery-polaroid a {
  color: #D1E8xE2;
}

div.gallery-polaroid:hover {
  border: 1px solid #777;
}

div.gallery-polaroid img {
  width: 100%;
  height: auto;
  height: 250px; /* height of container */
  padding: 5px 0px 5px 0px;
  object-fit: cover;
  object-position: 20% 10%; 
}

div.desc-polaroid {
  padding: 10px;
  text-align: center;
  height: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 6px 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 900px) {
  .responsive {
    width: 32%;
    padding: 6px 6px;
  }
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    padding: 6px 6px;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
      margin: 6px ;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Carousel formatting  in block preview*/

.shortcode-carousel-title {
  white-space: nowrap; 
  text-overflow: ellipsis; 
  overflow: hidden;
  width: 88%;
}

.preview-block img {
  object-fit: cover;
  width: 88%;
  height: 150px;
}

.jcarousel img {
  object-fit: cover;
  width: 88%;
}
.preview-block li {
  object-fit: cover;
  text-align: center;
  height: 250px;
}

/* Main font */

body.page { font-family: "Verdana", sans-serif;  font-smooth: auto;}

html {
    font: 18px/24px "Verdana",sans-serif;
}

/* Figure set up for small screen sizes */

figure.right33 {
  float:right;
  width:33%;
  box-shadow: 10px 10px 5px #2C3531;
   border: 1px solid #2C3531;
}

figure.right33 img {width:100%;
}

figure.right33 figcaption {width:90%; text-align:left; padding: 5px 5px 15px 15px;
}

@media only screen and (max-width: 800px) {
  figure.right33 {
    width: 90%;
   box-shadow: 1px 1px #2C3531;
  }
  figure {
    width: 90%;
  }
}

/* Footer Style */
footer{max-width:1700px;margin-left:auto;margin-right:auto;padding:0 1.69492% 25px;clear:both;font-size:small;background-color:#116466;color:#D1E8E2; text-align:center}

footer a {
  color: #FFCB9A;
}

footer a:hover {
  color: #D9B08C;
}

/*Header Style and Navigation*/
.site-title img{max-width:30%;}
.site-title {text-align: left;}
#search-container {top:-2px}


header nav{border-top: 5px solid #116466;border-bottom: 5px solid #116466;background-color:#ffffff; color:#D1E8E2;}

header nav .navigation {
margin:0px;
padding-left:20px;
padding-right:20px;
color: #ffffff;

}

header nav a {
        color: #2C3531;
}

header nav a:hover {
        color: #2C3531;
       text-decoration: underline;
}

nav .navigation, nav ul {
    list-style: none;
    padding-left: 40px;
    text-color: #b2c0b9;
}


/*Text Styles */
h1{display:left}
h1{text-align:left;font-size:24px;margin-bottom:6px;line-height:32px;font-weight:normal}

body{background-color:#ffffff;font-family:"Veranda", sans-serif;font-size:16px;margin:0;word-wrap:break-word}

figcaption{text-align:center;font-size:12px;line-height:14px;margin-top:4px;}

p{color:#000000;}

/* newChanges */
/* 
 a {
        color: #0645AD;
}
*/

/*Item Page Style */
/*adds space beneath Universal Viewer */
#uv-1 {margin-bottom:6px;}

/*Item Browse Page*/
.browse .resource img {
    max-width: 100%;
    max-height: 200px;
   text-align: center;
}


/*Sub Menu Style*/

.page #content .sub-menu ~ *:not(.site-page-pagination) {
width: 100%;
}
.page #content .sub-menu a {
    font-size: 15.75px;
    color: #676767;
float: right;
}
#content .blocks > h2:first-of-type {
line-height: 20px;
padding: 20px 0 0 0;
}
.page #content .sub-menu {
display:none;
}


/* Clear Float */
.clearfix {
  overflow: auto;
}

/* Figure formatting */
.figure {
overflow: auto;
}

#cookie-bar p{
color:white}

/* Polaroid cards */

div.polaroid {
  max-width: 250px; 
  min-width: 250px;
  position: relative;
  horizontal-align: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  background-color: #2C3531;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
}

div.polaroidtitle {
  padding: 5px 10px 15px 10px;
  width=100%;
}

.polaroid img {
  max-width: 250px; /* width of container */
  min-width: 250px;
  height: 250px; /* height of container */
  padding: 5px 0px 5px 0px;
  object-fit: cover;
  object-position: 20% 10%; 
 }

/* Flex container for responsive layout for cards */

.flex-container {
  display: flex;
  flex-direction: row;
  text-align:center;
  max-width: 90%;

}

.flex-item-cardcontainer {
  padding: 0 5px 20px 5px;
  flex: 33%;
  text-align: center;

}

.flex-item-cardcontainer a {
  color: #D1E8E2;
}

.flex-item-cardcontainer a:hover {
  color: #FFCB9A;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

/* Data and Collections List Styling */
.data-list {
  display: flex;
  flex-direction: row;
  text-align: left;
}

.data-list-title {
  padding: 10px 10px 0px 10px;
  font-size: bigger;
  width: 100%;
  background-color:#3C3531;
}

.data-list-image {
  padding: 0px;
  width:30%;
}

.data-list-image img {
  width:100%;
}

.data-list-text {
  color: black;
  margin: 10px;
  padding: 0px 10px 10px 10px;
  flex: 50%;
}


/* contact cards */

.column-contact {
  float: left;
  width: 25.0%;
  margin-bottom: 16px;
  padding: 0 8px;
  height: 500px;
  overflow: auto;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card-contact {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.card-contact img {
    object-fit: cover;
    height:200px;
 
}

.container-contact {
  padding: 0 16px;
}

.container-contact::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title-contact {
  color: grey;
}

/* Button styling */
.button-container-details {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
  margin-top: 10px;
}

.button-details {
  border: none;
  background-color:#116466; /* some sort of dark, teal-ish color */
  width:11%;
  color:#D1E8E2; 
  padding: 10px 5px 10px 5px;
  margin: 5px 5px 5px 5px;
  display: flex;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  justify-content: center;
  align-items: center;
  text-align: center;
}

.button-details a {  color:   #ffCB9A;}
.button-details-wide a {  color:   #ffCB9A;}

.button-details a:hover {  color:#2C3531;}
.button-details-wide a:hover {  color:#2C3531;}

.button-details-wide {
  border: none;
  background-color:#116466; /* some sort of dark, teal-ish color */
  width:35%;
  color:#D1E8E2; 
  padding: 10px 5px 10px 5px;
  margin: 5px 5px 5px 5px;
  display: flex;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

@media only screen and (max-width: 800px) {
  .button-details {
    width: 49.99999%;
    padding: 6px 6px;
  }
}

@media only screen and (max-width: 500px) {
  .button-details {
    width:100%;
    padding: 6px 6px;
  }
}

.button-details.active {
  background-color: #0d3532; /* Change this to the color you want for the active button */
  color: #ffCB9A;
}

/* Container for Image with Text for Titles*/
.container-title {
  position: relative;
  text-align: center;
  height: 300px;
}

.container-title img {
  max-height: 300px; 
  width: 100%;
  object-fit: cover;
  object-position: 25%; 
}


.container-title h2 {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -55%);
  color:#2C3531;
  text-size:bigger;
  font-size: 36px;
  line-height: 48px;    
  font-weight: bold;
  border: 10px solid #2C3531;
  width:80%;
  background-color: white;
  
}

@media only screen and (max-width: 600px) {
  .container-title h2  {
    width: 100%;
    padding: 6px 6px;
  }
}

/* Container for sub-pages with Image with Text for Titles*/
.container-title-sub {
  position: relative;
  text-align: center;
}

.container-title-sub img {
  height: 200px; 
  width: 96%;
   padding: 5px;
  object-fit: cover;
  object-position: 25%; 
}

.container-title-sub h2 {
  position: absolute;
  bottom: 30px;
  right: 10px;
  background-color: #2C3531;
  color:#D1E8E2;
  text-size:bigger;
  max-width: 80%;
  font-size: 36px;
  margin-bottom: 24px;
  line-height: 48px;    
  font-weight: normal;
  padding: 15px 10px 15px 10px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.container-title-sub-caption {
   text-align: right;
   font-size: 12px;
   margin-bottom: 12px;
}


/* CSS drop-down menu button */
.dropbtn {
  background-color: #116466;
  color: #D1E8E2;
  font-size: 16px;
  border: none;
  cursor: pointer;
  padding: 10px 5px 10px 5px;
  margin: 5px 5px 5px 5px;
  display: flex;

  display: inline-block;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)
}

.dropbtn:hover, .dropbtn:focus {
  text-decoration: underline;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  width: 140%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd; text-decoration: underline;}

.show {display: block;}

/* Sort Buttons on Lesson Plan Page */

.filterDivLesson {
  width: 100%;
  min-height: 250px;
  max-height: 300px;
  display: none;
  margin: 0px 0px 25px 0px;
   padding: 5px 5px 0px 0px;
  background-color:white;
}

.filterDivLesson h5 {
  margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
   color:#2C3531;
   display: inline;
}

/* container of the cards */
.flexContainerLesson {
  display: flex;
  flex-wrap: wrap;
  min-height: 250px;
  max-height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow: scroll;
  overflow-x: hidden;
  margin: 0px 0px 50px 0px;
}

.DivLessonSpecifics {
  flex: 15%;
  margin: 10px 0px 0px 10px;
}

.DivLessonTitle h4 {
  margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.DivLessonTitle a {
  text-decoration: underline;
    color: #2C3531;
} 

.DivLessonTools  {
  margin: 10px 0 0 0;
}

.DivLessonSkill {
  margin: 10px 0 0 0;
}

/* text overflowing issue*/

.DivLessonDescrip {
  flex: 65%;
   margin: 0px 0px 10px 10px;
  text-overflow: ellipsis;
  position: relative;
}
/* lesson plan author's line */
.DivAuthor {
  font-style: italic;
}

/*lesson plan card views from mobile screen */
/* Responsive layout - makes a one column-layout instead of a four-column layout */
@media (max-width: 800px) {
  .DivLessonDescrip, .DivLessonSkill, .DivLessonTools, .DivLessonTitle {
      flex: 100%;
    }
    .filterDivLesson {
      width: 100%;
      max-height:800px;
  }


.flexContainerLesson {
  overflow: scroll;
  overflow-x: hidden;
}

}

.show {
  display: block;
}

.containerLesson {
  margin-top: 20px;
  
}

/* Style the buttons  for filter*/
.btnBox {
  text-align:center;
}
/*lesson plan buttons*/
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  margin: 10px;
  background-color: #116466;
  cursor: pointer;
  color:#D1E8E2
}

.btn:hover {
  background-color: #2C3531;
  text-decoration: underline;
}

.btn:focus {
  background-color: #2C3531;
  color: D1E8E2;
}

/* added for the nav bar in the tools page */
/* nav bar css */

	.navbar {
		display: inline-block;
		justify-content: space-around; /* evenly distribute the space between menu items */
		position: fixed;
		top: 0;
		background-color: #333;
		transition: top 0.3s; /* Add a transition for smooth hiding/showing */
		z-index: 9999; /* making sure that image doesn't cover the navbar */
		left: 10%; /* right and left margins make sure the nav bar is centered */
		right: 10%;
	}

	.navbar.hidden {
		top: -80px;
	}

	.navbar a {
		display: block;
		padding: 5px;
		text-align: center;
		color: white;
		font-family: "Open Sans", sans-serif;
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		padding: 10px;
		text-decoration: none;
	}

	.navbar a:hover {
		background-color: grey;
	}

	/* navBar css for mobile screen viewing */

	/* When the screen is less than 800 pixels wide, show the menu items vertically */
	@media screen and (max-width: 800px) {
		/* Hide navigation links and show the hamburger icon */
		.navbar #navLinks {
			display: none;
		}
		.navbar .navIcon {
			display: block;
			cursor: pointer;
		}
	}

	/* When the screen is wider than 800 pixels, hide the hamburger icon and display navigation links horizontally */
	@media screen and (min-width: 800px) {
		.navbar .navIcon {
			display: none;
		}

		#navLinks {
			display: flex;
			justify-content: space-around;
		}
	}
/* DIV for right aligned and images */
div.rightaligned {
  text-align:left;
  margin:10px;
}

.rightaligned figure {
  text-align:left;
  margin:10px;
  margin: 0 0 10px 10px;
   width: 30%;
  float:right;
}

.rightaligned figure:img {
  width: 100%;
}

@media screen and (max-width: 700px) {
.rightaligned img {
    width:100%;
  background-color:blue;
}
.rightaligned figure {
    width:100%;
  background-color:blue;
} }

/* DIV for centered image */
div.centered {
  text-align:center;
  margin:10px;
  width: 90%;
}

.centered figure {
  text-align:center;
  max-width: 100%; 
  margin:10px;
}

.centered figcaption{
  text-align:right;
  max-width: 100%; 
  margin:10px;
}

.centered img {
    width:80%;
    border: 1px solid #D1E8E2;
}

.centered ol li {padding: 6px; color:#000000;}
}

div.twoimages {
  float: left;
  width: 400px;
  padding: 5px;
}

div.twoimages figure {
  width: 100%;
}

div.twoimages img {
  width: 100%;
}

@media screen and (max-width: 700px) {
.centered img {
    width:100%;
  background-color:#D1E8E2;
}
.centered figure {
    width:100%;
  background-color:#D1E8E2;
  padding: 0 0 4px 0;
}
.twoimages  {width:100%;   background-color:#D1E8E2;  padding: 0 0 4px 0;}
}

/* Lesson Plan Styling */
div.lessonplan {   width:100%;}
.lessonplan ol li {padding: 6px; color:#000000;}
.lessonplan figure {text-align:center;width:90%; padding: 0 4px 4px -4px;}
.lessonplan img {max-width:100%; max-height:500px; padding: 2px; background-color:#D1E8E2;}
.lessonplan figcaption {text-align:center;}
.lessonplanoverview ol li {padding: 6px; color:#000000;}

@media screen and (max-width: 700px) {
.lessonplan figure {text-align:center;width:100%; background-color:#D1E8E2; padding: 0 4px 4px 4px; margin: 2px 4px 4px 4px;}
.lessonplan img {width:100%; }
.lessonplan figcaption {width:100%;padding: 0 8px 4px 4px;text-align:right;}
}

/* print screen styling */
@media print {
    #user-bar {
        display: none;
    }
    .button-group {
        display: none;
    }
/* targeting project pages */
   .button-container-details {
        display: none;
    }
}


/* for the tech review website */
.tldr {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tldr ul {
  width: 45%; /* or any desired width */
  box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  .tldr {
    flex-direction: column;
  }

  .tldr ul {
    width: 100%;
  }
}

/* Setting up tabs for context pages */
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

/* Set height of body and the document to 100% */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Flex Image Gallery */
div.galleryRow {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.galleryColumn {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.galleryColumn img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .galleryColumn {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .galleryColumn {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

/* Space Type Cards with Parallax Effect */
.spaceCardsParallax {
  /* The images used  and height*/
  min-height: 300px;
   

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.spaceCardsParallax background-image {
  width:100%;
}




@media screen and (min-width: 800px) {
		.flexContainerLesson {
			display: grid;
			grid-template-areas:
				"first second"
				"third second"; /* this makes the second div (image) span two rows */
			grid-template-columns: 50% 50%;
			grid-template-rows: 50% 50%;
		}

		.DivLessonSpecifics {
			grid-area: first;
		}
		.DivLessonsImage {
			grid-area: second;
                        
			top: 0;
		}
		.DivLessonsImage img {
			width: 100%; /* Take full width of the container */
			object-fit: contain; /* Maintain aspect ratio and fit within the container */
		}
		.DivLessonDescrip {
			grid-area: third;
		}
	}

	@media screen and (max-width: 800px) {
		.DivLessonSpecifics {
			width: 100%;
			height: 100%;
		}
		.DivLessonsImage {
			width: 100%;
			height: 100%;
		}
		.DivLessonsImage img {
			width: 100%; /* Take full width of the container */
                        height: 100%;
			object-fit: contain; /* Maintain aspect ratio and fit within the container */
		}
		.DivLessonDescrip {
			width: 100%;
			height: 100%;
		}
	}


.DivLessonsImage {
  transition: transform 0.5s ease;
}