@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}
.pic-op {
	opacity: 0.2;
}
.pic-op:hover {
	opacity: 1.0;
}


/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	padding-left: 2.5%;
	padding-right: 2.5%;
	clear: none;
	float: none;
	align-self:center;
}
#div1 {
}
.top {
width: 47.3684%;
height: 47.3684%;
margin-left: 0;
clear: none;
}
.nav-vert {
width: 20%; float:left;
}
.vert-logo {
	width:15%; float:left; clear:none; background-color:#2d2d2d; height:100%; position:fixed; max-width:200px;  
}
.vert-logo2 {
	width:15%; float:left; clear:none; background-color:#2d2d2d; height:100%; max-width:200px;  
}
.omen {
	width:75%; float:right; clear:none;
}
.work {
	width: 80%; float:right;
}
.work-box {
	margin-top:40px;
}
.pic {
	margin-top:15px;
}
.button {
	width:135px;
	height:auto;
	opacity:.5;
}
.button:hover {
	opacity:1.0;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
.sb-butt {
	margin-top:10px; width:100px; height:auto; opacity:.5;
}
.sb-butt:hover {
	opacity:1.0;
}
div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
.overlay {
  height: auto;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 20;
  left: 0;
  background-color:#242424;
  overflow-x: hidden;
  transition: 0.5s;
  border-right:1px #FFFFFF solid;
  border-bottom:1px #FFFFFF solid;
}

.overlay-content {
  position: relative;
  top: 10px;
  width: 60%;
  height:auto;
  text-align: center;
  margin-top: 50px;
}

.overlay a {
  padding: 4px 8px;
  text-decoration: none;
  font-size: 26px;
  color: #777777;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 10px;
  right: 25px;
  font-family:Helvetica, Arial, sans-serif;
  font-size: 15px;
}
.overlay .closelogo {
  position: absolute;
  top: 0px;
  left:0px;
  width:160px;
  height:auto;
  z-index:2;
  }
.menu-marker {
	width:43px;
	height:auto;
	visibility: visible;
}
.menu-bars {
	width:35px;
	height:auto;
	visibility: hidden;
}
.menu-marker:hover {
	opacity:1.0;
}
.menu-box {
	margin-left:-18px;
	margin-top:10px;
	background-color:transparent;
}
.landing-box {
	 width:100%; height:800px;
}
.column {
	flex:95%;
	max-width:95%;
	margin-left:auto;
	margin-right:auto;
}
.column-new {
	flex:90%;
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
.n-nav-column {
	flex:25%;
	max-width:25%;
	margin-left:auto;
	margin-right:auto;
}
.n-nav-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.nav-bar-icon {
	width: 95%;
	height: auto;
	opacity:0.9;
	vertical-align: bottom;
}
.icon-pos {
	padding-top: 4px;
}
.nav-bar-icon:hover {
	opacity:1.0;
}
.menubar {
	height: 24px;
}
	.menubar-new {
	height: 35px;
	width: 80%;
}
.titlebar {
	font-size:14px; 
	letter-spacing:6px;
}
.viewspace {
	margin: 15px;
}
.mainlogo {
	margin-top: 45px;
}
.direside {
	width: 15px;
}
	.direside-new {
	width: 6%;
}
	.direside2 {
	rotate: -90deg;
}
.column img {
  margin-top: 25px;
  vertical-align: middle;
  width: 100%;
  height:auto;
}
.column-new img {
  margin-top: 25px;
  vertical-align: middle;
  width: 100%;
  height:auto;
	border: 1px #FFFFFF solid;
}
.column2 {
	flex:95%;
	max-width:95%;
	margin-left:auto;
	margin-right:auto;
}
.column2 img {
  margin-top: 25px;
  vertical-align: middle;
  width: 100%;
}
.column2-new {
	flex:90%;
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
}
.column2-new img {
  margin-top: 25px;
  vertical-align: middle;
  width: 100%;
	border: 1px #FFFFFF solid;
}
#Sidenav a {
  position: fixed;
  left: -85px;
  transition: 0.3s;
  margin: 0px;
  padding:5px;
  width: 100px;
  text-decoration: none;
  color: white;
  border-radius: 0 5px 5px 0;
  vertical-align:central;
}

#Sidenav a:hover {
  left: -10px;
}

#art {
  top: 120px;
  background-color:#010101;
  border:2px #ffffff solid;
}

#design {
  top: 170px;
  background-color:#010101;
  border:2px #ffffff solid;
}

#wood {
  top: 220px;
  background-color:#010101;
  border:2px #ffffff solid;
}

