/*

Mona-Sans-BlackItalic.woff
Mona-Sans-BlackNarrow.woff
Mona-Sans-BlackNarrowItalic.woff
Mona-Sans-BlackWide.woff
Mona-Sans-BlackWideItalic.woff
Mona-Sans-Bold.woff
Mona-Sans-BoldItalic.woff
Mona-Sans-BoldNarrow.woff
Mona-Sans-BoldNarrowItalic.woff
Mona-Sans-BoldWide.woff
Mona-Sans-BoldWideItalic.woff
Mona-Sans-ExtraBold.woff
Mona-Sans-ExtraBoldItalic.woff
Mona-Sans-ExtraBoldNarrow.woff
Mona-Sans-ExtraBoldNarrowItalic.woff
Mona-Sans-ExtraBoldWide.woff
Mona-Sans-ExtraBoldWideItalic.woff
Mona-Sans-Light.woff
Mona-Sans-LightItalic.woff
Mona-Sans-LightNarrow.woff
Mona-Sans-LightNarrowItalic.woff
Mona-Sans-LightWide.woff
Mona-Sans-LightWideItalic.woff
Mona-Sans-Medium.woff
Mona-Sans-MediumItalic.woff
Mona-Sans-MediumNarrow.woff
Mona-Sans-MediumNarrowItalic.woff
Mona-Sans-MediumWide.woff
Mona-Sans-MediumWideItalic.woff
Mona-Sans-Regular.woff
Mona-Sans-RegularItalic.woff
Mona-Sans-RegularNarrow.woff
Mona-Sans-RegularNarrowItalic.woff
Mona-Sans-RegularWide.woff
Mona-Sans-RegularWideItalic.woff
Mona-Sans-SemiBold.woff
Mona-Sans-SemiBoldItalic.woff
Mona-Sans-SemiBoldNarrow.woff
Mona-Sans-SemiBoldNarrowItalic.woff
Mona-Sans-SemiBoldWide.woff
Mona-Sans-SemiBoldWideItalic.woff
Mona-Sans-UltraLight.woff
Mona-Sans-UltraLightItalic.woff
Mona-Sans-UltraLightNarrow.woff
Mona-Sans-UltraLightNarrowItalic.woff
Mona-Sans-UltraLightWide.woff
Mona-Sans-UltraLightWideItalic.woff


*/

@font-face { font-family: jo-main; src: url('/c/JOM/code/fonts/biz/open-sans/WOFF/OpenSans-Regular.woff'); }
@font-face { font-family: jo-bold; src: url('/c/JOM/code/fonts/biz/open-sans/WOFF/OpenSans-Regular.woff'); }
@font-face { font-family: jo-title; src: url('/c/JOM/code/fonts/biz/open-sans/WOFF/OpenSans-Light.woff'); }
@font-face { font-family: jo-cta; src: url('/c/JOM/code/fonts/biz/mona-sans/WOFF/Mona-Sans-Regular.woff'); }

.vid-content, .hp-blurb { font-family: jo-title, serif;  } 


