input.comCheckbox, div {border:0 solid red;}
.edit {border:1px solid #000;padding: 5px;border-radius: 7px;display: block;float: right;background-color: #000;}
.edit a, .edit a:visited {color: #fcf228!important;}

/* basics
====================================== */
body {margin: 0;padding: 0;background-color: #fcf228;}
article {padding: 0 0 5em 1em;margin:0 auto 5em auto;}
article img {width: 100%;height: auto;padding: 0; margin: 0;}
.container {margin: 0 auto;max-width: 800px;width: 88%;background-color: #fcf228;border: 1px solid black;}
.container > div {margin: 0 auto 0 auto;}
footer {position: fixed;z-index: 10;bottom: 0; left: 0; width: 100vw; width:100%;background-color: #fcf228;border-bottom: 1px solid #000;border-top: 1px solid #777}
footer > div {margin: 0 auto;max-width: 800px;width: 88%;padding:0.2em 0;}
.hidden {display:none;}
header {padding: 5px 0 6px 0;max-width: 800px;}
header > div {margin:0 20px 0 20px;}
header h1 {margin:0;}
hr {box-sizing: content-box;height: 1px; background-color: #000;margin: 0.5em 0; padding: 0;overflow: visible;border:none;}
span.active img {transition: opacity 0.2s ease-in-out;opacity: 1;width: 200%;padding:1px 0;}
ul, li {list-style: none;margin: 0;}
.wrapper {margin: 0;padding: 0;overflow: hidden;width:100%;}

/* navigation */
nav {margin-bottom: 1em;}
nav h3, nav ul {margin: 0;padding: 0;}
nav h3 {border:1px solid #000;padding: 5px;border-radius: 7px;margin-bottom: 0.3em;}
#pagenav {}
/* pancake */
#pancake {width: 26px;height: 34px;padding:4px 7px 0 0;display: block;}
#pancake div {height: 4px;width: 100%;margin-top: 4px;background-color: #000}
#pancake:hover > div {background-color: #f06;transition: background-color 0.5s;}

/* sites */
.sites {position: fixed;z-index: 5; top: 31px; right: 0;height: 100vh;overflow: scroll;width: 12%;max-width: 300px;margin-right:-17px;}
.site {padding: 0;margin: 0 0 -10px 0;width: 100%;min-width: 80px; height: auto;transition: width 0.2s ease-in-out;}
.site img {width: 100%;height: auto;padding: 0;margin:0;opacity: 0.1;}
.site img:hover {opacity: 1;transition: opacity 0.2s ease-in-out;}

/* contact form */
.comError {margin-bottom: 1em;color: #f00;}
.comTextarea {width:100%;}
fieldset {border: none;padding: 0;margin: 0;}
input {font-size: 20px;}
input#Budget {width: 50px;}
input.comCheckbox {width: 24px;height: 24px;background-color: #ddd;margin: 0;}
input.comSubmit {background-color: #238c23;color: #fff;padding: 10px 40px 10px 10px;text-transform: uppercase;border: none;clip-path: polygon(0% 0%, 100% 0%, 76% 96%, 0% 100%);}
input.comSubmit:hover {background-color:#44ac44;transition: background 0.2s ease-in-out;}
legend {display:none;padding:0;}
.comConnectForm span {padding: 0;margin: 0;}


/* typography
====================================== */
@font-face {font-family: OpenSans-Med; src: url('../../../typeface/bariol_regular-webfont.ttf') format('truetype');font-weight: normal;font-style: normal;}
@font-face {font-family: OpenSansCondensed-Light; src: url('../../../typeface/bariol_regular-webfont.ttf') format('truetype');font-weight: normal;font-style: normal;}

.bars, #close {font-size:40px;font-weight:bold;}
body, .comText, .comTextarea, .comEmail, .comSelect {font: 20px OpenSans-Med, sans-serif;line-height:1.4em;}
footer {font: 12px OpenSans-Med, sans-serif;color: #333;text-transform: uppercase;}
header {line-height:1em;}
h1 {font-size: 30px;font-weight: normal;text-transform: uppercase;line-height: 24px;}
h1 small {font-size: 24px;}
h3, article h3 {font-size: text-transform: uppercase;}
nav {white-space: nowrap;text-transform: uppercase;}
small, .small {font-size: 12px;line-height:12px;}

/* links
====================================== */
a, a:visited {color: #212121;text-decoration: none;font-weight:bold;}
a:hover {color: #f09!important;transition: color 0.2s ease-in-out;}
.bars, #close {}
footer a, footer a:visited {color: #333;}
header a, header a:visited {color:#212121;}
nav li a {text-transform: uppercase;}
nav li a, nav a:visited {color: #212121;}
.site a {background: none;}


/* ==========================================================================
   Additional layout for screen media 800px and lower
   ========================================================================== */
@media only screen and (max-width: 44em) {
html, body {font-size:103%; line-height:103%;}
article {padding: 0 1em 5em 1em;}
.container {margin: 0 auto;width: 100%;border: 0;}
}

@media print {
body {display:none;}
}