/*
Theme Name: At Home In Love
Theme URI: https://www.athomeinlove.com
Description: Theme created for At Home In Love
Author: Example7
Author URI: https://www.example7.com
Version: 1.0

  Colors
  ------
  black          231f20
  pink           f383a4
  green light    b8dfd0
  green dark     97c4b0
  gray           E6E9E9

  Webfonts
  --------
  Brandon Grotesque          font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 400;
                             font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 700;
  Freight Sans Pro           font-family: "freight-sans-pro",sans-serif; font-style: normal; font-weight: 400;
                             font-family: "freight-sans-pro",sans-serif; font-style: normal; font-weight: 700;
  FF Basic Gothic Web Pro    font-family: "ff-basic-gothic-web-pro", sans-serif; font-style: normal; font-weight: 400;
                             font-family: "ff-basic-gothic-web-pro", sans-serif; font-style: normal; font-weight: 700;
  Dawning of a New Day       font-family: 'Dawning of a New Day', cursive; font-style: normal; font-weight: 400;

*/





/* ====================================================================
   Global
   ==================================================================== */

/* -------------------[ Layout ]------------------- */

body { 
  background: url(images/background.jpg) repeat center top #FFF; 
}

#container { 
  clear: both; overflow: hidden; 
  width: 96%; max-width: 900px; margin: 45px auto 70px auto; padding: 25px 2%; 
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1); box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1); 
  background-color: #FFF; 
}

					@media only screen and (max-width : 840px) {
						#container { 
							width: 100%; margin: 0 auto; padding: 0; 
							box-shadow: none;  
						}
					}

#header { 
  clear: both; 
  width: 100%; height: auto; margin: 0 0 40px 0; padding: 0; 
  text-align: center; 
}

#header img {
	width: 100%; height: auto;
}

					@media only screen and (max-width : 840px) {
						#header { 
							height: 100px; margin: 5px 0 60px 0; 
						}
						#header img { 
							width: 88%; max-width: 550px; 
						}
					}

					@media only screen and (max-width : 480px) {
						#header {
							height: 70px; margin: 5px 0 40px 0; 
						}
					}

#content {
	position: relative; 
	display: -webkit-box; display: -ms-flexbox; display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	align-items: top;
	width: 100%; max-width: 880px; margin: 0 auto; 
}

#content img {
	width: auto; max-width: 100%; height: auto;
}

#content #post { 
  flex: 1 1 62%; 
  max-width: 550px; 
}

#content #sidebar { 
  flex: 1 1 34%; margin: 0 0 0 4%;
}

					@media only screen and (max-width : 940px) {
						#content #post { 
						  flex: 1 1 66%; 
						}
						#content #sidebar { 
						  flex: 1 1 32%; margin: 0 0 0 2%;
						}
					}

					@media only screen and (max-width : 840px) {
						#content { 
							display: block;
						}
						#content #post { 
							width: 88%; max-width: 550px; margin: 20px auto !important; padding: 0 6% 60px 6%;
						}
						#content #sidebar { 
							width: 100%; margin: 0;
						}
					}

/* -------------------[ Fonts and Type ]------------------- */

body, html { 
  color: #231f20; font-family: "ff-basic-gothic-web-pro",sans-serif; font-style: normal; font-weight: 400; font-size: 13px; line-height: 17px; letter-spacing: 0; 
}

a:link, a:visited, a:active { 
  color: #97c4b0; text-decoration: none; 
}

a:hover { 
  color: #231f20; text-decoration: none; 
}