#web {
  top: 270px;
  background-color:#010101;
  border:2px #ffffff solid;
}
.menu-marker2 {
	width:60px;
	height:auto;
}
.menu-marker2:hover {
	opacity:1.0;
}
.sb-butt2 {
	width:85%; height:auto;
}
.pic-op {
	opacity: 1.0;
}
.pic-op:hover {
	opacity: 1.0;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.top {
	width: 35.8974%;
	height: 35.8974%;
	margin-left: 0;
	clear: both;
}
.nav-vert {
width: 20%; float:left;
}
.vert-logo {
	width:15%; height:100%; float:left; clear:none; background-color:#2d2d2d; position:fixed;
}
.vert-logo2 {
	width:15%; height:100%; float:left; clear:none; background-color:#2d2d2d;
}
.omen {
	width:75%; float:right; clear:none;
}
.work {
	width: 80%; float:right;
}
.work-box {
	margin-top:40px;
}
.pic {
	margin-top:8px;
}
.button {
	width:135px;
	height:auto;
	opacity:.5;
}
.button:hover {
	opacity:1.0;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
.sb-butt {
	margin-top:10px; width:100px; height:auto; opacity:.5;
}
.sb-butt:hover {
	opacity:1.0;
}
div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
.overlay {
  height: auto;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 20;
  left: 0;
  background-color:#242424;
  overflow-x: hidden;
  transition: 0.5s;
  border-right:1px #FFFFFF solid;
  border-bottom:1px #FFFFFF solid;
}

.overlay-content {
  position: relative;
  top: 10px;
  width: 60%;
  text-align: center;
  margin-top: 50px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 26px;
  color: #777777;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 10px;
  right: 25px;
  font-family:Helvetica, Arial, sans-serif;
  font-size: 20px;
}
.overlay .closelogo {
  position: absolute;
  top: 0px;
  left:0px;
  width:180px;
  height:auto;
  z-index:2;
  }
.menu-marker {
	width:60px;
	height:auto;
	visibility: visible;
}
.menu-bars {
	width:0px;
	height:auto;
	visibility: hidden;
}
.menu-marker:hover {
	opacity:1.0;
}
.menu-box {
	margin-left:-15px;
	margin-top:10px;
	background-color:transparent;
}
.landing-box {
	 width:100%; height:1000px;
}
.column {
	flex:90%;
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
}
.column-new {
	flex:90%;
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
.n-nav-column {
	flex:25%;
	max-width:25%;
	margin-left:auto;
	margin-right:auto;
}
.n-nav-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.nav-bar-icon {
	width: 85%;
	height: auto;
	opacity:0.9;
}
.icon-pos {
	padding-top: 4px;
}
.nav-bar-icon:hover {
	opacity:1.0;
}
.menubar {
	height: 35px;
}
	.menubar-new {
	height: 35px;
	width: 70%;
	vertical-align: bottom;
}
.titlebar {
	font-size:16px; 
	letter-spacing:8px;
}
.viewspace {
	margin: 20px;
}
.mainlogo {
	margin-top: 15px;
}
	.direside {
	width: 20px;
}
	.direside-new {
	width: 5%;
}
		.direside2 {
	rotate: -90deg;
}
.column img {
  margin-top: 25px;
  vertical-align: middle;
  width: 90%;
  height:auto;
}
	
.column-new img {
  margin-top: 25px;
  vertical-align: middle;
  width: 90%;
  height:auto;
	border: 1px #FFFFFF solid;
}
.column2 {
	flex:90%;
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
}
.column2 img {
  margin-top: 25px;
  vertical-align: middle;
  width: 90%;
}
.column2-new {
	flex:90%;
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
}
.column2-new img {
  margin-top: 25px;
  vertical-align: middle;
  width: 100%;
	border: 1px #FFFFFF solid;
}
#Sidenav a {
  position: fixed;
  left: -85px;
  transition: 0.3s;
  margin: 0px;
  padding:5px;
  width: 100px;
  text-decoration: none;
  color: white;
  border-radius: 0 5px 5px 0;
  vertical-align:central;
}

#Sidenav a:hover {
  left: -10px;
}

#art {
  top: 120px;
  background-color:#010101;
  border:2px #ffffff solid;
}

#design {
  top: 170px;
  background-color:#010101;
  border:2px #ffffff solid;
}

#wood {
  top: 220px;
  background-color:#010101;
  border:2px #ffffff solid;
}

