/* 
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/


/***************************************************
Body - not related to megamenu
************************************************** 


body { font-family: 'Roboto', sans-serif; }

* { box-sizing: border-box; }

a { color: #333; }
h1 { margin:30px auto; text-align:center;}*/

/***************************************************
megamenu.js STYLE STARTS HERE
************************************************** */


/***************************************************
Screen style's
************************************************** */


/*********************************************************/
.clear{clear:both;}
header >.main-wrapper{height:44px;}
.spaziatoreLogo{margin-left:98px!important;}

.coll4 li{width:25%;}

ul.coll4.normal-sub {
    width: 980px;
    margin: auto!important;
    right: 0;
}

.coll3 li{width:33%!important;}
ul.coll3.normal-sub {
    width: 980px!important;
    margin: auto!important;
    right: 0;
}

.activeSUBM  {border-bottom:2px solid #F00!important;}
.dispB { display:block;}
.activeM  { border-bottom:2px solid #F00;  }/**/

.caffe-vergnano-in div a {
    font: normal 12px/13px 'giovannibook',Arial,Helvetica,sans-serif;
    color: #777;
    text-decoration: none;
}

.caffe-vergnano-in {
    padding-right: 10px;
    border-right: 1px solid #ccc;
    margin-right: 10px;
}

header[role='header'] .main-wrapper > figure{
	z-index:150;
}


.menu-container {
  width:980px/* 80%*/;
  margin: 0 auto;
  background: #000;
  font: normal 15px/16px 'giovannibook',Arial,Helvetica,sans-serif
}

.menu-mobile {
  display: none;
  padding: 36px 20px 40px;
  margin-top: -45px;
}

.imgProdottoMenu{display:block;}

.menu-mobile:after {
  content: "\f394";
  font-family: "Ionicons";
  font-size: 2.5rem;
  padding: 0;
  float: left;/*float: right;*/
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-25%);
  -ms-transform: translateY(-25%);
  transform: translateY(-25%);
  /**/
  color:#fff;
}

.menu-dropdown-icon:before {

    content: "\f35e"/*"\f489"*/;
    font-family: "Ionicons";
    display: none;
    /* cursor: pointer; */
    /* float: right; */
    padding: 0.5em 1em;
    /* padding: 1.5em 2em; */
    /* background: #fff; */
    /* color: #fff; */
    /* font-size: 20px; */
    /* width: 25%; */
    /* padding-top: 8px; */
    font-family: "Ionicons";
    cursor: pointer;
    float: right;
    color: #fff;
    font-size: 20px;
    padding-top: 8px;
}




.menu > ul {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
  box-sizing: border-box;
}

.menu > ul:before, .menu > ul:after {
  content: "";
  display: table;
 /* margin-top:20px;*/
}

.menu > ul:after { clear: both; }

.menu > ul > li {
  float: left;
  background: #000;
  padding: 0;
  margin: 0;
  width:110px;
}

.menu > ul > li a {
  text-decoration: none;
  padding: 1.2em 0em;/*padding: 1.5em 3em;*/
  display: block;
  color:#fff;
  /*height:69px;*/
	text-transform:uppercase;
  /**/
}

.menu > ul > li:hover { background: #ffffff; }

.menu > ul > li:hover > a { color: #000; border-bottom:3px solid #ccc; }

.menu > ul > li > ul {
  display: none;
  width: 100%;
  background: #ffffff;
  padding: 25px 0 10px 0;/*padding: 20px;*/
  position: absolute;
  z-index: 99;
  left: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

.menu > ul > li > ul:before, .menu > ul > li > ul:after {
  content: "";
  display: table;
}

.menu > ul > li > ul:after { clear: both; }

.menu > ul > li > ul > li {
  margin: 0;
  padding-bottom: 0;
  list-style: none;
  width: 14.2%;/*width: 25%;*/
  background: none;
  float: left;
}

.menu > ul > li > ul > li a {
  color: #000;
  padding: .2em 0;
  width: 100%;/*width: 95%;*/
  display: block;
  border-bottom: 1px solid #ccc;
  /**/
  font-size:14px;
}

.menu > ul > li > ul > li > ul {
  display: block;
  padding: 0;
  margin: 0;/*margin: 10px 0 0;*/
  list-style: none;
  box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after {
  content: "";
  display: table;
}

.menu > ul > li > ul > li > ul:after { clear: both; }

.menu > ul > li > ul > li > ul > li {
  float: left;
  width: 100%;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: .8em;
  /*
  height:130px;*/
}

.menu > ul > li > ul > li > ul > li a { border: 0; padding-bottom:20px; }

.menu > ul > li > ul.normal-sub {
  width: 300px;
  left: auto;
  padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li { width: 100%; }

.menu > ul > li > ul.normal-sub > li a {
  border: 0;
  padding: 1em 0;
}


/***************************************************
Mobile style's
************************************************** */

@media only screen and (max-width: 959px) {

.menu-container { width: 100%; }

.menu-mobile { display: block; }


.menu-dropdown-icon:before { /*display: block;*/display: inline-block; text-align:right; }

.menu > ul { display: none; }

.menu > ul > li {
  width: 100%;
  float: none;
  display: block;
  clear:both;
}


.spaziatoreLogo >  a {
	/* width: 100%;*/
	 margin-left:0!important;
}

.spaziatoreLogo {
	display:block;
    /*width: 93%!important;
    float: left!important;	*/
	padding: 0.5em 1em;
    margin-left: 0!important;
}
.spaziatoreLogo:before {
  content: "\f362";
  font-family: "Ionicons";
  cursor: pointer;
  float: right;
  color: #fff;
  font-size:20px;
  padding-top:8px;
  padding: 0.5em 1em;
}

/*.show-on-mobile li:last-child:before {
  content: "\f362";
  font-family: "Ionicons";
  cursor: pointer;
  float: right;
  color: #fff;
  font-size:20px;
  padding-top:8px;
  padding: 0.5em 1em;
}*/


.menu > ul > li a {
  padding: 0.7em 1.2em;
/*  width: 100%;
  display: block;*/
    /*   width: 70%;
    display: block;
   float: left;*/
    text-align: left!important;
}

.spaziatoreLogo a{
	margin-left:0!important;
}

.menu > ul > li > ul { position: relative; }

.menu > ul > li > ul.normal-sub { width: 100%; }

.menu > ul > li > ul > li {
  float: none;
  width: 100%;
 /* margin-top: 20px;*/
 padding:10px 0;
 /* border-bottom:1px dotted #666;*/
}

.menu > ul > li > ul > li:first-child { margin: 0; }

.menu > ul > li > ul > li > ul { position: relative; }

.menu > ul > li > ul > li > ul > li { float: none; padding:0; }

.menu > ul > li > ul{padding-top:5px;}

.menu > ul > li > ul > li > ul > li a { /* padding-left:20px; */padding-bottom:0; }

.menu > ul > li > ul{padding-bottom:15px;}

.menu .show-on-mobile { display: block; }
/**/
.imgProdottoMenu{display:none;}
}