/* -- Begin Browser Style Reset -- */
 /* ...by  Creative Graphic Solutions.BIZ */

/* Browser Window and General Defaults */
* {
position: static; vertical-align: bottom;
box-sizing: border-box; margin: 0; border: 0 solid black;
padding: 0; background-clip: border-box;
font: inherit;  line-height: inherit; word-spacing: inherit; letter-spacing: inherit;
}
html {
position: absolute; width: 100%; height: 100%;
overflow-x: auto; /* Show a horizontal  browser scroll bar when needed. */
overflow-y: scroll; /* Always show a vertical browser scroll bar to prevent  short page shifting, and also to allow accurate calculation of vw units.  (On browsers which float and hide scrollbars, this won't matter anyway.) */
}
body {
position: relative;
min-height: 100% ;  /* Fill the screen vertically even if there is little  content. */
max-height: 999999px;  /* Prevent font boosting on small screen devices. */
background: white;
font-family: Arial, Helvetica, Liberation-Sans, sans-serif;  /* Set  default font face. These Windows, Mac, and Linux varients are metrically identical. */
font-size: 18px;  line-height: 1.15; Xword-spacing: normal; Xletter-spacing: normal; /* (Letter and word spacing might cause issues in Opera.) */
font-weight: normal;  font-style: normal;  text-decoration: none; color: black;
/* ...Set font defults. Note: Using px for font size on body gives you an absolute reference for scaling. */

}

/* Images and Paragraphs*/
img {
display: block;
vertical-align: baseline; /* Set vertical alignment for when inline block is used. */
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1em; font-size: 150%;
}
p {
margin-bottom: 1em;
}

/* Tables */
table {
table-layout: fixed; border-spacing: 0; border-collapse: collapse; empty-cells: show;
}
td {
vertical-align: middle; text-align: center;
}

/* Links */
a:link, a:focus, a:visited {
color: inherit;  text-decoration: inherit; /* Remove browser link styling... */
}
a:hover, a:active {
color: inherit; text-decoration: underline; /* ...but still underline on hover. */
}

/* -- End Browser Style Reset -- */




/* -- Begin Load Fonts -- */

@font-face {
font-family: 'Varta';
src: local('Varta'), local('Varta-Regular'),  /* Use local font if it exists... */
url('fonts/varta-regular-webfont.woff') format('woff');  /*...otherwise use server font. */
}
@font-face {
font-family: 'Fredoka One';
src: local('Fredoka One'), local('FredokaOne-Regular'),  /* Use local font if it exists... */
url('fonts/fredokaone-regular-webfont.woff') format('woff');  /*...otherwise use server font. */
}

/* -- End Load Fonts -- */




/* -- Begin General Styling -- */

body {
font-size: 10vw;  color: #222; /* Set font defaults. */
background: hsl(43.8, 16.9%, 69.8%);
}
#page {
position: relative; /* Set anchor point. */
background: white;
margin-bottom: 0;
margin-left: auto; margin-right: auto; /* Center page content if less then 100% width of browser window. */
width: 100%;
max-width: 900px; /* Set default maximum page size for wide browser windows. */
}
#header  {
position: relative; /* Set anchor point. */
overflow: hidden;
}
#main-article {
margin: 7.3% 7.3% ;
font-family: 'Varta', 'Trebuchet MS'; font-size: 65%;
}
h1 {
font-family: 'Fredoka One'; font-size: 107%; color: hsl(19, 74%, 31%);
margin-top: 1.45em;
padding-top: 0.72em; /* Make internal linking pretty.*/
}
.highlight {
background: hsl(47, 33%, 77%);
font-size: 94%;
padding:  0.65em;
}
#contact-info {
color: hsl(38, 57%, 41%);
font-size: 100%;
}
#contact-info   ul {
list-style-type: none;
}
#contact-info   .address   li:nth-of-type(1) {
font-weight: bold;
}
#contact-info   .address   li:nth-of-type(2) {
font-weight: normal; font-style: italic;
font-size: 90%;
}
#contact-info   .address   li:nth-of-type(4) {
margin: 1em 0;
}
#contact-info   .contacts  {
font-family: 'Fredoka One';
transform: scaleX(0.90); transform-origin: 0% 0%;
}
#contact-info   .contacts   li:nth-of-type(2n-1) {
margin-top: 0.5em;
}
#contact-info   .contacts   li:nth-of-type(2) {
font-size: 186%;
}
.facebook {
transition: transform 0.5s;
}
.facebook > .facebook-icon,
.facebook > .facebook-text {
display: inline-block;
font-family: 'Fredoka One'; color: hsl(205, 84%, 28%);
vertical-align: middle; text-align: center;
}
.facebook > .facebook-icon {
width: 52px; height: 65px;
}
.facebook > .facebook-text {
margin-left: 0.3em;
}
.facebook > .facebook-text:hover {
text-decoration: none;
}
label {
cursor: pointer;
}
/* -- End General Styling -- */







