body {
    font-family: Arial; font-size: 12px; color: #777;
    margin: 0;
    /*background-color: red;*/
    background-color: #111;
}

h1 {font-size:18px; font-weight:lighter; margin:0px; padding:0px;}
h2 {font-size:15px; font-weight:lighter; margin:0px; padding:0px;}
h3 {font-size:15px; font-weight:lighter; margin:0px; padding:0px;}

img { border: medium none; outline:none; }

a{cursor:pointer;outline:none;}
a:link { color: #fff; text-decoration: none; }
a:visited { color: #fff; text-decoration: none; }
a:active { color: #fff; text-decoration: none; }
a:hover { color: #777; text-decoration: none; outline:none; }

.link2 a {color:#ffffff;}
.link2 a:hover {color: #99FF00;}

ul{list-style:none; margin: 0; padding: 0;}
ul li{list-style:none; margin: 0; padding: 0;}
form { margin: 0; padding: 0; }

#wrapper{
	margin:0; padding:0;
	width:100%;
	display:table;
	position:relative;
}

.container{width:1170px; margin: 0 auto; position:relative;}
.bg1{background-color:#e9e9e9;}

#header{width:100%;}
#header .TopMenu{}
#header .TopMenu li { float:left; height:45px; line-height:45px; color:#FFF;}
#header .TopMenu li a{
	font-family: Arial; font-size:17px;
	color:#FFF;
	display:block;
	padding:0 22px;
	text-shadow: 1px 1px #000000;
}
#header .TopMenu li a:hover{opacity:.7}
#header .TopMenu .Separa{

}


#header #logo{height:213px;position:relative;}
#header #logo img{position:absolute;left:-25px;top:0;}

/* MENU  */
.nav_container{position:relative;}
.nav_fisso{position:fixed; width:100%; max-width: 1170px; top:0; z-index:99998;}

#nav{
	width:100%; height:45px; margin-bottom:10px;
}
#nav, ul#nav ul{
	background-color:#870000;
}
ul#nav {z-index:99998;}
ul#nav ul { display: none; position: absolute; top:45px; left:0px; z-index:99997; width:calc(100% - 4px); background-color:#CCC; border:#870000 solid 2px;}
ul#nav li:hover > ul{ display:block; height:auto;}
#nav li { float:left; height:45px; line-height:45px; } /*position:relative;*/
#nav li a{
	font-family: Arial; font-size:12px;
	color:#FFF;
	display:block;
	padding:0 11px;
}
ul#nav ul li{padding:5px 0;float:left!important; width:20%; border:solid 1px #d5d5d5;}
ul#nav ul li a{color:#333; font-size:12px;}
ul#nav ul li:hover{background-color:#dadde7}
#nav li a:hover{opacity:.7}
#nav .Separa{
	width:2px; background:url(../img/separaMenu.png) no-repeat scroll center center rgba(0, 0, 0, 0);
}
/* END MENU  */

.right {float:right;}
.left {float:left;}

#primary, #sidebar { }
#primary{width:100%; min-height:350px;}
#sidebar {width:50%;height: calc(100% - 100px);}

.HomeSlider{width: calc((1160px / 3) * 2); list-style-type: none;}
.HomeSliderRight{height: calc((100% - 10px) / 2);}
#SliderRight {width: calc(1160px / 3);}
.HomeVideo{width: calc((100% - 40px) / 3); margin-bottom:22px; margin-right: 20px;}

