@charset "UTF-8";
/* CSS Document */

/*
*     ██████  ██       ██████  ██████   █████  ██                                         
*    ██       ██      ██    ██ ██   ██ ██   ██ ██                                         
*    ██   ███ ██      ██    ██ ██████  ███████ ██                                         
*    ██    ██ ██      ██    ██ ██   ██ ██   ██ ██                                         
*     ██████  ███████  ██████  ██████  ██   ██ ███████
*/

html {
	font-size: 100%;
}

body {
	color: #333333;
	font-family: "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 400;
	line-height: 1.5em;
}

a {
	color: inherit;
}

a:visited,
a:active {
	color: inherit;
}

a:hover {
	color: #000000;
}

a img {
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
}

a:hover img {
	opacity: 0.9;
}

div,
nav {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

figure {
	margin-top: 48px;
}

img {
	width: 100%;
}

.img-frame {
	position: relative;
}

.img-caption,
figcaption {
	border-top: 1px solid #eee;
	margin: 24px 0 48px;
	padding-top: 18px;
}

.hide {
	display: inline;
}

main, .wrap {
	margin: 0 auto;
	max-width: 62.5em;
	position: relative;
	width: 100%;
}

/*
*    ████████ ██    ██ ██████   ██████   ██████  ██████   █████  ██████  ██   ██ ██    ██ 
*       ██     ██  ██  ██   ██ ██    ██ ██       ██   ██ ██   ██ ██   ██ ██   ██  ██  ██  
*       ██      ████   ██████  ██    ██ ██   ███ ██████  ███████ ██████  ███████   ████   
*       ██       ██    ██      ██    ██ ██    ██ ██   ██ ██   ██ ██      ██   ██    ██    
*       ██       ██    ██       ██████   ██████  ██   ██ ██   ██ ██      ██   ██    ██
*/

h1 {
	color: #ffffff;
	font-size: 4rem;
	font-weight: 200;
	line-height: 1.125em;
	margin: 0 0 0.25em;
}

h2 {
	color: #063170;
	font-size: 1rem;
	letter-spacing: 0.05em;
	line-height: 1.5em;
	margin: 3rem 0 0.375em;
	text-transform: uppercase;
}

h2:first-of-type {
    margin-top: 0rem;
}

h3 {
	font-size: 1.25rem;
	line-height: 1.25em;
	margin: 0;
}

h4 {
	letter-spacing: 0.05em;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

h5 {
	font-size: 0.75rem;
	letter-spacing: 0.125em;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

p {
	color: #333333;
	font-size: 1.25rem;
	line-height: 1.5em;
	margin-top: 0;
	max-width: 75ch;
	padding: 0;
}

hr {
	background-color: #cccccc;
	border-style: none;
	clear: both;
	height: 1px;
	margin-bottom: 18px;
}

ul {
	font-size: 1.125rem;
	line-height: 1.5em;
	margin: .5em 0 .5em;
	padding: 0;
}

li {
	margin: 0 0 0 1.5em;
	padding: 0 0 0.5em 0;
}

.nowrap {
	white-space: nowrap;
}

.tagline p {
	color: #ffffff;
	font-size: 4rem;
	font-weight: 200;
	line-height: 1.125em;
	margin: 0 0 0.25em;
}

.boilerplate p {
	color: #ffffff;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.3333333333em;
	margin: 0.875em 0 0;
}

.lawyer {
	font-size: 2rem;
	letter-spacing: normal;
	line-height: 1.2em;
	text-transform: none;
}

.job-title {
	font-weight: 300;
}



/*
*    ██   ██ ███████  █████  ██████  ███████ ██████                                       
*    ██   ██ ██      ██   ██ ██   ██ ██      ██   ██                                      
*    ███████ █████   ███████ ██   ██ █████   ██████                                       
*    ██   ██ ██      ██   ██ ██   ██ ██      ██   ██                                      
*    ██   ██ ███████ ██   ██ ██████  ███████ ██   ██
*/

header {
	/* background-color: #ffffff; */
	/* background-color: rgba(255, 255, 255, .95); */
	background-image: url(../images/vancouver-hero.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 90rem;
    height: 5rem;
	position: fixed;
	top: 0em;
	width: 100%;
	z-index: 1;
}

nav {
	float: right;
	margin: 0;
	padding: 0;
}

/* #menu {
	display: block;
} */

.menu {
    margin: 1.875rem 0;
}

.menu li {
	font-size: 1rem;
	display: inline-block;
	letter-spacing: 0.05em;
    padding: 0;
	text-align: right;
	text-transform: uppercase;
	/* vertical-align: middle; */
}

.menu li::after {
	content: none;
}

.menu a {
	color: #ffffff;
    padding: 0.25rem 0;
	text-decoration: none;
}

.menu a:hover {
	border-bottom: solid 0.0625rem;
}

.logo {
	float: left;
	margin: 1.375em 0 0;
}

.logo p {
	font-family: "Noto Serif";
	font-size: 1.5rem;
	text-transform: uppercase;
	font-weight: 600;
}

.logo a {
	color: #ffffff;
	text-decoration: none;
}

.home .nav-home,
.about .nav-about,
.practice .nav-practice,
.team .nav-team,
.contact .nav-contact {
	font-weight: 800;
}

nav a.icon {
	display: none;
}

/*
*    ███████ ███████  ██████ ████████ ██  ██████  ███    ██ ███████                       
*    ██      ██      ██         ██    ██ ██    ██ ████   ██ ██                            
*    ███████ █████   ██         ██    ██ ██    ██ ██ ██  ██ ███████                       
*         ██ ██      ██         ██    ██ ██    ██ ██  ██ ██      ██                       
*    ███████ ███████  ██████    ██    ██  ██████  ██   ████ ███████
*/

.content::after,
.overview::after,
.wrap::after {
	clear: both;
	content: "";
	display: table;
}

.hero {
	background-color: #053070;
	background-image: url(../images/vancouver-hero.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 90rem;
	box-sizing: border-box;
	padding: 9rem 0 0;
	height: 15rem;
}

.home .hero {
	height: 45rem;
}

.overview {
	margin-bottom: 2.5rem;
}

.overview p {
	color: #063170;
	font-size: 2rem;
	font-weight: 300;
}

main {
	padding: 4em 0 0;
}

.content {
	margin-bottom: 3rem
}




/*
*     ██████  ██████  ██      ██    ██ ███    ███ ███    ██ ███████                       
*    ██      ██    ██ ██      ██    ██ ████  ████ ████   ██ ██                            
*    ██      ██    ██ ██      ██    ██ ██ ████ ██ ██ ██  ██ ███████                       
*    ██      ██    ██ ██      ██    ██ ██  ██  ██ ██  ██ ██      ██                       
*     ██████  ██████  ███████  ██████  ██      ██ ██   ████ ███████
*/

.colx1 {
	float: left;
	margin-right: 3.2%;
	width: 5.4%;
}

.colx2 {
	float: left;
	margin-right: 3.2%;
	width: 14%;
}

.colx3 {
	float: left;
	margin-right: 3.2%;
	width: 22.6%;
}
.colx3:nth-of-type(4n + 1) {
	clear: both;
}
.colx3:nth-of-type(4n) {
	margin-right: 0;
}

.colx4,
.boilerplate,
.content .img-frame,
.firm {
	float: left;
	margin-right: 3.2%;
	width: 31.2%;
}
.colx4:nth-of-type(3n + 1) {
	clear: both;
}
.colx4:nth-of-type(3n) {
	margin-right: 0;
}

.colx5 {
	float: left;
	margin-right: 3.2%;
	width: 39.8%;
}

.colx6,
.address {
	float: left;
	margin-right: 3.2%;
	width: 48.4%;
}
.colx6:nth-of-type(2n + 1) {
	clear: both;
}
.colx6:nth-of-type(2n) {
	margin-right: 0;
}

.colx7 {
	float: left;
	margin-right: 3.2%;
	width: 57%;
}

.colx8,
.tagline,
.content .text-frame {
	float: left;
	margin-right: 3.2%;
	width: 65.6%;
}

.colx9 {
	float: left;
	margin-right: 3.2%;
	width: 74.2%;
}

.colx10 {
	float: left;
	margin-right: 3.2%;
	width: 82.8%;
}

.colx11 {
	float: left;
	margin-right: 3.2%;
	width: 91.4%;
}

.last,
.boilerplate,
.content .text-frame {
	margin-right: 0;
}

/*
*    ███████  ██████   ██████  ████████ ███████ ██████                                    
*    ██      ██    ██ ██    ██    ██    ██      ██   ██                                   
*    █████   ██    ██ ██    ██    ██    █████   ██████                                    
*    ██      ██    ██ ██    ██    ██    ██      ██   ██                                   
*    ██       ██████   ██████     ██    ███████ ██   ██
*/

footer {
	background-color: #58595b;
	clear: both;
	margin-top: 4em;
	padding: 3rem 0 5rem;
}

footer p {
    color: #ffffff;
    font-size: 1rem;
}

.firm {
	float: left;
    font-size: 1rem;
}

.company {
    font-weight: bold;
}

.address {
	columns: 2;
	column-gap: 6.61157025%;
	float: left;
	width: 48.4%;
}

.address p {
	font-size: 0.75rem;
	margin: 0 0 1em;
}

.address .office {
    font-weight: bold;
    letter-spacing: .05em;
    margin: 0;
    text-transform: uppercase;
}

/*
*    ████████ ██     ██ ███████  █████  ██   ██ ███████                                   
*       ██    ██     ██ ██      ██   ██ ██  ██  ██                                        
*       ██    ██  █  ██ █████   ███████ █████   ███████                                   
*       ██    ██ ███ ██ ██      ██   ██ ██  ██       ██                                   
*       ██     ███ ███  ███████ ██   ██ ██   ██ ███████
*/



/*
*    ██████  ██████  ███████  █████  ██   ██ ███████                                      
*    ██   ██ ██   ██ ██      ██   ██ ██  ██  ██                                           
*    ██████  ██████  █████   ███████ █████   ███████                                      
*    ██   ██ ██   ██ ██      ██   ██ ██  ██       ██                                      
*    ██████  ██   ██ ███████ ██   ██ ██   ██ ███████
*/

@media screen and (max-width: 1080px) {
	/* --- MOBILE MENU --- */

	.menu {
		background-color: #58595b;
		columns: 3;
		display: none;
		padding: 1rem 0;
		position: fixed;
		top: 3rem;
		left: 0;
		right: 0;
	}

	.menu li {
		display: block;
		margin: 0;
		padding: 0.5rem 0;
		text-align: left;
	}

	.menu a {
		box-sizing: border-box;
		color: #ffffff;
		display: block;
		padding: 1rem 2rem;
		width: 100%;
	}

    .menu a:hover {
    	border-bottom: none;
}

	nav a.icon {
		color: #ffffff;
		display: block;
		font-size: 1.5rem;
		line-height: 1em;
		margin: 1.75rem 0 0;
		padding: 0;
	}

	nav a > .fa-times {
		font-size: 1.125em;
		margin: -2px 0 0 -1px;
	}

	/* --- MOBILE MENU (END) --- */

	main {
		padding: 2rem 0 0 0;
	}

	.wrap, .overview, .content {
		padding-left: 2rem;
        padding-right: 2rem;
	}

	.overview {
		margin-bottom: 1rem;
	}

	header,
	.hero {
		background-image: url(../images/vancouver-hero-dark.jpg);
	}

	.hero {
		height: auto;
		padding: 7.5rem 0 .625rem;
	}

	.home .hero {
		height: auto;
		padding: 7.5rem 0 4rem;
	}

	.tagline,
	.boilerplate {
		margin: 0;
		max-width: 80ch;
		padding: 0;
		width: 100%;
	}
}



@media screen and (max-width: 880px) {
	.address {
		float: right;
	}
}



@media screen and (max-width: 767px) {
	.menu {
		columns: 2;
	}

    h2:first-of-type {
        margin-top: 3rem;
    }

    .content .img-frame, .content .text-frame {
        float: left;
        width: 100%;
    }

	footer {
		padding: 2rem 0 3rem;
	}

    /* footer br {
        display: none;
    } */

	.firm {
        margin: 0 0 1rem;
    	width: 100%;
	}

	.address {
        margin: 0;
	    width: 100%;
	}
}



@media screen and (max-width: 600px) {
	.overview p {
		font-size: 1.75rem;
	}

	footer .firm,
	.address {
		clear: both;
		width: 100%;
	}

	footer .firm {
		margin: 0 0 0.75em 0;
	}
}



@media screen and (max-width: 479px) {
	.wrap {
		padding: 0 2rem;
	}

    .menu {
		columns: 1;
	}

    .menu li {
        /* margin-left: 25%; */
		text-align: center;
    }

    h1, .tagline p {
        font-size: 3rem;
    }

    .address {
        columns: 1;
    }

    .address p {
        margin-bottom: 1.5em;
    }
}



/* Larger screen sizes*/

@media screen and (min-width: 1440px) {
	header,
	.hero {
		background-position: center -1rem;
		background-size: cover;
	}
}



@media screen and (min-width: 1600px) {
	html {
		font-size: 112.5%;
	}
}



@media screen and (min-width: 1920px) {
	html {
		font-size: 125%;
	}
}



@media screen and (min-width: 2100px) {
	header,
	.hero {
		background-position: center -6rem;
	}
}