
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

body {padding:0; margin:0; font-family:"Trebuchet MS"; font-size:1.2em; }

.topbar {width:100%; height:50px; background-color:#2e3844; color:#dadedf; text-align:center; font-size:1.4em; line-height:100%; padding-top:20px; z-index:2;}

.holder {width:100%; position:relative;}

#navbarback {width:225px; background-color:#2e3844; position:fixed; top:0; bottom:0; left:0; z-index:1;}
#navbar {width:225px; background-color:#2e3844; font-size:1.2em; line-height:2em; position:absolute; top:0; bottom:0; left:0; color:#dadedf;  z-index:2;}
#navbar a {text-decoration:none; color:#dadedf; font-size:0.7em; }

#content {width:calc(100% - 226px); color:#2e3844; position:absolute; top:0; bottom:0; left:226px;}
#contentover {width:calc(100% - 226px); color:#2e3844; position:absolute; top:0; bottom:0; height:100%; left:226px; background:rgba(256, 256, 256, 0.80); z-index:3;}
#content a {color:#2e3844}

.padding10 {padding:10px;}
.leader {width:100%; background:rgba(256, 256, 256, 0.80); padding:30px 0; font-size:1.8em; }
.maincontent {width:100%; background:rgba(256, 256, 256, 0.80); margin-top:300px; line-height:1.8em; font-size:0.9em;}

.mainsection {border-top:1px solid #7bd7c0; width:calc(100% - 10px); padding-left:10px; }
.innersection {border-top:1px solid #7bd7c0; width:calc(100% - 30px); padding-left:10px; margin-left:20px; font-size:0.9em; font-style:italic;}

.portfoliothumb {margin:0 20px; border:5px solid #000000; width:calc(100% - 50px);}

.desktoponly {display:block;}
.mobileonly {display:none;}
.open {display:block;}
.closed {display:none;}
.burger {position:absolute; right:10px;}
.burger img {height:30px;}

video {width:400px; max-width: 100%; height: auto; float:right;}

@media only screen and (min-width:769px) {
.topbar {position:fixed;}
#content {padding-top:70px;}
#navbar {padding-top:70px;}

.contentimage {float:right; width:320px; margin:0 20px 20px 20px;}
}

@media only screen and (min-width:769px) {
body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-attachment: fixed;
    background-image: url("images/feature.jpg");
}
}

@media only screen and (max-width:768px) {
.maincontent {margin-top:0px; }
#content {padding-top:70px;}
.topbar {position:fixed;}
.leader {font-size:1.2em; padding:20px 0;}
.desktoponly {display:none;}
.mobileonly {display:block;}
#content {left:0px; width:100%; }
.contentimage {width:100%;}
}
