@charset "utf-8";
:root {
  	--dkblue:#001d2d;
	--blue:#057dad;
    --orange:#e2691b;
    --tan:#e1dfdb;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
  }
html, body {
	position:relative;
	width:100%;
	height:100%;	
	margin: 0;
	padding: 0;
	overflow: visible;
	}
html {  
  	height: -webkit-fill-available;
	height: 100%;
  	font-size: calc(16px + 1vw);  
	}
body {
	text-align:center;
	background-color:#fff;
	color:#000;	
	line-height: 1.3; 
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-size:.7rem;
	min-height: 100%;
	height: auto;
	overflow-x: hidden;
	}
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	}
img {
	width:100%;
	height:auto;
	max-width:100%;
	}
a img {
	border: none;
	}
#kids #mission i.fa-solid {
	color:var(--orange);
	font-size:1.4rem;
	margin-right:.25rem;
	margin-bottom:.25rem;
}
a:link, 
a:visited {	
	color:var(--blue);
	text-decoration: none;	
	opacity:1;
	-webkit-transition:all .5s;
   -o-transition:all .5s;
   transition:all .5s;
	}
a:hover {
	opacity:.8;
	}
strong {
	font-weight:600;
	color:var(--blue);
}
header, footer, section, nav {
	position:relative;
	float:left;
	clear:both;
	width:100%;
	height:auto;
	text-align:center;
	}
.wrap {
	position:relative;
	width:70%;
	max-width:1200px;
	margin:0 auto;
	text-align:left;
	}
#menu-overlay {
	position:fixed;
	top:0;
	right:-400px;;
	width:400px;
	height:0;
	min-height:300px;
	z-index:1000000;
	background:var(--blue);
	transition: all 500ms ease-out;
	-webkit-transform-origin:100% 0%;
	-moz-transform-origin:100% 0%;
	-ms-transform-origin:100% 0%;
	transform-origin:100% 0%;
	visibility:hidden;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
#menu-overlay.sprung {
	position:fixed;
	top:0;
	right:0;
	width:400px;
	height:auto;
	display:block;
	visibility:visible;
}
#menu-overlay a {
	position:relative;
	display:block;
	width:100%;
	padding:.25rem .5rem;
	color:#fff;
	border-bottom:1px solid rgba(255,255,255,.3);
	text-align:left;
	font-size:.6rem;
	background:rgba(255,255,255,0);
	-webkit-transition:all .5s;
   -o-transition:all .5s;
   transition:all .5s;
}
#menu-overlay a:hover {
	background:rgba(255,255,255,.3);
}
#menu-overlay a.active {	
	color:var(--dkblue);
	background:rgba(255,255,255,.4);
	cursor:none;
	}
nav {
	display:block;
	width:100%;
	background:url(img/corner.jpg);
	background-position:right center;
	background-repeat:no-repeat;
	background-size:50% auto;
	padding:10px 0px;
	
}
.navwrap {
	width:100%!important;	
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	align-items: center;
	padding-left:2rem;
	padding-right:2rem;
}
nav a:link, 
nav a:visited,
#menu i {	 
	display:inline-block;
	color:#fff;
	font-size:1rem;
	margin-left:.5rem;
}
#logo {	
	flex:0 1 auto;
	height:80px;
	width:auto;	
	max-height:80px;
}
#logo img {
	height:100%;
	width:auto;
	max-width:none;
	max-height:80px;
}
#social {
	flex:0 1 auto;
	text-align:right;
}
header {
	background-color:var(--dkblue);	
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}
#kids header {
	border-bottom:10px solid var(--blue);
}
#main,
#remind {
	padding:2rem 0;
}
#mast-photo {
	flex:1 0 50%;	
	height:auto;
	max-width:none;
} 
#mast {
	flex:1 0 50%;	
	height:100%;
	padding-left:1rem;
	padding-right:2rem;
	display:flex;
	justify-content: flex-start;
	align-content: center;
	text-align:left;	
}
#mast h1 {
	flex:1;
	color:#fff;
	font-family: "Oswald", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	text-transform:uppercase;
	line-height:1.1;
	font-size:1.8rem;	
}
h2 {
	font-family: "Oswald", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-size:1rem;	
	color:var(--orange);
	margin-bottom:1rem;
}
#mission {
	background:var(--tan);
	padding:2rem 0;
	border-top: 10px solid var(--orange);
	border-bottom: 10px solid var(--orange);	
}
#kids #mission .wrap {
	margin-bottom:2rem;
}
#weare {
	background:var(--tan);
	padding:2rem 0;
	border-top: 10px solid var(--orange);
	border-bottom: 10px solid var(--orange);	
}
#mission .wrap,
#weare .wrap {
	display:flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}
