@font-face {
	font-family: 'Museum Bible';
	src: url('fonts/museum-bible.eot');
	src: local('://'),  url('fonts/museum-bible.otf') format('opentype'), url('fonts/museum-bible.woff') format('woff'), url('fonts/museum-bible.svg#museumbible') format('svg');
	font-display: swap;
}

@font-face {
	font-family: 'League Gothic';
	src: url('fonts/league-gothic.eot');
	src: local('://'), url('fonts/league-gothic.otf') format('opentype'), url('fonts/LeagueGothic-Regular.otf') format('opentype'), url('fonts/league-gothic.woff') format('woff'), url('fonts/league-gothic.svg#league_gothic') format('svg');
	font-display: swap;
}

@font-face {
	font-family: 'Steinem';
	src: url('fonts/steinem.eot');
	src: local('://'),  url('fonts/steinem.ttf') format('truetype'),  url('fonts/steinem.woff') format('woff'), url('fonts/steinem.svg#steinem') format('svg');
	font-display: swap;
}
* {
  border: 0;
  padding: 0;
  margin: 0;
}

body {
	background-color: #fff;
	font-size: 20px;
	font-family: "museum bible";
	line-height: 1.2em;
	overflow-x: hidden;
	background-image: url("img/bgd2024a-10percent.jpg");
	background-repeat: no-repeat;
	background-position: bottom left; 
}

h2 {font-size:28px;line-height: 30px;font-weight: normal;}
h3 {font-size:24px;line-height: 28px;font-weight: normal;}
h4 {font-size:22px;line-height: 24px; text-transform: uppercase; font-weight: normal;}
p {font-size: 22px;}

#bgd {
	background-image: url("img/bgd2024-10percent.jpg");
	background-repeat: no-repeat;
	background-position: top right; 
	z-index:100;	
}

#content {
	background-image: url("img/bgd2024-10percent.jpg");
	background-repeat: no-repeat;
	background-position: top right; 
	margin:auto;
	margin-top: 25px;
	max-width:675px;
	margin-bottom:25px;
	z-index:1000;	
}
#content1 {
	position: relative;
	top:150px;
}
#contentpc {
	margin:auto;
	margin-top: 25px;
	max-width:760px;
	margin-bottom:25px;
	z-index:1000;	
}

.header {
	width: 99%;
	margin: 0 auto;
	padding-bottom:25px;
	z-index: 999;
	text-align: center;
}

.league {font-family: 'league gothic', sans-serif;}
.museum {font-family: "museum bible";}
.steinem {font-family: "steinem";}
.caps {text-transform: uppercase;}
.miniscule {text-transform: lowercase;}

.color1 {color: #efd471;}
.color2 {color: #f6c4ba;}
.color3 {color: #f8f0ce;}
.color4 {color: #1b3a63;}
.color5 {color: #98235f;}
.highlight {color:#98235f; font-weight: bold; text-transform: uppercase;}

a { color: #5ea432; text-decoration:none; }
a:hover, a:active { color: #1b3a63; text-decoration:none; }

#create1 {
	margin-top: 23px;
	float: right;
	line-height: 24px;
	text-align: left;
	width: 200px;
	font-size: 20px;
}
#create1a {
	margin-top: 23px;
	float: right;
	line-height: 24px;
	text-align: left;
	width: 210px;
	font-size: 20px;
}

#create2 {
	margin-bottom: -25px;
}
#create2 h2 {
	font-size: 260px;
	line-height: 255px;
	font-weight: normal;
}

#create2a {
	margin-bottom: -25px;
	font-size: 230px;
	line-height: 240px;
}
#create2a h2 {
	font-size: 230px;
	line-height: 235px;
	font-weight: normal;
}

#create3 {
	line-height: 42px;
	max-width: 435px;
	text-align: right;
	font-size: 37px;
	font-style: normal;
}
#create3 h1 {
	font-size: 37px;
	font-style: normal;
}