/* -- Begin General Mobile -- */

#header   .header-image {
width: 150%; margin-left: -25%; /* Size and crop. */
margin-bottom: -1.8em;
}
#header   .logo-graphic {
display: block; margin: 0 auto 0.35em; height: 4.6em;
}
#header   .logo-text {
display: block; margin: 0 auto; height: 2.7em; transform: translateX(0.25em);
}
#header   .phone {
text-align: center;
margin: 0.1em auto 0; transform: scaleX(0.95);
font-size: 80%; color: hsl(60,0%,44%);
}
#header   .arrow-down {
display: none; position: absolute; bottom: 0; left: 0; right: 0;
width: 1.6em; height: auto; margin: 4.15% auto;
}
#menu  {
position: absolute; top: 0; width: 100%;
font-size: 90%; font-family: 'Georgia', 'Charis SIL', 'Times New Roman', 'Liberation Serif', serif; color: white;
}
#menu   .hamburger-button {
position: absolute;
width: 13.6%; height: auto; margin: 4.8%;
filter: drop-shadow( -3px 3px 2px hsl(0, 0%, 75%) );
transition: transform 0.5s;
}
#menu   .hamburger-button:hover {
transform: scale(1.1);
}
#menu   input#activate-flyout:not(:checked) ~ ul {
visibility: hidden;
opacity: 0; /* Note: use opacity to hide transition when switching from mobile to desktop. */
}
#menu   input#activate-flyout:checked ~ ul {
background: hsl(0, 0%, 66%); transition: background 0.2s;
}
#menu   ul {
list-style-type: none;
padding-left: 2.5em; /* Position menu list to right of hamburger button. */
}
#menu   ul   a {
display: inline-block; /* Place each menu item on its own line, and make right-hand margins non-clickable. */
padding: 0.065em 0;
}
.facebook {
margin-top: 1em;
font-size: 165%; /* Size with font. */
}
.facebook > .facebook-icon {
transform: scale(1.35);
transform-origin: center right;
}
#contact-info   .facebook {
display: none;
}
img[src*="icon-call"],
img[src*="icon-email"] {
display: inline-block;
width: 5em; height: auto;
border-radius: 17%; border:  0.1em solid hsl(56, 35%, 96%);
padding: 1%; background: linear-gradient( hsl(56, 35%, 89%), white );
box-shadow: 4px 4px 10px lightgrey;
transition: transform 0.5s;
}
img[src*="icon-call"] {
margin-right: 10%;
}
img[src*="icon-call"]:hover,
img[src*="icon-email"]:hover,
.facebook:hover {
transform: scale(1.1);
}
h1#services {
color: hsl(30, 18%, 43%);
}
#service-list {
text-align: center;
}
#service-list   ul {
list-style-type: none; color: hsl(23, 75%, 29%);
}
#service-list   li {
display: inline-block; /* If a bulleted item wraps then display next one on its own line. */
}
#service-list   li:before {
content: "\2022  \00A0";  /*  Apply custom bullet points. (Bullet, disc, and space  = \2022  \25CF  and  \00A0.) */
}

#page-tag {
text-align: right;
}
#page-tag > a> img:first-of-type {
display: none;
}
#page-tag > a  > img:last-of-type {
display: inline-block;
width: 2em; height: auto;
margin-right: 2.2%;
}

/* -- End General Mobile -- */


/* -- Begin Mobile Aspect Ratios -- */

@media (min-aspect-ratio: 100/170) {
/* ...If window is short display just the page header.   */
#header {
min-height: 100vh;
}
#header   .arrow-down {
display: block;
}
}
@media (min-aspect-ratio: 100/140) {
/* ...Hide the scoll arrow if space gets too tight.   */
#header   .arrow-down {
display: none;
}
}
@media (min-aspect-ratio: 100/111),
(min-width: 601px)  {
/* ...Approching landscape ratio, so use wide logo and adjust element sizes. Go ahead use these styles for desktop too. */
body {
font-size: 7.5vw;
}
#header {
min-height: 0;
}
#header   .header-image {
width: 108%; margin-left: -4%; margin-top: -0.58em; /* Size and crop. */
margin-bottom: -2.37em;
}
#header   .logo {
text-align: center; margin-bottom: -0.2em;
}
#header   .logo-graphic,
#header   .logo-text {
display: inline-block; height: 2.94em;
margin: 0; transform: none;
}
#header   .phone {
text-align: center;
margin: 0.14em 0 0 1.62em;  font-size: 0.8em;
}
#header   .arrow-down {
width: 10%; margin-bottom: 3%;
}
#menu  {
font-size: 105%;
}
#menu   .hamburger-button {
width: 8.3%; margin: 3.5%;
}
}
@media (min-aspect-ratio: 100/68) {
/* ...In landscape, if window is short display just the page header. */
#header {
min-height: 100vh;
}
#header   .arrow-down {
display: block;
}
}
@media (min-aspect-ratio: 100/58) {
/* ...In landscape, hide the scoll arrow if space gets too tight. */
#header   .arrow-down {
display: none;
}
}

