@charset "utf-8";

/*
Comic Sans MS
Consolas
Cooper Black
Eras Demi ITC
Lucida Calligraphy
MV Boli
Papyrus
Segoe Print
*/

/*
Comic Sans MS
Consolas
Levenim MT
Lucida Console
Simplified Arabic Fixed
*/

:root {
    --goldColor: rgba(250, 227, 133, 1);
    --goldGradient: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    --shadowColor: black;
    --fontFamily: Comic Sans MS;
    --fontFamilyTec: Lucida Console;
}

/* Definizione degli ID da usare in <div id = ""... */
#topMenu {
    border-radius: 15px 15px 15px 15px;	
    background: var(--shadowColor);
    width: 98%;
    height: 80px;
    margin-left: 1%;
    padding-left: 1%;
}

#header {
    width: 100%;
    display: flex;
}

#middle{
    display: flex;
}

#main {
    border-radius: 10px 10px 10px 10px;
    background: var(--goldGradient);
    /* top, right, bottom, left */
    margin: 75px 5% 0 3%;
    padding: 25px 2% 4% 2%;  
    box-shadow:  30px  30px 5px var(--shadowColor), 
        -30px -30px 5px var(--shadowColor),
        30px -30px 5px var(--shadowColor),
        -30px  30px 5px var(--shadowColor);		
    width: 61%;
}

#mainText{
    font-family: var(--fontFamily);
    font-size: 1.3vw;
    color: black;
    font-weight: bold;
}

#mainBlock {
    font-family: var(--fontFamily);
    font-size: 1vw;
    background: white;
    text-align: center;
    width: 100%;
}

#secondary {
    width:  22%;
    height: 1%;
}

#secondaryText {
    font-family: var(--fontFamily);
    font-size: 1.2vw;
}

#photoGrid > li {
    border: 2px solid #333333;
    background-color: #EFEFEF;
    display: inline-block;
    width:  350px;
    height: 450px;
    margin-top: 10px;
}

#captcha {
    width: 50%;
    margin-left: 20%;
}

#bottom {
    font-family: var(--fontFamilyTec);
    font-size: 0.9vw; 
    margin-top: 150px;
}

#sitemap{
    margin-left: 5%;
}

#conditions {
    text-align: left;
    padding: 5% 5% 5% 5%;
}

#quotationBox {
    width: 100%;
    text-align: center;
    font-family: var(--fontFamily);
}

/* Definizione delle classi da usare in <div class = ""... */
.secondaryInner {
    border-radius: 10px 10px 10px 10px;
    background: var(--goldGradient);
    margin: 75px 0 0 0;
    padding: 25px 6% 8% 4%;  
    box-shadow:  30px  30px 5px var(--shadowColor), 
        -30px -30px 5px var(--shadowColor),
        30px -30px 5px var(--shadowColor),
        -30px  30px 5px var(--shadowColor);		
    width:  100%;
    height: 1%;
}

.headerContent {
    width: 22%;
    height: 170px;
    margin: 0 2% 0 2%;
}

.headerMessage {
    font-size: 2vw;
    padding: 2% 2% 2% 2%; 
    text-align: center;
    font-weight: bold; 
    fontFamily: Comic Sans MS;
}

.headerImage {
    width: 50%;
    height: 170px;
    border-radius: 15px 15px 15px 15px;
}

.areHere {
    font-family: var(--fontFamilyTec);
    font-size: 0.9vw;
}

.warning {
    border-radius: 10px 10px 10px 10px;
    font-family: var(--fontFamilyTec);
    font-size: 1.2vw;
    background: #006BCF;
    color: white;
    width: 76%;
    height: 68px;
    margin: 0 auto;
}

.promo {
    border-radius: 10px 10px 10px 10px;
    font-family: var(--fontFamilyTec);
    font-size: 1.2vw;
    background: #006BCF;
    color: white;
    width: 65%;
    height: 90px;
    margin: 0 auto;
}

.gridImage {
    width: 100%; 
}

.circle {
    border-radius:999em;   
}

.gridImageProd {
    width: 30%; 
    padding: 2% 0 0 2%;
}

.contactForm {
    text-align: left;
    padding: 3% 3% 3% 3%;	
}

.formLabel{
    font-size: 1.2vw;
    display: inline-block;
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
}	

.formLabel:after { 
    content:" *"; 
}

