body {
    font-family: 'Muli';
    font-variant: lighter;
    font-weight: lighter;

}
.portfolioFilter {
display: none;
}



.portfolioFilter a {
    margin-right: 10px;
    color:#666;
    text-decoration:none;
    display: inline;
}


.portfolioFilter a.current {
    text-decoration: underline;
}

img {
    margin:10px;
    width: 75%;
    height: auto;
}
div.portfolioContainer{
  margin:auto;
  margin-bottom: 200px;
}

.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

/* Hamburger Menu */

/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT license
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

body
{
  margin: 0;
  padding: 0;

  /* make it look decent enough */


  font-family: "Muli", sans-serif;

  overflow-x: hidden; /* needed because hiding the menu on the right side is not perfect,  */
}

#menu li{

    list-style-type:none;
}

#menu a, #menu a:visited {
    display:block;
	  width:9em;
    font-family: "Muli", muli, verdana, sans-serif; /* ADDED */
	  font-size:1.1em; /* ADDED */
    font-variant: lighter;
    font-weight: lighter;
    line-height: 2em;
	  text-align:center; /* ADDED */
	  text-decoration:none; /* ADDED */
    color:#626262; /* ADDED */
    letter-spacing: 2px;

}

#menu a:hover {
color: #FFD4AD;
}

#menu a:active {
text-decoration:underline;
}



#menuToggle
{
  display: block;
  position:fixed;
  top: 22px;
  right: 30px;

  z-index: 1;

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

#menuToggle input
{
  display: block;
  width: 28px;
  height: 22px;
  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: 23px;
  height: 2px;
  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-last-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(0px, 0px);
  background: #626262;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-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-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(1px, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 250px;
  margin: -100px 0 0 0;
  padding: 50px;
  padding-top: 125px;
  right: -100px;

  background: #ffffff;
  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);
}



/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}