/*
    TEAM PAGE CSS
    April 2024
*/

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

.blurbheader
{
 font-weight: bold;
 font-size: 20px;
 font-style: italic;
 color: #004488;
 padding: 3px 0 10px 0;
}

.data { display: none; }

.teammember
{
 text-align: center;
 font-size: 12px;
 font-weight: bold;
 color: #004488;
}
.teamname
{
 padding: 3px 0 0 0;
}

.team-name
{
 font-size: 15px;
 font-weight: bold;
 color: #004488;
}
.team-title
{
 font-size: 13px;
 padding: 0 0 10px 0;
}
.team-blurb
{
 font-size: 13px;
 padding: 0 0 10px 0;
}
.team-locality
{
 font-size: 12px;
 font-style: italic;
}
.team-email { font-size: 12px; }
.team-tel   { font-size: 12px; }
.team-pic
{
 width: 100%;
 height: auto;
 max-width: 150px;
}
.team1col { display: none; }  
.team2col { display: block; }


.teamcontainer
{
 align: left;
 width: 100%;
 max-width: 840px;
}

.teamgallery
{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 gap: 10px;
 list-style: none;    
 padding: 0;
 margin: 0 20px 0 10px;
 //background-color: pink;
}
.teamgallery li
{
 flex-basis: 120px; 
}
.teamgallery li img
{
 object-fit: cover;
 width: 113px;
 height: 150px;
 max-width: 100%;
 height: auto;
 vertical-align: middle; 
}

.desktop_table
{
// padding: 0 50px 0 0;
// border-collapse: separate;
 //background-color: pink;
}   

.team_second_column
{
 padding: 0 0 0 15px;
}


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: 1000px)
//{
//  .teamcontainer
//  {
//   align: left;
//   width: 800px;
//  }
//}

//@media only screen and (max-width: 975px)
//{
//  .teamcontainer
//  {
//   align: left;
//   width: 800px;
//  }
//}  

@media only screen and (max-width: 850px)
{
  .teamheader
  {
   font-size: 24px;
   padding: 8px 0 5px 5px;
   color: #004488;
   font-weight: bold;
  }
  
  .child
  {
   position: fixed;
   top: 45px;
   margin: 0 0 0 -10px;
   padding: 0 0 15px 0;
   max-width: inherit;
   width: 830px;
   //width: inherit;
  }      

  .meeticon
  {
   height: auto;
   width: 120px;
  }
  .meeticontd { width: 120px; }
  .teamspacer { height: 195px; }    
  .linksheader
  {
   font-size: 24px;
   margin: -10px 0 8px 0;
   padding: 0;
   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)
{                                  
  .teamcontainer                   
  {                                
   align: left;
   margin: 0 auto;
   width: 450px;                   
  }                                
}      

@media only screen and (max-width: 480px)
{                                  
  .teamcontainer                   
  {                                
   align: left;
   margin: 0 auto;
   width: 300px;                   
  }                                
}
                   
@media only screen and (max-width: 500px)
{
  .teamheader
  {
   font-size: 22px;
   padding: 5px 0 0px 10px;
   color: #004488;
   font-weight: bold;
  }  
  .blurbheader
  {
   font-weight: bold;
   font-size: 18px;
   font-style: italic;
   color: #004488;
   padding: 3px 0 10px 0;
  }
}
  
//@media only screen and (max-width: 400px)
//{  
//  .blurb
//  {
//   font-size: 13px;
//   padding: 0 15px 10px 0px;
//  }   
//  .child
//  {
//   width: 350px;
//  }
//}