/* begin ---------------------- weather styles */
.weather-container {position:relative}
.weather-container .banner.giga [id^="bbb"] {margin-top:10px;margin-bottom:10px}
#weather-header {min-height:calc(40vh - 60px);padding:50px 0 65px;background-color:#4d6880;background-position:50% 50%;background-repeat:no-repeat;background-size:cover;color:#fff;position:relative}
#weather-header:before {content:" ";display:block;width:100%;height:100%;position:absolute;top:0;left:0;
    background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(135deg,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#00000000',GradientType=1 );
}
#weather-header > .container-fluid {position:relative;z-index:10}
#weather-header .temp .deg:after {font-family:Roboto}
#weather-header .item [data-icon="wicon"]:before {display:block}
#weather-header .now {float:left;width:40%;padding-left:20px}
#weather-header .now .page-title {margin:-25px 0 5px;font-size:18px;line-height:20px}
#weather-header .now .page-title .weekday {text-transform:lowercase}
#weather-header .now .title {display:inline-block;margin:25px 0 30px -3px;padding-right:28px;font-weight:500;font-size:40px;line-height:48px;text-transform:uppercase;color:#f15a25;letter-spacing:1px;cursor:pointer;position:relative;text-shadow:0 3px 0 rgba(0,0,0,.25)}
#weather-header .now .title:before {content:" ";display:block;width:0;height:0;border-top:8px solid rgba(0,0,0,.25);border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;top:50%;right:0;margin-top:-1px}
#weather-header .now .title:after {content:" ";display:block;width:0;height:0;border-top:8px solid #f15a25;border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;top:50%;right:0;margin-top:-4px}
#weather-header .now a[data-trigger="open-cities"] {display:block;margin:-30px 0 10px;line-height:20px;color:#fff;text-decoration:underline}
#weather-header .now .details {margin-left:130px;white-space:pre-line}
#weather-header .now [data-icon="wicon"] {float:left;font-size:100px;text-shadow:0 3px 0 rgba(0,0,0,.25)}
#weather-header .now [data-icon="wicon"]:before {width:100px;height:150px;margin:0 auto;line-height:150px}
#weather-header .now .temp {margin-left:120px;height:70px;font-weight:500;font-size:64px;line-height:70px;text-shadow:0 3px 0 rgba(0,0,0,.25)}
#weather-header .now .temp .lo {margin-left:-20px;font-size:45%}
#weather-header .now .temp:only-child {line-height:135px}
#weather-header .now p {display:inline-block;margin-bottom:8px}
#weather-header .now p:last-child {margin-bottom:0}
#weather-header .now [data-icon^="wind"] {position:relative;padding-left:20px}
#weather-header .now [data-icon^="wind"]:before {display:block;position:absolute;left:0;top:50%;margin-top:-8px;font-size:14px}
#weather-header .now [data-icon="wind-"] {padding-left:0}
#weather-header .now [data-icon="wind-"]:before {display:none}
#weather-header .forecast {margin-left:40%;text-align:center;position:relative}
#weather-header .forecast:after {content:" ";display:block;clear:both}
#weather-header .forecast .controls .btn {width:40px;height:40px;border:0;border-radius:50%;background:#fff;font-size:20px;position:absolute;top:50%;margin-top:-25px;box-shadow:0 1px 15px 1px rgba(0,0,0,.5);z-index:10}
#weather-header .forecast .controls .btn:before {display:block;line-height:40px;color:#34495e}
#weather-header .forecast .controls .btn[data-icon="prev"] {left:-20px}
#weather-header .forecast .controls .btn[data-icon="next"] {right:-20px}
#weather-header .forecast .controls .btn[data-icon="prev"]:before {text-indent:-3px}
#weather-header .forecast .controls .btn[data-icon="next"]:before {text-indent:3px}
#weather-header .forecast .controls .btn.disabled {cursor:default;opacity:0;visibility:hidden}
#weather-header .forecast .item {float:left;width:calc(25% - 2px);margin:0 1px;padding:0 10px 15px;background:rgba(0,0,0,.5)}
#weather-header .forecast .item .title {margin:0 -10px;padding:7px 5px 5px;background:#000}
#weather-header .forecast .item .title strong {display:block;font-weight:400;font-size:16px;line-height:18px;text-transform:uppercase}
#weather-header .forecast .item .title .small {font-size:10px;color:rgba(255,255,255,.75)}
#weather-header .forecast .item .details {font-size:13px;line-height:16px;white-space:pre-line}
#weather-header .forecast .item .temp {font-weight:500;font-size:32px;line-height:40px}
#weather-header .forecast [data-icon="wicon"] {margin:25px 0 10px}
#weather-header .forecast .item p {display:inline-block;margin-bottom:5px}
#weather-header .forecast .item [data-icon^="wind"]:before {float:left;margin-right:5px;font-size:10px;line-height:14px}
#weather-header .forecast .item [data-icon="wind-"]:before {display:none}
#weather-header .forecast .item.past {color:rgba(255,255,255,.5)}
#weather-header .forecast .item.selected {box-shadow:0 0 0 1px #f70;position:relative;z-index:5;background:#000}
#weather-header .forecast .item.selected .title {background:#f70;position:relative}
#weather-header .forecast .item.selected .title:after {content:" ";display:block;width:0;height:0;border-top:8px solid #f70;border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;bottom:-8px;left:50%;margin-left:-8px}
#weather-header .provider {margin:20px 0 -40px;text-align:right;line-height:20px;text-shadow:0 2px 0 rgba(0,0,0,.25);position:relative}
#weather-header .provider > .container-fluid {padding-right:20px}
#weather-header .provider a {color:#fff;text-decoration:underline}
#weather-header.loading:before {background-color:rgba(0,0,0,.5) !important}
#weather-header.loading:after {background-image:url(../img/loading-light.svg)}
#weather-nav {margin-top:-8px;padding-top:8px;box-shadow:inset 0 -50px 0 #2a4485;text-align:left;font-size:0;color:#fff;white-space:nowrap;z-index:10}
body.mobile #weather-nav {overflow-x:auto;-webkit-overflow-scrolling:touch}
#weather-nav ul {list-style:none;margin:0;padding:0}
#weather-nav li {display:inline-block}
#weather-nav a {display:block;padding:14px 25px 16px;box-shadow:-1px 0 0 rgba(255,255,255,.1);font-size:16px;line-height:20px;color:#fff}
#weather-nav .gismeteo a {box-shadow:-1px 0 0 rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
#weather-nav a:hover {background:#0c266a;text-decoration:none;color:#fff}
#weather-nav .selected a {background:#f15a25;position:relative;color:#fff}
#weather-nav .selected a, #weather-nav .selected+li a, #weather-nav li:first-child a {box-shadow:none}
#weather-nav .selected a:after {content:" ";display:block;width:0;height:0;border-bottom:8px solid #f15a25;border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;top:-8px;left:50%;margin-left:-8px;z-index:105}
#weather-nav .more a {background:#f15a25;box-shadow:-1px 0 0 rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
#weather-nav .more a:hover {color:#fff}
#weather-nav .gismeteo.more a {background:none;color:#fff}
#weather-nav .gismeteo.more a:hover {background:#f15a25}
#weather-nav [data-icon="next"]:before {width:16px;float:right;margin:3px -10px 0 10px}
#open-cities-btn {position:absolute;left:15px;bottom:-55px;border:0;color:#333333;background-color:#ffffff !important;z-index:10;box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1) !important;line-height:40px; border-radius: 4px;}
#open-cities-btn:hover {background:#f2f2f2 !important;opacity:1}
#open-cities-btn[data-icon="menu"]:before {float:right;margin-left:12px;margin-right:-2px;line-height:40px}
#weather-cities {opacity:0;visibility:hidden;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1050;background:url(../img/overlay.png);text-align:center;transition:opacity .15s linear}
#weather-cities .close {position:absolute;top:-20px;right:10px;width:40px;height:40px;margin-top:0 !important;border-radius:50%;font-size:0;color:#fff;background:#e03b00;opacity:1;filter:alpha(opacity=100);outline:none !important;z-index:110}
#weather-cities .close:before {display:block;font-size:16px;line-height:40px}
#weather-cities .close:hover {background-color:#d01d00}
#weather-cities > .container-fluid {width:500px;max-height:calc(100vh - 60px);margin-top:30px;padding-right:30px;padding-left:30px;position:relative;transform:translate(0, -25%);transition:transform .3s ease-out}
#weather-cities .cities-list-container {display:table;table-layout:fixed;width:100%;background:#fff;border-radius:1px;box-shadow:0 0 20px rgba(0,0,0,.2)}
#weather-cities .type-title {padding:15px 20px;background:#f15a25;font-size:18px;line-height:22px;color:#fff}
#weather-cities .cities-list {display:table-cell}
#weather-cities .cities-list+.cities-list {background:#f4f5f7;box-shadow:inset 1px 0 0 rgba(77,104,128,.1)}
#weather-cities .cities-list+.cities-list .type-title {background:#2a4485}
#weather-cities .cities-list+.cities-list ul a:hover {background:rgba(77,104,128,.1)}
#weather-cities ul {list-style:none;max-height:calc(100vh - 130px);overflow-x:hidden;overflow-y:auto;margin:10px;padding:0;text-align:left}
#weather-cities ul a {display:block;padding:10px 20px;line-height:20px;color:#34495e}
#weather-cities ul a:hover {background:#f5f5f5;text-decoration:none;color:#000}
#weather-cities ul .selected a {font-weight:700;color:#f70}
#weather-cities.active {opacity:1;visibility:visible}
#weather-cities.active > .container-fluid {transform:translate(0,0)}
#weather-map {height:calc(60vh - 50px);min-height:700px;position:relative}
#weather-map .map-item {width:64px;height:64px;border-radius:50%;background:#34495e;color:#fff;text-align:center; cursor: pointer; display:none}
#weather-map .map-item.is-visible {display:block}
#weather-map .map-item [data-icon="wicon"] {display:block;width:32px;height:32px;margin:5px auto 0;font-size:32px}
#weather-map .map-item .temp {margin-top:-2px;font-size:16px;line-height:20px;text-shadow:0 0 15px #34495e}
#weather-map .map-item .temp .hi {font-size:15px}
#weather-map .map-item .temp .lo {margin-left:-2px;font-size:11px}
#weather-map .map-item.selected {background:#f70}
#weather-map .map-item.selected .temp {text-shadow:0 0 15px #f70}
/* end ---------------------- weather styles */

