@font-face{
    font-family:"Gill Sans W01";
    src:url("Fonts/577d283c-9605-4bfd-9f7e-b3e63048a987.woff2") format("woff2"),url("Fonts/21f81e00-8d71-4354-8862-88a94dcb975b.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face{
    font-family:"Neutro W03";
    src:url("Fonts/4d1328e7-742d-40aa-bf0d-4b1226fc5537.woff2") format("woff2"),url("Fonts/7bd3aac6-46bd-4188-86e1-6a11e3ac182d.woff") format("woff");
font-weight: 300;
font-style: normal;
}
@font-face{
    font-family:"Neutro W03";
    src:url("Fonts/597f6328-f330-441d-a6b6-9bf7f55acd15.woff2") format("woff2"),url("Fonts/9811b83d-1215-47a8-91e4-42b4f7b200cf.woff") format("woff");
font-weight: 300;
font-style: italic;
}
@font-face{
    font-family:"Neutro W03";
    src:url("Fonts/22f5647d-c25c-433a-868d-e74f82b0bae8.woff2") format("woff2"),url("Fonts/dbdca072-f39d-4b28-9b43-ed7b47ac784f.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face{
    font-family:"Neutro W03";
    src:url("Fonts/339b6633-ab6d-4a99-8531-af7ff9f90cf7.woff2") format("woff2"),url("Fonts/f180c1ab-e6fb-492d-9fb7-65a4e697491c.woff") format("woff");
font-weight: 600;
font-style: normal;
}
@font-face{
    font-family:"Neutro W03";
    src:url("Fonts/e96207c6-6983-4abc-825a-caf7e3ae86f1.woff2") format("woff2"),url("Fonts/2c59c747-234a-47c3-bd59-5ff99f4bb06b.woff") format("woff");
font-weight: 700;
font-style: normal;
}
@font-face{
    font-family:"Neutro W03";
    src:url("Fonts/26962120-5234-44ad-bd71-ac923a75f765.woff2") format("woff2"),url("Fonts/e3e2edca-8b22-494b-872e-ec16abd4b823.woff") format("woff");
font-weight: 800;
font-style: normal;
}

body{font-family: "Neutro W03", sans-serif;}
.condensed{font-family: 'Gill Sans W01';}
.heavy{font-weight: 800;}
.larger{font-size: 1.5em;}
.smaller{font-size: 0.8em;}
.empbox{border:12px solid #114481; padding:24px 48px; font-size: 1.2em;}
.lblue-text{color:#54c8b7;}
.dblue-text{color:#114481;}
.green-text{color:#a5c857;}
.lblue-bk{background-color:#54c8b7;}
.dblue-bk{background-color:#114481; color:#fff}
.green-bk{background-color:#a5c857;}
.error_message{border:8px solid #a10909; padding:12px;} 
h1{color:#114481; text-transform: uppercase; font-size: 48px; font-weight: 600;font-family: "brandon-grotesque", "Neutro", sans-serif; line-height: 1.2em;}
h2{text-transform: uppercase; font-size: 32px;font-family: "brandon-grotesque", "Neutro", sans-serif;  line-height: 1.2em;}

.video-wrap{display: block; position: relative; max-width:100%; width:450px; padding-top:67.2%; background-color:#000; }
.video-wrap iframe{position: absolute; top:0px; left:0px; right:0px; bottom:0px; margin:auto; width:100%; height: 100%;}
@media screen and (min-width:484px){
    .video-wrap{max-width:450px; margin-left:auto; margin-right: auto;padding-top:302px}
}

.spotlight-item{margin-left:auto; margin-right: auto; width:300px; max-width: 100%; }
.spotlight-item figure{ border:12px solid #45ad9e; border-radius: 50%; position: relative; overflow: hidden; margin:0px; padding:0px}
.spotlight-item figure img{ position: relative; top:5px;}
.spotlight-item-small{margin-left:auto; margin-right: auto; width:250px; max-width: 100%;}
.spotlight-item-small figure{border:8px solid #45ad9e; border-radius: 50%; position: relative; overflow: hidden; margin:0px; padding:0px; width:250px; height: 250px;}
.spotlight-item-small figure img{width:100%;}

.accordian > ul{transition: all 0.5s ease-out; overflow: hidden; max-height: 0px;}
.accordian.on > ul{transition: all 0.5s ease-out; overflow: hidden; max-height: 30em;}
.accourdian .trigger{cursor: pointer;}

header{position: fixed; top:0px; left:0px; background-color:#54c8b7;  z-index: 999; width:100%; height:216px; transition: all 0.3s ease-in;   box-shadow: rgba(0,0,0,0.0) 0px 0px 0px;}
header:before{content:'';display: block; position: absolute; top:0px; left:0px; width:100%; height: 108px;  border-top:#114481 solid 24px; background-color:#fff;  box-shadow: rgba(0,0,0,0.8) 0px 3px 3px; transition: all 0.3s ease-in; box-sizing: content-box;}
header .full-wrap{padding-top: 48px;}
header .logo{background-image: url(../images/logo.png); background-size: contain; background-repeat: no-repeat; width:149px; height: 124px; position: absolute; top:8px; left:0px; transition: all 0.3s ease-in;}
header .sitename{display: block; color: #114481; font-family: "brandon-grotesque", "Neutro", sans-serif; font-weight: 700; text-align: center; text-transform: uppercase; font-size: 27px; margin-bottom: 24px; transition: all 0.3s ease-in; line-height: 1.2em;}
header nav{display: block; position:relative; transition: all 0.3s ease-in;}
header nav ul{display:flex; list-style: none; flex-direction: row; justify-content: space-between; align-items: center; justify-items: center; padding:0px; margin:0px;}
header nav li{position: relative;}
header nav a{color:#000; font-family: 'Gill Sans W01'; text-decoration: none; text-transform: uppercase; padding:24px; padding-bottom: 16px; display: block; font-size: 27px; transition: all 0.3s ease-in;}

header nav .pointer{ display: block; width:116px; height: 32px; overflow: hidden; border-bottom: 24px solid #000; border-left:58px solid transparent; border-right: 58px solid transparent; position: absolute; left:-14px; bottom:0px; transition:all 0.5s ease-in; box-sizing: border-box;} 
header nav.about .pointer{}
header nav.news .pointer{}
header nav.conference .pointer{}
header nav.awards .pointer{}
header nav.resources .pointer{}
header nav.contacts .pointer{}
header .menu-toggle{display: none; visibility: hidden;}



header nav .submenu {position: absolute; top:100%; left:0px; height:auto; max-height: 0px; padding:0px 12px 0px 0px; margin-top: 0px;  background-color:rgba(255, 255, 255, 1); box-shadow: rgba(0,0,0,0.0) 0px 0px 0px;  overflow: hidden;  transition: all 0.1s;  text-align: left; display: block; transition-delay: 0s}
header nav li:last-child .submenu{left:auto; right:0px;}
header nav .expand .submenu{height: auto; max-height: 400px; padding:24px 12px 24px 0px;box-shadow: rgba(0,0,0,0.5) 0px 3px 5px; border-top:6px solid #a5c857; border-radius: 0px; overflow: visible; transition-delay: 0s}

header nav .submenu li{display:block; text-align: left; break-inside: avoid; margin-bottom: 0px; opacity: 0; transition: all 0.3s;}
header nav .submenu li:nth-child(1) a{padding-left: 16px;}
header nav .submenu a{font-style: normal; font-size: 22px;  padding:8px 16px 8px 16px; border-radius: 4px; display: block; transition: all 0.3s; white-space: nowrap; color:#10578b}
header nav .submenu a:hover{background-color:#ebf4fb;}
header nav .submenu li:last-child a{padding:8px 16px 8px 16px;}



header nav .expand .submenu li{opacity: 1; transition-delay: 0.3s}
header nav > ul > li{padding-bottom: 0px;}
/*li.expand:after{content:''; display: block; position: absolute; width:100%; top:100%; border-bottom:6px solid #10578b; border-top-left-radius: 4px;}*/

.offtop header{height:83px; box-shadow: rgba(0,0,0,0.5) 0px 3px 3px;}
.offtop header .sitename{transform: translateY(-300px);}
.offtop header nav{transform: translateY(-125px); margin-left:135px;}
.offtop header .logo{width:79px; height: 72px; background-image: url(../images/logo-white.png);}
.offtop header:before{height: 0px;}
.offtop header nav a{font-size: 20px;}



.body-wrap{background-color:#fff; padding-top:216px;}
.home #hero{background-color:#111; background-image: url(../images/composite2022.webp); background-size: cover;}
.home #hero .quote{display: inline-block; padding: 48px 48px; background-color:#114481; color:#fff; font-size: 36px; text-align: justify;}

#Content{display: flex; justify-content: stretch;}
#Content #Main{ padding:64px 48px; width:68%;}
#Content #Main .text-wrap{margin-right: 0px; max-width: 865px;}
#Content #Sidebar{width:32%; background-color:#54c8b7}
#Content #Sidebar .item{ padding:64px 48px 64px 48px;}
#Content #Sidebar .text-wrap{max-width: 448px; margin-left: 0px;}
#Content #Sidebar .quote{font-size: 36px; }
#Sidebar2{width:112px; position: relative;}
#Sidebar2 a{color:#fff; font-size: 42px; font-weight: 600; text-decoration: none; display: block; white-space: nowrap;  transform-origin: bottom left; transform: rotate(90deg); line-height: 112px; position:relative;}
.style1 #Sidebar2{background-color:#45ad9e;}
.style1 #Content #Main .text-wrap{margin-right: auto; max-width: 865px;}
.style2 #Sidebar2{background-color:#a5c857; width:145px;}
.style2 #Sidebar2:before{content:''; display: block; width:112px; height: 100%; position: absolute; top:0px; right:0px; background-color:#114481; box-shadow: rgba(0,0,0,0.5) -3px 0px 3px;}
.green-bk h2{color:#fff;}
.style2 #Sidebar2 a{left:34px;}
.style2 #Content #Main{width:95%;}
.style2 #Content #Main .text-wrap{margin-right: auto; max-width: 1024px;}

.article-list .article{border-bottom: 4px solid #a5c857; padding:16px 0px 24px;}
.article-list .article:last-child{border-bottom: none;;}

footer{border-top: 8px solid #54c8b7; padding-top:24px;}
footer .table-content .table-cell:nth-child(1):before{content:''; display:block; width:100%; height: auto; margin:16px 0px; padding-top:50%; background-image: url(../images/logo.png); background-size: contain; background-repeat: no-repeat;}
footer .credits{text-align: center; font-size: 0.7em;}
footer nav ul{list-style: none;}
footer .submenu{display: none;}
footer nav a{text-decoration: none; display: block; padding:8px 0px; text-transform: uppercase;}
footer h3{color:#114481; }


.spotlight{border:1px solid #666; padding:45px; margin-bottom:45px;}
.spotlight:after{content:''; display: block; clear: both;}
.spotlight h3{text-align: center; margin-top: 0px;}
.spotlight figure{display: inline-block; width:48%; margin:0px 4% 0px 0px; height:auto; vertical-align: top; padding:24px; }
.spotlight figure img{border:1px solid #333; width:100%; height: auto;}
.spotlight figure:nth-child(2n){margin-right: 0px;}

.spotlight p{clear:right; font-size:0.95em; line-height: 1.9em;}

.document-gallery{list-style: none; margin:0px; padding:0px; text-align: center;}
.document-gallery li{ display: inline-block; vertical-align: top; width:225px; height: auto; margin-right: 24px; margin-bottom: 24px; text-align: center;}
.document-gallery img{max-width: 100%; box-shadow: rgba(0,0,0,0.5) 1px 1px 4px; border:1px solid #666;}

.awards-list{border:1px solid #666; padding:45px; margin-bottom:45px;}
.awards-list > div{padding:16px 0px 24px; border-bottom: 4px solid #a5c857;}
.documents-list li{margin-bottom: 8px; }
.resources .documents-list{column-count: 2;}
.resources .documents-list .section.colbreak{break-after: avoid;}
.resources .documents-list .section{break-inside: avoid; border:4px solid #a5c857; padding:24px 48px; margin-bottom: 24px;}
.resources .documents-list h3{margin-top:0px;}
.resources .documents-list ul{}
.resources .documents-list li{color:#114481;}

.resource_list li{color:#114481; margin-bottom: 8px;}

.contact-list{column-count:2}
.contact-list p{break-inside: avoid; margin-top:0px; margin-bottom: 24px;}
.officer-list{display: flex; flex-direction: row; flex-wrap: wrap;}
.officers{
    
	width:30%;
	display: inline-block;
    vertical-align: top;
	margin:0px 5% 5% 0px;
	
	padding:16px 16px 18px;
	font-size:.9em;
    box-sizing: border-box;
}
.officers p{margin:0px;}
.officers:nth-child(3n){ margin-right: 0px;}
.officers img{width:100%; max-width: 160px; margin-bottom: 12px;}
.officers .img-placeholder{display: block; height: 162px;}

.gallery{display: flex; flex-direction: row; flex-wrap: wrap;}
.gallery figure{margin:8px;}

table.info1{margin:24px auto; border:1px solid #767676; border-collapse: collapse;}
table.info1 td{border:1px solid #767676; padding:8px 16px;}

ul.teacher-directory{list-style: none; margin:0px; padding:0px;}
ul.teacher-directory li{display: inline-block; width:30%; margin-right: 5%; margin-bottom: 5%; vertical-align: top;}
ul.teacher-directory li:nth-child(3n){margin-right: 0px;}
ul.teacher-directory li:after{content:''; display: block; clear: both;}
ul.teacher-directory img{display: block; margin-right: 0px auto 16px; width:50%; height: auto;}
ul.teacher-directory a{word-wrap: break-word;}

@media screen and (max-width:1200px) and (min-width:1081px){
    .spotlight figure{display: block; float: none; margin:16px auto; max-width:100%;}
}

@media screen and (max-width:1110px) {
    header nav a{font-size: 22px; padding:27px 24px;}
    .offtop header{height: 69px;}
    .offtop header nav{transform:translateY(-114px);}
    .offtop header nav .pointer{width:56px; height: 9px; border-bottom: 8px solid #000; border-left:28px solid transparent; border-right: 28px solid transparent; transform: translateX(27px);}
    .offtop header nav a{padding:12px 24px;}
    header nav .submenu a{padding:8px 16px 8px 16px;}
    header nav .expand .submenu{padding:14px 12px 14px 0px}

}

@media screen and (max-width:1024px){
    #Content #Main{padding:32px 32px;}
    #Content #Sidebar .item{padding:32px 32px;}
}

@media screen and (max-width:800px){
    .spotlight figure{display: block; float: none; margin:16px auto; max-width:100%;}
    header{height: 178px;}
    header .sitename{font-size: 18px; margin-bottom: 19px;}
    header .logo{height: 84px; width:105px;}
    header:before{height: 87px;}
    header nav a{font-size: 18px; padding:12px 24px 22px; text-align: center;}
    header nav .pointer{width:56px; height: 9px; border-bottom: 8px solid #000; border-left:28px solid transparent; border-right: 28px solid transparent; transform: translateX(27px); bottom:9px;}
    .full-wrap, .content-wrap{margin-left: 24px; margin-right: 24px;}
    .body-wrap{padding-top:178px;}
    header nav .submenu a{text-align: left;}
    header nav li:nth-last-child(2) .submenu{left:auto; right:0px;}
    .offtop header .logo{top:4px;}
    .offtop header nav{margin-left: 75px; transform:translateY(-106px)}
    .offtop header nav .pointer{bottom:3px;}
    .offtop header:before{border-top-width:6px}
    .offtop header nav .submenu{margin-top:7px;}
    

    #hero .content-wrap{margin-left: 0px;}
    .home #hero .quote{padding:32px; font-size: 27px;}
    #Content #Main{padding:32px 24px;}
    #Content #Sidebar .item{padding:32px 24px;}
    h1{margin-top:0px; font-size: 32px;}
    h2{font-size: 24px;}
    #Content #Sidebar h2:nth-child(1){margin-top:0px;}
    .article-list .article h3:nth-child(1){margin-top:0px;}
    .spotlight{padding:16px; margin-bottom: 24px;}
    .spotlight h2:nth-child(1),
    .spotlight h3:nth-child(1){margin-top:0px;}
    #Sidebar2{width:64px}
    #Sidebar2 a{line-height: 64px; font-size: 32px;}

    .interior #Content{display: block; position: relative;}
    .interior #Content #Main{width:auto; margin-right: 64px;}
    .interior #Content #Sidebar{width:auto; margin-right: 64px; display: flex;}
    .interior #Sidebar2{position: absolute; right:0px; top:0px; height: 100%;}
    #Content #Sidebar .quote{font-size: 24px; text-align: left;}
    .interior.style2 #Sidebar2{width:74px;}
    .interior.style2 #Sidebar2:before{width:64px;}
    .interior.style2 #Sidebar2 a{left:14px;}
    .resources .documents-list .section{padding:24px 18px}
    .resources .documents-list ul{padding-left: 19px;}
}



@media screen and (max-width:767px){



    .officers{width:45%; margin-right: 10%; margin-top:5%;}
    .officers:nth-child(3n){margin-right: 10%;}
    .officers:nth-child(2n){margin-right: 0px;}

    #mobile-nav{display:block; background-color:#114481; border-top:16px solid #114481; position: absolute; line-height: 1.5em; z-index: -1; top:0px;left:-90vw; bottom:0px; width:90vw; height: 100vh; min-height: 100%; overflow:hidden;  transition: visibility 0s linear 350ms, transform 350ms linear;}
    #mobile-nav .header{position: relative; background-color:#fff; height: 58px; display:flex; padding:4px 12px; justify-content: flex-start; align-items: center;}
    #mobile-nav .header .close{border:none; box-shadow: none; cursor: pointer; background:transparent; margin-right: 24px; text-align: center; height: auto; width:auto; display: block; font-size: 10px;}
    #mobile-nav .header .close:before{content:''; display: block; width:100%; height: 32px; margin-bottom: 2px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(../images/icon-close.svg);}
    #mobile-nav .header .title{font-weight: 800; color:#54c8b7; display: block; padding:4px 8px; font-size: 24px;}
    #mobile-nav .menu-wrapper{position: absolute; top:64px; left:0px; right: 0px; bottom:0px; overflow:hidden;}
    #mobile-nav nav{ position: absolute; color:#fff; background-color:#114481; width:90vw; min-height: 100%; top:0px; bottom:0px; transform: translateX(-90vw); z-index: 2; transition: visibility 0s linear 350ms, transform 350ms linear;}
    #mobile-nav .mobile-nav-menu-btn{cursor:pointer; display:flex; justify-content: space-between; align-items:center; color:#fff; text-decoration: none; font-size: 1.6rem; line-height: 1.5; background-color:transparent;  border:none; box-shadow:none; border:1px solid #54c8b7; width:100%; padding:4px 20px 4px 8px;}
    #mobile-nav .mobile-nav-menu-btn .icon{width:1em; height: 1em; background-size: contain; background-position: center; background-repeat: no-repeat;}
    #mobile-nav .mobile-nav-menu-btn .icon.next{background-image: url(../images/icon-next.svg); }
    #mobile-nav .mobile-nav-menu-btn .icon.back{background-image: url(../images/icon-back.svg); margin-right: 12px; }
    #mobile-nav .mobile-nav-menu-btn.back{justify-content: flex-start; background-color:#54c8b7;}
    #mobile-nav .mobile-nav-menu-title{background-color:#650360;}

    

    body:before{visibility:hidden; display: block; position: fixed; top:0px; bottom:0px; width:100%; height: 100%; content:''; background-color:rgba(0,0,0,0.0); transition: visibility 0s linear 350ms, background-color 350ms linear;}

    body.nav-on:before{visibility: visible; content:''; display: block; position: absolute; left:0px; right:0px; top:0px; bottom:0px; z-index:999; background-color:rgba(0,0,0,0.7);}
    body.nav-on #mobile-nav{z-index: 1000; transform: translateX(100%);}
    body.nav-on #mobile-nav nav.on{ z-index: 0; transform: translateX(0vw);}


    header .menu-toggle{display: block; visibility: visible; position: absolute; top:20px; left:0px; border:none; box-shadow: none; cursor: pointer; background:transparent; margin-right: 24px; text-align: center; height: auto; width:auto; display: block; font-size: 10px; }
    header .menu-toggle:before{content:''; display: block; width:100%; height: 32px; margin-bottom: 2px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(../images/icon-menu.svg);}
    header{height: 83px;}
    header nav{display: none;}
    header:before{border-top-width:16px; height: 58px;}
    header .full-wrap{padding-top:24px;}
    header .logo{float:left; height: 70px; margin-left: 47px; position: relative; top:-23px;}
    .body-wrap{padding-top:83px;}

    .offtop header:before{height: 58px; border-top-width: 16px;}
    .offtop header .logo{top:-23px; width:105px; height: 70px; background-image: url(../images/logo.png);}
    .offtop header .sitename{transform: translateY(0);}

    .offtop header{transform: translateY(-72px);}
    .offtop header.on{transform: translateY(0px);}
}
@media screen and (max-width:700px){
    ul.teacher-directory li{width:48%; margin-right: 4%;}
    ul.teacher-directory li:nth-child(3n){margin-right: 4%;}
    ul.teacher-directory li:nth-child(2n){margin-right: 0px;}

    .resources .documents-list{column-count: 1;}
    .resources .documents-list .section{padding:18px 12px;}
    .contact-list{column-count: 1;}
}
@media screen and (max-width:500px){
    .interior #Content{min-height: 430px;}
    .full-wrap, .content-wrap{margin-left: 16px; margin-right: 16px;}
    .officers{width:auto; margin:24px auto; display: block;}
    .officers:nth-child(3n),
    .officers:nth-child(2n){margin-right: auto;}
    ul.teacher-directory li{width:auto; margin-right: 0px;}
    ul.teacher-directory li:nth-child(3n){margin-right: 0px;}
    ul.teacher-directory li:nth-child(2n){margin-right: 0px;}
    aside.right,
    figure.aside,
    aside{width:auto; max-width: 100%; float:none;}

    header .sitename{display: none;}
    header .logo,
    .offtop header .logo{background-image: url(../images/logo-horizontal.png); width:250px; height: 70px;}

    #hero .content-wrap{margin-right: 0px;}
    .home #hero .quote{width:100%; text-align: center; font-size: 22px; background-color:rgba(17,68,129,0.63)}
    #Content{display: block;}
    #Content #Main{width:auto;}
    .interior #Content #Main{width:auto; margin-right: 40px;;}
    #Content #Sidebar{width:auto;}
    .interior #Content #Sidebar{flex-direction: column; margin-right: 40px;}

    #Sidebar2{width:40px;}
    #Sidebar2 a{line-height: 40px; font-size: 22px;}
    .interior.style2 #Sidebar2{width:40px;}
    .interior.style2 #Sidebar2:before{width:34px;}
    .interior.style2 #Sidebar2 a{left:3px;}

    .awards-list{padding:16px;}
    h1{font-size: 24px;}
    footer{padding-top:4px}
    footer .table-content{display: block;}
    footer .table-cell{display: block; width:auto; padding:0px 0px;}
    footer .table-content .table-cell:nth-child(1):before{background-position: center;}
    footer nav ul{padding-left: 0px; text-align: center; }
    footer nav li{display: inline-block; padding:8px 12px;}
}