.formLabelAtt{
    font-size: 1.2vw;
    display: inline-block;
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
}	

.formLabelAttMes{
    font-size: 1vw;
    margin-left: 15%;
}

.formLabelOpt{
    font-size: 1.2vw;
    display: inline-block;
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
}

.formLabelOpt:after { 
    content:"  "; 
}

.formLabelPay{
    font-size: 1.2vw;
    display: inline-block;
    width: 100%;
    text-align: center;
    border:solid 3px black;
}

.quotationLabel{
    font-size: 1.2vw;
    display: inline-block;
    float: left;
    clear: left;
    width: 150px;
    text-align: right;
}	

.kaptchaLabel {
    font-size: 1.2vw;
    text-align: right;
}

.kaptchaLabel:after { 
    content:" *"; 
}

.formField{
    font-family: var(--fontFamily);
    font-size: 1.1vw;
    border:solid 2px black;    
    margin: 5px 5px;
    /*outline:solid 4px yellow;*/
}

.formField:focus, textarea:focus {
    outline: solid 4px yellow;
}

.formMsg {
    font-family: var(--fontFamily);
    font-size: 1.3vw;
    margin-left: 10%;
    color: red;
}

.formButton {
    font-family: var(--fontFamily);
    font-size: 1.3vw;
    margin-left: 40%;
}

.indentBlock {
    margin: -0.5% 0 0 2%;
}

.shopFilter {
    width:40%; 
    float:left;
    padding: 5% 0 2% 8%;
}

.contactIcon {
    width: 13%; 
    height: 13%;
}


/* For google-maps use */
.google-maps {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.google-maps > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
}


/* For golden-button use */
.golden-btn + .golden-btn { margin-top: 1em; }

.golden-btn {
    display: inline-block;
    outline: none;
    font-family: inherit;
    font-style: normal;
    --font-size: 1em;
    font-size: 1.1vw;
    font-weight: bold;
    box-sizing: border-box;
    border: none;
    border-radius: .3em;
    height: 2.75em;
    line-height: 2.5em;
    text-transform: uppercase;
    padding: 0 1em;
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
        inset 0 -2px 5px 1px rgba(139,66,8,1),
        inset 0 -1px 1px 3px rgba(250,227,133,1);
    background-image: var(--goldGradient);
    border: 1px solid #a55d07;
    color: rgb(120,50,5);
    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
    cursor: pointer;
    transition: all .2s ease-in-out;
    background-size: 100% 100%;
    background-position:center;
}
.golden-btn:focus,
.golden-btn:hover {
    background-size: 150% 150%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
        inset 0 -2px 5px 1px #b17d10,
        inset 0 -1px 1px 3px rgba(250,227,133,1);
    border: 1px solid rgba(165,93,7,.6);
    color: rgba(120,50,5,.8);
}
.golden-btn:active {
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
        inset 0 -2px 5px 1px #b17d10,
        inset 0 -1px 1px 3px rgba(250,227,133,1);
}

.ui-slider .ui-btn-inner {
    padding: 4px 0 0 0 !important;
}

.ui-slider-popup {
    position: absolute !important;
    width: 80px;
    height: 64px;
    text-align: center;
    font-size: 36px;
    padding-top: 14px;
    z-index: 100;
    opacity: 0.8;
}


/* For NEW Golden Button Style Use*/
.button01 {
    font-family: var(--fontFamily);
    --font-size: 20px;
    font-size: 1.2vw;
    letter-spacing: 0.5pt;
    --padding: 30px 100px;
    padding: 6px 20px;
    border: solid 1px;
    border-top-color: rgba(0, 0, 0, 0.1);
    border-right-color: rgba(0, 0, 0, 0.3);
    border-bottom-color: rgba(255, 255, 255, 0.5);
    border-left-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 1px 5px 1px rgb(0, 0, 0);
    transition: .1s linear;
}

.white {
    color: #000000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
    background-image: radial-gradient(300px at 50% -50%, rgb(255,255,255) 0%,rgb(251,251,251) 5%,rgb(214,214,214) 48%,rgb(204,204,204) 60%,rgb(233,233,233) 83%,rgb(244,244,244) 92%,rgb(252,252,252) 98%,rgb(254,254,254) 99%,rgb(255,255,255) 100%);
}

