html {
margin:0; padding:0; 
box-sizing: border-box;
height: 100vh; /* set viewport constraint */
min-height: 100%; /* enforce height */
background-color:#010312; color:#EFEFFF;
font-family: "Open Sans", sans-serif;
}

html * { box-sizing: border-box; } /* also in html */

body {
margin:0;
float:left; width:100%;
padding:2.5% 2.5% 0 2.5%;
background-color:#010312;
background-size: cover;
-webkit-background-size: cover; /* safari may need this */
}

html#family-law body { background: #010312 url(../images/K1890005-dwk-family-law-bg.jpg) no-repeat fixed 0 0; background-size: cover; }
html#contact-family-lawyer body { background: #010312 url(../images/img_6404_5dii-dwk-family-law-practice_1920x1275px.jpg) no-repeat fixed 0 0; background-size: cover; }
html#approach-to-family-law body { background: #010312 url(../images/DSC00339-st-lawrence-river-scape.jpg) no-repeat fixed 0 0; background-size: cover; }
html#family-law-areas body { background-image:none; }

.fordesktop { display:block; }
.formobile { display:none; }

h1, h2, h3 { font-family: "Open Sans", sans-serif; }
h1 { font-size: 2vw; margin-top:0; color:#fff; margin-bottom:0.5em; font-weight:400; }
h2 { font-size: 1.6vw; margin-top:0; color:#FDD976; line-height:1; margin-bottom:0; word-spacing:-1px; font-weight:500; }
h3 { font-size: 1.5vw; }

p { font-size:1.125em; margin-top:0.6em; line-height:1.25; }
@media (max-width: 74em) { .column { font-size:0.875em; }}
ul { font-size:1.125em; }
a { color:#fff; }

#header { float:left; width:100%; height:auto; padding: 0; background-color:transparent; }
.wordmark { float:left; height:10.75vw; width:auto; }

#desktopnavigation { float:right; text-align:right; }
#desktopnavigation ul { list-style-type:none; margin:0; padding:0; font-size:2.04vw; line-height:1.125;text-align:right; }
#desktopnavigation ul li a { color:#fff; transition: 0.5s ease; text-decoration:none; text-decoration-color:transparent; font-family: "Open Sans", sans-serif; font-weight:300; word-spacing:-2pt; letter-spacing:-1px; opacity:0.97; }
#desktopnavigation ul li a:hover { transition: 0.5s ease; text-decoration-color:#fff; opacity:1; text-decoration:underline; }
html#approach-to-family-law #desktopnavigation ul li a { color:#222C62; opacity:1; text-shadow: 0 0 75px #ffffff; }
html#approach-to-family-law #desktopnavigation ul li a:hover { color:#222C62; opacity: 1; }

#map { width: 100%; border:none; }

#bgimgformobile { margin: 2vw 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:70vh; }

.column { float:right; width:49.9%; height:auto; padding:2.5%; margin: 2.5% 0 0 0; background-color:rgba(1, 3, 18,0.5);}
html#family-law-areas .column { padding:0; }
.columnleft { float:left; width:47.4%; height:auto; margin: 2.5% 0 0 0; background-color:rgba(1, 3, 18,0.67);}
.splitcolumn { width:44.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; }
.squareimages { float:left; width:100%; height:auto; }
.squareimages img { float:left; width:100%; height:auto; margin-bottom:5%; }

#vooter { clear:both; float:left; width:100%; padding:2.5% 2.5%; margin-top:2.5%; height:auto; background-color:rgba(1, 3, 18,0); }
html#family-law #vooter {  background-color:rgba(1, 3, 18,0.1675); }
html#contact-family-lawyer #vooter {  background-color:rgba(1, 3, 18,0.33); }
#vooter p { font-size:0.8em; opacity:0.8; }
html#contact-family-lawyer #vooter p { opacity:1; }

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


@media
(-webkit-max-device-pixel-ratio:3) and (max-width:47.999em), 
(max-resolution:300dpi) and (max-width:47.999em)
{

.fordesktop { display:none; }
.formobile { display:block; }
#bgimgformobile { display:block; }

html#family-law body { background-image:none; }
html#contact-family-lawyer body { background-image:none; }
html#approach-to-family-law body { background-image:none; }

html#approach-to-family-law #desktopnavigation ul li a { color:#fff; }
html#approach-to-family-law #desktopnavigation ul li a:hover { color:#fff; }
html#approach-to-family-law #desktopnavigation ul li a { text-shadow: none; }

#header { padding: 1em 0; }
.wordmark { height: 16.5vw; }
#desktopnavigation ul { font-size: 3.5vw; }
.column { width: 100%; padding:0%; margin: 2.5% 0 0 0; }
.widecolumn { width: 100%; padding:0%; }
html#family-law-areas .column { width:100%; }
.columnleft { width: 100%; padding:0; }
.squareimages img { width:48.75%; margin-right:2.5%; margin-bottom: 2vw; }
.squareimages img:last-child { margin-right:0%; }
#contentbody { font-size:1em; }
h1 { font-size: 4.5vw; }
h2 { font-size: 3.5vw; }
h3 { font-size: 3vw; }
#vooter p { font-size:0.9em; }
}

@media 
(-webkit-max-device-pixel-ratio:1) and (max-width:63.998em), 
(max-resolution:100dpi) and (max-width:63.998em)
{

.fordesktop { display:none; }
.formobile { display:block; }
#bgimgformobile { display:block; }

html#family-law body { background-image:none; }
html#contact-family-lawyer body { background-image:none; }
html#approach-to-family-law body { background-image:none; }

html#approach-to-family-law #desktopnavigation ul li a { color:#fff; }
html#approach-to-family-law #desktopnavigation ul li a:hover { color:#fff; }
html#approach-to-family-law #desktopnavigation ul li a { text-shadow: none; }

#header { padding: 1em 0; }
.wordmark { height: 16.5vw; }

.column { width: 100%; padding:0%; margin: 2.5% 0 0 0; }
.widecolumn { width: 100%; padding:0%; }
.columnleft { width: 100%; padding:0; }
.squareimages img { width:48.75%; margin-right:2.5%; margin-bottom: 2vw; }
.squareimages img:last-child { margin-right:0%; }

#desktopnavigation ul { font-size: 3.5vw; }
#contentbody { font-size:1.25em; }

h1 { font-size: 4.5vw; }
h2 { font-size: 3.5vw; }
h3 { font-size: 3vw; }
#vooter p { font-size:0.9em; }
}

@media (max-width: 40em) {
.splitcolumn { width:100% !important; padding-right:0; }
#vooter p { font-size:0.7em; }
}

@media (max-width: 32.998em) {
.wordmark { height: 24.25vw; }
#desktopnavigation ul { font-size: 4.875vw; line-height: 1.167; }
#contentbody { font-size:1em; }
h1 { font-size: 6vw; }
h2 { font-size: 5vw; }
h3 { font-size: 4vw; }
#vooter p { font-size:0.65em; }
}