@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/* showcase variables */

*
{
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 0;
	padding: 0;
}

*::before, *::after {
  box-sizing: inherit;
}

html, body

{width: 100%;
margin: 0;
font-size: 1rem;
line-height: 2rem;
color: #333;
	
	font-family: 'Montserrat', serif;

	}
	
 

h2, h3, h4, h5, h6 {font-family: 'Montserrat', Arial, sans-serif; line-height: 1.9rem; margin-bottom: 1.3rem;}

h2 {border-bottom: solid 1px #ccc;}

h4 {font-style: italic;}

h1 {font-size: 2rem; line-height: 2.4rem; margin-bottom: 1.5rem;}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	  h1, h2, h4, h3, h5, h6 {font-family: 'Montserrat', Arial, sans-serif;line-height: 1.3rem; }
	  
  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', Arial, sans-serif;line-height: 1.3em; }
  }

a {text-decoration: none; padding: 1px; color: #0e406a; font-weight: bold;}

a:hover, a:focus {color: #ffd200;}

hr {
	 border-top: dotted 2px #666; margin: 1rem 0;
	 border-bottom: none;
	
 }
  .button 
 {
	border: solid #666 1px; border-radius: .5rem; background-color: white;
	font-weight: bold; width: 7rem; text-align: center; margin: 0 auto;
 }

 @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	  .button 
 {
	width: 40%;
 }

  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	  .button 
 {
	width: 40%;
 }
  }

article {
	margin-bottom: 1rem;
}

.normal ul, ol { margin-left: 4rem; margin-bottom: 1rem;
	
}

.normal ul, ol li {
	line-height: 2rem;
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.normal  ul, ol li {
	margin-bottom: 1rem;
}

  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.normal ul, ol li {
	margin-bottom: 1rem;
}
  }

img {width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;}
  
  .fullimg {
	  margin: 1.5rem 0;
  }
  
  .imgfltleft {
	  float: left; margin: 0 1rem 1rem 0; width: 20%;
	  }
	  
.staffimg {margin: 1.5rem 0;
width: 30%;
	
}
	  
	  @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{ .imgfltleft {
	  display: block;
	  width: 100%;
	  }
	  
	  .staffimg {margin: 1.5rem 0;
width: 70%;
	
}
	  
  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{ .imgfltleft {
	  display: block;
	  width: 100%;
	  }
	  
	  .staffimg {margin: 1.5rem 0;
width: 70%;
	
}
	
  }
  
 .caption {font-size: .9rem; line-height: 1.2rem;text-align: center;}
 
 
 
  .anchor:before { 
 display: block; 
 content: " "; 
   height: 25vh;      /* Give height of your fixed element */
        margin-top: -25vh; /* Give negative margin of your fixed element */   
        visibility: hidden; 
}
 
 
 .justify-right {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
	 
	 }
 
 footer {margin: 0 1rem;
	font-size: .9em; line-height: 2rem;
	width: 100%; text-align: center;

}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	  html, body {
	font-size: 1.2rem;
	line-height: 1.5rem;

}
  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	  html, body {
	font-size: 1.2rem;
	line-height: 1.5rem;

}
  }
  
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
  and (orientation: landscape)
{
	
img {width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;}
  
  
 .caption {font-size: .6rem; line-height: 1.2rem;}
 
 footer {
	font-size: .6rem; line-height: 2rem;
}
}

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
  and (orientation: landscape)
{
	

img {width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;}
  
  
 .caption {font-size: .6rem; line-height: 1.2rem;}
 
 footer {
	font-size: .6rem; line-height: 2rem;
} }

.logo-header {
display: flex;
	 flex-direction: row;
	margin: 1rem 3rem;
	align-items: center;
	
  }
  
  .cvslogo {width: 10vw;
	height: 8vh;
	padding: 0;
	justify-content: flex-start;
	
  }
   .urlogo {width: 80vw;
   justify-content: flex-end;
	height: 6vh;
	padding-left: 65vw;
	
  }
  
  .smlogo {height: 3vh;
  width: 4vw;
  padding-left: 2vw;}
  
  @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 1000px)
  and (orientation: landscape)
{.logo-header {display: flex;
	 flex-direction: row;
	 flex-wrap: nowrap;
	 justify-content: space-between;
	margin: 1rem 3rem;
  }
  
  .cvslogo {

	height: 10vh;
	padding: 0;
	
  }
   .urlogo {

	height: 8vh;
	padding: 0;
	
  }
    .smlogo {height: 6vh;
	padding: 0;}
  }
  
  @media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 1000px)
  and (orientation: landscape)
{.logo-header {display: flex;
	 flex-direction: row;
	 flex-wrap: nowrap;
	 justify-content: space-between;
	margin: 1rem 3rem;
  }
  
  .cvslogo {

	height: 10vh;
	padding: 0;
	
  }
   .urlogo {

	height: 8vh;
	padding: 0;
	
  }
    .smlogo {height: 6vh;
	padding: 0;}
  }
  
  @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 1000px)
{.logo-header {display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
width: 100vw; margin: 0;
	}
	
	.cvslogo {width: 20vw; margin: 0 auto; height: auto; padding: 1rem 0;}
	.urlogo {max-device-width: 40vw; margin: 0 auto; height: auto; padding: 1rem 0;}
	.smlogo {width: 8vw; margin: 0 auto; height: auto; padding: 1rem 0;}

  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 1000px)
{
	.logo-header {display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
	width: 100vw; margin: 0;

  }
	
	.cvslogo {width: 20vw; margin: 0 auto; height: auto; padding: 1rem 0;}
	.urlogo {max-device-width: 40vw; margin: 0 auto; height: auto; padding: 1rem 0;}
	.smlogo {width: 8vw; margin: 0 auto; height: auto; padding: 1rem 0;}

  }


