body {
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
}
.b { font-weight: bold; }


.header {
	padding: 0 45px;
	background-color: #212F3C;
	color: #FFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: solid 1px #A19F90;
}
.hamburger {
	display: none;
}
.toggler {
	display: none;
}
.header-mobile-menu {
	display: none;
}
.header-mobile-close {
	display: none;
}
.header-inner {
	position: relative;
	margin: 0 auto;
	height: 120px;
	width: 1600px;
}
.header-logo {
	position: absolute;
	left: 102px;
	top: 0px;
	width: 348px;
	height: 164px;
	display: block;
}
.header-nav a {
	color: #A19F90;
	text-decoration: none;
	display: block;
}
.header-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
	right: 130px;
	bottom: 20px;
}
.header-nav li {
	margin: 0px 2px;
	display: inline-block;
	padding: 7px;
}
.header-nav .active {
	border-bottom: solid 3px #A3C5CE;
}
.header-address {
	text-decoration: none;
	color: #A9C4CF;
	position: absolute;
	top: 29px;
	right: 345px;
}
.header-tel {
	font-size: 23px;
	color: #B43D35;
	font-weight: bold;
	position: absolute;
	right: 135px;
	top: 26px;
	text-decoration: none;
}
.header-pin {
	display: block;
	width: 21px;
	height: 29px;
	background-image: url(img/pin.png);
	position: absolute;
	top: 22px;
	right: 300px;
}







.hero {
	background-image: url("img/hero.png");
	background-size:     cover;                     
    background-repeat:   no-repeat;
    background-position: center center;   
	padding: 0;
	display: flex;
	justify-content: center;
	max-width: 1800px;
	height: 770px;
}
.hero-inner {
	width: 1600px;
	height: 770px;
}
.hero-write-up {
	background-color: rgba(200, 40, 40, 0.75);
	width: 700px;
	height: 770px;
}
.hero-write-up-column {
	width: 410px;
	height: 500px;
	margin: 0 auto;
}
.hero-heading {
 	font-family: "Noto Serif", sans-serif;
	font-style: normal;
	font-weight: 100;
	font-weight: normal;
	display: block;
	padding-top: 120px;
	font-size: 55px;
	color: #FFFFFF;
	line-height: 120%;
}
.hero p {
	color: #FFFFFF;
	font-size: 16px;
	padding: 10px 0;
	line-height: 150%;
}
.hero-button {
	text-transform: uppercase;
	font-size: 13px;
	background-color: #A3C5CE;
	color: #1E303C;
	text-decoration: none;
	padding: 9px 20px;
	border-radius: 25px;
	display: inline-block;
}
.hero-button-chevron {
	color: #BF392E;
}
.hero-consult {
	font-weight: bold;
}






.button {
	background-color: #3949ab;
	color: #FFF;
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 1.18rem;
	display: inline-block;
}

.heading {
	color: #B43D35;
	font-size: 2em;
}





.practices {
	background-image: url("img/areas-of-practice-bg.png") ;          
    background-repeat: no-repeat;
    background-position: center center;  
	padding: 0;
	height: 1030px;
}
.practices .heading {
	padding: 85px 0px 0px 20px;
	font-family: "Noto Serif", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 33px;
	text-align: center;
	display: block;
}
.practices-inner {
	width: 1303px;
	height: 1160px;
	display: block;
	position: relative;
	margin: 0 auto;
}
.practice-item h3 {
	position: absolute;
	color: #707070;
	font-size: 1.5rem;
	font-weight: normal;
	margin: 0;
}
.practice-item {
 	background-color: #FFFFFF;
	border-color: #AB9E7C;
	border-style: solid;
  	border-width: 10px 0px 0px 0px;
  	width: 393px;
  	height: 343px;
  	position: absolute;
}
.practice-item-inner {
	width: 393px;
  	height: 343px;
  	position: relative;
}
.practice-item * {
	color: #707070;
	text-align: center;
}
.practice-item h2 {
	display: block;
	padding: 10px 20px;
	font-size: 19px;
	text-transform: uppercase;
}
.practice-item p {
	display: block;
	font-size: 16px;
	padding: 0px 45px;
	line-height: 150%;
}
.practice-item .legal-elite {
	position: absolute;
	top: 276px;
	left: 0px;
	background-color: #AB9E7C;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 16px;
	padding: 7px 50px;
}
.practice-item-1 {top: 180px; left: 0px;}
.practice-item-2 {top: 180px; left: 450px;}
.practice-item-3 {top: 180px; left: 900px;}
.practice-item-4 {top: 590px; left: 230px;}
.practice-item-5 {top: 590px; left: 680px;}


