/* 
Theme Name: Viven Group BP 1
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Fonts used: Roboto, Robot0 Condensed 100-900 */

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.roboto-condensed {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


/* REM is based on the root element's font size. We'll use REM. In this case that's 16px. */

/* Palette Variables */

:root {
    --blue: #015697;
    --darkblue: #00315A;
    --yellow: #F9CB4D;
    --black: #000000;
    --ltgrey: #f1f1f1;
    --white: #ffffff;
}

html {font-size:16px;color:#000000;}
body:not([class*=elementor-page-]) .site-main {max-width:1440px;padding:0;}
a {color:var(--blue);}
a:hover {color:#000;}

/* content is set to 100% width by default */
#content {width:100%;}
.page-header .entry-title {width:100%; max-width:1440px; padding:30px 0;}

/* page-content */
.page-content {width:100%;}

p {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-optical-sizing: auto;
    font-size:1rem;
    line-height:1.5rem;
    font-weight:400;
}

strong {
  font-weight:900;
}

h1 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
h1 {
  font-size:3rem;
  text-transform:uppercase;
  line-height:1.5rem;
}
h2 {
  font-family:"Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight:700;
  font-style:normal;
  font-size:2rem;
  color:var(--blue);
}

.special p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-size:1.5rem;
  line-height:2rem;
  font-weight:400;
  color:var(--blue);
}


/* Header: .site-header > .top-bar > .top-bar-content > .message-area, .social-media | .site-header > .branding-menu > .branding-menu-content > .logo, .menu */
.site-header {
  background: var(--blue);
}

.site-header .top-bar .top-bar-content .message-area .announcement-loop-item {
  color: var(--white);
  font-size:.875rem;
  font-weight:500;
}

.announcement-button .elementor-button {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:.75rem;
  line-height:1;
  padding:5px 10px;
  border-radius:2px;
  background: var(--yellow);
  color: var(--blue);
  text-transform:uppercase;
  letter-spacing:.05rem;
  border:1px solid var(--blue);
}
.announcement-button .elementor-button:hover {
  border:1px solid var(--white);
  background:var(--blue);
  color:var(--yellow);
}

.announcement-button .elementor-button svg {fill: var(--blue);}

.site-header .top-bar .top-bar-content .social-media .elementor-social-icon {
  background: var(--darkblue);
}

.site-header .top-bar .top-bar-content .social-media .elementor-social-icon:hover {
  fill: var(--yellow);
}

.site-header .branding-menu .branding-menu-content .menu ul li a {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size:1rem;
  line-height:1;
  color: var(--white);
}
.site-header .branding-menu .branding-menu-content .menu ul li a:hover {
  color: var(--yellow);
}

.site-header .branding-menu .branding-menu-content .current_page_item a {
  color: var(--yellow) !important;
}

.site-header .branding-menu .branding-menu-content .menu ul li ul li a {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size:.875rem;
  line-height:1;
  color: var(--blue);
  padding:15px 100px 15px 6px;
}

.site-header .branding-menu .branding-menu-content .menu ul li ul {padding-bottom:30px;}

.site-header .branding-menu .branding-menu-content .menu ul li ul li a:hover {
  background: var(--yellow);
  color: var(--blue);
}
.site-header .branding-menu .branding-menu-content .menu .e-fas-angle-down {fill: var(--white);}

/* Site Footer */
.site-footer {
  background: var(--yellow);
}
.site-footer p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size:.875rem;
  line-height:1.25;
  margin:0 0 6px 0;
  color: var(--blue);
}
.site-footer a {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size:1rem;
  line-height:1.5;
  color: var(--blue);
}
.site-footer .menu a:hover {
  font-size:1rem;
  line-height:1.5;
  color: var(--white);
}
.site-footer .current_page_item a {
  color: var(--white) !important;
}

.site-footer .elementor-social-icon {background: var(--yellow);}
.site-footer .elementor-social-icon svg {fill: var(--blue);}

/* pages */
.page-title h1 {
  font-size:2.5rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1.5;
  color: var(--blue);
}

.single-announcement-page p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:1rem;
  line-height:1.75rem;
  color: var(--black);
}

.single-announcement .announcement-details {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size:.875rem;
  line-height:1.75rem;
  color: var(--blue);
  text-transform:uppercase;
}

.hero-loop-item .text h1 {
  color: var(--blue);
  font-size:8rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 800;
  line-height:1;
  font-style: normal;
  letter-spacing:-.25rem;
  margin:0;
}

.hero-loop-item .text .blurb {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size:1rem;
  line-height:1.75rem;
  color: var(--blue);
  margin:0;
}

.page-intro p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size:1.5rem;
  line-height:2rem;
  color: var(--blue);
}

.page-columns h2 {
  font-size:6rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:-.25rem;
  color: var(--blue);
  text-transform:uppercase;
}

