html, body, ul, li {
  margin: 0;
  padding: 0;
}

html, body { width: 100%; height 100%; }

body { 
  font-family: 'Slabo 27px', Courier, sans-serif;
  font-size: 14px;
  color: #1B1B1B;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
/* global classes */
.blue { color: blue }
.hide { display: none; }

/* navigation */
ul a {
  color: #585757;
  padding-bottom: 2px;
  border-bottom: solid 1px #eee;
  text-decoration: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
ul a:hover{
  color: #403F3F;
  border-bottom: 1px solid blue;
}

ul#nav {
  position: fixed;
  left: 60px;
  opacity: 1;
  top: 20px;
  bottom: auto;
  list-style: none;
  display: block;
  width: 310px;
  -webkit-transition: all 1.4s ease-in-out;
  -o-transition: all 1.4s ease-in-out;
  -moz-transition: all 1.4s ease-in-out;
  transition: all 1.4s ease-in-out;
} 
ul#nav li {
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  margin-top: 8px;
  cursor: pointer;
  width: auto;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
ul#nav li:hover { color: blue; border-bottom: 1px solid red; }
strong.nav_heading { display: block; margin-bottom: 15px; margin-top: 15px; }
p { display: block; margin-top: 20px; color: #585757; font-size: 13px; line-height: 15px;}
p#about { 
	color: #999;
	margin-bottom: 0
 }

@media (max-width: 994px){ ul#nav { width: 280px } }
@media (max-width: 960px){ ul#nav { width: 250px } }
@media (max-width: 930px){ ul#nav { width: 220px } }
@media (max-width: 900px){ ul#nav { width: 210px } }
@media (max-width: 880px){ ul#nav { width: 180px } }
@media (max-width: 865px){ ul#nav { opacity: 0;} }

/* logo */
div#logo { 
  background: url('../assets/icons/logo_small.jpg') no-repeat right; 
  background-size: 558px 84px;
  z-index: 999;
  display: block;
  position: fixed;
  bottom: 20px;
  right: calc((100% - 960px)/2);
  width: 558px; 
  height: 84px;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}
div#logo.small { width: 317px; height: 48px; background-size: 278px 42px; }

/* photo gallery */
div#content { display: none;}
div#current_image-gallery_measure { 
  height: auto;
  display: block;
  position: relative;
}

div#current_image, div#current_image img { max-width: 600px; max-height: 600px; }
div#current_image{ 
  position: absolute; 
  top: 20px; 
  overflow: scroll;
  right: calc((100% - 960px)/2);
}
div#current_image img { margin-top: 80px; }
div#current_image-gallery_measure { margin-bottom: 80px}
div#close_content_mobile {
  display: block;
  position: fixed;
  right: calc(((100% - 960px)/4) - 21px);
  top: 20px;
  background-color: #fff;
  z-index: 998;
  cursor: pointer;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

div#close_content_mobile:hover { color: blue; }
div#close_content_mobile:hover span { color: red; }
div#up_down_arrow {
  height: 514px;
  outline: 1px solid #eee;
  border: 3px solid  white;
  position: fixed;
  width: 3px;
  right: calc(((100% - 960px)/4) - 5px);
  background-color: #eee;
  top: 100px;
}
div#scroll_bar_indicator {
  width: 3px;
  height: 3px;
  top: 1px;
  background-color: blue;
  position: relative;
  border-radius: 50%;
  -webkit-transition: top .5s linear;
  -moz-transition: top .5s linear;
  -o-transition: top .5s linear;
  transition: top .5s linear;
}
#scroll_metrics {
  position: fixed;
  color: #eee;
  bottom: 20px;
  left: 60px;
}
	
  

@media (max-width: 640px){ 
  ul#nav { 
    display: block; 
    height: 100%;
    width: 80%;
    opacity: 1;
    left: 10%;
  }
  ul#nav li {
    border-bottom: 1px solid blue;
    display: block;
    height 8%;}
  div#content { display: none;}
  div#current_image {
    width: 90%; height: 85%; left: 5%}
  div#current_image img { max-width: 100%; height: auto;}
  div#logo { 
    right: 10%; 
    bottom: 10px;
    width: 317px; height: 48px; background-size: 278px 42px; }
  div#close_content_mobile {
    width: 90%;
    padding-top: 16px;
    height: 80px;
    top: auto;
    right: auto;
    bottom: 0;
    text-align: center;
  }
}


.no-margin-top { margin-top: 0 !important }
.no-margin-bottom { margin-bottom: 0 !important }