﻿/*
    Backend -> Strutture > Tutte le strutture con nome "Webshop - ******", aggiungere nel campo "CSS Pagina" la classe "WebShop" oltre al già presente "StickyFooter"
        MaxiWebShop per "NuovoOrdine e ModificaORdine"

*/



/* ---- Responsive ---- */
/* (>320 & <=480)   OR  (>1 & <=480)
/* (>481 & <= 768)
/* (>769 & <= 1024)
/* (>1024 & <= 1200)
/* (>1200) */

/* DEFAULTS >> */
@viewport {
    width: device-width;
    zoom: 1.0;
}
@-ms-viewport {
    width: device-width;
    zoom: 1.0;
}
html, body, form
{
    min-width:320px;    
}
/* DEFAULTS << */


/* >>>> MENU A SCOMPARSA >>>> */
.show-menu {
	cursor: pointer;
	display: none;
	z-index: 10000;
	margin: 0 0 0.5em;
	font-size: 0.8em;
	line-height: 3em;
	height: 2em;
	background: #0082cb;
	padding: 8px;
	border-radius: 8px;
}
#show-menu {
    display: none;
}
@media screen and (max-width: 768px)
{   
    /* WebShop = Tablet */    
    .layout_header,
    .layout_header .row_container {
        text-align:right;       
    }
    .layout_header.mini {
        font-size:1em; 
    }
    .layout_header nav {
	    position: fixed;
	    left: 1em;
	    right:1em;
	    top: 2em;
	    height:0;
	    padding: 0;
	    background: rgba(0,0,0,0);
	    transition:all 0.25s ease 0s;
	    overflow:auto;
    }
    .layout_header #show-menu:checked ~ nav {
        background: #002A3F;
        width:auto;
        height:auto;
        top: 4em;
        bottom: 1em;
	    padding:1em;
    }
    .layout_header .logo {
	    position: fixed;
	    left: 0.5em;
    }
    .layout_header nav .menu0_container li {
        display:block;
        margin:1em;
        border-radius:10px;
    }
    .layout_header nav .menu0_container li a {
        display:block;
        border-radius:10px;
    }
    .layout_header nav .flags,
    .layout_header nav .flags > div {
        width:auto;
        display:block;
        text-align:center;
        position:relative;
    }
    .layout_header nav .flags .flag,
    .layout_header nav .flags:hover .flag,
    html .layout_header nav .flags .flag
    {
        height: 1.5em !important;
        line-height: 1em;
        margin: 0.5em !important;	
        display: inline-block;
    }
    .layout_header nav .flags:hover,
    .layout_header.fixnav2 nav .flags:hover {
        background: transparent;
    }
    .layout_header nav .flags .flag {
        padding: 1em;
        border-radius: 15px;
    }
    .layout_header nav .flags .flag:hover {
        background: #0082cb;
    }
    
    .layout_header nav > ul.menu0_container, .layout_header nav .flags { display:none; } 
    .layout_header #show-menu:checked ~ nav > ul.menu0_container, .layout_header #show-menu:checked ~ nav .flags { display: block; } 
    .show-menu { display:inline-block; }
}
/* WebShop = Tablet >> */
form.WebShop    .layout_header,
form.WebShop    .layout_header .row_container {
        text-align:right;       
    }
.WebShop    .layout_header.mini {
        font-size:1em; 
    }
.WebShop    .layout_header nav {
	    position: fixed;
	    left: 1em;
	    right:1em;
	    top: 2em;
	    height:0;
	    padding: 0;
	    background: rgba(0,0,0,0);
	    transition:all 0.25s ease 0s;
	    overflow:auto;
    }
.WebShop    .layout_header #show-menu:checked ~ nav {
        background: #002A3F;
        width:auto;
        height:auto;
        top: 4em;
        bottom: 1em;
	    padding:1em;
    }
.WebShop    .layout_header .logo {
	    position: fixed;
	    left: 0.5em;
    }
.WebShop    .layout_header nav .menu0_container li {
        display:block;
        margin:1em;
        border-radius:10px;
    }
.WebShop    .layout_header nav .menu0_container li a {
        display:block;
        border-radius:10px;
    }
.WebShop    .layout_header nav .flags,
.WebShop    .layout_header nav .flags > div {
        width:auto;
        display:block;
        text-align:center;
        position:relative;
    }
.WebShop    .layout_header nav .flags .flag,
.WebShop    .layout_header nav .flags:hover .flag,
.WebShop    html .layout_header nav .flags .flag
    {
        height: 1.5em !important;
        line-height: 1em;
        margin: 0.5em !important;	
        display: inline-block;
    }
.WebShop    .layout_header nav .flags:hover,
.WebShop    .layout_header.fixnav2 nav .flags:hover {
        background: transparent;
    }