.corpo {font-family: Arial; font-size:21px; line-height:33px; position:relative;}
.corpo h2{padding:0 0 22px 0; margin:0; font-family: Arial; font-size:28px; color:#3154a9;}
.title h2{margin-bottom:22px;}

#footer{width:100%; margin:10px auto; background-color:#2a2a2a; padding:45px 0; color:#FFFFFF;}
#footer a {color:#FFF;}
.privacy, .copy{font-family:Arial; color:#FFF; font-size:11px;}
.privacy a, .copy a{color:#FFF; text-decoration:underline;}
.privacy a:hover, .copy a:hover{color:#FFF; text-decoration:none;}

.paginazione{display:table; font-family:Arial, Helvetica, sans-serif; margin:40px auto 0;}
.paginazione ul{list-style:none; padding:0; clear:both; font-family: Arial; font-size:22px;}
.paginazione ul li{float:left; color:#FFF; background-color:#870000; width:33px; height:33px; text-align:center; line-height:32px; margin:0 5px;}
.paginazione ul li a{text-decoration:none; color:#870000;  width:33px; height:33px; display:block;  background-color:#efefef;}
.paginazione ul li a:hover{color:#fff; background-color:#870000;}

#prodotti {width: 100%;}
.elenco{
	float:left; height:350px; width: calc((100% - 60px) / 5);
	background-color: white;
	padding:5px; margin: 1px;
}
.elenco .foto{
	width:100%; height:250px;
	/*background-size:cover!important;*/
}
.elenco .foto a{width:100%; height:100%; display:block; }
.elenco .titolo{
	width:100%; text-align:center; margin:7px 0; font-weight: bold;
	height:33px;overflow: hidden;
}
.elenco .titolo a { color: #870000; }
.elenco .prezzo {
    display: block;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 100%;
}
.elenco .prezzo .barrato {
    font-size: 12px !important;
    font-weight: normal !important;
    text-decoration: line-through;
}
.elenco .foto:hover{opacity:.7;}

.clear {clear:both;}
.boxok{border:green solid 4px; padding:3px; background:#efefef; text-align:center; color:#000000;}
.boxko{border:red solid 4px; padding:3px;; background:#efefef; text-align:center; color:#000000;}
.error{color:red;!important; font-size:10px;}



.fontC1{color:#CC0000;}
.fontC2{color:#344e02;}
.fontC3{color:#3154a9;}
.fontC4{color: #FF0000;} /*#CC0000*/
.fontC5{color: #777;}

.font20{font-size:20px;}
.font19{font-size:19px;}
.font18{font-size:18px;}
.font17{font-size:17px;}
.font16{font-size:16px;}
.font15{font-size:15px;}
.font14{font-size:14px;}
.font13{font-size:13px;}
.font12{font-size:12px;}
.font11{font-size:11px;}
.font10{font-size:10px;}

.BtG1 {
	background:#870000;
	border:none;
	font-family: Arial; font-size:12px; color:#FFF;
	text-shadow: 2px 2px 5px #333;
	padding:0;
	line-height:22px;
	cursor:pointer; display:inline-block;
    text-align: center;
    float: left;
    width: 80px;
}
.BtG1:hover{background: #ab0000;}
.BtG1 a, .BtG1 a span {width:100%; height:100%; display:block;}
.BtG1 a {padding:0 15px;}
.BtG1 a span{color:#FFF}
.BtG1 a span:hover{color:#FFF}

input[type="text"]:focus{outline:none;}

.FormBase .Campo{margin-bottom:15px;}
.FormBase .Campo label{font-size:20px;}
.FormBase input[type="text"],
.FormBase textarea,
.FormBase input[type="password"]{
	background:#FFF;
	border:#CCC solid 1px;
	line-height:27px;
	width:100%;
	padding:11px;
	font-family: Arial; font-size:19px; color:#999;
}
.FormBase select{
	background:#FFF;
	border:#CCC solid 1px;
	line-height:27px;
	width:100%;
	padding:11px;
	font-family: Arial; font-size:19px; color:#999;
}

.FormBase textarea{line-height:22px;}
.formerror{border:red solid 1px!important;}
.error{font-size:11px; font-family:Arial; color:red;}

.AddCartOk{
	background: #ffffff;
    border: 2px solid #008000;
    color: #777777;
    display: none;
    left: 0;
    line-height: 32px;
    position: absolute;
    text-align: center;
    top: 7px;
    width: calc(100% - 4px);
}
.AddCart{
		margin-bottom:22px; position:relative;
		border-top:#f2f2f2 solid 1px;
		padding-top:7px;
}
#cart_display{position:absolute; right:7px; top:2px;}
#cart_display a{color:#FFF;}
#cart_display:hover{opacity:.7;}

.carrello {
    font-size: 14px;
    height: 27px;
    line-height: 27px;
    padding: 3px 11px;
}
.carrello:nth-child(2n) {
    background: #f2f2f2 none repeat scroll 0 0;
}
.carrello:nth-child(2n+1) {
    background: #ffffff none repeat scroll 0 0;
}
.carrello:hover {
    background: #dadde7 none repeat scroll 0 0;
}
.carrello div {
    float: left;
}
.carrello.titolo {
    background: #ffcc00 none repeat scroll 0 0;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    line-height: 27px;
}
.carrello .descr {
    text-align: left;
    width: 555px;
    overflow: hidden;
}
.carrello .qta {
    text-align: center;
    width: 51px;
}
.carrello .prezzo {
    text-align: right;
    width: 111px;
}
.carrello .tot {
    text-align: right;
    width: 111px;
}
.carrello .azione {
    padding-top: 4px;
    text-align: right;
    width: 41px;
}
.carrello input:focus {
    background: #fffdd0 none repeat scroll 0 0;
}

.TableCart td {
    padding: 3px;
}
.TabOrdine {
    display: block;
    margin-top: 10px;
    margin-bottom: 22px;
    overflow: hidden;
    width: calc(100% - 20px);
    padding-left: 10px;
    padding-right: 10px;
}
.TabOrdine div {
    background: #ccc none repeat scroll 0 0;
    color: #333;
    float: left;
    line-height: 33px;
    text-align: center;
    width: calc((100% - 0px) / 3);
}
.TabOrdine div span {
    border: 1px solid #ffffff;
    display: block;
    height: 100%;
    width: 100%;
}
.TabOrdine div.current {
    background: #23235b none repeat scroll 0 0;
    color: #ffffff;
}
.RiepilogoOrdine div {
    margin: 0 0 11px 11px;
}
.RiepilogoOrdine h2 {
    color: #777;
    font-size: 16px;
}

#TopLink{margin-top:5px;}
.TopCerca{
	background:url(../img/cerca.png) no-repeat scroll right center #FFF!important;
}

.Gallery .thumb{
	float:left; width: calc((100% - 30px) / 5); height:133px; border:#ccc solid 1px; margin:2px; background-size:cover!important;
}
.Gallery .thumb a{
	width:100%; height:100%; display:block;
}
.Gallery .thumb:hover{
	opacity:.7;
}
#OpenSidebar{
    background:url(../img/ic_menu_white_24dp.png) no-repeat scroll center right transparent;
    position:absolute;left:5px;top:10px;display:none; width:24px; height:24px;
}
#OpenSidebar a{display:block; width:100%; height:100%;}
#carrello_menu {display:none; position: absolute; left: 40px; top: 3px;}
#mode_search_contatti_mobile {display: none;}
#box1 {margin-bottom: 10px; height: calc((100% - 10px) / 2);}
#box2 {height: calc((100% - 10px) / 2);}
.Overlayer{background-color:#000000; display:none; width:100%; height:100%; position:fixed;left:0; top:0;opacity:.33;z-index:100;}

#sidebar {
    background-color: #870000;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 46px;
    z-index: 99999;
    padding: 11px 25px 11px 11px;
}
#sidebar li {
    border-bottom: 1px solid #ccc;
    font-size: 20px;
    height: 100%;
    padding: 10px 0;
    display: block;
    position: relative;
    width: 100%;
}
.freccia {
    background: rgba(0, 0, 0, 0) url("../img/freccia.png") no-repeat scroll;
    background-position: right 12px;
    background-size: auto 20px;
}
.piu {
    background: rgba(0, 0, 0, 0) url("../img/freccia_giu.png") no-repeat scroll;
    background-position: right 12px;
    background-size: auto 20px;
}
.icoCarrello {
    background: rgba(0, 0, 0, 0) url("../img/shopping_cart.png") no-repeat scroll;
    background-position: right 12px;
    background-size: auto 20px;
}
.utente {
    background: rgba(0, 0, 0, 0) url("../img/icon-user.png") no-repeat scroll;
    background-position: right 12px;
    background-size: auto 20px;
}
.logout {
    background: rgba(0, 0, 0, 0) url("../img/logout.png") no-repeat scroll;
    background-position: right 12px;
    background-size: auto 20px;
}
#form {margin: 33px 10px; width: calc((100% - 40px) /2);}
#info {margin: 33px 10px; max-width: calc((100% - 40px) /2);}
#info_1 {margin-bottom: 50px;}
#registrazione {float:left; width: 50%;}
#login {float: right; width: 40%;}
#carrello_mobile {display: none;}
#inviaOrdine {position: absolute; bottom: -35px; left: -3px; line-height:17px;}
#Tab1 {width: 470px; margin: 0 auto; display: block;}
#Tab2 {width: 470px; margin: 0 auto; display: none; line-height: 33px;}
#Tab3 {width: 920px; margin: 0 auto; display: none;}
#Riepilogo {float:left; margin-right:22px; width:333px;}
#Articoli {float:left; width: 565px;}
#infoDet {float:left; width:344px; margin-left:11px;}
#miniFotoDet {margin:2px -8px 22px -1px; width:324px;}
#cerca_articoli {width: 222px;}
#num_articoli {
    position: absolute;
    top: 0;
    left: 30px;
    color: white;
    background-color: red;
    border-radius: 13px;
    width: 20px;
    height: 20px;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
}
.CatSingle {
    border: 1px solid #CCC;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    color: white;
    font-weight: bold;
    margin-bottom: 5px;
}
.CatSingle:hover {opacity: .7;}
#HomeArt {display: block;}
#HomeCat {display: none;}

#BoxFlag{position:absolute; right:26px; top:35px; z-index: 103;}
.TopMobile{display: none; padding: 10px; width: 100%; color: #FFF;}
.top_info_mobile{font-size:14px; width: 110px;}
.top_num_mobile{width: 105px; font-size: 16px;}
.top_ico_mobile{width:20px; height:27px;}
.top_ico_mobile img{height:20px;}
.ico_scritta{width: 390px; margin-top: 10px;}

.top_info{font-size:13px; width: 110px; color: #FFF;}
.top_num {width: 105px; font-size: 13px;}
.top_ico {width:20px; height:10px;}
.top_ico img{height:15px;}
.TopInfoNum{margin-top: 10px; margin-left: calc(100% - 1080px)}

@media (max-width: 1170px){
    .container {width:100%;}
    .HomeSlider {width: calc(((100% - 10px) / 3) * 2);}
    #Slider img {width:100%;}
    #SliderRight {width: calc((100% - 10px) / 3); margin-left:10px;}
    .HomeSliderRight {width: 100%; height: auto}
    #descrizione {padding: 0 10px;}
    #registrazione {padding-left: 10px;}
    #login {padding-right: 10px;}
    #corpo {width: calc(100% - 20px); padding-left: 10px; padding-right: 10px;}
}
@media (max-width: 1100px){
    ul#nav ul li {width: 25%;}
}
@media (max-width: 1000px){
    .elenco {width: calc((100% - 48px) / 4);}
    .TopInfoNum{display: none;}
}
@media (max-width: 940px){
    #Tab3 {
        width: calc(100% - 22px);
        padding-left: 10px;
        padding-right: 10px;
    }
    #Riepilogo {width:35%; margin-right: 10px;}
    #Articoli {width: calc(65% - 10px);}
    #Articoli #art {width: 70%;}
}
@media (max-width: 900px){
    #form {width: calc(100% - 20px);}
    #info {width: calc(100% - 20px);max-width: 100%; float: left;}
    #info_1 {float: left; width: calc((100% - 15px) / 2); margin-bottom: 0; margin-right: 15px;}
    #info_2 {float: left; width: calc((100% - 15px) / 2);}
    .carrello .descr {width: 60%;}
    .carrello .qta {width: 7%;}
    .carrello .prezzo {width: 13%;}
    .carrello .tot {width: 15%;}
    .carrello .azione {width: 5%;}
    #HomeArt {display: none;}
    #HomeCat {display: block;}
}
@media (max-width: 850px){
    .Gallery .thumb {width: calc((100% - 24px) / 4);}
    #OpenSidebar {display: block;}
    #carrello_menu {display: block;}
    #mode_search_contatti_mobile {display: block;}
    #mode_search_contatti_desktop {display: none;}
    .TopMobile{display: block;}
    .TopLogo, #BoxFlag {display: none;}
    #TopLink {display: none;}
    #nav li {display: none;}
    #cart_display {display: none;}
    #carrello_desktop {display: none;}
    #carrello_mobile {display: block;}
    #nav {margin-bottom: 10px;}
    #BoxFlag{right:30px; top:5px;}
}
@media (max-width: 800px){
    .HomeSlider {width:100%;}
    #Slider img {width:100%;}
    #SliderRight {width:100%; margin-top: 10px; height: auto}
    .HomeSliderRight {float:left; width: calc(50% - 5px);}
    #box1 {margin-right:10px; height: 100%; width: calc((100% - 10px) / 2);}
    #box2 {height: 100%; width: calc((100% - 10px) / 2);}
    .HomeSliderRight img {width:100%;}
    .elenco {width: calc((100% - 54px) / 3);}
    #registrazione {width: 65%;}
    #login {width: 25%;}
    #Articoli #art {width: 50%;}
}
@media (max-width: 700px){
    #SliderRight {display: none;}
}
@media (max-width: 690px){
    #infoDet {width: calc(100% - 326px);}
}
@media (max-width: 650px){
    .Gallery .thumb {width: calc((100% - 18px) / 3);}
    #info_1 {width: 100%; margin-bottom: 22px;}
    #info_2 {width: 100%;}
    #registrazione {width: calc(100% - 60px); padding-left: 30px; padding-right: 30px; padding-bottom: 30px;}
    #login {width: calc(100% - 60px); padding-left: 30px; padding-right: 30px;}
    .carrello .descr {width: 60%;}
    .carrello .qta {width: 7%;}
    .carrello .prezzo {width: 13%;}
    .carrello .tot {width: 15%;}
    .carrello .azione {width: 5%;}
	#footer .right {padding-top: 20px;}
}
@media (max-width: 600px){
    .BtG1 {width: 55px;}
    #sidebar {width: 70%;}
    #Riepilogo {width: 100%; margin-bottom: 20px;}
    #Articoli {width: 100%}
    .HomeVideo {width: 100%;}
}
@media (max-width: 550px){
    .carrello #descr {width:80%; height: 100%}
    .carrello #qta {display: none;}
    .carrello #prezzo {display: none;}
    .carrello #tot {display: none;}
    .carrello #azione {width: 15%;}
    .carrello.titolo {height: 27px;}
    .carrello {height: 54px;}
    .carrello .descr {width: 100%; height: 50%; overflow: hidden;}
    .carrello .qta {width: 20%;}
    .carrello .qta::after {content: "X";}
    .carrello .prezzo {width: 30%;}
    .carrello .tot {width: 30%;}
    .carrello .azione {width: 15%;}
}
@media (max-width: 500px){
    #infoDet {width: 100%; margin-left: 0;}
    #fotoDet, #miniFotoDet {width: 100%;}
}
@media (max-width: 490px){
    #Tab1, #Tab2 {
        width: calc(100% - 20px);
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media (max-width: 450px){
    .elenco {width: calc((100% - 36px) / 2);}
    #footer .right {padding-top: 20px;}
    .Gallery .thumb {width: calc((100% - 12px) / 2);}
}
@media (max-width: 400px){
    #sidebar {width: 80%;}
    #registrazione {width: calc(100% - 20px); padding-left: 10px; padding-right: 10px; padding-bottom: 30px;}
    #login {width: calc(100% - 20px); padding-left: 10px; padding-right: 10px;}
    .TabOrdine div {display: none;}
    .TabOrdine div.current {display: block; width: 100%;}
    .TabOrdine div.current span {border: none;}

    .top_info_mobile{font-size:13px; width: 100px;}
    .top_num_mobile{width: 105px; font-size: 16px;}
    .top_ico_mobile{width:15px; height:27px;}
    .top_ico_mobile img{height:16px;}
    .ico_scritta{width: 373px; margin-top: 10px;}
}
@media (max-width: 350px){
    #sidebar {width: 90%;}
    #inviaOrdine {bottom: -80px;}
    #cerca_articoli {width: 200px;}
}
@media (max-width: 310px) {
    #cerca_articoli {width: 160px;}
}
.fancybox-opened {z-index: 9999 !important;}