.padding-bottom {padding: 0 0 4rem 0;}
.padding-top {padding: 4rem 0 0 0;}
.padding-all {padding: 4rem 12rem;}
.padding-sides {padding: 0 12rem;}
.padding-top-bottom {padding: 4rem 0;}
.padding-bottom-sides {padding: 0 12rem 4rem 12rem;}
.padding-top-sides {padding: 4rem 12rem 0 12rem;}
.padding-start-all {
	padding: 8rem 12rem 4rem 12rem;
}
.padding-start-topbottom {
	padding: 8rem 0rem 4rem 0rem;
}

@media only screen and (max-width: 900px) {
	.padding-all {
		padding: 4rem 4rem;
	}
	.padding-bottom-sides {
    	padding: 0 4rem 4rem 4rem;
	}
	.padding-top-sides {padding: 4rem 4rem 0 4rem;}
	.padding-sides {padding: 0 4rem;}
}
@media only screen and (max-width: 600px) {
	.padding-all {
		padding: 4rem 2rem;
	}
	.padding-bottom-sides {
		padding: 0 2rem 4rem 2rem;
	}
	.padding-top-sides {padding: 4rem 2rem 0 2rem;}
	.padding-sides {padding: 0 2rem;}
}

.bg-light-beige {background: var(--light-beige);}
.bg-light-grey {background: var(--light-grey);}
.bg-dark-beige {background: var(--beige);}
.bg-white {background: var(--white);}

/**-----------------------------
	Hero Component
------------------------------*/
#hero_component {
	width: 100%;
	margin: auto; 
	display: block;
	height: 60vh;
	position: relative;
	background-size: cover !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	z-index: 1;
}
@media only screen and (max-width: 900px) {
	height: 500px;
}

#hero_component .text-overlay {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 4rem;
	width: 100%;
	padding: 0rem 4rem;
	margin: auto;
	text-align: center;
	z-index: 2;
}

#hero_component .text-overlay h1,
#hero_component .text-overlay p {
	color: var(--white);
}
#hero_component .text-overlay h1 {
	font-size: var(--heading);
	font-family:"nyt-cheltenham";
	font-weight: 400;
	font-style: normal;
}

@media only screen and (max-width: 820px) {
	#hero_component .text-overlay {
		bottom: 2rem;
	}
}

@media only screen and (max-width: 600px) {
	#hero_component .text-overlay {
		padding: 0rem 2rem;
	}
}

/**-----------------------------
	Introduction Component
------------------------------*/
#intro_component {
	width: 100%; 
	margin: auto;
	display: block;
	text-align: center;
	padding: 4rem 12rem;
}
@media only screen and (max-width: 900px) {
	#intro_component {
		padding: 4rem 4rem;
	}
}
@media only screen and (max-width: 600px) {
	#intro_component {
		padding: 4rem 2rem;
	}
}
#intro_component p {
	color: var(--charcoal);
	font-size: var(--med-body);
	font-family:"nyt-cheltenham";
	font-weight: 400;
	line-height: 1.7;
	font-style: italic;
}

/**-----------------------------
	Text Block Component
------------------------------*/
#text_block_component {
	width: 100%; 
	margin: auto;
	display: block;
	text-align: center;
}
.text-block-container {
	padding: 0rem 12rem;
}
@media only screen and (max-width: 900px) {
	.text-block-container {
		padding: 0rem 4rem;
	}
}
@media only screen and (max-width: 600px) {
	.text-block-container {
		padding: 0rem 0rem;
	}
}

#media_and_text_component .secondary-btn {
	margin: 2rem 0 0 0;
}

#media_and_text_component .image-text-overlay .text-vertically-center h2,
#media_and_text_component .text-container h2,
#media_and_text_component .image-text-overlay .text-vertically-center h3,
#media_and_text_component .text-container h3,
#media_and_text_component .image-text-overlay .text-vertically-center h4,
#media_and_text_component .text-container h4,
#text_block_component h2,
#text_block_component h3, 
#text_block_component h4 {
	font-family:"nyt-cheltenham";
	font-weight: 400;
	font-style: normal;
	color: var(--charcoal);
}