body { font-family: jo-main, serif; font-size: 18pt; color: #303030; } 
b { font-family: jo-bold, serif; }
strong { font-family: jo-bold, serif; font-size: 1.3em; } 


a, a:visited { text-decoration: none; color: #000080; } 
a:hover {  color: #0040FF;  } 


h2, h3, h4, h5 { display: inline-block; margin: 0; text-wrap: balance; } 

strong { color: rgba(120, 40, 0, .9); font-size: 1.3em; }

h2 {	
	font-style: normal;
	font-size: 2.7rem; 
	color: rgba(90,40,00,.9);
} 

h3 {
	font-style: none; 
	font-size: 1.5em; 
	color: rgba(80,70,0,.5);
}

h4 {
	font-style: normal;
	font-size: 1.3em; 
	color: #804000;
} 

h5 { 
	font-family: jo-cta; 
	font-weight: bold; 
	font-size: 1.8rem;
	color: rgba(56,28,0,.8); 
	margin: .5rem 0 1.5rem 0;
	/* text-shadow: 0 0 8px #FFD000, 0 0 2px #FFFFFF; */
	text-shadow: 0 0 8px rgba(0,0,0,.4);

	background-image: -webkit-linear-gradient(90deg, #505050 0%, #C05000 51%, #000000 100%);
	background-clip: text;
	-webkit-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
	transition: transform 400ms; 

} 

.testimonials-wrap { color: rgba(56,28,0,.8); } 

body { 
	margin: 0; 
	padding: 0; 
	background-image: url('/c/JOM/img/burgoyne-bay-bk.jpg');
	background-attachment: fixed; 
	background-position: center center; 
	background-size: cover; 
} 

hr { opacity: .3; }

.ico-link { opacity: .8; }
.ico-link:hover { opacity: 1; }

.opaque	 { background-color: #FFFFFF; } 

.opaque-2 { background-color:  #daf39d }

.blog-wrap { 
	background-color: rgba(255,240,190,.5); 
} 

.blog-article {
	background-color: rgba(255,240,210,.8); 
	display: flex; 
	width: 70vw; max-width: 960px;
	margin-left: auto;  margin-right: auto; 
	margin-bottom: 1rem; 
	cursor: pointer; 
}



.blog-article-img { flex-basis: 40%;  }
.blog-article-text { flex-basis: 60%; padding: 2rem; text-align: left; font-size: .8em; }
.blog-article-text p { opacity: .7; } 

.hp-blog-article-img { width: 32vw;  aspect-ratio: 1; } 
.hp-blog { display: flex; gap: 7rem; margin-left: auto; margin-right: auto; justify-content: center; }
.hp-blog-article { width: 32vw; } 
.hp-blog-article-text { padding: 1rem;  } 
.hp-blog-article-text i { font-size: .7em; } 
.hp-blog-article-text p { font-size: .9em; color: rgba(0,0,0,.8); } 

.main { 
	position: relative; 
	height: 56.25vw;
	width: 100%; 
	overflow: hidden; 
	background-color: #608040;
} 

#nav-wrap { 
	cursor: pointer; 
	display: flex; 
	flex-direction: column; 
	max-width: 480px; 
	margin-left: auto; 
	margin-right: auto; }

#nav-wrap > div { padding: .75rem 1rem .75rem 1rem; } 
#nav-wrap > div:hover { background-color: rgba(255,255,255,.5); } 

#nav-wrap > div:not(:last-child) {
	border-bottom: 1px solid rgba(0,0,0,.5); 
}

#nav-wrap { 
	transition: 400ms; 
	position: fixed;
	top: 0; left: 0; 
	height: 100vh; 
	width: 100vw; 
	background-color: rgba(230, 230, 230, 1); 
	overflow: auto;
	z-index: 999; 
	display: none; 
	}

#nav-ico-top, #nav-ico-bottom { 
	background-color: rgba(0,0,0,.8); 	
	background-image: url('/c/JOM/img/ico/hamburger-164.png');
	width: 20vw;  max-width: 64px; 
	aspect-ratio: 1; 
	display: none; 
} 

#close-ico { 
	background-color: rgba(0,0,0,.8); 	
	background-image: url('/c/JOM/img/ico/x-close-164.png');
	width: 20vw; max-width: 64px; 
	aspect-ratio: 1; 
	margin: 1rem auto 2rem auto;
} 

#nav-ico-top { 	
	position: absolute; 
	top: 0; right: 0; 
	z-index: 999; 
	margin: 1rem;
} 

#nav-ico-bottom { 
	margin: 2rem auto 1rem auto; 
} 

.round { border-radius: 100%; }
.ico-btn { opacity: .8; cursor: pointer; } 
.ico-btn:hover { opacity: 1; } 