#design {margin-bottom:50px;}
#design1 {
	margin-top:0px;
}
#design1 h2 {
	font-size: 300px;
	line-height: 220px;
}

#design2 {
	margin-left: 100px;
	margin-top: 20px;
	text-align: left;
	max-width: 500px;
	line-height: 24px;
	font-size: 20px;
}

#design3 {
	margin-left: 84px;
	margin-top:-20px;
}
#design3 h2 {
	font-size: 68px;
}

#photo {margin-left:135px;margin-top:25px;}
#custom {padding-top:0px;padding-bottom:75px;}
#custom1{
	margin-top:10px;
	margin-left:-380px;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	font-size:150px;
}

#custom2{
	font-size: 100px;
	margin-top: 85px;
	margin-left: 230px;
}

#custom3{
	max-width:330px;
	margin-left: 234px;
	line-height: 23px;
	margin-top: 35px;
	text-align: left;
	font-size: 20px;
	
}

#strengths {padding-top:100px;padding-bottom:30px;}

#strengths ul {
	margin: 0px;
	padding:0px;
}
#strengths ul li {
	list-style-type: none;
}
#strengths ul li:before {
	margin-right:10px;
}
#strengths ul ul {
	margin-left: 50px;
}
#strengths ul ul li:before {
}

#strengths1{
	margin-top:50px;
	margin-left:240px;
	font-size:75px;
}

#strengths2{
	margin-top: 0px;
	margin-left: 50px;
}

#strengths2 h2{
	font-size: 200px;
}

#strengths3 {
	max-width:600px;
	margin-left: 250px;
	line-height: 23px;
	margin-top: 0px;
	text-align: left;
	font-size: 20px;
}
#strengths4 {
	max-width:400px;
	margin-left: 10px;
	margin-top:20px;
	margin-bottom:-35px;
}

#clients{
	margin:0 auto;
	max-width:1000px;
}

#clients p {padding-bottom:15px;}

#clients h3 {
	padding-top:15px;
	font-size: 30px;
	font-style: normal;
	color: #1b3a63;
}

#clients h4.title {padding-bottom:15px;padding-top:15px;}

.breadcrumbs {
	color: #1b3a63;
	display: block;
	padding:15px;
	margin:0px auto;
	margin-bottom:25px;
	max-width: 750px;
}

#testimonials {
	margin:0 auto;
	max-width: 1000px;
	padding-left:10px;
	padding-right:10px;
}

#testimonials2{
	padding-top:50px;
	padding-left:40px;
	font-size: 75px;
}

#testimonials3{
	line-height: 22px;
	margin-top: 50px;
	margin-left:15px;
	margin-right:15px;
	text-align: left;
	font-size: 20px;
	
}

#testimonials3 p {padding-bottom:15px;padding-left:25px;padding-right:25px;}

#contact .logo {
	margin-top:50px;
}

#contact1 {
	margin-top: 60px;
	float: right;
	line-height: 24px;
	text-align: left;
	max-width: 220px;
	font-size: 20px;
}

#contact2 {
	margin-bottom: -25px;
}
#contact2 h2 {
	font-size: 175px;
	line-height: 200px;
}

#contact3 {
	margin-left:6px;
	max-width: 420px;
}
#contact3 h3 {
	line-height: 40px;
	font-size: 37px;
	font-style: normal;
}

#error {padding-bottom:75px;}
#error1{
	margin-top:-325px;
	margin-left:-450px;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	font-size:150px;
}
#error1 h1{
	font-size:150px;
}

#error2{
	font-size: 100px;
	margin-top: 360px;
	margin-left: 260px;
}

#error3{
	max-width:330px;
	margin-left: 264px;
	line-height: 23px;
	margin-top: 35px;
	text-align: left;
	font-size: 20px;
	
}