.nav-container {
    width: 100vw;
	background: rgba(255, 255, 255, 0.8);
   z-index: 1;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   font-family: 'Montserrat', Arial, sans-serif;
   font-size: 1.2vw;
	
  }
  @media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
  .nav-container {
    
   position:static;
   
	
  }
   }
   
   @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
  .nav-container {
    
   position:static;
   
	
  }
   }
 
 
nav {
  background: #1d3c71;
}
nav a {
  color: white;
  text-decoration: none;
}

.menu,
.submenu {
  list-style-type: none;
  z-index: 10;
}
.logo {
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem;
}

/* Mobile menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}

.menu li a {
  display: block;
  padding: 1rem 2rem;
}
.menu li.subitem a {
  padding: 15px;
}
.toggle {
  order: 1;
  font-size: 2rem;
}

.item {
  order: 3;
  width: 100%;
  text-align: left;
  display: none;
  font-size: 1.2rem;
}
.active .item {
  display: block;
}

/* Submenu up from mobile screens */
.submenu {
  display: none;
}
.submenu-active .submenu {
  display: block;
}
.has-submenu i {
  font-size: 12px;
}
.has-submenu > a::after {
  font-family: "Font Awesome 5 Free";
  font-size: 1rem;
  line-height: 16px;
  font-weight: 900;
  content: "\f078";
  color: white;
  padding-left: 5px;
}
.subitem a {
  padding: 10px 15px;
  margin-left: 2rem;
  font-size: 1rem;
}
.submenu-active {
  background-color: #1d3c71;
  border-radius: 3px;
}

  
/* Desktop menu */
@media all and (min-device-width: 1000px)
{
  .menu {
    flex-wrap: nowrap;
    background: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
    display: flex;
	justify-content: space-evenly;
  }

  .submenu-active .submenu {
    display: block;
    position: absolute;
    top: 210px;
    background: #1d3c71;
  }
  .toggle {
    display: none;
  }
  .subitem a {
  padding: 10px 15px;
  margin-left: 0;
  font-size: 1rem;
}
  .submenu-active {
    border-radius: 0;
  }
}