.sm-fb, .sm-insta { width: 32px; height: 32px; display: inline-block; margin: .5rem; } 

.sm-fb { background-image: url('/c/JOM/img/ico/sm-fb-164.png'); }
.sm-insta { background-image: url('/c/JOM/img/ico/sm-insta-164.png'); }

.mo-menu-wrap { display: none; text-align: center; }

.menu-wrap, .mo-menu-wrap { 
	background-color: #324620;
	font-size: .75em; 
} 

.menu-wrap a { opacity: .7; color: rgba(220,255,200,.5); transition: opacity 400ms; } 
.menu-logo a { opacity: .9; transition: opacity 400ms; }
.menu-wrap a:hover { opacity: 1; color: rgba(220,255,200,1); text-shadow: 0 0 .5rem black; } 
.menu-wrap { color: rgba(220,255,200,.8); } 
.menu-wrap u { text-decoration: none; color: rgba(255,255,255,.2); } 

.b-menu-section { display: flex; flex-direction: column; justify-content: flex-end; } 

.b-menu-wrap { font-size: .7em; background-color: rgba(0,0,0,.3); } 
.b-menu-wrap li { padding: .5rem; color: rgba(255,255,255,.6); } 
.b-menu-wrap a { color: rgba(255, 255, 255, .8); text-shadow: 0 0 5px rgba(0,0,0,1); } 
.b-menu-wrap a:hover { color: white; } 

.menu {
	list-style: none;
	margin: 0; 
	padding: 0;
	display: flex;
	flex-flow: row no-wrap; /* Shorthand for flex-direction: row and flex-wrap: wrap */
	align-items: center;
	flex-shrink: 0;
}


.menu li {
	list-style-type: none;
	text-align: center; 
	justify-content: space-between;
	flex-grow: 1; 
}


.green-box a { color: white; font-weight: bold; }   .green-box a:hover { color: #FFD000; } 

 

.video-bk-cont, .video-over { position: absolute; top: 0; left: 0; } 

.video-bk { width: 100vw; height: 56.25vw; z-index: -1; } 

.video-over {		
	z-index: 100; 
	text-align: center; width: 100vw; 
	height: 56.25vw; 
	background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 68%, rgba(72,94,41,1) 100%);
} 


.video-over > div { margin-left: auto; margin-right: auto; } 

.vid-header { padding: 1em; } 

.vid-content { color: white; text-shadow: 0 0 7px black; padding-top: 2rem; } 
.vid-content > div { padding: 1rem; }

.vid { height: 100%; width: 100%; } 



.hp-blurb { font-size: 3vw; padding: 0 0 5rem 0; color: white;  background-color: rgba(230,255,175,.8); background: linear-gradient(180deg, rgba(72,94,41,1) 0%, rgba(29,50,0,0.7) 50%, rgba(0,0,0,0) 100%); } 

.hp-blurb > div { margin-left: auto; margin-right: auto; font-size: 2 rem; max-width: 1024px; text-align: center;  } 

.hp-about-wrap, .space, .hp-blurb-wrap, .testimonials-wrap { background-color: rgba(230,255,175,.8); } 

.footer { text-align: center; padding: 1rem; border-top: 1px solid rgba(0,0,0,.4); font-size: 12pt; } 

.centered { text-align: center; } 


.img-group, .upper-img-group, .lower-img-group { 
	display: grid; 
	justify-content: center;
}

.img-group {
	height: 25rem; 
	grid-template-columns: 33.33% 33.33% 33.33%; 
}

.ismg-group > div { 
	aspect-ratio: 1; 
} 

.upper-img-group { 
	height: 15rem; 
	grid-template-columns: 15rem 15rem 15rem; 
}

.lower-img-group { 
	height: 10rem; 
	grid-template-columns: 19% 19% 19% 19% 19%;
	gap: .5rem; 
}

