html{scroll-behavior: smooth;scroll-padding-top: 100px;}
body {
    background: #FFF;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    min-height: 100vh;
    color: #3f3f3f;
    font-size: 22px;
}
* {
	position: relative;
	font-family: 'Open Sans', sans-serif;
	box-sizing: border-box;

}
h1,h2,h3,h4,h5,h6,nav *{ font-family: 'Libre Baskerville', serif; line-height: 1em; }
h2{
    font-weight: 500;
    font-size: 2em;
	margin: 0;
}
h1,h2.subtitle{
    font-weight: 500;
    font-size: 2.2em;
	width:100%;

}

a,label{ transition: all .3s ease; }
a { text-decoration:underline; color: #0072ff; }
a:hover { }
a h1,a h2,a h3,a h4,a h5,a h6{color:inherit;}
.clickable { cursor:pointer; display:block; }
.clearfix:before { content:" "; display:table; }
.clearfix:after { content:" "; display:table; clear:both; }
.wrapper { 
	max-width:1300px;
	padding:0 4rem;
	margin:0px auto; 
	position: relative;
	width:100%;
}
@media (max-width:960px) {
	.wrapper{
		padding:0 2rem;
	}
}

header{
    position: fixed;
    top: 0;
    z-index: 10;
    padding: 2.5rem 0;
	transition: all .7s ease;
	width: 100%;
	background: rgb(255 255 255 / 0%);

}
/*html:not([style='--scroll-pos: 0px;'])*/
header.sticky {
	padding: 1rem 0;
	background: rgb(255 255 255 / 80%)
}
		
header .wrapper{ 
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

header .logo{
	display:inline-block;
    overflow: hidden;
	height:150px; 
	transition: all 1s ease;
}
header .logo>img{ display: block; width:auto; height: 150px; transition: all .8s ease; }
header.sticky .logo{ height:48px; }
header.sticky .logo>img{ height:70px; }

header .call{
    color: #4d4d4d;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: bold;
    display: flex;
    align-items: center;
}
header.sticky .call{ font-size:1rem; }

header .call:before{
    content: '\f879';
	color: #40513a;
    font-family: "Font Awesome 5 Pro";
    font-weight: bold;
    font-size: 1.5rem;
    border: 4px solid #40513a;
    border-radius: 50%;
    padding: 0.7rem;
    margin-right: 1rem;
    position: relative;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
	transition: all .4s ease;
}
header.sticky .call:before{ padding: .5rem; }

header .call:hover:before{ animation: 1s ease 0s 1 flipInY; color:#d3a346; border-color:#d3a346;}
header .call:hover{ color: #40513a; animation: .3s ease 0s 1 pulse !important; }

@media (max-width:768px) {
	body {font-size: 20px;}

	header .logo>img{ height:100px; }
	header.sticky .logo{ height:40px;}
	header.sticky .logo>img{ height:60px; }

	header .call{font-size: 1rem;}
	header.sticky .call{  }

	header .call:before{ padding: .5rem; }
	header.sticky .call:before{ padding:.35rem; }

}




main{ width:100%; }

.top-content{
	padding: 16rem 0 0 0;
	background-size: unset;
	background-position: center top;
	background-repeat: repeat-x;
	overflow: hidden;
	display: flex;
	flex-flow: column;
}
.top-content a{
	color:#40513a;
}
.top-content a.button{
	background: #40513a;
	color: #fff;
	display: inline-block;
	padding: 1rem 3rem;
	border-radius: 4px;
	text-decoration: none;
	transition: all .2s ease;
}
.top-content a.button:hover{
	background-color:#d3a346;
	color:#000;
}
.top-content>article{
	flex-grow: 1;
}

.top-content .statue{ 
	display: block;
	background: url(/templates/client/images/statue.png) no-repeat bottom right;
	position: absolute;
	background-size: contain;
	max-width: 1300px;
    width: 40%;
    min-width: 430px;
	height: 100vh;
	min-height: 930px;
	max-height: 1200px;
	pointer-events: none;

}

.top-content:before{ /*header gradient*/
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	height: 1024px;
	background: none;
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.top-content:after{ /*green lip*/
	content: '';
	display: block;
	position: relative;
	width: 100%;
	background: #40513a;
	clip-path: polygon(80% 5%, 100% 60%, 100% 100%, 0% 100%,-5% 100%, 70% 5%, 73% 1%, 75% 0, 77% 1%);
	margin-bottom: -1px;
	max-height: 200px;
	min-height: 100px;
	height: 10vw;
	pointer-events: none;
}


.top-content .block-content:before{
	content: '';
	background: rgb(255 255 255 / 80%);
	width: 50vw;
	height: 100%;
	display: block;
	position: absolute;
	right: 100%;
	top: 0;
	pointer-events: none;
}
.top-content .block-content{
	background: rgb(255 255 255 / 80%);
	padding: 2rem 2rem 2rem 0;
	width: 60%;
	border-radius: 0 10px 10px 0;
	box-shadow: #000 3px 3px 23px -21px;
}

@media (max-width:960px) {
	.top-content .statue{
    opacity: 0.2 !important;
    margin-right: -120px;
    scale: 1.2;
    background-size: cover;

	}
	.top-content .block-content{
		padding: 1.5rem;
		border-radius: 0;
		margin-left: -4rem;
		right: -2rem;
		position: relative;
		width: initial;
		max-width: none;
	}
	.top-content a.button{
		display: block;
		text-align: center;
	}
}

@media (max-width:768px) {
	.top-content .statue {
		margin-top: -210px;
		opacity: 0.2 !important;
		margin-right: -120px;
		background-size: 100%;
		top:0;
		margin-top:100px !important;
	}
}

.attorneys{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 60%;
	column-gap: 2rem;
	padding: 2rem 0rem 1rem 0rem;
}
.attorneys a{
	display: block;
	text-align: center;
	border-radius: 6px;
	text-decoration: none;
}
.attorneys img{ 
    transition: all .3s ease;
    display: inline-block;
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 50%;
    border: 4px solid #40513a;
    box-shadow: #000 3px 3px 30px -14px;	
}
.attorneys h3{ 
	display: block;
	transition: all .3s ease;
	background: rgb(211 163 70 / 0%);
    padding: 1rem 2rem;
    border-radius: 6px;
    margin-top: 1rem;
}
.attorneys h3:before {
    content: '';
    display: block;
    height: 4px;
    background: #e9e9e9;
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 0;
	transition: all .3s ease;

}
.attorneys a h3 strong{
    color: #958146;
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
	font-family: inherit;
	line-height: 1rem;
}
.attorneys a:hover{}
.attorneys a:hover img{ border-color:#d3a346;}
.attorneys a:hover h3{
	animation: .3s ease 0s 1 pulse;
	background: rgb(211 163 70 / 30%);
}
.attorneys a:hover h3:before{
	background: #d3a346;
    left: 0;
    right: 0;
    border-radius: 0 0 10px 10px;
    height: 5px;
}
.attorneys h3 strong:hover{ }

@media (max-width:1200px) {
	.attorneys{
		font-size: 1rem;
		column-gap: 1rem;
	}
}
@media (max-width:1024px) {
	.attorneys{
		font-size: .8rem;
	}
	.attorneys img{ width: 150px; height: 150px;}
}
@media (max-width:960px) {
	.attorneys{
		width:100%;
		font-size: 1.2rem;
		column-gap: 2rem;
	}
	.attorneys img{ width: 200px; height: 200px;}
}

.bottom-content{
	background: #40513a;
	color:#fff;
	background-repeat: no-repeat;
	background-position: bottom right;
	margin-top: -1px;
}

.bottom-content a{
	color:#d3a346; 
}
.bottom-content article{ margin-bottom:6rem; }
.bottom-content article>h3:first-child{ margin-top:0;}




.block-disclaimer{
	display: flex;
	flex-wrap: wrap;
}
.block-disclaimer h3{
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	text-indent: -9999px;
}
.blur1{
	background: url(/templates/client/images/icon-caution.png) no-repeat center;
	background-size: 70%;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top:0;
	opacity: 0.1;
	pointer-events: none;
}
.blur2{
	background: url(/templates/client/images/icon-caution.png) no-repeat center left;
	background-size: 30%;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top:0;
	opacity: 0.3;
	pointer-events: none;
	
}
.block-disclaimer .content{
	width: 60%;
	margin: 0 0 0 auto;

}


.block-content ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.block-content ul li{
    margin: 1rem 0;
    border-radius: 10px;
    padding: 1rem 1rem 1rem 3rem;
	transition: background-color .8s ease;
}
.block-content ul li:before{
content: '\f111';
    font-family: "Font Awesome 5 Pro";
    color: #958146;
    font-weight: bold;
    position: absolute;
    left: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    line-height: 2rem;
}
.block-content ul li:hover{
	background: #2f402a;
}
.block-content ul li:hover:before{
	left: -1rem;
	font-size: 2rem;
}


/*
.block-disclaimer ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.block-disclaimer ul li{
    margin: 1rem 0;
    border-radius: 10px;
    padding: 1rem 1rem 1rem 3rem;
	transition: background-color .8s ease;
}
.block-disclaimer ul li:before{
    content: '\f111';
    font-family: "Font Awesome 5 Pro";
    color: #958146;
    font-weight: bold;
    position: absolute;
    left: 0.5rem;
    top: 1rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.block-disclaimer ul li:hover{
	background: #2f402a;
}
.block-disclaimer ul li:hover:before{
	left: -1rem;
	font-size: 2rem;
}

*/
@media (max-width:768px) {
	.block-disclaimer .blur1{ background-size: contain; margin-top:-25px; }
	.block-disclaimer h3{width:100%; height: 300px;}
	.block-disclaimer .content{width: 100%;}
}




.block-practice-areas{}
.block-practice-areas h3{
	font-size: 3.2rem;
	font-weight: normal;
	margin: 0 0 0 4vw;
	line-height: 2.1rem;
}
.block-practice-areas .content{}
.block-practice-areas .content>div{
	display: flex;
	background: #fff;
	color: #000;
	border-radius: 6px;
	flex-wrap: wrap;
	justify-content: space-evenly;
	text-align: center;
}
.block-practice-areas .content figure{
    padding: 1rem;
    margin: 1rem 0;
    transition: all .3s ease;
}
.block-practice-areas .content figure:before{
	transition: all .3s ease;
    content: '';
    position: absolute;
    background: #e9e9e9;
    border-radius: 50%;
    width: 10rem;
    height: 10rem;
    margin-left: -5rem;
    top: 0.5rem;
	left: 50%;
	pointer-events: none;
	opacity: 0;
}
.block-practice-areas .content figure>img{
	display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem auto;
	transition: all .3s ease;
}
.block-practice-areas .content figure>figcaption{}
.block-practice-areas .content figure:hover{ margin-top: 1.5rem;}
.block-practice-areas .content figure:hover:before{
    width: 8rem;
    height: 8rem;
    margin-left: -4rem;
	top: -0.2rem;
	opacity: 1;
}
.block-practice-areas .content figure:hover>img{
    margin: 0 auto 0rem auto;
}
.block-practice-areas .content figure:hover>figcaption{}
@media (max-width:860px) {
.block-practice-areas .content figure{ margin: 1rem; }
}
@media (max-width:768px) {
	.block-practice-areas h3{
		font-size: 2.6rem;
		line-height: 1.7rem;
		margin: 0;
		text-align: center;
	}
}
@media (max-width:512px) {

	.block-practice-areas .content figure{ display: block; width: 100%;}
}



footer{ color:#acb8a8; font-size: 1.2rem; }
footer strong{ color:#fff; }
footer .content{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	column-gap: 1rem;
}

footer .content>*{}
footer .content>*:first-child{ width: 20%; }
footer .content>*:first-child img{
	display: block;
    width: 100%;
    height: auto;
	max-width: 210px;
}
footer .copyright{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    padding: 1rem 0;
    opacity: 0.8;
}
footer .copyright>*{}
@media (max-width:960px) {
	 footer .content>*{flex-grow: 1; width: 45%; }
	 footer .content>*:nth-child(even){text-align:right; }
}
@media (max-width:512px) {
	footer .content>*:first-child>img,footer, footer .content>*,footer .copyright{ margin: 1rem auto 0 auto; text-align: center !important; justify-content: center; width: 100%; }
	.bottom-content{ background-position:bottom center; }
	footer .content{margin-bottom:4em;}
}