@font-face {
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond', serif;
    font-weight: normal;
	font-style: normal;
}

body, html { 
	font-size: 100%; /*100%*/
	padding: 0; 
	margin: 0; 
	font-family: 'Montserrat', sans-serif;
	height: 100%;
	color: #000;
}

/* font awesome: <script src="https://kit.fontawesome.com/03d703ab90.js" crossorigin="anonymous"></script> */

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

/* pretty much desktop  */

body {background-color: #fff;}

.container { margin-left: auto; margin-right: auto; width: 100%;}

.image-container-index{
  position: relative;
  text-align: center;
  color: white;
  width: 100%;
}

.image-container-index img {width: 100%;}

.bold-1 {font-weight: 100;}
.bold-2 {font-weight: 500;}
.bold-3 {font-weight: 900;}

.image-container-interior {
  position: relative;
  text-align: center;
  color: black;
  width: 100%;
  min-height: 10rem;
  margin-top: 5rem;
}

.image-overlay {  
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
 }

.image-overlay-title {font-size: 4rem;}

.image-overlay-tagline {font-size: 2rem;}

.main-content{padding: 0;}

.container-index {width: 60%; padding: 0; text-align: center; margin-left: auto; margin-right: auto; line-height: 150%;}

p {margin-top: 1rem; line-height: 130%; font-size: 0.94rem;}

.smaller-text { font-size: 0.85rem;}

.mobile-nav {display: none;}

.desktop-nav {display: block;}

.image-index {margin-left: auto; margin-right: auto; max-width: 100%;}

.desktop-footer {margin-left: auto; margin-right: auto; width: 100%; height: 16rem; margin-top: 2rem;}

.footer-main-row {margin-left: auto; margin-right: auto; padding: 1rem 0 1rem 0; text-align: center; background-color: #f6f3ef;}

.footer-email-input {width: 20rem;}
.footer-email-submit {width: 20rem; margin: 0.5rem;}

a:visited, a:link {  text-decoration: none; color: #000; } 



.full-blog-item-image {max-width: 80%;}
.full-blog-content {margin-left: auto; margin-right: auto; max-width: 80%;}


h3 { font-size: 1rem;} 
h1 { line-height: 150%;;} 

.side-bar-image{
	float: right;
	overflow: hidden;
	height: 36rem;
	margin-left: 1.0rem;
	margin-bottom: 1.0rem;
	margin-top: 1.0rem;
}

.lead-text {max-width: 75%; margin: auto; color: #000; text-align: center; font-weight: bold;}
.lead-text-quote {font-weight: normal; color: #000; font-style: italic; }
.lead-text-lead {font-size: 1.4rem;}
.lead-text h2 {font-size: 1.2rem; font-weight: normal;}

.four-mains {display: flex; flex-direction: row; max-width: 80%; margin: 1.5rem auto 6rem auto;}
.four-mains-image {margin: 0; padding: 0.25rem; width: 25%;}
.four-mains-image img {width: 100%;}
.four-mains-text {width: 100%; text-align: center; font-size: 1.0rem;}
.four-mains-sub {font-size: 0.8rem; font-style: italic; text-align: center;}

@media (min-width: 768px) { 
	/*.image-container-index {border: 1px solid red;} */
	.hide-mobile {display: none;}
}

/* pretty much not desktop TABLET unless breaks below (320,375,425) */

@media (max-width: 767px) {
	.hide-desktop {display: none;}
	.desktop-nav { display: none;}
	.image-container-index {border: 1px solid blue;}
}

	/* changes some font colors to work better in dark mode on phones */ 
	
@media (prefers-color-scheme: dark) {
	 .service-item{background-color: #000;}
     .lead-text{color: #fff;} 
	 .blog-cell-content, .blog-text-lead{color: #fff;} 
	 .blog-cell-content-mobile p {color: #fff;} 
	 .recipe-carousel-title{ color: #000;}
}