h1 { 
  margin: 0 0 5px 0; padding: 0;
  font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 400; font-size: 20px; line-height: 22px; letter-spacing: 0.02em;  
}

    h1 a:link, h1 a:visited, h1 a:active { color: #231f20; text-decoration: none; }
    h1 a:hover { color: #97c4b0; text-decoration: none; }

h2 {  
  clear: both; position: relative; 
  width: auto; height: 24px; margin: 0 auto; padding: 8px 10px 0 10px; 
  background: #b8dfd0;
  color: #231f20; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 400; font-size: 20px; letter-spacing: 0.02em; text-align: center; 
}

h2:before { 
  position: absolute; left: -14px; bottom: 0px; 
  border: 16px solid #b8dfd0; border-left: 7px solid transparent; border-right: 7px solid #b8dfd0; 
  content:" "; 
}

h2:after { 
  position: absolute; right: -14px; bottom: 0px; 
  border: 16px solid #b8dfd0; border-right: 7px solid transparent; border-left: 7px solid #b8dfd0; 
  content:" "; 
}

					@media only screen and (max-width : 550px) {
						h2 {  
							width: 100%; padding: 8px 0 0 0;  
						}
						h2:before,
						h2:after { 
							display: none;
						}
					}

p, .p { 
  margin: 0 0 15px 0; 
}

/* -------------------[ Images ]------------------- */

.alignleft, img.alignleft, .wp-caption.alignleft { 
  float: left; display: inline; 
  margin: 0 15px 12px 0; 
}

.alignright, img.alignright, .wp-caption.alignright { 
  float: right; display: inline; 
  margin: 0 0 15px 15px; 
}

.aligncenter, img.aligncenter, .wp-caption.aligncenter { 
  clear: both; display: block;
  margin-left: auto; margin-right: auto; 
}

.alignnone, img.alignnone { 
  clear: both; 
  margin: 0; 
}

.wp-caption { 
  font-size: 12px; line-height: 15px; letter-spacing: 0px; text-align: center; 
}

.wp-caption-text {
  margin: 0 15px 0 15px; 
}

/* -------------------[ Social ]------------------- */

#social { 
	width: 100%; margin: 0 0 15px 0;
	text-align: center;
}

#social img.title {
  margin-bottom: -4px;
}

#social .fab,
#social .fas { 
	color: #b8dfd0; font-size: 30px; line-height: 30px; margin: 0 0 0 12px;
}

#social .fab:hover,
#social .fas:hover { 
	color: #97c4b0;
}

					@media only screen and (max-width : 840px) {
						#social .fab,
						#social .fas { 
							font-size: 24px; line-height: 24px; margin: 0 0 0 6px;
						}
					}

/* -------------------[ Scroll To Top ]------------------- */

.scroll-to-top { 
  display: none; position: fixed; right: 3%; bottom: 10px; text-indent: -9999px; 
  width: 85px; height: 85px;  
  background: url(images/scroll-to-top.png) no-repeat center center;
	background-size: 70px;
  font-size: 0; 
  cursor: pointer; 
  outline: 0px none; 
}












/* ====================================================================
   Header
   ==================================================================== */

/* -------------------[ Mobile Menu ]------------------- */

.mobile-menu-panel { 
	display: none;
}

					@media only screen and (max-width : 840px) {
						/* -----[  ]----- */
						#click-menu { 
							 display: block; position: absolute; top: 10%; left: 0; right: 0; z-index: 900;
							 width: 34px; margin: auto;
						}
						.menu-link {
							position: relative; display: inline-block;
							width: 34px; height: 14px !important; margin-right: 0.3em; 
							border-top: 2px solid #f383a4; border-bottom: 2px solid #f383a4;
							font-size: 12px !important; 
						}
						.menu-link:before {
							position: absolute; top: 6px; left: 0px;
							width: 100%;
							border-top: 2px solid #f383a4;
							content: "";
						}
						/* -----[  ]----- */
						.mobile-menu-panel {
							display: block; position: fixed; right: -100%; z-index: 500; 
							width: 100%; max-width: 100%; margin: 150px 0 0 0; 
  						background: rgb(243,131,164); background: rgba(243,131,164, 0.9); 
						}
						.mobile-menu-panel ul {
							clear: both; display: block;
							width: 100%; margin: 0; padding: 30px 0 0 0;
							list-style-type: none;
							text-align: center;
						}
						.mobile-menu-panel ul a {
							clear: both; display: block;
							width: 100%; margin: 0; padding: 0 0 20px 0; 
							color: #FFF; font-size: 18px; line-height: 18px; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; 
						}
						.mobile-menu-panel ul a:hover { 
							color: #000;
						}
						/* -----[  ]----- */
						.mobile-menu-panel .mobile-social #social { 
							text-align: center;
						}
						.mobile-menu-panel .mobile-social #social img.title {
							display: none;
						}
						.mobile-menu-panel .mobile-social #social .fab,
						.mobile-menu-panel .mobile-social #social .fas { 
							color: #FFF; margin: 6px;
						}
						.mobile-menu-panel .mobile-social #social .fab:hover,
						.mobile-menu-panel .mobile-social #social .fas:hover { 
							color: #000;
						}
						/* -----[  ]----- */
						.mobile-menu-panel .mobile-bottom ul a {
							font-size: 18px; line-height: 18px; 
						}
						.mobile-menu-panel .mobile-bottom ul a:hover { 
							color: #baa798;
						}
					}
					@media only screen and (max-width : 600px) {
						.header-break {
							display: none !important;
						}
					}
					@media only screen and (max-width : 480px) {
						/* -----[  ]----- */
						#click-menu { 
							 top: 7.5%;
						}
						.mobile-menu-panel {
							margin: 110px 0 0 0; 
						}
					}









