/* fonts */

:root {
	--bs-primary-rgb: 19, 38, 79;
	overflow-x: hidden;
	--bg: #efe6cf;
	--cream: #efe6cf;
	--navy: #002855;
	--accent: #8b2320;
	--muted: #bfb297;
	--gold: #d9caa6;
	--text: #0b2436;
	--max-width: 1200px;
}

body {
	/*font-family: "Freight Sans Pro Medium", Arial, Helvetica, sans-serif;*/
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
  	font-style: normal;
	overflow-x: hidden;
	background:var(--cream);
  	color:var(--text);
}

h1, .h7 {
	font-family: "Times New Roman", Times, serif;
	letter-spacing: normal;
	font-size: 1.75rem;
	line-height: 1;
	font-weight: bold;
	color: #d2be91;
}

h1 .text-tiller-bold {
	font-size: 3rem;
	line-height: 1;
}

h2.text-tiller-demi {
	font-size: 2rem;
	line-height: 1;
}

.h-pre {
	font-size: 1rem;
	letter-spacing: .5em;
	margin-bottom: .25em;
}

.h7 {
	display: block;
	margin-bottom: .25em;
	font-size: 1.25rem;
}

@media(min-width: 768px) {
	h1 {
		font-size: 3rem;
	}

	h1 .text-tiller-bold {
		font-size: 6rem;
	}

	h2.text-tiller-demi {
		font-size: 3rem;
	}

	.h7 {
		font-size: 2rem;
	}
}

@media(min-width: 992px) {
	h1 {
		font-size: 4.75rem;
	}

	h1 .text-tiller-bold {
		font-size: 7rem;
	}

	h2.text-tiller-demi {
		font-size: 3rem;
	}

	.h-pre {
		font-size: 1.25rem;
		margin-bottom: .5em;
	}

	.h7 {
		font-size: 2.5rem;
	}
}

@media(min-width: 1200px) {
	h1 {
		font-size: 5rem;
	}

	h1 .text-tiller-bold {
		font-size: 8rem;
	}

	h2.text-tiller-demi {
		font-size: 4rem;
	}

	.h-pre {
		font-size: 1.25rem;
	}

	.h7 {
		font-size: 3rem;
	}
}

.hs-button.primary {
	color: #fff;
	padding: .5rem 3rem;
	font-size: 1.25rem;
	border: 1px solid transparent;
}

.btn-primary,
.hs-button.primary {
	background-color: #0070b9;
	border-color: #0070b9;
	border-radius: 5px;
	font-stretch: condensed;
	font-weight: 600;
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-variation-settings: "wdth" 75;
}

.btn-primary:hover,
.hs-button.primary:hover {
	color: #0070b9;
	border-color: #0070b9;
	background-color: #fff;
}

.btn-primary:focus,
.btn-primary:active,
.hs-button.primary:focus,
.hs-button.primary:active {
	background-color: #d5d5d5 !important;
	color: #0070b9 !important;
	border: 1px solid #d5d5d5 !important;
}

.btn-secondary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--accent);
	--bs-btn-border-color: var(--accent);
	--bs-btn-hover-bg: #80201d;
	--bs-btn-hover-border-color: #80201d;
	--bs-btn-active-bg: #731d1a;
	--bs-btn-active-border-color: #731d1a;
}

.text-secondary {
	color: #d2be91 !important;
}

/* hero */

.topbar{
	background: var(--navy);
}

.topbar-inner{
	padding: .5rem 0;	
}

.logo-hillsdale-top {
	height: 28px;
	width: auto;
}

.hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.hero__bg {
	position: absolute;
	inset: 0;
	background-image: url("../img/Signing_of_the_Constitution.webp");
	background-size: cover;
	background-position: center;
	transform: scale(1.02);
}

/* dark overlay for contrast */
.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(6, 18, 32, 0.7), rgba(6, 18, 32, 0.55));
}

.hero-inner {
	position: relative;
	max-width: var(--max-width);
	width: 100%;
	padding: 3.5rem 1.5rem;
}