.member-of {
	height: 350px;
	width: 1450px;
	margin: 0 auto;
 	display: table;
}
.member-of div {
	display: table-cell;
  	text-align: center;
  	vertical-align: middle;
}



.map {
	display: flex;
}
.map-google-map {
	flex: 0 0 736px;
	height: 876px;
}
.map-building {
	flex: 1;
	height: 876px;
	background-image: url("img/building.png");
	background-size: 100% 100%;
}



.contact {
	background-color: #F4F4F4;
	/*height: 950px;*/
	height: 400px;
}
.contact-inner {
	width: 1287px;
	margin: 0 auto;
	position: relative;
}

.contact-heading {
	margin: 0;
	font-style: italic;
	padding: 11px 63px 30px 30px;
	font-family: "Noto Serif", sans-serif;
	font-weight: 700;
	font-size: 33px;
	text-align: center;
	display: block;
	color: #B43D35;
	border-right: solid 2px #B43D35;
	position: absolute;
	top: 172px;
	left: 0;

}
.contact-address {
	font-size: 16px;
	font-weight: bold;
	color: #AB9E7C;
	margin: 0;
	display: block;
	position: absolute;
	top: 180px;
	left: 350px;
}
.contact-tel {
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	color: #AB9E7C;
	display: block;
	position: absolute;
	top: 180px;
	left: 750px;
}
.contact form {
	background-color: #FFF;
	border-top: solid 14px #AB9E7C;
	position: absolute;
	top: 315px;
	width: 1287px;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.contact .form-inner {
	padding: 40px 40px 30px 40px;
}
.contact input::placeholder, .contact textarea::placeholder {
	color: #CCC;
	font-style: italic;
}
.contact input, .contact textarea {
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	color: #CCC;
	border: solid 3px #CCC;
	padding: 15px 27px;
}
.contact .row {
	display: flex;
}
.contact .col-1 {
	flex: 50%;
	padding-bottom: 20px;
	padding-right: 15px;
}
.contact .col-2 {
	flex: 50%;
	padding-bottom: 20px;
}
.contact .full {
	flex: 100%; 
	padding-bottom: 20px;
}
.contact .submit-button-row {
	text-align: right;
}
.contact .contact-form-button {
	font-weight: normal;
	border: none;
	text-transform: uppercase;
	font-size: 13px;
	background-color: #C43730;
	color: #EEEEEE;
	text-decoration: none;
	padding: 9px 20px;
	border-radius: 25px;
	display: inline-block;
	width: 150px;

}






.footer {
	background-color: #212F3C; 
	color: #999;
	height: 201px;
}
.footer * {
	font-size: 13px;
	color: #F9FFFF ;
}
.footer-nav .active {
	color: #839BA7;
}
.footer-inner {
	width: 1310px;
	height: 201px;
	position: relative;
	margin: 0 auto;
}
.footer-nav {
	padding: 0px;
	margin: 0px;
	position: absolute;
	top: 90px;
	left: 0px;
}
.footer-nav a {
	text-decoration: none;
}
.footer-nav li {
	padding: 0px;
	margin: 0px;
	display: inline-block;
	padding-right: 20px;
}
.footer .copyright {
	position: absolute;
	top: 119px;
	left: 0px;
}
.footer .logo {
	height: 143px;
	width: 143px;
	background-image: url("img/footer-logo.png");
	position: absolute;
	right: 0px;
	top: 27px;
}
.footer .address {
	position: absolute;
	top: 112px;
	right: 160px;
	text-decoration: none;
}
.footer .tel {
	text-decoration: none;
	position: absolute;
	top: 60px;
	right: 198px;
	font-size: 24px;
	color: #B43D35;
	font-weight: bold;
	border-right: solid 3px #B43D35;
	padding: 9px 25px 2px 0;
}
.footer .pin {
	position: absolute;
	top: 67px;
	right: 160px;
	width: 21px;
	height: 29px;
	background-image: url("img/pin.png");
}



.header-title {
	background-image: url("img/hero.png");
	background-size:     cover;                     
    background-repeat:   no-repeat;
    background-position: center center;   
}
.header-title-inner {
	text-align: center;
	background-color: rgba(200, 40, 40, 0.75);
	font-family: "Noto Serif", sans-serif;
	font-style: normal;
	font-weight: 100;
	font-weight: normal;
	display: block;
	padding: 90px 0px 80px 0px;
	font-size: 55px;
	color: #FFFFFF;
}
.content-heading {
	font-family: "Noto Serif", sans-serif;
	font-size: 42px;
	color: #B43D35;
	border-bottom: solid 13px #AB9E7C;
	font-style: italic;
	font-weight: 900;
	padding: 90px 0 15px 0;
	margin: 0px auto;
	width: 1235px;
}
.content {
	width: 1235px;
	margin: 0 auto;
	margin-bottom: 100px;
	display: flex;
}
.content .about-col-1 {
	flex: 0 0 436px;
}
.content .about-col-2 {
	flex: 0 0 799px;
}
.content .about-col-1 img {
	margin: 70px 0 0 78px;
}
.content .about-col-1 .about-contact-info {
	margin: 28px 0 0 104px;
	font-size: 17px;
	font-weight: bold;
}
.content .about-col-2 h2 {
	margin: 90px 0 40px 0;
	font-family: "Noto Serif", sans-serif;
	color: #000000;
	font-size: 43px;
	font-weight: bold;
	font-style: italic;
}
.content .about-col-2 p {
	font-size: 16px;
	color: #888888;
	line-height: 135%;
}
.content .about-col-2 td {
	font-size: 16px;
	color: #888888;
	padding: 0 0 21px 0;
	line-height: 135%;
}
.content .about-col-2 td.label {
	text-transform: uppercase;
	font-weight: bold;
	width: 250px;
}


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

	 /*div 			{border: solid 1px red;}*/
	
	.header {padding: 0; height: 120px; position: fixed; width: 100%; z-index: 10000;}
	.header-inner {width: 100%; height: 120px;}
	.header-logo {left: 0px; top: -10px; width: 270px; height: 127px;}
	.header-logo img {width: 270px; height: 127px;}
	.header-pin {display: none;}
	.header-tel {display: none;}
	.header-address {display: none;} 
	.header-nav {right: 10px; top: 10px;}
	.header-nav li {display: block; text-align: right;}
	.header-title-inner {padding-top: 200px;}
	.header-nav .active {border: none;}

	.hero {height: 650px;}
	.hero-write-up 	{width: 100%; height: 650px;}
	.hero-inner 	{width: 100%; height: 650px;}
	.hero-write-up-column {width: auto; padding: 0 13px;padding-top: 50px;}

	.practices {height: auto; background-size: cover; padding-bottom:50px;}
	.practices-inner {width: auto; height: auto;}
	.practice-item {position: relative; margin: 20px 7px; width: auto;}
	.practice-item-inner {width: auto;}
	.practice-item-1 {left: auto; top: auto; }
	.practice-item-2 {left: auto; top: auto; }
	.practice-item-3 {left: auto; top: auto; }
	.practice-item-4 {left: auto; top: auto; }
	.practice-item-5 {left: auto; top: auto; }
	
	.member-of {width: 100%;}
	.member-of div {display: block; width: 100%; margin: 20px 0;}
	
	.map {clear: both; display: none;}
	
	.contact {height: auto; padding-bottom: 40px;}
	.contact-inner {width: 100%; height: auto;}
	.contact form {width: 95%; margin: 0 auto; position: relative; top: auto; left: auto;}
	.contact-tel {position: relative; top: auto; left: auto; margin-bottom: 10px; text-align: center;}
	.contact-address {position: relative; top: auto; left: auto; margin-bottom: 10px; text-align: center;}
	.contact-heading {padding: 30px; position: relative; top: auto; left: auto; border: none;}

	.footer-inner {width: 100%;}
	.footer-nav {display: none;}
	.footer .logo {right: 7px;}
	.footer .copyright { top: 120px; left: 10px;}
	.footer .address { top: 80px; left: 10px;}
	.footer .pin {display: none;}
	.footer .tel {border: none; top: 40px; left: 10px; right: auto;}

	.content-heading {width: 90%;}
	.content {display: block; width: auto;}
	.content .about-col-1 img {margin: 40px auto; display: block;}
	.content .about-col-1 {flex: none;}
	.content .about-col-2 h2 { margin: 20px auto; text-align: center; }
	.content .about-col-2 {flex: none;}
	.content .about-col-2 td.label {width: auto;}
	.content table {width: 98%; margin: 0 auto;}
	.content .about-col-2 td {padding: 0px 17px;}



	/* hamburger menu */

	.toggler{
	  /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING :  */
	  	display: block;
	    z-index:2;
	    height: 70px;
	    width: 70px;
	    position: absolute;
	    top: 20px;
	    right: 10px;
	    cursor: pointer;
	    opacity: 0;
	}

	.hamburger{
	    position: absolute;
	    top: 20px;
	    right: 10px;
	    height: 70px;
	    width: 70px;
	    padding: 0.6rem;
	  
	  /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */
	  
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}

	/* CREATING THE MIDDLE LINE OF THE HAMBURGER : */

	.hamburger > div{
	    position: relative;
	    top: 0;
	    left: 0;
	    background: #A19F90;
	    height: 2px;
	    width: 60%;
	    transition: all  0.4s ease;
	}

	/* CREATING THE TOP AND BOTTOM LINES : 
	TOP AT -10PX ABOVE THE MIDDLE ONE AND BOTTOM ONE IS 10PX BELOW THE MIDDLE: */

	.hamburger > div::before,
	.hamburger > div::after{
	    content: '';
	    position: absolute;
	    top: -10px;
	    background: #A19F90;
	    width: 100%;
	    height: 2px;
	    transition: all  0.4s ease;
	}

	.hamburger > div::after{
	    top: 10px;
	}

	/* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LAYER TO COMPLETE BLACK AND OPAQUE :  */

	.toggler:checked + .hamburger > div{
	    background: rgba(0,0,0,0);
	}

	.toggler:checked + .hamburger > div::before{
	    top: 0;
	    transform: rotate(45deg);
	    background: #A19F90;
	}

	/* AND ROTATING THE TOP AND BOTTOM LINES :  */

	.toggler:checked + .hamburger > div::after{
	    top: 0;
	    transform: rotate(135deg);
	    background: #A19F90;
	}


	/* MAIN MENU WITH THE WHITE BACKGROUND AND THE TEXT :  */

	.menu{
	    background: #212F3C;
	    width: 100%;
	    height: 0;
	  
	  /* APPLYING TRANSITION TO THE MENU :  */
	  
	    transition: all 0.4s ease;
	}

	/* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */

	.toggler:checked ~ .menu{
	    height: 100%;
	}


	/* STYLING THE LIST :  */

	.menu >  div > ul {
	    display: flex;
	    flex-direction: column;
	    position: fixed;
	    padding-left: 10px;
	  
	  /* HIDDEN INITIALLY  :  */
	  
	    visibility: hidden;
	}

	.menu > div > ul > li {
	    list-style: none;
	    padding: 0.5rem;
	    text-align: center;
	}

	.menu > div > ul > li > a {
	    text-decoration: none;
	    padding: 20px;
	    font-size: 22px;
	}

	/* WHEN THE TOGGLER IS CHECKED, CHANGE THE VISIBILITY TO VISIBLE :  */

	.toggler:checked ~ .menu > div > ul {
	    transition: visibility 0.4s ease;
	    transition-delay: 0.1s;
	    visibility: visible;
	}

	.header-nav {
	    width: 100%;
	    right: 0px;
	    top: 121px;
	    background-color: #212F3C;
	}


}