#web {
  top: 270px;
  background-color:#010101;
  border:2px #ffffff solid;
}
.menu-marker2 {
	width:80px;
	height:auto;
}
.menu-marker2:hover {
	opacity:1.0;
}
.sb-butt2 {
	width:85%; height:auto;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 850px) {

.gridContainer {
	width: 100%;
	max-width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.top {
width: 23.7288%;
height: 23.7288%;
clear: both;
margin-left: 0;
}
.nav-vert {
width: 20%; float:left; height: 100%;
}
.vert-logo {
	width:30%; height:100%; float:left; clear:none; background-color:#2d2d2d; position:fixed;
}
.vert-logo2 {
	width:13%; height:100%; float:left; clear:none; background-color:#2d2d2d;
}
.omen {
	width:75%; float:right; clear:none;
}
.work {
	width: 82%; float:right;
}
.work-box {
	width:100%;
	margin-top:30px;
}
.pic {
	margin-top:10px;
	vertical-align:middle;
}
.button {
	width:135px;
	height:auto;
	opacity:.5;
}
.button:hover {
	opacity:1.0;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
.sb-butt {
	margin-top:5px; width:120px; height:auto; opacity:.5;
}
.sb-butt2 {
	width:85%; height:auto;
}
.sb-butt:hover {
	opacity:1.0;
}
.art {
	transition: transform .2s;background-color:#010101;
}
.art:hover {
	transform:scale(1.5); border:1px #FFFFFF solid; border-radius:10px;
}
div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
.overlay {
  height: auto;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 20;
  left: 20;
  background-color:#242424;
  overflow-x: hidden;
  transition: 0.5s;
  border-right:1px #FFFFFF solid;
  border-bottom:1px #FFFFFF solid;
}

.overlay-content {
  position: relative;
  top: 10%;
  width: 50%;
  text-align: center;
  margin-top: 90px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 26px;
  color: #777777;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay:hover .overlay-content {
	display:block;
}
.overlay .closebtn {
  position: absolute;
  top: 10px;
  right: 45px;
  font-family:Helvetica, Arial, sans-serif;
  font-size: 20px;
}
.overlay .closelogo {
  position: absolute;
  top: 0px;
  left:0px;
  width:250px;
  height:auto;
  z-index:2;
  }
.menu-marker {
	width:70px;
	height:auto;
	visibility:visible;
}
.menu-bars {
	width:0px;
	height:auto;
	visibility:hidden;
}
.menu-marker:hover {
	opacity:1.0;
}
.menu-box {
	margin-left:-15px;
	margin-top:10px;
	background-color:transparent;
}
.landing-box {
	 width:100%; height:1200px;
}
.column {
	flex:45%;
	max-width:45%;
	margin-left:auto;
	margin-right:auto;
}
.column-new {
	flex:45%;
	max-width:45%;
	margin-left:auto;
	margin-right:auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
.n-nav-column {
	flex:25%;
	max-width:25%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 0px;
}
.n-nav-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.nav-bar-icon {
	width: 60%;
	max-width: 120px;
	height: auto;
	opacity:0.7;
	vertical-align: bottom;
}
.icon-pos {
	padding-top: 5px;
}
.nav-bar-icon:hover {
	opacity:1.0;
}
	.menubar {
	height: 30px;
}
	.menubar-new {
	height: 35px;
	width: 70%;
		max-width: 900px;
		vertical-align: bottom;
}
.titlebar {
	font-size:17px; 
	letter-spacing:9px;
}
.viewspace {
	margin: 20px;
}
.mainlogo {
	margin-top: 15px;
}
	.direside {
	width: 20px;
}
	.direside-new {
	width: 3%;
}
	.direside2 {
	rotate: -90deg;
}
.column img {
  margin-top: 25px;
  vertical-align: middle;
  width: 90%;
  height:auto;
}
	
.column-new img {
  margin-top: 25px;
  vertical-align: middle;
  width: 90%;
  height:auto;
	border: 1px #FFFFFF solid;
}
.column2 {
	flex:100%;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}
.column2 img {
  margin-top: 25px;
  vertical-align: middle;
  width: 90%;
}
.column2-new {
	flex:100%;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}
.column2-new img {
  margin-top: 25px;
  vertical-align: middle;
  width: 100%;
	border: 1px #FFFFFF solid;
}
#Sidenav a {
  position: fixed;
  left: -85px;
  transition: 0.3s;
  margin: 0px;
  padding:5px;
  width: 100px;
  text-decoration: none;
  color: white;
  border-radius: 0 5px 5px 0;
  vertical-align:central;
}

#Sidenav a:hover {
  left: -10px;
}

#art {
  top: 120px;
  background-color:#010101;
  border:2px #ffffff solid;
}

#design {
  top: 170px;
  background-color:#010101;
  border:2px #ffffff solid;
}

#wood {
  top: 220px;
  background-color:#010101;
  border:2px #ffffff solid;
}

#web {
  top: 270px;
  background-color:#010101;
  border:2px #ffffff solid;
}
.menu-marker2 {
	width:80px;
	height:auto;
}
.menu-marker2:hover {
	opacity:1.0;
}
	.pic-op {
	opacity: 0.2;
}
.pic-op:hover {
	opacity: 1.0;
}
}