#portfolio {
	line-height: 42px;
	font-size: 37px;
	font-style: normal;
	margin:0 auto;
	max-width:760px;
	margin-bottom:50px;
}
#portfolio2 {
	margin-bottom: -25px;
}
#portfolio h1.title {
	text-align: center;
	font-size: 45px;
	font-style: normal;
}
#portfolio p {
	font-size: 22px;
	font-family: "museum bible";
	line-height: 1.2em;
	color:#000000;
	font-style: normal;
}
#portfolio2 h1 {
	font-size: 170px;
	line-height: 200px;
}

table { border-collapse: collapse; border-spacing: 0; width:99%;}
td { vertical-align: top; }
table.clients {width:auto;margin-bottom:25px;}
table.clients td {line-height:18px;padding-right:10px;padding-top:20px;width:33%;}

.logo {
	display:block;
	max-width: 525px;
	height:auto;
	width:99%;
	padding: 10px;
 	margin: 0 auto;
	text-align: center;
}

.tagline {
	text-align: center;	
}
.tagline h3 {
	padding-top:0px;
	margin-top:0px;
}

.navouter {
	text-align: center;
	width:99%;
	margin: 0 auto;
}

#nav, #nav ul {
	padding:0;
	margin: 0;
	line-height: 1;
	z-index:5000;
}

#nav li {
	list-style-type: none;
	text-align: center;
	display: inline-block;
	padding-left:8px;
	padding-right:8px;
}
#nav li.middle::before {
	content: "\2740";
	color: #000;
	padding-right:20px;
	font-size:18px;
}
#nav li.middle::after {
	content: "\2740";
	color: #000;
	padding-left:20px;
	font-size:18px;
}

#nav li a {
	text-decoration: none;
	font-size: 20px;
	font-family: "steinem";
	font-weight: normal;
}