.Icontainer {display: -ms-grid;
display: grid;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: start;
    margin: 0;}
  
  .Icontainer div {flex-grow: 1; }
   
  .Ithreecol {display: block; margin: 0 auto; text-align: center; max-width: 90vw;}
  
  .Ithreecol div {margin: 2rem 4rem;

	border-top: solid 8px #245376;
	 border-left: 1px solid #d3d3d3;
	 border-right: 1px solid #d3d3d3;
	 border-bottom: 1px solid #d3d3d3;
  border-radius: .25rem;
  padding: 15px;
}

.Ithreecol div div {

border: 0; padding: 0; margin: 0;
}

@media screen 
  and (min-width: 1100px) 
  and (max-width: 1399px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  .Ithreecol {display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
 align-items: flex-start; justify-content: center;
 max-width: 100vw;
 font-size: smaller;
 line-height: 1.2rem;
}
.Ithreecol div {margin: 2rem;}

}

 @media screen 
  and (min-width: 1100px) 
  and (max-width: 1399px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
  
  .Ithreecol {display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
 align-items: flex-start; justify-content: center;
 max-width: 100vw;
 font-size: smaller;
  line-height: 1.2rem;
}
.Ithreecol div {margin: 2rem;}
}
   
   @media screen 
  and (min-width: 1400px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  .Ithreecol {display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
 align-items: flex-start; justify-content: center;
 max-width: 90vw;
}

}

 @media screen 
  and (min-width: 1400px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
  
  .Ithreecol {display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
 align-items: flex-start; justify-content: center;
 max-width: 90vw;
}

}
.container {max-device-width: 1366px;
    margin: 0 auto;
	width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns:  minmax(275px, 20%) 3rem auto;
grid-template-columns:  minmax(275px, 20%) auto;
grid-gap: 3rem;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: start;
padding: 2rem 10rem;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	 .container {max-device-width: 100vw;
    margin: 0 auto;
	width: 100%;
display: flex;
    align-items: flex-start;
padding: 2rem 10rem;}

.container aside {margin-left: auto; border: solid 3rem transparent; min-device-width: 25vw;}

.container section {flex-grow: 1; margin-left: 2rem;}
.container main {flex-grow: 1; margin-left: 2rem;}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
.container {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	width: 100vw;
	margin: 0;
	padding: 0 1rem;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	}	  
  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.container {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	width: 100vw;
	margin: 0;
	padding: 0 1rem;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	}	
  }
  
 .Pcontainer {max-device-width: 1720px;
    margin: 0 auto;
	width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns:  minmax(275px, 20%) 3rem auto;
grid-template-columns:  minmax(275px, 20%) auto;
grid-gap: 3rem;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: start;
padding: 2rem 10rem;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	 
	 .Pcontainer {max-device-width: 100vw;
    margin: 0 auto;
	width: 100%;
display: flex;
    align-items: flex-start;
padding: 2rem 10rem;
}


.Pcontainer aside {margin-left: auto;border: solid 3rem transparent; min-device-width: 25vw;}

.Pcontainer div {flex-grow: 1; margin-left: 2rem;}

}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
.Pcontainer {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	width: 100%;
	margin: 0;
	padding: 0 1rem;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	}	  
  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.Pcontainer {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	width: 100%;
	margin: 0;
	padding: 0 1rem;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	}	
  }
  
  .Rcontainer {
    margin: 0 auto;
	width: 100vw;
display: -ms-grid;
display: grid;
-ms-grid-columns:  minmax(200px, 22%) 1rem auto;
grid-template-columns:  minmax(200px, 22%) auto;
grid-gap: 1rem;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: start;
padding: 2rem 1rem;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	 
	 .Rcontainer {
    margin: 0 auto;
	width: 100vw;
display: flex;
    align-items: flex-start;
padding: 2rem 1rem;
}

.Rcontainer aside {
 min-device-width: 22vw;}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
.Rcontainer {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	width: 100vw;
	margin: 0;
	padding: 0 1rem;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	}	  
  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.Rcontainer {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	width: 100vw;
	margin: 0;
	padding: 0 1rem;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	}	
  }

