@media only screen and (max-width: 600px) {
    
/* new burger menu */

.top-bar {
    position: fixed;
    width:100%;
    height:110px;
    top: 0;
    background-color: #FFF;
    overflow: hidden;
    z-index:10000;
}

.burger {
    width: 8%;
    position:absolute;
    top:1em;
    right:1.7em;
}

.menuHeaderCls {
    position: fixed;
    width:100%;
    height:0px;
    top:0;
    left:0;
    display:none;
    z-index: 100000;
    background-color: #95c647;
    padding-top:2em;
}

/* hide original header */

.header {
    display:none;
}

/* shift content down */

.mobileHeader {
    margin-top:110px;
}

/* sometimes if page content is too large, burger menu is rendered out of the page due to its width... :/ */

.content {
    /*overflow-x:hidden; cuts form fields on the right! */
}

/* burger menu */

/*#menuToggle {
	display:block;
	position:absolute;
	top: 20px;
	left: 20px;
	width: 20px;
	z-index: 1;
	-webkit-user-select: none;
	user-select: none;
	transform: initial;
}*/

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;  
  cursor: pointer;  
  opacity: 0; /* trasparente! */
  z-index: 2; /* messo sopra all'hamburger */  
  -webkit-touch-callout: none;
}

#menuToggle span /* trasforma i 3 span in tre lineette */
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #95c647;
  border-radius: 3px;  
  z-index: 1;  
  transform-origin: 4px 0px;
  -webkit-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%;
  -webkit-transform-origin: 0% 100%;
}

/* Transform all the slices of hamburger into a crossmark. */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  -webkit-transform: rotate(45deg) translate(-2px, -1px);
  -moz-transform: rotate(45deg) translate(-2px, -1px);
  -o-transform: rotate(45deg) translate(-2px, -1px);
  background: #FFFFFF;
}

/* 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);
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
  -moz-transform: rotate(0deg) scale(0.2, 0.2);
  -o-transform: rotate(0deg) scale(0.2, 0.2);
}

/* Oh yeah and the last one should go the other direction */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
  -webkit-transform: rotate(-45deg) translate(0, -1px);
  -moz-transform: rotate(-45deg) translate(0, -1px);
  -o-transform: rotate(-45deg) translate(0, -1px);
}

/* ------------------------------------------------------- */

div .menuHeaderCls a {
  text-decoration: none;
  color: #232323;  
/*  transition: color 0.3s ease;*/
}

div .menu a:hover {
  color: tomato;
}

div.menuHeaderCls {
	border-top:0;
	border-bottom:0;
	margin-top:0;
}

/*
div .menuHeaderCls {
    border:0;
    position: absolute;
	width: 200px;
	margin: -100px 0 0 -50px;
	padding: 50px;
	padding-top: 125px;
	background: #95c647;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);  
	-webkit-transform: translate(-100%, 0);
	-moz-transform: translate(-100%, 0);
	-o-transform: translate(-100%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}*/

div .menuHeaderCls ul {
	list-style:initial;	
	padding-left: 3px; /* rientro del primo livello di menu */
}

.menu li ul li {
	padding-left: 3px; /* rientro del secondo livello di menu */
}

/* tutti gli item di menu a tutti i livelli */
div.menuHeaderCls > li { /* tutti gli <li> immediatamente sotto chi ha classe "menu" */
	font-size: 22px;
}

#menuToggle input:checked ~ .menuHeaderCls
{
	transform: none;
	-webkit-transform: none;
	-moz-transform: none;
	-o-transform: none;
	-ms-transform: none;
}

div.menu > li > ul {
	display:none;
}

div.menu > li:focus {  
	color:yellow;
}

div.menu > li:focus > ul {  
	display:inherit;
}

.menu li {
	display:block;
	float:none;
	background:transparent;
}

/* item top level */
.menu > li {
    padding:8px;
    padding-left:0px; /* non c'era, quindi era 8px */
	border:0;
	text-align:left;
}

/* testo item top level */
.menu > li a {
	color:white;
}

/* item top-level hovered */
.menu > li:hover {
	border:0;
}

/* item top-level hovered */
.menu > li:hover a {
	color:yellow;
}

/* triangolini sulla dx */
.menu > li img {	
	float: right;
}

/* triangolini che girano */
.menu > li:hover img {	
	transform:rotate(90deg);
}

/* sottoitem */
.menuHeaderCls li ul {
	display:none;
	position:relative;
	background:transparent;
	color:white;
}

/* sottoitem */
.menuHeaderCls ul li ul li {
	border:0;
	background:transparent;
}

/* testo sottoitem */
.menu > li:hover li a {
	color:white;
}

/* sottoitem hovered (highlight) */
.menu > li:hover li:hover {
	color:yellow;
	background-color: transparent;
}

.noDesktop {
	display:inherit;	
}

.subMenu {
	display:inline-block;
	width:100%;
}

/* correzioni post sticky menu in v. desktop */

.menu > li {
    border-top: 0;
    border-bottom: 0;
}

.menu > li:hover {
    border-top: 0;
}

/* colori delle voci di sottomenu */

.menu ul li:hover ul li a {
    color: #FFFFFF;
}

.menu ul li ul li:hover a {
    color: #FFFF00;
}

}