/* FULL SIZE */
@media only screen and (min-width: 800px) {
	.hamburger {
		display: block;
	}
	
	.hamburger INPUT {
		display: none;
	}
	
	.navi{
		z-index:2;
		border: none;
		background: none;
	}
	
	.navi li, .navi .dropable {
	    background-color: none; /* #D4DEEC; */
	}
	
	.navi li,
	.navi .dropable{
		float:left;
		margin:0 0 0 4px;
		font:13px Trebuchet MS;
		font-weight: 700;
		-moz-text-shadow:none;
		-webkit-text-shadow:none;
		text-shadow:none;
		list-style-type: none;
	}
	
	/*title dropable box*/
	.navi li:hover{position:relative;}
	.navi li a,
	.navi .dropable a{
		margin:0 0 0 2px;
		padding:4px 5px 3px 3px;
		position:relative;
	}
	
	.navi .dropable a em{
		background:url(arrow.png) no-repeat;
		position:absolute;
		top:13px;
		left:83px;
		width:5px;
		height:3px;
	}
	
	.navi .dropable a:hover em,
	.navi li.dropable:hover a em{
		background:url(arrow-hover.png) no-repeat;
		position:absolute;
		top:12px;
		left:84px;
		width:5px;
		height:3px;
	}
	.navi li a{
		display:block;
		color:#543617;
		-moz-text-shadow: 1px 1px 0 #D4EBC9;
		-webkit-text-shadow: 1px 1px 0 #D4EBC9;
		text-shadow:1px 1px 0 #D4EBC9;
		text-decoration:none;
		display:block;
		padding:4px 4px 4px;
		text-decoration:none;
		position:relative;
		z-index:2;
	}
	
	/*title hover without box*/
	.navi li a:hover{
		color:#000;
		border-color:#8B96A8;
		border-style:solid;
		border-width:1px 1px 1px;
		background:#FFFFFF;
		cursor:pointer;
		margin:0;
		padding:3px 3px 3px 5px;
		-moz-text-shadow:none;
		-webkit-text-shadow:none;
		text-shadow:none;
	}
	.navi .dropable a:hover{
		position:relative;
		padding:4px 9px 2px 4px;
		border-color:#fff;
		border-style:solid;
		border-width:1px 1px 0px;
		margin:0;
	}
	
	/*title hover with box*/
	.navi li.dropable:hover a{
		color:#000;
		border-top:1px solid #8B96A8;
		border-left:1px solid #8B96A8;
		border-right:1px solid #8B96A8;
		border-bottom:none;
		background:#EEEEEE;
		padding:3px 4px 5px 4px;
		margin:0;
		-moz-text-shadow:none;
		-webkit-text-shadow:none;
		text-shadow:none;
	}
	
	.navi li a span{color:#000;}
	
	/* --- */
	.navi li.dropable .drop1{
		display:none;
	}
	
	.navi li:hover .drop1,
	.navi li.dropable:hover .drop1{display:block;}
	
	.navi .drop1{
		position:absolute;
		top:20px;
		left:0px;
		display:none;
		border:1px solid #7E97C5;
		width:160px;
		background:none;	
		overflow:hidden;
	}
	
	.empty1{
		padding:5px 0;
		overflow:hidden;
		width:160px;
		background:#EEEEEE;
		position:relative;
		z-index:2;
	}
	
	.empty1 ul{
		float:left;
		width:150px;
		background:none;	
		margin:0 0 0 5px;
	}
	
	.empty1 ul li{
		width:100%;
		margin:0;
		padding:0;
		background:none;
		border:0;
		color:#fff;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop1 .empty1 ul li a{
		color:#d66bac;
		display:inline-block;
		background:none;
		border:0;
		padding:0px 0px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop1 .empty1 ul li a:hover{
		background-color: rgb(60, 90, 163);
		color: white;
		border:0;
		padding:0px 4px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
		color:#000 !important;
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		border-radius:0px;
	}
	
	.empty1 ul li a span{
		color:#000000;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.empty1 ul li span{
		color:#000000;
		font:bold 11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.empty1 ul li a:hover span{
		color:white;
		text-decoration:none;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	/* --- */
	
	/* --- drop2 --- */
	.navi li.dropable .drop2{
		display:none;
	}
	
	.navi li:hover .drop2,
	.navi li.dropable:hover .drop2{display:block;}
	
	.navi .drop2{
		position:absolute;
		top:20px;
		left:0px;
		display:none;
		border:1px solid #7E97C5;
		width:315px;
		background:none;	
		overflow:hidden;
	}
	
	.empty2{
		padding:5px 0;
		overflow:hidden;
		width:315px;
		background:#EEEEEE;
		position:relative;
		z-index:2;
	}
	
	.empty2 ul{
		float:left;
		width:150px;
		background:none;	
		margin:0 0 0 5px;
	}
	
	.empty2 ul li{
		width:100%;
		margin:0;
		padding:0;
		background:none;
		border:0;
		color:#fff;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop2 .empty2 ul li a{
		color:#d66bac;
		display:inline-block;
		background:none;
		border:0;
		padding:0px 0px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop2 .empty2 ul li a:hover{
		background-color: rgb(60, 90, 163);
		color: white;
		border:0;
		padding:0px 4px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
		color:#000 !important;
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		border-radius:0px;
	}
	
	.empty2 ul li a span{
		color:#000000;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.empty2 ul li span{
		color:#000000;
		font:bold 11px/18px Arial, Helvetica, sans-serif;;
		white-space: nowrap;
	}
	
	.empty2 ul li a:hover span{
		color:white;
		text-decoration:none;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	/* --- */
	
	/* --- drop3 --- */
	.navi li.dropable .drop3{
		display:none;
	}
	
	.navi li:hover .drop3,
	.navi li.dropable:hover .drop3{display:block;}
	
	.navi .drop3{
		position:absolute;
		top:20px;
		left:0px;
		display:none;
		border:1px solid #7E97C5;
		width:440px;
		background:none;	
		overflow:hidden;
	}
	
	.empty3{
		padding:5px 0;
		overflow:hidden;
		width:440px;
		background:#EEEEEE;
		position:relative;
		z-index:2;
	}
	
	.empty3 ul{
		float:left;
		width:140px;
		background:none;	
		margin:0 0 0 5px;
	}
	
	.empty3 ul li{
		width:100%;
		margin:0;
		padding:0;
		background:none;
		border:0;
		color:#fff;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop3 .empty3 ul li a{
		color:#d66bac;
		display:inline-block;
		background:none;
		border:0;
		padding:0px 0px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop3 .empty3 ul li a:hover{
		background-color: rgb(60, 90, 163);
		color: white;
		border:0;
		padding:0px 4px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
		color:#000 !important;
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		border-radius:0px;
	}
	
	.empty3 ul li a span{
		color:#000000;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.empty3 ul li span{
		color:#000000;
		font:bold 11px/18px Arial, Helvetica, sans-serif;;
		white-space: nowrap;
	}
	
	.empty3 ul li a:hover span{
		color:white;
		text-decoration:none;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
}

/* MOBILE */
@media only screen and (max-width: 799px) {
	/* HAMBURGER */
	
	.hamburger {
		display: block;
		left: 0px;
		top: 130px;
	}
	
	#menuToggle
	{
	  display: block;
	  position: relative;	  
	  z-index: 6;
	  
	  -webkit-user-select: none;
	  user-select: none;
	}
	
	#menuToggle input
	{
	  display: block;
	  width: 40px;
	  height: 32px;
	  position: absolute;
	  top: -17px;
	  left: -5px;
	  
	  cursor: pointer;
	  z-index: 6;
	  
	  opacity: 0; /* hide this */
	  z-index: 2; /* and place it over the hamburger */
	  
	  -webkit-touch-callout: none;
	}
	
	/*
	 * Just a quick hamburger
	 */
	#menuToggle span.hb
	{
	  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.hb:first-child
	{
	  transform-origin: 0% 0%;
	}
	
	#menuToggle span.hb:nth-last-child(2)
	{
	  transform-origin: 0% 100%;
	}
	
	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span.hb
	{
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: #232323;
	}
	
	/*
	 * But let's hide the middle one.
	 */
	#menuToggle input:checked ~ span.hb: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.hb:nth-last-child(2)
	{
	  transform: rotate(-45deg) translate(0, -1px);
	}
	
	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	#menu
	{
		display: block;
		-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);
	}
	
	#menu li
	{
	}
	
	/*
	 * And let's slide it in from the left
	 */
	#menuToggle input:checked ~ ul
	{
	  transform: none;
	}

	.navi{
		position: fixed;
		border: 1px solid black;
		background-color: white;
		top: 0px;
		padding-top:40px;
		padding-bottom:-40px;
		width: 100%;
		height: 100%;
		z-index:1;
		overflow-y: scroll;
		display: none;
	}
	
	.navi li, .navi .dropable {
	    background-color: #D4DEEC;
	}
	
	.navi li,
	.navi .dropable{
		margin:0 0 0 4px;
		font:13px Trebuchet MS;
		font-weight: 700;
		-moz-text-shadow:none;
		-webkit-text-shadow:none;
		text-shadow:none;
		list-style-type: none;
		background-color: #D4DEEC;
	}
	
	/*title dropable box*/
	/* .navi li:hover{position:relative;} */
	.navi li a,
	.navi .dropable a{
		margin:0 0 0 2px;
		padding:4px 5px 3px 3px;
		position:relative;
	}
	
	.navi .dropable a em{
		background:url(arrow.png) no-repeat;
		position:absolute;
		top:13px;
		left:83px;
		width:5px;
		height:3px;
	}
	
	/* .navi .dropable a:hover em,
	.navi li.dropable:hover a em{
		background:url(arrow-hover.png) no-repeat;
		position:absolute;
		top:12px;
		left:84px;
		width:5px;
		height:3px;
	}
	*/
	.navi li a{
		display:block;
		color:#543617;
		-moz-text-shadow: 1px 1px 0 #D4EBC9;
		-webkit-text-shadow: 1px 1px 0 #D4EBC9;
		text-shadow:1px 1px 0 #D4EBC9;
		text-decoration:none;
		display:block;
		padding:4px 4px 4px;
		text-decoration:none;
		position:relative;
	}
	
	/*title hover without box*/
	/*
	.navi li a:hover{
		color:#000;
		border-color:#8B96A8;
		border-style:solid;
		border-width:1px 1px 1px;
		background:#FFFFFF;
		cursor:pointer;
		margin:0;
		padding:3px 3px 3px 5px;
		-moz-text-shadow:none;
		-webkit-text-shadow:none;
		text-shadow:none;
	}
	.navi .dropable a:hover{
		position:relative;
		padding:4px 9px 2px 4px;
		border-color:#fff;
		border-style:solid;
		border-width:1px 1px 0px;
		margin:0;
	}
	
	/*title hover with box*/
/*	.navi li.dropable:hover a{
		color:#000;
		border-top:1px solid #8B96A8;
		border-left:1px solid #8B96A8;
		border-right:1px solid #8B96A8;
		border-bottom:none;
		background:#EEEEEE;
		padding:3px 4px 5px 4px;
		margin:0;
		-moz-text-shadow:none;
		-webkit-text-shadow:none;
		text-shadow:none;
	}
*/
	
	.navi li a span{color:#000;}
	
	/* --- */
	.navi li.dropable .drop1{
		display:block;
	}
	
	.navi li:hover .drop1,
	/* .navi li.dropable:hover .drop1{display:block;} */
	
	.navi .drop1{

		left:0px;
		display:block;
		border:1px solid #7E97C5;
		width:160px;
		background:none;	
		overflow:hidden;
	}
	
	.empty1{
		padding:5px 0;
		overflow:hidden;
		width:160px;
		background:#EEEEEE;
		position:relative;
	}
	
	.empty1 ul{
		float:left;
		width:150px;
		background:none;	
		margin:0 0 0 5px;
	}
	
	.empty1 ul li{
		width:100%;
		margin:0;
		padding:0;
		background:none;
		border:0;
		color:#fff;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop1 .empty1 ul li a{
		color:#d66bac;
		display:inline-block;
		background:none;
		border:0;
		padding:0px 0px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop1 .empty1 ul li a:hover{
		background-color: rgb(60, 90, 163);
		color: white;
		border:0;
		padding:0px 4px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
		color:#000 !important;
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		border-radius:0px;
	}
	
	.empty1 ul li a span{
		color:#000000;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.empty1 ul li span{
		color:#000000;
		font:bold 11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.empty1 ul li a:hover span{
		color:white;
		text-decoration:none;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	/* --- */
	
	/* --- drop2 --- */
	.navi li.dropable .drop2{
		display:block;
	}
	
	.navi li:hover .drop2,
	/* .navi li.dropable:hover .drop2{display:block;} */
	
	.navi .drop2{

		left:0px;
		display:block;
		border:1px solid #7E97C5;
		width:315px;
		background:none;	
		overflow:hidden;
	}
	
	.empty2{
		padding:5px 0;
		overflow:hidden;
		width:315px;
		background:#EEEEEE;
		position:relative;
	}
	
	.empty2 ul{
		float:left;
		width:150px;
		background:none;	
		margin:0 0 0 5px;
	}
	
	.empty2 ul li{
		width:100%;
		margin:0;
		padding:0;
		background:none;
		border:0;
		color:#fff;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop2 .empty2 ul li a{
		color:#d66bac;
		display:inline-block;
		background:none;
		border:0;
		padding:0px 0px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop2 .empty2 ul li a:hover{
		background-color: rgb(60, 90, 163);
		color: white;
		border:0;
		padding:0px 4px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
		color:#000 !important;
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		border-radius:0px;
	}
	
	.empty2 ul li a span{
		color:#000000;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.empty2 ul li span{
		color:#000000;
		font:bold 11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.empty2 ul li a:hover span{
		color:white;
		text-decoration:none;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	/* --- */
	
	/* --- drop3 --- */
	.navi li.dropable .drop3{
		display:block;
	}
	
	.navi li:hover .drop3,
	/* .navi li.dropable:hover .drop3{display:block;} */
	
	.navi .drop3{

		left:0px;
		display:block;
		border:1px solid #7E97C5;
		width:100%;
		background:none;	
		overflow:hidden;
	}
	
	.empty3{
		padding:5px 0;
		overflow:hidden;
		width:100%;
		background:#EEEEEE;
		position:relative;
	}
	
	.empty3 ul{
		float:left;
		width:30%;
		background:none;	
		margin:0 0 0 5px;
	}
	
	.empty3 ul li{
		width:100%;
		margin:0;
		padding:0;
		background:none;
		border:0;
		color:#fff;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop3 .empty3 ul li a{
		color:#d66bac;
		display:inline-block;
		background:none;
		border:0;
		padding:0px 0px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.navi li.dropable .drop3 .empty3 ul li a:hover{
		background-color: rgb(60, 90, 163);
		color: white;
		border:0;
		padding:0px 4px 0px 4px;
		font:11px/18px Arial, Helvetica, sans-serif;;
		color:#000 !important;
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		border-radius:0px;
	}
	
	.empty3 ul li a span{
		color:#000000;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.empty3 ul li span{
		color:#000000;
		font:bold 11px/18px Arial, Helvetica, sans-serif;;
	}
	
	.empty3 ul li a:hover span{
		color:white;
		text-decoration:none;
		font:11px/18px Arial, Helvetica, sans-serif;;
	}
}