/* ====================================================================
   Post
   ==================================================================== */

/* -------------------[ Top ]------------------- */

.date-heart { 
  float: left; display: block; 
  width: 48px; height: 41px; margin: 0 12px 0 0; padding: 4px 0 0 0; 
  background: url(images/post-top-date-background.png) no-repeat 0 0;
  text-align: center; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 700; 
}

.date-month { 
  font-size: 10px; text-transform: uppercase; 
}

.date-day { 
  position: relative; top: -4px; 
  font-size: 13px; 
}

.post-title { 
  float: left; 
  width: auto; margin: 10px 0 0 0; 
}

.top-post-break { 
  clear: both; display: block; 
  height: 16px; 
}

					@media only screen and (max-width : 840px) {
						.post-title { 
						  float: none; 
						  margin: 14px 0 0 0; 
						}
						.date-heart { 
							float: right; margin: 0 0 0 12px;
						}
					}

/* -------------------[ Bottom ]------------------- */
   
.postbottom {  
  clear: both; display: block; 
  margin: 20px 0; padding: 0; 
  font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 400; font-size: 12px; line-height: 20px; letter-spacing: 0.03em; 
}

/* -------------------[ LinkWithin ]------------------- */

.crp_related h2  { 
  margin: 40px 0 10px 0;
}

.crp_related ul {
  padding: inherit !important;
}

.crp_related li {
  margin: 5px 8px !important;
  border: 1px solid #b8dfd0;
}

.crp_related li:hover {
  background: #b8dfd0;
  border-color: #b8dfd0;
}

.crp_related .crp_title {
    display: block; position: absolute; bottom: 0;
    width: 96%; padding: 5px 2%;
	border: none; border-radius: 0;
    background-color: #b8dfd0;
    color: #000 !important; font-family: "brandon-grotesque"; font-size: 12px;
    text-shadow: none;
}

.crp_related li:hover .crp_title {
	background-color: #b8dfd0;
}

/* -------------------[ Sponsor Ad after 2nd Post ]------------------- */

.sponsor-box { 
  clear: both; 
  width: 100%; min-height: 275px; margin: 15px 0; 
  background: url(images/become-a-sponsor.jpg) no-repeat 0 0; 
	background-size: contain;
}

.sponsor-text { 
  float: left; 
  width: 220px; height: 90px; margin: 110px 0 0 0; 
  text-align: center; font-style: italic; 
}

.sponsor-ad { 
  float: right; 
  width: 300px; height: 250px; margin: 12px 10px 0 0;
}

.sponsor-ad img {
	width: auto; max-width: 300px; height: auto;
}

.sponsor-box ul,
.sponsor-box ul li { 
  list-style: none; 
  margin: 0; padding: 0; 
}

					@media only screen and (max-width : 950px) {
						.sponsor-box { 
							background: none; 
						}
						.sponsor-text {
						  display: none;
						}
						.sponsor-ad { 
							float: none; 
							width: 100%; max-width: 300px; height: auto; margin: 20px auto; 
							text-align: center; font-style: italic; 
						}
					}