#mission .left {
	flex:1 0 30%;
	text-align:right;
	padding-right:1rem;
	font-family: "Oswald", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	text-transform:uppercase;
	line-height:1.4;
	font-size:1.4rem;	
}
#kids #mission .left {
	line-height:1.15;
	font-size:1rem;	
}

#mission .right {
	flex:1 0 70%;
	border-left:10px solid var(--blue);
	padding-left:1rem;
	text-align:left;
	font-size:.6rem;
	color:var(--dkblue);
}

#weare .left {
	flex:1 0 70%;
	border-right:10px solid var(--blue);
	padding-right:1rem;
	text-align:left;
	font-size:.6rem;	
}
#weare .right {
	flex:1 0 30%;
	text-align:left;
	padding-left:1rem;
	font-family: "Oswald", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	text-transform:uppercase;
	line-height:1.4;
	font-size:1.4rem;	
}
#cards {
	padding:2rem 0;	
}
#cards .wrap {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	gap:1.5rem;
	align-items:stretch;
	align-content:stretch;
}
.card {
	flex:1 1 33%;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-content:flex-start;
	align-items:flex-start;
}
.card-top {
	flex:0;	
	width:100%;
	height:auto;	
	
}
.card-top img {
	width:100%;
	height:auto;
}
.card-title {
	flex:0;
	display:block;
	width:100%;
	color:#fff;
	font-family: "Oswald", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-size:.6rem;
	padding:.3rem .7rem;
	background:var(--blue);
}

#home .card {	
	border:1px solid rgba(0,0,0,.5);
	border-radius:.3rem;
}
#home .card-top {
	flex:0;	
	width:100%;
	height:auto;
	background:#fff;
	color:var(--blue);
}
#home .card-top img {
	width:100%;
	height:auto;
}
#home .card-title {
	flex:0;
	display:block;
	width:100%;
	color:var(--blue);
	font-family: "Oswald", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-size:.6rem;
	padding:0 .7rem .3rem .7rem;
	background:#fff;
}

.card-text {
	flex:1;
	font-size:.6rem;
	padding:0rem;
}
#home .card-text {
	flex:1;
	font-size:.6rem;
	padding:0rem .7rem;
}
#home .card-text::before{
	flex:none;
	display:block;
	position:relative;
	content:"";
	background: var(--orange);
	width:50%;
	height:2px;	
	margin-bottom:.3rem;	
}
.card-btn {
	width:50%;
	border:1px solid var(--blue);	
	margin:.3rem .7rem;
	text-align:left;
	font-size:.4rem;	
}
.card-btn a {
	display:block;
	padding:.25rem;
	background:#fff;
	-webkit-transition:all .5s;
   -o-transition:all .5s;
   transition:all .5s;
	}
.card-btn a:hover {
	background:var(--tan);
	}
	

footer {
	background:var(--dkblue);
	padding:3rem 0;
	color:#fff;
	font-size:.6rem;
}
ul {
	position:relative;
	list-style-type:none;
	padding:0 0 1rem 0;
	margin:0 0 2rem 0;
	border-bottom:5px solid var(--orange);
}
ul li {
	position:relative;
	padding-left:.8rem;
	margin-bottom:.3rem;
}
ul li::before {
	content:"";
	position:absolute;
	left:0;
	margin-top:8px;
	width:12px;
	height:12px;
	border-radius:100%;
	background:#057dad;
	
}

ul.small {
	position:relative;
	list-style-type:none;
	padding:00;
	margin:0;
	border-bottom:0px solid var(--tan);
}
ul.small li {
	position:relative;
	padding-left:.5rem;
	margin-bottom:.15rem;
}
ul.small li::before {
	content:"";
	position:absolute;
	left:0;
	top:-.1rem;	
	width:.3rem;
	height:.3rem;
	border-radius:100%;
	background:#057dad;	
}
@media (max-width: 1024px) {
	
	#mast h1 {
		font-size:1.2rem;
	}
	.wrap {
		width:80%;
	}
	#cards .wrap {
		width:98%;
		
	}
	
	.card-title {
	font-size:1.1rem;	
		padding:.25rem;
		text-align:center;
}

.card-text {	
	
	font-size:.65rem;
	padding:.5rem 0 1rem 0;
}

#home .card-title {
	font-size:1rem;	
	text-align:left;
	padding:0 .7rem .3rem .7rem;
}

#home .card-text {	
	font-size:.65rem;
	padding-top:0;
	padding-bottom:0;
}
}
@media (max-width: 900px) {
	.wrap {
		width:90%;
	}
	
	#logo {
		height:100px;
	}
	#mast h1 {
		font-size:1rem;
	}
	#mission .left,
	#weare .right {	
	font-size:1.1rem;	
	
}
	#mission .right,
	#weare .left {	
	font-size:.55rem;
}
	#cards .wrap {	
	gap:.7rem;
}
#menu-overlay a {	
	padding:.5rem;	
	font-size:.8rem;
}	
}
@media (max-width: 700px) {
	.navwrap {	
	padding-left:1rem;
	padding-right:1rem;
}
	#logo {	
	flex:0 1 auto;
	height:60px;
	width:auto;	
	max-height:60px;
}
#logo img {
	height:100%;
	width:auto;
	max-width:none;
	max-height:60px;
}

}
@media (max-width: 600px) {
	
	#mast h1 {
	font-size:1.1rem;	
}
#main {
	font-size:1rem;	
	}	