.page-columns p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size:1rem;
  line-height:1.75rem;
  color: var(--blue);
}

.page-button .elementor-button {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:.875rem;
  line-height:1;
  padding:10px 20px;
  border-radius:4px;
  background: var(--yellow);
  color: var(--blue);
  text-transform:uppercase;
  letter-spacing:.05rem;
}
.page-button .elementor-button:hover {
  background: var(--blue);
  color: var(--yellow);
}

.page-button-yellow .elementor-button {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:.875rem;
  line-height:1;
  padding:10px 20px;
  border-radius:4px;
  background: var(--yellow);
  color: var(--blue);
  text-transform:uppercase;
  letter-spacing:.05rem;
  border:1px solid var(--blue);
}
.page-button-yellow .elementor-button:hover {
  background: var(--blue);
  color: var(--yellow);
  border:1px solid var(--blue);
}

.page-feature p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight:500;
  font-style: normal;
  font-size:1.25rem;
  line-height:1.75rem;
  color: var(--blue);
}

.small-subhead p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.15rem;
  font-style:normal;
  font-size:.875rem;
  line-height:1;
  color: var(--white);
  margin:0;
}
.testimonial-loop-item .testimonial p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight:300;
  font-style: normal;
  font-size:2rem;
  line-height:2rem;
  color: var(--white);
  margin:0;
}


.upcoming-banner {background: var(--yellow);}
.upcoming-banner  h2 {
  font-size:3rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--blue);
  text-transform:uppercase;
}
.upcoming-button .elementor-button {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:1rem;
  line-height:1;
  padding:10px 20px;
  border-radius:4px;
  background: var(--yellow);
  color: var(--blue);
  text-transform:uppercase;
  letter-spacing:.05rem;
  border:1px solid var(--white);
}
.upcoming-button .elementor-button:hover {
  border:1px solid var(--blue);
  background: var(--blue);
  color: var(--yellow);
}
.upcoming-events-loop-item h3 {
  font-size:12rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  color: var(--blue);
  text-transform:uppercase;
  letter-spacing:-1rem;
  margin:0;
}

.upcoming-events-loop-item {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:1rem;
  line-height:1.75rem;
  color: var(--blue);
  text-transform:uppercase;
}

.upcoming-events-loop-item p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size:1rem;
  line-height:1.75rem;
  color: var(--blue);
  text-transform:none;
  margin:0 0 20px 0;
}

.upcoming-events-loop-item {
  border:1px solid var(--white);
}
.upcoming-events-loop-item:hover {
  border:1px solid var(--yellow);
}

.apply-today h3 {
  font-size:9rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:7rem;
  color: var(--blue);
  text-transform:uppercase;
  letter-spacing:-.5rem;
  margin:0;
}

.apply-today p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size:1rem;
  line-height:1.75rem;
  color: var(--blue);
  text-transform:none;
}

.side-by-side h2 {
  font-size:2rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:2.5rem;
  color: var(--blue);
  text-transform:uppercase;
  letter-spacing:none;
  margin:0;
}

.side-by-side p {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:1rem;
  line-height:1.5rem;
  color: var(--black);
  text-transform:none;
}

.side-by-side ul {
  padding:0 0 0 18px;
}

.side-by-side ul li {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:1rem;
  line-height:1.5rem;
  color: var(--black);
  text-transform:none;
}

.other-ways-to-apply {
  background:var(--yellow);
}
.other-ways-to-apply  h2 {
  font-size:3rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--blue);
  text-transform:uppercase;
}

.board-member-loop-item img {
  border-bottom:4px solid var(--white);
  margin:0 0 10px 0;
}
.board-member-loop-item img:hover {border-bottom:4px solid var(--yellow);}
.board-member-loop-item {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:.875rem;
  line-height:1.5rem;
  text-transform:none;
  color: var(--blue);
}
.board-member-loop-item h2 {
  font-size:1.25rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--blue);
  text-transform:uppercase;
}
.board-member-loop-item .contact-member .elementor-button {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:.75rem;
  line-height:1;
  padding:10px 14px;
  border-radius:4px;
  background: var(--yellow);
  color: var(--blue);
  text-transform:uppercase;
  letter-spacing:.05rem;
  border:1px solid var(--white);
  margin:10px 0 0 0;
}
.board-member-loop-item .contact-member .elementor-button:hover {
  border:1px solid var(--blue);
  background: var(--blue);
  color: var(--yellow);
}

.board-meetings {
  background:var(--yellow);
}
.board-meetings-table .post-row .col-title {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size:1rem;
  line-height:1.5rem;
  color: var(--blue);
}
.board-meetings-table .col-meeting_packet img {border:1px solid var(--yellow);}
.board-meetings-table .col-meeting_packet img:hover {border:1px solid var(--blue);}
.board-meetings h3 {
  font-size:1.5rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--blue);
  text-transform:uppercase;
}
.board-meetings p {
  color:var(--blue);
}