/* -------------------[ Single Post Nav Bottom ]------------------- */

.post-prev-next-links {
  clear: both; 
  margin: 20px 0; 
}

.post-prev-next-links div {
  width: 49%;
}

					@media only screen and (max-width : 550px) {
						.post-prev-next-links div {
							clear: both; display: block; 
							width: 100%; margin: 0 0 10px 0;
						}
					}

/* -------------------[ Comments - Add A Comment ]------------------- */

#comment-form { 
  clear: both; overflow: auto; 
  width: 100%; max-width: 550px; margin: 10px 0 40px 0; padding: 10px 0; 
  background-color: #FFF; 
  text-align: left; 
}

.comment-title { 
  clear: both; float: left; 
  width: 110px; margin: 0; padding: 0 10px 10px 0; 
  font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 400; font-size: 14px; 
}

.comment-input  { 
  float: left; 
  padding: 0 0 10px 0; 
}

#comment-form input { 
  width: 350px; 
}

#comment-form textarea { 
  width: 350px; height: 100px; 
}

					@media only screen and (max-width : 550px) {
						#comment-form input { 
							width: 100%; max-width: 350px; 
						}
						#comment-form textarea { 
							width: 100%; max-width: 350px; height: 100px; 
						}
					}

#comment-form input, #comment-form textarea { 
  padding: 2px 5px; 
  border: 1px solid #b8dfd0; 
}

#comment-submit { 
  clear: both; display: block; 
  width: 80px !important; margin: 5px 0 0 120px; padding: 5px 10px !important; 
  background-color: #b8dfd0 !important; 
  color: #231f20; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-decoration: none; text-align: center; 
}

#comment-submit:link { 
  background-color: #d1d1d1 !important; 
}

#comment-submit:hover { 
  border: 1px solid #97c4b0; 
  background-color: #97c4b0 !important; 
  color: #FFF;
}

.comment-subscription-form { 
  margin: 15px 0 0 0;
}

/* -------------------[ Comments ]------------------- */

.comment-content { 
  margin: 0; padding: 0; 
}

.comment-author, .comment-date { font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 400; font-size: 15px; }
.comment-text { }

.commentlist ol { 
  float: left; 
  width: 98%; max-width: 600px; margin: 0; padding: 0; 
}

.commentlist li { 
  width: 98%; max-width: 520px; margin: 0 0 20px -40px !important; padding: 15px; 
  list-style: none !important; 
}

.even, .alt { 
  margin: 0 0 20px 0 !important; padding: 10px !important; 
  border: 1px solid #b8dfd0; 
}

/* -------------------[ Comments Child ]------------------- */

ol.commentlist li ul.children { 
  margin: 25px 0 0 15px; 
  text-indent: 0; list-style: none; 
}

ol.commentlist li ul.children li.depth-2 { 
  margin: 0 0 3px; 
}

ol.commentlist li ul.children li.depth-3 { 
  width: 98%; max-width: 435px; margin: 0 0 3px; 
}

ol.commentlist li ul.children li.depth-4 { 
  width: 98%; max-width: 375px; margin: 0 0 3px; 
}

ol.commentlist li ul.children li.depth-5 { 
  width: 98%; max-width: 315px; margin: 0 0 3px; 
}

ol.commentlist ul.children li.odd, 
ol.commentlist ul.children li.even { 
  clear: both; 
  width: 98%; max-width: 460px; 
  border: none; 
}

ol.commentlist li div.reply { 
  clear: both; float: right; display: block; 
  margin: 10px 0 20px 0; padding: 0; 
  color: #000; font-size: 16px; line-height: 22px; font-weight: normal; letter-spacing: 0.03em; text-align: right; 
}
ol.commentlist li div.reply a { }
ol.commentlist li div.reply:hover { }

/* -------------------[ Excerpt ]------------------- */

.excerpt-thumb { 
  clear: both; float: left; 
  width: 150px; margin: 3px 20px 0 0; padding: 0; 
}