.left-sidebar {
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
top: 12vh;
  padding: 1rem;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
}

.left-sidebar ul li {
	list-style-type: none;
	padding: 0;
  margin:0 0 1rem 0;
	}

.left-sidebar ul li ul li {
	font-size: .8rem;
	list-style-type: none;
	margin-left: -2rem;
	}
	
@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{.left-sidebar {
margin: 0;
top: 0;
  padding: 0rem;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem;
  line-height: .8rem;
}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{.left-sidebar {
margin: 0;
top: 0;
  padding: 0rem;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem;
  line-height: .8rem;
}
}


.content {
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.index_current {
	display: -ms-grid;
	display: grid;
	width: 100%;
	-ms-grid-columns: minmax(300px, 1fr);
	grid-template-columns: minmax(300px, 1fr);
	grid-gap: 1rem;
	grid-auto-rows: minmax(100px, auto);
	justify-items: start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	margin: 20px 0;

	border-top: solid 8px #0e406a;
	 border-left: 1px solid #d3d3d3;
	 border-right: 1px solid #d3d3d3;
	 border-bottom: 1px solid #d3d3d3;
  border-radius: .25rem;
  padding: 15px;
}
	

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_current {
	display:block;
	width: 100%;

	
	}
	.index_current div {
	margin-bottom: 2rem;
}
	

}

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_current {
	display:block;
	width: 100%;

	
	}
	.index_current div {
	margin-bottom: 2rem;
}
	

}


.card {
  border: 1px solid #d3d3d3;
  border-radius: .25rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.bg-img {margin: 2rem 2rem 0 2rem;
  background-size: cover;
  min-height: 180px;
  background-position: center;
}

.card_content {
  padding: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  font-size: .9rem;
  line-height: 1.2rem;
}
.card_content h3 { text-align: center;}

button {
  border: 1px solid #333;
  padding: .5rem 1rem;
  cursor: pointer;
  border-radius: .25rem;
  font-size: .9rem;
  -webkit-transition: opacity .5s ease-in;
  -o-transition: opacity .5s ease-in;
  transition: opacity .5s ease-in;
}

button:hover {
	opacity: 0.7;
	color: #ffd200;

}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_news {
	display:block;
	width: 100%;

	
	}
	.index_news .card {
	margin-bottom: 2rem;
	
}
}

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_news {
	display:block;
	width: 100%;

	
	}
	.index_news .card {
	margin-bottom: 2rem;
	
}
}


.index_about {
	width: 100%;
	padding-top: 1rem;
	
}

.index_about h3, p, ul {
	padding: .5rem 0;
	
}

.index_about ul li { list-style-type: none; margin-left: 3rem;
	
}



@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_about, .index_welcome, .index_history {
	padding: 10px 0px;
	width: 100%;

	
}
}

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{.index_about, .index_welcome, .index_history {
	padding: 10px 0px;
	width: 100%;

	
}
	
}


.index_EC {
	margin: 2rem auto;
	padding: 20px 10px;
	display: -ms-grid;
	display: grid;
	width: 30vw;
	-ms-grid-columns: minmax(50px, 1fr) 2rem minmax(50px, 1fr) 2rem minmax(50px, 1fr);
	grid-template-columns: repeat(3, minmax(50px, 1fr));
	grid-gap: 2rem;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: start;
-ms-grid-column-align: center;
    justify-self: center;
border-top: solid 8px #0e406a;
	 border-left: 1px solid #d3d3d3;
	 border-right: 1px solid #d3d3d3;
	 border-bottom: 1px solid #d3d3d3;
  border-radius: .25rem;
}

.index_EC div {
	text-align: center;
	line-height: 1.2rem;
}

.index_EC img {max-device-width: 8vw;}

.index_EC p{
	font-size: .9rem;
	
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	.index_EC {
	margin: 2rem auto;
	padding: 20px 10px;
	width: 60vw;
	display: flex;
        align-items: start;
}
.index_EC div {flex: 1; padding: 0 .2rem;}

}


