/*
Theme Name: Irving K. Barber Theme
Theme URI: http://www.eclipsecreative.ca
Description: Child Theme for Honeybadger WordPress Theme
Author: Eclipse Creative
Author URI: http://www.eclipsecreative.ca
Template: honeybadger-theme
Version: 1.0
*/

@font-face { font-family: 'nexa-book'; src: url('assets/fonts/nexa-book.otf') format('otf'), url('assets/fonts/nexa-book.woff') format('woff'), url('assets/fonts/nexa-book.woff2') format('woff2'); }
@font-face { font-family: 'nexa-heavy'; src: url('assets/fonts/nexa-heavy.otf') format('otf'), url('assets/fonts/nexa-heavy.woff') format('woff'), url('assets/fonts/nexa-heavy.woff2') format('woff2'); }
@font-face { font-family: 'nexa-regular'; src: url('assets/fonts/nexa-regular.otf') format('otf'), url('assets/fonts/nexa-regular.woff') format('woff'), url('assets/fonts/nexa-regular.woff2') format('woff2'); }
@font-face { font-family: 'proxima-nova-regular'; src: url('assets/fonts/proxima-nova-regular.otf') format('otf'), url('assets/fonts/proxima-nova-regular.woff') format('woff'); }

body { color: #333b49; }
body, h1, h2, h3, h4, h5, h6 { font-family: 'proxima-nova', sans-serif; }
body p, body li { font-size: 20px; }
select { height: 3rem; }

.content a, .news-item a { color: #3383ce; }
.content a:hover, .news-item a:hover { color: #10548e; }

.button, .button:visited { background-color: #F3BC48; font-weight: bold; text-transform: uppercase; font-size: 17px; padding: 15px 25px; min-width: unset; border-radius: 30px; margin-top: 30px; margin-bottom: 0; color: #0C3B5D !important; transition: all .5s ease-in-out; }
.button:hover, .button:focus { background-color: transparent; color: #F3BC48 !important; border: 1px solid #F3BC48; }

.v-center { position: relative; top: 50%; transform: translateY(-50%); }
.padded-section { padding: 60px 0; }
.line { background-color: #F3BC48; width: 100px; height: 8px; margin: 30px auto 30px auto; }

.top-bar .header-logo { width: 400px; }
.top-bar { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; padding: 30px; background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, transparent 80%); }
.top-bar .menu-btn { color: #ffffff; float: right; cursor: pointer; }
.top-bar .top-bar-left, .top-bar .top-bar-right { width: 50% !important; display: inline-block; }
.top-bar .top-bar-left img { max-width: 400px; vertical-align: top; }
.top-bar .menu-btn { height: 30px; margin-top: 10px; }
.top-bar .menu-btn img { width: 30px; height: 30px; vertical-align: top; }
.top-bar .menu-btn span { font-size: 15px; text-transform: uppercase; height: 30px; display: inline-block; vertical-align: top; margin-top: 5px; margin-right: 10px; font-weight: bold; }

.pushy { position: fixed; width: 300px; background-color: #0C3B5D; right: -300px; top: 0; z-index: 100; transition: all .5s ease-in-out; }
.pushy-open-right .pushy { right: 250px; }

.pushy ul { margin-left: 0; padding: 90px 0 0 0; }
.pushy .generic-menu-level-0, .pushy .generic-menu-level-1 { text-transform: uppercase; font-weight: 400; font-size: 16px; overflow: hidden; border-top: 1px solid #4d5e7c; }
.pushy .generic-menu-level-0:hover, .pushy .generic-menu-level-1:hover { background-color: #4d5e7c; }
.pushy .generic-menu-level-0 .page-link .right, .pushy .generic-menu-level-1 .page-link .right { padding: 10px 0; }
.pushy .page-link { display: block !important; }
.pushy .generic-menu-level-0 .expand { display: none; }
.pushy .generic-menu-level-0:first-child { border-top: none; }
.pushy .right { width: 280px; text-align: left; margin-left: 0; padding-left: 20px; }
.pushy a { font-size: 15px; color: #ffffff; }
.pushy .generic-menu-level-1 { padding-left: 20px; background-color: #0C3B5D; }
.pushy .generic-menu-level-1 .page-link .right { margin-left: 0 !important; padding-left: 20px !important; }
.pushy ul:first-child { margin-left: 0; }
.pushy .submenu-open { padding: 0; }
.pushy .expand-icon-open:before { content: " \25bc"; right: 10px; left: auto; font-size: 13px; top: 12px; color: #F3BC48; }
.pushy .expand-icon-close:before { right: 10px; content: "\25b2"; left: auto; font-size: 10px; top: 15px; }

/* BANNER */
.page-header { position: relative; }
.page-header .content-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.banner-cover { position: absolute; top: 0; left: 0; height: 100%; width: 100vw; background-color: #39435A; opacity: .5; }

/* HOME TEMPLATE */
#home { background-size: cover; height: 85vh; color: #ffffff; background-position: center center; }
#home #content { top: 65%; }
#home h1 { font-family: 'nexa-heavy'; font-size: 60px; line-height: 1; }
#home .text { text-align: center; max-width: 60rem; margin: 0 auto; }
#home .text p { font-weight: 300; font-size: 26px; max-width: 45rem; margin: 10px auto 20px auto; line-height: 1.25; }
#home form { text-align: center; margin-top: 20px; }
#home form select, #home form a { width: 250px; display: inline-block; padding: 10px 15px; margin: 0 10px; }
#home form a { padding: 14px 15px 12px 15px; margin-bottom: 0; border: none; vertical-align: top; background-color: transparent; border: 1px solid #ffffff; font-weight: 400; color: #FFFFFF !important; }
#home form a:hover { background-color: #ffffff; color: #000000 !important; }
#home form select { border-radius: 30px; height: 50px; border: none; }
#home form select .disabled { color: #666666; }
#home img { width: 265px; height: auto; margin: 40px auto 0; display: block; }

/* FULL-WIDTH */
.full-width-bar, .page-header { position: relative; text-align: center; height: 80vh; color: #ffffff !important; background-size: cover; }
.full-width-bar .row { position: relative; top: 50%; transform: translateY(-50%); }
.full-width-bar h1, .page-header h1 { font-family: 'nexa-book', sans-serif; font-size: 30px; letter-spacing: 2px; /*text-shadow: 0 0 6px #000000;*/ font-weight: 300; }
.full-width-bar h2, .page-header h2 { font-family: 'nexa-heavy', sans-serif; font-size: 40px; /*margin: 20px 0 0 0;*/ /*text-shadow: 0 0 6px #000000;*/ line-height: 1.25; }
.full-width-bar p, .page-header p { font-family: 'proxima-nova', sans-serif; font-size: 26px; /*text-shadow: 0 0 6px #000000;*/ max-width: 45rem; margin: 0 auto; line-height: 1.25; }
.full-width-bar a, .page-header a { color: #ffffff; font-weight: bold; }

.basic-text-content, .accordion { color: #333b49; }
.basic-text-content ul, .accordion ul { margin-bottom: 25px; }
.basic-text-content h2 { font-family: 'nexa-heavy', sans-serif; font-size: 40px; margin-bottom: 30px; line-height: 1.25; }

.accordion h2 { font-family: 'nexa-heavy', sans-serif; font-size: 40px; margin-bottom: 30px; }
.accordion ul ul { list-style: none; }
.accordion ul ul li::before { content: ''; display: inline-block; background-image: url('/wp-content/themes/irving-k-barber/assets/images/bullet.png'); height: 15px; width: 15px; background-size: contain; background-repeat: no-repeat; }
.accordion-title { padding-left: 0; color: inherit; padding-right: 1.7rem; line-height: 1.5rem; }
.accordion-title::before { right: 0; top: 45%; }
.accordion-title:hover, .accordion-title:focus, .accordion-title:visited { background-color: transparent; color: #333b49; }
.accordion-content { padding-left: 0; padding-right: 0; }
.accordion-content .button { margin-top: 10px; margin-bottom: 20px }

.team-member, .news-item { margin: 3% 0; }
.news-item h4 { font-size: 20px; }
.team-member-image { height: 400px; margin-bottom: 20px; }
.team-member img { object-fit: cover; width: 100%; height: 100%; filter: grayscale(100%); }
.team-member .title { font-family: 'nexa-heavy', sans-serif; font-size: 25px; }
.team-member .title a { color: #0C3B5D; }
.team-member .position, .team-member .student-types, .team-member-modal .position, .team-member-modal .student-types, .news-item .date { font-family: 'nexa-book', sans-serif; font-size: 18px; color: #0C3B5D; text-transform: uppercase; }
.team-member .team-excerpt p, .team-member-modal p, .news-item p { font-family: 'proxima-nova', sans-serif; font-size: 15px; }
.team-member-modal { max-width: 1000px; max-height: 700px; overflow: auto; }
.team-member-modal p { margin: 5px 0; }
.team-member-modal .profile-image img { padding-right: 10%; width: 90%; filter: grayscale(100%); }
.team-member-modal .row { padding: 3%; }
.team-member-modal .columns { padding: 0; }
.team-content h2.title { font-family: 'nexa-heavy', sans-serif; }

.excerpt-read-more { display: none; }
.read-more, .news-item .button { width: 100%; min-width: 100px; }

#student-stories #filter { text-align: center; margin-bottom: 20px; }
#student-stories #filter select { width: 275px; border-radius: 30px; border: 1px solid #333b49; height: 50px; margin-right: 20px; margin-bottom: 0; padding: 10px 15px; }
#student-stories #filter .button { margin-top: 0; vertical-align: top; }

#news { padding-bottom: 100px; }

.nice-select { float: none; display: inline-block; font-size: 17px; line-height: inherit; margin: 0 0 1rem; padding: 10px 35px 35px 20px; border-radius: 30px; color: #000000; background-color: #fefefe; }
.nice-select::after { border-bottom: 2px solid #000; border-right: 2px solid #000; width: 8px; height: 8px; margin-top: -4px; right: 20px; }
.nice-select ul.list { margin: 0; }
.nice-select ul.list li.option { font-size: 17px; }

#student-stories #filter .nice-select { border: 1px solid #333b49; margin-right: 20px; margin-bottom: 0; }
#home .nice-select { border: none; margin: 0 10px; }

.footer { text-align: center; background-color: #0C3B5D; margin: 0; color: #FFFFFF; padding: 50px 0; font-size: 18px; }
.footer p, .footer a { color: #FFFFFF; transition: all .5s ease-in-out; }
.footer a:hover { color: #717F94; }
.footer-group-1 { display: inline-block; width: calc(70% - 5px); }
.footer-group-2 { display: inline-block; width: 30%; }
.footer-column { display: inline-block; width: calc(25% - 4px); vertical-align: top; font-weight: 300; text-align: left; }
.footer-group-1 .column-1 { margin: 0 30px 0 0; }
.footer-group-1 .column-2 { margin: 0 10px 0 0; }
.footer-group-1 .column-3 { width: calc(25% - 44px); }
.footer-group-2 .footer-logo { background-image: url("assets/images/footer-logo.png"); background-repeat: no-repeat; background-size: contain; height: 50px; width: 74px; margin: -10px 0 0 0; }
.footer-group-2 .footer-button { background-color: #FFFFFF; border-radius: 30px; border: 1px solid #FFFFFF; padding: 13px 20px 7px 20px; white-space: nowrap; color: #0C3B5D; text-transform: uppercase; font-family: 'nexa-heavy', sans-serif; font-size: 18px; margin: 0px 0 0 20px; transition: all .5s ease-in-out; }
.footer-group-2 .footer-button:hover { background-color: transparent; color: #FFFFFF; }

.footer-copyright { background-color: #717F94; text-align: center; color: #FFFFFF; font-size: 18px; padding: 10px 0 0 0; }
.footer-copyright a { color: #FFFFFF; transition: all .5s ease-in-out; }
.footer-copyright a:hover { color: #0C3B5D; }

@media screen and (max-width: 1200px) {
    .footer-group-1 { width: 100%; }
    .footer-group-2 { width: 100%; }
}

@media screen and (max-width: 1100px) {
    .footer-column { width: 100% !important; margin: 0 0 20px 0 !important; text-align: center; }
    .footer-button { margin: 0 !important; }
    .footer-logo { display: none; }
    .footer-group-2 { margin: 20px 0 0 0; }
}

@media screen and (max-width: 1024px) {
    body p, .full-width-bar p, .page-header p { font-size: 16px; }
    .top-bar .top-bar-left img { max-width: 200px; margin: -20px 0 0 0; }
    .padded-section { padding: 60px 10px; }
    #news { padding-bottom: 60px; }
    .full-width-bar, .page-header { height: 500px; }
    .full-width-bar h1, .page-header h1 { font-size: 18px; }
    .full-width-bar h2, .page-header h2 { font-size: 35px; }
}

@media screen and (max-width: 900px) {
    .full-width-bar h1, .page-header h1 { font-size: 14px; letter-spacing: 1px; }
    .full-width-bar h2, .page-header h2 { font-size: 25px; margin: 10px 0; }
}

@media screen and (max-width: 768px) {
  .padded-section { padding: 40px 10px; }
  #news { padding-bottom: 40px; }
  #home .text p { font-size: 20px; }
  #home .nice-select, #home form select, #home form a { display: inline-block; margin: 10px auto; }
  #home .nice-select ul.list { width: 250px; min-width: 250px; }
  #student-stories #filter .nice-select { width: 100%; margin-right: auto; margin: auto; display: block; margin-bottom: 20px; }
  #student-stories #filter .nice-select ul.list { width: auto; }
}

@media screen and (max-width: 640px) {
    .top-bar { padding: 30px 10px; }
    .team-member-modal .profile-image img { padding-right: 0; width: 100%; padding-bottom: 20px; }
}

@media screen and (max-width: 500px) {
  
}