/*
Theme Name: The Black Academy
Theme URI: https://theblackacademy.ca
Author: Sanetto
Author URI: https://sanetto.com
Description: Custom Black Academy Website Template
Version: 2025

The Black Academy WordPress Theme 2025 Sanetto
*/

@charset "utf-8";

/* Reset Styles **********************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, location, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer.site, header.site, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer.site, header.site, hgroup, menu, nav, section {display: block;}

* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} 

:focus {
  outline: none;
  /*box-shadow: 0 0 0 3px hsla(220, 100%, 50%, 80%);*/
}


/* Color Styles *****************************************/
.gold{color: #ffd333;}
.lt_gold{color: #fff5e6;}
.dk_purple{color: #32292d;}
.md_purple{color: #5a454d;}
.lt_purple{color: #f2ecef;}
.purple{color: #7f636e;}
.dk_green{color: #21534c;}
.lt_green{color: #ebfbf9;}
.green{color: #419488;}
.white{color: #fff;}

.gold_bkg{background-color: #ffd333;}
.lt_gold_bkg{background-color: #fff5e6;}
.dk_purple_bkg{background-color: #32292d;}
.md_purple_bkg{background-color: #5a454d;}
.lt_purple_bkg{background-color: #f2ecef;}
.purple_bkg{background-color: #7f636e;}
.dk_green_bkg{background-color: #21534c;}
.lt_green_bkg{background-color: #ebfbf9;}
.green_bkg{background-color: #419488;}
.white_bkg{background-color: #fff;}



/* Font Styles reg 400 semi 600 bold 700 *****************************************/
html {
    font-size: 16px;
    font-family: "Mona Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 700;
    color: #32292d;
}

h1{font-size: 3.125rem; line-height: 110%;}
h2{font-size: 2.188rem; line-height: 120%; margin-bottom: 20px;} 
h3{font-size: 1.5rem; line-height: 120%; margin-bottom: 20px;}
h4{font-size: 1.5rem; line-height: 120%; margin-bottom: 20px;}
h5{font-size: 1.125rem; line-height: 120%;}
h6{font-size: 1rem; line-height: 120%;}

body{overflow-x: hidden; background: #fff;}
.df_txt, p, body{font-size: 1rem; font-weight: 400; line-height: 140%; color: #5a454d;}
.lg_txt{font-size: 1.188rem; font-weight: 400; line-height: 155%;}
.sm_txt{font-size: 0.875rem; font-weight: 400; line-height: 130%}
.long{overflow-wrap: break-word; hyphens: auto;}
caption{font-size: 0.875rem; font-weight: 400; text-transform: uppercase; line-height: 120%;}
.df_txt, p, .lg_txt, .sm_txt{margin-bottom: 20px;}
.df_txt:last-child, p:last-child, .lg_txt:last-child, .sm_txt:last-child{margin-bottom: 0px;}

location, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}         
sup {top: -0.5rem;}
location {bottom: -0.25rem;}


/* Link + Button Styles *****************************************/
a{color: #419488; text-decoration: none; border-bottom: 1px solid;}
a:hover{color: #21534c;}
.btn{display: inline-block; font-size: 1.125rem; font-weight: 700; padding: 16px 25px 19px; text-decoration: none; border: none;}
.btn:hover{cursor: pointer;}
.has_icon img{width: 20px; vertical-align: middle; margin-right: 5px;}
a:hover img{opacity: 0.8;}
.btn.gold{background: #ffd333; color: #32292d!important;}
.btn.gold:hover{background: #32292d; color: #ffd333!important;}
.btn.sm{padding: 4px 9px 5px;}
a:hover img{-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}


/* Layout Styles *****************************************/
.clear {clear:both;}
.invisible{position : absolute; top : -1000px; width:1px; height:1px; overflow:hidden;}
.hide-text {text-indent: 100%; white-space: nowrap; overflow: hidden;}
.temp-hide{display:none!important;}

.cushion{padding: 60px 0px;}
.cushion-lg{padding: 100px 0px;}
.cushion-sm{padding: 20px 0px;}
.cushion-top{padding-top: 60px;}
.cushion-lg-top{padding-top: 100px;}
.cushion-sm-top{padding-top: 20px;}
.cushion-btm{padding-bottom: 60px;}
.cushion-lg-btm{padding-bottom: 100px;}
.cushion-sm-btm{padding-bottom: 20px;}

.alignleft {float:left; margin-right:15px; margin-bottom:5px;}
.alignright {float:right; margin-left:15px; margin-bottom:5px;}
.aligncenter {display: inline-block; margin: auto; padding: 10px;}

.img img, .img-fluid{max-width: 100%; height: auto;}
img.alignleft{float: left; max-width: 100%; margin: 0px 20px 20px 0px; height: auto;}
img.alignright{float: right; max-width: 100%; margin: 0px 0px 20px 20px; height: auto;}
img.aligncenter{display: block; margin: 20px auto; max-width: 100%; height: auto;}
 
section.full{position: relative; float: left; width: 100%; clear: both;}
.container-lg{margin: auto; display: block; position: relative; zoom: 1; width: 1634px;}
.container{margin: auto; display: block; position: relative; zoom: 1; width: 1436px;}
.container-sm{margin: auto; display: block; position: relative; zoom: 1; width: 1200px;}
.container-fluid{margin: auto; display: block; position: relative; zoom: 1; width: 96%;}
.container-full{margin: auto; display: block; position: relative; zoom: 1; width: 100%;}

.flex{display: table-cell; display: flex; display: -ms-flexbox;}
.full-center{align-items: center; justify-content: center;}

.text-left{text-align: left;}
.text-right{text-align: right;}
.text-center{text-align: center;}

.embed-container{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; margin: 5px 0px;} 
.embed-container iframe, .embed-container object, .embed-container embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.clearfix::after{
  content: "";
  clear: both;
  display: table;
}

video {
  width: 100%;
  height: auto;
}

.wide{padding-left: 0px!important; padding-right: 0px!important;}

strong, .bold{font-weight:700;}
em, .italic{font-style: italic;}

ol, ul{margin: 20px 20px 20px 40px;}


/* header.site Styles *****************************************/
header.site{height: 62px; background: #fff;}
header.site .container{display: flex; justify-content: space-between;}
header.site .logo{width: 200px;}
header.site .logo a{border: none;}
header.site .logo a img{height: 50px; margin-top: 7px; display: block;}

header.site nav{width: calc(100% - 250px); text-align: right;}
header.site nav ul{list-style: none;}
header.site nav ul{list-style: none; margin: 0; display: inline-block;}
header.site nav ul li{display: inline-block; position: relative;}
header.site nav ul li a{text-decoration: none; font-size: 1rem; font-weight: 600; color: #32292d; display: inline-block; padding: 20px; border-bottom: none;}
header.site nav ul li a:hover, header.site nav ul li.current_page_item a, header.site nav ul li.current-menu-parent > a{color: #ffd333;}
header.site nav ul li:last-child a{background: #ffd333; color: #32292d; padding: 20px 30px; -webkit-transition: height 0.3s ease-in-out; 
  -moz-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out;}
header.site nav ul li:last-child a:hover{background: #32292d; color: #ffd333;}

header.site nav ul.main li.menu-item-has-children > a{cursor: pointer;}
header.site nav ul.main li.menu-item-has-children > a:after {
    content: '\25BE';
    font-size: 0.875rem;
    display: inline-block;
    margin-left: 5px;
    color: #32292d;
}

header.site nav ul li ul.sub-menu{
    display: none;
    position: absolute;
    z-index: 10;
    width: 200px;
    background: #fff;
    left: 0px;
    top: 62px;
    padding: 10px;
    -webkit-box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.1); box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.1);
}
header.site nav ul li:hover ul.sub-menu{display: block;}
header.site nav ul li ul.sub-menu li{display: block; text-align: left; margin: 0px; padding: 0px;}
header.site nav ul li ul.sub-menu li a {
    padding: 6px 12px;
    display: block;
    font-size: 1rem;
    color: #32292d;
    font-weight: 400;
    border: none;
}

header.site nav ul li ul.sub-menu li a:hover, header.site nav ul li ul.sub-menu li.current_page_item a{color: #32292d!important; background: #ffd333!important; border:none!important;}
header.site nav ul li ul.sub-menu li:last-child a{background: none; color: #32292d; border: none; padding: 6px 12px;}

/* Mobile Menu Styles *****************************************/
.mobileToggle{display: none;}

#toggleMenu {
    width: 40px;
    height: 32px;
    position: absolute;
    right: 0px;
    top: 21px;
    border-radius: 4px;
    padding: 0px;
    border-bottom: none;
}
#toggleMenu span:after,
#toggleMenu span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
}
#toggleMenu span:after{top: 7px;}
#toggleMenu span{position: relative; display: block; margin-top: 8px;}
#toggleMenu span,
#toggleMenu span:after,
#toggleMenu span:before {
    width: 100%;
    height: 4px;
    background-color: #5a454d;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 2px;
}
#toggleMenu.opened span {background-color: transparent;}
#toggleMenu.opened span:before {transform: rotate(45deg) translate(5px, 5px);}
#toggleMenu.opened span:after {transform: rotate(-45deg) translate(5px, -5px);}
#toggleMenuTitle{
    position: absolute; 
    top: 0px; 
    right: 50px; 
    font-weight: 700;
    font-size: 14px;
    color: #5a454d;
    cursor: pointer;
}

#mobileNav{
    visibility: visible;
    padding: 0px 0px 0px 0px;
    z-index: 10009;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    transition: all 0.5s;
    transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    overflow: auto;
    width: 65%;
    max-width: 275px;
    min-width: 230px;
    background: #5a454d;
    height: 100%;
}
#mobileNav.opened{
    transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
}
#mobileNav .logo{display: block; margin: 20px auto; border-bottom: none;}
#mobileNav .logo img{display: block; margin: auto; width: 75%; text-align: center;}
#mobileNav .menu-main-menu-container{display: inline;}
#mobileNav ul{list-style: none; display: block; margin: 20px 0;}
#mobileNav ul li{display: block; position: relative;}
#mobileNav ul.main li a{text-decoration: none; font-size: 1rem; color: #fff; display: block; padding: 12px 24px; border-bottom: none;}
#mobileNav ul.main li a:hover, #mobileNav ul.main li.current_page_item a, #mobileNav ul.main li.current-menu-parent > a{background: #ffd333; color: #5a454d;}
#mobileNav ul.buttons li a{display: inline-block; margin: 5px 24px;}
#mobileNav .mobile_social{display: block; margin: auto auto 20px auto; text-align: center;}
#mobileNav .mobile_social a{display: inline-block; height: 22px; margin: 0px 7px; border-bottom: none;}
#mobileNav .mobile_social a img{height: 100%; vertical-align: middle;}

#mobileNav ul.main li.menu-item-has-children > a{cursor: pointer;}
#mobileNav ul.main li.menu-item-has-children > a:after {
    content: '\25BE';
    font-size: 0.875rem;
    position: absolute;
    right: 30px;
    margin-left: 5px;
    color: #fff;
}
#mobileNav ul.main li.menu-item-has-children.opened > a:after {
    content: '\25B4';
}
#mobileNav ul.main li ul.sub-menu{
    display: none;
    width: 100%;
    background: #32292d;
    padding: 10px 0px;
    margin: 0px;
}
#mobileNav ul.main li ul.sub-menu li{display: block; text-align: left; margin: 0px;}
#mobileNav ul.main li ul.sub-menu li a {
    padding: 8px 24px 8px 50px;
    display: block;
    font-size: 1rem;
}
#mobileNav ul.main li ul.sub-menu li a:hover, #mobileNav ul.main li ul.sub-menu li.current_page_item a{color: #fff; background: #419488;}


/* Home Banner Styles *****************************************/
#hero .container-sm{padding: 200px 0px;}
#hero .leftside{width: 50%; float: left;}
#hero .rightside{width: 50%; float: right;}
#hero h2{color: #fff; font-size: 3.75rem; font-weight: 700; display: inline-block;}
#hero p{color: #fff; font-size: 1.5rem; margin: 20px 0px 40px; }
#hero .leftside .btn{margin-right: 15px;}
#hero .rightside{text-align: right;}
.hero_slider .slide{background-size: cover!important; background-position: top center!important;}


/* Home Page Styles *****************************************/
#home_intro .container{width: 640px;}
#home_intro h2{font-size: 1.25rem; color: #419488;}
#home_intro h3{font-size: 1.875rem; font-weight: 400;}

#home_about .leftside{position: relative;}
#home_about .leftside img{width: 85%;}
#home_about .leftside .caption{position: absolute; right: 0px; bottom: 30%; width: 215px; background: #419488; padding: 30px;}
#home_about .leftside .caption img{width: 55px; margin-bottom: 10px;}
#home_about .leftside .caption p{color: #fff;}

#home_about .rightside.text p{font-size: 1.188rem;}

#ctas .container.flex{justify-content: space-between; flex-wrap: wrap;}
#ctas .container.flex .item{width: 32%; padding: 30px; background: #fff; border: 1px solid #32292d; text-align: center;}
#ctas .container.flex .item img{width: 100%;}
#ctas .container.flex .item .icon{border-radius: 60px; background: #32292d; border: 5px solid #fff; padding: 15px 18px; display: inline-block; margin-top: -40px; margin-bottom: 20px;}
#ctas .container.flex .item .icon img{width: 40px;}

#ctas .container.flex .item h2{font-size: 1.25rem; color: #419488;}
#ctas .container.flex .item h3{font-size: 1.875rem; font-weight: 400;}


/* About Page Styles *****************************************/
#aboutIntro{background: #f2ecef;}
#aboutIntro .container{display: flex; align-items: center; justify-content: space-between;}
#aboutIntro .img, #aboutIntro .text{width: 48%;}

#ourMission h2{font-size: 1.875rem; font-weight: 400; margin-bottom: 0px;}
#ourMission .container.title{width: 640px;}

.pillars{display: flex; justify-content: space-between;}
.pillar{width: 32%; border: 1px solid #32292d;}
.pillar .icon{background: #21534c; padding: 40px;  clip-path: ellipse(85% 100% at 50% 0%);}
.pillar .icon img{width: 100px;}
.pillar .text{padding: 30px;}
.pillar .text h3{color: #419488; font-size: 1.875rem;}
.pillar .text p{font-size: 1.25rem;}

#communityPartners .container{display: flex; align-items: center; justify-content: space-between;}
#communityPartners .text, #communityPartners .community_slider{width: 50%;}
#communityPartners .text ul{display: inline-block; margin-top: 0px; margin-bottom: 0px;}


/* Our Team Page Styles *****************************************/
#leadership{background: #f2ecef;}
.container.team{display: flex; justify-content: center; flex-wrap: wrap;}
.member{width: 26%; margin: 30px;}
.member .photo img{max-width: 100%; width: 96%; border-radius: 300px;}
.member .text{margin-top: 20px;}
.member .text h3{color: #419488; font-size: 1.25rem; margin-bottom: 0px;}
.member .text p{font-size: 1.25rem;}
.member .links{margin-top: 20px;}
.member .links a{border: none; margin: 0px 5px;}
.member .links a img{width: 22px;}


/* SDP Page Styles *****************************************/
#sdp_intro{margin-top: 30px;}
#sdp_intro .container{background: #fff; padding-left: 150px; padding-right: 150px;}
#sdp_intro .quote{margin-bottom: 80px; padding: 0px 150px; }
#sdp_intro .quote h2{font-style: italic; margin-bottom: 40px;}
#sdp_intro .logos{text-align: center;}
#sdp_intro .logos img{max-width: 100%;}

#sdp_highlight{margin-top: 80px;}
#sdp_highlight .container{background: url(images/highlight-bkg.jpg) no-repeat center; background-size: cover;}
#sdp_highlight .triangle {
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 50px 50px 0 50px;
   border-color: #fff transparent transparent transparent;
   transform: rotate(0deg);
    position: absolute;
    left: calc(50% - 50px);
    z-index: 10000;
}
#sdp_highlight .text{width: 800px; margin: auto;}
#sdp_highlight h2{color: #419488; font-size: 1.25rem;}
#sdp_highlight h3{color: #32292d; font-size: 1.875rem; font-weight: 400; margin-bottom: 0px;}

#sdp_testimonials{background: #5a454d; height: 500px; margin-bottom: 300px;}
#sdp_testimonials h2{color: #fff; font-size: 1.875rem; width: 700px; margin: auto;}
#sdp_testimonials .sdp_slider{margin-top: 40px;}
#sdp_testimonials .sdp_slider .slide{padding: 200px;}
#sdp_testimonials .sdp_slider .slide p{color: #fff; font-weight: 700;}

#sdp_cta .container{display: flex; justify-content: space-between; flex-wrap: wrap;}
#sdp_cta .container .text{width: 32%;}
#sdp_cta .container .text h2{color: #419488; font-size: 1.25rem;}

#sdp_sponsors h2{font-size: 1.875rem; width: 700px; margin: auto;}
#sdp_sponsors .list{display: flex; justify-content: center; flex-wrap: wrap; margin-top: 60px;}
#sdp_sponsors .list .logo{margin: 20px;}



/* Stats Styles *****************************************/
.stats{margin-top: -80px;}
.sdp_page.stats{margin-top: -500px;}
.stats .container.flex{justify-content: space-between;}
.stats .title{width: 22%; background: #419488; padding: 30px 60px; display: flex; align-items: center; flex-wrap: wrap;}
.stats .title h2{font-size: 1.5rem; color: #fff; word-spacing: 9999rem;}
.stats .title p em{color: #fff; font-size: 12px;}
.stats .stat{width: 18%; background: #fff; border-bottom: 4px solid #ffd333; padding: 40px; text-align: center; display: flex; align-items: center;
    justify-content: center; flex-direction: column;}
.stats .stat .icon img{width: 40px; display: inline-block; margin-bottom: 20px;}
.stats .stat h3{color: #5a454d; font-weight: 200; font-size: 4.375rem; margin-bottom: 0px;}
.stats .stat h3 span{font-weight: 700; font-size: 1rem; display: block; margin-top: 10px; line-height: 1;}


/* TLA Styles ***********************************************/
#tla_cta .container{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
#tla_cta .container a{width: 32%; color: #fff; font-weight: 700; text-align: center; padding: 40px; font-size: 1.25rem; padding: 140px 20px;}
#tla_cta .container a:hover{opacity: 0.7;}
#tla_cta .container a.four{background: url(images/tla-2024-cover.jpg) no-repeat top center; background-size: cover;}
#tla_cta .container a.three{background: url(images/tla-2023-cover.jpg) no-repeat top center; background-size: cover;}
#tla_cta .container a.two{background: url(images/tla-2022-cover.jpg) no-repeat top center; background-size: cover;}

#tla_announcement{background: #f2ecef;display: flex; align-items: center; justify-content: space-between;}
#tla_announcement .img, #tla_announcement .text{width: 48%;}
#tla_announcement .img{padding: 275px 0px; background: url(images/tll-intro.jpg) no-repeat top center; background-size: cover;}
#tla_announcement .img img{display: none;}
#tla_announcement .text{padding-right: 40px;}


/* footer.site Styles *****************************************/
footer.site{background: #ffd333;}

footer.site .footer_logo{float: left;}
footer.site .footer_logo a{display: inline-block; height: 70px; padding-bottom: 0px; border-bottom: none;}
footer.site .footer_logo a img{display: block; height: 100%;}

footer.site .footer_links{width: 150px; float: left; margin-left: 80px;}
footer.site .footer_links ul{list-style: none; margin: 0px;}
footer.site .footer_links ul li{margin-bottom: 20px;}
footer.site .footer_links ul li:last-child{margin-bottom: 0px;}
footer.site .footer_links ul li a{border:none; color: #5a454d;}
footer.site .footer_links ul li a:hover{border-bottom: 1px solid; color: #32292d;}

footer.site .footer_connect{float: right; width: 450px;}
footer.site .footer_connect .footer_social a{display: inline-block; height: 18px; margin-right: 20px; padding-bottom: 0px; border: none;}
footer.site .footer_connect .footer_social a img{height: 100%; vertical-align: middle;}
footer.site .footer_connect .footer_copy p{font-size: 14px;}


#acknowledgement{background: #32292d; padding: 30px 0px; text-align: center;}
#acknowledgement p{font-size: 12px; color: #fff; margin: 0px;}

/* Main Banner Styles *****************************************/



/* General Page Styles *****************************************/
.flexbox .container{align-items: center; justify-content: space-between; flex-wrap: wrap;}
.flexbox.half .leftside, .flexbox.half .rightside{width: 48%;}
.flexbox.lrg_left .leftside{width: 63%;}
.flexbox.lrg_left .rightside{width: 33%;}
.flexbox.lrg_right .rightside{width: 63%;}
.flexbox.lrg_right .leftside{width: 33%;}

#innerBanner{padding: 120px 0px; background: #5a454d;}
#innerBanner h1{color: #fff; font-size: 3.75rem;}

#innerBanner.sdp{min-height: 800px;}

#donateBanner{margin-bottom: 60px;}
#donateBanner .container{background: #21534c url(images/donate-bkg.jpg) no-repeat top right; padding: 60px; background-size: contain;}
#donateBanner h2{display: inline-block; color: #fff; margin-right: 80px; margin-bottom: 0px;}



/* Accordion Page Styles *****************************************/
.left-col{float:left; width:34.8%; padding-right:3.5%;}
.left-col h2{font-size:1.875em; font-weight: 700;}
.left-col p{font-size:1.5em; line-height:1.3em;}
.left-col .block{padding: 40px; margin-top: 20px;}
.left-col .block p{color: #fff;}

.main-col{float:right; width:65.2%; border-left:1px solid #000; padding-left:3rem;}
.main-col img{max-width: 100%; height: auto;}

.tab-block{display:flex; list-style: none!important; border-bottom: 5px solid #32292d; margin: 0px!important;}
.tab-block li{padding: 0px; margin: 0px 10px -1px 0px;}
.tab-block li a.tabmenu{padding: 10px 24px; background: #f2ecef; display: inline-block; color: #32292d; font-size: 1.125em; font-weight: 600; border-top-left-radius: 4px; border-top-right-radius: 4px;}
.tab-block li a.tabmenu:hover, .tab-block li a.tabmenu.current{color: #ffd333; background: #32292d; text-decoration: none; border-bottom: none;}


.tab-intro{width: 100%; float: left; padding: 40px 20px; background: #ebfbf9; margin-bottom: 40px;}
.tab-main{float: left; width: 100%;}

.panel {
  padding: 0;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin-bottom: 25px;
  margin-top: -10px;
}

.accordion {
    border: 1px solid #7f636e;
    background: #fff;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    position: relative;
}

.accordion span {
    font-size: 1.5em;
    font-weight: 700;
    padding: 10px 0px 10px 10px;
    display: inline-block;
    width: 85%;
    font-family: "Mona Sans", sans-serif;
}
.accordion:after {
  content: '';
  width: 35px;
  height: 35px;
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
  background: url(images/icons/icon-arrow-accordion-down.svg) no-repeat center;
}
.accordion:hover{color: #7f636e;}
.accordion.active{background: #32292d; border-color: #32292d;}
.accordion.active span{color: #ffd333;}
.accordion.active:after {
  background: url(images/icons/icon-arrow-accordion-up.svg) no-repeat center;
}
.panel .accordion-content{background: #5a454d; padding: 30px;}
.panel .accordion-content .p_stats{display: flex; width: 100%; justify-content: space-between; margin-top: 10px;}
.panel .accordion-content .p_stats .stat{width: 32%; background: #fff; padding: 30px; text-align: center;}
.panel .accordion-content .p_stats .stat img{width: 40px; margin-bottom: 20px;}
.panel .accordion-content .p_stats h3{font-size: 1rem;}

.panel .accordion-content .summary_profile{display: flex; width: 100%; margin-top: 20px; justify-content: space-between; background: #fff;}
.panel .accordion-content .summary_profile .img{width: 40%; position: relative;}
.panel .accordion-content .summary_profile .img img{display: none;}
.panel .accordion-content .summary_profile .img p{position: absolute; z-index: 10000; color: #fff; background: #32292d; width: 100%; bottom: 0px; font-size: 12px;
    padding: 5px;
}
.panel .accordion-content .summary_profile .text{width: 60%; padding: 40px;}
.panel .accordion-content .summary_profile .text ul li{margin: 20px 0px;}
.panel .accordion-content .bio{display: block; width: 100%; background: #fff; margin-top: 20px; padding: 40px;}

.panel .accordion-content .quote{display: flex; width: 100%; justify-content: space-between; margin-top: 40px;}
.panel .accordion-content .quote .text{width: calc(98% - 115px);}
.panel .accordion-content .quote .text p{color: #fff; font-weight: 700; font-size: 1.25rem;}

#faculty .panel .accordion-content .summary_profile{background: none;}
#faculty .panel .accordion-content .summary_profile .text p{color: #fff;}
#faculty .position{border-bottom: 3px solid #fff; padding-bottom: 5px;}
#faculty .position p.lg_txt{color: #fff;}

#streams .flexed{display: flex; justify-content: space-between;}
#streams .flexed .overview{width: 48%;}
#streams .flexed .members{width: 48%;}
#streams .flexed p{color: #fff;}
#streams .flexed .heading{border-bottom: 3px solid #fff; padding-bottom: 5px; margin-bottom: 10px;}
#streams .flexed .mentors{margin-top: 40px;}

#tlaBanner, #ballBanner, #tllBanner{padding: 275px 0px;}
#tlaBanner h1, #ballBanner h1, #tllBanner h1{color: #fff;}
#tlaBanner p{color: #fff; font-weight: 600;}

#tlaContent .sidebar.left{float:left; width:34.8%; padding-right:3.5%;}
#tlaContent .sidebar.left img{max-width: 100%;}
#tlaContent .sidebar.left nav{margin-top: 40px;}
#tlaContent .sidebar.left .tab-block{display: block; border-bottom: none;}
#tlaContent .sidebar.left .tab-block li{margin: 10px 0px;}
#tlaContent .sidebar.left .tab-block li a.tabmenu {
    padding: 16px 24px;
    background: #ffd333;
    display: block;
    color: #32292d;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom: none;
    text-align: center;
}
#tlaContent .sidebar.left .tab-block li a.tabmenu:hover, #tlaContent .sidebar.left .tab-block li.active a.tabmenu{
    background: #32292d;
    color: #ffd333;
}
#tlaContent .main.right{float:right; width:65.2%; padding-left:3rem;}
#tlaContent .main.right hr{margin: 80px 0px; background: #000; height: 3px; border: none;}
#tlaContent .main.right .honouree_slider{margin-bottom: 80px;}
#tlaContent .main.right .honouree_slider .slick-slide{margin-right: 40px;}
#tlaContent .main.right .honouree_slider .slick-slide img{width: 100%;}
#tlaContent .main.right .honouree_slider .slick-slide p.caption{font-size: 12px; margin: 5px 0px 10px;}
#tlaContent .main.right .honouree_slider .slick-dots{bottom: -50px;}
#tlaContent .main.right .honouree_slider .slick-dots li button:before{color: #000000;}
#tlaContent .main.right .honouree_slider .slick-dots li.slick-active button:before{opacity: .75; color: #000000;}
#tlaContent .main.right .honouree_slider .slick-dots li button:before{font-size: 8px;}

#tlaContent .main.right #content_2{margin-bottom: 40px;}
#tlaContent .main.right #content_2 h2{color: #32292d; font-size: 1.5rem; text-align: center; font-weight: 400;}
#tlaContent .main.right #content_2 .partners{display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 80px;}
#tlaContent .main.right #content_2 .partners .item{width: 25%;}
#tlaContent .main.right #content_2 .partners .item img{max-width: 60%; display: block; margin: auto;}
#tlaContent .main.right #content_2 .partners .item p{text-align: center; line-height: 1.2; font-size: 10px;}
#tlaContent .main.right #content_2 .partners:after {content: ""; display: block; width: 100%; height: 3px; background: #000; margin-top: 80px;}


#ballContent hr{display: block; width: 100%; height: 3px; background: #000; border:  none; margin: 80px 0px;}
#bball_slider_container{background: #f2ecef;}
#bball_slider_container .slick-slide{margin: 0px 10px;}
#bball_slider_container .slick-slide img{width: 100%;}

#bball_sponsors h2{font-size: 1.875rem; margin: auto;}
#bball_sponsors .list{display: flex; justify-content: center; flex-wrap: wrap; margin-top: 60px;}
#bball_sponsors .list .logo img{width: 200px;}

.event{display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
.event .img{width: 48%;}
.event .text{width: 48%;}

#contactBlock{display: flex; justify-content: space-between; align-items: center;}
#contactBlock .text{width: 40%;}
#contactBlock .form{width: 56%;}


#tllContent .logos{text-align: center;}
#tllContent .logos img{max-width: 100%;}

#tllEpisodes{background: #f2ecef;}

.ep{display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
.ep .img{width: 28%;}
.ep .text{width: 68%;}

/* Search Form Styles *****************************************/



/* Blog Page Styles *****************************************/
.blog_main .blog_list .post_overview h2.entry-title{font-size: 1.25rem; text-transform: uppercase;}


/*single post*/


/*list*/


/* Pagination Styles *****************************************/





/* Responsive Styles *****************************************/
@media only screen and (max-width:1650px) {
    .container-lg{width: 96%;}
}

@media only screen and (max-width:1470px) {
    .container{width: 96%;}
    
}


@media only screen and (max-width:1365px) {
    .container-sm{width: 96%;}

    .stats .title{padding: 30px;}
    .stats .title h2{font-size: 1.25rem;}
    .stats .stat h3{font-size: 3.75rem;}

}


@media only screen and (max-width:1199px) {
    #mainNav{display: none;}
    .mobileToggle{display: block;}

    footer.site .footer_logo{width: 100%; margin-bottom: 40px; text-align: center;}
    footer.site .footer_links{width: 100%; margin: 0 0 20px 0; text-align: center;}
    footer.site .footer_connect{width: 100%; text-align: center;}
    footer.site .footer_connect .footer_social{width: 100%; text-align: center; margin-top: 30px;}
    footer.site .footer_connect .footer_social a{margin: 0px 10px;}

    #communityPartners .container{display: flex; flex-direction: column-reverse;}
    #communityPartners .text, #communityPartners .community_slider{width: 100%;}
    #communityPartners .text{margin-top: 20px;}

    #sdp_intro .quote{padding: 0px;}

    #sdp_testimonials{height: 400px; margin-bottom: 200px;}
    #sdp_testimonials .sdp_slider .slide{padding: 100px;}

    .main-content .container{display: flex; flex-direction: column-reverse;}
    .left-col{float: none; width: 100%; padding-right: 0; margin-top: 40px; border-bottom: 0px solid #000000;}
    .main-col{float: none; width: 100%; border-left: none; padding-left: 0;}
}


@media only screen and (max-width:989px) {
    #hero .leftside{width: 100%; text-align: center;}
    #hero .container-sm {padding: 60px 0px 80px 0px;}

    .stats .container.flex{flex-wrap: wrap;}
    .stats{margin-top: 60px;}
    .stats .title{width: 100%; margin-bottom: 12px; text-align: center; display: block;}
    .stats .title h2{word-spacing: normal;}
    .stats .stat{width: 24%; padding: 40px 20px;}

    .flexbox.half .leftside, .flexbox.half .rightside{width: 100%;}
    .flexbox.lrg_left .leftside{width: 100%;}
    .flexbox.lrg_left .rightside{width: 100%;}
    .flexbox.lrg_right .rightside{width: 100%;}
    .flexbox.lrg_right .leftside{width: 100%;}

    .flexbox.reverse .container{flex-direction: column-reverse;}
    .flexbox .rightside.img, .flexbox.reverse .leftside.img{margin-top: 30px; margin-bottom: 0px;}
    .flexbox.reverse .rightside.img, .flexbox .leftside.img{margin-bottom: 30px; margin-top: 0px;}

    #ctas .container.flex .item h2{font-size: 1rem;}
    #ctas .container.flex .item h3{font-size: 1.25rem;}

    #donateBanner .container{background-image: none; text-align: center;}
    #donateBanner h2{display: block; margin: 0px 0px 20px 0px;}

    #aboutIntro .container{display: block;}
    #aboutIntro .img, #aboutIntro .text{width: 100%;}
    #aboutIntro .img{text-align: center; margin-bottom: 20px;}

    .pillar .icon{padding: 30px;}
    .pillar .icon img{width: 80px;}
    .pillar .text{padding: 20px;}

    #sdp_intro .container{padding-left: 60px; padding-right: 60px;}

    #sdp_highlight .container{width: 100%;}
    #sdp_highlight .text{width: 96%;}

    #tla_announcement{flex-direction: column; align-items: unset;}
    #tla_announcement .img, #tla_announcement .text{width: 100%;}
    #tla_announcement .img{padding: 0px; background: none;}
    #tla_announcement .img img{display: block; max-width: 100%;}
    #tla_announcement .text{padding: 30px;}

    #tlaBanner, #ballBanner, #tllBanner{padding: 175px 0px;}
    #tlaContent .sidebar.left{float:left; width:100%; margin-bottom: 30px; padding-right:0;}
    #tlaContent .main.right{float:right; width:100%; padding-left:0;}
    #tlaContent .main.right #content_2 .partners .item img {max-width: 80%;}

}


@media only screen and (max-width:767px) {
    h1{font-size: 2.5rem;}
    h2{font-size: 1.875rem;} 
    h3{font-size: 1.25rem;}
    h4{font-size: 1.25rem;}
    h5{font-size: 1.125rem;}

    .cushion{padding: 20px 0px;}
    .cushion-lg{padding: 40px 0px;}
    .cushion-sm{padding: 10px 0px;}
    .cushion-top{padding-top: 20px;}
    .cushion-lg-top{padding-top: 40px;}
    .cushion-sm-top{padding-top: 10px;}
    .cushion-btm{padding-bottom: 20px;}
    .cushion-lg-btm{padding-bottom: 40px;}
    .cushion-sm-btm{padding-bottom: 10px;}

    .lg_txt{font-size: 1rem;}
    #home_about .rightside.text p{font-size: 1rem;}
    
    #hero h2{font-size: 1.875rem;}
    #hero p{font-size: 1rem;}  

    .stats .container.flex{flex-wrap: wrap;}
    .stats{margin-top: 20px;}
    .stats .stat{width: 48%;}
    .stats .stat h3{font-size: 2.5rem;}
    .stats .stat h3 span{font-size: 14px;}
    .sdp_page.stats{margin-top: 20px;}

    #home_intro .container{width: 96%;}
    #home_intro h2{font-size: 1rem;}
    #home_intro h3{font-size: 1.25rem;}

    #home_about .leftside img{width: 100%;}
    #home_about .leftside .caption{width: 100%; bottom: 8%;}
    #home_about .leftside .caption img{display: none;}
    #home_about .leftside .caption p{color: #fff;}

    #ctas .container.flex .item{width: 100%; margin-bottom: 30px;}
    #ctas .container.flex .item:last-child{margin-bottom: 0px;}

    #innerBanner{padding: 60px 0px;}
    #innerBanner h1{font-size: 2.5rem;}
    #innerBanner.sdp{min-height: auto;}

    #donateBanner{margin-bottom: 20px;}

    #ourMission h2{font-size: 1.25rem;}
    #ourMission .container.title{width: 96%;}

    .pillars{display: block;}
    .pillar{width: 100%;margin: 10px 0px;}
    .pillar .icon{padding: 20px;}
    .pillar .icon img{width: 50px;}
    .pillar .text h3{font-size: 1.25rem;}
    .pillar .text p{font-size: 1rem;}

    #sdp_intro .container{padding-left: 0px; padding-right: 0px;}

    #sdp_highlight h2{margin-top: 40px; font-size: 1rem;}
    #sdp_highlight h3{font-size: 1.25rem;}

    #sdp_testimonials h2, #sdp_sponsors h2{width: 96%; font-size: 1.25rem;}

    #sdp_cta .container .text{width: 100%; margin-bottom: 15px; background: #f2ecef; padding: 20px;}

    .left-col p{font-size: 1rem;}

    .panel .accordion-content .p_stats{flex-direction: column;}
    .panel .accordion-content .p_stats .stat{width: 100%; margin: 5px 0px; padding: 20px;}
    .panel .accordion-content .p_stats .stat img{margin-bottom: 10px;}
    .panel .accordion-content .p_stats h3{margin-bottom: 0px;}

    .panel .accordion-content .summary_profile{flex-direction: column;}
    .panel .accordion-content .summary_profile .img{width: 100%; background: none;}
    .panel .accordion-content .summary_profile .img img{display: block;}
    .panel .accordion-content .summary_profile .text{width: 100%; padding: 20px;}

    .panel .accordion-content .quote .text{width: calc(98% - 65px);}
    .panel .accordion-content .quote .text p{font-size: 1rem;}
    .panel .accordion-content .quote .img img{width: 65px;}

    #streams .flexed{flex-direction: column;}
    #streams .flexed .overview{width: 100%;}
    #streams .flexed .members{width: 100%; margin-top: 40px;}

    .member{width: 100%; margin: 20px 0px;}
    .member .photo img{width: 50%;}
    .member .text p{font-size: 1rem;}

    #tla_cta .container a{width: 100%; margin: 5px 0px;}

    #tlaBanner, #ballBanner, #tllBanner{padding: 100px 0px;}
    #tlaBanner h1, #ballBanner h1, #tllBanner h1, #tlaBanner p{text-align: center;}
    #tlaContent .main.right #content_2 .partners .item {width: 48%;}
    #tlaContent .main.right #content_2 .partners .item img {max-width: 60%;}

    #ballContent hr{margin: 40px 0px;}

    .event, #contactBlock, .ep{display: block;}
    .event .img, #contactBlock .text, .ep .img{width: 100%; margin-bottom: 20px; text-align: center;}
    .event .text, #contactBlock .form, .ep .text{width: 100%;}
    
}

@media only screen and (max-width:575px) {
    #sdp_testimonials{height: auto; margin-bottom: 40px;}
    #sdp_testimonials .sdp_slider .slide{padding: 40px;}
    #sdp_testimonials .container{width: 100%;}
    #sdp_sponsors .list .logo{width: 100%;}
    #sdp_sponsors .list .logo img{max-width: 100%;}

    #bball_sponsors .list .logo{width: 48%;}
    #bball_sponsors .list .logo img{width: 100%;}
}


@media only screen and (max-width:479px) {
  #tlaContent .main.right .honouree_slider .slick-slide{margin-right: 0px;}

}