html, body {background-color: inherit;}
iframe {margin: auto; text-align: center;}
#slogan {
	color: #556B2F;
	font-family: 'harley';
	font-size: 225%;
	margin-top: 2rem;
}
#description {
	font-family: 'BigCaslon';
	font-size: 125%;
	margin: auto;
	text-align: center;
}
#description2 {
	color: #556B2F;
	font-family: 'harley';
	font-size: 175%;
	margin: auto;
	margin-top: 2rem;
	text-align: center;
}

#how {
	background-color: rgb(255,255,255,0.5);
	border: 1px solid silver;
	border-radius: 1rem;
	margin: auto;
	margin-top: 2rem;
	max-width: 500px;
	padding: 1rem .25rem;
	width: 95%;
}
#how a.how_link {
	border-bottom: 1px solid rgba(85,107,47,0.45); /* subtle olive */
	text-decoration: none;                          /* remove default underline */
	padding-bottom: 0.05em;
}

#how a.how_link:hover {
	border-bottom-color: rgba(85,107,47,0.80);
}
#how p {
	font-size: 85%;
	margin-top: 2rem;
	text-align: center;
}
#how ul {
	font-size: 80%;
    margin: 1em 0;
    padding-left: 1.5em;          /* controls how far bullets sit */
    list-style-type: disc;        /* ensures standard round bullets */
    list-style-position: outside; /* bullet in margin, text aligns */
}

#how li {
    margin-bottom: 0.5em;         /* space between bullets */
    line-height: 1.5;             /* good readability, mobile-friendly */
}

/* How section tuning */

#how {background-color: rgba(255,255,255,0.5);} /* replaces rgb(...) form */

#how .section_card {
	padding: 0.25rem 1rem 0.75rem 1rem; /* tighter than default */
}

#how .section_title {
	color: #556B2F;
	font-family: 'harley';
	font-size: 175%;
	margin: 0.75rem 0 0.5rem 0;
	text-align: center;
}

#how p {
	margin: 0.9rem 0 0 0;   /* overrides the old 2rem top margin */
	line-height: 1.55;
}

#how p:first-of-type {margin-top: 0.75rem;}

#how .how_emphasis {
	font-style: italic;
	margin-top: 1.1rem;
	opacity: 0.9;
}

#how .how_intro {
	margin-top: 1.25rem;
}

#how .how_list {
	margin: 0.75rem auto 0 auto;
	max-width: 420px;
}

#how .how_footer,
#how .how_tagline {
	font-size: 95%;
	margin-top: 1rem;
}

#channels img:hover {background-color: #fff;}
#videos {
	background-color: inherit;
}

/* -------------------- */
/* Testimonials section */
/* -------------------- */

#testimonials {
	margin: auto;
	margin-top: 2rem;
	max-width: 900px;
	width: 95%;
	padding: 0 0.25rem;
}

/* 2-up cards on desktop, 1-up on mobile */
.testimonial_grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 1rem;
}

/* Card styling: matches #how */
.testimonial_card {
	background-color: rgba(255,255,255,0.6);
	border: 1px solid silver;
	border-radius: 1rem;
	box-shadow: 0 10px 25px rgba(0,0,0,0.10);
	padding: 1rem 1rem;
}

.testimonial_card blockquote {
	margin: 0;
	line-height: 1.55;
	font-style: italic;
	/* NEW */
	color: #333;          /* softer than black */
	font-size: 80%;       /* slightly smaller than body */
	font-weight: 300;     /* lighter, more refined */
}

/* Stronger author line */
.testimonial_card figcaption {
	margin-top: 0.75rem;
	font-family: 'harley';
	color: #556B2F;
	letter-spacing: 0.03em;  /* subtle polish */
	font-size: 90%;
	text-align: right;
}
/* Link color inside quotes */
.testimonial_link {
	color: #556B2F;
}

h5.slogan {display: none;}
.social {
	height: 20px;
	margin: 1rem;
	width: auto;
}
div#slider {
  border-radius: 1rem;
  -moz-border-radius: 1rem;
  -webkit-border-radius: 1rem;
  overflow: hidden;
  margin: auto;
  margin-bottom: 1rem;
  width: 95%;
  max-width: 500px;
  max-height: 400px;
}
div#slider div {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: 20s slider infinite;
}
div#slider div img {
  border-radius: 1rem;
  -moz-border-radius: 1rem;
  -webkit-border-radius: 1rem;
  width: 20%;
  float: left;
}
@keyframes slider {
  0% {left: 0%;}
  15% {left: 0%;}
  20% {left: -100%;}
  35% {left: -100%;}
  40% {left: -200%;}
  55% {left: -200%;}
  60% {left: -300%;}
  75% {left: -300%;}
  80% {left: -400%;}
  95% {left: -400%;}
}

@media print {
}
@media only screen and (max-width: 800px)  {
}
@media only screen and (max-width: 768px)  {
}
@media only screen and (max-width: 568px)  {
	#how {background-color: #f2f2f2;}
	.testimonial_grid { grid-template-columns: 1fr; }
	.testimonial_card { background-color: #f2f2f2; }
}
@media only screen and (max-width: 480px)  {
}
@media only screen and (max-width: 414px)  {
}
@media only screen and (max-width: 375px)  {
	#how p {font-size: 108%;}
    #how ul {
        padding-left: 1.25em;
    }
	#channels img {width: 48px;}
}
@media only screen and (max-width: 320px)  {
	h4 {font-size: 95%;}
	#how p {font-size: 100%;}
	#slogan {
		color: #556B2F;
		font-family: 'harley';
		font-size: 200%;
		margin-top: 2rem;
	}
	#description {
		font-size: 100%;
	}
}