@import url("https://fonts.googleapis.com/css?family=Bilbo");
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

/* HEADER NEGOZIO*/
div#desc_wrapper_ctr > div {background: black;color:#fff;}
div#desc_wrapper_ctr > div a {color:#fff;}
img {max-width: 100%;width: auto !important;}
img[src='#'], img[src*='{FOTO'] {display: none !important;}
center.jlogo {background: black;padding: 20px;}

div.container {background: #ffffff;font-family: Lucida Sans;width: 100%;margin: 0 auto;color: #353333;font-size: 14px;}
#header {background: black;padding: 3em;}
#footer {background: #000;border-top: 3px #7D7C7C solid;padding: 3em;color: #FFF;
    clear: left;text-align: right;line-height: 1.5em;font-family: sans-serif !important;}
#footer div#flogo {float: left;}
#article {overflow: hidden;padding: 2px 2px 10px 2px;}
#article a {text-decoration: none;color: #383636;}
hr {background: #6d6969;border: 0;height: 1px;}
#grid {margin-top: 0px;width: 66%;float: left;}
div#jdesc {float: left;width: 33%;margin: 10px 0;}
div#jdesc .desshort {margin: 15px 0;font-size: large;font-weight: bold;text-shadow: 1px 1px 0;}
div#jdesc article{margin: 10px 0 0;}
.banner-promo {margin: 25px 0 15px}
.banner-promo img {width: 100% !important;}
label[for] {cursor: pointer;}
input[type="checkbox"] {display: none;}
#clear {clear: both;}

@media screen and (max-width: 1024px) {
    div.container {width: 96%;}
}

.large-image {width: 100%;position: fixed;top: 0;left: 0;min-height: 100%;z-index: 200;overflow: auto;
    -webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-transition: -webkit-transform .75s ease-out;transition: transform .75s ease-out;}

.large-image img {max-width: 80%;max-height: 80%;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);position: fixed;top: 33%;left: 50%;
    -webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
    max-width: 95%;max-height: 95%;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);}

.small-image img {max-width: 30%;max-height: 30%;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);margin: 5px;border: 2px #ccc solid;border-radius: 5px;}

input[type="checkbox"]:checked+.large-image {
    -webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}

input[type="checkbox"]:checked~#grid {opacity: .125;}

@media screen and (max-width: 480px) {
    .small-image img {max-width: 40%;}
    #clear {clear: none;}
}

#sd {padding: 1px 10px 10px 10px;margin: 0 auto;font-family: sans-serif !important;}
#lbnr {border: 1px #ccc solid;border-radius: 6px;width: 96%;margin: 0 auto;padding: 5px 0 5px 0;}
#p {padding: 0 20px 0 20px;text-align: left;}

