/* Style the tab and tab buttons */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #2c3531;
}

.tab button {
  background-color: #D1E8E2;
  margin: 3px 3px 3px 3px;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #D9B08C;
}

.tab button.active {
  background-color: #D9B08C;
}

/* hyperlink color for paragraph */
 a {
        color: #0645AD;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent.show {
	display: block;
}

/* 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{background-color:#116466; color:#D1E8E2;}
header nav .navigation {
margin:0px;
padding-left:20px;
padding-right:20px;
color: #ffffff;
margin-bottom:6px;
}

header nav a {        color: #FFCB9A;}
header nav a:hover {        color: #D9B08C;}
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:10px;line-height:14px;margin-top:4px;}

p{color:#000000;}


#content a:hover {
        text-decoration: none;
}


/*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;
}


/* Item Showcase and Carousel Styles */
.item-showcase {
border-top:none;
border-bottom:none;
margin:0px;
}

.item.resource .caption {
background-color: #b7b3a5;max-width:80%;  margin-left: auto;
  margin-right: auto; text-align: center;
}

.shortcode-carousel-title {
line-height:12px;
text-align:center;
font-size: 10px;
}

.jcarousel img{
margin:auto;
}

/*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;
}
.page #content .sub-menu {
display:none;
}

.blocks {padding-left: 30px; padding-right:30px}

.tl-storyslider {height: 400px;}


/* Section Sidebars for filters */
#section-sidebar {
padding-top: 25px;
}

.browse-controls {
padding-top: 25px;
}
.resource-name {
display:block;
white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40ch;
}
.assets {max-width:35%; display:relative}


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

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

.container-title 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);
}


.top-right-title {
  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 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;
}

/* 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);
 
}

.polaroid a {color: white;}
.polaroid:hover { background-color:#d9B08C;}
.polaroid a:hover {  color:#2C3531;}


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;

}

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

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



/*Card Styling Row */
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Card Styling Column */
.column {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 20px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

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

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

.top-right-title {
  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);
}

/* Button styling */

.button-container-details {
  text-align: center;
  width:100%;
}

.button-details {
  border: none;
  background-color:#116466; /* some sort of dark, teal-ish color */
  width:22%;
  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);
}

.button-details-5 {
  border: none;
  background-color:#116466; /* some sort of dark, teal-ish color */
  width:15%;
  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);
}


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

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

.button-details:hover { background-color:#D9B08C;}
.button-details a:hover {  color:#2C3531;}
.button-details-5:hover { background-color:#D9B08C;}
.button-details-5 a:hover {  color:#2C3531;}

/* Parallel Translation Style */
.tg  {border-collapse:collapse;border-spacing:0;}

.tg td{padding-top:10px;padding-left:10px;padding-right:10px;border-right-style:solid;border-width:1px;vertical-align:top;}

.tg td:first-child{border-style:none;border-width:0px;text-align:right;}

tmx {display:table;}
tu{display:table-row;}
tuv{display:table-cell; padding: 20px; border-right: solid; border-width: 1px;}
tuv:last-child{border-style:none;}

prop{display:none;}

hr.solid {border-top: 3px  solid;}

/* Multiple Alignments per Line */
.alignleft {
	float: left;
}

.alignright {
	float: right;
}


/* experimental changes for the drop down menu */
/* Style the main menu */

nav {
  text-align: center;
}

#menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  border: 2px solid #333;
  font-size: 18px;
}

.menu-item {
  padding: 10px 15px;
  position: relative;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #ddd;
}

.dropdown {
  display: none;
  position: absolute;
  min-width: 100%;
  top: 100%;
  left: 50%;
  transform: translateX(-50%); 
  background-color: #f1f1f1;
  padding-inline-start: 0;
}

.dropdown li {
  padding: 8px 12px;
  display: block;
  border-bottom: 1px solid #ccc;
  margin-left: 0;
  font-size: 14px;
  text-align: center;
}

.dropdown li:last-child {
  border-bottom: none;
}

.dropdown li:hover {
  background-color: #ddd;
}



/* creating tabs in the context pages */
* {box-sizing: border-box}

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

/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

/* 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: #D1E8E2;
}

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;
}