@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_EC {display: block; margin: 0 auto; text-align: center;}
	.index_EC img {
	width: 30vw;
	}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_EC {display: block; margin: 0 auto; text-align: center;}
	.index_EC img {
	width: 30vw;
	}
}

.index_EC2 {
	margin: 2rem auto;
	padding: 20px 10px;
	display: -ms-grid;
	display: grid;
	width: 30vw;
	-ms-grid-columns: minmax(50px, 1fr) 2rem minmax(50px, 1fr) 2rem minmax(50px, 1fr);
	grid-template-columns: repeat(3, minmax(50px, 1fr));
	grid-gap: 2rem;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: start;
-ms-grid-column-align: center;
    justify-self: center;
border-top: solid 8px #0e406a;
	 border-left: 1px solid #d3d3d3;
	 border-right: 1px solid #d3d3d3;
	 border-bottom: 1px solid #d3d3d3;
  border-radius: .25rem;
}

.index_EC2 div {
	text-align: center;
	line-height: 1.2rem;
}

.index_EC2 img {max-device-width: 8vw;}

.index_EC2 p{
	font-size: .9rem;
	
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	.index_EC2 {
	margin: 2rem auto;
	padding: 20px 10px;
	width: 60vw;
	display: flex;
        flex-wrap: wrap;        
		align-items: start;
}
.index_EC2 div {flex: 1 0 20%; padding: 0 .2rem;}

}


@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_EC2 {display: block; margin: 0 auto; text-align: center;}
	.index_EC2 img {
	width: 30vw;
	}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_EC2 {display: block; margin: 0 auto; text-align: center;}
	.index_EC2 img {
	width: 30vw;
	}
}

.index_EC3 {
	margin: 2rem auto;
	padding: 20px 10px;
	display: -ms-grid;
	display: grid;
	width: 30vw;
	-ms-grid-columns: minmax(40px, 1fr) 2rem minmax(40px, 1fr) 2rem;
	grid-template-columns: repeat(2, minmax(40px, 1fr));
	grid-gap: 2rem;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: start;
-ms-grid-column-align: center;
    justify-self: center;
border-top: solid 8px #0e406a;
	 border-left: 1px solid #d3d3d3;
	 border-right: 1px solid #d3d3d3;
	 border-bottom: 1px solid #d3d3d3;
  border-radius: .25rem;
}

.index_EC3 div {
	text-align: center;
	line-height: 1.2rem;
}

.index_EC3 p{
	font-size: .9rem;
	
}

.index_EC3 img {max-device-width: 8vw;}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	.index_EC3 {
	margin: 2rem auto;
	padding: 20px 10px;
	width: 60vw;
	display: flex;
        align-items: start;
}
.index_EC3 div {flex: 1; padding: 0 .2rem;}

}


@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_EC3 {display: block; margin: 0 auto; text-align: center;}
	.index_EC3 img {
	width: 30vw;
	}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.index_EC3 {display: block; margin: 0 auto; text-align: center;}
	.index_EC3 img {
	width: 30vw;
	}
}



.directors {
	margin: 0 4rem;
	padding: 20px 10px;
	display: -ms-grid;
	display: grid;
	width: 100%;
	-ms-grid-columns:minmax(50px, 1fr) 1rem minmax(50px, 1fr) 1rem minmax(50px, 1fr) 1rem minmax(50px, 1fr);
	grid-template-columns:repeat(4, minmax(50px, 1fr));
	grid-gap: 1rem;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: start;
-ms-grid-column-align: center;
    justify-self: center;
border-top: solid 8px #0e406a;
	 border-left: 1px solid #d3d3d3;
	 border-right: 1px solid #d3d3d3;
	 border-bottom: 1px solid #d3d3d3;
  border-radius: .25rem;
}

.directors div {
	text-align: center;
	line-height: 1.2rem;
}

.directors img {max-device-width: 10vw;}

