@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* COLOURS:
    RED: R191 G39 B39 -- rgba(191,39,39,0.5) -- BF2727
    HEADLINE GREY: R88 G89 B91 -- 58595B
    HEADLINE GREEN: R24 G71 B85 -- rgba(24,71,85,0.5) -- 184755  */

body {
  font-size: 13px;
  font-family: 'Nunito Sans', serif;
  font-weight: 400;
  line-height: 18px;
  background-color: white;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 1.2em;
  text-align: left;
  letter-spacing: 0.25px;
}

h1,
h2 { margin: 20px 0px 0px 0px; padding: 0px; text-align: center; font-size: 1.65em; letter-spacing: 0.5px; }
h2 { text-align: left; } /* H1 LEFT JUSTIFIED */
h2 span { display: inline-block; padding-left: 5px; font-size: 0.75em; font-weight: normal; }
h1+small { text-align: center; }
h1+small,
h2+small { display: block; width: 100%; margin: 5px 0px 0px 0px; font-family: 'Montserrat', sans-serif; letter-spacing: 0.75px; }
h3 { font-size: 1.15em; margin: 15px 0px 5px 0px; }
h4 { font-size: 1.35em; } /* HOME BLOG ARTICLE TITLES */
h5 { font-size: 1.25em; } /* MIDSECTION SUBTITLES */
h6 { font-size: 1.05em; letter-spacing: 1.25px; } /* OTHER TITLES -- TAKEAWAYS */


a { color: black; text-decoration: none; }
a:hover { color: rgba(191,39,39,0.85); }
p { padding-bottom: 12px; font-size: 1.15em; font-weight: 350; line-height: 1.35em; letter-spacing: 0.2px; }
p strong { font-weight: 600; }
small { display: inline-block; font-size: 0.85em; line-height: 1.3em; }

ul { list-style: circle; padding: 0px 0px 0px 15px; }
ul li {}