.WebShop    .layout_header nav .flags .flag {
        padding: 1em;
        border-radius: 15px;
    }
.WebShop    .layout_header nav .flags .flag:hover {
        background: #0082cb;
    }
    
.WebShop    .layout_header nav > ul.menu0_container, 
.WebShop    .layout_header nav .flags  {
        display:none; 
    } 
.WebShop    .layout_header #show-menu:checked ~ nav > ul.menu0_container, 
.WebShop    .layout_header #show-menu:checked ~ nav .flags  {
        display: block; 
    } 
.WebShop    .show-menu { display:inline-block; }
/* WebShop = Tablet <<*/   
/* WebShop = MiniSmarphone-MENU >>*/   
.WebShop    .layout_header .row_container {
        padding:0.5em;
        text-align:right;
    }
.WebShop        .layout_header .row_container > a {
        padding-top:40px;
        width:100px;
        border-radius:8px;
    }
.WebShop        .layout_header #show-menu:checked ~ nav > ul.menu0_container  {
        padding:0; 
    }
.WebShop        .layout_header.fixnav2 nav > ul.menu0_container > li:hover, 
.WebShop        .layout_header.fixnav2 nav > ul.menu0_container > li.menu0_selected {
        background: #0082cb none repeat scroll 0 0;
    }
.WebShop        .layout_header nav > ul.menu0_container > li > a {
        text-align:center;
    }
.WebShop        .layout_header nav ul.menu0_container ul.menu1_container {
        position: relative;
        max-height: none;
        background-color: transparent;
        background-position: center top;
        padding: 1em;
        top: 0;
        margin: 0;
    }
.WebShop        .layout_header nav .menu1_container li a {
        color:#ccddee;    
        text-align:center;
    }
.WebShop        .layout_header nav .menu1_container li a:hover,
.WebShop        .layout_header.fixnav2 nav .menu1_container li a:hover {
        background-color: #035179;
    }
/* WebShop = MiniSmartphone-MENU <<*/ 
/* <<<< MENU A SCOMPARSA <<<< */