.hero-copy {
	max-width: 760px;
	color: #fff;
	text-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.hero-title {
	font-family: "tiller", serif;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 4.5rem;
	line-height: 0.95;
	margin: 0 0 .75rem 0;
	color: #D2BE91;
}

@media(max-width: 992px) {
	.hero-title {
		font-size: 3rem;
	}
}

@media(max-width: 767px) {
	.hero h1 {
		font-size: 2.625rem;
	}

	.hero p {
		font-size: 1.0625rem;
	}
}

.hero-sub{
	font-size: 1.125rem;
	font-weight: 300;
	margin: 0;
	opacity: 0.95;
	max-width: 600px;
}

.flag,
.classroom {
	position: relative;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

.flag img.bg-flag,
.classroom img.bg-classroom {
	width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: top;
	position: absolute;
	top: 0;
	z-index: -1;

}

/* navbar */

.navbar {
	background: #000;
}

/* flag */

.flag p,
.classroom p {
	font-size: 1.25rem;
	color: #fff;
}

.classroom a:not(.btn) {
	color: #b09c6f;
	text-decoration: underline;
	transition: .2s ease-in-out color;
}

.classroom a:not(.btn):hover {
	color: #fff;
}

/* videos */

.col-video {
	position: relative;
}

.col-video .button-holder {
	position: absolute;
	bottom: 0;
	right: 1.5rem;
	left: 1.5rem;
	z-index: 1001;
}

.col-video .overlay {
	position: absolute;
	height: 100%;
	color: #fff;
	background: rgb(177, 6, 9, .7);
	width: calc(100% - 1rem);
	z-index: 1000;
}

.col-video:hover .overlay,
.col-video.col-video-hover .overlay {
	cursor: pointer;
	opacity: 1;
	transition: .2s ease-in-out all;
}

.col-video:hover .button-holder,
.col-video.col-video-hover .button-holder {
	background: transparent;
	transition: .2s ease-in-out all;
	z-index: 1001;
}

.col-video .front {
	display: none;
}

.col-video p.text-secondary {
	font-size: 1rem;
	letter-spacing: 1px;
}

.col-video hr {
	border-color: #002855;
	border-width: 2px;
	width: 122px;
	opacity: 1;
	margin: 0;
}

.col-video .btn-link {
	padding: 0;
	text-decoration: none;
}

.col-video button .text-tiller-demi {
	letter-spacing: 2px;
	font-size: .9375rem;
}

/* slider */

.carousel-image {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.carousel-image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.col-caption {
	display: flex;
	color: #fff;
	/*background: linear-gradient(45deg, #002855 20%, #940c16);*/
	background: linear-gradient(45deg, #000 20%, #002855);
	background: linear-gradient(transparent, #000 80%);
	min-height: 450px;
}

.col-caption > div {
	align-self: end;
}

.col-caption p {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.col-video img.icon-play {
		height: 32px;
		width: 32px;
	}

/* footer */

footer .border-light {
	--bs-border-opacity: .75;
}

footer p {
	font-size: .875rem;
	color: rgba(255, 255, 255, .8) !important;
}

footer p span {
	color: #0666b1;
}

footer a {
	color: #fff;
}

/* phone */

@media(max-width: 767px) {
	.carousel-inner p {
		font-size: 1rem;
	}
}

/* ipad vert */

@media(max-width: 991px) {
	.text-hillsdale {
		width: 200px;
	}

	.text-july {
		height: 48px;
		width: auto;
		margin-bottom: 1rem;
	}

	.icon-chevron {
		width: 32px;
	}

	.text-250 {
		height: 100px;
	}
}

/* bigger than phone */

@media(min-width: 768px) {
	.btn-sm-lg {
		--bs-btn-padding-y: 0.5rem;
		--bs-btn-padding-x: 1rem;
		--bs-btn-font-size: 1.25rem;
		--bs-btn-border-radius: var(--bs-border-radius-lg);
	}

	.navbar {
		background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
	}

	.carousel-control-next, .carousel-control-prev {
		width: auto;
		left: -3rem;
	}

	.carousel-control-next {
		left: auto;
		right: -3rem;
	}

	.carousel-control-prev-icon, .carousel-control-next-icon {
		width: 3rem;
		height: 3rem;
	}

	.border-sm-bottom-0 {
		border-bottom: 0 !important;
	}

	.border-sm-end {
		border-right: 1px solid transparent;
	}

	.w-sm-auto {
		width: auto !important;
	}
}

/* md */

@media(min-width: 768px) {
	.col-video .overlay {
		width: calc(100% - 3rem);
	}

	
}

/* lg */

@media(min-width: 992px) {
	.col-video h3 {
		font-size: 1.25rem; /* 3 across */
		font-size: 1rem;
	}	

	.col-video p {
		font-size: 1rem; /* 3 across */
		margin-top: .5rem;
		font-size: .875rem;
		line-height: 1.25; /* 4 across */
	}

	/* 4 across, remove for 3 */
	.col-video p.text-secondary {
		font-size: .75rem;
	}

	.col-video img.icon-play {
		height: 24px;
		width: 24px;
	}

	.carousel-image {
		position: relative;
		z-index: inherit;
	}

	.col-caption {
		background: linear-gradient(45deg, #002855 20%, #940c16);
	}
}

@media(min-width: 1200px) {
	.col-video h3 {
		font-size: 1.125rem;
	}

	.col-video p {
		font-size: 1.125rem;
	}

	.col-caption p {
		display: block;
	}
}

@media(min-width: 1400px) {
	.col-video h3 {
		font-size: 1.5rem; /* 3 across */
	}	

	.col-video p {
		margin-top: .5rem;
		font-size: 1.25rem;
		line-height: 1;
	}

	.col-video img.icon-play {
		height: 32px;
		width: 32px;
	}

	/* 4 across, remove for 3 */
	.col-video p.text-secondary {
		font-size: 1rem;
	}

	/* show overlay on desktop */
	.col-video .overlay {
		position: absolute;
		width: calc(100% - 3rem);
		opacity: 0;
	}

	.col-video .button-holder {
		background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
	}
}

.col-video .back video {
		display: none;
	}

	.col-video .back img {
		display: block;
	}

@media(hover: hover) {
	.col-video .front {
		display: block;
	}

	.col-video .back {
		display: none;
	}

	.col-video:hover .back,
	.col-video-hover .back {
		display: block;
	}

	.col-video:hover .front,
	.col-video-hover .front {
		display: none;
	}

	.col-video .back video {
		display: block;
	}

	.col-video:not(.col-video-off) .back img {
		display: none;
	}
}


.blur {
	background: rgba(0, 0, 0, .6);
	box-shadow: 0 0 3rem 2rem rgba(0, 0, 0, .6);
	border-radius: 1rem;
}

.carousel-item h3 .text-secondary {
	font-size: .8em;
}

@media(min-width: 1200px) {
	.carousel-item .row {
		min-height: 520px;
	}
}

@media(min-width: 1400px) {
	.carousel-item .row {
		min-height: 450px;
	}
}

/* modal header */

.text-bg-dark {
	background-color: #101010 !important;
}

.modal-title {
	font-size: .875rem;
	border-bottom: 0 !important;
}

.bg-gradient-blue {
	background: linear-gradient(#00102d,#002855);
}

.bg-blue {
	background: #002855;
}

.text-shadow {
	text-shadow: 0 1px 5px rgba(0,0,0,.8);
}

.text-tiller-bold,
.text-tiller-demi {
	font-family: "tiller", serif;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
}

.text-tiller-demi {
	font-weight: 600;
}

.modal-title {
	color: #fff;
}

.tan-line {
	border-bottom: 5px solid #d2be91;
	max-width: 100px;
	margin: 2rem auto;
}

.border-dashed {
	border: 1px dashed rgba(255, 255, 255, .25);
}

button.col-video {
	border: 0;
	background-color: transparent;
	text-align: left;
}

/* hubspot form */

.hbspt-form {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.hbspt-form fieldset {
	max-width: 100% !important;
}

.hbspt-form .actions {
	margin-top: 1rem;
	text-align: center;
}

.hbspt-form ul.no-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hbspt-form .input {
	margin-top: .5rem;
	margin-right: 0 !important;
}

.hbspt-form .form-columns-3 .hs-form-field {
	width: 100% !important;
	padding-right: 1.5rem;
}

.hbspt-form .form-columns-3 .hs-form-field:nth-child(2),
.hbspt-form .form-columns-3 .hs-form-field:nth-child(3) {
	width: 50% !important
}

.hbspt-form .form-columns-3 .hs-form-field:first-child,
.hbspt-form .form-columns-3 .hs-form-field:last-child {
	padding-right: 0;
}

@media(max-width: 767px) {
	.hbspt-form .form-columns-3 .hs-form-field:nth-child(2),
	.hbspt-form .form-columns-3 .hs-form-field:nth-child(3) {
		float: left !important;
	}
}

@media(min-width: 768px) {
	.hbspt-form .form-columns-3 .hs-form-field:first-child {
		padding-right: 1.5rem;
	}

	.hbspt-form .form-columns-3 .hs-form-field,
	.hbspt-form .form-columns-3 .hs-form-field:nth-child(2),
	.hbspt-form .form-columns-3 .hs-form-field:nth-child(3) {
		width: calc(100% / 3) !important;
	}
}

.hbspt-form .hs-input {
	display: block;
	width: 100% !important;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	appearance: none;
	background-color: var(--bs-body-bg);
	background-clip: padding-box;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	transition: border-color .15s ease-in-out, box-shadow 15s ease-in-out;
	margin-bottom: 1rem;
}

.hbspt-form select.hs-input {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.hbspt-form .submitted-message {
	text-align: center;
	font-size: 1.25rem;
}

@media(max-width: 575px) {
	.row-videos {
		flex-direction: column-reverse;
	}
}

/* featured video series */

.featured-wrapper {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 2.5rem;
	box-sizing: border-box;
}

.featured {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
}

@media(max-width: 992px) {
	.featured {
		grid-template-columns: 1fr;
	}
}

.featured-left {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.small-label {
	color: var(--accent);
	font-weight: 700;
	letter-spacing: 1px;
	font-size: .875rem;
}

.section-title{
	font-family: "tiller", serif;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 3.5rem;
	line-height: 0.95;
	color: var(--navy);
	margin: 0;
}

.info-panel{
	position: relative;
	background: var(--navy);
	color: white;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	min-height: 420px;
	
}

.episode-tag{
	background:var(--accent);
	padding: .625rem 1.125rem .625rem 1.625rem;
	font-weight: 700;
	font-size: .875rem;
	letter-spacing: 1px;
	width: max-content;
	margin-left: -1.75rem;
	min-height: 41px;
	min-width: 135px;
	border: 0;
	color: #fff;
}

.episode-title{
	font-family: "tiller", serif;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--gold);
	font-size: 1.75rem;
	margin-top: .5rem;
}

.episode-author{
	font-weight: 700;
	color: white;
	opacity: 0.95;
	font-size: 1rem;
}

.author-title {
  font-size: 0.9rem;
  font-weight: 300;
  color: #dbeafe; 
}

.episode-desc{
  margin-top: .625rem;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 300;
}

.nav-links {
	display: flex;
	justify-content: space-between;
  	align-items: center;
  	margin-top: auto;
}

.nav-links button {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: 700;
  	color: var(--muted);
  	font-size: .875rem;
	background: transparent;
}

.nav-links button:hover {
	color: var(--gold);
}

.featured-right{
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
	background-color: var(--muted);
}

@media(max-width: 992px) {
	.featured-right {
		min-height: 300px;
	}
}

.featured-right img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: contrast(0.95) saturate(0.6);
}

.play-circle {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	position: absolute;
	width: 128px;
	height: 128px;
	transition: transform .18s ease;
}

@media(max-width: 992px) {
	.play-circle {
		width:96px;
		height:96px;
	}
}

.play-circle:hover {
	transform: scale(1.04);
}

/* featured content */

.featured-content {
	padding: 0 2.5rem 6.25rem;
	max-width: var(--max-width);
	margin: 0 auto;
}

.additional-content .container{
  --bs-gutter-x: 0;
}

@media(max-width: 1199px) {
	.additional-content .container {
		max-width: 100%;
	}
}

.featured-content h2 {
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--navy);
}

.featured-content .byline {
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	font-variation-settings:
    "wdth" 75;
	color: var(--accent);
}

.featured-content .btn-link {
	text-decoration: none;
	color: var(--navy);
	font-weight: bold;
	font-variation-settings:
    "wdth" 75;
}

.featured-content .btn-link:hover {
	color: var(--accent);
	text-decoration: underline;
}

.image-reel {
  position: relative;
  overflow: hidden;
  height: 460px; /* Fixed height for 9:16 ratio with w=360 */
}

@media(max-width: 992px) {
	.image-reel {
		height: 625px;
	}
}

@media(max-width: 767px) {
	.image-reel {
		height: 551px;
	}
}

.image-reel img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; 
}

.image-reel .play-circle {
  position: absolute;       
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  z-index: 2;               
}

.label-imprimis {
	position: absolute;
	margin-top: 1.25rem;
	padding: .25rem 1rem;
	background: var(--navy);
}

.label-imprimis img {
	height: 1.5rem;
}

.play-triangle {
	display: block;
	width: 0;
	height: 0;
	border-left: 28px solid rgba(239, 230, 207, .95);
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	margin: 0 auto;
}

@media(max-width: 992px) {
	.play-triangle {
		border-left-width:22px;
		border-top-width:14px;
		border-bottom-width:14px;
	}
}

.ratio-9x16 {
	--bs-aspect-ratio: 177%;
}

@media(max-width: 992px) {
	.imprimis-image {
		min-width: 100%;
	}
}