@charset "utf-8";
/* CSS Document */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
	background-color: #ececfa;
/*background-color: white;*/
/*font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";*/
font-family: Arial, "sans-serif";
text-align: center;
height: 100%;
}

body{
margin: 0;
height: 100%;

}

.header-container {
background-color: white;
min-height: 100px;
width: 100%;
}

header{
width: 1174px;
height: 100px;
padding: 15px 0;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo-wrapper img{
padding-left: 25px;
}

.nav-container{
width: 100%;
background-color: #3c5abe;
}

nav{
width: 1174px;
padding: 10px 0;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.825rem;
}

nav a{
color: white;
text-decoration: none;
}

nav a:hover{
color:orange;
}

.badge{
    background-color: #3C5ABE;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
    font-size: 0.85rem;
} 
/*###########################################################*/

/*
.index-main{
width:100%;
background-color: #ececfa;

}
*/

/*
.container a{
color: #666666;
text-decoration: none;
}
*/
/*
.container a:hover {

    color:#3c5abe;

}
*/


/*
.container {
width: 1174px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
padding-bottom: 40px;
}

.herobox1 {
flex: 2;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top:40px;
}
*/

/*
.col{
width: 45%;
margin-bottom: 40px;
background-color: #3c5abe;
color:#ececfa;
text-align: center;
height: 380px;
border: 1px solid #999999; box-shadow: 5px 10px 8px #cccccc;

}
*/

/*
.col img {
width: 100%;
height:auto;
}

.col p {
line-height: 0rem;
}
*/


/*
.herobox3 {
	
	flex: 1;
    padding: 20px 0px 0 40px;
    text-align: center;
}
 .herobox3 a{
 line-height: 2rem;
 }
*/
 
/*
 ul {
list-style-type: disc;
color: #333333;
}

h3 {
color:#444444;
}
 
.image{
border: 1px solid #999999; box-shadow: 5px 10px 8px #cccccc;
}
*/

/*

.section a{
color: #666666;
text-decoration: none;
}
.section a:hover {
text-decoration: underline;
}


.section {
width: 1174px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
padding-bottom: 40px;
}


.clustermaps{

height: 100px;
width: 150px;

}
*/
/*###################################*/
/*NEW CONTENT*/
/*###################################*/

/* ==========================================
   RESOURCES
========================================== */

.resources{

    max-width:1450px;

    margin:40px auto;

    padding:0 30px;
	
	

}

.resources h2{

    color:#3c5abe;

    font-size:2rem;

    margin-bottom:30px;

}

.gallery{

    display:flex;

    flex-wrap:wrap;

    gap:30px;

    justify-content:center;

}

.card{

    width:320px;

    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.10);

    transition:all .25s ease;

}

.card:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 24px rgba(0,0,0,.16);

}

.card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.card-body{

    padding:24px;

}

.card-body h3{

    color:#3c5abe;

    margin-bottom:12px;

    font-size:1.3rem;

}

.card-body p{

    color:#555;

    min-height:70px;

    margin-bottom:20px;

}


.card-toggle {
    display: inline-block;
    padding: 0;
    margin-top: 10px;

    background: none;
    border: none;

    font: inherit;
    font-weight: 600;
    text-align: left;

    color: #3c5abe;

    cursor: pointer;
}

.card-toggle:hover {
    color:#243672;
}

.card-arrow {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.2s ease;
}



.card-menu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;

    margin-top: 0;

    transition:
        max-height 0.3s ease,
        opacity 0.2s ease,
        margin-top 0.3s ease;
}

.card-menu a {
	text-align: left;
}


.card-menu.open {
    max-height: 500px;
    opacity: 1;
    margin-top: 10px;
}

.card-arrow {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.25s ease;
}

.card-toggle.open .card-arrow {
    transform: rotate(90deg);
}



/* Dropdown links */

.card-menu a {
    display: block;
    margin: 6px 0;
}

.card-menu a:hover{

    color:#3c5abe;

}


.button{

    display:inline-block;

    background:#3c5abe;

    color:white;

    text-decoration:none;

    padding:14px 26px;

    border-radius:6px;

    margin-top:25px;

    font-weight:bold;

}



/* ==========================================
   RESOURCE CARDS
========================================== */

.gallery{

    max-width:1450px;

    margin:auto;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:30px;

    padding:20px 30px 60px;

}

.card {
    display: flex;
    flex-direction: column;
}

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card{

    width:340px;

    background:white;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 6px 15px rgba(0,0,0,.12);

    transition:.3s;

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 30px rgba(0,0,0,.18);

}

.card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

/*
.card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
*/

.card-body > a,
.card-body > .card-toggle {
    margin-top: auto;
}

.card-body{

    padding:25px;

}

.card-body h3{

    color:#243672;

    margin-bottom:15px;

}

.card-body p{

    color:#555;

    margin-bottom:20px;

}

.card-body a{

    text-decoration:none;

    color:#3c5abe;

    font-weight:bold;

}

.card-body a:hover{

    color:#243672;

}






/*#########################################*/

.footercontainer{
height: 100px;
background-color: rgba(57,65,89,0.24);
width: 100%;
border-top: solid 1px #333333;
}

footer{
width: 1174px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
align-items: center;
/*font-size: 0.825rem;*/
}
footer p{
line-height: 1.5;	
}
footer a{
color: white;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}