/* === global === */
body   {padding:0; font-size:12px; color:#365971; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; /*overflow:hidden*/; background:transparent;margin-left: 0;margin-top: 0px;}
p      {padding:0; margin:0;}
.left  {float:left;} .right {float:right;}

/* === Layout blocks === */
.sblock   {padding:2px; float:left;}
.sblock10 {width:10%;}.sblock15 {width:15%;}
.sblock20 {width:20%;}.sblock25 {width:25%;}
.sblock30 {width:30%;}.sblock35 {width:35%;}
.sblock40 {width:40%;}.sblock45 {width:45%;}
.sblock50 {width:50%;}.sblock55 {width:55%;}
.sblock60 {width:60%;}.sblock65 {width:65%;}
.sblock70 {width:70%;}.sblock75 {width:75%;}
.sblock80 {width:80%;}.sblock85 {width:85%;}
.sblock90 {width:90%;}.sblock95 {width:95%;}
.sblock100{width:100%;}
.sbottom  {padding:4px; background-color:#FFF!important; float:left; display:inline-block; border-radius:0 0 5px 5px; border-bottom:1px solid #BBB; font-size:.9em;}

/* === colors === */
.mainColor {color:#26b4e9;}
.hotColor  {color:#ff5600;}
.coldColor {color:#26b4e9;}

/* === widget layout === */
.smartywidgetCNT {background-color:#d2d2d2; border-radius:9px; padding:3px; border:1px solid #ccc; display:inline-block;}
.smartywidgetCNT * {box-sizing:border-box; -moz-box-sizing:border-box;}
.smartywidgetCNT .smartywidget {width:100%; border-radius:5px; padding:0;}
.smartywidgetCNT .smartyHeader {width:100%; background-color:#3f3f3f; border-radius:5px 5px 0 0; padding:2%; color:#FFF;}
.smartyHeader a{float:right;margin-right: 10px;color:#FFF;font-size: 10pt;}

.smartywidgetCNT .smartyBlock  {position:relative; width:100%; background:#EEE url(../../images/widget_public/bg-block-x.png);/*background:#EEE url(../img/bg-block-x.png) repeat-x left bottom; padding:5px; border-top:1px solid #FFF; border-bottom:1px solid #BBB;*/ display:inline-block;}
.smartywidgetCNT .smartyBlock div.titles {color:#888; font-weight:bold; margin-bottom:0.5em;}
.sblockWeather01 {border-bottom:1px solid #ddd; padding-bottom:12px;}
.sblockWeather02 {border-top:1px solid #fff; padding-top:12px;}
.sbottom {position:relative;}
.customerLogo     {position:relative; float:left; margin:5px 5px 5px 7px; width:90%; height:auto;}
.BTNsmartyMeteo   {position:relative; float:right; margin:-10px 10px 5px 7px;}
.sbottom .titleBottom {padding:0px 3px 8px 3px; color:#5f7e95;/* width:100%; */}

/* === values === */
.valueBig  {font-size:4.8em; display:inline-block; line-height:.9em; padding:5px; clear:both; float:left; width:100%; letter-spacing:-1px;}
.valueBigData {font-size:94%;}
.valueBigLine {background:url(../../images/widget_public/bg-gradient-line.png) repeat-x left top; font-size: 104%; width:100%; float:left; clear:both; padding: 5px 8px 5px 6px; border-radius:5px; margin-bottom:2px;}
.valueBigLine01 span:before {content:"Sensación térmica:"}
.valueBigLine02 {background:none;margin-top: -12px;}
.valueBigLine .valueMax  {font-size: 1.2em; margin:-1px 5px 0 0; display:block;position: absolute;top: 18%;left: 63%;}
.valueBigLine .valueMin  {font-size: 1.2em; display:block;position: absolute;top: 29%;left: 63%;}
.valueBigLine .valueMin IMG  {margin: -2px 0px 0 0;}
.valueBigLine .valueMax IMG  {margin: -3px 0px 0 0;}
.valueBigLine .valueMax span, .valueBigLine .valueMin span{float:right}
.weatherP  {line-height:1.2em; font-size:.9em;}
.weatherData   {position:relative;}
.hotValueMini  {position:absolute; top:32%; left:62%;}
.coldValueMini {position:absolute; top:53%; left:62%;}
.hotValueMini span, .coldValueMini span  {font-size:1.4em; margin:0 0 0 1px;}
.hotValueMini IMG  {position:relative; top:-5px;}
.coldValueMini IMG {position:relative; top:-2px;}
.multipleValuesCNT {padding:0;min-width: 110px;}
.multipleValues {width: 41%; margin:3px 0 4px 6%; display:inline-block;}
.iconValue {width: 11px; height: 10px; display: none; float:left; margin-right:2px;}
.values {float:left; width:auto;}

/* === Buttons / Links === */
.BTNinfo {position:relative; display:inline-block; text-align:center; background:#365971 url(../../images/widget_public/ico-plus.png) no-repeat center center; color:#FFF; width: 12px; height: 12px; border-radius:12px; cursor:pointer; }
.tooltip {position:absolute; top:0; right:0; z-index:50; width:100px; display:none; padding:.5em; box-shadow:0 0 4px rgba(0,0,0,0.5); background:#FFF; color:#365971; border-radius:5px; }
.BTNinfo:hover .tooltipRain {display:block;}
.BTNsmartyMeteoBottom {display:block; width:100%; float:left; padding:2px 4px 4px 4px; margin:1px 0 -1px 0; text-align:center; color:#0064a7; border-radius:0 0 3px 3px; font-size: .80em; font-weight:bold; text-shadow:1px 1px 0 rgba(255,255,255,0.4)}
.BTNsmartyMeteoBottom:hover {color:#FFF; text-shadow:0 1px 2px rgba(0,0,0,0.6)}
.customerLogo {margin:0 auto 4px auto; float:none; display:table;}
.textBottom {display:none;}
.BTNonlyH {display:none;}
.hotValueMini span, .coldValueMini span {float: right;}

/*******************************/
/***** responsive versions *****/
/*******************************/
@media only screen and (min-width:195px) {
   .multipleValues {width:47%; margin:0 0 1% 1%;}
   .valueBigLine {font-size:100%;}
   .iconValue {display:block; width:22%; height:22%; margin-right:1px;}
   .valueBigLine01 span:before {content:"Sensación térmica:"}
   .customerLogo {width:auto; height:auto; margin:8px auto -3px auto;}
   .hotValueMini, .coldValueMini {left:67%;}
   .valueBigLine .valueMax {float: left}
   .valueBigLine .valueMin {float: right}
   
}
@media only screen and (min-width:210px) {
   .multipleValues {width:47%; margin:0 0 3% 2%; font-size:99%;}
   .iconValue {width: 28%; height: 28%;}
   .valueBigLine .valueMin {position:absolute; top: 24%; left:71%;}
   .valueBigLine .valueMax {position:absolute; top:24%; left:48%;}
   .hotValueMini, .coldValueMini {left:69%;}
}
@media only screen and (min-width:222px) {
   .weatherData {width:100%;}
   .sblock.sblockWeather02 {padding-bottom:10px;}
   .sblock.sblockWeather01, .sblock.sblockWeather02 {width:100%;}
   .weatherIMG {width:70%; margin-left:5%;margin-top: -5%;}
}
@media only screen and (min-width:240px) {
   .sblockFirst01 {width:50%;}
   .valueBig {font-size:4.5em;}
   .valueBigData {font-size:88%;}
   .multipleValuesCNT {width:42%; float:right;}
   .multipleValues {width:96%; clear:both; float:right; margin:8px 0 0 0;}
   .iconValue {float:left;}
   .valueBigLine01 span:before {content:"Sens. térmica:"}
   .valueBigLine02 {margin-top:0; background:url("../../images/widget_public/bg-gradient-line.png") repeat-x scroll left top;}
   .valueBigLine .valueMax, .valueBigLine .valueMin {position:relative; left:auto; top:auto; margin: 1px 0 0 0;}
}
@media only screen and (min-width:270px) {
   .valueBigData {font-size:100%;}
   .multipleValues {margin:8px 0 0 0;}
   .valueBigLine01 span:before {content:"Sensación térmica:"}
   .multipleValues {width:92%; clear:both; float:right; margin:.4em 0;}
   .sblock.sblockWeather01, .sblock.sblockWeather02 {width:50%; border:0; padding:5px 0 0 0;}
   .smartywidgetCNT .smartyBlock div.titles {padding-left:4px;}
   .weatherP {padding:4px 0 0 4px; min-height:35px;}
   .coldValueMini, .hotValueMini {left:61%; font-size:85%;}
}
@media only screen and (min-width:300px) {
   .multipleValues {font-size:1.05em; margin:.25em 0;}
   .iconValue {margin-right:4px;}
   .hiddenH {display:none;}
}
@media only screen and (min-width:325px) {
   .iconValue {width:34px; height:34px;}
   .multipleValues {font-size:1.05em; margin:.2em 0;}
}
@media only screen and (min-width:362px) {
   .sblockFirst01 {width:144px; border-right:1px solid #ddd; font-size:95%;}
   .valueBig {width:auto; font-size: 4.5em;/* margin-top: 5px; */}
   .valueBigLine {background:none; font-size:100%; width:auto; height:auto; padding:0;}
   .valueBigLine.valueBigLine01 {font-size:106%;}
   .valueBigLine .valueMax {position:absolute;top:30px;left:90px;}
   .valueBigLine .valueMin {position:absolute;top:51px;left:90px;}
   .multipleValuesCNT {width: 50%; float:left; font-size:88%; margin-left:9px; /* background: yellow; */}
   .multipleValuesCNT .multipleValues {float:left; clear:none; width:50%; margin: 0 0 0 0;}
   .customerLogo {float: right; margin:3px 6px 4px 0;}
   .weatherIMG {width:64%; margin-left:7%;}
   .iconValue {width:24px; height:24px;}
   .valueUva, .valueHumidity {margin-bottom: 25px !important;margin-top: 10px !important;}

}

@media only screen and (min-width:378px) {.multipleValuesCNT{margin-left: 10%;}}
@media only screen and (min-width:392px) {.iconValue {width:34px; height:34px;}}
/*@media only screen and (min-width:392px) {.multipleValuesCNT {width:219px;}}
@media only screen and (min-width:402px) {.multipleValuesCNT {width:229px;}}
@media only screen and (min-width:412px) {.multipleValuesCNT {width:239px;}}*/

@media only screen and (min-width:400px) {
   .weatherIMG {width:50%; margin-left:10%;}
   
}
@media only screen and (min-width:420px) {
   .valueRain .values {margin-top: -3px;}
   .weatherIMG {width:54%; margin-left:10%;}
   .weatherP {min-height:22px;}
   .hotValueMini, .coldValueMini {left:58%;}

   
   .hotValueMini IMG {top: -5px;}
   .hotValueMini span {float: right;margin-top: 0px;}
}

/*
@media only screen and (min-width:380px) and (max-width:629px){} 
*/
@media only screen and (min-width:495px){
    .multipleValuesCNT{margin-left: 1%;}
    /*.smartyBlock2 {border-top: 4px solid #d2d2d2;}*/
}

@media only screen and (max-width:495px){
    .smartyBlock2 {border-top: 4px solid #d2d2d2;}
}

@media only screen and (max-width:361px){
    .smartywidgetCNT .smartyBlock { background: none}
}
@media only screen and (min-width:495px){
   .iconValue {display:none}
   .valueUva, .valueHumidity {margin-bottom: 2px !important;margin-top: 10px !important;}
   .smartywidgetCNT {width:100%; float:left;}
   .smartywidgetCNT .smartyBlock {/*height:106px;*/}
   .smartywidgetCNT .smartyHeader {padding:1%;}
   /*.smartywidgetCNT .smartyBlock {width:auto;float: left;}*/
   .weatherIMG {width: 56%; margin-left:5%; margin-top: -8px;}
   .weatherP {min-height:15px; font-size:85%; line-height:115%; width:98%; margin-top:-3px;}
   /*.sblock.sblockWeather01, .sblock.sblockWeather02 {width: 130px;}*/
   .sblock.sblockWeather01, .sblock.sblockWeather02 {width: 45%;}
   .sblock.sblockWeather01 .weatherIMG, .sblock.sblockWeather02 .weatherIMG{max-width: 90px}
   .weatherData {width:100%;}
   .smartywidgetCNT .smartyBlock div.titles {width:auto; font-weight:normal; font-size:90%; margin-top:-2px; margin-bottom:0.3em;}
   .multipleValuesCNT {min-width:110px !important;}
   .coldValueMini {/*left:52%;*/left: 60px; /*top:2px;*/ font-size:80%;}
   .hotValueMini  {/*left:52%;*/left: 60px; /*top:23px;*/ top:-1px; font-size:80%;}
   .hotValueMini img {top: 5px}
   .hotValueMini span {float: right;margin-top: 10px;}
   .iconValue {width:26px; height:26px;}
   .valueWind, .valueRain {margin-top:22px!important;}
   .multipleValuesCNT {border-right: 1px solid #ddd; padding-right:3px;padding-bottom:3px;}
   .smartyBlock.sbottom {display:none;}
   .textBottom {float:left; display:inline-block; font-size:85%; padding:3px 5px;}
   .BTNsmartyMeteoBottom {float:left; padding:4px 4px 2px 4px; margin:0; width:auto;}
   .BTNonlyH {display:block;}
   .smartywidgetCNT .smartyBlock1{width:50%}
   .smartywidgetCNT .smartyBlock2{width:50%;float: right;margin-top: 6px;}
   .smartywidgetCNT .smartyBlock1 .sblockFirst01{width:40%/*;max-width: 190px;*/;min-width: 115px;}
   .smartywidgetCNT .smartyBlock1 .multipleValuesCNT{width:45%}
   .valueBigData,valueBig {float:left}
   .valueBigLine.valueBigLine01{font-size:96%}
   .valueBig{font-size: 3.5em}
   .valueBigLine .valueMax, .valueBigLine .valueMin {left:65px}
   .iconValue {width: 20px;height: 20px;}
   /*.valueRain{margin-top: 19px !important;}*/
}

@media only screen and (min-width:530px){
   .smartywidgetCNT .smartyBlock1 .multipleValuesCNT{width:119px}
   .multipleValuesCNT .multipleValues {float:left; clear:none; width:50%; margin-top: 0 !important;}
   .iconValue {display:inline;width:20px; height:20px}
   .smartyHeader {padding: 5px;}
   .valueUva, .valueHumidity {margin-bottom: 5px !important;margin-top: 10px !important;}
} 

@media only screen and (min-width:621px) {
   /*.valueWind, .valueRain {margin-top: 15px !important;}*/
   .smartywidgetCNT {width:100%; float:left;margin-top: 0;}
   .smartywidgetCNT .smartyBlock {/*height:106px;*/}
   .smartywidgetCNT .smartyHeader {padding:6px;}
   /*.smartywidgetCNT .smartyBlock {width:auto;float: left;}*/
   .weatherIMG {width: 56%; margin-left:5%; margin-top: -8px;}
   .weatherP {min-height:15px; font-size:85%; line-height:115%; width:98%; margin-top:-3px;}
   /*.sblock.sblockWeather01, .sblock.sblockWeather02 {width: 130px;}*/
   .sblock.sblockWeather01, .sblock.sblockWeather02 {width: 50%;}
   .sblock.sblockWeather01 .weatherIMG, .sblock.sblockWeather02 .weatherIMG{max-width: 90px}
   .weatherData {width:100%;}
   .smartywidgetCNT .smartyBlock div.titles {width:auto; font-weight:normal; font-size:90%; margin-top:-2px; margin-bottom:0.3em;}
   /*.multipleValuesCNT {width:189px;}*/
   .multipleValuesCNT .multipleValues {float:left; clear:none; width:50%; margin-top: 10px !important;}
   .coldValueMini {/*left:52%;*/left: 80px; /*top:2px;*/ font-size:80%;}
   .hotValueMini  {/*left:52%;*/left: 80px; /*top:23px;*/ top:-1px; font-size:80%;}
   .hotValueMini img {top: 5px}
   .hotValueMini span {float: right;margin-top: 10px;}
   .iconValue {width:30px; height:30px;}
   .valueWind, .valueRain {margin-top:22px!important;}
   .multipleValuesCNT {border-right: 1px solid #ddd; padding-right:3px;padding-bottom:3px;margin-top: 0px;}
   .smartyBlock.sbottom {display:none;}
   .textBottom {float:left; display:inline-block; font-size:85%; padding:3px 5px;}
   .BTNsmartyMeteoBottom {float:left; padding:4px 4px 2px 4px; margin:0; width:auto;}
   .BTNonlyH {display:block;}
   .smartywidgetCNT .smartyBlock1{width:55%}
   .smartywidgetCNT .smartyBlock2{width: 45%;float: right;margin-top: 0;}
   .smartywidgetCNT .smartyBlock1 .sblockFirst01{width:40%/*;max-width: 190px;*/}
   .smartywidgetCNT .smartyBlock1 .multipleValuesCNT{width:55%}
   .valueBigData, .valueBig {float:left;}
   .valueBig{font-size: 4em;}
   .valueBigLine .valueMax, .valueBigLine .valueMin {left: 75px;margin-top: -10px;}
   
}

@media only screen and (min-width:654px) {
    .hotValueMini span {float: right;margin-top: 10px;}
    .hotValueMini {left: 100px;}
    .coldValueMini {left: 100px;}
}

@media only screen and (min-width:664px) {
    .hotValueMini span {margin-top: -10px;}
}

@media only screen and (min-width:665px) {
    .hotValueMini span {margin-top: 10px;}
}
@media only screen and (min-width:681px) {
    .hotValueMini span {float: right;margin-top: 10px;}
}

@media only screen and (min-width:890px) {
    .smartywidgetCNT .smartyBlock1 .sblockFirst01 {width: 30%;}
    .smartywidgetCNT .smartyBlock1 .multipleValuesCNT {margin-left: 10%;}
}

.rollover {
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	background:url("../../images/widget_public/img_lupa.png") center center no-repeat #000;
	cursor: pointer;
	height: 60%;
	width: 100%;
	position: absolute;
	z-index: 10;
	opacity: 0;
        margin: -3px;
        border-radius: 9px;
}

.rollover:hover {
	opacity: .7;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}