/* hamburger menu */
.studies {	
	text-decoration: none;
	font-size: 20px;
	font-family: "steinem";
	font-weight: normal;
	margin: 0 auto;
	text-align: center;
}
.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; padding: 15px 20px; margin: 0 auto; color: #98235f; }
.menu-toggle, .sub-toggle { display: none; }
.hamburger { display: flex; flex-direction: column; cursor: pointer; position: relative; left: -200px;}
.hamburger span { height: 3px; width: 24px; background-color: #98235f; margin: 2px 0; transition: all 0.3s; z-index: 9999;}
.nav-links { position: absolute; top: 200px; left: -100%; width: 100%; background-color: #f6f6f6; transition: left 0.3s; list-style: none; padding: 0; 	font-size: 18px; font-family: "steinem"; font-weight: normal;}
.nav-links h4 {padding-top:20px;color:#000;}
.nav-links p { padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 20px; font-size: 18px; font-family: "steinem"; font-weight: normal;line-height: 1.1em;}
.nav-links a, .submenu-label { display: block; text-decoration: none; }
.nav-links ul {margin:0 auto;}
.nav-links li {width:28%;float:left;display: inline-block;}
.menu-toggle:checked ~ .nav-links { left: 0; }
#menu-toggle:checked ~ .hamburger span:nth-child(1) {position: relative;top: 15px;transform: rotate(135deg);margin-top:-15px;}
#menu-toggle:checked ~ .hamburger span:nth-child(2) {opacity: 0;}
#menu-toggle:checked ~ .hamburger span:nth-child(3) {top: 10px;transform: rotate(-135deg);}
@media only screen and (max-width: 425px) {
	.nav-links li {width:90%;float:left;display: inline-block;padding-left:20px;}
	.hamburger { display: flex; flex-direction: column; cursor: pointer; position: relative; left: 0px;}
}
/* end hamburger menu */

.cards {margin:0 auto;max-width:1000px;}

.box > * {
  padding: 10px;
  margin:0 auto;
}

.box {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.box :nth-child(1) {
  order: 1;
}
.box :nth-child(2) {
  order: 2;
}

.box1 > * {
  padding: 10px;
  margin:0 auto;
}

.box1 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.box1 :nth-child(1) {
  order: 2;
 }
.box1 :nth-child(2) {
  order: 1;
 }

.box h2, .box p, .box1 h2, .box1 p {
  padding-left:5px;
  padding-right:5px;
  padding-top: 2px;
  padding-bottom: 15px;
}

.box img, .box1 img  {
   width:auto;
   height:auto;
   max-height:375px;
 }

.box a:hover img, .box1 a:hover img {
	opacity:0.6;
	filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE5+ */
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
    -webkit-transition: all .5s ease-in-out;
}
.additional {
	padding-bottom: 25px; padding-top: 25px; margin:0 auto; max-width: 500px;
}

/* mosaic gallery */
.mosaic-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense; /* Crucial: Fills in empty gaps automatically */
  gap: 12px;
  padding: 12px;
}
.mosaic-item {
  overflow: hidden;
  border-radius: 8px;
}
.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Keeps aspect ratio correct without stretching */
  transition: transform 0.3s ease;
}
.mosaic-item img:hover {transform: scale(1.05);}
@media (min-width: 600px) {
  .mosaic-item.wide {grid-column: span 2;}
  .mosaic-item.tall {grid-row: span 2;}
  .mosaic-item.big {grid-column: span 2;grid-row: span 2;}
}
/* end mosaic gallery */

@media only screen and (max-width: 425px) {
	.box :nth-child(1) {order: 1;padding:5px;}
	.box :nth-child(2) {order: 2;;padding:5px;}
	.box1 :nth-child(1) {order: 1;padding:5px;}
	.box1 :nth-child(2) {order: 2;;padding:5px;}
	.box, .box1 {display:block;}
	.box img, .box1 img {max-width: 90%;}
}

@media only screen and (max-width: 815px){
	body { margin:0px; padding:10px;}
	.logo {width:90%;max-width: 300px; height:auto;}
	#content {max-width: 99%;}
	img {width:99%;height:auto;}
	table, td {display:block; width:99%;margin:0;padding:0;border:0px;}
	table.contact, table.clients {display: block;}
	table.clients {margin-top:25px;}
	table.clients td {display: block !important;padding-left:0px;padding-right:0px;padding-top:0;padding-bottom:0;width:99%;margin:0;}
}
@media only screen  and (min-width: 740px) and (max-width: 815px) {
	#design1 h2 {font-size: 300px;line-height: 200px;}
	#contact1 {padding-left:50px;}
	#contact1 {float:left;padding-left:40px;}
	#contact2, #contact2 h2 {font-size: 145px;line-height: 155px;}
	#contact3 {max-width:700px;}
	#create1a {width:300px;padding-right:10px;}
}
@media only screen and (max-width: 739px) {
	#content {max-width: 99%;}
	#design1 h2 {font-size: 200px;line-height: 300px;}
	#design2 {margin-top: -75px;}
	#design3 {padding-bottom:50px;line-height: 1.1em;}
	#create2 {margin-bottom: -25px;}
	#create2 h2 {font-size: 160px;line-height: 160px;}
	#create2a {margin-bottom: -25px;font-size: 160px;line-height: 160px;}
	#create2a h2 {font-size: 160px;line-height: 160px;}
	#custom1 {margin-top:120px;margin-left:-280px;font-size:150px;z-index:0;}
	#custom2 {font-size: 90px;margin-left:90px;margin-top: -110px;z-index:500;}
	#custom3 {margin-left: 90px;line-height: 23px;margin-top: 35px;text-align: left;font-size: 20px;z-index:500;}
	#strengths {padding-top:150px;}
	#strengths1 {margin-top:120px;margin-left:-280px;font-size:150px;z-index:0;}
	#strengths2 {font-size: 90px;margin-left:90px;margin-top: -110px;z-index:500;}
	#strengths3 {margin-left: 90px;line-height: 23px;margin-top: 35px;text-align: left;font-size: 20px;z-index:500;}
	#testimonials {padding-top:400px;margin-bottom: -200px;}
	#testimonials1 {margin-left:-200px;}	
	#testimonials2{font-size: 50px;margin-top: -450px;margin-left: 160px;}
	#testimonials3{margin-left: 164px;}
	#contact2 {margin-bottom: -25px;}
	#contact2 h2 {font-size: 150px;line-height: 155px;}
	#contact1 {float:left;padding-left:50px;}
	#contact3 {padding-right:50px;padding-top:10px;}
	#error1{margin-top:-25px;margin-left:-150px;font-size:150px;}
	#error2{font-size: 100px;line-height:100px;margin-top: 0px;margin-left: 160px;}
	#error3{max-width:330px;margin-left: 164px;line-height: 23px;margin-top: 35px;text-align: left;font-size: 20px;}
	#clients {padding-left:10px;padding-right:10px;}
	#portfolio2 {margin-bottom: -25px;font-size: 120px !important;line-height: 160px;}
	#portfolio2 h1 {margin-bottom: -25px;font-size: 120px !important;line-height: 160px;}
}
@media only screen and (min-width: 413px) and (max-width: 736px) {
	#custom1 {margin-top:100px;margin-left:200px;font-size:150px;z-index:0;}
	#strengths1 {margin-top:100px;margin-left:100px;font-size:150px;z-index:0;}
	#testimonials1 {margin-left:-500px;}	
	#error1{margin-top:-250px;margin-left:-400px;font-size:150px;z-index:-5000;}
	#error2{font-size: 100px;line-height:100px;margin-top: 300px;margin-left: 200px;}
	#error3 {margin-left:200px;}
	.fas {margin-right:15px;}
}
@media only screen and (max-width: 375px) {
	.fas {margin-right:15px;}
	.box img, .box1 img {max-width: 300px;}
}
@media only screen and (max-width: 425px) {
	#portfolio2 {margin-bottom: -25px;}
	#portfolio2 h1 {font-size: 100px !important;}
	#contact1 {margin-top:20px;}
	#contact2 {margin-bottom: -25px;}
	#contact2 h2 {font-size: 125px;line-height: 125px;}
	#contact4 {margin-top: 0px; margin-bottom: 50px;}
	#create1 {width:300px;padding-right:10px;}
	#create1a {width:300px;}
	#create3 {margin-left: 0px;margin-top:15px;line-height: 35px;max-width: 360px;text-align: right;font-size: 30px;font-style: normal;}
	#design {margin-bottom:0px;}
	#design1 {margin-bottom:-50px;}
	#design1 h2 {font-size: 150px;line-height: 150px;}
	#design2 {line-height:24px;margin-bottom:25px;margin-top:20px;}
	#design3 {padding-bottom:0px;}
	#design3 h2 {font-size:38px;margin-top:20px;}
	#custom {padding-bottom: 0px;}
	#custom1 {margin-left:-300px;}
	#custom2 {font-size: 75px;margin-left:90px;margin-top: -110px;z-index:500;}
	#custom3 {margin-left:100px;}
	#strengths {margin-top:30px;padding-bottom: 0px;}
	#strengths1 {margin-top:30px;margin-left:20px;font-size:50px;z-index:0;}
	#strengths2 {font-size: 65px;margin-left:60px;margin-top: -110px;z-index:500;}
	#strengths2 h2 {font-size:180px;}
	#strengths3 {margin-left:10px;margin-right:10px;margin-top:0px;}
	#strengths4 {margin-top:30px;margin-bottom:0px;max-width:250px;}
	#testimonials2{font-size: 50px;margin-top: -450px;margin-left: 120px;}
	#testimonials3{margin-left: 20px;}
	#testimonials4{margin-bottom: 200px;}
	.box img, .box1 img {max-width: 350px;}
}