.t-link { color: #000050; font-weight: bold; }  .t-link:hover { color: #503090; } 



.cta-wrap { background-color: rgba(230,255,175,.8);  } 

.cta {
	display: flex;
	margin-left: auto; margin-right: auto; 
	align-items: center;
	justify-content: center;
	color: rgba(70,40,0,.7); 
}

.in-cta > div { color: rgba(0,0,0,.9); } 

.cta > div { 
	text-align: center; 
	margin: 0; 
	cursor: pointer; 
	transition: color 400ms, background-image 1s; 
} 

.cta > div:hover { 
	background-image: radial-gradient(rgba(255, 255, 255,.4) 0%, rgba(255, 255, 255,0) 70%, rgba(255, 255, 255,0) 100%);
	color: rgba(90,0,140,1); 
} 

.cta > div:hover h5 { 
	transform: scale(1.2);
	text-shadow: 0 0 10px rgba(0,0,0,.5);
} 

.hp-cta > div { 
	padding: 2rem 3vw 0 3vw; 
	height: 12rem;
}

.hp-cta > div:not(:last-child) {
	border-right: 1px solid rgba(0,0,0,.5); 
}

.in-cta > div {
	padding: 4rem 1rem 0 1rem; 
} 


.cta-menu-wrap { padding: 3rem; border-top: 1px solid rgba(255,255,255,.4); display: flex; justify-content: center; background-color: rgba(0,0,0,.4); }

.cta-menu-wrap a { color: white; opacity: .8; transition: opacity 400ms; text-shadow: 0 0 12px #000000, 0 0 4px #000000; }
.cta-menu-wrap a:hover { opacity: 1; }

.cta-menu { width: fit-content; padding: 3rem; border-radius: .5rem;  font-size: .9em;  } 

.resp-flex { 
	display: flex; 
	flex-direction: row;
	align-items: center;
}

.resp-flex > div { 
	flex-basis: 50%; 
} 

.testimonials-wrap { 
	display: flex; 
	flex-direction: row;
}

.side-img { min-width: 45vw; min-height: 30vh; } 

.testimonials {  
	margin-left: auto; margin-right: auto; 
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #3d2a1d;
	padding: 2rem;
} 

.testimonial > div:first-child {
	font-size: 1.3em; padding: 1rem; 
	font-style: italic; 
}



.hp-about { padding: 0 10rem 1rem 10rem; font-size: 1.3em; }
.hp-section-img { aspect-ratio: 2.714; border-top: 1px solid rgba(0,0,0,.4); } 

#line-1 { padding-top: 6vw; font-size: 6vw; animation: fade-in-1 3s ease-in 1;  }
#line-2 { font-size: 5vw; animation: fade-in-2 7s ease-in 1;  }

@keyframes fade-in-1 {
    0% { opacity: 0; }
	40% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fade-in-2 {
	0% { opacity: 0 }
	40% { opacity: 0; }
	100% { opacity: 1; }cta
}





.contact-frame { } 
.contact-frame iframe { width: 100%; height: 480px;  }

.contact-wrap { background-color: rgba(255, 230, 221, .8); width: 70%; margin-left: auto; margin-right: auto; } 
.contact-wrap p { padding-right: 8vw; padding-left: 8vw;  }

.hp-jom-logo { height: 10vw; } 
.jom-logo { height: 2.5rem; transform: scale(1.25); margin: .4rem; } 
.content-logo-wrap { 
	text-align: center; padding: .5rem; 
	background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); 
} 


.content-wrap > div { border-radius: 0; max-width: 960px; margin-left: auto; margin-right: auto; }

.content-text { padding: 3rem; }
.content-img { padding: 3rem; }
.img-100 { width: 100%; } 
.img-75 { width: 75%; margin-left: auto; margin-right: auto; } 
.img-50 { width: 50%; margin-left: auto; margin-right: auto; } 
.img-30 { width: 30%; margin-left: auto; margin-right: auto; } 
.img-20 { width: 20%; margin-left: auto; margin-right: auto; } 

.jo-portrait { background-image: url('/c/JOM/img/joanne-marks-hs.jpg'); aspect-ratio: .8; position: absolute; bottom: -4rem; right: 5vw; width: 14rem; box-shadow: 0px 0px 20px rgba(0,0,0,1); }

#nav-wrap, .hp-section-img, .section-img, .content-img, .c-img, .side-img, .blog-article-img, .hp-blog-article-img, .content-banner, .float-banner, .img-group > div, .upper-img-group > div, .lower-img-group > div, .ico-btn { background-position: center center; background-size: cover; }


.bc-11 { background-color: rgba(50, 20, 10, .8); } 

.bc-0 { background-color: rgba(255, 255, 255, 1); } 
.bc-1 { background-color: rgba(240, 255, 210, .9); } 
.bc-2 { background-color: rgba(194, 214, 146, .9); }  
.bc-3 { background-color: rgba(240, 240, 200, .8); } 
.bc-4 { background-color: rgba(180, 200, 230, .8); } 
.bc-5 { background-color: rgba(255, 220, 180, .75); } 
.bc-6 { background-color: rgba(240, 230, 200, .8); } 
.bc-7 { background-color: rgba(180, 220, 255, .9); } 
.bc-8 { background-color: rgba(255, 240, 230, .7); } 

.bullets-spaced li { padding: .5rem 0; }

.content-banner { width: 100%;
		display: flex; 
		justify-content: center;
		align-items: flex-end;
		text-shadow: 0 0 12px #000000, 0 0 4px #000000;
}

.icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: rgba(0,0,0,.2); 
	mask-size: cover;
}

.icon:hover { 	background-color: rgba(255,170,0,1); }

.icon-home { 
	mask: url("data:image/svg+xml, %3Csvg width='100%' height='100%' viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath  d='M958,406.6L570.2,45.2c-19.6-22.3-47.9-35.1-77.9-35.2c-29.6,0-57.8,12.7-76.6,33.8L42.3,406.4c-18.6,19-24,46.8-13.7,71.3c10.3,24.6,34.2,40,60.9,40h33.6v368.7c0,57.2,45.7,103.6,102.9,103.6h160.3c20.8,0,39.3-16.8,39.3-37.6V707.2c0-10.4,6.9-19.8,17.3-19.8h113.2c10.4,0,18.4,9.3,18.4,19.8v245.2c0,20.8,17.4,37.6,38.2,37.6h160.3c57.2,0,104-46.4,104-103.6V517.7h33.5c26.6,0,50.4-15.4,60.8-39.8C981.7,453.4,976.4,425.7,958,406.6L958,406.6z'%3E%3C/path%3E%3C/svg%3E");
} 


.btn-act-wrap { padding: 2rem 4rem 0 4rem; text-align: right; } 

.btn-act {
	display: inline-block; 
	/* background: linear-gradient(180deg, rgba(50,90,40,.7) 0%, rgba(50,70,32,.7) 50%, rgba(20,40,25,.9) 50%, rgba(50,70,32,.9) 100%); */
	background: linear-gradient(180deg, rgba(50,90,40,.7) 0%, rgba(50,70,32,.9) 100%);
	padding: .3rem 1rem .3rem 1rem; 
	font-size: .7em; 
	ffont-weight: bold;
	color: rgba(255,255,255,.9); 
	transition: .5s;
} 

.btn-act:hover { 
	/* background: linear-gradient(180deg, rgba(50,90,40,.8) 0%, rgba(50,70,32,.8) 50%, rgba(20,40,25,1) 50%, rgba(50,70,32,1) 100%); */
	background: linear-gradient(180deg, rgba(50,90,40,.8) 0%, rgba(50,70,32,1) 100%);
	color: white; 
	box-shadow: 0px 0px 10px rgba(0,0,0,.4);
}


.btn-bio {
	display: inline-block; 
	outline: 1px solid black; 
	padding: .5rem 2rem .5rem 2rem; 
	border-radius: .25rem; 
} 

.line-space::last-line { line-height: 4; } 

.testi { color: #303060; font-style: italic; } 
.reddy { color: #7A2000; font-weight: 900; } 
.fs-2 { color: #7A2000; font-weight: 900; } 
.fs-3 { color: #1A1A50; font-weight: 900; } 
.fs-4 { color: #500000; font-weight: 900; } 
.fs-5 { color: #FF00C0; font-weight: 900; } 

.nw { white-space: nowrap; } 

.link { cursor: pointer; } 

.indent { padding: 0 0 1rem 0; } 


ul.bullets-spaced {
  list-style: none;
}

.bullets-spaced li::before {
  content: "\2022"; 
  color: #AA4000;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}


/* CONTACT FORM */

input, textarea { 
	font-family: Candara, Trebuchet MS, Helvetica, Roboto, sans-serif; 
	font-size: 14pt; 
	border-radius: 7px; } 

input, textarea, select { width: 100%; font-size: 1em; border: none; padding: 3px; background-color: rgba(255,255,255,.7); } 
input:focus, textarea:focus, select:focus { background-color: rgba(255,255,255,.9); } 
.form { padding: 12px 17px 12px 12px; } .form_field { padding-bottom: 7px; font-size: .9em; color: rgba(120,0,0,.7); } .form_field > div { font-weight: bold; margin-bottom: 5px; opacity: .8; } 

#btn_submit { cursor: pointer; width: 80%; font-weight: bold;  } 
#btn_submit { padding: 9px 18px 9px 18px; font-size: 12pt; border: none; border-radius: 30px; margin: 2px; transition: .5s; } 

.btn-enabled { background-color: rgba(150,40,0,1); color: white; }
.btn-enabled:hover { background-color: rgba(190,50,20,1); color: white; }
.btn-disabled { background-color: rgba(80,80,80,.1); color: rgba(180,180,180,.7); } 




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

	.blog-article { width: 85vw; } 

}

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

	body { font-size: 15pt; }
	.in-cta {  }

	h2 { font-size: 1.8em; }
	h5 { font-size: 1.2em; }

	.b-menu, .menu-wrap, .b-menu-wrap { display: none; } 
	.mo-menu-wrap { display: block; }

	.hp-jom-logo { height: 15vw; } 

	.vid-content { padding-top: 1rem; } 
	.vid-content > div { padding: 0; }
	#line-1 { padding-top: 0; }

	.blog-article, .cta, .testimonials-wrap, .resp-flex { flex-direction: column; }
	.blog-article, .cta { width: 92vw; } 
	.blog-article-img { min-width: 100%; aspect-ratio: 1;  }

	.hp-blurb { font-size: .8em; padding: 0 1rem 4rem 1rem;  }

	.hp-cta > div { 
		padding-top: 4rem;
	}

	.hp-cta > div:not(:last-child) {
		border-right: none; 
		border-bottom: 1px solid rgba(0,0,0,.5); 
	}

	.hp-about { padding: 0 1rem 1rem 1rem; font-size: 1.2em; }

	.hp-section-img { aspect-ratio: 2; } 
	.hp-blog { flex-direction: column; width: 100%; }
	.hp-blog-article, .hp-blog-article-img { width: 100%; } 

	#nav-ico-top, #nav-ico-bottom, #nav-wrap {
		display: block; 
	} 

	#nav-wrap { left: -100vw; } 

	.content-text { padding: 1rem; }

	.jo-portrait { width: 7rem; bottom: -2rem; }
	.cta-menu > div { padding: .5rem; }

	.img-75 { width: 100%; }
	.img-50 { width: 90%; }
	.img-30 { width: 60%; }
	.img-20 { width: 50%; }

}