#media_and_text_component .image-text-overlay .text-vertically-center h2,
#media_and_text_component .text-container h2,
#text_block_component h2 {
	font-size: clamp(1.6rem, 1.6vw, 3.2rem); 
	padding: 0 0 1rem 0;
}

#media_and_text_component .image-text-overlay .text-vertically-center h3,
#media_and_text_component .text-container h3,
#text_block_component h3 {font-size: 1.3rem;}

#media_and_text_component .image-text-overlay .text-vertically-center h4,
#media_and_text_component .text-container h4,
#text_block_component h4 {font-size: 1.1rem;}

#text_blockquote_component .text-blockquote-container p,
#media_and_text_component .image-text-overlay .text-vertically-center p,
#media_and_text_component .text-container p,
#text_block_component p {
	font-family: "nyt-cheltenham";
    font-size: var(--body);
    line-height: 1.5em;
    font-weight: 400;
    color: var(--charcoal);
}

#text_block_component p strong,
#text_block_component p b {
	font-weight: bolder;
}

#text_blockquote_component .text-blockquote-container p a,
#media_and_text_component .text-container p a,
#text_block_component p a,
#text_block_component p a:visited,
#text_block_component p a:focus {
	color: var(--copper);
}

/**-----------------------------
	Text & Blockquote Component
------------------------------*/
#text_blockquote_component {
	width: 100%;
	margin: auto;
	display: inline-block;
	text-align: center;
	position: relative;
}

#text_blockquote_component .flex-container {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 0 10rem;
}
#text_blockquote_component .flex-container.reverse {
	flex-direction: row-reverse;
}
#text_blockquote_component .text-blockquote-container {
	width: 60%;
}

#text_blockquote_component .blockquote-container {
	width: 40%;
}

#text_blockquote_component .blockquote-container h3{
	color: var(--charcoal);
	font-family: "nyt-cheltenham";
	font-weight: 400;
	font-size: var(--med-body);
	line-height: 1.5;
	text-align: left;
}

#text_blockquote_component .blockquote-container p {
	font-family: trade-gothic-next-condensed, sans-serif;
	font-size: var(--small-body);
    text-transform: uppercase;
    letter-spacing: 0.17em;
    padding: 0.5rem 0 0 0;
    color: var(--charcoal);
    text-align: left;
}

#text_blockquote_component .blockquote-right {padding: 0 0rem 0 4rem;}
#text_blockquote_component .blockquote-left {padding: 0 4rem 0 0rem;}

@media only screen and (max-width: 900px){
	#text_blockquote_component .flex-container {padding: 0 4rem;}
	
	#text_blockquote_component .flex-container.reverse {flex-direction: column-reverse;}
	
	#text_blockquote_component .text-blockquote-container,
	#text_blockquote_component .blockquote-container {
		width: 100%;
	}
	
	#text_blockquote_component .blockquote-right {padding: 2rem 0rem 0 0;}
	#text_blockquote_component .blockquote-left {padding: 0rem 0 2rem 0;}
}
/**-----------------------------
	Media Component
------------------------------*/
#media_component {
	width: 100%;
	margin: auto;
	display: inline-block;
	text-align: center;
	position: relative;
}

#media_component .image-component {
	width: 100%;
	margin: auto;
	max-width: 100%;
}

#media_component .text-caption {
	width: 100%;
	margin: auto;
	display: block;
	font-family: "nyt-cheltenham";
    font-size: var(--body);
    line-height: 1.5em;
    font-style: italic;
    font-weight: 400;
    color: var(--charcoal);
    opacity: 0.8;
    text-align: left;
}

#media_component.padding-top .text-caption,
#media_component.padding-bottom .text-caption,
#media_component.padding-none .text-caption{padding: 0.5rem 2rem !important;}

#media_component.padding-sides .text-caption,
#media_component.padding-all .text-caption,
#media_component.padding-top-sides .text-caption,
#media_component.padding-bottom-sides .text-caption {padding: 0.5rem 0rem !important;}

#media_component .media-video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

#media_component .media-video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#media_component .media-slider {
	list-style: none;
	width: 100%;
	margin: auto; 
	display: inline-block;
}

/**-----------------------------
	Media & Text Component
------------------------------*/
#media_and_text_component {
	width: 100%;
	margin: auto;
	display: inline-block;
}

