/* rules for mobile */

/* work this in properly */
.index-toggle { display: none; }

/* @media only screen and (min-device-width: 320px) and (max-device-width: 568px) */
@media only screen and (min-width: 320px) and (max-width: 568px) 
{
	body 
	{
		-webkit-text-size-adjust: 100%;
	}
	
	#index p, #exhibit p { width: auto; }
	
    #index 
    {  
    	left: -265px; /* a little extra because of possible shadow */
    	width: 260px;
    	overflow: scroll;
    	
		/* momentum scroll ios */
		overflow-y: scroll; /* has to be scroll, not auto */
		-webkit-overflow-scrolling: touch;
    }
    
    #exhibit 
    { 	
    	margin-left: 0; 
    	overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
    }
    
    .index-toggle 
    { 
    	display: block; 
    	height: 35px; 
    	width: 35px; 
    	background-color: white; 
    	position: fixed; 
    	bottom: 12px; 
    	right: 12px; 
    	z-index: 50; 
    	text-indent: -9999px; 
    }
    
    #exhibit span.manifesto { font-size: 33px; line-height: 39px; padding-right: 12px; white-space: nowrap; letter-spacing: 0px; display: block; }
}


@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px)
{
		body 
	{
		-webkit-text-size-adjust: 100%;
	}
	
	#index p, #exhibit p { width: auto; }
	
    #index 
    {  
    	left: -265px; /* a little extra because of shadown */
    	width: 260px;
    	overflow: scroll;

		/* momentum scroll ios */
		overflow-y: scroll; /* has to be scroll, not auto */
		-webkit-overflow-scrolling: touch;
    }
    
    #exhibit 
    { 	
    	margin-left: 0; 
    	overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
    }
    
    .index-toggle 
    { 
    	display: block; 
    	height: 35px; 
    	width: 35px; 
    	background-color: white;  
    	position: fixed; 
    	bottom: 12px; 
    	right: 12px; 
    	z-index: 50; 
    	text-indent: -9999px; 
    }
    
    #exhibit span.manifesto { font-size: 33px; line-height: 39px; padding-right: 12px; white-space: nowrap; letter-spacing: 0px; display: block; }
}

#nav-toggle { position: absolute; left: 5px; top: 6px; }
#nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: black;
  position: absolute;
  display: block;
  content: '';
}

#nav-toggle span:before {
  top: -7px; 
}
#nav-toggle span:after {
  bottom: -7px;
}

/* */

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  -webkit-transform: translateY(-7px) rotate(-45deg);
  -ms-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
  top: 7px;
}