a,b,body,div,h1,h2,h3,h4,h5,h6,hr,html,i,img,li,ol,p,span,table,tbody,td,tfoot,th,thead,tr,u,ul
{
  border: 0;
  margin: 0;
  padding: 0;
}

html,body {
  height: 100%;
  width: 100%;
}
b,strong {
  font-weight:700;
}
/*
Colors:

*/




/*
HTML BITS 
*/
a:link,a:visited,a:active,a:hover {text-decoration: none; color:#bfbfb8;}

body{
	height:100%;
	width:100%;
	background:  black;
	font-family: 'Open Sans',Verdana,Arial,Helvetica,sans-serif;
  font-weight: 400;
	font-size: 13px;
  color:black;
  -webkit-font-smoothing: antialiased;

}

h1 {
	font-size:18px;
  font-weight:700;
}

h2 {
	font-size:16px;
	font-weight:700;
}
p{
	margin-bottom: 10px;
}
div.container{
  position: relative;
  width: 100%;  
  height: 100%;
}
#mobile_nav{display: none;}
div#nav{
  position:relative;
  left: 0;
  top: 0;
  bottom: 0;
  float: left;
  height: 100%;
  width: 195px;
  padding-right: 35px;
  text-align: right;
  background-color: white;
  font-size: 14px;
  letter-spacing: 1px;
  z-index: 1000;
}

div#nav li a{
  padding:15px 0;
  display: block;
  color: black;
}
div#nav a{
  color: black;
  transition: all .3s ease-in;
}
div#nav li a:hover,div#nav li a.active,div#nav h1 a:hover{
	color:#bfbfb8;
	cursor: pointer;
}

div#nav h1{
  margin-top:55px;
}

div#contact{
  position: absolute;
  bottom: 20px;
  right:35px;
  width: 200px;
}
div#contact img{
  float: right;
}
ul#subNav{
	position: absolute;
	top:300px;
	background-color:white;
	left:230px;
	list-style-type: none;
	color:black;
	font-size: 12px;
	z-index: 500;
}

ul#subNav li{
	height: 25px;
	line-height: 25px;
	padding: 0 25px;
	border-top: 1px solid black;
  white-space: nowrap;
}
ul#subNav li:hover{
	background-color:  #2c3029;
	cursor: pointer;
}
div.twoLeft{
  position: relative;
  width: 125px;
  margin-left: 35px;
  float: left;
  color: white;
  margin-top:50px;
}
div.fourLeft{
	position: relative;
	width: 250px;
	margin:0 35px;
	float: left;
	color: white;
  margin-top:50px;
}
div.eightLeft{
  position: relative;
  width: 550px;
  margin:0 35px;
  float: left;
  color: white;
  margin-top:50px;
  letter-spacing: .5px;
}

.ml{margin-left: 230px;}
#filler{position: fixed;top: 0;left: 0;
bottom: 0;
width: 230px;
background-color: white;
z-index: 0;
}
h2.title{
margin-bottom: 20px;

}
div#infoText{
	line-height: 2.0em;
  -webkit-font-smoothing: antialiased;
}
div.infoText{
  line-height: 2.0em;
  -webkit-font-smoothing: antialiased;
}

div.right{
  margin-top: 55px;
  width:auto;
  overflow:hidden;

}

div.eightRight{
	position: relative;
	float: right;
	width: 694px;
	margin-right: 20px;
	height: 100%;
	color:white;
}
div.gallThumbs img{
	float: left;
	background-color: #212222;
	padding: 1px;
	margin: 2px 0 0 2px;
}

div#tag{
  margin-bottom:5px;
  color:#555555;
}

div#tag a{
  padding: 3px 10px;
  margin-left: 5px;
  color: #555555
}
div#tag a.active{
  background-color:#1f1f1f;
}
/*
Colors:

*/

/* slideshow */
div.slide-wrap{
  position: relative;
  margin-left: 230px;

  text-align: center;
  background-color: black;
  height:100%;
  overflow: hidden;
  vertical-align: middle;
}

div.cycle-slideshow{
  position: relative;
  vertical-align: middle;
  height: 100%;
}
section.caption{
  position:fixed;
  bottom:20px;
  right: 150px;
  color:white;
  text-align: right;
}

div.cycle-slideshow div{
  width: 100%;
  vertical-align: middle;
  height: 100%;
  text-align: center;
}
img.w100{
  width: 100% !important;
  max-width: 100%;
  vertical-align: middle;
}
img.h100{
  height: 100% !important;
  max-height: 100%;
  vertical-align: middle;
}
div#pp{
  position: absolute;
  top: 0;
  right: 0;
  width: 55px;
  height: 55px;
  z-index: 200;
    background-color: rgba(0, 0, 0, .5);
}
div#pp:hover{cursor: pointer;}

