@media (min-width: 768px) {

.index .hero-section .calc-header, .calc-body .more {display: none;}
#footer li a {max-width: 15em;}
.footer-copy {text-align: center;}
}

@media (min-width: 1025px) {
.site-nav {order: 2; flex: 1;}
	.site-nav .sub-menu-wrapper {
		position: absolute; top: 100%; left: 0; z-index: 800; 
		min-width: 300px; height: 0; visibility: hidden; opacity: 0; transform: scaleY(0); transform-origin: top center;
		box-shadow: 0 30px 30px -20px rgba(0,0,0,.6);
	}
#header .meta {order: 3; min-width: 25%;}	
		#header .meta svg {margin-right: .5em;}

.section-how .steps ol {grid-template-columns: 1fr 1fr;}

.calc-values .more {
	grid-row-start: 2; grid-column-start: 1;
	grid-row-end: 3; grid-column-end: 3;
}

.index .hero-section:before {
	content: ""; position: absolute; right: 0; bottom: 0; left: 0; z-index: 2;
	display: block; height: 150px;
	background: url(hero-anm.svg) repeat-x 100% 50%; background-size: contain;
	animation: hdr-bgr-anm 20s linear infinite; opacity: .1; pointer-events: none;
}

@keyframes hdr-bgr-anm { 
	to {background-position: 0 50%;}
}

}

@media (min-width: 1281px) {
.index .hero-section .col-info {padding: 3.8em 0 0 7.5em;}
}
@media (min-width: 1601px) {
.index .hero-section .col-calc {padding: calc(1.5em + 1%) var(--wrapper-padding);}
}

@media (max-width: 1600px) {
:root {--wrapper-padding: 48px;}
}

@media (max-width: 1366px) {
:root {--item-gap: 20px; --box-padding: 2rem;}
.intro .container-fluid {padding-right: 0;}
}

@media (max-width: 1280px) {
:root {--wrapper-padding: 24px;}
.index .hero-section .container-fluid {padding: 0;}
}

@media (max-width: 1024px) {
#header .container-fluid {justify-content: space-between;}
.site-logo svg {width: 180px;}
#header .meta {margin-right: 4em;}
	#header .meta > div {height: 48px; margin: 0 .3em;}
	#header .meta .login {margin-right: .4em;}
		#header .meta a span {display: none;}
	
.nav-on {overflow: hidden;}
.nav-on .nav-wrapper {
	position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 100; 
	background: rgba(0,0,0,.6); box-shadow: inset 0 0 35vw rgba(0,0,0,.8);
}

#header .intro {margin-right: 48px;}

.site-nav {position: absolute; top: var(--wrapper-padding); right: var(--wrapper-padding);}

#site .nav-collapse {
	position: absolute; top: 0; right: 0; z-index: 901; text-decoration: none; background-color: var(--brand-color);
}
#site .nav-collapse, .nav-collapse span {display: block; width: 48px; height: 48px; padding: 0; border-radius: var(--rounded-l);}
.nav-collapse:before, .nav-collapse:after, .nav-collapse span:before {
	content: ""; position: absolute; right: 12px; display: block; width: 24px; height: 3px;
	background-color: white; border-radius: 2px;
}
.nav-collapse:before {top: 15px;}

.nav-on #site .nav-collapse {background-color: white;}
.nav-on .nav-collapse:before, .nav-on .nav-collapse span:before, .nav-on .nav-collapse:after {
	transform-origin: left; background-color: var(--brand-color);
}
.nav-on .nav-collapse:before {top: 14px; right: 8px; transform: rotate(45deg);}
.nav-collapse span:before {top: 22px;}
.nav-on .nav-collapse span:before {opacity: 0;}
.nav-collapse:after {bottom: 16px;}
.nav-on .nav-collapse:after {bottom: 14px; right: 8px; transform: rotate(-45deg);}

	.nav-wrapper .inner-nav-wrapper {
		min-height: 0; position: fixed; top: 50px; right: -100%; bottom: 0; z-index: 901; 
		width: 90%; max-width: 340px; padding: 5vh var(--wrapper-padding); overflow-y: auto; 
		/*background-color: var(--brand-color-2);*/ background: linear-gradient(to bottom, var(--brand-color-2) 0%,rgba(0,0,0,1) 100%);
		border-top-left-radius: var(--rounded-l);
		box-shadow: 0 0 15px rgba(0,0,0,.4); transition-delay: 0.1s;
	}
	.nav-on .nav-wrapper .inner-nav-wrapper {right: 0;}
		.main-nav .nav {flex-direction: column; flex: 1; padding: 0; font-size: 1em;}
			.main-nav .nav > li {margin-bottom: .3em;}
				.site-nav .sub-menu-wrapper {
					position: relative; top: 0; left: 0; opacity: 1; transform: scale(1); visibility: visible; 
					margin: 1.5em 0; padding: 2em 2em 1em; 
				}
					.site-nav .sub-menu li {text-align: center;}

.index .hero-section .container-fluid > div {flex: auto;}
	.index .hero-section .col-info .inner {background-image: none;}

.footer-logo {flex: auto; width: 100%; margin-bottom: 3em;}
#footer .container-fluid > .d-flex .col:not(:last-child) {padding-right: 1em;}
}

@media (max-width: 767px) {
.site-logo {margin-top: .7rem;}
	.site-logo svg {width: 150px;}
.site-nav {top: 20px; right: 20px;}

.index .hero-section {margin-bottom: 2em; padding-top: 6em;}
	.hero-section .nav-tabs .nav-link {padding: .7em 1.5em; font-size: .9em; border-radius: var(--rounded-l) var(--rounded-l) 0 0;}
	.hero-section .nav-tabs .nav-link span {display: block; margin-bottom: 0;}
	
	.nav-tab-content-wrapper {border-top-right-radius: 0;}
	
	.calc-values > section {font-size: .85em;}
	.calc-values {gap: .5em;}
	.calc-body, .apply-main .apply-steps {margin-right: 0;}

#footer .container-fluid > .d-flex .col {flex: auto; min-width: 50%; margin-bottom: 2em;}
}

@media (max-width: 575px) {
.nav-tab-content-wrapper .item-wrapper {background-size: 150%;}
.index .hero-section .col-calc, .inside .col-calc { 
	background: linear-gradient(to bottom, transparent 80vw, white 90vw), linear-gradient(to right, white 40%, hsla(0,0%,100%,.7) 80%);
}
.forms-wrapper .col-sm-6 {flex: 0 0 auto; width: 50%;}
}

@media (max-width: 480px) {
#header .meta > div {margin: 0 .2em;}
#header .meta .stores {display: none;}

:root .calc-wrapper > .inner {width: 100%;}

.hero-section .btn-more {display: block;}

.inside .calc-wrapper {padding: 1.7em;}

}