@media screen and (min-width: 1201px) 
{            
    /*max-width:1200px;*/
    
    /* LOGIN >> */
    .layout_header .userPanel,
    .layout_header .loginPanel {
	        position: absolute;
            top: 1em;
            line-height: 3em;
            right: 7em;
            font-size: 0.5em;
        }
    .layout_header .loginPanel {
            line-height: 2em;
        }
    .layout_header .userPanel > *,
    .layout_header .loginPanel > * {
            font-size:1.3em;    
            width:auto;
            text-align:left;
        }
    /* LOGIN << */   
}
@media screen and (min-width: 1025px) and (max-width: 1200px)
{            
    /*max-width:1024px;*/
    
    /* LOGIN >> */
    .layout_header .userPanel,
    .layout_header .loginPanel {
	        position: absolute;
            top: 1em;
            line-height: 3em;
            right: 7em;
            font-size: 0.5em;
        }
    .layout_header .loginPanel {
            line-height: 2em;
        }
    .layout_header .userPanel > *,
    .layout_header .loginPanel > * {
            font-size:1.3em;    
            width:auto;
            text-align:left;
        }
    /* LOGIN << */   
}
@media screen and (min-width: 769px) and (max-width: 1024px) 
{
    /*max-width:768px;*/
    nav > ul.menu0_container 
    {
        font-size:0.9em;
    }
    .layout_header .row_container > a
    {
        width:175px;
        border-radius:15px;
    }
    
    /* LOGIN >> */
    .layout_header .userPanel,
    .layout_header .loginPanel {
	        position: absolute;
            top: 1em;
            line-height: 3em;
            right: 7em;
            font-size: 0.5em;
        }
    .layout_header .loginPanel {
            line-height: 2em;
        }
    .layout_header .userPanel > *,
    .layout_header .loginPanel > * {
            font-size:1.3em;    
            width:auto;
            text-align:left;
        }
    /* LOGIN << */    
}
@media screen and (min-width: 601px) and (max-width: 768px)
{
    /*max-width:600px;*/
    
    /* MENU >> */
    .layout_header .row_container {
        padding:0.5em;
        text-align:right;
    }
    .layout_header .row_container > a {
        padding-top:40px;
        width:150px;
        border-radius:8px;
    }
    .layout_header #show-menu:checked ~ nav > ul.menu0_container  {
        padding:0; 
    }
    .layout_header.fixnav2 nav > ul.menu0_container > li:hover, 
    .layout_header.fixnav2 nav > ul.menu0_container > li.menu0_selected {
        background: #0082cb none repeat scroll 0 0;
    }
    .layout_header nav > ul.menu0_container > li > a {
        text-align:center;
    }
    .layout_header nav ul.menu0_container ul.menu1_container {
        position: relative;
        max-height: none;
        background-color: transparent;
        background-position: center top;
        padding: 1em;
        top: 0;
        margin: 0;
    }
    .layout_header nav .menu1_container li a {
        color:#ccddee;    
        text-align:center;
    }
    .layout_header nav .menu1_container li a:hover,
    .layout_header.fixnav2 nav .menu1_container li a:hover {
        background-color: #035179;
    }
    /* MENU << */
    
    /* LOGIN >> */
    .layout_header .userPanel,
    .layout_header .loginPanel {
	    position: absolute;
        top: 1em;
        left: 15em;
        line-height: 3em;
        right: 7em;
        text-align: center;
        font-size: 0.5em;
    }
    .layout_header .loginPanel
    {
        line-height: 2em;
    }
    .layout_header .userPanel > *,
    .layout_header .loginPanel > * {
        font-size:1.3em;    
    }
    .layout_header.fixnav2 .loginPanel {
        display:none;
    }
    /* LOGIN << */
}
@media screen and (min-width: 481px) and (max-width: 600px)
{
    /*max-width:480px;*/
    
    /* MENU >> */
    .layout_header .row_container {
        padding:0.5em;
        text-align:right;
    }
    .layout_header .row_container > a {
        padding-top:40px;
        width:150px;
        border-radius:8px;
    }
    .layout_header #show-menu:checked ~ nav > ul.menu0_container  {
        padding:0; 
    }
    .layout_header.fixnav2 nav > ul.menu0_container > li:hover, 
    .layout_header.fixnav2 nav > ul.menu0_container > li.menu0_selected {
        background: #0082cb none repeat scroll 0 0;
    }
    .layout_header nav > ul.menu0_container > li > a {
        text-align:center;
    }
    .layout_header nav ul.menu0_container ul.menu1_container {
        position: relative;
        max-height: none;
        background-color: transparent;
        background-position: center top;
        padding: 1em;
        top: 0;
        margin: 0;
    }
    .layout_header nav .menu1_container li a {
        color:#ccddee;    
        text-align:center;
    }
    .layout_header nav .menu1_container li a:hover,
    .layout_header.fixnav2 nav .menu1_container li a:hover {
        background-color: #035179;
    }
    /* MENU << */
    
    /* LOGIN >> */
    .layout_header .userPanel,
    .layout_header .loginPanel {
	    position: absolute;
	    padding:0;
	    top: 8px;   /*0.5em;*/
	    left: 12em;
	    line-height: 2em;
	    right: 5.5em;
	    text-align: center;
    }
    .layout_header .userPanel .textbold
    {
        display:block;
    }
    .layout_header .userPanel .sbtn {
        margin:0.5em 0;
        padding:0 0.5em;
    }
    .layout_header.fixnav2 .loginPanel, 
    .layout_header.fixnav2 .userPanel {
        display:none;
    }
    /* LOGIN << */
}
@media screen and (max-width: 480px)
{    
    /*max-width:320px;*/
    /*min-width:320px;*/

    html, body, form, header, .layout_header, .layout_page
    {
        min-width:320px !important;    
    }
    
    /* MENU >> */
    .layout_header .row_container {
        padding:0.5em;
        text-align:right;
    }
    .layout_header .row_container > a {
        padding-top:40px;
        width:100px;
        border-radius:8px;
    }
    .layout_header #show-menu:checked ~ nav > ul.menu0_container  {
        padding:0; 
    }
    .layout_header.fixnav2 nav > ul.menu0_container > li:hover, 
    .layout_header.fixnav2 nav > ul.menu0_container > li.menu0_selected {
        background: #0082cb none repeat scroll 0 0;
    }
    .layout_header nav > ul.menu0_container > li > a {
        text-align:center;
    }
    .layout_header nav ul.menu0_container ul.menu1_container {
        position: relative;
        max-height: none;
        background-color: transparent;
        background-position: center top;
        padding: 1em;
        top: 0;
        margin: 0;
    }
    .layout_header nav .menu1_container li a {
        color:#ccddee;    
        text-align:center;
    }
    .layout_header nav .menu1_container li a:hover,
    .layout_header.fixnav2 nav .menu1_container li a:hover {
        background-color: #035179;
    }
    /* MENU << */
    
    /* LOGIN >> */
    .layout_header .userPanel,
    .layout_header .loginPanel {
        position: absolute;
        padding: 0;
        top: 8px;   /*1em;*/
        left: 12em;
        line-height: 1em;
        right: 5.5em;
        padding: 0.5em;
        text-align: center;
    }
    .layout_header .userPanel .textbold
    {
        display:block;
    }
    .layout_header .userPanel .sbtn {
        margin:0.5em 0;
        padding:0 0.5em;
        display:inline-block;
    }
    .layout_header.fixnav2 .loginPanel, 
    .layout_header.fixnav2 .userPanel {
        display:none;
    }
    /* LOGIN << */
}