/* -------------------[ Older Newer Post Nav ]------------------- */

#post-navigation {
  clear: both; 
  margin: 10px 0; padding: 0; 
}










/* ====================================================================
   Sidebar
   ==================================================================== */

/* -------------------[ Layout ]------------------- */

.widget, .widgettext, .textwidget, widget_text { 
  list-style: none; 
}

#sidebar {
  text-align: center;
}

#sidebar ul { 
  margin: 6px 0 0 0; padding: 0; 
}

#sidebar ul li { 
  list-style: none; 
  margin: 0 0 4px 0; padding: 0; 
}

					@media only screen and (max-width : 840px) {
						.side-photo {
							display: none;
						}
					}

/* -------------------[ Search - Archives ]------------------- */

#sidebar .sa-box { 
  clear: both; 
  width: 96%; max-width: 290px; margin: 10px auto; padding: 0; 
  background-color: #E5E7E6; 
}

#sidebar .section { 
  overflow: hidden; 
  width: 96%; max-width: 280px; height: 70px; margin: 5px auto; padding: 5px 2%; 
}

#sidebar ul.tabs { 
  height: 5px; 
  list-style: none; 
}

#sidebar .tabs li { 
  float: left; display: inline; position: relative; 
  width: 45%; max-width: 120px; margin: 0 0 3px 7px; 
  color: #C2C4C3; font-family: "brandon-grotesque", sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; text-transform: uppercase; text-align: center; 
  cursor: pointer; 
}

#sidebar .tabs li:hover, 
#sidebar .tabs li.current { 
  color: #231f20; font-family: 'Dawning of a New Day', cursive; font-style: normal; font-weight: 400; font-size: 19px; line-height: 20px; text-transform: capitalize; letter-spacing: 2px;  
}

#sidebar .box,
#sidebar .box.visible { 
  width: 255px; margin: 10px 0 10px 10px; padding: 0;
  text-align: left; 
}

#sidebar .box { 
  display: none; 
}

#sidebar .box.visible { 
  display: block; 
}

#sidebar .box li, 
#sidebar .box.visible li { 
  list-style-type: none; 
}

#sidebar .box a:link, 
#sidebar .box a:active, 
#sidebar .box a:visited { 
  color: #C2C4C3; text-decoration: none; 
}

#sidebar .box a:hover { 
  color: #231f20; text-decoration: none; 
}

#sidebar .box .searchform { 
  display: inline; overflow: hidden; 
  margin: 0; padding: 0; 
  background-color: #FFF; 
  border: none; 
}

#sidebar .box .searchbox { 
  display: inline; 
  width: 223px; height: 20px; margin: 5px 0 0 0; padding: 3px 3px 0 7px; 
  background-color: #FFF; 
  border: none; 
  font-size: 12px; 
}

#sidebar .box .searchsubmit { 
  float: right;
  width: 22px; height: 23px; margin-top: 5px !important; 
  background: url(images/sidebar_box_searchglass.png) no-repeat center top #FFF; 
  border: none; 
  font-size: 0; 
}

#sidebar select { 
  width: 94%; max-width: 252px; margin: 5px 0 0 0; 
  color: #4d4943; font-family: "brandon-grotesque", sans-serif; font-weight: 400; font-size: 14px; line-height: 25px; text-align: left; 
}

h2.blog-search {
  margin-bottom: 30px;
}

					@media only screen and (max-width : 900px) {
						#sidebar .box,
						#sidebar .box.visible { 
							width: 205px; 
						}
						#sidebar .box .searchbox { 
							width: 173px;  
						}
					}

/* -------------------[ Navigation ]------------------- */

#sidebar-navigation { 
  clear: both; 
  margin: 20px 0 40px 0; 
  text-align: center; 
}

.togList { 
  margin: 0; 
}

.togList dt { 
  margin: 5px 0; padding: 5px 0; 
  background-color: #E6E9E9;
  cursor: pointer; cursor: hand; 
  font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 700; letter-spacing: 0.1em;
}

