
html { font-family: "Raleway", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; font-weight: normal; font-weight: 400; color: #333; font-smooth:always; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }

html { line-height: 1.4;
margin:0; padding:0;
box-sizing: border-box;
height: 100vh; /* set viewport constraint */
min-height: 100%; /* enforce height */
background-color:#444; color:#444;
}

html * { margin:0; padding:0; box-sizing: border-box; color-profile: sRGB; } /* also in html */

body {
margin:0;
float:left; width:100%;
padding:0 2.5% 0 2.5%;
background-color:#e8e8e8;
background-size: cover;
-webkit-background-size: cover; /* safari may need this */
box-shadow: 0 0 3em black;
}

html body { background: #e8e8e8 url(../images/m_theberge_business_lawyer_1920x1200.jpg) no-repeat fixed 0px 20px; background-size: contain; }
html#nobg body { background-image:none; }

.fordesktop { display:block; }
.formobile { display:none; }
.formobileinline { display:none; }

h1, h2, h3, h4, h5 { clear:both; color:#444; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); line-height:1.4; font-family: "Playfair Display", serif; font-weight: 500; word-spacing:-1pt; letter-spacing:-0.25pt }
h1 { font-size:2em; margin-bottom:0.12em; }
h2 { font-size:1.677em; margin-bottom: 0.12em; margin-top:0 !important; opacity:0.8; }
h3 { font-size:1.45em; margin-bottom:0.36em; }

p { font-size:1em; margin-top: 0.667em; margin-bottom:0.667em; color:#222; }
ul, li { list-style-position:inside; }
ul { list-style-type:disc; margin-left:2em; margin-bottom:0.75em; text-indent:-1em; }
a { color:#06062F; outline:none; }
a, a:focus, a:hover { outline:none; }

blockquote { font-size:1em; font-style: italic; background-color:#fff; padding:1.375em 1.375em 1.5em 1.375em; margin:0.5em 0 0.75em 0; word-spacing: normal; letter-spacing: normal; }
blockquote br { line-height:0.5; }

#header { float:left; width:100%; height:auto; padding: 2% 2.5%; background-color:rgba(6,6,47,0.8); }
.estate-and-family-law #header { background-color:rgba(33,0,33,0.8); }
.business-and-divorce-law #header { background-color:rgba(20,3,40,0.8); }
.gateway #header { background-color: rgba(6,6,47,0.8); /* background-color: rgba(0,0,0,0.9); */ /* background: linear-gradient(to right, rgba(18,18,35,0.8), rgba(25,8,25,0.8)); */ }

.wordmark { float:left; width:22.75%; }

#header h2 { color:#fff !important; margin-top:0.5em; float:left; clear:left; opacity:0.9; }  /* for #header h2 which would go under header and is commented out for now */

#desktopnavigation { float:right; text-align:right; font-family: "Playfair+Display", serif; font-weight: 300 !important; word-spacing:-1pt; opacity:0.97; }
#desktopnavigation ul { list-style-type:none; margin:0; padding:0; font-size:1.25vw; line-height:1.25;text-align:right; color: #fff; }
#desktopnavigation ul li ul { padding: 0 0.5em; border-right: 0.1em solid rgba(255,255,255,0.8); opacity: 0.8; }
#desktopnavigation ul li a { color:#fff; transition: 0.5s ease; text-decoration:none; text-decoration-color:transparent;  }
#desktopnavigation ul li a:hover { transition: 0.5s ease; text-decoration-color:#fff; opacity:1; text-decoration:underline; }
li.newsroom { padding-top: 0.5em; }
.gateway li.newsroom { padding-top: 2.9em; }
#contact-page li.newsroom { padding-top: 2.9em; }
#about-page li.newsroom { padding-top: 2.9em; }

#bgimgformobile { margin: 0 0; clear:both; float:left; display:none; width:100%; }
#bgimgformobile img { width:100%; height:auto; }
/* see media queries */

#contentbody { clear:both; float:left; width:100%; min-height:50vh; }


#business-divorce-button { background-color:rgba(22,6,42,0.1); padding: 0.375em 0.75em; font-size:1.25em; margin:0.25em 0 0.5em; border-radius: 2px }
#business-divorce-button a { text-decoration-color:#9F9FAE; }
#family-law-button { background-color:rgba(36,3,36,0.1); padding: 0.375em 0.75em; font-size:1.25em; margin:0.25em 0 0.5em; border-radius: 2px }
#family-law-button a { text-decoration-color:#9F9FAE; }
#business-law-button { background-color:rgba(9,9,59,0.1); padding: 0.375em 0.75em; font-size:1.25em; margin:0.25em 0 1em; border-radius: 2px }
#business-law-button a { text-decoration-color:#9F9FAE; }

.findoutmore { opacity:0.5; }

.column { float:right; width:65.42%; height:auto; padding:0 2.5% 0 0; margin: 1.75% 0 0 0; }
html#nobg .column { padding:0; }
.columnleft { float:left; width:47.4%; height:auto; margin: 2.5% 0 0 0; }
.splitcolumn { width:49.9%; padding-right:4.9%; float:left; }
.widecolumn { width: 99.8%; padding:2.5%; margin: 2.5% 0 0 0; }
.widecolumn .splitcolumn { width: 49.9%; padding-right:2.45%; }
.widecolumn .splitcolumn:last-child { padding-right:0; }

.two-col { column-count: 2; margin-bottom: 0.5em; }
    @media only screen and (max-width:800px) {  .two-col {column-count: 1}}

.law-office-location { float:left; clear:left; width:49.9%; padding-right:1.3% word-spacing:-0.75pt; }
.law-office-map { clear:right; float:left; width:49.9%; margin-top:2.375em; margin-bottom:0.5em; }
.law-office-map iframe { border:none; width:100%; float:left; }

@media (max-width:800px) { .law-office-map { margin-top: 0.5em; }}


#footer { color:#fff; clear:both; float:left; width:100%; padding:2% 2.5%; margin-top:2%; height:auto; background-color:rgba(1, 3, 18,0.33); }
#footer a { color:#fff; opacity:1; }
#footer p { color:#fff; font-size:0.8em; opacity:0.8; }

#footer p.web-design-by { opacity:0.7; }
#footer p.web-design-by a { text-decoration: none; color:#ccc;}

/*
------------------------------------------------------------
Media Queries ----------------------------------------------
------------------------------------------------------------
*/

@media
(-webkit-max-device-pixel-ratio:5) and (min-width:1921px),
(max-resolution:500dpi) and (min-width:1921px) {

html { font-size:1.5em; line-height:1.35 }
} /* ------------------------------------------------------------ */

@media
(-webkit-max-device-pixel-ratio:5) and (min-width:3000px),
(max-resolution:500dpi) and (min-width:3000px) {

html { font-size:2.25em; line-height:1.35 }
.law-office-map iframe { min-height:16vh; }
} /* ------------------------------------------------------------ */

@media
(-webkit-max-device-pixel-ratio:5) and (min-width:48em) and (max-width:56em) and (min-height:60em),
(max-resolution:500dpi)  and (min-width:48em) and (max-width:56em) and (min-height:60em) {

html body { background: #EAEAEA url(../images/m_theberge_business_lawyer_800x1200.jpg) no-repeat fixed 0 0; background-size: cover; }

.wordmark { height: 8vw; width: auto; }
#desktopnavigation ul { font-size: 3vw; }
.column { background-color: rgb(233,233,233,0.5); padding:1em; }

body { padding: 0% 5%; }
#header { padding:3% 5%; }
#footer { padding: 5%; }


} /* ------------------------------------------------------------ */

@media
(-webkit-max-device-pixel-ratio:3) and (min-width:74.999em),
(max-resolution:300dpi) and (min-width:74.999em) {

#header { min-height: 12.5vw; }

body { padding: 0 3%; }
#header { padding:2% 3%; }

} /* ------------------------------------------------------------ */

@media (max-width: 74em) { .column { font-size:0.875em; }}

@media
(-webkit-max-device-pixel-ratio:1) and (max-width:63.998em),
(max-resolution:100dpi) and (max-width:63.998em) {

html body { background-image:none; }

body { background-color: #F2F3F3 !important; }
body { padding:0 5% 0 5%; }

.fordesktop { display:none; }
.formobile { display:block; }
.formobileinline { display:inline; }
#bgimgformobile { display:block; }
#footer p br { display:none; }

#header { padding: 4% 5%; }
.wordmark { height: 8vw; width: auto; }

.column { width: 100%; padding:0%; margin: 2.5% 0 0 0; }
.widecolumn { width: 100%; padding:0%; }
.columnleft { width: 100%; padding:0; }

#desktopnavigation ul { font-size: 2vw; }
#contentbody { font-size:1.175em; }

h1 { font-size: 4.5vw; letter-spacing:0; }
h2 { font-size: 3.5vw; letter-spacing:0; }
h3 { font-size: 3vw; letter-spacing:0; }

#footer { padding:5%; }
#footer p { font-size:0.9em; }
} /* ------------------------------------------------------------ */


@media
(-webkit-max-device-pixel-ratio:5) and (max-width:47.999em),
(max-resolution:500dpi) and (max-width:47.999em) {

.fordesktop { display:none; }
.formobile { display:block; }
.formobileinline { display:inline; }
#bgimgformobile { display:block; }
#footer p br { display:none; }

body { background-color: #F2F3F3 !important; }
html body { background-image:none; }

#header { padding: 1.5em 2em; }
.wordmark { height: 8vw; width:auto; }
#desktopnavigation ul { font-size: 3vw; }
.column { width: 100%; padding:0; margin: 2.5% 0 0 0; }
.widecolumn { width: 100%; padding:0%; }
html#nobg .column { width:100%; }
.columnleft { width: 100%; padding:0; }
#contentbody { font-size:1em; }
h1 { font-size: 4.5vw; }
h2 { font-size: 3.5vw; }
h3 { font-size: 3vw; }
#footer { padding:5%; }
#footer p { font-size:0.9em; }
} /* ------------------------------------------------------------ */

@media (max-width: 40em) {

body { padding:0 5% 0 5%; }

.wordmark { width: 100%; height:auto; margin-bottom:0.25em; }

#desktopnavigation ul { font-size: 5vw; line-height: 1.2; margin-top:0.5em;  }
.gateway #desktopnavigation { display:none; visibility:hidden; }

#topnavigation { display:none; }
.gateway #topnavigation { display:block; }

h1 { margin-bottom:0.25em; word-spacing:-3pt; letter-spacing:-0.333px; }
h2 { word-spacing:-2pt; }

.splitcolumn { width:100% !important; padding-right:0; }

.law-office-location span { display:none; }
.law-office-location { width:100%; }
.law-office-map { width:100%; margin-bottom:0.75em; }

#footer { padding:5%; }
#footer p { font-size:0.7em; }
#footer p br { display:none; }
} /* ------------------------------------------------------------ */

@media (max-width: 32.998em) {

#header { padding: 1em 1.5em; }

#header h2 { display:none !important; } /* check to whether we kept #header h2 */
#contentbody { font-size:0.95em; }
h1 { font-size: 6.5vw; }
h2 { font-size: 5.5vw; }
h3 { font-size: 4.75vw; }
} /* ------------------------------------------------------------ */