#media_and_text_component .image-text-overlay {
	position: relative;
	padding: 4rem;
	background-size: cover !important;
	-webkit-background-size: cover !important;
	-o-background-size: cover !important;
	-moz-background-size: cover !important;
	z-index: 1;
}

#media_and_text_component .video-text-overlay {
	z-index: 1;
}

#media_and_text_component .image-text-overlay .text-vertically-center h2,
#media_and_text_component .image-text-overlay .text-vertically-center h3,
#media_and_text_component .image-text-overlay .text-vertically-center h4,
#media_and_text_component .image-text-overlay .text-vertically-center p,
#media_and_text_component .image-text-overlay h2,
#media_and_text_component .image-text-overlay p {color: var(--white);}

#media_and_text_component .flex-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0rem 10rem;
}

#media_and_text_component .flex-container.reverse {
	flex-direction: row-reverse;
}

#media_and_text_component .flex-container .media-container,
#media_and_text_component .flex-container .text-container,
#media_and_text_component .flex-container .video-media-container {
	width: 50%;
}

#media_and_text_component .flex-container .video-media-container {
	position: relative;
}

#media_and_text_component .flex-container .video-media-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.text-container.text-left {padding: 0 4rem 0 0rem;}
.text-container.text-right {padding: 0 0rem 0 4rem;}

#media_and_text_component .image-text-overlay .text-container {
	width: 40%;
	padding: 0 0 6rem 0;
	display: flex;
	flex-direction: column;
	z-index: 2;
}

#media_and_text_component .image-text-overlay .text-container.text-top-right {
	justify-content: flex-end;
	margin-left: 60%;
}

#media_and_text_component .image-text-overlay .text-container.text-top-left {
	justify-content: left;
	margin-right: 60%;
}

#media_and_text_component .image-text-overlay .text-vertically-center {
	width: 100%;
	max-width: 60%;
	margin: auto;
	display: block;
	text-align: center;
	padding: 4rem 0;
	z-index: 2;
}
@media only screen and (max-width: 900px){
	#media_and_text_component .flex-container{
		padding: 0rem 4rem;
	}
	#media_and_text_component .flex-container .media-container, 
	#media_and_text_component .flex-container .video-media-container,
	#media_and_text_component .flex-container .text-container,
	#media_and_text_component .image-text-overlay .text-container {
    	width: 100%;
	}
	#media_and_text_component .image-text-overlay .text-vertically-center {
		max-width: 100%;
	}
	#media_and_text_component .image-text-overlay .text-container.text-top-right {
		justify-content: left;
		margin-left: 0;
	}
	#media_and_text_component .image-text-overlay .text-container.text-top-left {
		justify-content: left;
		margin-right: 0;
	}
	.text-container.text-right,
	.text-container.text-left {
    	padding: 1rem 0rem 0 0rem;
	}
}

/**-----------------------------
	You Might Also Like
------------------------------*/
.blog-main-container {
	width: 100%;
	margin: auto;
	display: inline-block;
	padding: 4rem 12rem;
}

.blog-main-container h4,
.blog-main-container h3 {
	font-family:"nyt-cheltenham";
	font-weight: 400;
	font-style: normal;
}

.blog-main-container h3 {
	text-align: center;
	color: var(--charcoal);
	font-size: var(--small-heading);
}

.blog-main-container h4 {
	text-align: left;
	color: var(--charcoal);
	font-size: var(--body);
}

.blog-main-container h4 a {
	text-decoration: none;
	transition: 0.3s ease all;
	color: var(--charcoal);
}

.blog-main-container h4 a:hover {
	color: var(--copper);
}

.blog-container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 2rem 0 0 0;
	flex-wrap: wrap;
}

.article-container {
	width: 31.33%;
	margin: 1%;
}

.article-container p {
	font-family: trade-gothic-next-condensed, sans-serif;
	color: var(--charcoal);
	font-size: var(--small-body);
}

@media only screen and (max-width: 900px){
	.blog-main-container {padding: 4rem 4rem;}
	.article-container {
		width: 48%;
		margin: 1% 1% 1rem 1%;
	}
}
@media only screen and (max-width: 600px){
	.blog-main-container {padding: 4rem 2rem;}
	.article-container {
		width: 98%;
		margin: 1% 1% 1rem 1%;
	}
}