.school-documents h3 {
  font-size:1.5rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--blue);
  text-transform:uppercase;
}

.school-documents h4 {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size:1.25rem;
    line-height:1.5rem;
    color: var(--blue);
  }

.sm-page-button .elementor-button {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:.75rem;
  line-height:1;
  padding:10px 20px;
  border-radius:4px;
  background: var(--yellow);
  color: var(--blue);
  text-transform:uppercase;
  letter-spacing:.05rem;
}
.sm-page-button .elementor-button:hover {
  background: var(--blue);
  color: var(--yellow);
}

.dasa-policy h3 {
  font-size:1.5rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--blue);
  text-transform:uppercase;
}

.stay-connected p {
  font-size:3rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:2.5rem;
  letter-spacing:none;
  color: var(--blue);
  text-transform:uppercase;
  margin:0;
}

.stay-connected label {color:var(--blue);}
.stay-connected .elementor-field-group .elementor-field-textual {border:1px solid #c1c1c1;}
.stay-connected .elementor-button[type="submit"] {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:.875rem;
  text-transform:uppercase;
  letter-spacing:.05rem;
  background:var(--yellow);
  color:var(--blue) !important;
}
.stay-connected .elementor-button[type="submit"]:hover {background:var(--blue);color:var(--yellow) !important;}

.family-resources h3 {
  font-size:1.5rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--blue);
  text-transform:uppercase;
}

.five {}
.words {
  background: var(--yellow);
}

.words h2 {
  font-size:1.5rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--blue);
  text-transform:uppercase;
}

.words .word h3 {
  font-size:3rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--blue);
  text-transform:uppercase;
}

.words .word p {
  color:var(--blue);
}
.principles {background:var(--blue);}
.principles h2 {
  font-size:1.5rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--white);
  text-transform:uppercase;
}
.principles .principle h3 {
  font-size:3rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:1;
  letter-spacing:none;
  color: var(--white);
  text-transform:uppercase;
}
.principles .principle p {
  color:var(--white);
}


/* Popups */
.enrolling-popup {
  background:var(--blue);
}
.enrolling-popup h1 {
  color:var(--white);
  font-size:3rem;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height:2.5rem;
  letter-spacing:none;
  text-transform:uppercase;
  margin:0;
}
.page-button-blue .elementor-button {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:.875rem;
  line-height:1;
  padding:10px 20px;
  border-radius:4px;
  background: var(--yellow);
  color: var(--blue);
  text-transform:uppercase;
  letter-spacing:.05rem;
  border:1px solid var(--blue);
}
.page-button-blue .elementor-button:hover {
  background: var(--blue);
  color: var(--yellow);
  border:1px solid var(--yellow);
}
.leadership-member-loop-item img {border-bottom:3px solid #fff;}
.leadership-member-loop-item img:hover {border-bottom:3px solid var(--yellow);}
.leadership-member-loop-item h2 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:1rem;
  line-height:1;
  color: var(--blue);
  margin:10px 0 5px 0;
  text-transform:uppercase;
}
.leadership-member-loop-item h3 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight:500;
  font-style: normal;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.015rem;
  line-height:1;
  color: var(--blue);
  margin:0;
}

.leadership-member-single h2 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:1rem;
  line-height:1;
  color: var(--blue);
  margin:10px 0 5px 0;
  text-transform:uppercase;
}

.why-hyde p {
  margin:6px 0 15px 0;
  font-size:1rem;
  line-height:1.25rem;
}

.mobile-menu .elementor-nav-menu--dropdown .elementor-sub-item {
  font-size:1.125rem !important;
}


.hide-this {display:none;}

.site-header:not(.dynamic-header) {padding:0;}



/* Media Queries */
@media only screen and (max-width: 1440px){   
    body:not([class*=elementor-page-]) .site-main {max-width:1440px;}
}

@media only screen and (max-width: 1200px){   
  .hero-loop-item .text h1 {font-size:4rem;}
  .page-columns h2 {font-size:3.5rem;letter-spacing:-.125rem;}
  .upcoming-events-loop-item h3 {font-size:9rem;letter-spacing:-.125rem;}
  .apply-today h3 {font-size:7rem;line-height:5.5rem;letter-spacing:-.125rem;}
}

@media only screen and (max-width: 900px){   
  .page-columns h2 {font-size:2.5rem;letter-spacing:none;}
  .apply-today h3 {font-size:5rem;line-height:3.5rem;letter-spacing:none;}
}

@media only screen and (max-width: 767px){
  .apply-today h3 {font-size:3rem;line-height:2.5rem;letter-spacing:none;}
  .special p {
    font-size:1rem;
    line-height:1.5rem;
  }
}

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