/*  CSS3  */

html {  min-width:360px; line-height:1.5; background: #444 url(../images/blacknoise.png) top left repeat fixed; color: #111; }

 * { margin:0 0 0 0; padding:0 0 0 0; border:none; box-sizing: border-box; }

html, body  { width: 100%; }


/* Fonts */

html { font-family: "Raleway", sans-serif; scroll-behavior: smooth; }

h1, h2, h3, h4,
#header,
.navigation,
.gallery-thumb,
.royalSlider {font-family: "PT Sans Narrow", sans-serif; }


/* Headings */

h1, h2, h3, h4 { float:left; font-weight: normal; clear: left; }

h1 { font-size:1.8em; color:#222; text-transform: uppercase; }
h2 { font-size:1.5em; color:#555;  }
h3 { font-size:1.25em; color:#888; font-weight: 600;  }
.h2noborderunder { border-bottom:none; }

h1 a { color:#0096AA; }

blockquote { float:left; clear:left; width: 100%; background-color:rgba(255,255,255,0.3); padding:1.25em 1.5em 1.75em 1.5em; margin:1em 0 1em; border-radius: 2pt; }
#testimonials blockquote { background-color:rgb(202, 244, 244, 0.4); }
blockquote p { line-height:1.5; }
blockquote p:before { color: #D8B82B; font-size:2.5em; line-height:0.0125; position:relative; top:0.5em; margin-right:0.125em; font-family: Oswald !important; content:"\201C"; opacity:0.9; margin-top:-1.25em; margin-bottom:-1.25em;}
blockquote p:after {color: #D8B82B; font-size:2.5em; line-height:0.0125; position:relative; top:0.5em; margin-left:0.125em; font-family: Oswald !important; content:"\201D"; opacity:0.9; margin-top:-1.25em; margin-bottom:-1.25em;}

cite { width: 50%; float: right; clear: left; font-size:0.93em; line-height:1.333; margin:0 0 0 0.5em; display:block; opacity:0.875;}
cite:before {content:"- ";}
cite:after {}

#content blockquote img { float:right; width: 25%; min-width: 5.5cm; padding-right:1pt; }
#content blockquote img.roundlogo { width: 12.5%; min-width: 2.75cm; padding-right:0; }

a.click-button { float: left; clear: both; left: 1em; position: relative; text-decoration: none; color: white; margin: -0.25em -0.5em; padding: 0.25em 0.5em; background-color: #C51C32; border-radius: 2pt; box-shadow: 1px 1px 1px #aaa; }


/* Desktop and Mobile */

.desktop { display:block; visibility:visible; }
.mobile { display:none; visibility:hidden; }

/* Elements */

a {color:#1b153e;}
hr { color:#888; background-color:#888; height: 20px; text-shadow:none; border:none; margin-bottom:2em; display:none; }

#blog #content hr { float:left; clear:left; display: block; width: 100%; height: 1px; border-bottom: 1px solid #fff !important; margin: 1em 0; }

/* in #content */

#content { background: linear-gradient( to bottom left, rgba(255,255,255,0.99), rgba(255,255,255,0.89)); }
#content img { border-radius: 2pt !important; }

#content ul, #content ol { float:left; clear:left; list-style-position: outside; margin-left: 2em; margin-top: 0.5em; margin-bottom: 0.75em; }

#content ul li { list-style-type: square; clear:left; }

#content ul.blog-titles-excerpts li { margin-bottom: 1em; border-bottom: 1px solid #fff; float:left; }
#content ul.blog-titles-excerpts li a h3 { text-decoration: underline; }
#content ul.blog-titles-excerpts li small,
#content ul.blog-titles-excerpts li p { float: left; clear:left; max-width: 20cm; }
#content ul.blog-titles-excerpts li p:after { content:"Click to read the post."; text-decoration:underline; margin-left:0.25em; }

#footer-contact p { float:left; clear: both; }
#content p { float:left; clear: both; margin-top: 0.5em; margin-bottom: 0.5em; text-align: justify;}
#content p:first-child { margin-top: 1em; }
#content p:last-child { margin-bottom: 1em; }
#content p img { float:right; }

#content img { width:100%; border-radius: 1pt; }

#content img.desktop,
#content img.mobile { margin-bottom: 1em; }

#content .ratesbox { float: left; clear: both; width: 100%; font-size: 0.93em; background-color: rgba(255,255,255,0.333); border-radius: 3px; padding: 2em; margin: 0.75em 0 1.5em 0; word-spacing: -0.5px; border-radius: 2pt; }
#content .ratesbox ul { list-style-position: inside; padding: 1em 0 0 0; margin: 0 0 0 0; text-indent: 0; }
#content .ratesbox ul li { padding:  0 0 0.2em 0; margin: 0 0 0 1em; text-indent:-1em; }
#content .ratesbox ul li b { text-transform:uppercase; font-size:0.9em; }

/* Header and Navigation */

#header { top:3em; z-index: 2; float:left; background: rgba(255,255,255,1); width:100%; padding: 2.5vmax 3.75% 1.5vmax 3.75%; float:left; }
#homepage #header { position: absolute; background: rgba(255,255,255,0.5);  }

    @media screen and (min-width: 0px) and (max-width: 45em) { #homepage #header { position:relative; background-color: #fff; }
                                                               #header { top: 0; } }

#header img#companylogo { width:15%; min-width:5.5cm; float:left; }
    @media screen and (max-width: 60em) { #header img#companylogo { width: 14%; min-width: 5cm; } }
    @media screen and (max-width: 45em) { #header img#companylogo { } }
    @media screen and (max-width: 32em) { #header img#companylogo { width: 13%; min-width: 4.5cm; } }

#header img { filter:saturate(90%); }

#header #phonenumber { font-size: 1.2em; float:right; text-align:right; color:#111; text-shadow:0 0 1px #fff; word-spacing: -1px;  }
    @media screen and (max-width: 60em) { #header #phonenumber { font-size: 1.1em; word-spacing: -2px; } }
    @media screen and (max-width: 32em) { #header #phonenumber { } }

#header .alt-logo {  }
#header .alt-logo a { display: block; float:right; }
#header .alt-logo a img { width: auto; height: 5.5em; float: right; margin-top: -1em; margin-left: 1em; }
    @media screen and (max-width: 80em) { #header .alt-logo a img { height:5em; margin-top: -0.75em; margin-left: 0.75em; } }
    @media screen and (max-width: 60em) { #header .alt-logo a img { height:4em; margin-top: -0.5em; margin-left: 0.5em; } }


.navigation { position: relative; min-height: 3em; float:left; z-index: 11; width: 100%; padding: 0 3.75% 0 3.75%;
  background: rgba(38, 63, 108, 1); color: #fff; text-transform: uppercase; opacity: 1; }
.navigation.sitemap { padding: 2em 3.75%; background-image:none; background-color: #333; }
  .navigation nav * { list-style-type:none; text-indent:0; }
  .navigation nav a { font-size:1em; line-height: 1.75; color:#fff; text-decoration:none; border-radius:1px; text-transform: uppercase; outline-offset: -3px; }
  .navigation nav small { font-size:small; color:#aaa; clear:none; float:none; }
  .navigation nav ul { float:left; }
  .navigation nav ul ul {  }
  .navigation nav ul li { float:left; line-height: 1.75; }

  .navigation nav ul li { color: #888 }
  .navigation nav > ul > li { color: #fff; }

  .navigation nav ul li.lithatnests > span { }
  .navigation.sitemap nav ul li.lithatnests > span { opacity: 0.5; }
  .navigation.sitemap nav ul li.lithatnests > span:after { content:":"; }

  .navigation nav > ul > li { line-height: 3; }
  .navigation nav > ul > li { margin-right:1em; }
  .navigation nav > ul > li:nth-child(2) { min-width:13.5em; }
  .navigation nav > ul > li:last-child { min-width:6em; }
  .navigation nav ul li.toolong { letter-spacing: -0.75px; }
  .navigation nav ul > li:last-child { margin-right:0; padding-right:0; }
  .navigation nav ul li ul li { float:none; min-width:1em; padding-right:0; margin-right:0; }

  .navigation nav ul li a, .navigation nav ul li ul li a { transition: background-color 0.45s 0.04s, color 0.45s 0.04s;  padding:0.08vw 0.4vw;  color:#fff; border-radius: 1px; }
  .navigation nav ul li a:hover, .navigation nav ul li ul li a:hover { background-color: #fff; color: rgba(38, 63, 108, 1); }

/* - Toggles */

br.tallbr { float:left; width: 100%; margin-top:0.5em; }

.toggle-view { }
.toggle-view * { transition: all;  }

.toggle-title { opacity: 0.8; cursor: pointer; transition: opacity 0.45s;  }
.toggle-title:hover { opacity: 1; }
.toggle-title:after { content: " +"; transition: color 0.45s; }
.toggle-title:hover:after { color: navy; opacity: 0.8; }

.tactive { opacity: 0.5; }
.tactive:after { content: " -"; }

.toggle { margin: 0.5em 0 1.5em; display: none; overflow: hidden; float: left; clear:both;}

/*  - Current Navigation Items  */

#homepage ul li.homepage a, #homepage ul li.homepage ul li a,
#estate-law ul li.estate-law a, #estate-law ul li.estate-law ul li a,
#business-law ul li.business-law a, #business-law ul li.business-law ul li a,
#tax-law ul li.tax-law a, #tax-law ul li.tax-law ul li a,
#us-law-and-canadians ul li.us-law-and-canadians a, #us-law-and-canadians ul li.us-law-and-canadians ul li a,
#law-practice-areas ul li.law-practice-areas a, #law-practice-areas ul li.law-practice-areas ul li a,
#risk-management ul li.risk-management a, #risk-management ul li.risk-management ul li a,
#corporate-reorganizations ul li.corporate-reorganizations a, #corporate-reorganizations ul li.corporate-reorganizations ul li a,
#services-and-rates ul li.services-and-rates a, #services-and-rates ul li.services-and-rates ul li a,
#testimonials ul li.testimonials a, #testimonials ul li.testimonials ul li a,
#risk-management ul li.risk-management a, #risk-management ul li.risk-management ul li a,
#competitive-advantage ul li.competitive-advantage a, #competitive-advantage ul li.comptetitive-advantage ul li a,
#testimonials ul li.testimonials a, #testimonials ul li.testimonials ul li a,
#blog ul li.blog a, #blog ul li.blog ul li a,
#contact ul li.contact a, #contact ul li.contact ul li a
{ background-color: rgba(255, 255, 255, 1.0); !important; color: rgba(38, 63, 108, 1) !important; }

#content { float:left; clear: left; width: 100%; padding: 2em 3.75%; }

#content div.twocols { clear:left; float:left; width:100% !important; margin-bottom:0em; }
#content div.left { clear:left; float:left; width:48.75% !important; margin-bottom:0em; }
#content div.right { clear:right; float:right; width:48.75% !important; margin-bottom:1em; }
#content div.right iframe { margin-bottom:1em !important; }

#content div.twocols-split { clear:left; float:left; width:100% !important; margin: 1em 0 0 0; column-count: 2; display:inline-block !important; text-align: justify; column-gap: 2vw;  }
#content div.twocols-split p:first-of-type{ margin-top:0; padding-top:0; }

  @media(max-width:639px) { #content div.twocols-split { column-count: 1; }}

/* blog rectangles */

#blog .blog-rectangles { margin-top:1em; }
#blog #content p:first-of-type { margin-top: 1em; }

.blog-rectangles { float:left; clear:left; width:100%; display:block; }
.blog-rectangle { transition: background-color 0.45s; position: relative; float:left; display:block; width: 19%; margin-right: 1%; margin-bottom: 1%; background-color: #f8f8f8; height: auto; min-height:24em; }
  @media(max-width:1240px) { .blog-rectangle { width: 32.3%; }}
  @media(max-width:800px) { .blog-rectangle { width: 49%; line-height: 1.4; }}
  @media(max-width:640px) { .blog-rectangle { width: 99%; margin-right:0%; margin-bottom: 3%; }}

.blog-rectangle a { position:relative; float: left; clear:left; min-height: 26em;}
#content .blog-rectangle a p { padding: 1.1em; padding-top: 0.55em; font-size: 0.9em; text-align:left !important; word-break: keep-all;}
.blog-rectangle a h3 { position:absolute; top:1em; left:0; background-color: rgba(0,0,0, 0.25); color: white; padding:1em ; text-shadow: 0 0 1em #444 }
.blog-rectangle a h4 { padding: 0.45em 0.9em 0 0.8em; font-size: 1.2em; line-height: 1.25; color: #263F6C; word-spacing: -1px; }
.blog-rectangle a span { text-decoration:underline; }

.blog-rectangle img { width:100%; height:auto;  }
.blog-rectangle a img { transition: opacity 0.45s 0.04s, filter 0.45s 0.04s; opacity: 0.94; filter: saturate(0.98) brightness(0.98) contrast(0.95); }
.blog-rectangle:hover { opacity: 1; background-color: #fff; }
.blog-rectangle:hover h4 { text-decoration: underline; }
.blog-rectangle:hover a img { filter: saturate(1) brightness(1.02) contrast(0.98); opacity: 1; }

/* galleries */

.galleries { float:left; clear:left; display: block; width: 100%; margin: -1em 0 1em 0; padding: 0; }
  @media(min-width:800px) { .galleries { margin: 1em 0 1em 0; }}


.gallery-thumb-overview { float: left; clear: left; width: 100%; column-count: 3; }
.gallery-thumb-overview img { width:100%; height:auto; }

.gallery-thumb { font-size: 1.5vmax; }
.gallery-thumb a {}
.gallery-thumb a img { transition: opacity 0.45s 0.04s, filter 0.45s 0.04s; opacity: 0.94; filter: saturate(0.98) brightness(0.98) contrast(0.95); }
.gallery-thumb:hover a img { filter: saturate(1) brightness(1.02) contrast(0.98); opacity: 1; }

/* gallery info labels */

.gallery-thumb { position: relative; float: left; }

#law-practice-areas .gallery-thumb .gallery-info { position: absolute; top: 0em; left: 0em; text-transform: uppercase; }
#somepage .gallery-thumb .gallery-info  { position: absolute; bottom: 0em; left: 0em; text-transform: uppercase; } /* overlay towards bottom */

.gallery-thumb .gallery-info p { border-radius: 1px; transition: background-color 0.55s 0.04s; padding: 0.25em 0.5em; background-color: rgba(10,15,54,0.5); }

.gallery-thumb .gallery-info p a { transition: color 0.55s 0.04s; color: rgba(255,255,255,0.9); line-height: 1.25; text-decoration: none; }

.gallery-thumb:hover .gallery-info p { background-color: rgba(255,255,255,0.75); }
.gallery-thumb:hover .gallery-info p a { color: rgba(0,0,0,0.9); }


/* footer contact */

#footer-contact { border-top: 1px solid #111; float:left; width: 100%; background: rgba(0,0,0,0.4); color: #fff; clear:both; padding: 2vmax 3.75% 2vmax 3.75%; text-align:left !important; }

#footer-contact h2 { padding-bottom: 0.5em; }
#footer-contact h3 { padding-bottom: 0.25em; }
#footer-contact div { float:left; width: 33%; font-size: 0.9em; }

#footer-contact address { font-style:normal; padding-bottom: 1em; }
#footer-contact p { padding-bottom: 1em; }
#footer-contact p a { color: inherit; text-decoration: none; }

#footer-contact div.secondlogo-footer { width: auto; text-align: right; float:right; }
#footer-contact div.secondlogo-footer img { float:right; width: 18vw; max-height: 6em; margin-left: 1em; filter:saturate(0) contrast(50%); }

/* footer */

#footer { float:left; width: 100%; clear:both; background-color: rgba(38, 63, 108, 0.75); padding: 2em 3.75% 1em 3.75%; }
#footer p { float:left; clear: none; font-size: 0.9em; color:#eee; width: calc( 100% - 6.9em - 6.9vw - 7.5% ); }
#footer p a { color:#eee; }

#footer #footer-companylogo { float:left; width: calc( 6.67em + 6.67vw ); clear: none; margin-right: 3em; opacity: 0.9; }

p#siteby { color:#eee; float:right; clear: left; margin-bottom:1em; text-align: right; width: auto; opacity: 0.6; font-size: 0.8em; }
p#siteby a { color:#fff; }



/* ----- Media Queries ----- */

/* */
.navigation label { display:none; }
.navigation #nav { display:none; }
nav { width: auto; max-height: none; }
.navigation.sitemap #nav { display:block; float:left; clear:left; }
/* */

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

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

@media(min-width:3000px) {
  html {font-size:137.5%;}
}

@media(min-width:3500px) {
  html {font-size:175%;}
}

@media(min-width:4500px) {
  html {font-size:200%;}
}

@media(min-width:7500px) {
  html {font-size:400%;}
}

@media(max-width:76em) {

    .navigation nav ul li a span { display:none; }

  .navigation nav > ul > li:first-child { min-width: 4em }
  .navigation nav > ul > li { min-width: 4em; margin-right: 2em }
  .navigation nav > ul > li:nth-child(2) { min-width: 4em; }
  .navigation nav > ul > li:nth-child(5) { min-width: 4em; }
  .navigation nav > ul > li:last-child { min-width: 4em; }

}

@media(max-width:65em) {

 .navigation { font-size: 0.9em; }

  #content ul span { display:none; }

  .right .my-gallery, .left .my-gallery { column-count: 2; }
}

@media(max-width:60em) {

  h1 { font-size:1.5em; }
  h2 { font-size:1.25em; }
  h3 { font-size:1.125em; }

  .navigation { font-size: 0.8em; }

  #siteby { margin-top:2em; clear:both; float:left; text-align:left; }

  .gallery-thumb { font-size: 1.333vmax; }

}

@media(max-width:48em) {

  .gallery-thumb { font-size: 1.375vmax; }
  .gallery-thumb a span { display:none; }

  .navigation nav > ul > li { width: 100%; }
  .navigation nav ul li a span { display: none; }

/*  */

  .mobile { display:block; visibility:visible; }
  .desktop { display:none; visibility:hidden; }
  .nomobile { display:none !important; visibility:hidden; height:0; }

/* */
.navigation { overflow: hidden; background: #263F6C; }
.sitemap { overflow: visible; }
.navigation label { transition-property: color; transition-duration: 0.5s; transition-delay: 0.1s;  display: block; color: #fff; text-decoration: none; line-height: 3em; }
.navigation label:hover { color: #0096AA; }
.navigation label { float: left; cursor: pointer; }
.navigation label:after { content: "\2261"; font-size: 2em; }

nav { float: right; max-height: 0; width: 100%; transition: 1s;  }
.navigation.sitemap nav { max-height: none; width: 100%;  }

#nav { display: none; }
#nav:checked ~ nav { max-height: 45em; /* Anything bigger than nav height. The transition duration works with this */ }
/* */

.navigation { font-size: 1.125em; }
.navigation * {}
.navigation.sitemap ul { width: 100%; }
.navigation ul { padding-top:0.25em; padding-bottom:1em; margin-left:1%; }
.navigation ul li ul { padding-top: 0; padding-bottom:0.5em; padding-left: 1em; clear: left; }
.navigation ul li { float:left; display: list-item; clear:both; line-height: 2 !important; }

.navigation ul li a,
.navigation ul li ul li a,
.navigation ul li a:hover,
.navigation ul li ul li a:hover { background-color: transparent; color: #fff; }

#content div.left { clear:left; float:left; width:100% !important; margin-bottom:1em; }
#content div.right { float:right; width:100% !important; margin-bottom:1em; }

#footer { padding-top: 2em; padding-bottom: 1em; }

#footer-contact {  }
#footer-contact div { width:100%; }

#footer-contact div.secondlogo-footer { float:left; text-align: left; opacity: 0.5; width: 15%; display:block; }
#footer-contact div.secondlogo-footer img { float:left; max-width: 50px; max-height: 50px; vertical-align: middle; margin: 0 auto; }


#footer br { display:none; visibility:hidden; }

.my-gallery {  column-count: 2; }
.right .my-gallery, .left .my-gallery { column-count: 3; }
.gallery-thumb-overview { column-count: 2; }

.gallery-thumb { font-size: 2.5vmax; }
.gallery-thumb a span { display:inline; }

#content { padding: 5%; }

#header img { width:30%; min-width:3cm; float:left; }
#header #phonenumber { font-size:1em; padding:0.5em; }

h1, h2, h3 { }

}


@media(max-width:48em) {

  .my-gallery {  column-count: 3; }
  .gallery-thumb-overview { column-count: 3; }
  .gallery-thumb-overview.practice-areas { column-count: 2; }

  .gallery-thumb { font-size: 2vmax; }
  .gallery-thumb a span { display:none; }

#law-practice-areas .gallery-thumb .gallery-info { position: absolute; top: auto; bottom: 0em; left: auto; right: 0em; width: 100%; }

.gallery-thumb .gallery-info p { padding: 0.25em 0.5em; margin: 0 0; width: 100%; text-align: right; background-color:rgba(0, 0, 0, 0.25); text-shadow: 0 0 0.25em #000; }
.gallery-thumb .gallery-info p a { margin: 0 0; }


  #header img { width:25%; min-width:2.5cm; float:left; }
  #header #phonenumber { font-size:1.1em; padding:0.375em; }

}


@media(max-width:45em) {

  #header img { width:27.5%; min-width:4.5cm; float:left; }
  #header #phonenumber { font-size:1em; }

}

@media(max-width:37em) {

  .gallery-thumb { font-size: 2.25vmax; }
  .gallery-thumb a span { display:none; }

}

@media(max-width:33em) {

  .gallery-thumb { font-size: 2.5vmax; word-spacing: -1px; }
  .gallery-thumb a span { display:none;}

}

@media(max-width:30em) {

  body { float:left; width:100%; margin: 0 0%; }

  #content p, #content ul { font-size:1em; }

  #content ul { margin-left: 1em; margin-bottom:1.5em; }
  #content ul li { padding-left: 0.125em; text-indent: 0em; }

  #header img { width:33.333%; min-width:3.333cm; float:left; }
  #header #phonenumber { font-size:0.9em; padding-top:0.5em; text-transform: none; word-spacing:-2px;  }

  h1, h2, h3 { text-transform: none; word-spacing: -1px;}

  .gallery-thumb { font-size: 2.5vmax; word-spacing: -1px; }
  .gallery-thumb a span { display:none;}

}