/*
Theme Name: North Charles 2024
Theme URI: http://www.ncsdo.com
Author: Kenan Rubenstein for Boy Blue & Co.
Author URI: http://www.boyblueandco.com/
Description: Custom theme for North Charles.
Version: 0.9
Text Domain: boyblue


Colors:
White: 		#ffffff
Black: 		#242833
Purple: 	#65507c 
Blue: 		#648795 
Green: 		#cfe488 
*/


/* Fonts */
  


/* Animation */

@keyframes reveal {
	0%, 25% {
	    opacity: 0;
	}
	100% {
	    opacity: 1;
	}
}

@keyframes semifade {
	0% {
	    opacity: 1;
	}
	100% {
	    opacity: .15;
	}
}


/* Global / Reset */

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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
	margin: 0;
}
audio, canvas, video {
	display: inline-block;
	max-width: 100%;
}

html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}
body {
	background: #fff;
}

a {
	color: #657ca7;
	text-decoration: none;
	transition: color .4s, background .8s, border .4s;
}
p:not(.img) a {
	border-bottom: 2px solid #657ca7;
	padding: 0 0 2px;
	display: inline-block;
	font-weight: 600;
	position: relative;
	color: inherit;
}
p:not(.img) a::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	transition: width .6s;
	background: #d3dc4e;
	z-index: -1;

}
a:hover, a:active, p:not(.img) a:hover {
	color: #d3dc4e;
	border-color: #d3dc4e;
}
p:not(.img) a:hover {
	color: inherit;
	border-color: inherit;
}
p:not(.img) a:hover::before {
	width: 100%;
}
p:not(.img) a:hover {
}
a:focus, a:hover, a:active {
	outline: 0;
}


abbr[title] {
	border-bottom: 1px dotted #2b2b2b;
	cursor: help;
}

b, strong, dt {font-weight: 600;}
address, cite, dfn, em, i {font-style: italic;}
mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

code, kbd, tt, var, samp, pre {
	font-family: monospace, serif;
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
}
pre {
	border: 1px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 24px;
	max-width: 100%;
	overflow: auto;
	padding: 12px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

blockquote, q {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	content: none;
}
blockquote {
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 24px;
}
blockquote cite {
	display: block;
	font-size: 14px;
	line-height: 1.9;
	color: #293e63;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	margin: 5px 0 0;
}
blockquote strong, blockquote b {font-weight: 400;}

small {font-size: smaller;}
big {font-size: 125%;}

sup, sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {bottom: 1ex;}
sub {top: .5ex;}

ul, ol {list-style: none;}

img {
	-ms-interpolation-mode: bicubic;
	border: 0;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}
svg {
	width: 100%;
	height: 100%;
	transition: fill .3s;
	display: block;
	fill: #fff;
	overflow: visible;
}
svg .green {
	fill: #cfe488;
}
a:hover svg {
	fill: #65507c;
}
path, rect {
	transition: fill .3s;
}
svg .cls-1{fill:#657ca7;}
svg .cls-2{fill:#293e63;}
svg .cls-3{fill:#293e63;}
svg .cls-4{fill:#242833;}

fieldset {border: 1px solid rgba(0, 0, 0, 0.1);}
legend {white-space: normal;}
button, input, select, textarea {
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	font-size: 100%;
	margin: 0;
	max-width: 100%;
	vertical-align: baseline;
}
button, input {line-height: normal;}
input, textarea {
	background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); /* Removing the inner shadow, rounded corners on iOS inputs */
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: none;
	cursor: pointer;
}
button[disabled], input[disabled] {cursor: default;}
input[type="checkbox"], input[type="radio"] {padding: 0;}
input[type="search"], input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
textarea {
	overflow: auto;
	vertical-align: top;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
th {font-weight: bold;}

del {color: #767676;}

hr {display: none;}

iframe {
	max-width: 100% !important;
	width: 100%;
	height: 56.25vw;
	display: block;
}

.gradient {
	fill: #000;
	fill: url(#New_Gradient_Swatch_1);
}

/* non-standard selection styling */
::selection {
	background: #242833;
	color: #d3dc4e;
	text-shadow: none;
}
::-moz-selection {
	background: #242833;
	color: #d3dc4e;
	text-shadow: none;
}


/* Fonts */

body {
	font-family: "Krub", sans-serif;
	font-size: 18px;
	color: #242833;
	font-weight: 500;
	font-style: normal;
	line-height: 1;
}
.krub-extralight {
  font-family: "Krub", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.krub-light {
  font-family: "Krub", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.krub-regular {
  font-family: "Krub", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.krub-medium {
  font-family: "Krub", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.krub-semibold {
  font-family: "Krub", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.krub-bold {
  font-family: "Krub", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.krub-extralight-italic {
  font-family: "Krub", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.krub-light-italic {
  font-family: "Krub", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.krub-regular-italic {
  font-family: "Krub", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.krub-medium-italic {
  font-family: "Krub", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.krub-semibold-italic {
  font-family: "Krub", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.krub-bold-italic {
  font-family: "Krub", sans-serif;
  font-weight: 700;
  font-style: italic;
}


.icon svg {
	fill: #242833;
}
/* Structure */

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

#masthead .banner,
#colophon .banner {
	padding: 32px;
}
.banner {
	height: 100%;
}


/* Header */

#masthead {

}
.scrolling #masthead {

}
#masthead .banner {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#648795+0,65507c+100 */
	background: -webkit-linear-gradient(45deg, #648795 0%, #65507c 100%);
	background: -moz-linear-gradient(45deg, #648795 0%, #65507c 100%);
	background: -o-linear-gradient(45deg, #648795 0%, #65507c 100%);
	background: linear-gradient(10deg, #648795 0%, #65507c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#masthead h1 {
	margin: 16px auto;
	width: 80vw;
	height: 80vw;
	max-width: 360px;
	max-height: 360px;
}
.label {
	display: none;
}
.icon {
	display: inline-block;
	width: 48px;
	height: 48px;
	margin: 8px 8px 8px 0;
}

#content {
	background: #cfe488;
}
.entry-content {
	width: 100%;
	padding: 16px 16px 16px;
	max-width: 640px;
	margin: 0 auto;
}
.entry-content p,
.entry-content ul {
	margin: 0 0 32px 0;
	line-height: 1.4;
}



#colophon {
	background: #242833;
	color: #fff;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
}
#colophon span {
	display: inline-block;
}

/* Responsivity */

/* Future-proof the viewport meta tag */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}


@media screen and (min-width: 841px) {
	body {
		font-size: 21px;
		font-weight: 400;
	}
	.entry-content {
		width: 100%;
		padding: 32px 16px 16px;
		max-width: 640px;
		margin: 0 auto;
	}
	
	.entry-content li {
		text-align: center;
	}
	
	.icon {
		margin: 8px;
	}

}

@media screen and (min-width: 1101px) {
	body {
		font-size: 23px;
		font-weight: 400;
	}
	.entry-content {
		width: 100%;
		padding: 64px 16px 32px;
		max-width: 640px;
		margin: 0 auto;
	}

}

@media screen and (min-width: 1281px) {
	

	
}

@media screen and (min-width: 1481px) {
	

	
}


@media screen and (min-width: 1621px) {
	

	
}



/* Print */

@media print {
	body {
		background: none !important; /* Brute force since user agents all print differently. */
		color: #2b2b2b;
		font-size: 12pt;
	}
}