/* begin ---------------------- weather themes */
#weather-header.sun {background-image:url(../img/weather/bg-sun.jpg);background-position:100% 50%}
#weather-header.mist {background-image:url(../img/weather/bg-sun.jpg);background-position:100% 50%}
#weather-header.sun[class~="c1"] {background-image:url(../img/weather/bg-sun-2.jpg);background-position:100% 0%}
#weather-header.sun[class~="c2"] {background-image:url(../img/weather/bg-c2.jpg);background-position:0% 50%}
#weather-header.sun[class~="c3"] {background-image:url(../img/weather/bg-c3.jpg);background-position:25% 50%}
#weather-header.sun[class~="c4"] {background-image:url(../img/weather/bg-c4.jpg);background-position:50% 50%}
#weather-header.sun[class~="r1"] {background-image:url(../img/weather/bg-r1.jpg);background-position:50% 50%}
#weather-header.sun[class~="r2"] {background-image:url(../img/weather/bg-r2.jpg);background-position:50% 50%}
#weather-header.sun[class~="r3"] {background-image:url(../img/weather/bg-r3.jpg);background-position:50% 50%}
#weather-header.sun[class~="r4"] {background-image:url(../img/weather/bg-r4.jpg);background-position:50% 50%}
#weather-header.sun[class~="st"] {background-image:url(../img/weather/bg-c2-st.jpg);background-position:50% 50%}
#weather-header.sun.st[class~="c3"], #weather-header.sun.st[class~="c4"] {background-image:url(../img/weather/bg-c3-st.jpg);background-position:50% 50%}
#weather-header.moon {background-image:url(../img/weather/bg-moon.jpg);background-position:100% 50%}
#weather-header.n.mist {background-image:url(../img/weather/bg-moon.jpg);background-position:100% 50%}
#weather-header.moon[class~="r1"], #weather-header.moon[class~="r2"] {background-image:url(../img/weather/bg-moon-r1.jpg);background-position:100% 20%}
#weather-header.moon[class~="r3"] {background-image:url(../img/weather/bg-r3.jpg);background-position:50% 50%}
#weather-header.moon[class~="r4"] {background-image:url(../img/weather/bg-r4.jpg);background-position:50% 50%}
#weather-header.moon[class~="st"] {background-image:url(../img/weather/bg-moon-st.jpg);background-position:100% 100%}
#weather-header.moon.st[class~="r3"], #weather-header.moon.st[class~="r4"] {background-image:url(../img/weather/bg-moon-r3-st.jpg);background-position:100% 100%}
/* end ---------------------- weather themes */