.directors p{
	font-size: .9rem;
	
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	.directors {
	margin-top: 2rem;
	padding: 20px 10px;
	width: 100%;
	display: flex;        
		align-items: start;
}
.directors div {flex: 1; padding: 0 .2rem;}

}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.directors {display: block; margin: 0 auto; text-align: center;}
	.directors img {
	width: 30vw;
	}
	
	}
	

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	directors {display: block; margin: 0 auto; text-align: center;}
	.directors img {
	width: 30vw;
	}

}

.index_welcome, .index_history {
margin-top: 20px;	
}

.index_welcome h3 {
	margin-top: 1rem;
}
.event-title {font-family: 'Montserrat', Arial, sans-serif; font-size: 1.4rem; line-height: 1.8rem; }
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.event-title {font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; line-height: 1rem; }
	
}

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
.event-title {font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; line-height: 1rem; }
	
}
.directory {
	display: -ms-grid;
	display: grid;
      -ms-grid-columns: minmax(90px, 10%) 1rem minmax(300px, auto);
      grid-template-columns: minmax(90px, 10%) minmax(300px, auto);
	  grid-gap: 1rem;
	  -webkit-box-align: start;
	      -ms-flex-align: start;
	          align-items: start;
	 
	}
	
.directory  p {
	font-size: 1rem;
	line-height: 1.2rem;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	 .directory  { width: 55vw;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 0; margin: 0;
	 
	}
	.directory  > .left  { flex: 0 0 8%;
	padding-right: .3rem;
	margin: 0;
	}

.directory  > .right  { flex: 1 0 88%;
	margin: 0;
	padding: 0 0 .5rem .5rem;
	}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.directory {display: block; margin: 0 auto; text-align: center;}
	.directory img {
	width: 30vw;
	
	}
	
}

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.directory {display: block; margin: 0 auto; text-align: center;}
	.directory img {
	width: 30vw;
	}
	
}


.alumni {
	display: -ms-grid;
	display: grid;
      -ms-grid-columns: auto .3rem auto .3rem auto;
      grid-template-columns: repeat(3, auto);
	  grid-gap: .3rem;
	  border: solid 2px #333;
	  
	}
	
.alumni > div {
	padding: .3rem;
}


.alumni > div:nth-child(6n+4),
.alumni > div:nth-child(6n+5),
.alumni > div:nth-child(6n+6) {
  background-color: #ccc;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	 .alumni { width: 50vw;
	display: flex;
	flex-wrap: wrap;
	padding: 0; margin: 0;
	 
	}
	.alumni > div { flex: 1 0 25%;
	padding: .1rem;
		margin: 0;}

}

.alumni-g {
	display: -ms-grid;
	display: grid;
      -ms-grid-columns: 1.5fr .3rem 1.5fr .3rem 3fr .3rem 2fr;
      grid-template-columns: 1.5fr 1.5fr 3fr 2fr;
	  grid-gap: .3rem;
	  border: solid 2px #333;
	  margin: .5rem 0;
	  
	}
	
.alumni-g > div {
	padding: .3rem;
}



.alumni-g > div:nth-child(8n+5),
.alumni-g > div:nth-child(8n+6),
.alumni-g > div:nth-child(8n+7),
.alumni-g > div:nth-child(8n+8) {
  background-color: #ccc;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	 .alumni-g  { width: 50vw;
	display: flex;
	flex-wrap: wrap;
	padding: 0; margin: 0;
	 
	}
	.alumni-g  > div  { flex: 1 0 20%;
	padding: .1rem;
	margin: 0;
	}


}

.fulldirectory {
	display: -ms-grid;
	display: grid;
      -ms-grid-columns: 1fr .3rem 1fr .3rem 1fr .3rem 2fr;
      grid-template-columns: 1fr 1fr 1fr 2fr;
	  grid-gap: .3rem;
	  border: solid 2px #333;
	  margin: .5rem 0;
	}
	
.fulldirectory > div {
	padding: .3rem;
}



