/*
    TEAM PAGE CSS
    April 2024
*/

.creditsheader
{
 font-size: 24px;
 padding: 20px 0 10px 0px;
 color: #004488;
 font-weight: bold;
}

.ctitle
{
 padding: 0px 0 10px 0px;
 font-weight: bold;
 font-size: 20px;
 color: #004488;
}

.largecontainer
{
 align: left;
 width: 100%;
 //max-width: 900px;
}

.largegallery
{
 display: flex;
 //flex-flow: row-wrap;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px;
 list-style: none;    
 padding: 0;
 margin: 0 20px 0 10px;
 //background-color: pink;
}
.largegallery li
{
 display: flex;
 flex-direction: column;
 //flex: 1;
 flex-basis: 180px;
 align-items: center; 
 text-align: center;
 padding: 0 0 7px 0;
 //border: 1px solid red;
 background-color: #eeeeee;
}
.largegallery li img
{
 //object-fit: cover;
 width: 100%;
 //max-width: 100%;
 height: auto;
 vertical-align: middle;
 padding: 0 0 5px 0; 
 //background-color: pink;
}

.mediumgallery
{
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px;
 list-style: none;    
 padding: 0;
 margin: 0 20px 0 10px;
 //background-color: pink;
}
.mediumgallery li
{
 display: flex;
 flex-direction: column;
 //flex: 1;
 flex-basis: 130px;
 align-items: center; 
 text-align: center;
 //border: 1px solid red;
 background-color: #eeeeee;
}
.mediumgallery li img
{
 //object-fit: cover;
 //width: 100%;
 max-width: 100%;
 height: auto;
 vertical-align: middle;
 padding: 0 0 5px 0; 
 //background-color: pink;
}

.credits
{
 //align-self: flex-end;
 margin-top: auto;
 //border: 1px solid blue;
}

.credittitle
{
 text-align: center;
 font-weight: bold;
 font-size: 13px;
}
.creditdetail 
{
 text-align: center;
 font-style: italic;
 font-size: 13px; 
}

.secondcolumn
{
 padding: 0 10px 0 20px;
 //background-color: pink;
}

//.credit-pic
//{
// width: 100%;
// height: auto;
// max-width: 240px;
//}
//.team1col { display: none; }  
//.team2col { display: block; }
//
//.desktop_table
//{
//// padding: 0 50px 0 0;
//// border-collapse: separate;
// //background-color: pink;
//}   
//

article
{
 -webkit-column-count: 3;
    -moz-column-count: 3;
         column-count: 3;
 -webkit-column-width: 200px;
    -moz-column-width: 200px;
         column-width: 200px; 
 -webkit-column-gap: 1.5em;
    -moz-column-gap: 1.5em;
         column-gap: 1.5em; 
 -webkit-column-rule: 1px solid #ddd;
    -moz-column-rule: 1px solid #ddd;
         column-rule: 1px solid #ddd;
} 

.mobile
{
 display: none;
}

.columnlogo
{
 max-width: 100%;
 height: auto;
}

#wrapper
{
 width: 100%;
 max-width: 1000px;
 margin: 0px auto;
}

.mainwrapper
{
 padding: 10px;
}
 
.contact
{
 font-size: 13px;
 color: #004488;
 //font-weight: bold;
}

/* ::::::::::::::::  MEDIA QUERIES :::::::::::::::::::: */ 

@media only screen and (max-width: 960px)
{
  .largecontainer
  {
   align: center;
   //width: 800px;
  }
}
//
//@media only screen and (max-width: 950px)
//{
//  .largecontainer
//  {
//   align: left;
//   width: 700px;
//  }
//}  

@media only screen and (max-width: 850px)
{
  .creditsheader
  {
   font-size: 20px;
   padding: 8px 0 3px 5px;
   color: #004488;
   font-weight: bold;
  }

// .mobile
// {
//  display: block;
// }

}      

//@media only screen and (max-width: 700px)
//{  
//  .child
//  {
//   position: fixed;
//   top: 45px;
//   margin: 0 0 0 -10px;
//   padding: 0 0 15px 0;
//   max-width: inherit;
//   width: 600px;
//   //width: inherit;
//  }
//}           

//@media only screen and (max-width: 600px)
//{   
//  .child
//  {
//   position: fixed;
//   top: 45px;
//   margin: 0 0 0 -10px;
//   padding: 0 0 15px 0;
//   max-width: inherit;
//   width: 500px;
//   //width: inherit;
//  }
//  .team1col { display: block; }
//  .team2col { display: none; }
//}               

@media only screen and (max-width: 570px)
{                                  
  .largecontainer                   
  {                                
   align: left;
   margin: 0 auto;
   width: 450px;                   
  }                                
}   

@media only screen and (max-width: 500px)
{   
  .creditsheader
  {
   font-size: 20px;
  }                               
  .largecontainer                   
  {                                
   align: left;
   margin: 0 auto;
   width: 450px;                   
  }                                
} 

@media only screen and (max-width: 480px)
{      
  .creditsheader
  {
   font-size: 18px;
  }                                 
  .largecontainer                   
  {                                
   align: left;
   margin: 0 auto;
   width: 300px;                   
  }                                
}
                   

//@media only screen and (max-width: 500px)
//{   
//  .child
//  {
//   width: 400px;
//  }
//  .meeticon
//  {
//   height: auto;
//   width: 100px;
//  }
//  .meeticontd { width: 100px; }
//}  
//@media only screen and (max-width: 400px)
//{  
//  .blurb
//  {
//   font-size: 13px;
//   padding: 0 15px 10px 0px;
//  }   
//  .child
//  {
//   width: 350px;
//  }
//}