/* pager */

.cycle-pager { 
    position: absolute;
    width:55px; 
    z-index: 107; 
    height: 100%;
    display: block;
    text-align: right;
    right: 0;
    top: 55px;
    background-color: rgba(0, 0, 0, .5);

}

.cycle-pager span{ 
    display: inline-block;
    width: 55px;
    height:12px;
    margin-bottom: 10px;
    background-image: url('images/nav-dot.png');
    background-repeat:  no-repeat;
    background-position:bottom;
    cursor: pointer; 
}
span.cycle-pager-active {
  background-position:top;
}

/*
clearfix
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.floatRight{float:right;}
.floatLeft{float: left;}
.clearBoth{clear:both;}
.clear{clear:both;}

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

li.contact,li.home{display: none;}
	#menuToggle input{display: none;}
@media all and (max-width: 859px){

	body{font-size: 15px;}
	h1{font-size:2em;}
	h2{font-size:1.5em;}
	h3{font-size:1.2em;}
	h4{font-size:1.1em;}
	li.contact,li.home{display: block;}
	#filler{display: none;}
	div#nav br{display: none;}
	div#nav{
	float: none;
    width: 100%;
    text-align: left;
    padding: 10px 5%;
    box-sizing: border-box;
    height: initial;
	}
	div.slide-wrap{margin-left: 0;}

	#nav .desktop{display:none;}
 
 	#home #nav_home{
 		display: none;
 	}
    #mobile_nav{
        display: block;
        text-align: right;
        padding-right: 5%;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        width: 95%;
        position: absolute;
        left: 0;
        right: 0;
        text-transform: uppercase;
        font-size: 17px;
    }
    #mobile_nav .icon{
        position: relative;
        font-size: 1.4em;
        float: right;
        padding-left: 5px;
    }
    #mobile_nav .nav{
		position: absolute;
        width: 100%;
        top: 46px;
        background-color: rgb(255 255 255 / 90%);
        padding: 10px 0;
        display: none;
    }
    #mobile_nav .nav li{
        float: none;
        padding: 0;
        height: inherit;
    }
    #mobile_nav .nav li a{
        display: block;
        padding:0 5%;
    }


	div#nav h1{
        margin-top: 12px;
        text-align: right;
        float: left;
        font-size: 1.5em;
	}
	div#pp{top: 47px;}
	div.fourLeft{
		float: none;
		width: 100%;
		padding: 40px 5%;
		box-sizing: border-box;
		margin: 0;
	}
	.ml {
	    margin-left: 0;
	}
	div.right{
	margin: 0;
	padding: 0 5%;

	}


	#menuToggle
	{
	display: block;
	position: relative;
	top: 0;
	left: 0;

	z-index: 1;

	-webkit-user-select: none;
	user-select: none;
	}




	#menuToggle input
	{
	  display: block;
	  width: 40px;
	  height: 32px;
	  position: absolute;
	  top: -7px;
	  left: -5px;
	  
	  cursor: pointer;
	  
	  opacity: 0; /* hide this */
	  z-index: 2; /* and place it over the hamburger */
	  
	  -webkit-touch-callout: none;
	}

	/*
	 * Just a quick hamburger
	 */
	#menuToggle span
	{
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  position: relative;
	  
	  background: #cdcdcd;
	  border-radius: 3px;
	  z-index: 1;
	  transform-origin: 4px 0px;
	  
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	              opacity 0.55s ease;
	}

	#menuToggle span:first-child
	{
	  transform-origin: 0% 0%;
	}

	#menuToggle span:nth-child(2)
	{
	  transform-origin: 0% 100%;
	}

	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span
	{
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: #232323;
	}

	/*
	 * But let's hide the middle one.
	 */
	#menuToggle input:checked ~ span:nth-child(3)
	{
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}

	/*
	 * Ohyeah and the last one should go the other direction
	 */
	#menuToggle input:checked ~ span:nth-child(2)
	{
	  transform: rotate(-45deg) translate(0, -1px);
	}

	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	#menu
	{
	  position: absolute;
	  width: 300px;
	  margin: -100px 0 0 -50px;
	  padding: 50px;
	  padding-top: 125px;
	  
	  background: white;
	  list-style-type: none;
	  -webkit-font-smoothing: antialiased;
	  /* to stop flickering of text in safari */
	  
	  transform-origin: 0% 0%;
	  transform: translate(-100%, 0);
	  
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}

div#contact{
    display: none;
}

	/*
	 * And let's slide it in from the left
	 */
	#menuToggle input:checked ~ ul
	{
	  transform: none;
	}
	}