/*  https://www.w3schools.com/cssref/css_selectors.asp       syntax cheat sheet  */
 

body {
  X_min-height: 75rem; /* Can be removed; just added for demo purposes */
}

.thumbnailimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0px;
}

.footer_tn1 {
  text-align:center;
  color:#999;
}

.footer_left_tn1 {
  float:left;
}

.footer_right_tn1 {
  float:right;
}

.footer_tn1 {

}


/* 220520 added by TN to fix navbar compatibility */
.centered_frame_tn1 {
  position: relative;
  margin:50px auto auto auto;
  width:96%;
  min-width: 768px;    /* horizontal scroll shows if the window becomes narrower than this for desktop */
                       /* card_tn1:min-width:240 x 3 + margin:16.375 x 6 = = 720 + 98 = 818            */
  X_background-color: yellow;
  color: #777;
}

.title1_tn1 {
  text-align: center;
  font-family:sans-serif;
  font-weight:300;
  font-size:28px;
  margin:24px 0;
}
.title2_tn1 {
  text-align: center;
  font-family:sans-serif;
  font-weight:300;
  font-size:12px;
  margin:24px 0;
}
.title3_tn1 {
  text-align: center;
  font-family:sans-serif;
  margin:12px 2%;
  background-color:#eee;
}

.card_tn1 {
  position: relative; /* make this work for responsive mobile later */
  float: left;
  width: 29.3%;
  margin:0% 2% 2% 2%; 
  border: 0;
}

/* For this to override, must place this AFTER the default .centered_frame_tn1 / .card_tn1 */
@media screen and (max-width: 480px) {
   .centered_frame_tn1 {
      min-width: 200px;
   }
   .card_tn1 { 
      float: none;
      width: 96% ;
      margin: auto;
   }
   .footer_tn1 { font-size: 10px; }
   .footer_left_tn1 { float:none; }
   .footer_right_tn1 { float:none; }
   .title1_tn1 {font-size:24px;}
   .title2_tn1 {font-size:11px;}
}

.card_img_wrapper_tn1 {
  width: 100%;
  position: relative;
  padding-top: 66%;
}

.card_tn1 > img {
  margin-bottom: .75rem;
}

.card_label_tn1 {
  display: inline-block;
  line-height:100%;
  width:80%;
  font-size: 85%;
  position: relative;
  margin: auto;
  padding: 5px 0px;
  overflow: hidden;      /* 220614 TN mod */
  white-space: nowrap;   /* No menu makes two llines */
}

.proj_info_icon_tn1 {
  width: 12px;
  margin-right:10px;
  padding: 6px 0px;
  Xright: 0px;
  Xbottom: 0px;
  Xposition: absolute;
}

.proj_info_icon_tn1:hover {
 X_background-color: rgba(0,0,0,0.05);
 X_color: black;
  opacity:0.6;
}

.proj_info_text_tn1{
  display:none;
  position: absolute;    /* float over other elements */
  width:90%;
  background-color:#eee;
  padding:5%;
  font-size:12px;
  z-index:200;
}

.btn_group_tn1 {
  margin-bottom:16px;
  text-align: center;
}

.btn_tn1 {
  width: 42% ;

  background-color: white; /* Green */
  color: #888;
  padding: 5px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0px 1%;
  cursor: pointer;

  border: 1px solid #888;
  border-radius: 6px;
}

.btn_tn1:hover {
  color:grey;
  opacity:0.6;
}

.btn_group_tn1 {
  text-align: center;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}