/*
--------------------------------
Theme Name:	Katherine Axel
Author: Mat Martin Studio
Sheet: Theme Responsiveness
--------------------------------
*/


/*Pointer Based Queries*/

@media (pointer:coarse)  {

}

/*Orientation Based Queries*/

@media screen and (orientation: landscape) {

}

@media screen and (orientation: portrait) {

}

/*Width Based Queries*/

@media only screen and (max-width: 1540px) {

	ol.staggered-list li {
		font-size: 3.2vw;
	}
}

@media only screen and (max-width: 1280px) {

	.topbar .main-nav-wrap {
		padding-right: 2rem;
	}

	.topbar .main-nav-wrap ul.main-nav li {
		width: auto;
	}

	.topbar .main-nav-wrap ul.main-nav li:not(:first-of-type) {
		padding-left: 3rem;
	}
}

@media only screen and (max-width: 1210px) {

	ol.staggered-list li {
		font-size: 3.8vw;
	}
}

@media only screen and (max-width: 1100px) {

	.ca#top {
		min-height: unset;
		padding-bottom: 1rem;
	}

	.headline-wrap {
		width: 720px;
	}

	.headline-wrap h2.headline {
		font-size: var(--mms-font-size-xl);
	}

	.headline-wrap h2.headline span.headline-span:not(:last-of-type) {
		padding-left: 214px;
	}

	.lander-copy-left {
		top: .75rem;
	}

	.lander-copy-right {
		margin-top: -1.5rem;
	}

	.lander-copy-left p, .lander-copy-right p {
		font-size: var(--mms-font-size-body);
	}

	ol.staggered-list li {
		font-size: var(--mms-font-size-h2);
	}

	ol.staggered-list li span.marker {
		font-size: var(--mms-font-size-h4);
	}
}

@media only screen and (max-width: 1060px) {

	.three-col-section,
	.list-tile,
	.two-col-section.right-col,
	.two-col-section.left-col {
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}

	.three-col-section.intro-call .tc-col:first-of-type,
	.two-col-section .tc-double,
	.two-col-section.stickycol .tc-col.sticky .tc-col:first-of-type {
		-ms-grid-column: 1;
		    grid-column-start: 1;
		-ms-grid-column-span: col2-start;
		grid-column-end: span col2-start;
	}

	.two-col-section.stickycol .tc-col.sticky {
		padding: 0;
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		-ms-grid-rows: auto;
		grid-template-rows: auto;
		gap: 1rem;
	}

	.two-col-section .tc-col p, .three-col-section .tc-col p {
		max-width: unset;
		width: 50%;
	}

	.two-col-section .tc-twocol {
		-webkit-column-count: 1;
		   -moz-column-count: 1;
		        column-count: 1;
	}

	.scroll-card-wrap {
		padding: 0 1rem 0 0;
	}

	.two-col-section.stickycol.right-col .tc-double {
		order: 1;
	}

	.two-col-section.stickycol.left-col .tc-col.sticky,
	.two-col-section.stickycol.right-col .tc-col.sticky {
		padding: 0;
		order: 2;
		-ms-grid-column: 1;
				grid-column-start: 1;
		-ms-grid-column-span: col2-start;
		grid-column-end: span col2-start;
	}

	#about .two-col-section.stickycol.right-col.toppad {
		padding-top: 3rem;
	}

	ol.feature-list {
		padding-bottom: 3rem;
	}

	ol.feature-list li .fl-item-title {
		padding-bottom: .5rem;
		text-indent: 2.5rem;
	}

	ol.feature-list li::before {
		left: 0;
	}
}

@media only screen and (max-width: 960px) {

	.topbar .main-nav-wrap {
		display: none;
	}

	.res-trigger-wrap {
		display: block;
	}
}

@media only screen and (max-width: 840px) {

	.headline-wrap {
		width: 94vw;
	}

	.headline-wrap h2.headline {
		font-size: 10vw;
	}

	.headline-wrap h2.headline span.headline-span:not(:last-of-type) {
		padding-left: 27vw;
	}

	.lander-copy-left {
		top: 1vw;
		width: 25%;
	}

	.lander-copy-right {
		margin-top: -6.5vw;
		width: 44%;
/*		padding-right: 1rem;*/
	}

	.lander-copy-left p,
	.lander-copy-right p {
		font-size: var(--mms-font-size-base);
	}
}

@media only screen and (max-width: 800px) {

	.two-col-section.about-portrait {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.two-col-section.about-portrait .portrait {
		width: 100%;
		max-width: 320px;
		margin: 3rem 0 1rem;
	}
}

@media only screen and (max-width: 635px) {

	.lander-wrap {
		margin: 0 auto;
	}

	.lander-copy-left {
		position: relative;
		width: 100%;
		top: unset;
		padding: 3rem 0 1rem;
	}

	.lander-copy-right {
		width: 100%;
		margin: unset;
		padding: 0;
	}

	.lander-wrap .lander-copy-right .btn {
		margin-top: 2rem;
	}

	.headline-wrap h2.headline span.headline-span:not(:last-of-type) {
		padding-left: 0;
	}

	.headline-wrap h2.headline span.headline-span:last-of-type {
		text-align: right;
	}

	.headline-wrap h2.headline {
		font-size: 14vw;
		line-height: 1.125;
	}
}

@media only screen and (max-width: 575px) {

	.ca#intro .width {
		margin: 1rem auto 0;
	}

	.card .card-title {
		padding: 1rem;
	}

	.card .card-copy {
		padding: 2rem 1rem;
	}

	.testimonials-scroll .slick-slide p.h3size {
		text-indent: .75rem;
	}

	.parallax440 {
		height: 360px;
	}
}

@media only screen and (max-width: 520px) {

	.ca {
		padding-bottom: 1rem;
	}

	.width {
		margin: 2rem auto 0;
	}

	.three-col-section,
	.list-tile,
	.two-col-section.right-col,
	.two-col-section.left-col {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	.three-col-section {
		padding-top: 1rem;
	}

	.three-col-section.intro-call {
		gap: .5rem;
	}

	.three-col-section.intro-call .tc-col:first-of-type, .two-col-section .tc-double {
		-ms-grid-column: unset;
		    grid-column-start: unset;
		grid-column-end: unset;
	}

	.two-col-section .tc-col p, .three-col-section .tc-col p {
		width: 100%;
	}

	ol.staggered-list {
		margin: 0 0 1rem;
	}

	.list-tile {
		padding-top: 1rem;
	}

	.card .card-title {
		padding: 1rem 2rem;
	}

	.card .card-copy {
		padding: 2rem;
	}

	.testimonials-scroll .slick-slide {
		padding-right: 2rem;
	}

	.ca#contact {
		padding-bottom: 2.5rem;
	}

	.tc.contact-actions {
		padding: 0;
	}

	ol.staggered-list li {
		font-size: 7.2vw;
	}

	ol.staggered-list li span.marker {
		font-size: 4vw;
	}

	.two-col-section.stickycol .tc-col.sticky {
		gap: .5rem;
	}

	.two-col-section.stickycol .tc-col.sticky .tc-col {
		-ms-grid-column: 1;
		    grid-column-start: 1;
		-ms-grid-column-span: col2-start;
		grid-column-end: span col2-start;
	}

	.two-col-section.stickycol .tc-col.sticky .tc-col a.btn {
		margin: 0;
	}
}

@media only screen and (max-width: 400px) {

	.two-col-section.about-portrait .portrait {
		max-width: unset;
	}
}

/*Height Based Queries*/

@media only screen and (max-height: 600px) {

}