div {}
div.content-line { width: 100%; height: 1px; border-bottom: 1px solid #BF2727; }


header nav,
footer nav {
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  &::-webkit-scrollbar { display: none; } -ms-overflow-style: none; scrollbar-width: none;
}
ul.nav { display: inline-block; margin: 0px auto; padding: 0px 15px 0px 0px; }
ul.nav a.nav-link { padding: 0px; color: black; font-family: 'Montserrat', serif; font-weight: 500; letter-spacing: 0.65px; }
ul.nav a.nav-link:hover { color: #BF2727; }
ul.nav li { display: inline-block; padding: 15px 0px 0px 0px; text-align: right; font-size: 1.1em; line-height: 1.2em; }
ul.nav li a { color: white; }
ul.nav li a:hover { color: rgba(255, 255, 255, 0.75); }
ul.nav li.active { font-weight: 500; }
ul.nav li.nav-item { padding: 8px 2px; }
ul.nav li.nav-item.active a.nav-link { color: #BF2727; }
ul.nav li.nav-item.active a.nav-link:hover { color: rgba(0, 0, 0, 0.75); }

button.navbar-toggler { position: relative; top: 2px; right: 15px; padding: 0px; border: none; }
button.navbar-toggler small { position: relative; top: 1px; right: 2px; font-size: 0.8em; }

div.navigation_xs_sm { width: 100%; padding: 15px 0px; background-color: rgba(255,255,255,1.0); }
div.navigation_xs_sm span { display: block; width: 100%; text-align: center; font-size: 1.2em; font-weight: 600; line-height: 1.5em; }


section, footer, header { max-width: 1080px; margin: auto; }
header { width: 100%; padding: 10px 0px 0px 0px; }
header img { height: 45px; width: auto; margin: 0px 0px 8px 0px; }

header div.content-login-name,
footer div.content-login-name { font-family: 'Montserrat'; font-size: 0.85em; letter-spacing: 0.25px; }
header div.content-login-name {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-bottom: 12px;
  text-align: right;
  line-height: 1.2em;
}

section {}
section.content { z-index: 100; width: auto; padding: 0px; margin: 0px auto; }
section.content ul {}
section.content ul li { padding: 0px 0px 0px 0px; }
section.content i.fa-cp-completed { position: absolute; top: -35px; right: 5px; font-size: 1.8em; }

section.content div.content-home div.content-line,
section.content div.content-content div.content-line,
section.content div.content-articles div.content-line,
section.content div.content-documents div.content-line,
section.content div.content-council-updates div.content-line,
section.content div.content-capital-projects div.content-line { border-color: rgba(88,89,91,0.35); }

section.content div.content-documents,
section.content div.content-documents-inline,
section.content div.content-tags,
section.content div.content-year,
section.content div.content-date,
section.content div.content-authors { font-family: 'Montserrat'; font-size: 0.9em; letter-spacing: 1.25px; }
section.content div.content-date,
section.content div.content-authors { font-size: 0.7em; }
section.content div.content-year,
section.content div.content-date,
section.content div.content-authors strong { font-weight: 600; }

section.content div.content-tags { text-align: right; }
section.content div.content-tags h5,
section.content div.content-documents h5,
section.content div.content-documents-inline h5 { margin: 0px 0px 5px 0px; font-size: 1.2em; font-weight: 500; }
section.content div.content-documents h6,
section.content div.content-documents-inline h6 {
  margin: 8px 0px 0px 0px;
  padding: 0px 5px 0px 0px;
  font-size: 0.85em;
  line-height: 1.5em;
  text-align: right;
  letter-spacing: 0.95px;
}
section.content div.content-documents-inline {
  width: 40%;
  max-width: 250px;
  margin: 15px 0px 15px 15px;
  padding: 12px;
  border-radius: 8px;
  background-color: rgba(88,89,91,0.15);
}
section.content div.content-documents span,
section.content div.content-documents-inline span {
  display: block;
  width: 100%;
  padding: 2px 5px 2px 0px;
  font-size: 0.75em;
  line-height: 1.2em;
  text-align: right;
}

section.content div.content-table { width: 100%; margin: 10px 0px 0px 0px; padding: 12px 10px 0px 10px; border: 1px solid rgba(191,39,39,0.5); border-radius: 8px; }
section.content div.content-table table { width: 100%; margin-bottom: 15px; }
section.content div.content-table table th { padding: 5px 10px 4px 10px; }
section.content div.content-table table td { padding: 4px 10px; }

section.content div.content-tagline {}
section.content div.content-tagline p { font-family: 'Montserrat'; font-size: 1.2em; font-weight: 475; }
section.content div.content-summary {}
section.content div.content-summary p { font-size: 1.05em; line-height: 1.25em; }
section.content div.content-caption {}
section.content div.content-read p,
section.content div.content-caption p {
  padding: 4px 0px 10px 0px;
  color: rgba(88,89,91,1.0);
  font-family: 'Montserrat';
  font-size: 0.8em;
  line-height: 1.35em;
  letter-spacing: 0.5px;
}
section.content div.content-read p { padding-bottom: 5px; font-style: italic; font-weight: 450; }

section.content div.content-type-title,
section.content div.content-section-title { font-family: 'Montserrat'; font-weight: 500; line-height: 1.0em; letter-spacing: 1.25px; }
section.content div.content-type-title { padding: 8px 0px; font-size: 0.95em; }
section.content div.content-section-title { padding: 12px 0px; font-size: 1.1em; }

section.content div.content-takeaways {
  float: right;
  width: 50%;
  max-width: 500px;
  margin: 5px 0px 12px 15px;
  padding: 15px 12px 20px 12px ;
  border-radius: 8px;
  background-color: rgba(24,71,85,0.2);
}
section.content div.content-takeaways h6 { margin-bottom: 5px; text-align: center; }
section.content div.content-takeaways ul {}
section.content div.content-takeaways ul li { padding: 0px 0px 12px 0px; font-size: 1.05em; line-height: 1.2em; font-weight: 425; }
section.content div.content-takeaways ul li:last-child { padding-bottom: 0px; }
section.content i.lt-footnote { font-size: 0.85em; }
section.content div.content-footnotes { margin: 0px 0px 0px 0px; padding: 15px 0px 0px 0px; border-top: 1px solid rgba(24,71,85,0.25); }
section.content div.content-footnotes i { font-size: 1.05em; }
section.content div.content-footnotes h5 { margin: 0px 0px 5px 0px; font-size: 1.075em; font-weight: 500; text-align: right; }
section.content div.content-footnotes span { display: block; margin-bottom: 8px; font-size: 0.85em; line-height: 1.35em; }

section.content div.content-capital-projects div.image-first { float: right; width: 50%; margin: 5px 0px 15px 15px; }
section.content div.content-capital-projects div.image-first img { border-radius: 8px; }

section.content div.content-council-updates h1 { margin-bottom:  5px; font-size: 1.4em; }
section.content div.content-council-updates h2 { margin-bottom: 15px; text-align: center; }
section.content div.content-council-updates h3 { margin: 0px; text-align: center; font-size: 1.25em; }
section.content div.content-council-updates h4 { text-align: left; font-weight: 550; font-size: 1.1em; }
section.content div.content-council-updates h5 { font-weight: 550; font-size: 0.95em; letter-spacing: 0px; }
section.content div.content-council-updates h6 { font-weight: 400; font-size: 0.95em; letter-spacing: 0px; }
section.content div.content-council-updates div.content-takeaways { float: none; width: 100%; margin: 0px; }

section.content div.content-accomplishments h1 { margin: 0px; }
section.content div.content-accomplishments h2 { margin: 12px 0px 2px 0px; }


footer { margin: 0px auto; padding: 0px; }
footer img { height: 30px; width: auto; margin: 0px 0px 10px 0px; }
footer select { font-size: 0.7em !important; }
footer div.content-in-development { padding: 3px 0px 0px 0px; }
footer div.content-login-name { padding: 7px 0px 0px 0px; }
footer div.content-login-name span { display: inline-block; }
footer div.content-login-name span:first-child { padding: 0px 5px 0px 0px; }
footer div.content-login-name span:last-child { padding: 0px 10px 0px 5px; }

/* HOME PAGE RIGHT SIDE */

section.content div.content-home div.home-right-side { border-color: rgba(88,89,91,0.35); border-style: solid; border-width: 1px 0px 0px 0px; }
section.content div.content-home div.home-right-side h2 { font-size: 1.35em; }
section.content div.content-home div.home-right-side p { font-size: 1.15em; }
section.content div.content-home div.home-right-side p small { font-size: 0.8em; }
section.content div.content-home div.home-section-name {
  padding: 12px 0px 10px 0px;
  font-family: 'Montserrat';
  font-weight: 500;
  line-height: 1.0em;
  letter-spacing: 1.25px;
}

/* CANDIDATES */

.content-candidates {}
.content-candidates img { margin: 15px 0px; border: 1px solid rgba(191,39,39,0.5); }
.content-candidates h4,
.content-candidates h5 { margin: 0px; text-align: left; font-style: normal; font-weight: 500; line-height: 1.35em; }
.content-candidates h5 { font-size: 0.9em; font-weight: 500; line-height: 1.5em; }
.content-candidates h6 { font-size: 0.65em; font-weight: 500; margin: 0px 0px 2px 0px; }


/* SCOPED WITH CSS TO BE SPECIIFC TO LANGLEY TODAY */

.content-forms {}
.content-forms label { margin-bottom: 4px; padding-right: 5px; padding-left: 0px; font-family: 'Montserrat', sans-serif; font-size: 1.0em; }
.content-forms input,
.content-forms select,
.content-forms textarea { border-color: rgba(191,39,39,0.5) !important; }
.content-forms button {
  font-family: 'Roboto' !important;
  color: #BF2727 !important;
  font-size: 0.9em !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  background-color: white;
  border-color: #BF2727 !important;
}
.content-forms button:hover { color: white !important; background-color: #BF2727 !important; }


/* VIDEOS */

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
  border-radius: 8px;
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/** BREAKPOINTS **/

@media (min-width: 576px) {  /* SM */
  header img { height: 50px; }
}

@media (min-width: 768px) {  /* MD */
  body { font-size: 14px; }
  header img { height: 55px; }
  section.content div.content-home div.home-right-side { padding-left: 25px; border-width: 0px 0px 0px 1px; } /* BREAK TO RIGHT SIDE */
  section.content div.content-home div.home-right-side div.content-tagline p { font-size: 0.9em; }
  section.content div.content-home div.home-right-side div.content-summary p { font-size: 0.9em; }
}

@media (min-width: 992px) {  /* LG */
  body { font-size: 15px; }
  header img { height: 60px; }
}

@media (min-width: 1200px) {  /* XL */
  header img { height: 65px; }
}