.togList dt:link { 
  background-color: #E6E9E9; 
}

.togList dt:hover { 
  background-color: #f383a4;
}

.togList dt span { 
  margin: 0; padding: 0; 
}

.togList dd { 
  margin: 2px 0 10px 0; padding: 0; 
}

.togList dd a:link, 
.togList dd a:hover { 
  display: block;
  width: 100%; max-width: 172px; height: 28px; margin: 0 auto; padding: 9px 0 0 0; 
  text-align: center; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 400; font-size: 15px; 
}

.togList dd a:hover { 
  background: url(images/link-circle-hover.png) no-repeat top left; 
}

html.isJS .togList dd { 
  display: none; 
} 

					@media only screen and (max-width : 840px) {
						#sidebar-navigation dt.toglist-about,
						#sidebar-navigation dt.toglist-contact { 
							display: none;
						}
						html.isJS .togList dd.dd-cats { 
							display: block;
						}
						.togList dt:hover { 
						  background-color: #E6E9E9;
						  cursor: default; 
						}
						.togList dt { 
						  width: 96%; max-width: 290px; margin: 30px auto 12px auto;
						}
					}

/* -------------------[ Navigation ]------------------- */

.ad-space { 
  clear: both; 
  margin: 20px 0;
}

.ad-space img { 
  margin-bottom: 5px; 
}






/* ====================================================================
   PAGES
   ==================================================================== */

/* -------------------[ Contact - Get In Touch ]------------------- */

#contact-form { 
  clear: both; overflow: hidden; 
  width: 100%; max-width: 490px; margin: 20px 0; padding: 0; 
}

.form-field { 
  clear: both; 
  margin: 7px 0; padding: 0 10px 0 0; 
  text-align: left; 
}

input, textarea { 
  width: 92%; max-width: 300px; margin: 0 0 12px 0; padding: 3px; 
  border: 1px solid #b8dfd0; 
  color: #231f20; font-family: "ff-basic-gothic-web-pro",sans-serif; font-style: normal; font-weight: 400; font-size: 12px; 
}

.msgbox { 
   width: 92%; max-width: 460px; height: 120px; 
}

.contact-submit { 
  clear: both; 
  margin: 3px 0 0 0; 
}

.wpcf7-submit { 
  clear: both; display: inline-block; 
  width: 80px !important; margin: 0; padding: 5px 10px !important; 
  background-color: #b8dfd0 !important; 
  color: #231f20; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-decoration: none; text-align: center; 
}

.wpcf7-submit:hover { 
  border: 1px solid #97c4b0; 
  background-color: #97c4b0 !important; 
  color: #FFF;
}

span.wpcf7-not-valid-tip { 
  position: absolute !important; top: 3px !important; left: 15px !important; z-index: 100 !important; 
  width: 180px !important; margin: 0 !important; padding: 3px 2px 2px 8px !important; 
  border: 2px #FFF solid !important; 
  background-color: #b8dfd0 !important; 
  color: #FFF !important; font-size: 12px !important; 
}

div.wpcf7-mail-sent-ok, 
div.wpcf7-mail-sent-ng, 
div.wpcf7-spam-blocked, 
div.wpcf7-validation-errors { 
  margin: 0 !important; padding: 10px !important; 
  border: none !important; 
  color: #b8dfd0 !important; font-size: 15px !important; text-indent: 0px !important; }

div.wpcf7, 
div.wpcf7-response-output { 
  margin: 0 !important; padding: 0 !important; 
}

span.wpcf7-form-control-wrap { 
  position: relative !important; 
}

/* -------------------[ Resources - Tables ]------------------- */

table { 
  width: 100%; max-width: 550px; margin: 20px 0;
  border-collapse: collapse; border-spacing: 0; 
  text-align: center; 
}

td { 
  vertical-align: top; 
  padding: 5px 15px; 
  text-align: center; 
}

h3 {  
  clear: both; 
  margin: 0 auto; padding: 5px 7px; 
  border: 2px solid #b8dfd0; 
  color: #231f20; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: 0.02em; text-align: center; 
}