h2 {	
	font-size:1.5rem;
}

}

@media (max-width: 600px) and (orientation: portrait) {

header {
	flex-direction:column;
	justify-content: center;
	align-items: flex-start;
}
#mast-photo {
	flex:1 0 100%;	
	height:auto;
	max-width:none;
	min-width:100%;
} 
nav a:link, 
nav a:visited,
#menu i {
	font-size:1.5rem;
	}
#mast {
	flex:1 1 100%;	
	height:auto;
	min-width:100%;
	padding:1rem .5rem;
	display:flex;
	justify-content: center;
	align-content: center;
	text-align:center;	
}	
	#mission .wrap,
	#weare .wrap {		
	flex-direction:column;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
}
	#mission .left {
	flex:1 1 100%;
	width:100%;
	min-width:100%;
	text-align:center;
	padding-right:0rem;	
	font-size:1.1rem;	
}
#mission .right {
	flex:1 1 100%;
	border-left:0px solid var(--blue);
	border-top:5px solid var(--blue);
	padding-left:0rem;
	padding-top:.5rem;
	text-align:left;
	font-size:.85rem;
	margin-top:.3rem;
}
#kids #mission i.fa-solid {	
	font-size:1.8rem;
	
}
#weare .left {
	flex:1 1 100%;
	order:2;
	border-right:0px solid var(--blue);
	border-top:5px solid var(--blue);
	padding-right:0rem;
	padding-top:.5rem;
	text-align:left;
	font-size:.75rem;
}
#weare .right {
	flex:1 1 100%;
	order:1;
	width:100%;
	min-width:100%;
	text-align:center;
	padding-leftt:0rem;	
	font-size:1.1rem;	
}
	
	
#cards .wrap {
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:1rem;
	align-items:flex-start;
	align-content:flex-start;
}
.card {
	flex:1 1 90%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-content:flex-start;
	align-items:flex-start;
	border-bottom:2px solid var(--orange);
}
.thirdcard {
	border-bottom:0px solid var(--orange);	
	}
#home .card {
	border:1px solid rgba(0,0,0,.5);
	border-radius:.3rem;
}
.card-top {
	flex:0;	
	width:100%;
	height:auto;	
	text-align:center;	
}
#home .card-top {	
	-webkit-border-top-left-radius: .3rem;
-webkit-border-top-right-radius: .3rem;
-moz-border-radius-topleft: .3rem;
-moz-border-radius-topright: .3rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;	
	
}
.card-top img {
	width:60%;
	height:auto;
	margin:0 20%;
}
#home .card-top img {
	width:100%;
	height:auto;
	margin:0;
	-webkit-border-top-left-radius: .3rem;
-webkit-border-top-right-radius: .3rem;
-moz-border-radius-topleft: .3rem;
-moz-border-radius-topright: .3rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;	
}

.card-text {	
	
	font-size:1rem;
}

#home .card-text {	
	font-size:1rem;
}
.card-btn {	
	font-size:.6rem;	
}
#menu-overlay a {
	padding:.75rem 1rem;
	font-size:1rem;
}
	
}
@media (max-width: 480px) and (orientation: portrait) {

nav {
	background-image:none;
	background-color:#fff;
	}
nav a:link, 
nav a:visited,
#menu i {	 
	color:var(--blue);
	font-size:1.2rem;
}
#menu-overlay {
	position:fixed;
	top:0;
	right:-80%;
	width:80%;
	height:auto;
	min-width:none;
	min-height:none;
	
	}
#menu-overlay.sprung {
	position:fixed;
	top:0;
	right:0;
	width:80%;
	height:auto;
	display:block;
	visibility:visible;
}	
}
@media (max-width: 350px) {
	.navwrap {
	flex-direction:column;
	justify-content: center;
	align-items: flex-start;
	padding-left:0rem;
	padding-right:0rem;
}
nav a:link, 
nav a:visited,
#menu i {		
	font-size:1.3rem;
	margin-left:.5rem;
	margin-right:.5rem;
}
#logo {	
	flex:0 1 auto;
	height:auto;
	width:90%;	
	max-height:none;
	margin:0 5%;
}
#logo img {
	height:auto;
	width:100%;
	max-width:100%;
	max-height:auto;
}
#social {
	flex:0 1 100%;
	text-align:center;
	width:100%;
}


}