header{
   width: 100%;
   margin: 0;
   padding: 0;
   position: fixed;
   top:0;
   left: 0;
   background-color: #fff;
   z-index: 9999;
}
.hide-small{ display: block;}
.hide-large{ display: none;}

.menu-arrow{
   width: 20px;
   height: 20px;
}
/* TOP MENU BAR - LARGHEZZA > 800 */
.top-top-msg{
   width: 100%;
   background-color: #C685AF;
   line-height: 1.2rem;
   text-align: center;
}
.top-large, .top-small{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-end;
   padding: 5px 0;
   z-index: 1;
   max-width: var(--max-width);
   height: 100px;
   margin: 0 auto;
}
.top-small{ height: 40px; }
.top-large .top-traslate{
   width: 30%;
   display: block;
   padding: 0;
   text-align: center;
}
.top-large .top-traslate span{
   margin: 0 20px;
}
.top-large .top-logo{
   display: block;
   padding: 0 10px;
}
.top-large .top-logo img{
   width: 90%;
   max-width: 200px;
   height: auto;
   object-fit: cover;
}
.top-large .top-ico{
   width: 30%;
   display: block;
   padding: 0 10px;
   text-align: center;
  
}
.top-large .top-ico a{ text-decoration: none; position: relative;}
.top-large .top-ico a>span{
      font-size: 0.6rem;
      color: green;
      position: absolute;
      
}
.top-large .wish-span-menu{
   top: 80%;
   right: 18%;
}
.top-large .car-span-menu{
   top: 80%;
   right: 0%;
}
.top-large .top-ico img{
   width: 30px;
   height: 30px;
   cursor: pointer;
   margin: 0 10px;
}
.top-large .top-ico img:hover { animation: shake 0.5s; animation-iteration-count: 2;}
/* TOP MENU BAR - LARGHEZZA > 800  ---- fine */

/* TOP MENU BAR - LARGHEZZA < 800  */
.top-small{
    display: none;
    border-bottom: 1px solid lightgray;
}

.top-small .top-lato {
    width: 47%;
    display: block;
    padding: 0 5px;
    margin: 0 10px;
}
.lato-right{
    text-align: right;
}

.top-small .top-lato a{ text-decoration: none; position: relative;}
.top-small .top-lato a > span{
      font-size: 0.6rem;
      color: green;
      position: absolute;
      
}
.top-small .wish-span-menu{
   top: 66%;
   right: 1%;
}
.top-small .car-span-menu{
   top: 66%;
   right: -15%;
}
.top-small .top-lato img{
   width: 25px;
   height: 25px;
   cursor: pointer;
   margin: 0 5px;
}

.top-small .logo{
   display: block;
   padding: 0 10px;
}
.top-small .logo img{
   width: 90%;
   max-width: 100px;
   height: auto;
   object-fit: cover;
}
/* TOP MENU BAR - LARGHEZZA < 800  --- fine*/

/* NAV BAR */
.nav-container{
   display: block;
   width: 100%;
   max-width: var(--max-width);
   margin: 0 auto;
   height: 5vh;
   background-color: #fff;
   z-index: 10;
}
.nav-container .sidebar-close, .nav-container .sidebar-top, .nav-container .sidebar-top-return{ display: none; }

.nav-container nav{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: baseline;
}
.main-nav-item{
   display: inline-flex;
   justify-content: space-between;
   align-items: baseline;
   padding: 10px 40px;
   cursor: pointer;
}
.main-nav-item span{
   font-size: var(--menu--font);
   margin-right: 20px;
   
}
.main-nav-item img{
   width: 10px;
   height: 10px;
}

/*GESTISCO IL SUB MENU PER LE PAGINE W > 800 */
.hide-div {
   display: none;
   flex-direction: column;
   justify-content: flex-start;
   align-content: flex-start;
}
.item-cell{
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
   margin-bottom: 10px;
   cursor: pointer;
}
.item-cell img {
   width: 35px;
   height: 35px;
}
.item-cell span {
   font-size: var(--menu--font);
   margin-left: 20px;
}

/*contenitore principale*/
.sub-menu-container{
   display: none;
   flex-direction: row;
   justify-content: space-between;
   /*align-items: center;*/
   width: 100%;
   max-width: 700px;
   margin: 0 auto;
   min-height: 200px;
   background-color: #fff;
   box-shadow: 0px 4px 8px -4px lightgrey;
   opacity: 1;
   z-index: 10;
}

.sub-item-elenco{
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-content: flex-start;
   padding: 10px 20px;
}

.sub-menu-img-container{
   width: 60%;
   text-align: center;
}
.sub-menu-img{
   width: 100%;
   height: 380px;
   object-fit: contain;
   padding: 20px 10px;
}

@media screen and (max-width: 800px){
   .hide-small{ display: none;}
   .hide-Xsmall{ display: contents; }
   .hide-large{ display: block;}
   .top-large,.sub-menu-img-container{ display: none; }
   .top-small{ display: flex; z-index: 9;}
   .top-top-msg {padding: 0 10px;}
   .nav-container, .sub-menu-container{
       width: 100%;
       height:100vh;
       background-color: #fff;
       z-index: 10;
       position: fixed;
       top:0;
       left: -100%;
       box-shadow: 0px 8px 2px -2px lightgray;
   }
   .nav-container .sidebar-close{
      display: block;
      position: absolute;
      top:5px;
      right: 5px;
      width: 30px;
      height: 30px;
      opacity: 0;
      cursor: pointer;
   }
   .nav-container .sidebar-top{
      display: block;
      width: 100%;
      text-align: center;
   }
   .nav-container .sidebar-top span{
      margin: 0 10px;
      line-height: 2.5rem;
   }
   .nav-container .sidebar-top-return{
      display: inline-flex;
      align-items: center;
      width: 100%;
      height: 50px;
      cursor: pointer;
      background-color: lightgray;
   }
   .nav-container .sidebar-top-return span{
       font-size: 1.2rem;
       margin-left: 20px;
   }
   
   .nav-container nav{
      flex-direction: column;
      justify-content: flex-start;
      align-content: flex-start;
   }
   .main-nav-item{
      padding: 20px 10px;
      width: 98%;
      border-bottom: 1px solid lightgray;
   }
   .main-nav-item span { font-size: 1.2rem; }
   /* GESTIONE DEL SUB MENU */
   .sub-menu-container{ flex-direction: column;
    justify-content: flex-start; }
   
   /*footer*/
   .sidebar-footer{
      position: absolute;
      bottom: 50px;
      left: 0;
      width: 100%;
   }
   .sidebar-login{
      width: 100%;
      /* margin: 0 auto; */
      display: inline-flex;
      justify-content: space-around;
      align-items: center;
      padding: 20px 0px;
      font-size: 1.5rem;
   }
   .sidebar-login a{
      font-size: var(--login--font);
      cursor: pointer;
      text-decoration: none;
   }
   .sidebar-social{
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      font-size: 2rem;
      width: 98%;
      margin: 12px 3px 0;
      padding: 20px 15px;
      border-top: 1px solid lightgray;
   }
   .sidebar-footer{ display: none; }
   
   .btn-google { font-size: 1rem; }
}
.flag_ship_to{
   width: 30px;
   height: 20px;
   margin-left: 5px;
   object-fit: cover;
   cursor: pointer;
   border: 1px solid lightgray;
}

@media screen and (max-width: 450px){
   .hide-Xsmall{ display: none; }
   .sidebar-footer{ display: block; }
   .top-top-msg span {font-size: 0.6rem;}
}