ul.topnav {display:none;list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #000;font-family: sans-serif !important;}
ul.topnav li {float: left;border-right: 1px solid #a1a0a0;}
ul.topnav li a {display: block;color: #FFF;text-align: center;padding: 14px 16px;text-decoration: none;}
ul.topnav li:hover:not(:first-child) a {background-color: #f3ebeb;color: #000;}
ul.topnav li:first-child a {background-color: #4CAF50;}
ul.topnav li:nth-child(5) {float: right;border-left: 1px solid #a1a0a0;}

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

    ul.topnav li:nth-child(5), ul.topnav li {float: none;}
}

ul.sidenav {list-style-type: none;margin-top: 10px;padding: 0;width: 100%;}
ul.sidenav li a {display: block;color: #000;padding: 8px 16px;text-decoration: none;text-align: left;}
ul.sidenav li {text-align: center;border-bottom: 1px solid #555;}
ul.sidenav li:last-child {border-bottom: none;}
ul.sidenav li a:hover {background-color: #555;color: #fff !important;}

/*CSS TAB*/
.top {padding-right: 20px;background: #261F41;text-align: right;}
.main {width: 97%;margin: 0 auto;min-width: 97%;max-width: 100%;text-align: left;}
.content {background: #fff;color: #373737;}
.content>div {display: none;padding: 20px;}
.main input {display: none;}
.main label {display: inline-block;padding: 10px 25px;font-weight: 600;text-align: center;
    border: 1px solid #dcdcdc;border-radius: 5px 5px 0 0;color: #423f3f;}
.main label:hover {color: #545454;cursor: pointer;}
.main input:checked+label {background: #7D7C7C;color: #FFF;}
#tab1:checked~.content #content1, #tab2:checked~.content #content2, #tab3:checked~.content #content3, #tab4:checked~.content #content4 {
    display: block;border: 1px #dcdcdc solid;}
.main label {margin-bottom: 0px !important;background: #f7f5f5;border-radius: 5px 5px 0px 0px;font-family: sans-serif !important;}

@media screen and (max-width: 400px) {
    .main label {padding: 8px;position: static;width: 100%;height: 39px;border-bottom: #797979 1px solid;border-radius: inherit;}
    .main label:after {content: '';display: block;width: 0px;height: 0px;}

@media screen and (max-width: 425px) {
    .main label {padding: 8px;position: static;width: 100%;height: 39px;
        border-bottom: #797979 1px solid;border-radius: inherit;}
    .main label:after {content: '';display: block;width: 0px;height: 0px;}
}

@media screen and (max-width: 768px) {
    .main label {padding: 8px;position: static;width: 94%;height: 20px;border-bottom: #797979 1px solid;border-radius: inherit;}
    .main label:after {content: '';display: block;width: 0px;height: 0px;}
}

.btn {font-size: 14px;padding: 7px 10px;background-color: #7D7C7C;border: 1px solid #434a4c;color: #FFF;text-decoration: none;display: inline;border-radius: 4px;font-weight: bold;
	border-radius: 5px 0px 5px 0px;-webkit-transition: background-color 1s ease;-moz-transition: background-color 1s ease;transition: background-color 1s ease;}

#clear {clear: both;}
#descrbox {float: right;}
div#descrbox h2 {background: transparent;color: black;text-shadow: none;font-weight: bold;text-align: left;}
#sidebox {float: left;width: 20%;}

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

    #descrbox, #sidebox {float: none;width: 99%;}
}

#h1 {
    text-shadow: 1px 7px 5px #000;
    font-family: Roboto;
    font-size: 4em;
    margin: 0px;
}

#h2 {
    width: 99%;
    margin: 0 auto;
    padding: 5px 0px;
    font-family: Roboto;
    font-size: 2em;
    color: #FFF;
    border-radius: 1px;
    background: #000;
    text-shadow: 1px 2px 5px #000;
    text-align: center;
}

@media screen and (max-width: 767px) {
    div.container {
        width: 100% !important;
    }

    #header,
    #footer {
        padding: 1em;
    }

    #h1 {
        font-size: 3em;
    }

    #h2 {
        font-size: 25px;
        padding: 0px 0px 5px 0px;
    }

    .title {
        font-size: 17px !important;
    }
}

#hlogo {
    padding-top: 20px;
}

#flogo {
    float: left;
    width: 50%;
    text-align: left;
}

#paypal {
    float: right;
    width: 50%;
    text-align: right;
}

#paypal img {
    -webkit-filter: drop-shadow(0px 5px 5px #fff);
    filter: drop-shadow(0px 5px 5px #fff);
}

@media screen and (max-width: 480px) {
    #paypal {
        display: none
    }

    #hlogo, #flogo {
        float: none;
        width: 100%;
        text-align: center;
    }
}

#pulsantiera {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
}

#pulsantiera label {
    background: #eaeaea none repeat scroll 0 0;
    display: inline-block;
    font-weight: 600;
    margin-top: 2px;
    padding: 15px 20px;
    text-align: left;
}

input {display: none;}

.main {
    margin: 0 auto;
    max-width: 100%;
    min-width: 320px;
}

.contentblock {
    background: #eaeaea none repeat scroll 0 0;
    color: #222;
    margin-bottom: 15px;
}

.contentblock p {
    margin-top: 0px;
    font-family: "Helvetica";
    font-size: 14px;
    line-height: 20px !important;
    color: #000;
}

.contentblock p strong {
    color: #555555;
}

.contentblock p strong a {
    text-decoration: none !important;
    color: #555555 !important;
    font-weight: Bold;
}

.contentblock p a {
    text-decoration: none !important;
    color: #555555 !important;
    font-weight: Bold;
}

.contentblock p a:hover {
    text-decoration: none;
    color: #000 !important;
    font-weight: Bold;
}

.contentblock>div {display: none;padding: 15px;}
input {display: none;}

#pulsantiera label {
    font-family: "Helvetica";
    text-transform: uppercase;
    color: #fff;
    background: #3f3f3f;
    display: inline-block;
    border: 0px;
    margin: 0px;
    padding-top: 11px;
    padding-bottom: 8px;
    width: 19.59%;
    text-align: center;
}

#pulsantiera label:hover {color: #fff;cursor: pointer;}
#pulsantiera input:checked+label {background: #555555 none repeat scroll 0 0;color: #fff;}

.mainline>label {width: 100%;}

#tab01:checked~.contentblock #content1, #tab02:checked~.contentblock #content2, #tab03:checked~.contentblock #content3,
#tab04:checked~.contentblock #content4, #tab05:checked~.contentblock #content5, #tab06:checked~.contentblock #content6 {
    display: block;}

#tab07:checked~.contentblock #content7, #tab08:checked~.contentblock #content8, #tab09:checked~.contentblock #content9,
#tab10:checked~.contentblock #content10, #tab11:checked~.contentblock #content11, #tab12:checked~.contentblock #content12 {
    display: block;width: 100%;}

@media (max-width: 820px) and (min-width: 501px) {

    #pulsantiera {position: relative;}
    #pulsantiera>label {position: absolute;top: 0;left: 15px;margin-top: 15px;}
    #pulsantiera label.tab02 {top: 40px;}
    #pulsantiera label.tab03 {top: 80px;}
    #pulsantiera label.tab04 {top: 120px;}
    #pulsantiera label.tab05 {top: 160px;}
}

@media (max-width: 820px) and (min-width: 601px) {

    #pulsantiera>label {width: 200px;}
    #pulsantiera .contentblock {padding-left: 220px;}
}

@media (max-width: 600px) and (min-width: 501px) {

    #pulsantiera>label {width: 150px;}
    #pulsantiera .contentblock {padding-left: 170px;}
}

@media (max-width: 500px) {
    #pulsantiera>label {display: block;width: 100%;}
}