/* begin ---------------------- weather icons */
[data-icon="wicon"] {font-size:64px}
/* end ---------------------- weather icons */

/* begin -------------- responsive styles */
/********** wallpaper class & bigger than 1100px */
@media (min-width:1101px) {
    body.wallpaper #weather-header {min-height:0}
    body.wallpaper #weather-header > .container-fluid {padding-right:30px}
    body.wallpaper #weather-header .provider > .container-fluid {padding-right:50px}
    body.wallpaper #weather-nav > .container-fluid {padding:0}
}
/********** bigger than 900px */
@media (min-width:901px) {
    #weather-header .forecast .item:first-child:nth-last-child(3), #weather-header .forecast .item:first-child:nth-last-child(3) ~ .item {width:calc(33.33% - 2px)}
    #weather-header .forecast .item:first-child:nth-last-child(2), #weather-header .forecast .item:first-child:nth-last-child(2) ~ .item {width:calc(50% - 2px)}
}
/********** smaller than 901px */
@media (max-width:900px) {
    #header {box-shadow:none}
    .weather-container {display:-webkit-flex;display:flex;flex-direction:column-reverse}
    .weather-container .banner.giga {order:1}
    #weather-header {padding:25px 0}
    #weather-header > .container-fluid {display:table;width:100%;padding-top:45px;padding-right:20px;padding-left:0}
    #weather-header .now {display:table-cell;float:none;padding:25px 20px 50px 0;vertical-align:middle;text-align:center}
    #weather-header .now .page-title {position:absolute;top:0;left:0;width:100%;margin:0;padding:0 25px;text-align:left}
    #weather-header .now .title {margin-left:28px}
    #weather-header .now [data-icon="wicon"] {float:none;margin-bottom:-10px}
    #weather-header .now .details {margin-left:0}
    #weather-header .now .temp {margin-left:0}
    #weather-header .forecast {margin-left:0;display:table-cell}
    #weather-header .forecast .item {width:calc(50% - 10px);margin:5px}
    #weather-header .forecast .item:first-child:nth-last-child(3) + .item + .item {width:calc(100% - 10px)}
    #weather-header .forecast .item.selected {box-shadow:0 0 0 2px #f70}
    #weather-header .forecast .controls .btn {margin-top:-20px}
    #weather-header .forecast .controls .btn[data-icon="next"] {right:-15px}
    #weather-header .forecast .controls .btn[data-icon="prev"] {left:-15px}
    #weather-header .provider {margin-bottom:0}
    #weather-header .provider > .container-fluid {padding-right:35px}
    #weather-nav-sticky-wrapper {height:50px !important}
    #weather-nav {margin-top:0;margin-bottom:-8px;padding-top:0;padding-bottom:8px;box-shadow:inset 0 50px 0 #1c78b4;z-index:100}
    #weather-nav > .container-fluid {padding:0}
    #weather-nav a {box-shadow:-1px 0 0 rgba(255,255,255,.1)}
    #weather-nav a:hover {background:none}
    #weather-nav .selected a {background:#f70}
    #weather-nav .selected a:after {top:auto;bottom:-8px;-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)}
    #weather-nav .gismeteo a {background:none}
    #weather-nav .gismeteo.more a {background:none !important;box-shadow:-1px 0 0 rgba(255,255,255,.1)}
    #weather-map {display:none}
    #open-cities-btn {display:none}
}
/********** smaller than 701px */
@media (max-width:700px) {
    #weather-header {padding:0}
    #weather-header > .container-fluid {padding:0}
    #weather-header .now {display:block;width:100%;padding:0}
    #weather-header .now .page-title {display:none}
    #weather-header .now .item {padding:0 10px 10px}
    #weather-header .now [data-icon="wicon"] {display:table-cell;vertical-align:middle;margin-bottom:0;padding:10px}
    #weather-header .now [data-icon="wicon"]:before {height:100px;line-height:100px}
    #weather-header .now .temp {display:table-cell;vertical-align:middle;padding:10px 10px 10px 0;white-space:nowrap;font-size:50px;line-height:56px}
    #weather-header .now .details {display:table-cell;vertical-align:middle;width:100%;padding:0 10px 20px 0;text-align:right}
    #weather-header .now p {margin-bottom:5px}
    #weather-header .forecast {display:block}
    #weather-header .forecast .controls {display:none}
    #weather-header .forecast .item {width:100%;margin:0 0 1px;padding:0}
    #weather-header .forecast .item .title {margin:0;padding:10px 25px 0;background:none;text-align:left}
    #weather-header .forecast .item .title strong {display:inline-block;margin-right:5px;line-height:20px}
    #weather-header .forecast .item .title .small:before {content:"("}
    #weather-header .forecast .item .title .small:after {content:")"}
    #weather-header .forecast [data-icon="wicon"] {display:table-cell;vertical-align:middle;margin:0;padding:10px}
    #weather-header .forecast .item .temp {display:table-cell;vertical-align:middle;padding:10px}
    #weather-header .forecast .item .details {display:table-cell;vertical-align:middle;width:100%;padding:0 20px 20px 0;text-align:right}
    #weather-header .forecast .item p:last-child {margin-bottom:0}
    #weather-header .forecast .item.selected {box-shadow:none;background:rgba(0,0,0,.5)}
    #weather-header .forecast .item.selected .title {background:none}
    #weather-header .forecast .item.selected .title:after {display:none}
    #weather-header .forecast .item.past {background:rgba(0,0,0,.25);color:rgba(255,255,255,.25)}
    #weather-header .forecast .item.past .title .small {color:rgba(255,255,255,.25)}
    #weather-header .provider {margin:0;background:#000;padding:15px 0}
    #weather-header .provider > .container-fluid {padding-right:20px}
}
/********** smaller than 541px */
@media all and (max-width:540px) {
    #weather-header .now .temp {font-size:40px;line-height:46px}
    #weather-header .now .temp .lo {display:block;margin-left:0;text-align:right;font-size:50%;line-height:20px}
}
/********** smaller than 421px */
@media all and (max-width:420px) {
    #weather-header .now .item {padding-left:5px}
    #weather-header .now [data-icon="wicon"] {padding-left:0}
    #weather-header .now .details {vertical-align:bottom;padding-bottom:10px;font-size:13px;line-height:16px}
}
/* end -------------- responsive styles */