/*  GRID OF THREE   ============================================================================= */

	
.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 66.13%; 
}

.span_1_of_3 {
	width: 32.26%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and  (max-width: 768px) and (orientation: landscape){
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}

@media only screen and  (max-width: 768px) and (orientation: portrait){
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}
 @media only screen and (min-width: 320px) and (max-width: 500px) {
     
    .menu{display:none;}
     
    .mobile-menu{display:block;
    margin:2px 0 0 5px;}
     
    nav{margin:0;
    background:none;}
     
    .menu li{display:block;
    margin:0;}
     
    .menu li a {background: none;
    color:#fff;
    /*border-top:1px solid #e0e0e0;
    border-left:15px solid #ffffff;*/}
     
    .menu li a:hover, .menu li:hover > a{
    background:none;
    color:#333;
  }
     
    /*level 2 and 3 - make same width as all items*/
    .menu ul {display:block;
    position:relative;
    top:0;
    left:0;
    width:100%;}
     
    .menu ul ul {left:0;}
     
    }