.white:hover {
    background-image: radial-gradient(300px at 50% -50%, rgb(204,204,204) 0%,rgb(200,200,200) 5%,rgb(163,163,163) 48%,rgb(153,153,153) 60%,rgb(182,182,182) 83%,rgb(193,193,193) 92%,rgb(201,201,201) 98%,rgb(203,203,203) 99%,rgb(204,204,204) 100%);
}

.gold {
    color: #FFFFFF;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 1);
    background-image: radial-gradient(300px at 50% -50%, rgb(229, 184, 99) 0%, rgb(220, 175, 93) 5%, rgb(139, 96, 42) 48%, rgb(103, 61, 19) 67%, rgb(165, 121, 58) 83%, rgb(199, 154, 80) 92%, rgb(222, 177, 95) 98%, rgb(227, 181, 97) 99%, rgb(231, 185, 100) 100%);
}

.gold:hover {
    background-image: radial-gradient(300px at 50% -50%, rgb(247, 223, 146) 0%, rgb(240, 214, 138) 5%, rgb(178, 133, 65) 48%, rgb(151, 98, 33) 67%, rgb(196, 157, 85) 83%, rgb(222, 190, 114) 92%, rgb(239, 212, 134) 98%, rgb(242, 216, 137) 99%, rgb(245, 220, 141) 100%);
}

.silver {
    color: #FFFFFF;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 1);
    background-image: radial-gradient(300px at 50% -50%, rgb(166, 165, 162) 0%, rgb(158, 157, 154) 5%, rgb(90, 90, 89) 48%, rgb(60, 60, 60) 67%, rgb(111, 111, 111) 83%, rgb(139, 139, 139) 92%, rgb(158, 158, 158) 98%, rgb(162, 162, 162) 99%, rgb(165, 165, 165) 100%);
}
.silver:hover {
    background-image: radial-gradient(300px at 50% -50%, rgb(194, 194, 194) 0%, rgb(186, 186, 186) 5%, rgb(114, 114, 114) 48%, rgb(83, 83, 83) 67%, rgb(135, 134, 133) 83%, rgb(163, 163, 160) 92%, rgb(183, 182, 179) 98%, rgb(186, 185, 183) 99%, rgb(190, 189, 186) 100%);
}

.label01 {
    display: inline-block;
    background-image: radial-gradient(rgb(51, 51, 51) 0%, rgb(0, 0, 0) 100%);
    border: 1px solid rgba(0, 0, 0, 1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    padding: 10px 20px;
}

/* For Table Use*/
.table {
    display:table; 
    width:100%; 
    height:100%;
    min-width:100%;
    min-height:100%;
}

.tableRow{ 
    display:table-row; 
    height:100%;
    text-align: left;
}

.tableCol{ 
    display:table-cell; 
    float:left; 
    height:100%;
}

.tableColBord{ 
    display:table-cell; 
    float:left; 
    height:100%;
    padding: 0 1% 0 1%;
}

.col5{width:5%;}
.col10{width:10%;}
.col20{width:20%;}
.col25{width:25%;}
.col30{width:30%;}
.col35{width:35%;}
.col45{width:45%;}
.col50{width:50%;}
.col70{width:70%;}


/* For TV Quotation Page Use */
.quotation-btn{
    font-size: 2.5vw;
    text-transform: none;
    width: 100%;
}
.quotation-btn-silver{
    font-size: 2.5vw;
    text-transform: none;
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
        inset 0 -2px 5px 1px grey,
        inset 0 -1px 1px 3px grey;
    width: 100%;
}
.quotaLabel{
    font-size: 4vw; 
    font-weight: bold; 
    text-align: center;
    margin: 4% 0 1% 0;
}
.quotaLabelSmall{
    font-size: 2.4vw; 
    font-weight: bold; 
    text-align: center;
}
.euroLabel{
    margin: 0 10% 0 8%;
    width: 350px;
}
.oroColor {
    color: #bc881b;
}
.argColor {
    color: grey;
}

.tvMessage{
    color: #bc881b;
    font-weight: bold; 
    text-align: center;
}

.maxValutation{
    --color: #bc881b;
    color: red;
    font-weight: bold; 
    font-size: 5vw;
    text-align: center;
}



/* For Blink Test Use */
.blink {
  animation:1s blinker linear infinite;
  -webkit-animation:1s blinker linear infinite;
  -moz-animation:1s blinker linear infinite;
  color: red;
}
@-moz-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}