.fulldirectory > div:nth-child(8n+5),
.fulldirectory > div:nth-child(8n+6),
.fulldirectory > div:nth-child(8n+7),
.fulldirectory > div:nth-child(8n+8) {
  background-color: #ccc;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	 .fulldirectory  { width: 50vw;
	display: flex;
	flex-wrap: wrap;
	padding: 0; margin: 0;
	 
	}
	.fulldirectory  > div  { flex: 1 0 20%;
	padding: .1rem;
	margin: 0;
	}


}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.fulldirectory {display: block; margin: 0 auto; text-align: center;max-device-width: 90vw;
	font-size: .9rem;
	line-height: 1rem;}
	
	
	}
	

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.fulldirectory {display: block; margin: 0 auto; text-align: center;max-device-width: 90vw;
	font-size: .9rem;
	line-height: 1rem;}
	
	}
	

.fellowstatus {
	display: -ms-grid;
	display: grid;
      -ms-grid-columns: 1fr .3rem 1fr .3rem 1fr .3rem 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr;
	  grid-gap: .3rem;
	  border: solid 2px #333;
	  margin: .5rem 0;
	  
	}
	
.fellowstatus > div {
	padding: .3rem;
}


.fellowstatus > div:nth-child(8n+5),
.fellowstatus > div:nth-child(8n+6),
.fellowstatus > div:nth-child(8n+7),
.fellowstatus > div:nth-child(8n+8) {
  background-color: #ccc;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	 .fellowstatus  { width: 50vw;
	display: flex;
	flex-wrap: wrap;
	padding: 0; margin: 0;
	 
	}
	.fellowstatus  > div  { flex: 1 0 20%;
	padding: .1rem;
	margin: 0;
	}


}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.alumni {
	display: block;
	  
	}
	
	.alumni-g {
	display: block;
	  
	}
	.fellowstatus {
	display: block;
	  
	}
	  
  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{.alumni {
	display: block;
	  
	}
	
	.alumni-g {
	display: block;
	  
	}
	
	.fellowstatus {
	display: block;
	  
	}
	
  }
  
.makous {
	display: -ms-grid;
	display: grid;
      -ms-grid-columns: minmax(90px, 10%) 1rem minmax(300px, auto);
      grid-template-columns: minmax(90px, 10%) minmax(300px, auto);
	  grid-gap: 1rem;
	  -webkit-box-align: start;
	      -ms-flex-align: start;
	          align-items: start;
	 
	}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	 .makous  { width: 50vw;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 0; margin: 0;
	 
	}
	.makous  > .left  { flex: 0 0 10%;
	padding-right: .3rem;
	margin: 0;
	}

.makous  > .right  { flex: 1 0 85%;
	margin: 0;
	padding: 0 0 .5rem .5rem;
	}
}
	
	
 @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.makous {display: block; margin: 0 auto; text-align: center;}
	.makous img {
	width: 30vw;
	}
	  
  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{	.makous {display: block; margin: 0 auto; text-align: center;}
	.makous img {
	width: 30vw;
	}
	}
	
 .slide_about {width: 99vw;
 }
 
 @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
	.slide_about {width: 95vw;
	position: relative; left: 2vw;  
 }
 
 .slide_about div p.caption {display: none;}
	
  
  }

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{.slide_about {width: 95vw;
position: relative; left: 2vw;
 }
 
  .slide_about div p.caption {display: none;}
	}
	
.main-text {margin: 0 6rem;}

.main-text ul li {margin-left: 4rem;}

@media screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
.main-text {margin: 0; padding: 0 1rem;}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
{
.main-text {margin: 0; padding: 0 1rem;}
}

	

	details {
  user-select: none;
}

details>summary span.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s;
  margin-left: 1rem;
}

details[open] summary span.icon {
  transform: rotate(180deg);
}

summary {
  display: flex;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

.pubs li {list-style-type:circle; font-size: .9rem;}

.awards h2 {margin-top: 1rem;}

.awards dl dt {
font-weight: bold;}

.awards dl dd {
text-indent: 1rem;}