/* -- End Mobile Aspect Ratios -- */








/* -- Begin Desktop -- */
@media screen and (min-width: 601px) {


body {
font-size: 4.45vw;
}
#header {
min-height: 0;
}
#header   .arrow-down {
display: none;
}
#header   .logo-container {
font-size: 1.68em;
}
h1 {
font-size: 140%;
}
#header   .header-image {
width: 100%; margin: 0; /* Size and crop. */
margin-bottom: -4em;
}
#main-article {
position: relative; /* Set anchor point. */
margin: 5%;
}
.highlight {
font-size: 110%;
}
#main-article > #column-container {
margin-right: 45%;
}
h1#services {
margin-top: 0.3em;
font-size: 125%;
}
#main-article > #service-list {
position: absolute; z-index: 100; top: 0; right: 0; width: 40%;
}

#service-list   li {
display: block; white-space: normal;
margin-bottom: 0.4em;
font-size: 118%; letter-spacing: -0.035em; transform: scaleY(1.08);
}


.icons {
display: inline-block;
width: 18%;
font-size: 130%;
clear: both; /* Clear Facebook float in desktop view. */
}
img[src*="icon-call"],
img[src*="icon-email"] {
width: 73%;
margin-top: 10%;
}
#contact-info   .contacts  {
display: inline-block; vertical-align: top;
font-size: 130%;
}

.facebook {
font-size: 120%; /* Size with font. */
margin-top: 0.4em;
}
.facebook   .facebook-icon {
transform: none;
}

#contact-info {
position: relative;
}
#contact-info   .facebook {
display: block; float: right;
margin-top: 2.5em;
width: 40%; text-align: center;
}



#menu {
font-size: 0.62em; font-weight: bold;
width: auto;  /* Reset. */
top: 0.4em; left: 0.7em; /* Position menu.*/
right: 1.5em; /* Allow room for transition flourish. */
overflow: hidden; /* Allow menu to slide away. */
padding: 0.1em 0 0.3em; /* Allow some top and bottom padding for the hamburger button shadow. */
}
#menu   label {
display: inline-block;
width: 2em; height: auto; margin-left: 1.5%;
margin-right: -1.1em; /* Make hamburg button take up no space without displaying absolute, (so we can do a vertical align).*/
vertical-align: middle;
}
#menu   .hamburger-button {
position: relative; z-index: 1; /* Display above menu. */
width:100%; height: auto; /* Fit to label container. */
}
#menu   ul {
display: inline-block;
vertical-align: middle;
padding-left: 3.5em; /* Create blank area for underneath hamburger button. */
background: hsl(0, 0%, 66%); /* Make backgound stick since we're sliding, not fading. */
}
#menu   input#activate-flyout:not(:checked) ~ ul {
visibility: visible;
margin: 0 100% 0 -100%; /* Slide away. */
transform: translateX(0);  /* Flourish. */
opacity: 0; /* Shouldn't really need this here, (since we're sliding away) but use as a safe fall-back. */
transition: margin 0.4s 0.1s, transform 0.1s, opacity 2s; /* Note: use opacity to hide trasition when switching from mobile to desktop. */
}
#menu   input#activate-flyout:checked ~ ul {
visibility: visible;
margin: 0;  /* Slide out. */
transform: translateX(-5%);  /* Flourish. */
transition: margin 0.4s, transform 0.2s 0.4s;
}
#menu   ul   li  {
display: inline;
}
#menu   ul   li   a {
display: inline-block;
padding: 0.1em 0  0.14em;
}
#menu   ul   li:after {
content: "|\00A0";
display: inline-block;
padding: 0.1em; transform: translateY(-0.07em);
}
#menu   ul   li:last-of-type:after {
content: "\00A0";
}

#page-tag {
text-align: right;
}
#page-tag > a> img:first-of-type {
display: inline-block;
width: 6em; height: auto;
margin-right: 1.7%;
}
#page-tag > a  > img:last-of-type {
display: none;
}

}

@media screen and (min-width: 901px) {
/*...Browser window is wider than page. */
body {
font-size: 40.75px;
}
}

@media screen and (min-width: 926px) {
/* ...Side margins are beginning to show (estimating the scroll bar width). */
#page {
filter: drop-shadow( -3px 3px 12px hsl(0, 0%, 45%) );
margin-top: 1vw; margin-bottom: 1vw;
}
#page-tag {
transform: translateY(120%);
}
}

/* -- End Desktop -- */