/*********************************************
Designed and built by http://phillipwong.net  
*********************************************/


/***** Reset *****/
/* http://meyerweb.com/eric/tools/css/reset/  -  v2.0 | 20110126  -  License: none (public domain)*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:0; font:inherit; vertical-align:baseline}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
body {line-height:1}
ol, ul {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none}
table {border-collapse:collapse; border-spacing:0}


/***** Universal *****/
.clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0}
.group:after {visibility:hidden; display:block; overflow:hidden; content:""; clear:both; height:0}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */
* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
img {-ms-interpolation-mode:bicubic}


/***** Styling *****/
html {-webkit-text-size-adjust:none; height:100%}
body {background:#fff; height:100%}

h1,h2,h3,h4,h5,h6,p,li,a,table,cite,figcaption {font-family:"Avenir Next", Avenir, sans-serif; color:#353838; line-height:1.375em}
.main-content p, .main-content li, .main-content a {font-family:georgia, sans-serif}

h1 {font-weight:600; color:#444}
h2 {font-weight:500; color:#444}
h3 {font-weight:600}
h4 {font-weight:700}
h5 {font-weight:700}
h6 {font-weight:400}
p {font-weight:400; font-size:16px; margin-bottom:1.375em}
li {}
em {font-style: italic}
a {text-decoration:none}

strong {font-weight:700}
.no-wrap {display:inline-block}

.wrapper {}
.container {padding:0 15px; max-width:980px; margin:0 auto}


/***** HEADER *****/
header {width:100%; background:#4c617e}
header h2 {float:left; font-weight:600; font-size:14px; color:#fff; text-transform:uppercase; letter-spacing:1px}
header h2 a {display:block; color:#fff; padding:18px 0 16px}

#main-nav {display:none}

nav ul {}
nav ul li {font-weight:500; font-size:15px; color:#fff; text-transform:uppercase; letter-spacing:1px; border-top:1px solid rgba(0,0,0,0.1)}
nav ul li.active {padding:0.75em 0}

nav ul li a {display:block; color:#fff; padding:0.75em 0}
nav ul li a:hover, nav ul li a:active {color:/*#4c617e*/#788faa; transition:color 0.2s ease}

.barristers {clear:left; padding:0.75em 0}

/* Barrister list */
.sub-menu {padding-top:0.75em}

nav ul li ul {}
nav ul li ul li {float:left; margin:0; border-top:none; font-size:12px}
nav ul li ul li a {background:rgba(0,0,0,0.1); padding:0.5em 0.75em; margin:0em 0.5em 0.5em 0; border-radius:4px}

.menu {float:right; width:44px; height:44px; background:#435672; margin:6px 0 6px 6px}
.menu-active {transform:rotate(180deg)}
.menu img {width:100%}


/***** HERO *****/
/*.hero-wrapper {width:100%; background:url(bg-main.jpg) no-repeat center center; background-size:cover}*/
.hero {width:100%}
.hero h1 {font-size:18px; color:#fff}
.portrait {max-width:980px; margin:0 auto}
.portrait img {float:left; width:100%; height:40.17%}

.portrait {position:relative;}
.portrait h1 {position:absolute; top: 50%; left: 50%; width:100%; text-align:center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%)}




/***** MAIN *****/
/*
.main .main-content {background:green}
.main aside {background:yellow}
*/

.main-content h1 {font-size:24px; line-height:22px; margin-bottom:22px; color:#4c617e}
.main-content h5 {margin-bottom: 1.5em}
.main-content ul {list-style: disc; margin-bottom: 1.5em}
.main-content ul li {list-style: disc; margin-left: 1.5em}

.main a {text-decoration:underline}
.main a:hover {color:#788faa}

.main {padding:2em 0}

.main aside {/*background:yellow*/}
.main aside h3 {font-weight:700; font-size:14px; line-height:18px; color:#4c617e; text-transform:uppercase; padding-top:6px; margin-bottom:22px}
.main aside p {font-weight:600; font-size:14px; line-height:22px; color:#4c617e; text-transform:uppercase; padding:0; margin-bottom:0}
.main aside p.barrister-address {font-weight:400; text-transform:none}
.main aside ul {margin:22px 0}
.main aside li {font-size:12px; line-height:22px; color:#4c617e; padding:0 0 0}
.main aside span {display:inline-block; width:24px; font-weight:700}
.main aside a { color:#4c617e}

.linkedin {display: block; margin-bottom: 1em}
.linkedin img {width: 80px}

.barrister-office {font-weight:700; text-transform:uppercase}
.main aside p.barrister-multiple-addresses {margin-top:-12px}

.location-map {margin-top:2em}


/***** FOOTER *****/
footer {text-align:center; width:100%; background:#4c617e; padding:1em 0 4em; border-top:44px solid #788faa}
footer ul {}
footer ul li {display:inline-block; font-size:12px; color:#d5e1ef}
footer ul li a {font-size:12px; color:#d5e1ef}
footer a:hover {color:#fff; text-decoration:underline}

.footer-divider {display:inline-block; padding:0 0.5em}
.copyright-divider {display:none}



/***** MEDIA QUERIES *****/
@media screen and (min-width:650px) {

header h2 {font-size:16px}
header h2 a {padding:20px 0 16px}
	
.menu {display:none}
#main-nav {display:block}

nav {float:right}
nav ul li {float:left; font-size:12px}

.barristers {position:relative; padding:0;}
.barristers > a {}
.barristers .sub-menu {display:block; position:absolute; background:#435672; /*visibility:hidden; opacity: 0; transition: visibility 0s, opacity 0.2s linear*/ display:none}

.barristers:hover {transition:color 0.2s ease; color:#788faa}
.barristers:hover .sub-menu {/*visibility:visible; opacity:1*/ display: block}


.sub-menu {position:relative; z-index:100; padding-top:0; margin-top:-16px; margin-left:8px}
.active .sub-menu {margin-top:6px; margin-left:-12px}

nav ul li a {display:block; color:#fff; padding:22px 0 22px 0; margin-left:20px; white-space:nowrap}
nav ul li.active {padding:22px 0 2px 0; margin-left:20px; border-bottom:4px solid #788faa}

nav ul li ul li {float:none}
nav ul li ul li a {background:rgba(0,0,0,0.3); padding:1em 1em; margin:0; border-radius:0}


.sub-menu {display:none}


.hero-wrapper {}
.hero h1 {font-size:28px}

.main aside h3 {font-size:13px}
.main aside p {font-size:13px}

.main aside ul {margin:0 0 22px 0}

.home .main-content {float:right; width:calc(100% - 200px)}
.home aside {float:left; width:170px; padding:0 30px 0 0; border-right:1px solid #ccc}
.home aside p {text-align:right}

.profile .main-content {float:left; width:calc(100% - 270px)}
.profile aside {float:right; width:240px;padding:0 0 0 30px; border-left:1px solid #ccc;}

.wrapper {overflow:hidden}
.main .main-content {margin-bottom: -1000px; padding-bottom: 1024px}
.main aside {margin-bottom: -1000px; padding-bottom: 1024px}

.copyright-divider {display:inline-block; padding:0 0.5em}

}