/* Includes
---------------------------------------- */
@import url('modern-reset.css');
@import url('fonts.css');
@import url('nt.css');


/* Basic
---------------------------------------- */
body {font: 400 14px 'Manrope', sans-serif;}
body, a {color: #000;}
b, strong {font-weight: 600;}
.width {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px;
}

h1 {font: 400 27px 'Source Sans 3', sans-serif;}
main h2 {font: 400 40px/44px 'Source Sans 3', sans-serif; margin: 0.5em 0;}
.front main h2 {margin: 0;}
h3 {font: 400 27px/32px 'Source Sans 3', sans-serif;}
p, ul, ol, table {margin: 1em 0;}

.cols-inn {margin-left: -15px; margin-right: -15px;}
.col-inn {margin-left: 15px; margin-right: 15px;}


/* Header
---------------------------------------- */
header {
	position: relative; z-index: 0;
	display: flex; flex-direction: column; 
	height: 218px;
	background:
		linear-gradient(#fff 0%, transparent 50%, #fff 100%),
		url(../img/cover.jpg) 50% 0 no-repeat;
	background-size: cover;
}
.front header {
	min-height: 80vh;
	background:
		linear-gradient(#fff 0%, transparent 74px 90%, #fff 100%),
		linear-gradient(transparent 0%, rgba(0, 0, 0, 0.3) 60%),
		url(../img/cover.jpg) 50% 50% no-repeat;
	background-size: cover;
}

header,
.menu {font: 400 22px 'Source Sans 3', sans-serif;}
header a,
.menu a {text-decoration: none; color: #000;}

.top {display: flex; justify-content: space-between;}

h1 {order: 0; flex: 2; margin: 16px 0 0; text-transform: uppercase; letter-spacing: 5%; text-align: center;}
h1 img {margin: 0 6px; vertical-align: -20%;}
h1 a:hover {color: #7A152B;}

header .menu {order: -1; flex: 1;}
.menu {margin: 0; padding: 21px 29px; text-transform: uppercase; font-size: 18px;}
.menu img {margin-right: 18px; vertical-align: -20%;}

.phone {order: 1; flex: 1; text-align: right; margin: 17px 22px; white-space: nowrap;}

aside {
	display: none;
	positi: ;on: fixed; left: 0; top: 0; z-index: 2;

	height: 100vh; min-width: 25%;
	background: rgba(255, 255, 255, 0.8);
}
aside:target {
	display: block;
}
aside nav {padding: 19px 29px; font: 400 24px/33px 'Manrope', sans-serif;}
aside nav .active {font-weight: 600;}
aside nav a {text-decoration: none;}
aside ul {margin: 23px 0 0; padding: 0;}
aside li {margin: 20px 0; padding: 0; list-style: none;}

header h2 {margin-top: auto; margin-bottom: 120px; padding-bottom: 30px; font: 400 41px/1.25em 'Manrope', sans-serif; text-align: center; color: #fff;}
.hanging-dash {display: inline-block; margin-right: -1em;}


/* Main
---------------------------------------- */
main {position: relative; z-index: 1;}

main section {margin: 50px 0px;}
section h2 {margin-bottom: 0.5em;}
.path {margin-left: 3px;}

article {font-size: 16px;}
article h2 {font-size: 44px; line-height: 48px;}
article h3 {font-size: 31px; line-height: 36px; margin: 1em 0 0.75em;}
article table {border-collapse: collapse;}
article th,
article td {border: 1px solid #999; padding: 0.75em 1em; vertical-align: top;}
article th {font-weight: 600; vertical-align: middle;}
article table p {margin: 0;}
article ul {padding-left: 1.2rem;}
article li {margin: 0.5em 0;}
article li ul {margin-top: 0.5em;}

.blocks {background: #f5f5f5; border-radius: 10px; min-height: 160px;}
.front .blocks {margin-top: -120px;}
.blocks .col {margin-top: 37px;}
.blocks .cols-inn {margin: 0;}
.blocks .col-inn {position: relative; margin-left: 20px; padding-left: 110px;}
.blocks .col:first-child .col-inn {margin-left: 35px;}
.blocks img {position: absolute; left: 0; top: 4px;}
.blocks h4 {margin-bottom: 1em; font: 500 16px 'Source Sans 3', sans-serif; text-transform: uppercase;}

.news ul,
.news li {list-style: none; padding: 0; margin: 0;}
.news .date {display: inline-block; margin-bottom: 0; padding: 11px 16px 9px; font: 400 14px 'Source Sans 3', sans-serif; text-transform: uppercase; background: #f5f5f5;}


.sections .col-inn {height: 379px; border-radius: 10px;}
.sections .col-inn a {
	padding: 20px 0 20px 20px; height: 100%; width: 100%;
	display: flex; flex-direction: column; justify-content: flex-end;
	font: 400 32px/36px 'Source Sans 3', sans-serif; color: #fff; text-decoration: none;
}
.section1 .col-inn {
	background:
		linear-gradient(rgba(30, 58, 95, 0.4), rgba(30, 58, 95, 0.4)),
		linear-gradient(transparent 60%, rgba(0, 0, 0, 0.3) 90%),
		url(../img/section1.jpg) 50% 50% no-repeat;
}
.section2 .col-inn {
	background:
		linear-gradient(rgba(75, 85, 99, 0.4), rgba(75, 85, 99, 0.4)),
		linear-gradient(transparent 60%, rgba(0, 0, 0, 0.4) 90%),
		url(../img/section2.jpg) 50% 50% no-repeat;
}
.section3 .col-inn {
	background:
		linear-gradient(rgba(122, 31, 61, 0.3), rgba(122, 31, 61, 0.3)),
		linear-gradient(transparent 60%, rgba(0, 0, 0, 0.3) 90%),
		url(../img/section3.jpg) 50% 50% no-repeat;
}

.services {padding: 75px 0 29px; background: #f5f5f5;}
.services img {float: left; margin-left: 15px;}
.services h3 {margin: 0;}
.services .cols-inn {margin: 0 -20px;}
.services .col-inn {padding: 0 15px 32px; margin-left: 110px;}


/* Footer
---------------------------------------- */
footer {overflow: hidden; background: #000;}
footer,
footer a,
footer a:hover {color: #fff;}

.notary {
	display: flex; align-items: center; height: 495px; font-size: 20px;
	background:
		linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 1) 100%),
		url(../img/blazer.jpg) no-repeat 50% 0; background-size: cover;
}
.notary .width {padding-top: 5em;}
.notary h2 {margin-bottom: 0.25em; font-size: 62px; letter-spacing: 6%;}

.bottom {display: flex; justify-content: space-between; padding-bottom: 60px; text-transform: uppercase;}
.bottom nav ul {display: flex; gap: 2em;}
.bottom nav ul,
.bottom nav li {padding: 0; list-style: none;}
.bottom .copy {margin-top: 2rem;}

/* Responsive mobile version */
@media (max-width: 970px) and (min-width: 0) {
	.width {padding: 0 16px;}

	.two-cols,
	.two-cols .col {width: 100%;}
	.two-cols .cols-inn {width: 100%;}

	.three-cols,
	.three-cols .col {width: 100%;}
	.three-cols .cols-inn {width: 100%;}

	.services .col {margin-bottom: 30px;}
	.services img {float: right; margin-left: 15px; margin-bottom: 15px;}

	.width {padding: 0 30px;}

	.front header {
		min-height: 90vh;
		background:
			linear-gradient(#fff 0%, transparent 200px 90%, #fff 100%),
			linear-gradient(transparent 0%, rgba(0, 0, 0, 0.3) 60%),
			url(../img/cover.jpg) 50% 50% no-repeat;
		background-size: cover;
	}
	header {
		height: 88px;
		background:
			linear-gradient(transparent 22px, #fff 100%),
			url(../img/cover.jpg) 50% 0 no-repeat;
		/* background-size: cover; */
	}

	.top {flex-flow: row wrap; align-items: stretch; gap: 12px;}
	h1 {flex-basis: 60%; order: 3; padding-top: 3px; font-size: 18px; letter-spacing: 0; text-align: left;}
	h1 img {vertical-align: middle;}
	.menu a span {display: none;}
	.menu img {margin-right: 0;}

	header .menu {order: 2; text-align: left; font-size: 18px; padding-right: 0;}
	.phone {display: none; order: 2; text-align: left;}

	aside {min-width: 100%; width: 100%; background: rgba(255, 255, 255, 0.9);}
	aside nav {padding-top: 0;}
	aside ul {margin: 18px 0 0;}
	aside li {margin: 9px 0;}

	header h2 {margin-bottom: 80px; font-size: 29px;}

	article h2 {font-size: 36px; line-height: 1.1;}
	article h3 {font-size: 28px; line-height: 1.2;}

	article th, article td {padding: 0.65em 0.8em;}

	.front .blocks {margin-top: -80px;}
	.blocks .cols-inn {display: flex; flex-wrap: wrap; padding: 20px 0}
	.blocks .col {width: 100%; margin: 0; padding: 15px 30px;}
	.blocks .col p:last-child {margin-bottom: 0;}
	.blocks .col .col-inn {margin: 0;}
	.blocks .col:first-child .col-inn {margin-left: 0;}

	.sections .col-inn {height: 200px;}
	.sections .cols-inn {display: flex; flex-wrap: wrap; gap: 20px; margin: 0;}
	.sections .col-inn {margin: 0;}

	.services {padding: 50px 0 20px;}
	.services .cols-inn {margin: 0;}
	.services .col-inn {padding: 0; margin-left: 0;}

	.notary h2 {font-size: 40px; line-height: 1.05;}

	.bottom {flex-direction: column; gap: 20px; padding-bottom: 40px;}
	.bottom nav ul {flex-wrap: wrap; gap: 1rem;}
	.bottom .text-right {text-align: left;}
}